Storybook · Writing and testing · all subjects

story organization

19 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Avoid redundant story name annotations

When using named exports in Storybook, the story name is automatically resolved from the export name. If you set a name property that matches what Storybook would generate anyway, this is redundant. For example, if you export a story as PrimaryButton, Storybook automatically resolves it to 'Primary Button', so explicitly setting name: 'Primary Button' is unnecessary.

When to keep redundant story names

If you want to ensure a story name remains constant even if you rename the export later, you can disable the no-redundant-story-name ESLint rule and keep the explicit name property set. This provides stability in story naming if exports are frequently refactored.

no-redundant-story-name rule configurations

The no-redundant-story-name ESLint rule is included in these configurations: csf, flat/csf, recommended, flat/recommended, csf-strict, and flat/csf-strict.

Combo stories with individual testing recipe

For a component with many variants, you can create a grid of those variants together for visualization while testing the variants individually by using appropriate tags.

Sidebar tag filtering behavior

Selecting a single tag in the filter causes the sidebar to only show stories with that tag. Selecting multiple tags shows stories that contain any of those tags. Pressing the Exclude button for a tag excludes stories with that tag from the sidebar. You can mix inclusion and exclusion. When no tags are selected, all stories are shown.

Tag filtering applies before search

When searching, the tag filter is applied first, so search results are limited to the currently filtered tags.

Docs-only story recipe

To create a docs-only story that appears only in the docs page and not in Storybook's sidebar, enable the `autodocs` tag and remove the `dev` tag.

Built-in tag: dev

The `dev` tag is applied by default to every story. Stories tagged with `dev` are rendered in Storybook's sidebar.

Built-in tag: manifest

The `manifest` tag is applied by default to every story. Stories and docs tagged with `manifest` are included in component or docs manifests on frameworks that generate them.

Built-in tag: test

The `test` tag is applied by default to every story. Stories tagged with `test` are included in test runner or Vitest addon runs.

Built-in tag: autodocs

The `autodocs` tag is not applied by default. Stories tagged with `autodocs` are included in the docs page. If a CSF file does not contain at least one story tagged with `autodocs`, that component will not generate a docs page.

Tags control story inclusion in Storybook

Tags allow you to control which stories are included in your Storybook, enabling many different uses of the same total set of stories. For example, tags can be used to include or exclude tests from the test runner.

Custom tag creation methods

There are two ways to create a custom tag: apply it to a story, component (meta), or project (`.storybook/preview.*`), or define it in your Storybook configuration file (`.storybook/main.*`) to provide more configuration options like default filter selection.

Custom tag use cases

Custom tags enable flexible categorization on top of Storybook's sidebar hierarchy. Sample uses include: status (experimental, new, stable, deprecated), user persona (admin, user, developer), and component/code ownership.

Applying tags to stories

To apply tags to a story, assign an array of strings to the `tags` property. Tags may be applied at the project level (in `.storybook/preview.*`), component (meta) level, or story level.

Removing tags from stories

To remove a tag from a story, prefix it with `!`. Tags can be removed for all stories in your project (in `.storybook/preview.*`), all stories for a component (in the CSF file meta), or a single story.

Tag defaultFilterSelection include behavior

If `defaultFilterSelection` is set to `include`, stories with that tag are selected as included in the filter menu.

Tag defaultFilterSelection exclude behavior

If `defaultFilterSelection` is set to `exclude`, stories with that tag are selected as excluded, and must be explicitly included by selecting the tag in the sidebar filter menu.

Test-only stories without sidebar clutter

When using the experimental `.test` method on CSF Factories, you can alter the default behavior of the `_test` tag to exclude tests from the sidebar by default, reducing clutter while still allowing tests to be run for all stories or adjusted in the filter to show tests when needed.

Give your agent this brain