storybook-chapters: addon for React Storybook


(Usul Pro) #1

Sometimes you want to have a hierarchical structure of your components in React Storybook.

The storybook-chapters adds such a feature. You can add chapters to your stories:

storiesOf('React App', module)
 .chapter('Left panel')
    .add('Button 1', fn(1))
    .add('Button 2', fn(2))
    .chapter('Bottom Panel')
        .add('Input 3', fn(3))
        .add('Input 4', fn(4))
        .endOfChapter()
    .chapter('Header Panel')
        .add('Input 5', fn(5))
        .add('Input 6', fn(6))
        .endOfChapter()
    .endOfChapter()
.chapter('Right panel')
    .add('Button 7', fn(7))
    .add('Button 8', fn(8))
    .endOfChapter()

So you can create nesting of any depth.

It’s possible to add custom TOC to each chapter with description about this part. It’ll be shown when you select this chapter.

Live demo


(Usul Pro) #2

Now it has an additional API to hide/show your stories via .enable/.disable and buid your own navigation.

example


(Alexander Whillas) #3

Soooo, what’s the advantage of this over JSX?


(Usul Pro) #4

@awhillas!

It’s not related to the JSX. It’s React Storybook Addon for adding hierarchy to stories.

Sorry maybe I misunderstood your question?