0.1.1 • Published 6 years ago

react-storybook-addon-stories-group-custom-title v0.1.1

Weekly downloads
3
License
MIT
Repository
github
Last release
6 years ago

React Storybook Info Addon

A React Storybook addon to show additional information for your stories.

React Storybook Screenshot

Usage

Install the following npm module:

npm i --save-dev react-storybook-addon-add-stories-group
import { configure,setAddon } from '@kadira/storybook';
import addStoriesGroup from 'react-storybook-addon-add-stories-group'

setAddon(addStoriesGroup)

function loadStories() {
  require('../src/components/stories/MyComp');
  // require as many stories as you need.
}

configure(loadStories, module);

Then create your stories with the .addWithInfo API.

import { action , storiesOf} from '@kadira/storybook';
import MyComp from '../MyComp';

const stories = [
  {
    name:"with text" ,
    props: {text:"super error props", resetErrorMessage: action('clicked!') }
  },
  {
    name:"with very long text",
    props: {text:"super error this is a reaaaaaalllly long error, probably more than one line of text, even if you have a huge monitor, text text", resetErrorMessage: action('clicked!') }
  }
]

storiesOf('MyComp', module)
  .addStoriesGroup(MyComp, stories)
  

Add a custom title for the side panel, default if left blank is 'All Together'

storiesOf('MyComp', module)
  .addStoriesGroup(MyComp, stories, 'My Comp - all states')

Have a look at this example stories to learn more about the addWithInfo API.