If you’re building a web application, you’re probably using a framework. And frameworks use components. Storybook enables you see and edit these components.

What is Storybook?

Storybook enables you to build documentation of the reusable UI ccomponents within your application. Let’s say you have a component such like buttons, a form and a navigation for a page. These components can be put into Storybook and then people can come and view/edit these components, and see what they would look like if you edited certain parts.

Setting Up Storybook in Your Application

npx create-react-app [app-name] --template typescript

cd into directory

npx storybook init

npm run storybook

Building Documentation and Adding Tests

Within your application, you will need to specify stories for the components you want documented. Essentially the story captures the UI component in it’s rendered state.

Much like tests following the format of componentName.test.tsx, with stories you have the following, componentName.stories.ts or componentName.stories.js.

Stories can take in arguments, props etc. which all enable for better documentation.

Take the example below, a button. Here you can edit the name, background colour, size and change the name of the label.

// Button.stories.tsx

import { ComponentStory, ComponentMeta } from '@storybook/react'
import { Button } from './Button'

export default {
  title: 'Button'
  component: Button
} as ComponentMeta<typeof Button>

// template of how args map to rendering
const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />

export const ComponentName = Template.bind({})

ComponentName.args = {
  primary: true,
  label: 'My title'
}