CSF: Story names should have intelligent defaults

Is your feature request related to a problem? Please describe. It’s tedious to have to change the story name in CSF to a human readable one. e.g.

withSubtitle.story = {name: 'with subtitle'}

Describe the solution you’d like A clear and concise description of what you want to happen.

I’m wondering if the exported story names should follow a convention or be allowed to be configured globally in some way.

e.g. Having to do withSubtitle.story = {name: 'with subtitle'} seems automatable, and most likely what most users expect to end up as “with subtitle” in the left panel.

e.g. export const WithSubtitle would end up as “With Subtitle”.

Describe alternatives you’ve considered Just leaving it as is.

Are you able to assist bring the feature to reality? I can

Additional context N/A

[shilman]

@kevinSuttle i think we should just allow users to specify a function like we do with storySort. we could make it default to:

displayName: (storyName) => kebabCase(storyName).replace(/-/g, ' ').upperFirst();

[shilman]

@patricklafrance MDX uses displayName under the hood, so you can’t use it in MDX. You should just be able to say <Story name="1 month visible">, so you’ve found a bug in the MDX handling: https://github.com/storybookjs/storybook/issues/8467