⇠ chan.dev/ lessons/ storybook

Navigate Storybook Sidebar

To do anything in Storybook, we need to understand the Storybook sidebar. It’s is the navigation center of Storybook — where you select which story appears in the canvas.

Let’s start with the iconography.

First, expand all of the stories with this disclosure toggle. You’ll see:

[collapse each as shown]

Docs
Docs are Markdown and MDX files in your Storybook directory. Docs can also be automatically generated from Storybook components that use the autodocs tag. [enable and disable the code]
src/stories/Configure.mdx
export default {
  component: Button,
  tags: ['autodocs'],
}
Components
Components correlate to story files on the file system — those with a .stories. extension prefix. They get their name from the exported metadata of the story file. [quickly change the title of one]
src/stories/Button.stories.js
Categories
Categories are groupings of components. They too are controlled by the component title, using slashes as a delimiter.
export default {
  title: "Example/Button"
  title: "Components/Button"
  component: Button,
  tags: ['autodocs'],
}
Folders
We can add levels of heirarchy between categories and components. These additional are called Folders. And can go as deeply as needed.
export default {
  title: "Components/Button"
  title: "Components/Atoms/Button"
  component: Button,
  tags: ['autodocs'],
}
Autotitle
The title property is not required. Provided that component is defined (which it is, here), we can remove it and Storybook infers the structure from the filesystem.
export default {
  title: "Components/Atoms/Button"
  component: Button,
  tags: ['autodocs'],
}

Using the autotitle is my preferred approach.

Finally,

Stories
A Story is a rendered component with fixed data (or props). Our button component has four stories, each with a different set of args applied.

[Show these states using Controls panel]

Now we have a strong grasp of the Storybook sidebar, with its: