Storybook for React — Working with Documentation

Storybook lets us prototype components easily with various parameters.

In this article, we’ll look at how to add descriptions to our documentation, and adjust them, preview, and bud them with Storybook.

Description

We can add a description for a component with Storybook.

The description can be extracted from the source code or we can provide our own description.

For example, we can write:

src/stories/Button.stories.js

import React from 'react';

import { Button } from './Button';

export default {
  title: 'Example/Button',
  component: Button,
  parameters: {
    docs: {
      description: {
        component: '**button** component'
      }
    },
  }
};

const Template = (args) => <Button {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  primary: true,
  label: 'Button',
};

export const Secondary = Template.bind({});
Secondary.args = {
  label: 'Button',
};

export const Large = Template.bind({});
Large.args = {
  size: 'large',
  label: 'Button',
};

export const Small = Template.bind({});
Small.args = {
  size: 'small',
  label: 'Button',
};

We have the parameters.docs.description.component property which accepts a Markdown string for our description.

Preview and Build Docs

We can preview Storybook’s documentation with the start-storybook --docs command.

To make our lives easier, we can add the command to the scripts section of our React project’s package.json .

For example, we can write:

{
  "scripts": {
    "storybook-docs": "start-storybook --docs",
  }
}

to add it to package.json .

Publish Storybook’s Documentation

We can publish Storybook’s documentation with the build-storybook --docs .

Likewise, we can put it into package.json ‘s scripts property:

{
  "scripts": {
    "build-storybook-docs": "build-storybook --docs",
  }
}

The output will be in the storybook-static folder.

Controls

We can set the controls for our args so we can change their values and preview the results.

To do that, we add the argTypes property to the object that we’re exporting in our stories file.

For example, we can write:

src/stories/Button.stories.js

import React from 'react';

import { Button } from './Button';

export default {
  title: 'Example/Button',
  component: Button,
  argTypes: {
    backgroundColor: { control: 'color' },
  },
};

const Template = (args) => <Button {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  primary: true,
  label: 'Button',
};

export const Secondary = Template.bind({});
Secondary.args = {
  label: 'Button',
};

export const Large = Template.bind({});
Large.args = {
  size: 'large',
  label: 'Button',
};

export const Small = Template.bind({});
Small.args = {
  size: 'small',
  label: 'Button',
};

We have:

export default {
  title: 'Example/Button',
  component: Button,
  argTypes: {
    backgroundColor: { control: 'color' },
  },
};

to let us set the value of the backgroundColor prop with a color picker.

The control property lets us set the control type for setting the prop.

Custom Args

We can create our own custom args

To do this, we can set the type and options properties to add a radio button control with our own options:

src/stories/Button.stories.js

import React from 'react';

import { Button } from './Button';

export default {
  title: 'Example/Button',
  component: Button,
  argTypes: {
    size: {
      control: {
        type: 'inline-radio',
        options: ['small', 'medium', 'large'],
      },
    },
  },
};

const Template = (args) => <Button {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  primary: true,
  label: 'Button',
};

export const Secondary = Template.bind({});
Secondary.args = {
  label: 'Button',
};

export const Large = Template.bind({});
Large.args = {
  size: 'large',
  label: 'Button',
};

export const Small = Template.bind({});
Small.args = {
  size: 'small',
  label: 'Button',
};

We set the type to 'inline-radio' to see a series of radio buttons

options has the label and value for each radio button.

Show Full Documentation for Each Property

We can make Storybook show the full documentation for each property.

For example, we can write the following in .storybook/preview.js to expand all the documentation:

export const parameters = {
  controls: { expanded: true },
}

The controls.expanded property set to true lets us show the expanded documentation for each property.

Conclusion

We can add descriptions, change what’s displayed, and preview and build it with Storybook.