[Bug]: Anchor for docs page Subheading wrong

[xyy94813]

Describe the bug

In current version of storybook:

• Uses storyName as an anchor id.
• encodes the special characters. (replace by - when custom story name)

Extremely high duplication of Story anchors under non-English documents
This can limit non-English documents, especially for i18n.

storybook/code/ui/blocks/src/blocks/DocsStory.tsx

Line 26 in 9fecce2

<Subheading>{story.name}</Subheading>

storybook/code/ui/blocks/src/blocks/Subheading.tsx

Line 11 in 9fecce2

const tagID = children.toLowerCase().replace(/[^a-z0-9]/gi, '-');

To Reproduce

// button.stories.tsx

const meta: Meta<typeof Button> = {
  //...
}

export default meta;

type Story = StoryObj<typeof Button>;

export const primary: Story = {
  name: '你好', // this is Chinese
}

export const story2: Story = {
  name: '故事', // this is Chinese
}

System

System:
    OS: macOS 13.6.1
    CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 16.20.2 - ~/.nvm/versions/node/v16.20.2/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 8.19.4 - ~/.nvm/versions/node/v16.20.2/bin/npm <----- active
  Browsers:
    Chrome: 119.0.6045.159
    Safari: 16.6
  npmPackages:
    @storybook/addon-actions: ^7.5.3 => 7.5.3 
    @storybook/addon-essentials: ^7.5.3 => 7.5.3 
    @storybook/react: ^7.5.3 => 7.5.3 
    @storybook/react-vite: ^7.5.3 => 7.5.3 
    @storybook/storybook-deployer: ^2.8.16 => 2.8.16 
    eslint-plugin-storybook: ^0.6.15 => 0.6.15 
    storybook: ^7.5.3 => 7.5.3

Additional context

Why do we need replace(/[^a-z0-9]/gi, '-') ???
Wouldn't it be better to use encodeURI ???

[xyy94813]

Solution 1:

Use encodeURI or encodeURIComponent

Solution 2:

Pass id-in-story to Subheading

[xyy94813]

We may need to distinguish between Scope IDs and Global IDs like GraphQL does