组件 ER 图

storybook-er-diagram

一个 Storybook 插件，当您有许多项目构建在独特的设计系统之上时非常有用。

一个组件可以表现出不同的行为，Storybook stories 描述了这些行为。当您的设计系统被大量不同项目使用时，我们可能会看不到全貌。

Storybook ErDiagram 管理组件 stories 和使用它们的项目之间的链接。

入门

1. 安装

npm install --save-dev storybook-er-diagram
# yarn add -D storybook-er-diagram

2. 在 main.js 中注册插件

module.exports = {
  addons: ["storybook-er-diagram"],
};

3. 添加到 story!

将 erDiagramList 对象添加到 story 默认导出参数中，并使用模板名称作为键。该名称必须与 story 模板名称相同。

4. 示例

export default {
  title: "Example/Button",
  component: Button,
  parameters: {
    erDiagramList: {
      Primary: ["Project-A", "Project-B", "Project-C", "Project-D"],
      ["Second Story"]: ["Project-B", "Project-C"],
      ["Another story"]: ["Project-A", "Project-D"],
    },
  },

const Template = (args) => <Button {...args} />;
export const Primary = Template.bind({});
export const secondStory = Template.bind({});
export const thirdStory = Template.bind({});
thirdStory.storyName = "Another story"
};