Storybook: Migrating from StoriesOf Api to CSF - For Loop

[abt86croz]

Describe the bug
Can't loop and create dynamic CSF stories as used to when using the storiesOf API

Hey @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:

const stories = storiesOf('Heroes', module)

const storyOptions = [
  { name: 'thor', age: 21 },
  { name: 'ironman', age: 22 },
  { name: 'batman', age: 23 }
]

// loop and generate stories
for (const option of storyOptions) {
  stories.add(option.name, () => {
    return <p>This hero is {option.age}</p>
  })
}

Then we'd have stories populated as:

How can we loop and have the same result as CSF without the storiesOf API?

export const heroes = () => {
for (const option of storyOptions) {
  // stories.add(option.name, () => {
   // ???
    return <p>This hero is {option.age}</p>
  })
}
}

[shilman]

@abt86croz AFAIK dynamic story generation is still only possible with the storiesOf API.

[gaetanmaisse]

To add some explanation, it is impossible to do it with CSF for now as requirements to have working stories are strict:

• a required default export
• one or more named exports

Everything is fine with the default export however there is currently no way to have dynamic named exports because JS importand export have to be statically analyzable - i.e. known before executing the code.

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.

[stale[bot]]

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!

[stale[bot]]

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!

[amcsi]

I'm interested in dynamically creating stories with loops as well. Please reopen this ticket.

[abt86croz]

please send me info.

On Wed, Jul 8, 2020 at 9:49 AM Attila Szeremi [e-mail]
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
https://github.com/storybookjs/storybook/issues/9805#issuecomment-655532208,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AIZ3XKSAMSZYUZZMKPX32R3R2R2NZANCNFSM4KSVCLOA
.

--
Albemarle Ballet Theatre
www.abtdance.org http://www.abtdance.org
[phone]
-- https://www.youtube.com/watch?v=evsz4_AL2Hg

[Duder-onomy]

Please re-open this.
It seems like a reasonable thing to want. Personally, when writing stories, sometimes I like to loop through all prop combinations and create a story for each one.

@shilman What can we do to help?

[shilman]

That's the primary reason we're not deprecating the storiesOf format. It allows you to do exactly what you just described, and we recommend you use that for dynamically generated stories.

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.

[Duder-onomy]

^ For me,
The only use case would be the 'combinatorial' one you mention.

[stubar]

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.

import * as fixtures from './fixtures';

import AuthorBio, { AuthorBioProps } from './AuthorBio';

export default {
  title: 'Components/AuthorBio',
  component: AuthorBio
} as Meta;

export const WithRole = (args: AuthorBioProps) => <AuthorBio {...args} />;
WithRole.args = fixtures.AuthorBioWithRole;

export const WithoutRole = (args: AuthorBioProps) => <AuthorBio {...args} />;
WithoutRole.args = fixtures.AuthorBioWithoutRole;

... // potentially many more boilerplate exports here