How can I disable the auto-generated Docs page under each Story in Storybook 7?

ONLINECAST

2 min read

·

05-10-2024

9

0

Share

Ditching the Auto-Generated Docs in Storybook 7: A Guide to a Cleaner Workflow

Storybook is a powerful tool for building and documenting UI components. However, the auto-generated documentation pages under each story can sometimes feel redundant, especially when you have comprehensive documentation elsewhere. This article will guide you on how to disable these auto-generated pages in Storybook 7, streamlining your workflow and keeping your Storybook clean.

The Problem: Storybook 7 automatically generates a documentation page for each story, which includes the story's name, arguments, and a preview of the component. While useful for quick reference, this can lead to a cluttered Storybook interface if you already have dedicated documentation.

The Solution: Disabling the auto-generated docs is a simple process. We achieve this by customizing the docs addon in Storybook's configuration.

Here's how:

1. Open your Storybook configuration file: This is typically located at .storybook/main.js (or .storybook/main.ts for TypeScript).

2. Modify the docs addon: Locate the section where you define the docs addon and add the following:

   module.exports = {
     // ... other Storybook configuration
     addons: [
       // ... other addons
       '@storybook/addon-docs/register', 
     ],
     docs: {
       autodocs: 'tag', // Only generate docs for components with @docs annotation
     },
     // ... other Storybook configuration
   };
   

3. Restart Storybook: After making these changes, restart your Storybook development server for the changes to take effect.

Understanding the Options:

• autodocs: 'tag': This setting instructs Storybook to only generate documentation pages for stories that are tagged with the @docs annotation. This allows you to selectively choose which stories should have automatic documentation.

• autodocs: 'none': This option entirely disables the automatic generation of documentation pages for all stories.

Example:

import { Meta, Story } from '@storybook/addon-docs/blocks';

export default {
  title: 'Example/Button',
  component: Button,
  decorators: [
    (Story) => (
      <div style={{ padding: '20px' }}>
        <Story />
      </div>
    ),
  ],
} as Meta;

export const Primary: Story = (args) => <Button {...args} />;

Primary.args = {
  label: 'Click Me',
};

// The @docs annotation marks this story for automatic documentation
export const WithDocs: Story = (args) => <Button {...args} />;

WithDocs.args = {
  label: 'Click Me',
};

WithDocs.parameters = {
  docs: {
    source: {
      code: 'import Button from "../Button"',
    },
  },
};

In this example, the WithDocs story will have an automatically generated documentation page because of the @docs annotation. The Primary story will not have a documentation page, as it does not have this annotation.

Benefits of Disabling Auto-Generated Docs:

• Control: You gain control over which stories should have automatically generated documentation, avoiding clutter.

• Consistency: You can maintain consistent documentation across your projects by using dedicated documentation tools like Storybook's addon-docs alongside your preferred documentation format.

• Customization: You have complete freedom to customize your documentation pages using the addon-docs addon's features.

By using these strategies, you can control your Storybook experience and ensure that your documentation aligns with your workflow preferences.