1. Home
  2. Docs
  3. Engineering
  4. Storybook

Storybook

What is Storybook and Why do we Use It?

Storybook is UI to explore components in our project. Using it, developers can browse available components

How to Use Storybook to Explore React Components

Lovia PWA project should have Storybook already set up. You can check this if the project has a .storybook/ folder. Launch Storybook by:

yarn storybook

Open http://localhost:6006/ . Now you can explore and play with components.

Adding/Editing Stories

Add or edit stories in src/stories/*.stories.tsx (in a project, these stories files can be anywhere)

Advanced: Setting Up Storybook

Storybook Tutorial videos

# Create an UmiJS project with antd
mkdir ant-storybook-v6
cd ant-storybook-v6
yarn create umi
# Choose app
# Choose antd + internationalization

# Add typescript, so storybook will detect it as TypeScript project instead of JavaScript project
yarn add --dev typescript

# Install storybook
npx sb init

# Start storybook
yarn storybook

Open http://localhost:6006/

Note: Storybook vs Bit.dev as component explorer? Bit seems to be more invasive, and opinionated while not entirely inline with what we want. Storybook is simpler to get started, can integrate with existing project, and has useful addons beyond just UI components.

Was this article helpful to you? Yes No

How can we help?

Leave a Reply

Your email address will not be published. Required fields are marked *