Substories/Hierarchy

Would be nice to be able to have “Substories” or a Hierarchy of stories. My case involves various mini “apps” being contained in the same repo. A simple solution would be an option to display stores named like ui.core.foo and ui.core.bar like:

ui
└── core
    ├── bar
    └── foo

With support for expanding and collapsing nodes.

[arunoda]

Currently, we’ve no plan to implement that. That’s because it makes navigation harder. You can namespace story kinds with dot like “ui.core”, “ui.app”. Then you can filter them as you need.

If there are a lot of stories, you can start a few storybook instances. You can do that by having two storybook config directories. But, anyway that’s an extreme case.

[usulpro]

Hey, Guys!

Despite the fact that such a feature isn’t planned in the near future this doesn’t mean that we can’t get such behavior via Storybook Addons API

Here is a such addon:

Storybook Chapters

Storybook Chapters

Adds unlimited levels of nesting for (sub)stories

To add one more nesting level just put .chapter(name) to your stories:

// stories.js:

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()

Features

• The hierarchical structure of Substories
• Compatible with Knobs, addWithInfo and other addons
• Use storyDecorator to wrap all chapters

Demo page

Project

Example

---

Any feedback will be very appreciated! 😃