Skip to content

Commit c647720

Browse files
SoonIterSoonIter
committed
docs: storybook
1 parent aa4c5f3 commit c647720

File tree

2 files changed

+106
-1
lines changed

2 files changed

+106
-1
lines changed

‎website/docs/en/guide/advanced/storybook.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ Using React as an example, at this step you need to:
6464
};
6565
```
6666

67-
3. Add a simple story to the `stories` directory. For example, create a `Button.stories.js` file with the following content:
67+
3. Add a simple story to the `stories` directory. For example, create a `Button.stories.js` file with the following content:
6868

6969
```js title="stories/Button.stories.js"
7070
import { Button } from '../src/Button';

‎website/docs/zh/guide/advanced/storybook.mdx

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,106 @@
1+
import { PackageManagerTabs } from '@theme';
2+
import { Tab, Tabs } from 'rspress/theme';
3+
14
# 使用 Storybook
5+
6+
[Storybook](https://storybook.js.org/) 是一个强大的为 React、Vue 等框架独立开发 UI 组件的工具，它能够独立构建和测试组件，从而提升开发和测试效率。
7+
8+
[storybook-rsbuild](https://github.com/rspack-contrib/storybook-rsbuild) 是 Rsbuild 支持的 Storybook 构建器，并集成了 React、Vue3 框架和原生 JavaScript。统一使用 Rsbuild 构建系统可以使Storybook 与 Rslib 使用统一的构建配置。
9+
10+
:::tip
11+
你可以通过 [create-rslib](/guide/start/quick-start#creating-an-rslib-project) 创建一个新项目。
12+
:::
13+
14+
## 快速开始
15+
16+
### 设置 Rslib 项目
17+
18+
这是设置 Storybook 的前提条件。你需要有一个包含组件的 Rslib 项目，你希望在 Storybook 中展示这些组件，请查看 [解决方案](/guide/solution/) 以设置 Rslib 项目。
19+
20+
21+
### 将 Storybook 添加到项目中
22+
23+
S使用现有的 Rslib 项目设置 Storybook 项目。要使用 React、Vue 3、原生 JavaScript 或其他框架，必须首先安装适当的 Storybook 框架包。有关安装说明，请参阅 [Storybook Rsbuild 文档](https://storybook.rsbuild.dev/guide/framework.html)。
24+
25+
以 React 为例，在这一步你需要：
26+
27+
1. 安装 Storybook Rsbuild React 框架的依赖项。必要的依赖项包括
28+
29+
- [storybook](https://www.npmjs.com/package/@storybook/addon-essentials)：Storybook 核心。
30+
- [@storybook/addon-essentials](https://www.npmjs.com/package/@storybook/addon-essentials)：精选的插件集合，以充分发挥 Storybook 的作用。
31+
- [@rsbuild/core](https://www.npmjs.com/package/@rsbuild/core)：Storybook 构建器。
32+
- [storybook-addon-rslib](https://www.npmjs.com/package/storybook-addon-rslib)：此插件将使 Storybook Rsbuild 能够从 Rslib 配置文件中派生 Rsbuild 配置。
33+
该插件将自动读取 Rslib 配置并将其应用于 Storybook Rsbuild，确保配置统一。你可以查看 [storybook-addon-rslib](https://storybook.rsbuild.dev/guide/integrations/rslib.html) 文档以了解可用选项。
34+
35+
<PackageManagerTabs
36+
command={{
37+
npm: 'npm add storybook @storybook/addon-essentials storybook-addon-rslib @rsbuild/core -D',
38+
yarn: 'yarn add storybook @storybook/addon-essentials storybook-addon-rslib @rsbuild/core -D',
39+
pnpm: 'pnpm add storybook @storybook/addon-essentials storybook-addon-rslib @rsbuild/core -D',
40+
bun: 'bun add storybook @storybook/addon-essentials storybook-addon-rslib @rsbuild/core -D',
41+
}}
42+
/>
43+
44+
每个框架的依赖项各不相同，请参阅 [Storybook Rsbuild 文档](https://storybook.rsbuild.dev/guide/framework.html) 以了解详细信息。在这个 React 示例中，我们将安装 [storybook-react-rsbuild](https://www.npmjs.com/package/storybook-react-rsbuild) 作为框架集成。
45+
46+
<Tabs>
47+
<Tab label="React">
48+
<PackageManagerTabs command="add storybook-react-rsbuild -D" />
49+
</Tab>
50+
<Tab label="Vue">
51+
<PackageManagerTabs command="add storybook-vue3-rsbuild -D" />
52+
</Tab>
53+
</Tabs>
54+
55+
2. 配置 Storybook 配置文件 `.storybook/main.js`，指定 stories 和 addons，并使用相应的框架集成设置框架。
56+
57+
```js title=".storybook/main.js"
58+
export default {
59+
stories: [
60+
'../stories/**/*.mdx',
61+
'../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
62+
],
63+
addons: ['@storybook/addon-essentials', 'storybook-addon-rslib'],
64+
framework: 'storybook-react-rsbuild', // 例如 storybook-react-rsbuild
65+
};
66+
```
67+
68+
3. 向 `stories` 目录添加一个简单的 story。例如，创建一个 `Button.stories.js` 文件，内容如下：
69+
70+
```js title="stories/Button.stories.js"
71+
import { Button } from '../src/Button';
72+
73+
const meta = {
74+
title: 'Example/Button',
75+
component: Button,
76+
};
77+
78+
export default meta;
79+
80+
export const Primary = {
81+
args: {
82+
primary: true,
83+
label: 'Button',
84+
},
85+
};
86+
```
87+
88+
:::tip
89+
如果你使用的是 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)。
90+
:::
91+
92+
There you go, you could start and build the Storybook server with the following command:
93+
94+
```bash
95+
npx storybook dev // development mode
96+
npx storybook build // build static files
97+
```
98+
99+
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).
100+
101+
{/* TODO: */}
102+
{/* ## Module Federation */}
103+
104+
## Example
105+
106+
- [React 组件库 + Rslib + Storybook](https://github.com/rspack-contrib/storybook-rsbuild/tree/main/sandboxes/rslib-react-component)

0 commit comments

Comments
 (0)