From c64772074fb70018f31680c01742e56572c06595 Mon Sep 17 00:00:00 2001 From: SoonIter Date: Fri, 13 Dec 2024 12:09:26 +0800 Subject: [PATCH 1/7] docs: storybook --- website/docs/en/guide/advanced/storybook.mdx | 2 +- website/docs/zh/guide/advanced/storybook.mdx | 105 +++++++++++++++++++ 2 files changed, 106 insertions(+), 1 deletion(-) diff --git a/website/docs/en/guide/advanced/storybook.mdx b/website/docs/en/guide/advanced/storybook.mdx index a01c58463..c0fc0b81d 100644 --- a/website/docs/en/guide/advanced/storybook.mdx +++ b/website/docs/en/guide/advanced/storybook.mdx @@ -64,7 +64,7 @@ Using React as an example, at this step you need to: }; ``` - 3. Add a simple story to the `stories` directory. For example, create a `Button.stories.js` file with the following content: +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'; diff --git a/website/docs/zh/guide/advanced/storybook.mdx b/website/docs/zh/guide/advanced/storybook.mdx index f4df7e238..0f05f8f06 100644 --- a/website/docs/zh/guide/advanced/storybook.mdx +++ b/website/docs/zh/guide/advanced/storybook.mdx @@ -1 +1,106 @@ +import { PackageManagerTabs } from '@theme'; +import { Tab, Tabs } from 'rspress/theme'; + # 使用 Storybook + +[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 使用统一的构建配置。 + +:::tip +你可以通过 [create-rslib](/guide/start/quick-start#creating-an-rslib-project) 创建一个新项目。 +::: + +## 快速开始 + +### 设置 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)。 + +以 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 配置。 + 该插件将自动读取 Rslib 配置并将其应用于 Storybook Rsbuild，确保配置统一。你可以查看 [storybook-addon-rslib](https://storybook.rsbuild.dev/guide/integrations/rslib.html) 文档以了解可用选项。 + + + + 每个框架的依赖项各不相同，请参阅 [Storybook Rsbuild 文档](https://storybook.rsbuild.dev/guide/framework.html) 以了解详细信息。在这个 React 示例中，我们将安装 [storybook-react-rsbuild](https://www.npmjs.com/package/storybook-react-rsbuild) 作为框架集成。 + + + + + + + + + + +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 +}; +``` + +3. 向 `stories` 目录添加一个简单的 story。例如，创建一个 `Button.stories.js` 文件，内容如下： + +```js title="stories/Button.stories.js" +import { Button } from '../src/Button'; + +const meta = { + title: 'Example/Button', + component: Button, +}; + +export default meta; + +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: + +```bash +npx storybook dev // development mode +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 组件库 + Rslib + Storybook](https://github.com/rspack-contrib/storybook-rsbuild/tree/main/sandboxes/rslib-react-component) \ No newline at end of file From cb95d52733f5becd97fa9a3e1409527f1bd05e06 Mon Sep 17 00:00:00 2001 From: SoonIter Date: Fri, 13 Dec 2024 12:21:29 +0800 Subject: [PATCH 2/7] docs: storybook --- website/docs/en/guide/advanced/storybook.mdx | 77 ++++++------ website/docs/zh/guide/advanced/storybook.mdx | 117 +++++++++---------- 2 files changed, 94 insertions(+), 100 deletions(-) diff --git a/website/docs/en/guide/advanced/storybook.mdx b/website/docs/en/guide/advanced/storybook.mdx index c0fc0b81d..d6aeeea83 100644 --- 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. - 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. - - - - - - - - + + + + + + + + 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 index 0f05f8f06..acf07f6aa 100644 --- a/website/docs/zh/guide/advanced/storybook.mdx +++ b/website/docs/zh/guide/advanced/storybook.mdx @@ -5,7 +5,7 @@ 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) 创建一个新项目。 @@ -13,94 +13,91 @@ import { Tab, Tabs } from 'rspress/theme'; ## 快速开始 -### 设置 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) 文档以了解可用选项。 - - - 每个框架的依赖项各不相同，请参阅 [Storybook Rsbuild 文档](https://storybook.rsbuild.dev/guide/framework.html) 以了解详细信息。在这个 React 示例中，我们将安装 [storybook-react-rsbuild](https://www.npmjs.com/package/storybook-react-rsbuild) 作为框架集成。 - - - - - - - - - + + + 每个框架的依赖各不相同，可查阅 [Storybook Rsbuild 文档](https://storybook.rsbuild.dev/guide/framework.html) 了解详细信息。在这个 React 示例中，我们将安装 [storybook-react-rsbuild](https://www.npmjs.com/package/storybook-react-rsbuild) 作为框架集成。 + + + + + + + + + 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) \ No newline at end of file From a419fcfab30f758526db407e4701bde376579228 Mon Sep 17 00:00:00 2001 From: SoonIter Date: Fri, 13 Dec 2024 12:24:54 +0800 Subject: [PATCH 3/7] docs: storybook --- website/docs/en/guide/advanced/storybook.mdx | 74 +++++++-------- website/docs/zh/guide/advanced/storybook.mdx | 95 ++++++++++---------- 2 files changed, 84 insertions(+), 85 deletions(-) diff --git a/website/docs/en/guide/advanced/storybook.mdx b/website/docs/en/guide/advanced/storybook.mdx index d6aeeea83..58e6dbe3b 100644 --- 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): 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. - 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. - - - - - - - - + + + + + + + + 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 diff --git a/website/docs/zh/guide/advanced/storybook.mdx b/website/docs/zh/guide/advanced/storybook.mdx index acf07f6aa..b0515f6eb 100644 --- a/website/docs/zh/guide/advanced/storybook.mdx +++ b/website/docs/zh/guide/advanced/storybook.mdx @@ -17,7 +17,6 @@ import { Tab, Tabs } from 'rspress/theme'; 这是设置 Storybook 的前提条件。你需要有一个包含组件的 Rslib 项目，并希望在 Storybook 中展示这些组件，请查看 [解决方案](/guide/solution/) 以设置 Rslib 项目。 - ### 将 Storybook 添加到项目中 使用现有的 Rslib 项目设置 Storybook。为了使用 React、Vue 3、原生 JavaScript 或其他框架，必须首先安装适当的 Storybook 框架包。有关安装说明，可以查阅 [Storybook Rsbuild 文档](https://storybook.rsbuild.dev/guide/framework.html)。 @@ -26,67 +25,67 @@ import { Tab, Tabs } from 'rspress/theme'; 1. 安装 Storybook Rsbuild React 框架的依赖。必要的依赖包括 - - [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 配置。 + - [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) 文档以了解可用选项。 - + 每个框架的依赖各不相同，可查阅 [Storybook Rsbuild 文档](https://storybook.rsbuild.dev/guide/framework.html) 了解详细信息。在这个 React 示例中，我们将安装 [storybook-react-rsbuild](https://www.npmjs.com/package/storybook-react-rsbuild) 作为框架集成。 - - - - - - - - + + + + + + + + 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)。 +:::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)。 ::: 大功告成，你可以使用以下命令启动和构建 Storybook 服务器： @@ -100,4 +99,4 @@ npx storybook build // 构建静态文件 ## 示例 -- [React 组件库 + Rslib + Storybook](https://github.com/rspack-contrib/storybook-rsbuild/tree/main/sandboxes/rslib-react-component) \ No newline at end of file +- [React 组件库 + Rslib + Storybook](https://github.com/rspack-contrib/storybook-rsbuild/tree/main/sandboxes/rslib-react-component) From 90fad2c2e299f65f944d61c0b18ae279e1e01894 Mon Sep 17 00:00:00 2001 From: Timeless0911 <50201324+Timeless0911@users.noreply.github.com> Date: Fri, 13 Dec 2024 13:16:58 +0800 Subject: [PATCH 4/7] Update website/docs/zh/guide/advanced/storybook.mdx --- website/docs/zh/guide/advanced/storybook.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/docs/zh/guide/advanced/storybook.mdx b/website/docs/zh/guide/advanced/storybook.mdx index b0515f6eb..0f4a0b3e8 100644 --- a/website/docs/zh/guide/advanced/storybook.mdx +++ b/website/docs/zh/guide/advanced/storybook.mdx @@ -3,7 +3,7 @@ import { Tab, Tabs } from 'rspress/theme'; # 使用 Storybook -[Storybook](https://storybook.js.org/) 是一个强大的为 React、Vue 等框架独立开发 UI 组件的工具，它能够独立构建和测试组件，从而提升开发和测试效率。 +[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 使用统一的构建配置。 From 44260925b28cc2bb7521f2bf35d688d85681f116 Mon Sep 17 00:00:00 2001 From: Timeless0911 <50201324+Timeless0911@users.noreply.github.com> Date: Fri, 13 Dec 2024 13:17:07 +0800 Subject: [PATCH 5/7] Update website/docs/zh/guide/advanced/storybook.mdx --- website/docs/zh/guide/advanced/storybook.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/docs/zh/guide/advanced/storybook.mdx b/website/docs/zh/guide/advanced/storybook.mdx index 0f4a0b3e8..a1885c67d 100644 --- a/website/docs/zh/guide/advanced/storybook.mdx +++ b/website/docs/zh/guide/advanced/storybook.mdx @@ -8,7 +8,7 @@ import { Tab, Tabs } from 'rspress/theme'; [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) 创建一个新项目。 +你可以通过 [create-rslib](/guide/start/quick-start#创建一个 Rslib 项目) 创建一个新项目。 ::: ## 快速开始 From 2247cbc893ef9bec6f51b1fe9b85e1823cafd436 Mon Sep 17 00:00:00 2001 From: Timeless0911 <50201324+Timeless0911@users.noreply.github.com> Date: Fri, 13 Dec 2024 13:17:14 +0800 Subject: [PATCH 6/7] Update website/docs/zh/guide/advanced/storybook.mdx --- website/docs/zh/guide/advanced/storybook.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/docs/zh/guide/advanced/storybook.mdx b/website/docs/zh/guide/advanced/storybook.mdx index a1885c67d..5f2a6a419 100644 --- a/website/docs/zh/guide/advanced/storybook.mdx +++ b/website/docs/zh/guide/advanced/storybook.mdx @@ -5,7 +5,7 @@ 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、Vue 3 框架和原生 JavaScript。统一使用 Rsbuild 构建系统可以使 Storybook 与 Rslib 使用统一的构建配置。 :::tip 你可以通过 [create-rslib](/guide/start/quick-start#创建一个 Rslib 项目) 创建一个新项目。 From 9ca2aaa96d1fb97df98e068a082a02020e134249 Mon Sep 17 00:00:00 2001 From: Timeless0911 <50201324+Timeless0911@users.noreply.github.com> Date: Fri, 13 Dec 2024 13:17:27 +0800 Subject: [PATCH 7/7] Update website/docs/zh/guide/advanced/storybook.mdx --- website/docs/zh/guide/advanced/storybook.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/docs/zh/guide/advanced/storybook.mdx b/website/docs/zh/guide/advanced/storybook.mdx index 5f2a6a419..421a44268 100644 --- a/website/docs/zh/guide/advanced/storybook.mdx +++ b/website/docs/zh/guide/advanced/storybook.mdx @@ -85,7 +85,7 @@ import { Tab, Tabs } from 'rspress/theme'; ``` :::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)。 +如果你使用的是 [Yarn Plug-n-Play](https://yarnpkg.com/features/pnp) 或者你的项目是在 monorepo 环境中设置的，你可能会遇到模块解析问题。在这种情况下，你可以添加一个 `getAbsolutePath('storybook-addon-rslib')` 函数来解析插件。有关更多信息，请查看 [Storybook 的 FAQ](https://storybook.js.org/docs/faq#how-do-i-fix-module-resolution-in-special-environments)。 ::: 大功告成，你可以使用以下命令启动和构建 Storybook 服务器：