Navigate Storybook Sidebar

[00:00] To do anything in Storybook, you need to understand the Storybook sidebar. It is the navigation center of Storybook. This is where you select the component that you want to see represented in the canvas. Let's expand everything with this disclosure button that opens and closes all the stories, and talk icons. We have docs, both [00:19] written docs and generated component docs. Components, which are the components in your system. Stories, individual states of component props or interactions, and categories. Any logical grouping in your system, this could be atomic design with [00:39] atomic components and pages, etcetera. Now let's look at how they map over to the file system. Docs like this are going to be MDX files or MD files. In this MDX example, we're importing a bunch of components and then just writing prose like we would on a standard JSX or HTML [00:59] page. Docs can also be auto generated for components. So in this button, we have docs right here at the top, and that's generated by this component story using the auto docs tag. So if I turn this off, that page goes away, which brings us to components. Components in the [01:19] sidebar correlate to stories files in the file system. Typically, a stories file will share the name of the component with the previous suffix of stories. Next, we have categories. Categories are interesting because they're actually dynamically created from the title field of a story [01:39] using this slash delimiter. We can move this component to the root level simply by removing that prefix, or we can put it into a another category called components simply by adding it with a slash. On the topic of titles, we can actually nest even further if we want with folders. [02:00] This moves the story deeper into this components category with the folder Adams. We can take this as far as we want, but it's really up to you. Now where a component is provided, this title field is actually optional. And when we opt out of it, Storybook will auto title these based [02:20] on the file system, which is my preference. So now we have a stories category to mirror the stories directory. Now last but not least are the individual stories inside of Storybook. These stories map to the named exports inside of any given [02:39] module. So button has the stories primary, secondary, and large and small. Header stories has logged in and logged out. These named exports get formatted to title case for legibility in the sidebar. Now you should have a strong grasp of [02:59] the storybook sidebar with its docs, components, categories, and stories.