A React UI Component Library for System

• Install Node.js directly, through nvm, or with brew install node.
• Run npm i to install package dependencies.

We use Storybook to develop and document components. To see the current state of the component library, run

npm run storybook

Any changes you make to underlying files will update the storybook after saving.

The library follows Atomic Design principles and the components directory structure reflects this hierarchy. Size and color tokens should be used whenever possible and are located in the themes directory.

Each component should have:

• Component.tsx: the React styled component
• Component.types.ts: interfaces and associated types for the component
• Component.stories.tsx: a story showcasing the component under different parameterizations

To view the current build and its associated Storybook instance:

• Log into Chromatic with your GitHub account
• Select the system-ui project
• Select the most recent build, which will display the build's information, tests, and components
• In the "System" section, click the gray "View Storybook" button on the right