Storybook: MDX Stories with Knobs

[benwolfram]

Describe the bug
While knobs are enabled to supply prop values, having multiple stories within an MDX stories file using the same component more than once causes the components to share identical values. Working correctly in Canvas tab when stories are displayed individually. Also is corrected when removing knobs and hard-coding values.

To Reproduce
I have an example repo set up here https://github.com/benwolfram/mdx-knobs-multi-stories

Expected behavior
For the stories to be displayed given their default knob props values given when in Docs view.

Screenshots

Code snippets

import { Meta, Preview, Story, Props, Source, SourceState } from '@storybook/addon-docs/blocks';
import { number, select } from "@storybook/addon-knobs";
import { CircularProgress } from '@material-ui/core';

<Meta title="CircularProgress" component={CircularProgress} />

# Circular Progress

<Preview>
  <Story name="Standard">
    <CircularProgress />
  </Story>
</Preview>

<Props of={CircularProgress} />

### Thickness

<Preview withSource={SourceState.NONE}>
  <Story name="Thick">
    <CircularProgress thickness={number("Thickness", 5)} size={number("Size", 100)} />
  </Story>
  <Story name="Thicker">
    <CircularProgress thickness={number("Thickness", 10)} size={number("Size", 100)} />
  </Story>
  <Story name="Thickest">
    <CircularProgress thickness={number("Thickness", 15)} size={number("Size", 100)} />
  </Story>
</Preview>

System:
Environment Info:
System:
OS: macOS 10.15.2
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Binaries:
Node: 13.8.0 - /usr/local/bin/node
Yarn: 1.22.0 - /usr/local/bin/yarn
npm: 6.13.7 - /usr/local/bin/npm
Browsers:
Chrome: 80.0.3987.122
Firefox: 73.0.1
Safari: 13.0.4
npmPackages:
@storybook/addon-docs: ^5.3.14 => 5.3.14
@storybook/addon-knobs: ^5.3.14 => 5.3.14
@storybook/addons: ^5.3.14 => 5.3.14
@storybook/react: ^5.3.14 => 5.3.14
@storybook/source-loader: ^5.3.14 => 5.3.14

[shilman]

Hey, we're working on getting this fixed as part of 6.0! Hang tight!

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

[danawoodman]

@shilman is this on the roadmap? Would be super cool to have knobs in the MDX stories!

[shilman]

Coming in 6.0 https://github.com/storybookjs/storybook/pull/10834

[shilman]

Hi gang, We’ve just released addon-controls in 6.0-beta!

Controls are portable, auto-generated knobs that are intended to replace addon-knobs long term.

• Controls README
• Migration instructions

Please upgrade and try them out today. Thanks for your help and support getting this stable for release!

[benwolfram]

Woot woot 🎉 Just seeing this now, I will try things out on Monday!

[shilman]

For anybody who is interested in Controls but don't know where to start, I've created a quick & dirty step-by-step walkthrough to go from a fresh CRA project to a working demo. Check it out:

=> Storybook Controls w/ CRA & TypeScript

There are also some "knobs to controls" migration docs in the Controls README:

=> How do I migrate from addon-knobs?

[danawoodman]

@shilman just tried it out and it's great! Very excited to see controls supported in MDX stories! 💯 👏

[shilman]

Thanks @danawoodman ❤️