The Knowit Design system provides a set of organized tools, patterns and practices that serve as the foundation for Knowit’s digital products and experiences.

The initial project skeleton was created using Create React App and storybook init.

To run the app in development mode, run the following commands:

npm install
npm run prepare
npm run storybook

This will open http://localhost:6006 in your browser.

To build the app for production, run:

npm run build-storybook

Once the app is built, it is ready to be deployed.

To run tests, use the following command:

npm run test-storybook

To get the test coverage, use the following command:

npm run test-storybook -- --coverage

The app is published to Chromatic on every push using GitHub Actions as CI/CD -tool.

Please refer to the CI/CD -automation documentation for instructions on how to configure GitHub Actions. The necessary configurations can be found in the .github/workflows folder.

When you are making a pull request to the main branch, the first thing to do is to review the visual changes that the pull request introduces. This is done in the Chromatic UI review.

Accessibility tests are done by the storybook-addon-a11y package. Accessibility tests are also ran as part of test-storybook by the configured axe-playwright package.

After accepting the changes in Chromatic, the code changes can be reviewed in Github. When the pull request is merged, the changes are automatically deployed.