Storybookの[ドキュメント]タブを非表示にする

Question

TypescriptとMDXの両方を使用してストーリーを作成したいので、次のようにしていmain.jsます。

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

ただし、「Canvas」の横に「Docs」タブを配置したくありません。どうすれば削除できますか？'@storybook/addon-docs'MDXなしのストーリーは表示されません。

Answer 1

これを入れてくださいpreview.js：

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

Storybookバージョン6.0.xで使用

Answer 2

私は現在使用@storybook/[email protected]していますが、残念ながら前の回答はうまくいきませんでした。ストーリーブックのDocsPageドキュメントで解決策を見つけることができました。

関連するセクション：

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

次のような単一のストーリーのDocsPageを完全に削除することができました。

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