Getting Started with Story Book

This project was bootstrapped with Create React App and Story Book by the Black Box product team.

In the project directory, you can run the following:

npm install

This should install everything needed to run storybook, as well as all the dependencies needed for the components.

npm run storybook

This will start storybook, which should automatically open your browser to: http://localhost:6006

The page will reload if you make edits.
You will also see any lint errors in the console.

Work Flows

Currently the repo is setup to GitHub Actions, which automatically publishes the development branch to Chromatic at this URL. Chromatic tests are run whenever any code is pushed or merged into the development branch. Once merged, the release action is run, and if all tests are passed, the code is published to the npm package. NB, you need to add a label to the PR request for the release action to work.

Building a component

Make sure to adhere to the following checklist:

• Default props are declared
• Proptypes are declared
• SCSS file sits with js component and uses sass variables from variables.scss where possible
• Component is presentational and doesn't contain logic, but can receive logic through correct props
• All dependencies are noted in the storybook component documentation
• Correct SB controls are put in place for design team to interact with component

Creating a pull request

• Add a label to your pull request documentation, feature or bug
• Request a code review
• Merge in the code
• Log in to your chromatic account and accept the changes / or ask a designer to accept them
• Check to see that your update has reflected on Chromatic
• Check to see that your update has reflected in the npm library
• Test it by pulling it into another project to see it reflects