Storybook for React — Docs Page

Storybook lets us prototype components easily with various parameters.

In this article, we’ll look at how to replace the DocsPage template with Storybook.

Replacing DocsPage

We can replace the DocsPage template with our own content.

In the story level, we can write:

src/stories/Button.stories.js

import React from 'react';

import { Button } from './Button';

export default {
  title: 'Example/Button',
  component: Button,
};

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

export const Primary = Template.bind({});
Primary.parameters = { docs: { page: null } }

We set the docs.page property to null and then we’ll see the ‘No Docs’ page displayed.

Also, we can set the docs.page property at the component level.

To do this, we write:

src/stories/Button.stories.js

import React from 'react';

import { Button } from './Button';

export default {
  title: 'Example/Button',
  component: Button,
  parameters: {
    docs: { page: null }
  }
};

Then we’ll see the ‘No Docs’ message on all stories.

Global Level

We can set the docs.page property at the global level so we can replace the DocsPage in all stories.

For example, we can write:

./storybook/preview.js

export const parameters = {
  docs: { page: null }
}

Now all our stories will see the ‘No Docs’ message.

Remixing DocsPage

Also, we can add our own content by importing props from the page.

For example, we can write:

import React from 'react';
import { Button } from './Button';
import {
  Title,
  Subtitle,
  Description,
  Primary as PrimaryDoc,
  Props,
  Stories,
  PRIMARY_STORY,
} from '@storybook/addon-docs/blocks';

export default {
  title: 'Example/Button',
  component: Button,
  parameters: {
    docs: {
      page: () => (
        <>
          <Title />
          <Subtitle />
          <Description />
          <PrimaryDoc />
          <ArgsTable story={PRIMARY_STORY} />
          <Stories />
        </>
      ),
    },
  },
};

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',
};

to add the components to builds our documentation page.

We install the @storybook/addon-docs package so that we can add a custom documentation page.

Title and Subtitle have the title and subtitle.

Description has the description of the component.

Primary has the preview.

ArgsTable has the arguments list.

Stories has the stories list.

PRIMARY_STORY has the main story of the Storybook.

Inline vs Iframe Stories

We can put stories inline or in an iframe.

To do that, we set inlineStories to true so that we can stop putting items in an iframe.

Also, we can write our own function and set it to the prepareForInline property to display docs inline.

For example, we can render Vue stories into React ones by writing:

import React from 'react';
import { render } from 'react-dom';
import toReact from '@egoist/vue-to-react';

export const parameters = {
  docs: {
    prepareForInline: (storyFn, { args }) => {
      const Story = toReact(storyFn());
      return <Story {...args} />;
    },
  },
}

We render the content returned by storyFn into a React component.

We need the @egoist/vue-to-react package to render the Vue content into a React component.

Conclusion

There’re many ways to render stories with our own content.

We can use the components provided by the Storybook addons.