Request Network Web Components

Introduction

This repo contains a collection of web components for quickly integrating Request Network into your web application.

The components are built using Svelte but compiled to Web Components making them usable in any web environment, regardless of the framework.

Usage

Usage depends on the component. See packages/<package>/README.md

Component	NPM Package
@requestnetwork/add-stakeholder
@requestnetwork/create-invoice-form
@requestnetwork/invoice-dashboard
@requestnetwork/payment-widget
@requestnetwork/single-invoice
@requestnetwork/shared

Developing

# Clone the repository
git clone https://github.com/RequestNetwork/web-components.git
# Navigate into the cloned repositorycd web-components
# Install all dependencies
npm install
# Build all packages locally
npm run build
# Link local web-component packages into your app
npm run link:all --app-path=/path/to/app
## Examples
npm run link:all --app-path=../invoicing-template
npm run link:all --app-path=../rn-checkout
# Navigate to your project directory where the web components are usedcd<project># Use local packages instead of the deployed ones
npm link @requestnetwork/create-invoice-form @requestnetwork/invoice-dashboard @requestnetwork/single-invoice
npm link @requestnetwork/payment-widget

Further details specific to the component can be found in the relevant pacakges//README.md

Delete all node_modules/ directories

npm run deep-clean

NPM Workspaces

Run a command in the context of all workspaces. Ignore workspaces missing target script.

npm run test --workspaces --if-present

Run a command in the context of specific workspaces.

npm run test --workspace=add-stakeholder --workspace=other

Release

Run changeset command to create a changeset file.

npx changeset

Run changeset version command to bump the version of the packages that have changesets.

npx changeset version

Push the changes to the remote repository. Once the changes are merged, the new versions will be deployed automatically using OIDC Trusted Publisher authentication.

For more info about working with NPM workspaces see: https://docs.npmjs.com/cli/v8/using-npm/workspaces