Storybook: Example for mdx files is missing for "Deprecated support for duplicate kinds"

[Spielboerg]

Describe the bug
In the migration guide (Deprecated support for duplicate kinds) is only one example for stories in CSF.
I only have stories in the MDX format and don't know how to fix this error.

My story structure:

components
├─ button
│  ├─ default
│  └─ with icon
├─ card-button
├─ icon
│  ├─ component
│  └─ overview
└─ input

Meta tag in the button and icon story file: <Meta title="Components/Button" or <Meta title="Components/Icon"
Meta tags in the other two story files: <Meta title="Components"

[shilman]

Can you share a repro?

[Spielboerg]

Unfortunately not, as it is a customer project, but perhaps the basic structure in the files can help you to reproduce the problem.

button.stories.mdx:

<Meta title="Components/Button"/>

<Canvas>
  <Story name="Default">...</Story>
</Canvas>

<Canvas>
  <Story name="with icons">...</Story>
</Canvas>

card-button.stories.mdx:

<Meta title="Components"/>

<Canvas>
  <Story name="Card-Button">...</Story>
</Canvas>

icon.stories.mdx:

<Meta title="Components/Icon"/>

<Canvas>
  <Story name="Component">...</Story>
</Canvas>

<Canvas>
  <Story name="Overview">...</Story>
</Canvas>

input.stories.mdx:

<Meta title="Components"/>

<Canvas>
  <Story name="Input">...</Story>
</Canvas>

The warning from the console (logged 4 times):

browser.js:37 Duplicate title used in multiple files; use unique titles or a primary file for a component with re-exported stories.
https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-support-for-duplicate-kinds
index.js:53 Duplicate title: 'Components'

If I exclude the story file of the CardButton or the Input, the warning is gone.

[Spielboerg]

I noticed that the Docs page is also not correct in this case, because instead of the documentation of the map button, the documentation of the input component is displayed:

[shilman]

Ok that's helpful. We'll take a look.

[Spielboerg]

I don't know if this could help or is related, but I just stumbled over the ids of the stories and I noticed that -- is used to structure the folders (at least that's my guess 😅).
The ids of my stories are:

components-button--default-story
components-button--with-icons

components--card-button

components-icon--component
components-icon--overview

components--input

This also leads to a wrong sorting, because components-- always comes before stories with an id like this component-[a-z]. For now I have fixed this by replacing all --s with -s in the `storySort' function before comparing. I do not know whether I should open a new issue for this or whether it is not a bug at all and works as intended.

[Spielboerg]

Not fixed in version 6.0.21

My current workaround is to add the component name to the meta title and use Default as the name of the story:

<Meta title="Components/Card-Button"/>

<Canvas>
  <Story name="Default">...</Story>
</Canvas>

[shilman]

If you combine input.stories.mdx and card-button.stories.mdx into a single file called components.stories.mdx that should solve the deprecation warning. does it?

[Spielboerg]

Without having tested it I think it should work. The downside of this approach would be a rather large file with many imported components and modules. Or is there a way to import the content of a mdx file into another mdx file? If not, I would stick to my workaround above and keep the components separated. This is more important to me than the structure of the stories in the rendered storybook.

If you want me to test it anyway, I can do that.

[shilman]

@Spielboerg no i was simply suggesting a workaround to get your desired nav structure. if you don't care as much about the nav structure i'd def recommend keeping them as separate files / separate navs