Instructions for MDX format

[binhxn]

Is there a way to implement this addon in MDX format?

Here's an example with @storybook/addon-knobs :

<Story name="knobs" parameters={{ decorators: [withKnobs] }}>
  <Avatar
    loading={boolean('Loading')}
    size={select('Size', ['tiny', 'small', 'medium', 'large'])}
    username="Some user"
    src="https://i.pravatar.cc/300"
  />
</Story>

Resources:

• You can see the code snippet above here
• Storybook does not have official MDX docs as of date, but they have provided a link to the technical review of it.

edit: add resources

[pocka]

@binhxn
All you need is putting the decorator (withDesign) and setting the design parameter. According to the docs in next branch, you can use this addon by:

// `decorators={[withDesign]}` is not needed when you put it as a global decorator in the config file
<Story
  name="story"
  decorators={[withDesign]}
  parameters={{
    design: {
      type: 'figma',
      url: 'https://your-figma-file'
    }
  }}
>
  <YourComponent />
</Story>

NOTE: I don't test this 😎 If it doesn't work please tell me.

[shilman]

LGTM @pocka 👍

Would probably use <Meta decorators={[withDesign]} /> (component decorator) or even addDecorator(withDesign) (global decorator) in general, tho your example is correct to add it to an individual story.

[binhxn]

@pocka @shilman Thank you for the speedy response.
However, when I add the decorator to either the global, component, or story level, I run into a build error.

This is the code snippet of the global decorator in my .storybook/config.js file:

// ...
import { withDesign } from 'storybook-addon-designs';

const stories = require.context(
  '../src',
  true,
  /\.stories\.(js|ts|jsx|tsx|mdx)$/,
);

const intro = require.context('../src/Intro', false, /Intro\.stories\.mdx/);

addDecorator(withDesign);
addDecorator(story => (
  <ThemeProvider theme={theme}>
    <StylesGlobal />
    {story()}
  </ThemeProvider>
));

configure([intro, stories], module);

For component/story level, I tried the example code you provided above, but no luck.

Any ideas on this?

[shilman]

Here's an example that's working for me at the component level:

import { Meta, Story } from "@storybook/addon-docs/blocks";
import { config, withDesign } from "storybook-addon-designs";
import { Button } from "./Button";

<Meta title="Test" decorators={[withDesign]} />

<Story
  name="button"
  parameters={{
    design: config({
      type: "iframe",
      url: "https://www.wikipedia.org"
    })
  }}
>
  <Button>hello</Button>
</Story>

[binhxn]

@shilman Thank you, it worked! Well, with some alterations:

1. I originally had the <Preview> component (from addon-docs) wrapped around <Story>. It did not work, so I removed it. Somehow worked while I was typing this out
2. Adding the config function fixed it for me. I'm now able to see the preview.
3. Adding the withDesign decorator to <Meta> broke it for me completely. I have to remove it in order to work. It shows the same error as the screenshot I posted above.

So using your code above, this is what worked for me:

import { Meta, Story } from "@storybook/addon-docs/blocks";
import { config } from "storybook-addon-designs";
import { Button } from "./Button";

<Meta title="Test" />

<Story
  name="button"
  parameters={{
    design: config({
      type: "iframe",
      url: "https://www.wikipedia.org"
    })
  }}
>
  <Button>hello</Button>
</Story>

Regardless, it solved my problem so I will close this ticket. Thank you again!