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