Add story names to preserve component history

[kylesuss]

I noticed in #95 that a large number of the stories had different names -- they were capitalized and spaces were added. As it turns out, Storybook uses startCase when you use CSF. We missed out on that originally as we were on a prerelease. I think I'd like to preserve the component history on Chromatic & therefore would opt to define the story names manually for now.

@leerob I am hoping to merge this into your typography-and-colors branch so that we can have Chromatic run again and only isolate the changes from your effort in there.

[kylesuss]

@shilman or @tmeasday does this make sense to you? I made this PR to try and control the names of the stories & Chromatic is still showing the capitalized names 🤔

I confirmed locally on this branch that the names of the stories are lower cased in Storybook.

[tmeasday]

Ok, took a look at this @kylesuss. A couple of things.

1. The reason for original problem was due to the design system being on a beta of 5.2, and the feature to capitalize story names from exports hadn't yet come in on the version we were on.

2. We should probably just lean into that now and wear the chromatic "new stories" (chromatic can't track stories across renames) as part of the upgrade to 5.2 proper. So not do this PR.

3. The feature that you used to rename the stories isn't currently supported by chromatic (https://github.com/chromaui/chromatic/issues/2549) so that's why they still appear capitalized in Chromatic (it shows the story.name rather than the story.displayName).

4. Chromatic actually would still treat these stories as new, even with the new displayName as the underlying name is what we use to track stories across builds. This seems like the right call and lets you rename stories (as long as you don't change the export name) without losing track of them in Chromatic.

[kylesuss]

Thanks @tmeasday. Slightly confusing thing about what you are saying:

[Chromatic] shows the story.name rather than the story.displayName

Bit of a tricky one to wrap my head around since I am doing this:

derp.story = {
  name: 'derp',
}

vs

derp.story = {
  displayName: 'derp',
}

Maybe under the hood the name that I am passing is getting remapped to displayName? That is how I read your comment.

Ultimately, the takeaway here sounds like we should just roll with Storybook's behavior and let the display names be generated automatically vs trying to override it. With that in mind, I will close this.

[tmeasday]

I agree that’s confusing but you have it right. @shilman do you remember if we thought about the fact that that name is super confusing? I propose we change it to displayName and deprecate the name option.