Addon-docs: Support MDX source in Preview w/ no Story blocks

[atanasster]

Issue: #7844

What I did

The mdx compiler now works directly with the AST to change props of components
added test cases for

<Preview>
  <Button onClick={action('clicked')}>view source in preview</Button>
</Preview>

The <Preview /> component in addon-docs checks for the mdxSource property to display source code.

How to test

The change is a new double pass:

1. babel parsing of the mdx ast @babel/parser
2. generate back the code using @babel/generator

while previously the original ast was preserved, so it can be a breaking change

• Is this testable with Jest or Chromatic screenshots?
  yes not sure how to test from the scripts, but this hint from @shilman works:
  yarn jest --testPathPattern=mdx-compiler-plugin.test.js

• Does this need a new example in the kitchen sink apps?
  added example to addon-docs.stories.mdx in official-storybook

• Does this need an update to the documentation?
  no

[vercel]

This pull request is being automatically deployed with ZEIT Now (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://zeit.co/storybook/monorepo/7kwn8a0km
🌍 Preview: https://monorepo-git-fork-atanasster-mdx-source-preview.storybook.now.sh

[stale]

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!

[sanchez]

Hi team I am wondering how far away this request is before it can be apart of the "@next" release? Thanks

[shilman]

@sanchez This works. I'm hesitant to merge, however, since it's just adding complexity to something that already seems unnecessarily complex. I'll try to figure it out with @atanasster once he's back from vacation next week.

[sanchez]

Awesome and Thanks. Currently as it stands the only way for me to test this feature is to pull the request and link to an existing project correct? If only there was a next of a next. Cheers!

[shilman]

@sanchez correct. it's really easy to pull & test it out in examples/official-storybook by using the instructions in CONTRIBUTING.md. much trickier to test it out in your own project.

[shilman]

LGTM! Sorry for the slow merge!!!

[joshjeong]

Hrm I've seen to have run into this issue in v5.3.19. Not sure if I'm missing something.

buttons.stories.js

import mdx from './buttons.mdx';

export default {
  title: 'Atoms/Buttons/Basic',
  decorators: [withKnobs, withA11y],
  parameters: {
    docs: {
      page: mdx,
      includeStories: [],
    },
  },
  component: Button,
};

buttons.mdx

// This does not work. The code is not available for preview.
  <Preview>
      <Button>I am a button</Button>
  </Preview>


//This works perfectly fine and shows code
<Preview>
  <Story id="atoms-buttons-basic--secondary-button" />
</Preview>

[shilman]

@joshjeong seems to be working here (see the button "view source in preview" mindway down the page) and the code in our monorepo:

https://storybookjs.netlify.app/official-storybook/?path=/docs/addons-docs-mdx-id--hello-story

do you need to rename your file "button.stories.mdx"?

[joshjeong]

Wouldn't that require a Meta tag and create separate stories?
I'm looking to replace the Docs tab for my current CSF Button components.
For example, create a mdx doc to replace the ones generated for these components
https://storybookjs.netlify.app/official-storybook/?path=/docs/basics-button--all-buttons