组件 ER 图

storybook-er-diagram

当您有许多基于独特设计系统的项目时，此 Storybook 插件很有用。

组件可以以不同的方式运行，而 Storybook 故事会描述它们。当您的设计系统被许多不同的项目使用时，我们可能会忽略整体情况。

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

入门

1. 安装

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

2. 在 main.js 中注册插件

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

3. 将其添加到故事！

将 erDiagramList 对象添加到故事的默认导出参数中，并使用模板名称作为键。该名称必须等于故事模板。

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"
};