@storybook/addon-docs 7.0.0-beta.10 → 7.0.0-beta.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +19 -16
- package/package.json +11 -11
package/README.md
CHANGED
|
@@ -4,13 +4,13 @@
|
|
|
4
4
|
|
|
5
5
|
# Storybook Docs
|
|
6
6
|
|
|
7
|
-
> migration guide: This page documents the method to configure
|
|
7
|
+
> migration guide: This page documents the method to configure Storybook introduced recently in 7.0.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring Storybook.
|
|
8
8
|
|
|
9
9
|
Storybook Docs transforms your Storybook stories into world-class component documentation.
|
|
10
10
|
|
|
11
11
|
**DocsPage.** Out of the box, all your stories get a `DocsPage`. `DocsPage` is a zero-config aggregation of your component stories, text descriptions, docgen comments, props tables, and code examples into clean, readable pages.
|
|
12
12
|
|
|
13
|
-
**MDX.** If you want more control, `MDX` allows you to write long-form markdown documentation and stories in one file. You can also use it to write pure documentation pages and embed them inside your Storybook alongside your stories.
|
|
13
|
+
**MDX.** If you want more control, `MDX` allows you to write long-form markdown documentation and include stories in one file. You can also use it to write pure documentation pages and embed them inside your Storybook alongside your stories.
|
|
14
14
|
|
|
15
15
|
Just like Storybook, Docs supports every major view layer including React, Vue, Angular, HTML, Web components, Svelte, and many more.
|
|
16
16
|
|
|
@@ -40,32 +40,30 @@ For more information on how it works, see the [`DocsPage` reference](https://git
|
|
|
40
40
|
|
|
41
41
|
## MDX
|
|
42
42
|
|
|
43
|
-
`MDX` is a syntax for writing long-form documentation
|
|
43
|
+
`MDX` is a syntax for writing long-form documentation with stories side-by-side in the same file. In contrast to `DocsPage`, which provides smart documentation out of the box, `MDX` gives you full control over your component documentation.
|
|
44
44
|
|
|
45
45
|
Here's an example file:
|
|
46
46
|
|
|
47
|
+
<!-- prettier-ignore-start -->
|
|
48
|
+
|
|
47
49
|
```md
|
|
48
|
-
import { Meta, Story, Canvas } from '@storybook/
|
|
49
|
-
import
|
|
50
|
+
import { Meta, Story, Canvas } from '@storybook/blocks';
|
|
51
|
+
import * as CheckboxStories from './Checkbox.stories';
|
|
50
52
|
|
|
51
|
-
<Meta title="MDX/Checkbox"
|
|
53
|
+
<Meta title="MDX/Checkbox" of={CheckboxStories} />
|
|
52
54
|
|
|
53
55
|
# Checkbox
|
|
54
56
|
|
|
55
|
-
With `MDX` we can
|
|
57
|
+
With `MDX` we can include a story for `Checkbox` right in the middle of our
|
|
56
58
|
markdown documentation.
|
|
57
59
|
|
|
58
60
|
<Canvas>
|
|
59
|
-
<Story
|
|
60
|
-
<form>
|
|
61
|
-
<Checkbox id="Unchecked" label="Unchecked" />
|
|
62
|
-
<Checkbox id="Checked" label="Checked" checked />
|
|
63
|
-
<Checkbox appearance="secondary" id="second" label="Secondary" checked />
|
|
64
|
-
</form>
|
|
65
|
-
</Story>
|
|
61
|
+
<Story of={CheckboxStories.Unchecked} />
|
|
66
62
|
</Canvas>
|
|
67
63
|
```
|
|
68
64
|
|
|
65
|
+
<!-- prettier-ignore-end -->
|
|
66
|
+
|
|
69
67
|
And here's how that's rendered in Storybook:
|
|
70
68
|
|
|
71
69
|
<center>
|
|
@@ -102,8 +100,13 @@ Then add the following to your `.storybook/main.js`:
|
|
|
102
100
|
|
|
103
101
|
```js
|
|
104
102
|
module.exports = {
|
|
105
|
-
stories: [
|
|
106
|
-
|
|
103
|
+
stories: [
|
|
104
|
+
'../src/**/*.mdx)', // 👈 Add this, to match your project's structure
|
|
105
|
+
'../src/**/*.stories.@(js|jsx|ts|tsx)',
|
|
106
|
+
],
|
|
107
|
+
addons: [
|
|
108
|
+
'@storybook/addon-docs', // 👈 Also add this
|
|
109
|
+
],
|
|
107
110
|
};
|
|
108
111
|
```
|
|
109
112
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@storybook/addon-docs",
|
|
3
|
-
"version": "7.0.0-beta.
|
|
3
|
+
"version": "7.0.0-beta.11",
|
|
4
4
|
"description": "Document component usage and properties in Markdown",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"addon",
|
|
@@ -104,16 +104,16 @@
|
|
|
104
104
|
"@babel/plugin-transform-react-jsx": "^7.19.0",
|
|
105
105
|
"@jest/transform": "^29.3.1",
|
|
106
106
|
"@mdx-js/react": "^2.1.5",
|
|
107
|
-
"@storybook/blocks": "7.0.0-beta.
|
|
108
|
-
"@storybook/components": "7.0.0-beta.
|
|
109
|
-
"@storybook/csf-plugin": "7.0.0-beta.
|
|
110
|
-
"@storybook/csf-tools": "7.0.0-beta.
|
|
107
|
+
"@storybook/blocks": "7.0.0-beta.11",
|
|
108
|
+
"@storybook/components": "7.0.0-beta.11",
|
|
109
|
+
"@storybook/csf-plugin": "7.0.0-beta.11",
|
|
110
|
+
"@storybook/csf-tools": "7.0.0-beta.11",
|
|
111
111
|
"@storybook/mdx2-csf": "next",
|
|
112
|
-
"@storybook/node-logger": "7.0.0-beta.
|
|
113
|
-
"@storybook/postinstall": "7.0.0-beta.
|
|
114
|
-
"@storybook/preview-api": "7.0.0-beta.
|
|
115
|
-
"@storybook/theming": "7.0.0-beta.
|
|
116
|
-
"@storybook/types": "7.0.0-beta.
|
|
112
|
+
"@storybook/node-logger": "7.0.0-beta.11",
|
|
113
|
+
"@storybook/postinstall": "7.0.0-beta.11",
|
|
114
|
+
"@storybook/preview-api": "7.0.0-beta.11",
|
|
115
|
+
"@storybook/theming": "7.0.0-beta.11",
|
|
116
|
+
"@storybook/types": "7.0.0-beta.11",
|
|
117
117
|
"fs-extra": "^9.0.1",
|
|
118
118
|
"global": "^4.4.0",
|
|
119
119
|
"remark-external-links": "^8.0.0",
|
|
@@ -141,7 +141,7 @@
|
|
|
141
141
|
"./src/shims/mdx-react-shim.ts"
|
|
142
142
|
]
|
|
143
143
|
},
|
|
144
|
-
"gitHead": "
|
|
144
|
+
"gitHead": "f488007ad9e0ff9c4ade4837f584db87fa0d46eb",
|
|
145
145
|
"storybook": {
|
|
146
146
|
"displayName": "Docs",
|
|
147
147
|
"icon": "https://user-images.githubusercontent.com/263385/101991672-48355c80-3c7c-11eb-82d9-95fa12438f64.png",
|