WorldID Integrations UIKit

This is a UI Kit for WorldID Integrations. It's built with React and TypeScript, and uses Storybook for component development and documentation. The UI Kit includes several components, each with its own Storybook story and tests.

Components

• Button
• PrimaryLayout
• VerificationSwitcher
• VerificationLabel
• Command
• Dialog

Setup

To set up the project, run the following command:

pnpm install

Development

To start the development server (Storybook), run:

pnpm start

This will start Storybook on localhost:6006. You can view and interact with the components in isolation here.

Linting and Code Formatting

To lint the code and check for formatting errors, run:

pnpm lint

To automatically fix linting and formatting errors, run:

pnpm lint:fix

Testing

To run the tests, use:

pnpm test

Publishing

Before publishing, make sure to run the release script:

pnpm release

This will lint the code, build the project, and publish it to npm.

Storybook

Storybook is a tool for developing and documenting components in isolation. Each component has a corresponding story file (e.g., button.stories.tsx for the Button component) where you can define different states or variations of the component.

To build a static version of the Storybook site, run:

pnpm run storybook:build

To deploy the Storybook site to GitHub Pages, run:

pnpm run storybook:deploy

For more information on how to use Storybook, refer to the official Storybook documentation.