Hide Docs tab in Storybook

Question

I want to create stories using both Typescript and MDX, therefore I have in my main.js:

module.exports = {
  stories: ['../src/**/*.stories.(mdx|ts)'],
  addons: ['@storybook/addon-docs', 'storybook-addon-preview']
};

However I don't want to have "Docs" tab next to "Canvas". How do I remove it? Without '@storybook/addon-docs' MDX story is not displayed.

Perhaps this answer will help: https://stackoverflow.com/a/60897150/1241287 — David Yeiser, Aug 24 '20 at 14:20

score 5 · Accepted Answer · answered Sep 01 '20 at 12:35

5

Put this in preview.js:

export const parameters = {
  previewTabs: {
    'storybook/docs/panel': {
      hidden: true
    }
  }
};

Used in Storybook version 6.0.x

answered Sep 01 '20 at 12:35

Tschareck

4,071
9
47
74

This also works for individual stories. Thanks – Remi Feb 08 '21 at 10:20

score 1 · Answer 2 · answered Sep 03 '20 at 20:49

I am currently using @storybook/angular@6.0.21 and the previous answer unfortunately did not work for me. I was able to find a solution in the storybook DocsPage documentation.

The relevant section:

You can replace DocsPage at any level by overriding the docs.page parameter:

- With null to remove docs
- With MDX docs
- With a custom React component

I was able to completely remove the DocsPage for a single story like this:

export const myStory = () => ({
  moduleMetadata: MODULE_METADATA,
  component: MyComponent,
});
myStory.parameters = {
  docs: { page: null },
};

Hide Docs tab in Storybook

2 Answers2

Linked