storybook-filepath-chapters
A simple loader for React Storybook that uses storybook-chapters to create a hierarchical navigation tree that mirrors your component filesystem.
Paths in the filesystem...
...become branches in the navigational tree:
Installation
npm install --save-dev storybook-filepath-chapters
Configuration
// stories.js ;const stories = require;;
IMPORTANT: In your stories, import storiesOf
from storybook-filepath-chapters
instead
of @kadira/storybook
:
// app/components/widgets/buttons/_stories.js import React from 'react';import storiesOf from 'storybook-filepath-chapters';import Button1 from './Button1';import Button2 from './Button2'; ;
// app/components/widgets/labels/_stories.js import React from 'react';import storiesOf from 'storybook-filepath-chapters';import Label1 from './Label1';import Label2 from './Label2'; ;
The above example results in the following Storybook navigational tree:
// File system: // app/components/widgets/butons/_stories.js // app/components/widgets/labels/_stories.js // Storybook Demo Components └──widgets ├──buttons │ ├──Button1 │ └──Button2 └──labels ├──Label1 └──Label2
API
;
Loads the stories matched by requireContext
into a hierarchical navigation tree
corresponding to their locations within the file system.
- rootName: Story name to show at the root of the navigational tree.
- requireContext: A webpack require context that identifies the files to be searched for stories. (See the example above.)
- options: (optional)
{ wrapStories: true }
will wrap each call tostoriesOf
in a new chapter. By default, all stories in a given folder are wrapped inside one chapter.
Drop-in replacement for the storiesOf
function provided in @kadira/storybook
.
Creates a link to the story in a chapter corresponding to its path in the
filesystem.
storiesOf
Causes the story to be omitted from the navigation tree.
storiesOf
Renders the story into the root navigation pane. This can be handy during development in order to make a component immediately accessible, as storybook-chapters does not currently retain your navigation selection when the page is refreshed.
Special Thanks
to Oleg Proskurin for a brilliant solution for enabling hierarchical navigation in React Storybook.