Is it possible to hide stories in Storybook on the sidebar? But still be able to access them by URL?

ONLINECAST

2 min read

·

05-10-2024

8

0

Share

Hiding Stories in Storybook: A Guide to URL-Based Access

Storybook is a powerful tool for developing and showcasing UI components. It allows you to isolate individual components and test them in various states, making component development a breeze. However, as your project grows, the number of stories in your Storybook sidebar might become overwhelming. This is where the ability to hide stories while still maintaining access through URLs becomes invaluable.

The Problem: Overcrowded Storybook Sidebar

Imagine you're working on a large project with hundreds of components. Your Storybook sidebar is overflowing with stories, making it difficult to navigate and find the specific component you need. This can be frustrating and slow down your workflow.

The Solution: Hiding Stories with URLs

While you can't completely remove stories from Storybook, you can hide them from the sidebar while still making them accessible through dedicated URLs. This approach provides the perfect balance between a clean and organized interface and easy access to all stories.

Let's look at an example:

// stories/Button.stories.js
import Button from './Button';

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

export const Primary = () => <Button variant="primary">Primary</Button>;
export const Secondary = () => <Button variant="secondary">Secondary</Button>;

// stories/Input.stories.js
import Input from './Input';

export default {
  title: 'Components/Input',
  component: Input,
};

export const Default = () => <Input />;
export const Disabled = () => <Input disabled />;

In this example, we have two stories: Button and Input. To hide these stories from the sidebar while still maintaining access via URLs, we can utilize Storybook's parameters feature.

Here's how to achieve this:

1. Modify your Storybook configuration:

// .storybook/main.js
module.exports = {
  stories: ['../stories/**/*.stories.js'],
  addons: [
    // ... your addons
  ],
  framework: '@storybook/react',
  core: {
    builder: 'webpack5',
  },
  parameters: {
    layout: 'centered',
    options: {
      storySort: {
        method: 'alphabetical',
        order: ['Components', 'Pages', 'Utils'],
      },
      showPanel: true,
      showDocsPanel: true,
    },
  },
};

2. Update your story files:

// stories/Button.stories.js
import Button from './Button';

export default {
  title: 'Components/Button',
  component: Button,
  parameters: {
    docs: {
      disable: true, // Hide from the sidebar
    },
  },
};

// stories/Input.stories.js
import Input from './Input';

export default {
  title: 'Components/Input',
  component: Input,
  parameters: {
    docs: {
      disable: true, // Hide from the sidebar
    },
  },
};

Now, when you start Storybook, the Button and Input stories will be hidden from the sidebar. However, you can still access them through their respective URLs:

• http://localhost:6006/iframe.html?id=components-button--primary
• http://localhost:6006/iframe.html?id=components-button--secondary
• http://localhost:6006/iframe.html?id=components-input--default
• http://localhost:6006/iframe.html?id=components-input--disabled

Additional Notes:

• This approach is particularly helpful for stories that are used internally or only need to be accessed occasionally.
• You can still view the documentation for these stories by accessing the story URL and clicking on the "Docs" tab.

Benefits of Hiding Stories:

• Improved Navigation: A cleaner sidebar makes it easier to find the stories you need.
• Reduced Clutter: A less cluttered interface can improve focus and productivity.
• Increased Accessibility: By providing dedicated URLs, you make stories accessible to stakeholders without them needing to navigate the sidebar.

Conclusion:

By using Storybook's parameters feature, you can selectively hide stories from the sidebar while maintaining access through URLs. This allows for a more organized and efficient workflow, ensuring that all stories are accessible while keeping the Storybook interface streamlined and user-friendly.