javascript - 在故事书中使用 tsx 和 mdx 做出反应

Question

我正在努力实现这一目标：

但我的故事被分解成 mdx 和 tsx 文件。

到目前为止，我的 mdx 文件如下所示：

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" />

这有效。但没有类型检查、代码提示等。所以我想把它分解成tsx这样mdx：

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" />

但这导致文档看起来像这样：

所以我错过了整个第二个组件描述和配置。我怎样才能让它出现在这个设置中？

当我在 mdx 中更改标题时，它不会在故事书中更新。所以故事书实际上并没有看到/接受这个 mdx 作为文档。我错过了什么？