Skip to content

Commit a419fcf

Browse files
SoonIterSoonIter
committed
docs: storybook
1 parent cb95d52 commit a419fcf

File tree

2 files changed

+84
-85
lines changed

2 files changed

+84
-85
lines changed

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

Lines changed: 37 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,11 @@ Using React as an example, at this step you need to:
2525

2626
1. Install the dependencies for Storybook Rsbuild React framework. The essential ones include
2727

28-
- [storybook](https://www.npmjs.com/package/storybook): The Storybook core.
29-
- [@storybook/addon-essentials](https://www.npmjs.com/package/@storybook/addon-essentials): a curated collection of addons to bring out the best of Storybook.
30-
- [@rsbuild/core](https://www.npmjs.com/package/@rsbuild/core): Storybook builder.
31-
- [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.
32-
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.
28+
- [storybook](https://www.npmjs.com/package/storybook): The Storybook core.
29+
- [@storybook/addon-essentials](https://www.npmjs.com/package/@storybook/addon-essentials): a curated collection of addons to bring out the best of Storybook.
30+
- [@rsbuild/core](https://www.npmjs.com/package/@rsbuild/core): Storybook builder.
31+
- [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.
32+
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.
3333

3434
<PackageManagerTabs
3535
command={{
@@ -40,48 +40,48 @@ Using React as an example, at this step you need to:
4040
}}
4141
/>
4242

43-
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.
43+
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.
4444

45-
<Tabs>
46-
<Tab label="React">
47-
<PackageManagerTabs command="add storybook-react-rsbuild -D" />
48-
</Tab>
49-
<Tab label="Vue">
50-
<PackageManagerTabs command="add storybook-vue3-rsbuild -D" />
51-
</Tab>
52-
</Tabs>
45+
<Tabs>
46+
<Tab label="React">
47+
<PackageManagerTabs command="add storybook-react-rsbuild -D" />
48+
</Tab>
49+
<Tab label="Vue">
50+
<PackageManagerTabs command="add storybook-vue3-rsbuild -D" />
51+
</Tab>
52+
</Tabs>
5353

5454
2. Configure the Storybook configuration file `.storybook/main.js`, specify the stories and addons, and set the framework with corresponding framework integration.
5555

56-
```js title=".storybook/main.js"
57-
export default {
58-
stories: [
59-
'../stories/**/*.mdx',
60-
'../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
61-
],
62-
addons: ['@storybook/addon-essentials', 'storybook-addon-rslib'],
63-
framework: 'storybook-react-rsbuild', // storybook-react-rsbuild for example
64-
};
65-
```
56+
```js title=".storybook/main.js"
57+
export default {
58+
stories: [
59+
'../stories/**/*.mdx',
60+
'../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
61+
],
62+
addons: ['@storybook/addon-essentials', 'storybook-addon-rslib'],
63+
framework: 'storybook-react-rsbuild', // storybook-react-rsbuild for example
64+
};
65+
```
6666

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

69-
```js title="stories/Button.stories.js"
70-
import { Button } from '../src/Button';
69+
```js title="stories/Button.stories.js"
70+
import { Button } from '../src/Button';
7171

72-
const meta = {
73-
title: 'Example/Button',
74-
component: Button,
75-
};
72+
const meta = {
73+
title: 'Example/Button',
74+
component: Button,
75+
};
7676

77-
export default meta;
77+
export default meta;
7878

79-
export const Primary = {
80-
args: {
81-
primary: true,
82-
label: 'Button',
83-
},
84-
};
79+
export const Primary = {
80+
args: {
81+
primary: true,
82+
label: 'Button',
83+
},
84+
};
8585
```
8686

8787
:::tip

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

Lines changed: 47 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ import { Tab, Tabs } from 'rspress/theme';
1717

1818
这是设置 Storybook 的前提条件。你需要有一个包含组件的 Rslib 项目，并希望在 Storybook 中展示这些组件，请查看 [解决方案](/guide/solution/) 以设置 Rslib 项目。
1919

20-
2120
### 将 Storybook 添加到项目中
2221

2322
使用现有的 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';
2625

2726
1. 安装 Storybook Rsbuild React 框架的依赖。必要的依赖包括
2827

29-
- [storybook](https://www.npmjs.com/package/storybook)：Storybook core 包。
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 配置。
28+
- [storybook](https://www.npmjs.com/package/storybook)：Storybook core 包。
29+
- [@storybook/addon-essentials](https://www.npmjs.com/package/@storybook/addon-essentials)：精选的插件集合，以充分发挥 Storybook 的作用。
30+
- [@rsbuild/core](https://www.npmjs.com/package/@rsbuild/core)：Storybook 构建器。
31+
- [storybook-addon-rslib](https://www.npmjs.com/package/storybook-addon-rslib)：此插件将使 Storybook Rsbuild 能够从 Rslib 配置文件中继承 Rsbuild 配置。
3332
该插件将自动读取 Rslib 配置并将其应用于 Storybook Rsbuild，确保配置统一。你可以查看 [storybook-addon-rslib](https://storybook.rsbuild.dev/guide/integrations/rslib.html) 文档以了解可用选项。
3433

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-
/>
34+
<PackageManagerTabs
35+
command={{
36+
npm: 'npm add storybook @storybook/addon-essentials storybook-addon-rslib @rsbuild/core -D',
37+
yarn: 'yarn add storybook @storybook/addon-essentials storybook-addon-rslib @rsbuild/core -D',
38+
pnpm: 'pnpm add storybook @storybook/addon-essentials storybook-addon-rslib @rsbuild/core -D',
39+
bun: 'bun add storybook @storybook/addon-essentials storybook-addon-rslib @rsbuild/core -D',
40+
}}
41+
/>
4342

4443
每个框架的依赖各不相同，可查阅 [Storybook Rsbuild 文档](https://storybook.rsbuild.dev/guide/framework.html) 了解详细信息。在这个 React 示例中，我们将安装 [storybook-react-rsbuild](https://www.npmjs.com/package/storybook-react-rsbuild) 作为框架集成。
4544

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>
45+
<Tabs>
46+
<Tab label="React">
47+
<PackageManagerTabs command="add storybook-react-rsbuild -D" />
48+
</Tab>
49+
<Tab label="Vue">
50+
<PackageManagerTabs command="add storybook-vue3-rsbuild -D" />
51+
</Tab>
52+
</Tabs>
5453

5554
2. 配置 Storybook 配置文件 `.storybook/main.js`，指定 stories 和 addons，并使用相应的框架集成设置框架。
5655

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-
```
56+
```js title=".storybook/main.js"
57+
export default {
58+
stories: [
59+
'../stories/**/*.mdx',
60+
'../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
61+
],
62+
addons: ['@storybook/addon-essentials', 'storybook-addon-rslib'],
63+
framework: 'storybook-react-rsbuild', // 例如 storybook-react-rsbuild
64+
};
65+
```
6766

6867
3. 向 `stories` 目录添加一个简单的 story。例如，创建一个 `Button.stories.js` 文件，内容如下：
6968

70-
```js title="stories/Button.stories.js"
71-
import { Button } from '../src/Button';
69+
```js title="stories/Button.stories.js"
70+
import { Button } from '../src/Button';
7271

73-
const meta = {
74-
title: 'Example/Button',
75-
component: Button,
76-
};
72+
const meta = {
73+
title: 'Example/Button',
74+
component: Button,
75+
};
7776

78-
export default meta;
77+
export default meta;
7978

80-
export const Primary = {
81-
args: {
82-
primary: true,
83-
label: 'Button',
84-
},
85-
};
86-
```
79+
export const Primary = {
80+
args: {
81+
primary: true,
82+
label: 'Button',
83+
},
84+
};
85+
```
8786

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)。
87+
:::tip
88+
如果你使用的是 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)。
9089
:::
9190

9291
大功告成，你可以使用以下命令启动和构建 Storybook 服务器：
@@ -100,4 +99,4 @@ npx storybook build // 构建静态文件
10099

101100
## 示例
102101

103-
- [React 组件库 + Rslib + Storybook](https://github.com/rspack-contrib/storybook-rsbuild/tree/main/sandboxes/rslib-react-component)
102+
- [React 组件库 + Rslib + Storybook](https://github.com/rspack-contrib/storybook-rsbuild/tree/main/sandboxes/rslib-react-component)

0 commit comments

Comments
 (0)