Nifty Pony Merchandise

    storybook-er-diagram
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.7 • Public • Published

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

    Install

    npm i storybook-er-diagram

    DownloadsWeekly Downloads

    21

    Version

    0.1.7

    License

    MIT

    Unpacked Size

    29.4 kB

    Total Files

    25

    Last publish

    Collaborators

    • rown89