Single story hoisting doesn't account for whitespace in title

[EliHowey]

Describe the bug
The new single story hoisting feature in Storybook v6.1 will only hoist a story if the default export's title does not contain leading or trailing whitespace around the story name.

To Reproduce

1. Create a (CSF/MDX) story with:
   • A title of the form Group / Component (note the spaces around /)
   • A story function named Component
2. npm run storybook
3. See error

Expected behavior

Single stories should be hoisted correctly, regardless of whether the story name has leading or trailing whitespace.

Screenshots / Code snippets

The following code correctly hoists the story name:

import { Meta, Story } from '@storybook/angular';
import { FocusStoryComponent, FocusStoryModule } from './focus.story.component';

export default {
    title: 'Patterns/Focus',
    component: FocusStoryComponent
} as Meta;

const Template: Story<FocusStoryComponent> = (args) => ({
    component: FocusStoryComponent,
    moduleMetadata: {
        imports: [FocusStoryModule]
    },
    props: args
});

export const Focus: Story<FocusStoryComponent> = Template.bind({});

But adding spaces around the title delimiter does not:

export default {
    title: 'Patterns / Focus',
    component: FocusStoryComponent
} as Meta;

Manually setting Focus.storyName = ' Focus' (with the leading space) does correctly hoist the story.

System

Environment Info:

  System:
    OS: macOS Mojave 10.14.6
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Binaries:
    Node: 12.13.0 - ~/.nvm/versions/node/v12.13.0/bin/node
    npm: 6.14.8 - ~/.nvm/versions/node/v12.13.0/bin/npm
  Browsers:
    Chrome: 87.0.4280.67
    Edge: 87.0.664.47
    Firefox: 77.0.1
    Safari: 14.0.1
  npmPackages:
    @storybook/addon-a11y: 6.1.3 => 6.1.3 
    @storybook/addon-docs: 6.1.3 => 6.1.3 
    @storybook/addon-essentials: 6.1.3 => 6.1.3 
    @storybook/addon-knobs: 6.1.3 => 6.1.3 
    @storybook/addons: 6.1.3 => 6.1.3 
    @storybook/angular: 6.1.3 => 6.1.3

Additional context
The documentation for single story hoisting does mention that the component and story names must match exactly, but it does not make clear that this includes whitespace before or after the component name. This is likely to be broadly confusing for developers, especially since adding spaces around the title delimiter doesn't break the sidebar tree generation generally.

[ghengeveld]

@shilman Are spaces supposed to be allowed in title?

[ghengeveld]

This is a bug in extracting the component name from the title string. It shouldn't contain leading or trailing whitespace. Interestingly, the root/folder names work fine. Take for example:

export default {
  title: 'Addons / A11y / BaseButton'
}

It yields the following dataset:

Note "Addons" and "A11y" do not have leading or training whitespace, but " BaseButton" does.

[shilman]

Ermahgerd!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.2.0-alpha.0 containing PR #13275 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.