summary of why we use storybook for rocket science
- isolation of scope
- renders components in browser
- powerful addons
- statically deploying with each code change
Addons
Leveraging the addons included, anyone with access to the most recent deployment of your team's storybook can view a wide array of information.
Readme
in the Readme tab, the component level docs from above will be displayed. Not only are developers able to benefit from this while working in their code editor, but so are other disciplines who can build a better understanding of blockers/hurdles that may be in the context of their scope of work.
Tests
In the Tests tab, folks will be able to find out how many tests are written for the component they're viewing, and how many are passing/failing/pending/todo.
Accessibility
in the Accessibility tab, an audit for ADA compliance will be run to check for things like contrast ratios of background/text colors, aria labels and unique IDs.
Controls
In the Controls tab, users are able to modify the dynamic values that each component receives as props. This will enable even non-developers to test edge cases where the data passed as props may come in some unaccounted-for manner, or even to identify new cases to test against.
Performance
In the Performance tab it will display metrics surrounding component performance from the initial request to the server all the way to the end render on the client side. From here it's also possible to pin a set of results as a baseline to compare newly generated results against, as well as save/load results for reuse later.