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:
-
...