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.
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.
This command will create and modify several files:
main.js(main configuration file)
preview.js(customize the presentation of components)
*.stories.tsx(component documentation follows this naming convention)
Storybook dependencies are added
build-storybookNPM scripts are added
storybook command to view the newly created Storybook environment:
The initialization process creates several demo components and stories. We need to update these to reference our existing
First, remove all of the example stories created during the initialization process.
Next, we will create a new
Introduction.stories.mdx file which will include the content of our libraries