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: Story names should have intelligent defaults #7599
Comments
I love this idea. This could be implemented pretty easily as an options parameter. Globally in your config: addParameters({
options: {
displayName: (key) => kebabCase(key).replace('-', ' ')
}
}) Locally to a component's stories: export default {
...
parameters: {
options: {
displayName: ...
}
}
} Wanna take a stab at something like this? |
Sure! |
Right here:
Getting the parameter out of the client API might require some redesign now that I think about it. Any thoughts @tmeasday @ndelangen? |
In monoconfig I'd implement this within the loader. But that's some time away. @shilman I'm not sure what you mean. Looks to me that implementing this exactly where you pointed out is perfectly do-able? |
@shilman can we just add something to the store to get the current list of global parameters? They are stored in the story store somewhere.. |
FWIW, I got the above to work within here: storybook/lib/client-api/src/client_api.ts Lines 234 to 240 in 8d5422b
by setting Happy to implement wherever is best 👍
I noticed this, too, @shilman. 🤔 |
@kevinSuttle I think that's a fine place to put it: const { options: { displayName } } = allParams;
const name = displayName ? displayName(storyName) : storyName; What do you think? |
Looks good to me! |
Ok so I think I have this down, or at least pretty close. Something like this? const {
options: { displayNameStyle },
name: storyNameParam,
} = allParam;
const getStoryDisplayName = () => {
const kebabStoryName: string = kebabCase(storyName).replace(/-/g, ' ');
switch (displayNameStyle) {
case 'upperFirst':
return upperFirst(kebabStoryName);
case 'startCase':
return startCase(kebabStoryName);
case 'lowercase':
return lowerCase(kebabStoryName);
case 'kebabCase':
return kebabStoryName;
case 'authored':
default:
return storyName;
}
};
const displayName = !storyNameParam
? displayNameStyle
? getStoryDisplayName()
: storyNameParam
: storyName;
this._storyStore.addStory(
{
id,
kind,
name: displayName, |
@kevinSuttle i think we should just allow users to specify a function like we do with displayName: (storyName) => kebabCase(storyName).replace(/-/g, ' ').upperFirst(); |
That sounds much more reasonable! |
Shiver me timbers!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.2.0-beta.43 containing PR #7878 that references this issue. Upgrade today to try it out! You can find this prerelease on the Closing this issue. Please re-open if you think there's still more to do. |
Yowza!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.2.0-beta.46 containing PR #7901 that references this issue. Upgrade today to try it out! You can find this prerelease on the |
Crikey!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.2.0-beta.47 containing PR #7915 that references this issue. Upgrade today to try it out! You can find this prerelease on the |
Sorry for poking from a closed story @shilman but I am quite confused with what is available for Is something like this valid?
Since setting "1 month visible" as the story name is invalid, I would like to use it as the displayName. Thank you, Patrick |
@patricklafrance MDX uses |
Is your feature request related to a problem? Please describe.
It's tedious to have to change the story name in CSF to a human readable one.
e.g.
withSubtitle.story = {name: 'with subtitle'}
Describe the solution you'd like
A clear and concise description of what you want to happen.
I'm wondering if the
export
ed story names should follow a convention or be allowed to be configured globally in some way.e.g. Having to do
withSubtitle.story = {name: 'with subtitle'}
seems automatable, and most likely what most users expect to end up as "with subtitle" in the left panel.e.g.
export const WithSubtitle
would end up as "With Subtitle".Describe alternatives you've considered
Just leaving it as is.
Are you able to assist bring the feature to reality?
I can
Additional context
N/A
The text was updated successfully, but these errors were encountered: