在 Storybook 故事中添加新标签

Question

我开始在 React 项目中设置 Storybook，我可以看到它默认显示 2 个选项卡（Canvas 和文档）。

我想要另一个选项卡来显示该特定组件的更新日志。有没有办法添加第三个选项卡并在那里显示 CHANGELOG.md 文件的内容？

Answer 1

我自己最近也遇到了这个问题（这就是我进入这个话题的原因）所以我希望我以后能对其他人有所帮助。

创建自定义故事书选项卡并将其注册到故事书插件中：

// addon-tab/register.js

import React from 'react';

import { addons, types } from '@storybook/addons';

addons.register('changelog', () => {
  addons.add('changelog', {
    type: types.TAB,
    title: 'Storybook changelog tab',
    route: ({ storyId, refId }) => (refId ? `/changelog/${refId}_${storyId}` : `/changelog/${storyId}`),
    match: ({ viewMode }) => viewMode === 'changelog',
    render: () => (
      <div>
        <MyChangelog />
      </div>
    ),
  });
});

确保更新您的 main.js 文件：

// .storybook/main.js

module.exports = {
  stories: [],
  addons: [
    // Other Storybook addons
    '../addon-tab/register.js'
  ],
};

** 您还可以在 preview.js 文件中更改它的 name/position：

addParameters({
  previewTabs: {
    docs: {
      title: 'Docs',
      hidden: false
    },
    canvas: {
      title: 'Story',
      hidden: false,
    },
      changelog: {
      title: 'CHANGELOG',
      hidden: false,
    },
  },
})

接下来您可以创建一个接受故事名称和 returns 正确的 changelog.md 文件的更新日志提供程序（require.context 可能是一个很好的方法），然后显示它在渲染函数中使用 MyChangelog 组件。您可以像这样使用来自 @storybook/addon-docs 的故事书的 Description 组件：

<Description markdown={myMarkdown} />

在 Storybook 故事中添加新标签

Add new tab in Storybook story

reactjs

storybook