Documenting components

If we recall from the previous section, the configuration in .storybook/main.js has the stories property as follows:

stories: ['../src/**/*.stories.tsx']

This means that any file in the src folder that ends with .stories.tsx should be picked by Storybook and treated as a story. With that said, we will co-locate stories next to the components, so the structure for every component will look something like this:

components
  my-component
    my-component.stories.tsx
    my-component.tsx
    index.ts

We will create our stories based on Component Story Format (CSF), an open standard for writing component examples.

But first, what is a story? According to the CSF standard, a story should represent a single source of truth for a component. We can think of a story as a user story where a component is presented in the corresponding state.

CSF requires the following:

...