Storybook environment
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
andbuild-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/*
This page is a preview of The newline Guide to Building a Company Component Library