Skip to content

Commit

Permalink
chore(doc:storybook): improve documents (#4885)
Browse files Browse the repository at this point in the history
  • Loading branch information
JSerFeng authored Oct 31, 2023
1 parent a04983d commit f0a0e78
Show file tree
Hide file tree
Showing 2 changed files with 69 additions and 28 deletions.
53 changes: 37 additions & 16 deletions packages/document/builder-doc/docs/en/guide/advanced/storybook.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,11 @@ Before when using Storybook, there are various problems related to configuration

You can switch between Webpack and Rspack smoothly in Modern.js builder, for those who already use Modern.js builder or Modern.js framework, you can start using Storybook with the same configurations.

## Enable Storybook
## Quick Start

### Use in Modern.js projects
### Using in Modern.js projects

#### Haven't used legacy Storybook plugin(@modern-js/plugin-storybook)
#### Not using legacy Storybook plugin(@modern-js/plugin-storybook)

If your current project is already a Modern.js project and you haven't used any old version Storybook plugins, you can directly enable the Storybook feature by using the following command:

Expand All @@ -36,13 +36,15 @@ This command will create a template for Storybook, including:
If you are using an older version of the Storybook plugin, you can still run the command above to create templates and modify the package.json. You can also upgrade manually.
If you have made some custom configurations to Storybook in the older version, you need to move the configuration files from `root/config/storybook/` to the `root/.storybook/ directory`.
If you have made some custom configurations to Storybook in the older version, you need to move the configuration files from `root/config/storybook/` to the `root/.storybook/` directory.
Specify framework as `@modern-js/storybook` in `root/.storybook/main.(j|t)s`.
```diff
const config = {
+ framework: '@modern-js/storybook'
+ framework: {
+ name: '@modern-js/storybook'
+ }
};

export default config;
Expand All @@ -56,21 +58,27 @@ Finally, follow the official Storybook documentation to make the necessary updat
Modern.js Builder only support Storybook 7, so you need to upgrade from Storybook version 6 to version 7, please follow the steps outlined in the official Storybook documentation at [storybook migrate doc](https://storybook.js.org/docs/react/migration-guide).
To install @modern-js/storybook as the framework for Storybook, if you have interest in Rspack, install `@modern-js/builder-provider-rspack`, otherwise you should install `@modern-js/builder-provider-webpack`. Rspack is super fast compared to Webpack.
```diff filename='.storybook/main.js'
const config = {
- framework: '@storybook/react-webapck5',
+ framework: '@modern-js/storybook',
+ framework: {
+ name: '@modern-js/storybook'
+ },
};
export default config;
```
The default config file is `modern.config.(j|t)s`, for the detail config, see [builder config](https://modernjs.dev/builder/guide/basic/builder-config.html).
The default config file path is `modern.config.(j|t)s`, for the detail config, see [builder config](https://modernjs.dev/builder/guide/basic/builder-config.html).
If the original project includes configurations for Babel, they need to be written in the modern configuration. Most Babel configurations have already been included in Modern.js.
## Using Webpack or Rspack
Currently, Storybook supports building with either Webpack or Rspack as the underlying bundler. Depending on your needs, install @modern-js/builder-webpack-provider or @modern-js/builder-rspack-provider.
After installation, proceed with the corresponding [configuration](/guide/advanced/storybook#bundler).
## Enable Rspack build
Rspack is known for its fast build speed. To use Rspack as a build tool in Modern.js, you only need to configure it as follows:
Expand All @@ -83,10 +91,10 @@ const config = {
- bundler: 'webpack'
+ bundler: 'rspack'
},
typescript: {
- reactDocgen: 'react-docgen-typescript'
+ reactDocgen: 'react-docgen'
}
},
typescript: {
- reactDocgen: 'react-docgen-typescript'
+ reactDocgen: 'react-docgen'
}
};
Expand Down Expand Up @@ -123,7 +131,7 @@ const config = {
export default config;
```
#### bundler
### bundler
- **Type**: `'webpack' | 'rspack'`
- **Default**: `webpack`
Expand All @@ -145,7 +153,7 @@ const config = {
export default config;
```
#### builderConfig
### builderConfig
- **Type**: `BuilderConfig`
- **Default**: `undefined`
Expand All @@ -172,7 +180,20 @@ const config = {
export default config;
```
#### ConfigFile
## Command Line Interface
@modern-js/storybook proxies some of the storybook cli commands.
### storybook dev
Start Storybook, more details at https://storybook.js.org/docs/react/api/cli-options#dev.
### storybook build
Build Storybook for production, more details at https://storybook.js.org/docs/react/api/cli-options#build.
## ConfigFile
The configuration file includes an additional field: `builderPlugins`, in addition to the Modern.js builder configuration. This field is used to enable builder plugins, such as enabling SWC compilation.
Expand Down
44 changes: 32 additions & 12 deletions packages/document/builder-doc/docs/zh/guide/advanced/storybook.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@

使用 Modern.js builder 还可以一键在 Webpack 和 Rspack 之间进行切换。对于使用 Modern.js builder 开发应用的用户,也可以很方便的直接使用现有的 Modern.js 配置用 Storybook 进行组件的测试。

## 开启 Storybook
## 快速开始

### 在 Modern.js 项目中使用

Expand Down Expand Up @@ -42,7 +42,9 @@ $ npx modern new

```diff
const config = {
+ framework: '@modern-js/storybook'
+ framework: {
+ name: '@modern-js/storybook'
+ },
};

export default config;
Expand All @@ -56,12 +58,12 @@ export default config;

若当前 Storybook 版本还是 6,需要先按照 Storybook 官网文档升级到版本 7 ,参考[storybook 迁移文档](https://storybook.js.org/docs/react/migration-guide)

安装 @modern-js/storybook,作为 storybook 的 framework。若想要使用 Rspack 作为构建工具,安装 @modern-js/builder-provider-rspack,若要使用 Webpack 作为构建工具,则安装 @modern-js/builder-provider-webpack

```diff filename='.storybook/main.js'
const config = {
- framework: '@storybook/react-webapck5',
+ framework: '@modern-js/storybook',
+ framework: {
+ name: '@modern-js/storybook'
+ },
};

export default config;
Expand All @@ -71,6 +73,12 @@ Modern.js 的配置文件默认为 `modern.config.(j|t)s`,配置请查看 [bui

若原来项目中包含了 Babel 等配置,需要对应的写在 modern 配置中,大部分 Babel 配置已经包含进了 Modern.js。

## 使用 Webpack 或 Rspack

当前 Storybook 支持底层使用 Webpack 或是 Rspack 进行构建,根据你的需求安装 @modern-js/builder-webpack-provider@modern-js/builder-rspack-provider

安装完成后进行相应的[配置](/guide/advanced/storybook#bundler)

## 开启 Rspack 构建

Rspack 构建速度非常快,在 Modern.js 中只需要如下配置即可使用 Rspack 作为构建工具。
Expand All @@ -83,10 +91,10 @@ const config = {
- bundler: 'webpack'
+ bundler: 'rspack'
},
typescript: {
- reactDocgen: 'react-docgen-typescript'
+ reactDocgen: 'react-docgen'
}
},
typescript: {
- reactDocgen: 'react-docgen-typescript'
+ reactDocgen: 'react-docgen'
}
};

Expand Down Expand Up @@ -121,7 +129,7 @@ const config = {
export default config;
```

#### bundler
### bundler

- **类型**: `'webpack' | 'rspack'`
- **默认值**: `webpack`
Expand All @@ -142,7 +150,7 @@ const config = {
export default config;
```

#### builderConfig
### builderConfig

- **类型**: `BuilderConfig`
- **默认值**: `undefined`
Expand All @@ -168,7 +176,19 @@ const config = {
export default config;
```

#### 配置文件
## 命令行

@modern-js/storybook 代理了部分 storybook cli 的命令。

### storybook dev

启动 Storybook,详情请看 https://storybook.js.org/docs/react/api/cli-options#dev。

### storybook build

对 Storybook 进行生产环境构建,详情请看 https://storybook.js.org/docs/react/api/cli-options#build。

## 配置文件

配置文件中除了 Modern.js builder 配置还包含一个额外的字段,builderPlugins,方便使用 builder 插件,例如启用 SWC 编译。

Expand Down

0 comments on commit f0a0e78

Please sign in to comment.