@storybook/addon-docs 5.3.18 → 5.3.19
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 +9 -9
- package/angular/README.md +43 -0
- package/jest-transform-mdx.js +2 -2
- package/package.json +9 -9
package/README.md
CHANGED
|
@@ -92,7 +92,15 @@ Storybook Docs supports all view layers that Storybook supports except for React
|
|
|
92
92
|
|
|
93
93
|
Want to add enhanced features to your favorite framework? Check out this [dev guide](./docs/multiframework.md)
|
|
94
94
|
|
|
95
|
-
##
|
|
95
|
+
## Framework specific installation needs
|
|
96
|
+
|
|
97
|
+
- [React](./react) (covered below)
|
|
98
|
+
- [Vue](./vue)
|
|
99
|
+
- [Angular](./angular)
|
|
100
|
+
- [Ember](./ember)
|
|
101
|
+
- [Web Components](./web-components)
|
|
102
|
+
|
|
103
|
+
## Installation in React
|
|
96
104
|
|
|
97
105
|
First add the package. Make sure that the versions for your `@storybook/*` packages match:
|
|
98
106
|
|
|
@@ -129,14 +137,6 @@ Add the following to your Jest configuration:
|
|
|
129
137
|
}
|
|
130
138
|
```
|
|
131
139
|
|
|
132
|
-
### Be sure to check framework specific installation needs
|
|
133
|
-
|
|
134
|
-
- [React](./react) (covered here)
|
|
135
|
-
- [Vue](./vue)
|
|
136
|
-
- [Angular](./angular)
|
|
137
|
-
- [Ember](./ember)
|
|
138
|
-
- [Web Components](./web-components)
|
|
139
|
-
|
|
140
140
|
## Preset options
|
|
141
141
|
|
|
142
142
|
The `addon-docs` preset has a few configuration options that can be used to configure its babel/webpack loading behavior. Here's an example of how to use the preset with options:
|
package/angular/README.md
CHANGED
|
@@ -131,6 +131,49 @@ Yes, it's redundant to declare `component` twice. [Coming soon](https://github.c
|
|
|
131
131
|
|
|
132
132
|
Also, to use the `Props` doc block, you need to set up Compodoc, [as described above](#docspage).
|
|
133
133
|
|
|
134
|
+
When you are using `template`, `moduleMetadata` and/or `addDecorators` with `storiesOf` then you can easily translate your story to MDX, too:
|
|
135
|
+
|
|
136
|
+
```md
|
|
137
|
+
import { Meta, Story, Props } from '@storybook/addon-docs/blocks';
|
|
138
|
+
import { CheckboxComponent, RadioButtonComponent } from './my-components';
|
|
139
|
+
import { moduleMetadata } from '@storybook/angular';
|
|
140
|
+
|
|
141
|
+
<Meta title='Checkbox' decorators={[
|
|
142
|
+
moduleMetadata({
|
|
143
|
+
declarations: [CheckboxComponent]
|
|
144
|
+
})
|
|
145
|
+
]} />
|
|
146
|
+
|
|
147
|
+
# Basic Checkbox
|
|
148
|
+
|
|
149
|
+
<Story name='basic check' height='400px'>{{
|
|
150
|
+
template: `
|
|
151
|
+
<div class="some-wrapper-with-padding">
|
|
152
|
+
<my-checkbox [checked]="checked">Some Checkbox</my-checkbox>
|
|
153
|
+
</div>
|
|
154
|
+
`,
|
|
155
|
+
props: {
|
|
156
|
+
checked: true
|
|
157
|
+
}
|
|
158
|
+
}}</Story>
|
|
159
|
+
|
|
160
|
+
# Basic Radiobutton
|
|
161
|
+
|
|
162
|
+
<Story name='basic radio' height='400px'>{{
|
|
163
|
+
moduleMetadata: {
|
|
164
|
+
declarations: [RadioButtonComponent]
|
|
165
|
+
}
|
|
166
|
+
template: `
|
|
167
|
+
<div class="some-wrapper-with-padding">
|
|
168
|
+
<my-radio-btn [checked]="checked">Some Checkbox</my-radio-btn>
|
|
169
|
+
</div>
|
|
170
|
+
`,
|
|
171
|
+
props: {
|
|
172
|
+
checked: true
|
|
173
|
+
}
|
|
174
|
+
}}</Story>
|
|
175
|
+
```
|
|
176
|
+
|
|
134
177
|
## IFrame height
|
|
135
178
|
|
|
136
179
|
Storybook Docs renders all Angular stories inside IFrames, with a default height of `60px`. You can update this default globally, or modify the IFrame height locally per story in `DocsPage` and `MDX`.
|
package/jest-transform-mdx.js
CHANGED
|
@@ -15,10 +15,10 @@ module.exports = {
|
|
|
15
15
|
import { mdx } from '@mdx-js/react'
|
|
16
16
|
${mdx.sync(src, { compilers, filepath: filename })}
|
|
17
17
|
`;
|
|
18
|
-
|
|
18
|
+
|
|
19
19
|
const extension = path.extname(filename);
|
|
20
20
|
const jsFileName = `${filename.slice(0, -extension.length)}.js`;
|
|
21
|
-
|
|
21
|
+
|
|
22
22
|
return new ScriptTransformer(config).transformSource(jsFileName, result, instrument);
|
|
23
23
|
},
|
|
24
24
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@storybook/addon-docs",
|
|
3
|
-
"version": "5.3.
|
|
3
|
+
"version": "5.3.19",
|
|
4
4
|
"description": "Superior documentation for your components",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"addon",
|
|
@@ -46,14 +46,14 @@
|
|
|
46
46
|
"@mdx-js/loader": "^1.5.1",
|
|
47
47
|
"@mdx-js/mdx": "^1.5.1",
|
|
48
48
|
"@mdx-js/react": "^1.5.1",
|
|
49
|
-
"@storybook/addons": "5.3.
|
|
50
|
-
"@storybook/api": "5.3.
|
|
51
|
-
"@storybook/components": "5.3.
|
|
52
|
-
"@storybook/core-events": "5.3.
|
|
49
|
+
"@storybook/addons": "5.3.19",
|
|
50
|
+
"@storybook/api": "5.3.19",
|
|
51
|
+
"@storybook/components": "5.3.19",
|
|
52
|
+
"@storybook/core-events": "5.3.19",
|
|
53
53
|
"@storybook/csf": "0.0.1",
|
|
54
|
-
"@storybook/postinstall": "5.3.
|
|
55
|
-
"@storybook/source-loader": "5.3.
|
|
56
|
-
"@storybook/theming": "5.3.
|
|
54
|
+
"@storybook/postinstall": "5.3.19",
|
|
55
|
+
"@storybook/source-loader": "5.3.19",
|
|
56
|
+
"@storybook/theming": "5.3.19",
|
|
57
57
|
"acorn": "^7.1.0",
|
|
58
58
|
"acorn-jsx": "^5.1.0",
|
|
59
59
|
"acorn-walk": "^7.0.0",
|
|
@@ -89,7 +89,7 @@
|
|
|
89
89
|
"publishConfig": {
|
|
90
90
|
"access": "public"
|
|
91
91
|
},
|
|
92
|
-
"gitHead": "
|
|
92
|
+
"gitHead": "e26136f29d99fdcec82a25689f0f7a10ef418fe1",
|
|
93
93
|
"typesVersions": {
|
|
94
94
|
"<=3.5": {
|
|
95
95
|
"*": [
|