sb-permutation

Demos

• This addon is forked version of sb-permutation. This project adds bug fixes, version compatibility, and utility features that were not addressed in the original project. But, The basic project direction is the same.

• This is only guaranteed to work with React-based projects. Other frameworks may introduce unintended errors.

This project is an addon that provides additional functionality to Storybook. In a separate panel, you can see the various aspects of the component as a table.

This project was highly inspired by Datadog's design system, DRUIDS, and we wanted to use the Component Permutation feature from DRUIDS in Storybook.

• Feature
• Installation
  • Requirements
• Why should I use it?
• Usage
  • Example
  • Advance
• Demos
• FAQ
• License

• Argument Control : Manipulate the properties of your component directly. You can see what your component looks like in context.

• Permutation : Provide a table of different views with combinations of properties. Compare and analyze the results of combinations at a glance.

yarn add sb-permutation

npm install sb-permutation

• Storybook >= 8.x
• node > 16.x

- try version 1.0.3 yarn add [email protected]

this version supports SB8 && React 18

SB 8.5 has decided to support React 19, and using the latest version of the addon will cause conflicts.

NOW IN PROGRESS

- try version 1.0.21 yarn add [email protected]

NOW IN PROGRESS

sb-addon-permutation provides a quick glance of complex, multi-property component views. Developers will be able to debug and test components efficiently through the showcase provided.

Add addon code in .stories/main.ts like below.

import type { StorybookConfig } from "@storybook/react-vite";
const config: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: ["sb-permutation"],
  framework: {
    name: "@storybook/react-vite",
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
};

export default config;

Unlike version 0.x, starting with version 1, no configuration is required to use the add-on. The add-on automatically pulls in the elements from each Story, but you can be more granular by passing in a parameter. The values accepted as parameter are shown below. The values used as parameter are not related to Preview, but are specified for use in the Panel.

More about the parameter children

The children parameter refers to the shape of the children's code that will be displayed in the CodeEditor area of the Panel when children is passed as an argument to the Story. Passing children as an argument will display correctly in Preview, but in the Panel, children will be displayed as {{children}} unless you pass a separate parameter. Use this parameter when you want to show the geometry of children in the Panel.

See also: How to use children as an arg in Storybook

The addon will automatically use your component's type and make it available in the Permutation Panel.

// stories/Component.stories.(ts|tsx)

import React from "react";
import { PermutationMeta } from "sb-permutation";
import YourComponent from "YourComponent";

const meta: PermutationMeta<typeof YourComponent> = {
  //...
  parameters: {
    permutation: {
      componentName: "Takahashi", // "Takahashi" in the panel, regardless of the name of the component.
      importPath: "@yourLib/yourComponent", // the value copied when clicked "Copy import" button
      children: "<div>Chef of the diamond city</div>", // a value passed to children
      deactivate: ["foo", "bar"], // deactviate property foo,bar
      autoload: "all", // activate all property except deactivated
    },
  },
};

You can also apply parameters individually on a story by story basis.

export const Primary: Story = {
  args: {
    primary: true,
    label:'Hello World'
  },
};

export const PermutationDeactivate: Story = {
  args:{
    label:'Hello World'
  }
  parameters: {
    permutation: {
      deactivate: ["primary", "size"],
    },
  },
};

when autoload is enabled, permutation table is automatically be activated when the story is loaded.

export const Primary: Story = {
  args: {
    primary: true,
  },
  parameters: {
    permutation: {
      // Now all element that can be permuted are now active when story is loaded
      autoload: "all",
    },
  },
};

You can also enable only some attribute

export const Primary: Story = {
  args: {
    primary: true,
  },
  parameters: {
    permuations: {
      // only 'foo' and 'bar' attribute will be activated
      autoload: ["foo", "bar"],
    },
  },
};

If both autoload and deactivate are allowed, deactivate takes precedence.

export const Primary: Story = {
  args: {
    primary: true,
  },
  parameters: {
    permuations: {
      // only 'bar' attribute is permuted
      autoload: ["foo", "bar"],
      deactivate: ["foo"],
    },
  },
};

You can use a different name for the property name in the permutation table.

export const Primary: Story = {
  args: {
    primary: { control: "boolean", name: "primary Alt name" }, // now primary is displayed as 'primary Alt name'
  },
};

This is optional. If the name field is not specified, the permutation-table will represent the component's original field names.

Demo Page

I enabled permutation on the story, but it only shows components with the same arguments 🥲

Are you using a decorator as a form of JSX? If so, make sure that check context is provided to StoryFn properly. Permutation table doesn't work if context isn't provided

Change this

// .storybook/decorator.tsx

export const decorators = [
  (Story, context) => {
    return (
      <RandomWrapper>
        <ThemeProvider>
          <Story />
        </ThemeProvider>
      </RandomWrapper>
    );
  },
];

to this 👍

export const decorators = [
  (Story, context) => {
    return (
      <RandomWrapper>
        <ThemeProvider>{Story(context)}</ThemeProvider>
      </RandomWrapper>
    );
  },
];

Check why this works

If you got another problem, make a issue to let us know

MIT