Skip to main content

Storybook

Storybook is a development environment tool that is used as a playground for UI components allowing developers to create and test components in isolation.

Deploy the shared UI components to document the design system.

Projects​

Open source project with storybook implementations.

Component Driven Development​

The following compiles a bundle in dist/storybook/shared-ui which can be directly deployed to a static server.

nx build-storybook shared-ui

Implement Component Driven Development to implement an Atomic Design System.

Presentation​

  • Buttons
  • Cards

NX Config​

NX Storybook with TailwindCSS

Create a shared UI library directory. In the initial setup you need to split the tailwind configuration file between base workspace and the specific app where theme settings are made.

npx nx g @nrwl/react:lib ui --directory=shared --style=css

Create Shared Components​

Create a shared component with the following command. Confirm desire to export the component

npx nx g @nrwl/react:component [component-name] --project=shared-ui --style=css
note

Providing --project we make sure it gets generated into our new shared/ui library.

Confirm option to export the newly made component.

To shared component into Storybook run the following:

nx g @nrwl/react:stories shared-ui
note

Currently there is a bug preventing stories from being created

Launch Storybook​

nx storybook shared-ui

Deploy​

npx nx build-storybook shared-ui
npx http-server dist/storybook/shared-ui

Storybook Testing​

Cypress​

Leverage e2e testing using Cypress to identify when Storybook components fail to render.

npx nx e2e storybook-e2e-ui-e2e --watch

React Testing Library​

Test component behaviour

CI​

Add Storybook to CI pipeline