CODEWITHSUNDEEP
javascriptreactjsstorybook
Null isTrue
Null isTrue

Reputation: 1916

Storybook conversion to CSF

In the process of converting React Stories to use the advised CSF

I'm wondering how can the following (stories that are generated from looping an array of objects) be converted to CSF?

ps: my real array has over 15 items. this is just an example below


const stories = storiesOf("MyStories", module)

const storyOptions = [{name: "foo", age:21}, {name: "bar", age: 22},{name: "batman", age: 23}, ] // 

for (let option of storyOptions) {
  stories.add(option.name, () => {
    return <MyWrapperComponent option={option} />
  })
}

I'm having difficulties refactoring the above to output the same multiple stories as CSF: Only the first story returns so far:

export const myStories = () => {
  for (let option of storyOptions) {
    return <MyWrapperComponent option={option} />
  }
}

Upvotes: 2

Views: 1089

Answers (1)

Ga&#235;tan Maisse
Ga&#235;tan Maisse

Reputation: 12347

With Storybook 5.x, the latest version available as I'm writing this, it's not possible to iterate over an array and dynamically generate stories with CSF format because the 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. Unfortunately, you are stuck with the old syntax for now.

Upvotes: 2

Related Questions