@modern-js/main-doc 2.37.2 → 2.39.0
Sign up to get free protection for your applications and to get access to all the features.
- package/docs/en/guides/advanced-features/using-storybook.mdx +5 -1
- package/docs/en/tutorials/first-app/c01-start.mdx +1 -1
- package/docs/en/tutorials/first-app/c03-css.mdx +1 -1
- package/docs/en/tutorials/first-app/c04-routes.mdx +1 -1
- package/docs/en/tutorials/first-app/c05-loader.mdx +1 -1
- package/docs/en/tutorials/first-app/c06-model.mdx +1 -1
- package/docs/en/tutorials/first-app/c07-container.mdx +1 -1
- package/docs/zh/guides/advanced-features/using-storybook.mdx +6 -1
- package/docs/zh/tutorials/first-app/c01-start.mdx +1 -1
- package/docs/zh/tutorials/first-app/c03-css.mdx +1 -1
- package/docs/zh/tutorials/first-app/c04-routes.mdx +1 -1
- package/docs/zh/tutorials/first-app/c05-loader.mdx +1 -1
- package/docs/zh/tutorials/first-app/c06-model.mdx +1 -1
- package/docs/zh/tutorials/first-app/c07-container.mdx +1 -1
- package/package.json +7 -7
@@ -2,7 +2,11 @@
|
|
2
2
|
sidebar_position: 12
|
3
3
|
---
|
4
4
|
|
5
|
-
# Using
|
5
|
+
# Using StorybookV6
|
6
|
+
|
7
|
+
:::warning
|
8
|
+
This document is for users of the old version Storybook V6 and will be deprecated in the future. If you want to upgrade from an older version or if you are a new user who wants to try new storybook, please refer to the [new documentation here](https://modernjs.dev/builder/guide/advanced/storybook.html).
|
9
|
+
:::
|
6
10
|
|
7
11
|
[Storybook](https://storybook.js.org/) is a tool dedicated to component debugging, providing around component development.
|
8
12
|
|
@@ -38,7 +38,7 @@ We delete the original sample code and replace it with a simple point of contact
|
|
38
38
|
const getAvatar = (users: Array<{ name: string; email: string }>) =>
|
39
39
|
users.map(user => ({
|
40
40
|
...user,
|
41
|
-
avatar: `https://
|
41
|
+
avatar: `https://api.dicebear.com/7.x/pixel-art/svg?seed=${user.name}`,
|
42
42
|
}));
|
43
43
|
|
44
44
|
const mockData = getAvatar([
|
@@ -178,7 +178,7 @@ import Item from '../components/Item';
|
|
178
178
|
const getAvatar = (users: Array<{ name: string, email: string }>) =>
|
179
179
|
users.map(user => ({
|
180
180
|
...user,
|
181
|
-
avatar: `https://
|
181
|
+
avatar: `https://api.dicebear.com/7.x/pixel-art/svg?seed=${user.name}`,
|
182
182
|
}));
|
183
183
|
|
184
184
|
const mockData = getAvatar([
|
@@ -42,7 +42,7 @@ import Item from '../../components/Item';
|
|
42
42
|
const getAvatar = (users: Array<{ name: string; email: string }>) =>
|
43
43
|
users.map(user => ({
|
44
44
|
...user,
|
45
|
-
avatar: `https://
|
45
|
+
avatar: `https://api.dicebear.com/7.x/pixel-art/svg?seed=${user.name}`,
|
46
46
|
}));
|
47
47
|
|
48
48
|
const getMockArchivedData = () =>
|
@@ -37,7 +37,7 @@ export const loader = async (): Promise<LoaderData> => {
|
|
37
37
|
const firstName = name.firstName();
|
38
38
|
return {
|
39
39
|
name: firstName,
|
40
|
-
avatar: `https://
|
40
|
+
avatar: `https://api.dicebear.com/7.x/pixel-art/svg?seed=${firstName}`,
|
41
41
|
email: internet.email(),
|
42
42
|
};
|
43
43
|
});
|
@@ -212,7 +212,7 @@ export const loader = async (): Promise<LoaderData> => {
|
|
212
212
|
const firstName = name.firstName();
|
213
213
|
return {
|
214
214
|
name: firstName,
|
215
|
-
avatar: `https://
|
215
|
+
avatar: `https://api.dicebear.com/7.x/pixel-art/svg?seed=${firstName}`,
|
216
216
|
email: internet.email(),
|
217
217
|
archived: false,
|
218
218
|
};
|
@@ -30,7 +30,7 @@ export const loader = async (): Promise<LoaderData> => {
|
|
30
30
|
const firstName = name.firstName();
|
31
31
|
return {
|
32
32
|
name: firstName,
|
33
|
-
avatar: `https://
|
33
|
+
avatar: `https://api.dicebear.com/7.x/pixel-art/svg?seed=${firstName}`,
|
34
34
|
email: internet.email(),
|
35
35
|
};
|
36
36
|
});
|
@@ -2,7 +2,12 @@
|
|
2
2
|
sidebar_position: 12
|
3
3
|
---
|
4
4
|
|
5
|
-
# 使用
|
5
|
+
# 使用 StorybookV6
|
6
|
+
|
7
|
+
:::warning
|
8
|
+
该教程是用于老版本 StorybookV6 用户,并且会在以后弃用,想要从旧版本插件升级或新用户想要尝试请查看[新文档](https://modernjs.dev/builder/guide/advanced/storybook.html)
|
9
|
+
:::
|
10
|
+
|
6
11
|
|
7
12
|
[Storybook](https://storybook.js.org/) 是一个专门用于组件调试的工具,它围绕着组件开发提供了:
|
8
13
|
|
@@ -38,7 +38,7 @@ import DebugApp from "@site-docs/components/debug-app"
|
|
38
38
|
const getAvatar = (users: Array<{ name: string; email: string }>) =>
|
39
39
|
users.map(user => ({
|
40
40
|
...user,
|
41
|
-
avatar: `https://
|
41
|
+
avatar: `https://api.dicebear.com/7.x/pixel-art/svg?seed=${user.name}`,
|
42
42
|
}));
|
43
43
|
|
44
44
|
const mockData = getAvatar([
|
@@ -177,7 +177,7 @@ import Item from '../components/Item';
|
|
177
177
|
const getAvatar = (users: Array<{ name: string, email: string }>) =>
|
178
178
|
users.map(user => ({
|
179
179
|
...user,
|
180
|
-
avatar: `https://
|
180
|
+
avatar: `https://api.dicebear.com/7.x/pixel-art/svg?seed=${user.name}`,
|
181
181
|
}));
|
182
182
|
|
183
183
|
const mockData = getAvatar([
|
@@ -42,7 +42,7 @@ import Item from '../../components/Item';
|
|
42
42
|
const getAvatar = (users: Array<{ name: string; email: string }>) =>
|
43
43
|
users.map(user => ({
|
44
44
|
...user,
|
45
|
-
avatar: `https://
|
45
|
+
avatar: `https://api.dicebear.com/7.x/pixel-art/svg?seed=${user.name}`,
|
46
46
|
}));
|
47
47
|
|
48
48
|
const getMockArchivedData = () =>
|
@@ -37,7 +37,7 @@ export const loader = async (): Promise<LoaderData> => {
|
|
37
37
|
const firstName = name.firstName();
|
38
38
|
return {
|
39
39
|
name: firstName,
|
40
|
-
avatar: `https://
|
40
|
+
avatar: `https://api.dicebear.com/7.x/pixel-art/svg?seed=${firstName}`,
|
41
41
|
email: internet.email(),
|
42
42
|
};
|
43
43
|
});
|
@@ -209,7 +209,7 @@ export const loader async (): Promise<LoaderData> => {
|
|
209
209
|
const firstName = name.firstName();
|
210
210
|
return {
|
211
211
|
name: firstName,
|
212
|
-
avatar: `https://
|
212
|
+
avatar: `https://api.dicebear.com/7.x/pixel-art/svg?seed=${firstName}`,
|
213
213
|
email: internet.email(),
|
214
214
|
archived: false,
|
215
215
|
};
|
@@ -30,7 +30,7 @@ export const loader = async (): Promise<LoaderData> => {
|
|
30
30
|
const firstName = name.firstName();
|
31
31
|
return {
|
32
32
|
name: firstName,
|
33
|
-
avatar: `https://
|
33
|
+
avatar: `https://api.dicebear.com/7.x/pixel-art/svg?seed=${firstName}`,
|
34
34
|
email: internet.email(),
|
35
35
|
};
|
36
36
|
});
|
package/package.json
CHANGED
@@ -15,17 +15,17 @@
|
|
15
15
|
"modern",
|
16
16
|
"modern.js"
|
17
17
|
],
|
18
|
-
"version": "2.
|
18
|
+
"version": "2.39.0",
|
19
19
|
"publishConfig": {
|
20
20
|
"registry": "https://registry.npmjs.org/",
|
21
21
|
"access": "public",
|
22
22
|
"provenance": true
|
23
23
|
},
|
24
24
|
"dependencies": {
|
25
|
-
"@modern-js/sandpack-react": "2.
|
25
|
+
"@modern-js/sandpack-react": "2.39.0"
|
26
26
|
},
|
27
27
|
"peerDependencies": {
|
28
|
-
"@modern-js/builder-doc": "^2.
|
28
|
+
"@modern-js/builder-doc": "^2.39.0"
|
29
29
|
},
|
30
30
|
"devDependencies": {
|
31
31
|
"classnames": "^2",
|
@@ -35,12 +35,12 @@
|
|
35
35
|
"ts-node": "^10.9.1",
|
36
36
|
"typescript": "^5",
|
37
37
|
"fs-extra": "^10",
|
38
|
-
"rspress": "1.
|
39
|
-
"@rspress/shared": "1.
|
38
|
+
"rspress": "1.2.1",
|
39
|
+
"@rspress/shared": "1.2.1",
|
40
40
|
"@types/node": "^16",
|
41
41
|
"@types/fs-extra": "^9",
|
42
|
-
"@modern-js/
|
43
|
-
"@modern-js/doc
|
42
|
+
"@modern-js/doc-plugin-auto-sidebar": "2.39.0",
|
43
|
+
"@modern-js/builder-doc": "2.39.0"
|
44
44
|
},
|
45
45
|
"scripts": {
|
46
46
|
"dev": "rspress dev",
|