normal echo
All my stories have titles in the format Category/ComponentName. Right now I hardcode all the categories (ex. title: 'Feedback/Alert'). I'd like to be able to dynamically create these titles based on a util:
title: `${getCategory('Alert')}/Alert`
However, as soon as I change the title value from a string to an interpolated string using backticks, it breaks the story. Can this be done?
odd flax
IIRC, no, it has to be a string. A template literal is syntactic sugar for a function, and will not be evaluated.
normal echo
I'm just trying to use an interpolated string, which does have a type of string, so I'm not sure why it isn't working here. I tried simply changing the quotes to backticks and that broke it, even though it's still technically a string.
`Feedback/Alert`.toString()
also doesn't work.
Even if I move the title outside of the meta object and pass it in as a string, it still breaks.
const title = `Feedback/Alert`.toString();
const meta: Meta<typeof Alert> = {
...
title,
};
void hatch
In CSF, for performance reasons, the title must be statically analyzable. Unfortunately, it doesn't appear we have documentation about that.
You may be able to accomplish what you need using a configuration object(s) for your stories: https://storybook.js.org/docs/react/api/main-config-stories#with-a-configuration-object
Ahh, found it in the migration notes: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#titles-are-statically-computed
normal echo
I see, thanks for clarifying. That's unfortunate. I did look into the auto-title configuration option you mention, but it doesn't work for us due to the way we set up our components. It would also still make category changes difficult as entire folders would have to be relocated. Thanks anyways.
odd flax
In CSF, for performance reasons, the `title` must be statically analyzable. Unfo...
that's where i had it from, i couldn't find it either.
but yes, template literals, the `` strings are evaluated at runtime, virtually like functions, so they cannot be used there.
believe me, i feel your pain.
void hatch
Actually, let me try to explain this again...
With storyStoreV7 (now the default, for Storybook 7), CSF titles must be a string. The why for that is detailed here: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#titles-are-statically-computed
There are two ways forward:
CSF 3 adds the ability to define stories in your main.js using a "configuration object", which includes a titlePrefix property: https://storybook.js.org/docs/react/api/main-config-stories#with-a-configuration-object
As a short-term fix, you can disable storyStoreV7: https://storybook.js.org/docs/react/api/main-config-features#storystorev7
But as the migration notes I linked above state: This is deprecated and will very likely be removed entirely in Storybook 8.
normal echo
It's more a nice-to-have, so it's okay. 🙂
Yeah I'm not keen on adding in any deprecated features. I'll give the configuration option another look, but I'll likely just end up leaving it hardcoded and hope I don't have to do a lot of category changes in the future. 🙂 Thanks for your help @odd flax and @void hatch !
void hatch
Question for either of you: If you could define a single function, that would receive the CSF title (any other info needed?) and output a string, would that be sufficient?
Asking because it seems, to me, that we could fairly easily call such a function as we're building the Storybook.