CSF: Transform CSF named exports w/ makeDisplayName

[shilman]

Issue: #7599

What I did

• Add options.makeDisplayName parameter
• Default to lodash.startCase
• Apply to CSF named exports only
• Update the MDX compiler to always preserve the name

Examples (input => output):

      const testCases = {
        name: 'Name',
        someName: 'Some Name',
        someNAME: 'Some NAME',
        some_custom_NAME: 'Some Custom NAME',
      };

This dramatically improves the ergonomics of CSF (thanks @kevinSuttle!!) but is disruptive to anybody who's already using CSF. Moreover it will be expensive to change in the future so I really want to get this right. Feedback wanted.

Other options I considered:

• Make this opt-in
• Apply this to all story names and not just CSF

How to test

• E2E: Source.stories.tsx change and output in official-storybook
• Unit: yarn test --testPathPattern client_api.test.ts

[vercel]

This pull request is automatically deployed with Now.
To access deployments, click Details below or on the icon next to each push.

[Hypnosphi]

src/client_api.ts(86,35): error TS7006: Parameter 'key' implicitly has an 'any' type.

[shilman]

UPDATE: @ndelangen has suggested an alternative where instead of changing the name that's passed to the story_store, we create a displayName parameter that only affects the display. The benefits of this approach is that the Story IDs will be more stable/predictable and won't be affected by code transformations. I'm going to try this out. It's a bigger change than this one, but it's important that we get this right.

[Hypnosphi]

Should we really mark it as a breaking change if it only affects functionality from beta?

[shilman]

@Hypnosphi Good point. I've created a new label, BREAKING PRERELEASE to document this

[ndelangen]

This returns a function?

I think this method name is misleading

[Hypnosphi]

makeGetDisplayName

[kevinSuttle]

Thanks @shilman! Apologies for not getting back to the PR. 🙇

[shilman]

@kevinSuttle My pleasure. Thanks for conceiving this feature -- it's huge for CSF ergonomics

[Hypnosphi]

Story IDs {...} won't be affected by code transformations

Unfortunately, this is what actually happens now in a couple of corner cases like following:

storiesOf('MyStories').add('default', () => <MyComponent />)

storiesof-to-csf cannot use reserved word default as an export name, so it uses defaultStory:

export default {
  title: 'MyStories',
};

export const defaultStory = () => <MyComponent />;

defaultStory.story = {
  name: 'default',
};

Oddly enough, story.name isn't used as actual story name, but "Default Story" is used instead. It also changes id from /story/my-stories--default to /story/my-stories--default-story

It's even worse in case of collision, when story0 is used as function name, and "Story 0" as story name. #8106 makes it fooStory / "Foo Story" in case of foo name collision

[shilman]

You can currently control the ID and display name independently, though there is no way to get a reserved keyword as the ID. do you have any suggestions for how to do it differently? We might be able to change in 6.0

[Hypnosphi]

You can currently control the ID and display name independently

Honestly, it brings more confusion than value. Here's my suggestion:
– Add consistentNames option in 5.3. It will use exportedFunction.story.name as storyObject.name.
– Make it the default and only behavior in 6.0

[shilman]

@ndelangen wants the ID to be controlled by the named export for monoconfig. Won't make any changes until we make sure they are compatible with what he needs

[Hypnosphi]

Another example of ID change after applying transform: #8000 (comment)

[ndelangen]

– Add consistentNames option in 5.3. It will use exportedFunction.story.name as storyObject.name.
– Make it the default and only behavior in 6.0

I'm fine with that, monoconfig won't be happening before 6.0 anyway