React Storybook
Stories generator forProps 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:
;;;; ;
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:
;;;; ;
Is the same as writing:
import storiesOf from "@storybook/react";import action from "@storybook/addon-actions";import YourComponent from "./somewhere"; ;
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.gitcd storybook-react-addon-props-combination-stories/npm installnpm test
This will install all required dependencies and run all tests. To watch for test changes run
npm test -- --watch
In order to run an example storybook just execute
npm run storybook
Building
npm run build
This will bundle the project to dist/index.js
(CJS) and dist/index.es6.js
(ES6), create maps and typescript declaration files in dist
directory.
Licensing
MIT License
Acknowledgments
Huge thanks to evgenykochetkov whose project react-storybook-addon-props-combinations was used as inspiration for this one.