How to make a stories.mdx file in Storybook?

在Storybook中制作stories.mdx文件是一个非常有效的方式来编写和展示你的组件文档。MDX是一种将Markdown和JSX混合在一起的格式，这使得你可以在Markdown文件中直接使用React组件。

步骤1: 安装必要的依赖

首先，确保你的项目中已经安装了Storybook。然后，你需要安装 @storybook/addon-docs，这个插件能让Storybook支持MDX格式。

bash
npm install @storybook/addon-docs --save-dev

步骤2: 配置Storybook

在你的.storybook文件夹中的main.js配置文件里，你需要添加addon-docs：

javascript
module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-docs'],
};

步骤3: 创建你的MDX文件

在你的项目中，选择一个组件来编写文档。假设你有一个Button组件，你可以创建一个Button.stories.mdx文件。这个文件中，你可以使用MDX的格式来编写组件的故事（Story）和文档。

mdx
import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
import { Button } from './Button';

<Meta title="Components/Button" component={Button} />

# Button

这是一个基础的按钮组件。

## 使用示例

<Preview>
  <Story name="Basic">
    <Button>点击我</Button>
  </Story>
</Preview>

## Props

<Props of={Button} />

步骤4: 运行Storybook

配置完毕后，你可以运行Storybook来查看你的组件文档：

bash
npm run storybook

打开浏览器，访问Storybook的URL（通常是 http://localhost:6006），你就可以看到你的Button组件的故事和文档了。

示例

假设我们有一个简单的Button组件，代码如下：

javascript
import React from 'react';

const Button = ({ children, onClick }) => (
  <button onClick={onClick}>{children}</button>
);

export default Button;

你可以按照上述步骤创建一个相应的Button.stories.mdx文件，来展示如何使用这个按钮，并且提供一些交互的示例。这样不仅可以帮助开发者理解组件的用法，而且可以作为组件的交互文档，供设计师和产品经理查阅。