Storybook-react-addon-props-combination-stories NP

Stories generator for React Storybook

Props Combinations addon for React Storybook that generates stories for each props combination

You can check out the demo here.

Given possible values for each prop, the addon renders your component with all combinations of prop values. Useful for finding edge cases or just seeing all component states. It creates a new story in your stories for each props combination.

This addon is inspired by react-storybook-addon-props-combinations. It differs from the react-storybook-addon-props-combinations in the way how each combination is rendered:

react-storybook-addon-props-combinations - renders each combination in one story
storybook-react-addon-props-combination-stories - renders each combination as a separate story.

I created this addon, as the approach of putting each combination into one story was not a good fit for my project. The base idea is the same, in my opinion, the react-storybook-addon-props-combinations is a good addon for small components, when you can see all the combinations on one screen and check if everything is as expected. This addon is better for more "top level components", when you want to see each variation of eg. one page of your application.

A one more small thing compared to react-storybook-addon-props-combinations is that this package is shipped with typings (so you can use TypeScript in your stories without any additional configuration) and bundled in both CJS and ES6 modules.

Installing / Getting started

npm install storybook-react-addon-props-combination-stories

Usage:

import { storiesOf } from "@storybook/react";
import { action } from "@storybook/addon-actions";
import { addCombinations } from "storybook-react-addon-props-combination-stories";
import { YourComponent } from "./somewhere";

addCombinations(storiesOf("BasicUsage", module)).withCombinations(
  // An object with the shape
  // {propName: arrayOfPossiblevalues}
  {
    enabled: [true, false],
    someProp: ["one value", "and the other"],
    someAction: [action("some action")]
  },
  // Function that will render story description based on current props
  props => `${props.enabled ? "Enabled" : "Disabled"}: ${props.someProp}`,
  // Component that will be renderd
  YourComponent
);

API

There is only one function exported from this package: addCombinations(Story). It adds new method to your story:

withCombinations(combinations, descriptionRenderer, component)

combinations - an object with array of possible values for all properties needed by your component
descriptionRenderer - a function that returns a description of the story based on one props combination
component - component that will be rendered inside each story

How it's working

The addon creates story for each props combination derived from combinations object. For example, this basic usage:

import { storiesOf } from "@storybook/react";
import { action } from "@storybook/addon-actions";
import { addCombinations } from "storybook-react-addon-props-combination-stories";
import { YourComponent } from "./somewhere";

addCombinations(storiesOf("BasicUsage", module)).withCombinations(
  // An object with the shape
  // {propName: arrayOfPossiblevalues}
  {
    enabled: [true, false],
    someProp: ["one value", "the other value"],
    someAction: [action("some action")]
  },
  // Function that will render story description based on current props
  props => `${props.enabled ? "Enabled" : "Disabled"}: ${props.someProp}`,
  // Component that will be renderd
  YourComponent
);

Is the same as writing:

import { storiesOf } from "@storybook/react";
import { action } from "@storybook/addon-actions";
import { YourComponent } from "./somewhere";

storiesOf("BasicUsage", module)
  .add("Enabled: one value", () => (
    <YourComponent
      enabled={true}
      someProp="one value"
      someAction={action("some action")}
    />
  ))
  .add("Enabled: the other value", () => (
    <YourComponent
      enabled={true}
      someProp="the other value"
      someAction={action("some action")}
    />
  ))
  .add("Disabled: one value", () => (
    <YourComponent
      enabled={false}
      someProp="one value"
      someAction={action("some action")}
    />
  ))
  .add("Disabled: the other value", () => (
    <YourComponent
      enabled={false}
      someProp="the other value"
      someAction={action("some action")}
    />
  ));

Developing

Built With

Bundled with Rollup from Typescript. Tested with Jest. Kept clean with TSLint and Prettier :)

Setting up Dev

git clone https://github.com/mlewando/storybook-react-addon-props-combination-stories.git
cd storybook-react-addon-props-combination-stories/
npm install
npm test

This will install all required dependencies and run all tests. To watch for test changes run