[Feature Request]: Configurable sentence casing for auto titles

[tay1orjones]

Is your feature request related to a problem? Please describe

The content guidelines we have for the Carbon Design System outline that our content, including our own documentation, should always be sentence cased:

Use sentence–case capitalization for all UI text elements. This style is predominantly lowercase. Capitalize only the initial letter of the first word in the text and other words that require capitalization, such as proper nouns. For example, labels in a form would be written as “First name” and “Email address”.

Story exports are automatically "start cased" (myStory becomes "My Story"), with no option to reconfigure this (that I'm aware of).

Describe the solution you'd like

It would be nice if there was a way to globally configure all story exports to be sentence cased instead of start cased.

Describe alternatives you've considered

To make sure our story names to adhere to this we have to rename every story via myName.storyName or in upcoming v7 with

export const myStory = {
  name: 'My story',
}

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

yes, I can

Additional context

No response

[shilman]

Hi @tay1orjones ! There's a global configuration in .storybook/manager.js called sidebar.renderLabel that can programmatically update how your stories/components are rendered in the sidebar, including updating capitalization.

Docs: https://storybook.js.org/docs/react/configure/features-and-behavior

Example: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#auto-title-filename-case

Is that sufficient for your needs?

[d-claassen]

Hey @shilman, I ran into this as well. The sidebar.renderLabel configuration works indeed as expected for the sidebar. But the individual stories in the "Docs" tab don't apply the same formatting. So to apply the same formatting to those stories, the MyStory.storyName still needs to be set manually for each story. It would be great if a formatting option for that would become available to, or if it would apply the same formatter as the sidebar has configured.

[edwardhorsford]

Am also running in to this. In the UK government (GOV.UK) and NHS, we use sentence case, not title case. The auto titles of Storybook are great, but we'd much prefer them with sentence case. A hook to provide a function or config would be great.

[Nickersoft]

For anyone coming across this like myself, I managed to getting working by manually extracting the title and changing the case using Doc Blocks. The layout is extracted from here.

.main/preview.tsx

import {
  Controls,
  Description,
  extractTitle,
  Primary,
  Stories,
  Subtitle,
  Title,
  useOf,
} from "@storybook/blocks";

// The inside your config...

export default {
  parameters: {
      docs: {
        page: () => {
          const meta = useOf("meta", ["meta"]);
          const title = extractTitle(meta?.preparedMeta.title);
          const isSingleStory = Object.keys(meta.csfFile.stories).length === 1;

          return (
            <>
              <Title>{sentenceCase(title)}</Title>
              <Subtitle />
              <Description of="meta" />
              {isSingleStory ? <Description of="story" /> : null}
              <Primary />
              <Controls />
              {isSingleStory ? null : <Stories />}
            </>
          );
        },
      }
  }
}