Automatic story generation

Automatically generates stories for Storybook

Simply add a single line JSDoc annotation in your React component prop to create one or multiple stories

Getting started

1. Install package

npm i storybook-autogen

2. Add JSDoc tag for possible values

/**
  * Button contents
  * @autogen {"values": ["Shortlabel", "Very long label that may break"]}
  */
label: string;

e.g. example/src/components/Button.tsx Code generation will create combinations of values for different props to generate stories.

3. Run story generation

storybook-autogen path=./src/components

4. (Optional) Add generation before running storybook

"storybook": "storybook-autogen path=./src/components && storybook dev -p 6006",
"build-storybook": "storybook-autogen path=./src/components && storybook build"

e.g. example/package.json

Run example

1. Clone repository

git clone [email protected]:tlow92/storybook-autogen.git

2. Install dependencies

cd example && npm install

3. Run storybook script (includes generation step)

npm run storybook

Roadmap

• Support passing regex instead of folder path
• Support config for:
  • path to folder/regex
  • overwrite/update option
  • generate stories for optional props
  • toggle/modify combination of props
• Convert to storybook addon (Needs investigation)
• Generate values without need for JSDoc tags
  • Maybe generate parameters using fakerjs