hierarchy-separator.md

Deprecated hierarchy separator (hierarchy-separator)

Included in these configurations:

• csf
• flat/csf
• recommended
• flat/recommended

Rule Details

Since Storybook 6.0, the ability to specify the hierarchy separators (how you control the grouping of story kinds in the sidebar) was removed. There is now a single separator /, which cannot be configured. If you are using | or . as a separator, you should change all of them to /.

Examples of incorrect code for this rule:

export default {
  title: 'Components|Forms/Input',
  component: Input,
}

Examples of correct code for this rule:

export default {
  title: 'Components/Forms/Input',
  component: Input,
}

Further Reading

For more details about this change: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#removed-hierarchy-separators

To automatically migrate all of your codebase and fix this issue, run this codemod in the root folder of your project:

npx storybook@latest migrate upgrade-hierarchy-separators --glob="*/**/*.stories.@(tsx|jsx|ts|js)"