Storybook

Kyle Coberly

What's Storybook?

  • Robust interactive documentation
  • Development workshop
  • Accessibility checks
  • Testing platform

Demo

Setup

  1. Initialize with `npx storybook init`

  2. Run storybook with `npm run storybook`

  3. Add `.stories.js` files

  4. Export metadata as default

  5. Make a component template

  6. Export stories as named exports

From your app:

Bonus! Markdown

  • Make a `.stories.mdx` file
  • Use the `Meta` and `Story` components
  • Make a template
  • Write some markdown

Extra Bonus! a11y & Testing:

  • Install the dependencies:
    • `@storybook/test-runner`
    • `@storybook/addon-interactions`
    • `@storybook/testing-library`
    • `@storybook/jest`
    • `@storybook/addon-a11y`
  • Configure `.storybook/main.js`
  • Add `.play()` method calls
  • Run the tests with `npx storybook-test --watch`

Kyle Coberly

storybook

By Kyle Coberly