Improve Your Storybook Navigation

After adding several components for UI parts to my storybook Buttons, Titles, etc. and components that corresponds to specific application logic custom Lists and Forms, Charts etc. I understand that mixing all of these components in one place looks messy.

After a small research, I found a few good structured examples, WixStyleReact and Lucid UI, that helps me to understand how to structure my storybook navigation:

WixStyleReact

To creating High Level navigation header, we are using this syntax:

WIX screenshot  (Introduction section):
'Introduction|Getting Started',
'Introduction|Playground',
...

Code of our storie, will look like:

// GettingStarded.stories.js
import React from "react";
import GettingStarded from "./GettingStarded";
export default {
  title: "Introduction|Getting Started",
};
export const Default = () => <GettingStarded />;

If we want to make a folder with a list of components, just add one more subdirectory using slash (/) symbol. Will be looking like this:

WIX screenshot (Components API section):
'Components API|Components/Form'
'Components API|Components/Modal'
...

Code of our storie, will look like:

// GettingStarded.stories.js
import React from "react";
import Form from "./components/Form";
export default {
  title: "Components API|Components/Form",
};
export const Default = () => <Form />;

If you wanna read more about this pattern, here is link on the official documentation Story hierarchy.

One more example of components library:

Lucid UI

References:

1. Wix Components library - https://github.com/wix/wix-style-react
2. Lucid UI Components library - https://github.com/appnexus/lucid
3. Storybook official docs - https://storybook.js.org/docs/basics/writing-stories/#story-hierarchy