Components ER Diagram
When components behave in different ways, based on what props we are using, we write stories, but when our design system is used by a lot of different projects we can lose sight of the whole picture. Storybook ErDiagram manages links between component sto
npm install storybook-er-diagram
178
Downloads per week

storybook-er-diagram

A Storybook addon useful when you have many projects built on top of a unique Design System.

storybook-er-diagram logo

A component can behave in different ways and storybook stories describe them. When your Design System is used by a lot of different projects we can lose sight of the whole picture.

Storybook ErDiagram manages links between component stories and projects that use them.

Getting started

1. Install

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

2. Register the addon in main.js

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

3. Add it to story!

add erDiagramList object to the story default export parameters and use the template name as key. The name must be equal to the story template.

storybook-er-diagram example

4. Example

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