docs: storybook

SoonIter · SoonIter · commit cb95d52733f5 · 2024-12-13T12:21:29.000+08:00
diff --git a/website/docs/en/guide/advanced/storybook.mdx b/website/docs/en/guide/advanced/storybook.mdx
@@ -25,11 +25,11 @@ Using React as an example, at this step you need to:
 
 1. Install the dependencies for Storybook Rsbuild React framework. The essential ones include
 
-   - [storybook](https://www.npmjs.com/package/@storybook/addon-essentials): The Storybook core.
-   - [@storybook/addon-essentials](https://www.npmjs.com/package/@storybook/addon-essentials): a curated collection of addons to bring out the best of Storybook.
-   - [@rsbuild/core](https://www.npmjs.com/package/@rsbuild/core): Storybook builder.
-   - [storybook-addon-rslib](https://www.npmjs.com/package/storybook-addon-rslib): This addon will make Storybook Rsbuild could derive Rsbuild configuration from Rslib config file.
-     The addon will automatically read the Rslib configuration and apply it to Storybook Rsbuild, ensuring that the configuration is unified. You can check the [storybook-addon-rslib](https://storybook.rsbuild.dev/guide/integrations/rslib.html) documentation for available options.
+  - [storybook](https://www.npmjs.com/package/storybook): The Storybook core.
+  - [@storybook/addon-essentials](https://www.npmjs.com/package/@storybook/addon-essentials): a curated collection of addons to bring out the best of Storybook.
+  - [@rsbuild/core](https://www.npmjs.com/package/@rsbuild/core): Storybook builder.
+  - [storybook-addon-rslib](https://www.npmjs.com/package/storybook-addon-rslib): This addon will make Storybook Rsbuild could derive Rsbuild configuration from Rslib config file.
+    The addon will automatically read the Rslib configuration and apply it to Storybook Rsbuild, ensuring that the configuration is unified. You can check the [storybook-addon-rslib](https://storybook.rsbuild.dev/guide/integrations/rslib.html) documentation for available options.
 
    <PackageManagerTabs
      command={{
@@ -40,48 +40,48 @@ Using React as an example, at this step you need to:
      }}
    />
 
-   The dependencies varies for each framework, please refer to the [Storybook Rsbuild documentation](https://storybook.rsbuild.dev/guide/framework.html) for details. In this React example, we will install [storybook-react-rsbuild](https://www.npmjs.com/package/storybook-react-rsbuild) as the framework integration.
+  The dependencies varies for each framework, please refer to the [Storybook Rsbuild documentation](https://storybook.rsbuild.dev/guide/framework.html) for details. In this React example, we will install [storybook-react-rsbuild](https://www.npmjs.com/package/storybook-react-rsbuild) as the framework integration.
 
-   <Tabs>
-     <Tab label="React">
-       <PackageManagerTabs command="add storybook-react-rsbuild -D" />
-     </Tab>
-     <Tab label="Vue">
-       <PackageManagerTabs command="add storybook-vue3-rsbuild -D" />
-     </Tab>
-   </Tabs>
+  <Tabs>
+    <Tab label="React">
+      <PackageManagerTabs command="add storybook-react-rsbuild -D" />
+    </Tab>
+    <Tab label="Vue">
+      <PackageManagerTabs command="add storybook-vue3-rsbuild -D" />
+    </Tab>
+  </Tabs>
 
 2. Configure the Storybook configuration file `.storybook/main.js`, specify the stories and addons, and set the framework with corresponding framework integration.
 
-   ```js title=".storybook/main.js"
-   export default {
-     stories: [
-       '../stories/**/*.mdx',
-       '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
-     ],
-     addons: ['@storybook/addon-essentials', 'storybook-addon-rslib'],
-     framework: 'storybook-react-rsbuild', // storybook-react-rsbuild for example
-   };
-   ```
+  ```js title=".storybook/main.js"
+  export default {
+    stories: [
+      '../stories/**/*.mdx',
+      '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+    ],
+    addons: ['@storybook/addon-essentials', 'storybook-addon-rslib'],
+    framework: 'storybook-react-rsbuild', // storybook-react-rsbuild for example
+  };
+  ```
 
 3. Add a simple story to the `stories` directory. For example, create a `Button.stories.js` file with the following content:
 
-   ```js title="stories/Button.stories.js"
-   import { Button } from '../src/Button';
+  ```js title="stories/Button.stories.js"
+  import { Button } from '../src/Button';
 
-   const meta = {
-     title: 'Example/Button',
-     component: Button,
-   };
+  const meta = {
+    title: 'Example/Button',
+    component: Button,
+  };
 
-   export default meta;
+  export default meta;
 
-   export const Primary = {
-     args: {
-       primary: true,
-       label: 'Button',
-     },
-   };
+  export const Primary = {
+    args: {
+      primary: true,
+      label: 'Button',
+    },
+  };
    ```
 
 :::tip
@@ -97,9 +97,6 @@ npx storybook build // build static files
 
 Check out more details in the [Storybook Rsbuild documentation](https://storybook.rsbuild.dev/) and the [Storybook documentation](https://storybook.js.org/docs/react/get-started/introduction).
 
-{/* TODO: */}
-{/* ## Module Federation */}
-
 ## Example
 
 - [React component library + Rslib + Storybook](https://github.com/rspack-contrib/storybook-rsbuild/tree/main/sandboxes/rslib-react-component)
diff --git a/website/docs/zh/guide/advanced/storybook.mdx b/website/docs/zh/guide/advanced/storybook.mdx
@@ -5,102 +5,99 @@ import { Tab, Tabs } from 'rspress/theme';
 
 [Storybook](https://storybook.js.org/) 是一个强大的为 React、Vue 等框架独立开发 UI 组件的工具，它能够独立构建和测试组件，从而提升开发和测试效率。
 
-[storybook-rsbuild](https://github.com/rspack-contrib/storybook-rsbuild) 是 Rsbuild 支持的 Storybook 构建器，并集成了 React、Vue3 框架和原生 JavaScript。统一使用 Rsbuild 构建系统可以使Storybook 与 Rslib 使用统一的构建配置。
+[storybook-rsbuild](https://github.com/rspack-contrib/storybook-rsbuild) 是 Rsbuild 支持的 Storybook 构建器，并集成了 React、Vue3 框架和原生 JavaScript。统一使用 Rsbuild 构建系统可以使 Storybook 与 Rslib 使用统一的构建配置。
 
 :::tip
 你可以通过 [create-rslib](/guide/start/quick-start#creating-an-rslib-project) 创建一个新项目。
 :::
 
 ## 快速开始
 
-### 设置 Rslib 项目
+### 创建一个 Rslib 项目
 
-这是设置 Storybook 的前提条件。你需要有一个包含组件的 Rslib 项目，你希望在 Storybook 中展示这些组件，请查看 [解决方案](/guide/solution/) 以设置 Rslib 项目。
+这是设置 Storybook 的前提条件。你需要有一个包含组件的 Rslib 项目，并希望在 Storybook 中展示这些组件，请查看 [解决方案](/guide/solution/) 以设置 Rslib 项目。
 
 
 ### 将 Storybook 添加到项目中
 
-S使用现有的 Rslib 项目设置 Storybook 项目。要使用 React、Vue 3、原生 JavaScript 或其他框架，必须首先安装适当的 Storybook 框架包。有关安装说明，请参阅 [Storybook Rsbuild 文档](https://storybook.rsbuild.dev/guide/framework.html)。
+使用现有的 Rslib 项目设置 Storybook。为了使用 React、Vue 3、原生 JavaScript 或其他框架，必须首先安装适当的 Storybook 框架包。有关安装说明，可以查阅 [Storybook Rsbuild 文档](https://storybook.rsbuild.dev/guide/framework.html)。
 
 以 React 为例，在这一步你需要：
 
-1. 安装 Storybook Rsbuild React 框架的依赖项。必要的依赖项包括
+1. 安装 Storybook Rsbuild React 框架的依赖。必要的依赖包括
 
-   - [storybook](https://www.npmjs.com/package/@storybook/addon-essentials)：Storybook 核心。
-   - [@storybook/addon-essentials](https://www.npmjs.com/package/@storybook/addon-essentials)：精选的插件集合，以充分发挥 Storybook 的作用。
-   - [@rsbuild/core](https://www.npmjs.com/package/@rsbuild/core)：Storybook 构建器。
-   - [storybook-addon-rslib](https://www.npmjs.com/package/storybook-addon-rslib)：此插件将使 Storybook Rsbuild 能够从 Rslib 配置文件中派生 Rsbuild 配置。
+  - [storybook](https://www.npmjs.com/package/storybook)：Storybook core 包。
+  - [@storybook/addon-essentials](https://www.npmjs.com/package/@storybook/addon-essentials)：精选的插件集合，以充分发挥 Storybook 的作用。
+  - [@rsbuild/core](https://www.npmjs.com/package/@rsbuild/core)：Storybook 构建器。
+  - [storybook-addon-rslib](https://www.npmjs.com/package/storybook-addon-rslib)：此插件将使 Storybook Rsbuild 能够从 Rslib 配置文件中继承 Rsbuild 配置。
      该插件将自动读取 Rslib 配置并将其应用于 Storybook Rsbuild，确保配置统一。你可以查看 [storybook-addon-rslib](https://storybook.rsbuild.dev/guide/integrations/rslib.html) 文档以了解可用选项。
 
-   <PackageManagerTabs
-     command={{
-       npm: 'npm add storybook @storybook/addon-essentials storybook-addon-rslib @rsbuild/core -D',
-       yarn: 'yarn add storybook @storybook/addon-essentials storybook-addon-rslib @rsbuild/core -D',
-       pnpm: 'pnpm add storybook @storybook/addon-essentials storybook-addon-rslib @rsbuild/core -D',
-       bun: 'bun add storybook @storybook/addon-essentials storybook-addon-rslib @rsbuild/core -D',
-     }}
-   />
-
-   每个框架的依赖项各不相同，请参阅 [Storybook Rsbuild 文档](https://storybook.rsbuild.dev/guide/framework.html) 以了解详细信息。在这个 React 示例中，我们将安装 [storybook-react-rsbuild](https://www.npmjs.com/package/storybook-react-rsbuild) 作为框架集成。
-
-   <Tabs>
-     <Tab label="React">
-       <PackageManagerTabs command="add storybook-react-rsbuild -D" />
-     </Tab>
-     <Tab label="Vue">
-       <PackageManagerTabs command="add storybook-vue3-rsbuild -D" />
-     </Tab>
-   </Tabs>
+  <PackageManagerTabs
+    command={{
+      npm: 'npm add storybook @storybook/addon-essentials storybook-addon-rslib @rsbuild/core -D',
+      yarn: 'yarn add storybook @storybook/addon-essentials storybook-addon-rslib @rsbuild/core -D',
+      pnpm: 'pnpm add storybook @storybook/addon-essentials storybook-addon-rslib @rsbuild/core -D',
+      bun: 'bun add storybook @storybook/addon-essentials storybook-addon-rslib @rsbuild/core -D',
+    }}
+  />
+
+   每个框架的依赖各不相同，可查阅 [Storybook Rsbuild 文档](https://storybook.rsbuild.dev/guide/framework.html) 了解详细信息。在这个 React 示例中，我们将安装 [storybook-react-rsbuild](https://www.npmjs.com/package/storybook-react-rsbuild) 作为框架集成。
+
+  <Tabs>
+    <Tab label="React">
+      <PackageManagerTabs command="add storybook-react-rsbuild -D" />
+    </Tab>
+    <Tab label="Vue">
+      <PackageManagerTabs command="add storybook-vue3-rsbuild -D" />
+    </Tab>
+  </Tabs>
 
 2. 配置 Storybook 配置文件 `.storybook/main.js`，指定 stories 和 addons，并使用相应的框架集成设置框架。
 
-```js title=".storybook/main.js"
-export default {
-  stories: [
-    '../stories/**/*.mdx',
-    '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
-  ],
-  addons: ['@storybook/addon-essentials', 'storybook-addon-rslib'],
-  framework: 'storybook-react-rsbuild', // 例如 storybook-react-rsbuild
-};
-```
+  ```js title=".storybook/main.js"
+  export default {
+    stories: [
+      '../stories/**/*.mdx',
+      '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+    ],
+    addons: ['@storybook/addon-essentials', 'storybook-addon-rslib'],
+    framework: 'storybook-react-rsbuild', // 例如 storybook-react-rsbuild
+  };
+  ```
 
 3. 向 `stories` 目录添加一个简单的 story。例如，创建一个 `Button.stories.js` 文件，内容如下：
 
-```js title="stories/Button.stories.js"
-import { Button } from '../src/Button';
+  ```js title="stories/Button.stories.js"
+  import { Button } from '../src/Button';
 
-const meta = {
-  title: 'Example/Button',
-  component: Button,
-};
+  const meta = {
+    title: 'Example/Button',
+    component: Button,
+  };
 
-export default meta;
+  export default meta;
 
-export const Primary = {
-  args: {
-    primary: true,
-    label: 'Button',
-  },
-};
-```
+  export const Primary = {
+    args: {
+      primary: true,
+      label: 'Button',
+    },
+  };
+  ```
 
 :::tip 
 如果你使用的是 Yarn Plug-n-Play 或者你的项目是在 monorepo 环境中设置的，你可能会遇到模块解析问题。在这种情况下，你可以添加一个 `getAbsolutePath('storybook-addon-rslib')` 函数来解析插件。有关更多信息，请查看 [Storybook 的 FAQ](https://storybook.js.org/docs/faq#how-do-i-fix-module-resolution-in-special-environments)。 
 :::
 
-There you go, you could start and build the Storybook server with the following command:
+大功告成，你可以使用以下命令启动和构建 Storybook 服务器：
 
 ```bash
-npx storybook dev   // development mode
-npx storybook build // build static files
+npx storybook dev   // 开发模式
+npx storybook build // 构建静态文件
 ```
 
-Check out more details in the [Storybook Rsbuild documentation](https://storybook.rsbuild.dev/) and the [Storybook documentation](https://storybook.js.org/docs/react/get-started/introduction).
-
-{/* TODO: */}
-{/* ## Module Federation */}
+查看 [Storybook Rsbuild 文档](https://storybook.rsbuild.dev/) 和 [Storybook 文档](https://storybook.js.org/docs/react/get-started/introduction) 以了解更多信息。
 
-## Example
+## 示例
 
 - [React 组件库 + Rslib + Storybook](https://github.com/rspack-contrib/storybook-rsbuild/tree/main/sandboxes/rslib-react-component)
