-
-
Notifications
You must be signed in to change notification settings - Fork 9.4k
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
Migrating from StoriesOf Api to CSF - For Loop #9805
Comments
@abt86croz AFAIK dynamic story generation is still only possible with the |
To add some explanation, it is impossible to do it with CSF for now as requirements to have working stories are strict:
Everything is fine with the default export however there is currently no way to have dynamic named exports because JS Potential solution? On CSF side: Allow named exports of array and/or map and/or key-value object of story functions in addition to "simple story function". On Storybook side: Handle these new types of named exports and load stories accordingly. |
Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks! |
Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook! |
I'm interested in dynamically creating stories with loops as well. Please reopen this ticket. |
please send me info.
…On Wed, Jul 8, 2020 at 9:49 AM Attila Szeremi ***@***.***> wrote:
I'm interested in dynamically creating stories with loops as well. Please
reopen this ticket.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#9805 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AIZ3XKSAMSZYUZZMKPX32R3R2R2NZANCNFSM4KSVCLOA>
.
--
*Albemarle Ballet Theatre*
*www.abtdance.org <http://www.abtdance.org>*
*(434) 823-8888*
-- <https://www.youtube.com/watch?v=evsz4_AL2Hg>
|
Please re-open this. @shilman What can we do to help? |
That's the primary reason we're not deprecating the Can you tell us more about your use cases for dynamically generated stories? We're aware of the combinatorial stories use case and are considering supporting that natively to retain CSF's static analyzability. |
^ For me, |
I am defining my fixtures in an external file so they can be shared with tests an other composite components. With more complex components with many fixtures a CSF loop solution would be very favourable for me.
|
Has anyone found a workaround for this? |
I would be similarly interested. |
Any news on the successor of The CSF Layout is very inflexible and makes autogenerating anything quite tedious. We even thought about generating our stories files with node. |
Definitely CSF looks like a step backwards in terms of flexibility to generate combinatorial of stories. Im on the fence of what to do to achieve this. Looks like generating stories as a post step is the only viable option. |
We are actually doing that now. A ts-node script goes through all these const spacesBefore = tempFileContents.match(/^(\s+)*render:/m)[1];
const findRenderFunctionRegex = new RegExp(`^${spacesBefore}render:([\\S\\s]*^${spacesBefore}[)}]?,|.+,)`, 'm'); Our export const meta = {
title: 'Blocks/Hero',
component: "%COMPONENT_PLACEHOLDER%",
};
export const exportsToGenerate = Object.keys(heroThemes).map(themeColor => ({
[themeColor]: {
args: {
...generatedArgs,
backgroundColor: themeColor,
}
argTypes: generatedArgTypes,
render: "%RENDER_PLACEHOLDER%",
},
})); In the next step the ts-node script goes through the const { exportsToGenerate, meta } = await import(storiesFilePath); This is necessary so that e.g. our It's absolutely disgusting and I strongly disencourage anyone from using anything like this in production, but in our case it works like charm. We only use Storybook for local development though since our NextJS project has gotten quite large (and slow). You can take a look at the full files for inspiration here, but those aren't cleaned up for readability and are specific for our use case with NX. |
Describe the bug
Can't loop and create dynamic CSF stories as used to when using the
storiesOf
APIHey @shilman - we're following the CSF migration recommendation and I'm looking for examples where you can loop and generate multiple stories as we used to do using
storiesOf
Like your
forEach
example here.As you know, In the past we could do:
Then we'd have stories populated as:
How can we loop and have the same result as CSF without the
storiesOf
API?The text was updated successfully, but these errors were encountered: