New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
CSF: Revert makeDisplayName
& add stable storyNameFromExport
#7901
Conversation
This pull request is automatically deployed with Now. |
I think this is good if we commit to the current version of Otherwise having ids change between versions of storybook is a hot mess I guess ;) Definitely makes more sense to do this if the user can't change that function. |
@tmeasday We can make this stable AND potentially configurable in the future: storiesOf('comp', module).add('Foo Bar', () => <>hello</>, { displayName: userFn('fooBar') }); |
I guess although that could be pretty confusing too |
@tmeasday I've updated the code to try to make it less confusing & updated the description up top. |
makeDisplayName
config and add stable storyNameFromExport
function
makeDisplayName
config and add stable storyNameFromExport
functionmakeDisplayName
& add stable storyNameFromExport
Issue: #7599
What I did
This partially reverts the change made in #7878, keeping the displayName concept, but removing its configurability and adding a new
storyNameFromExport
concept.Why I did it
We made
hierarchySeparator
andhierarchyRootSeparator
configurable, and it has been a maintenance nightmare, adding complexity across our codebase and bringing that nightmare to other tools in the Storybook ecosystem.makeDisplayName
is a similar foundational configuration. However since it can contain arbitrary JS code, we expect it will cause an order of magnitude MORE headaches. At the very least we're not ready to sign up for it without a lot more evidence that it's necessary.This:
displayName
makeDisplayName
entirely, replacing it with a stablestoryNameFromExport
utility functionNow we transform the CSF named export using
lodash.startCase
as the default. If you want other behavior you can use thenamedExport.story = { name: 'anything goes' }
construct.Consider the following CSF:
Before this change:
Story ID in URL:
comp--foobar
After this change:
Note that if the user manually specifies a display name, it will still get passed through:
=>
Story ID in URL:
comp--foo-bar
How to test