javascript - korištenje tsx i mdx u storybook reactu

Pokušavam postići ovo:

ali s mojim pričama razloženim u mdx i tsx datoteke.

Do sada moja mdx datoteka izgleda ovako:

import { Meta, Story, Canvas, Preview, Props, ArgsTable } from '@storybook/addon-docs';

import { Button, Icons } from '../..';

<!-- Components -->

export const ButtonWithoutIcon = (args) => <Button {...args}>Click</Button>;
export const ButtonWithIcon = (args) => (
  <Button icon={<Icons.Activate />} {...args}>
    Click
  </Button>
);

<!-- Content -->

<Meta
  title="Components/Atoms/Button"
  component={Button}
  argTypes={{
    icon: { control: false },
  }}
/>

Button Without Icon

<Preview>
  <Story
    name="Button without icon"
    argTypes={{
      iconPosition: { control: false },
    }}
  >
    {ButtonWithoutIcon}
  </Story>
</Preview>

<Props story="Button without icon" />

---

Button With Icon

<Preview>
  <Story name="Button with icon">{ButtonWithIcon}</Story>
</Preview>

<Props story="Button with icon" />

I ovo radi. Ali nema provjeru tipova, sugestije koda i slično. Zato sam želio podijeliti to na tsx i mdx ovako:

tsx

import React from 'react';

import { Button, Icons } from '../..';
import Docs from './Button.stories.mdx';

export const ButtonWithoutIcon = (args: any) => <Button {...args}>Click</Button>;
export const ButtonWithIcon = (args: any) => (
  <Button icon={<Icons.Activate />} {...args}>
    Click
  </Button>
);

export default {
  title: 'Components/Atoms/Button',
  component: Button,
  argTypes: {
    backgroundColor: { control: 'color' },
  },
  parameters: {
    docs: {
      page: Docs,
    },
  },
};

mdx

import { Meta, Story, Canvas, Preview, Props, ArgsTable } from '@storybook/addon-docs';

import { Button, Icons } from '../..';

<!-- Content -->

<Meta
  title="Components/Atoms/Button"
  component={Button}
  argTypes={{
    icon: { control: false },
  }}
/>

Button Without Icon

<Preview>
  <Story
    name="Button without icon"
    argTypes={{
      iconPosition: { control: false },
    }}
  >
    {ButtonWithoutIcon}
  </Story>
</Preview>

<Props story="Button without icon" />

---

Button With Icon

<Preview>
  <Story name="Button with icon">{ButtonWithIcon}</Story>
</Preview>

<Props story="Button with icon" />

Ali to je uzrokovalo da dokumenti izgledaju ovako:

Dakle, nedostaje mi cijeli opis i konfiguracija drugog komponenta. Kako mogu učiniti da se pojavi u ovom postavljanju?

Kada promijenim naslov u mdx-u, on se ne ažurira u storybooku. Dakle, storybook zapravo ne vidi/ne prihvaća ovaj mdx kao dokumentaciju. Što mi nedostaje?