While developing our library we need the ability to build, test, and document our components in isolation. Storybook is a tool that allows us to develop our components locally while mimicking a product environment.

In this lesson we will be creating a new Storybook environment in our codebase where we can can document and visually test our components.

Initialize Storybook#

To add Storybook to our library we can use the Storybook CLI. The CLI will look at our dependencies and create a default Storybook configuration for a React and TypeScript codebase.

npx sb init

This command will create and modify several files:

• .storybook

  • main.js (main configuration file)

  • preview.js (customize the presentation of components)

• src/stories

  • *.stories.tsx (component documentation follows this naming convention)

• package.json

  • Storybook dependencies are added

  • storybook and build-storybook NPM scripts are added

Run the storybook command to view the newly created Storybook environment:

npm run storybook

Story creation#

The initialization process creates several demo components and stories. We need to update these to reference our existing Button component.

First, remove all of the example stories created during the initialization process.

rm -rf src/stories/*

Next, we will create a new Introduction.stories.mdx file which will include the content of our libraries README.md file.

<!-- File: src/stories/Introduction.stories.mdx -->

import { Meta, Description } from '@storybook/addon-docs/blocks';

import README from '../../README.md';