equip-ui

Component library for Equip

Scripts

npm run storybook

This will start up Storybook.js, which is a tool for viewing frontend components in a library-like format where you can preview and test interactions, variants, and mock props of components defined in `.stories.tsx files.

npm run build-storybook

This will build a production-ready version of Storybook that can be deployed on to a hosting service like AWS CloudFront.

npm run build

This will generate production-ready builds of the component library in `lib/ that can be consumed via an npm module.

npm start

This will start up a nodemon instance that will listen to changes within src/ and re-run npm run build whenever changes are made.

npm run lint and npm run lint-fix

Lint and/or fix based on ESLint rules defined by .eslintrc.js.

Chromatic

Chromatic is a neat tool built by the creators of Storybook that allow us to publish our Storybook to the cloud as well as do snapshot testing between builds and stories. Having Chromatic also allows us to provide external stakeholders with a place they can view and interact with our components and stories that we've written, and allows product and QA to visually see components in isolation outside of our development environment.

To view our Chromatic dashboard, you need to have an account on Chromatic (sign in via Github) and have collaborated/contributed to the equip-ui repo. All contributors are automatically added to the Chromatic dashboard for equip-ui, and from there you can view the stories, components, snapshot tests, etc. all from Chromatic.

Resources

Storybook best practices