[addon-docs] mdx breaks with expressions as Story name

Describe the bug

When using a Story in mdx, if you use brackets around your text variable like below, then the compiler errors out.

<Preview>
  <Story name={'text'}>
    <Button onClick={action('clicked')}>Hello Button</Button>
  </Story>
</Preview>

To Reproduce

Create MDX file with brackets around the Story name text

Expected behavior

Storybook should compile

possible cause

Error message points to this

https://github.com/storybookjs/storybook/blob/0ee0e2f1869f6565c84a8424b32bc39ee94fab23/addons/docs/src/mdx/mdx-compiler-plugin.js#L45-L48

[mitchellwarr]

The use case is that we would like to be able to keep our linter consistent across all jsx. We have the lint rule for everything being wrapped in curly brackets.

But besides that use case, using curly brackets in jsx is expected and valid behavior. It feels like a bug that this is breaking. I’m not sure if i just missed some important note in the docs pointing out the different behavior though. But i am a little concerned that when someone else in the team goes to make a doc that they keep the same style of jsx we use everywhere else, get this bug, and then not know why its not compiling

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