title: using tsx and mdx in storybook react
body: <p>I am trying to achieve this:</p>
  <p><a href="https://i.stack.imgur.com/SCkom.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SCkom.png" alt="enter image description here" /></a></p>
  <p>but with my stories broken down into mdx and tsx files.</p>
  <p>So far My mdx file looks like this:</p>
  <pre><code>import { Meta, Story, Canvas, Preview, Props, ArgsTable } from '@storybook/addon-docs';
  
  import { Button, Icons } from '../..';
  
  &lt;!-- Components --&gt;
  
  export const ButtonWithoutIcon = (args) =&gt; &lt;Button {...args}&gt;Click&lt;/Button&gt;;
  export const ButtonWithIcon = (args) =&gt; (
    &lt;Button icon={&lt;Icons.Activate /&gt;} {...args}&gt;
      Click
    &lt;/Button&gt;
  );
  
  &lt;!-- Content --&gt;
  
  &lt;Meta
    title=&quot;Components/Atoms/Button&quot;
    component={Button}
    argTypes={{
      icon: { control: false },
    }}
  /&gt;
  
  # Button Without Icon
  
  &lt;Preview&gt;
    &lt;Story
      name=&quot;Button without icon&quot;
      argTypes={{
        iconPosition: { control: false },
      }}
    &gt;
      {ButtonWithoutIcon}
    &lt;/Story&gt;
  &lt;/Preview&gt;
  
  &lt;Props story=&quot;Button without icon&quot; /&gt;
  
  ---
  
  # Button With Icon
  
  &lt;Preview&gt;
    &lt;Story name=&quot;Button with icon&quot;&gt;{ButtonWithIcon}&lt;/Story&gt;
  &lt;/Preview&gt;
  
  &lt;Props story=&quot;Button with icon&quot; /&gt;
  </code></pre>
  <p>And this works. But doesn't have type checking, code hinting and so on. So I wanted to break it down into <code>tsx</code> and <code>mdx</code> like so:</p>
  <p><code>tsx</code></p>
  <pre><code>import React from 'react';
  
  import { Button, Icons } from '../..';
  import Docs from './Button.stories.mdx';
  
  export const ButtonWithoutIcon = (args: any) =&gt; &lt;Button {...args}&gt;Click&lt;/Button&gt;;
  export const ButtonWithIcon = (args: any) =&gt; (
    &lt;Button icon={&lt;Icons.Activate /&gt;} {...args}&gt;
      Click
    &lt;/Button&gt;
  );
  
  export default {
    title: 'Components/Atoms/Button',
    component: Button,
    argTypes: {
      backgroundColor: { control: 'color' },
    },
    parameters: {
      docs: {
        page: Docs,
      },
    },
  };
  </code></pre>
  <p><code>mdx</code></p>
  <pre><code>import { Meta, Story, Canvas, Preview, Props, ArgsTable } from '@storybook/addon-docs';
  
  import { Button, Icons } from '../..';
  
  &lt;!-- Content --&gt;
  
  &lt;Meta
    title=&quot;Components/Atoms/Button&quot;
    component={Button}
    argTypes={{
      icon: { control: false },
    }}
  /&gt;
  
  # Button Without Icon
  
  &lt;Preview&gt;
    &lt;Story
      name=&quot;Button without icon&quot;
      argTypes={{
        iconPosition: { control: false },
      }}
    &gt;
      {ButtonWithoutIcon}
    &lt;/Story&gt;
  &lt;/Preview&gt;
  
  &lt;Props story=&quot;Button without icon&quot; /&gt;
  
  ---
  
  # Button With Icon
  
  &lt;Preview&gt;
    &lt;Story name=&quot;Button with icon&quot;&gt;{ButtonWithIcon}&lt;/Story&gt;
  &lt;/Preview&gt;
  
  &lt;Props story=&quot;Button with icon&quot; /&gt;
  </code></pre>
  <p>But this caused the docs to look like this:</p>
  <p><a href="https://i.stack.imgur.com/1umSQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1umSQ.png" alt="enter image description here" /></a></p>
  <p>So I'm missing the entire second component description and config. How can I make it appear in this setup?</p>
  <p>When I change the heading in mdx, it doesn't update in storybook. So the storybook doesn't actually see/accept this mdx as docs. What am I missing?</p>