Storybook: MDX ability to loop (map) <Preview> and <Story>

[vinceumo]

Hi, Thanks for this project, I love using it.

I'm using MDX, I would like to be able to generate multiple stories using an array. Not sure if it is possible.

I tries something like that with @storybook/react v5.2.3:

import { Meta, Story, Preview } from "@storybook/addon-docs/blocks";

<Meta title="UI" />

# My story

<div>
  {[0, 1, 2].map(el=>(
    <Preview>
      <Story name={`el${el}`}>
          <div>{el}</div>
        </Story>
    </Preview>
  ))}
</div>

I have no error but the output is not as expected:

Thanks a lot

[shilman]

@vinceumo Unfortunately I don't see this happening any time soon. Those story definitions get automatically compiled to named exports when the file is loaded, so they need to be static at this time. Making them dynamic is tricky, and a low priority unless somebody from the community wants to take it on.

[Aaron-Pool]

For simple and deterministic cases, you might consider using this. Kent Dodds is great, and he made this for pretty much exactly this use case, as you can see from the example.

[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!

[lukaskoeller]

Are there any updates on this one? Would be highly interested in this feature as well.

Especially when I think of Design Tokens (Colors, Icons, etc.) and using <ColorPalette> and <ColorItem> provided by addon-docs. It would enable me to loop through all colors (key, values) provided by a json file that is part of Style Dictionarie's build. No more manual maintenance.

[shilman]

@lukaskoeller You can do that WITHIN a Story or JSX element in the page, no problem. The only limitation is you can't dynamically generate stories. But it doesn't sound like you need that for your use case.

[lukaskoeller]

Does this also works for for loops? When I try to use it I get an error, saying:

Module build failed (from ./node_modules/@mdx-js/loader/index.js):
SyntaxError: unknown: Unexpected token (23:6)

This appears when I'm trying to use for...of loop. Though, it doesn't appear when I use map. My goal is to get key and value in one loop.

for (let [key, value] of Object.entries(tokens)) {
      console.log(key, value);
}

But also, seems like JSX does not like for in general

[vinceumo]

Hi @lukaskoeller, in JSX you should use .map.

https://reactjs.org/docs/lists-and-keys.html

Assuming you have an object you could have something like that:

<Preview>
  <Story name="My Story">
     {Object.keys(tokens).map(key => (
       <p>My key is {key} and my value is {tokens[key]}</p>
      )}
  </Story>
</Preview>

[lukaskoeller]

Thank you @shilman and @vinceumo very much for your help. For anybody interested and feedback for improvements, I ended up using this code:

<ColorPalette>
{
  Object.entries(tokens.color.brand).map((token, i) => {
    return(
      <ColorItem
        key={i}
        title={`${token[0]} color`}
        subtitle={ token[1].base.name.replace('Base', '[name]') }
        colors={
          Object.entries(token[1]).map((value) => {
            return value[1].value
          })
        }
      />
    )
  })
}
</ColorPalette>