@storybook/addon-docs 7.0.0-beta.12 → 7.0.0-beta.14
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/angular/README.md +7 -12
- package/angular/index.js +2 -2
- package/dist/blocks.js +1 -1
- package/dist/blocks.mjs +1 -1
- package/dist/preset.js +1 -1
- package/dist/preset.mjs +1 -1
- package/ember/README.md +1 -3
- package/ember/index.js +2 -2
- package/package.json +12 -12
- package/react/README.md +7 -6
- package/vue/README.md +5 -9
- package/web-components/README.md +4 -13
package/angular/README.md
CHANGED
|
@@ -15,6 +15,7 @@ To learn more about Storybook Docs, read the [general documentation](../README.m
|
|
|
15
15
|
- [Props tables](#props-tables)
|
|
16
16
|
- [MDX](#mdx)
|
|
17
17
|
- [IFrame height](#iframe-height)
|
|
18
|
+
- [Inline Stories](#inline-stories)
|
|
18
19
|
- [More resources](#more-resources)
|
|
19
20
|
|
|
20
21
|
## Installation
|
|
@@ -186,9 +187,7 @@ Storybook Docs renders all Angular stories inside IFrames, with a default height
|
|
|
186
187
|
To update the global default, modify `.storybook/preview.ts`:
|
|
187
188
|
|
|
188
189
|
```ts
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
addParameters({ docs: { iframeHeight: 400 } });
|
|
190
|
+
export const parameters = { docs: { iframeHeight: 400 } };
|
|
192
191
|
```
|
|
193
192
|
|
|
194
193
|
For `DocsPage`, you need to update the parameter locally in a story:
|
|
@@ -208,18 +207,14 @@ And for `MDX` you can modify it as an attribute on the `Story` element:
|
|
|
208
207
|
|
|
209
208
|
## Inline Stories
|
|
210
209
|
|
|
211
|
-
Storybook Docs renders all Angular stories
|
|
210
|
+
Storybook Docs renders all Angular stories inline by default.
|
|
212
211
|
|
|
213
|
-
|
|
212
|
+
However, you can render stories in an iframe, with a default height of `60px` (configurable using the `docs.iframeHeight` story parameter), by using the `docs.inlineStories` parameter.
|
|
214
213
|
|
|
215
|
-
|
|
216
|
-
import { addParameters } from '@storybook/angular';
|
|
214
|
+
To do so for all stories, update `.storybook/preview.js`:
|
|
217
215
|
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
inlineStories: true,
|
|
221
|
-
},
|
|
222
|
-
});
|
|
216
|
+
```js
|
|
217
|
+
export const parameters = { docs: { inlineStories: false } };
|
|
223
218
|
```
|
|
224
219
|
|
|
225
220
|
## More resources
|
package/angular/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/* eslint-disable no-underscore-dangle */
|
|
2
|
-
|
|
2
|
+
import { global } from '@storybook/global';
|
|
3
3
|
|
|
4
4
|
export const setCompodocJson = (compodocJson) => {
|
|
5
5
|
// @ts-expect-error (Converted from ts-ignore)
|
|
6
|
-
|
|
6
|
+
global.__STORYBOOK_COMPODOC_JSON__ = compodocJson;
|
|
7
7
|
};
|
package/dist/blocks.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var
|
|
1
|
+
var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to},__reExport=(target,mod,secondTarget)=>(__copyProps(target,mod,"default"),secondTarget&&__copyProps(secondTarget,mod,"default"));var __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var blocks_exports={};module.exports=__toCommonJS(blocks_exports);var import_global=require("@storybook/global"),{LOGLEVEL}=import_global.global,levels={trace:1,debug:2,info:3,warn:4,error:5,silent:10},currentLogLevelString=LOGLEVEL,currentLogLevelNumber=levels[currentLogLevelString]||levels.info,logger={trace:(message,...rest)=>{currentLogLevelNumber<=levels.trace&&console.trace(message,...rest)},debug:(message,...rest)=>{currentLogLevelNumber<=levels.debug&&console.debug(message,...rest)},info:(message,...rest)=>{currentLogLevelNumber<=levels.info&&console.info(message,...rest)},warn:(message,...rest)=>{currentLogLevelNumber<=levels.warn&&console.warn(message,...rest)},error:(message,...rest)=>{currentLogLevelNumber<=levels.error&&console.error(message,...rest)},log:(message,...rest)=>{currentLogLevelNumber<levels.silent&&console.log(message,...rest)}},logged=new Set,once=type=>(message,...rest)=>{if(!logged.has(message))return logged.add(message),logger[type](message,...rest)};once.clear=()=>logged.clear();once.trace=once("trace");once.debug=once("debug");once.info=once("info");once.warn=once("warn");once.error=once("error");once.log=once("log");var deprecate=once("warn"),pretty=type=>(...args)=>{let argArray=[];if(args.length){let startTagRe=/<span\s+style=(['"])([^'"]*)\1\s*>/gi,endTagRe=/<\/span>/gi,reResultArray;for(argArray.push(args[0].replace(startTagRe,"%c").replace(endTagRe,"%c"));reResultArray=startTagRe.exec(args[0]);)argArray.push(reResultArray[2]),argArray.push("");for(let j=1;j<args.length;j++)argArray.push(args[j])}logger[type].apply(logger,argArray)};pretty.trace=pretty("trace");pretty.debug=pretty("debug");pretty.info=pretty("info");pretty.warn=pretty("warn");pretty.error=pretty("error");__reExport(blocks_exports,require("@storybook/blocks"),module.exports);deprecate("Import from '@storybook/addon-docs/blocks' is deprecated. Please import from '@storybook/blocks' instead.");
|
package/dist/blocks.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import"./chunk-R4NKYYJA.mjs";import
|
|
1
|
+
import"./chunk-R4NKYYJA.mjs";import{global}from"@storybook/global";var{LOGLEVEL}=global,levels={trace:1,debug:2,info:3,warn:4,error:5,silent:10},currentLogLevelString=LOGLEVEL,currentLogLevelNumber=levels[currentLogLevelString]||levels.info,logger={trace:(message,...rest)=>{currentLogLevelNumber<=levels.trace&&console.trace(message,...rest)},debug:(message,...rest)=>{currentLogLevelNumber<=levels.debug&&console.debug(message,...rest)},info:(message,...rest)=>{currentLogLevelNumber<=levels.info&&console.info(message,...rest)},warn:(message,...rest)=>{currentLogLevelNumber<=levels.warn&&console.warn(message,...rest)},error:(message,...rest)=>{currentLogLevelNumber<=levels.error&&console.error(message,...rest)},log:(message,...rest)=>{currentLogLevelNumber<levels.silent&&console.log(message,...rest)}},logged=new Set,once=type=>(message,...rest)=>{if(!logged.has(message))return logged.add(message),logger[type](message,...rest)};once.clear=()=>logged.clear();once.trace=once("trace");once.debug=once("debug");once.info=once("info");once.warn=once("warn");once.error=once("error");once.log=once("log");var deprecate=once("warn"),pretty=type=>(...args)=>{let argArray=[];if(args.length){let startTagRe=/<span\s+style=(['"])([^'"]*)\1\s*>/gi,endTagRe=/<\/span>/gi,reResultArray;for(argArray.push(args[0].replace(startTagRe,"%c").replace(endTagRe,"%c"));reResultArray=startTagRe.exec(args[0]);)argArray.push(reResultArray[2]),argArray.push("");for(let j=1;j<args.length;j++)argArray.push(args[j])}logger[type].apply(logger,argArray)};pretty.trace=pretty("trace");pretty.debug=pretty("debug");pretty.info=pretty("info");pretty.warn=pretty("warn");pretty.error=pretty("error");export*from"@storybook/blocks";deprecate("Import from '@storybook/addon-docs/blocks' is deprecated. Please import from '@storybook/blocks' instead.");
|
package/dist/preset.js
CHANGED
|
@@ -10,4 +10,4 @@ var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropD
|
|
|
10
10
|
To update your configuration, please see migration instructions here:
|
|
11
11
|
|
|
12
12
|
https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#dropped-addon-docs-manual-babel-configuration
|
|
13
|
-
`);let mdxLoader=require.resolve("@storybook/mdx2-csf/loader"),rules=module2.rules||[];return transcludeMarkdown&&(rules=[...rules.filter(rule=>{var _a;return((_a=rule.test)==null?void 0:_a.toString())!=="/\\.md$/"}),{test:/\.md$/,use:[{loader:mdxLoader,options:mdxLoaderOptions}]}]),{...webpackConfig,plugins:[...webpackConfig.plugins||[],...csfPluginOptions?[require("@storybook/csf-plugin").webpack(csfPluginOptions)]:[]],module:{...module2,rules:[...rules,{test:/(stories|story)\.mdx$/,use:[{loader:mdxLoader,options:{...mdxLoaderOptions,skipCsf:!1}}]},{test:/\.mdx$/,exclude:/(stories|story)\.mdx$/,use:[{loader:mdxLoader,options:mdxLoaderOptions}]}]}}}var storyIndexers=indexers=>[{test:/(stories|story)\.mdx$/,indexer:async(fileName,opts)=>{let code=(await import_fs_extra.default.readFile(fileName,"utf-8")).toString(),{compile}=await import("@storybook/mdx2-csf");return code=await compile(code,{}),(0,import_csf_tools.loadCsf)(code,{...opts,fileName}).parse()}},...indexers||[]],docs=docsOptions=>({...docsOptions,
|
|
13
|
+
`);let mdxLoader=require.resolve("@storybook/mdx2-csf/loader"),rules=module2.rules||[];return transcludeMarkdown&&(rules=[...rules.filter(rule=>{var _a;return((_a=rule.test)==null?void 0:_a.toString())!=="/\\.md$/"}),{test:/\.md$/,use:[{loader:mdxLoader,options:mdxLoaderOptions}]}]),{...webpackConfig,plugins:[...webpackConfig.plugins||[],...csfPluginOptions?[require("@storybook/csf-plugin").webpack(csfPluginOptions)]:[]],module:{...module2,rules:[...rules,{test:/(stories|story)\.mdx$/,use:[{loader:mdxLoader,options:{...mdxLoaderOptions,skipCsf:!1}}]},{test:/\.mdx$/,exclude:/(stories|story)\.mdx$/,use:[{loader:mdxLoader,options:mdxLoaderOptions}]}]}}}var storyIndexers=indexers=>[{test:/(stories|story)\.mdx$/,indexer:async(fileName,opts)=>{let code=(await import_fs_extra.default.readFile(fileName,"utf-8")).toString(),{compile}=await import("@storybook/mdx2-csf");return code=await compile(code,{}),(0,import_csf_tools.loadCsf)(code,{...opts,fileName}).parse()}},...indexers||[]],docs=docsOptions=>({...docsOptions,disable:!1,defaultName:"Docs",autodocs:"tag"}),webpackX=webpack,storyIndexersX=storyIndexers,docsX=docs;0&&(module.exports={docs,storyIndexers,webpack});
|
package/dist/preset.mjs
CHANGED
|
@@ -10,4 +10,4 @@ import{__require}from"./chunk-R4NKYYJA.mjs";import fs from"fs-extra";import rema
|
|
|
10
10
|
To update your configuration, please see migration instructions here:
|
|
11
11
|
|
|
12
12
|
https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#dropped-addon-docs-manual-babel-configuration
|
|
13
|
-
`);let mdxLoader=__require.resolve("@storybook/mdx2-csf/loader"),rules=module.rules||[];return transcludeMarkdown&&(rules=[...rules.filter(rule=>rule.test?.toString()!=="/\\.md$/"),{test:/\.md$/,use:[{loader:mdxLoader,options:mdxLoaderOptions}]}]),{...webpackConfig,plugins:[...webpackConfig.plugins||[],...csfPluginOptions?[__require("@storybook/csf-plugin").webpack(csfPluginOptions)]:[]],module:{...module,rules:[...rules,{test:/(stories|story)\.mdx$/,use:[{loader:mdxLoader,options:{...mdxLoaderOptions,skipCsf:!1}}]},{test:/\.mdx$/,exclude:/(stories|story)\.mdx$/,use:[{loader:mdxLoader,options:mdxLoaderOptions}]}]}}}var storyIndexers=indexers=>[{test:/(stories|story)\.mdx$/,indexer:async(fileName,opts)=>{let code=(await fs.readFile(fileName,"utf-8")).toString(),{compile}=await import("@storybook/mdx2-csf");return code=await compile(code,{}),loadCsf(code,{...opts,fileName}).parse()}},...indexers||[]],docs=docsOptions=>({...docsOptions,
|
|
13
|
+
`);let mdxLoader=__require.resolve("@storybook/mdx2-csf/loader"),rules=module.rules||[];return transcludeMarkdown&&(rules=[...rules.filter(rule=>rule.test?.toString()!=="/\\.md$/"),{test:/\.md$/,use:[{loader:mdxLoader,options:mdxLoaderOptions}]}]),{...webpackConfig,plugins:[...webpackConfig.plugins||[],...csfPluginOptions?[__require("@storybook/csf-plugin").webpack(csfPluginOptions)]:[]],module:{...module,rules:[...rules,{test:/(stories|story)\.mdx$/,use:[{loader:mdxLoader,options:{...mdxLoaderOptions,skipCsf:!1}}]},{test:/\.mdx$/,exclude:/(stories|story)\.mdx$/,use:[{loader:mdxLoader,options:mdxLoaderOptions}]}]}}}var storyIndexers=indexers=>[{test:/(stories|story)\.mdx$/,indexer:async(fileName,opts)=>{let code=(await fs.readFile(fileName,"utf-8")).toString(),{compile}=await import("@storybook/mdx2-csf");return code=await compile(code,{}),loadCsf(code,{...opts,fileName}).parse()}},...indexers||[]],docs=docsOptions=>({...docsOptions,disable:!1,defaultName:"Docs",autodocs:"tag"}),webpackX=webpack,storyIndexersX=storyIndexers,docsX=docs;export{docsX as docs,storyIndexersX as storyIndexers,webpackX as webpack};
|
package/ember/README.md
CHANGED
|
@@ -125,9 +125,7 @@ Storybook Docs renders all Ember stories inside `iframe`s, with a default height
|
|
|
125
125
|
To update the global default, modify `.storybook/preview.js`:
|
|
126
126
|
|
|
127
127
|
```ts
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
addParameters({ docs: { iframeHeight: 400 } });
|
|
128
|
+
export const parameters = { docs: { iframeHeight: 400 } };
|
|
131
129
|
```
|
|
132
130
|
|
|
133
131
|
For `DocsPage`, you need to update the parameter locally in a story:
|
package/ember/index.js
CHANGED
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.14",
|
|
4
4
|
"description": "Document component usage and properties in Markdown",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"addon",
|
|
@@ -104,18 +104,18 @@
|
|
|
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.14",
|
|
108
|
+
"@storybook/components": "7.0.0-beta.14",
|
|
109
|
+
"@storybook/csf-plugin": "7.0.0-beta.14",
|
|
110
|
+
"@storybook/csf-tools": "7.0.0-beta.14",
|
|
111
|
+
"@storybook/global": "^5.0.0",
|
|
111
112
|
"@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.
|
|
113
|
+
"@storybook/node-logger": "7.0.0-beta.14",
|
|
114
|
+
"@storybook/postinstall": "7.0.0-beta.14",
|
|
115
|
+
"@storybook/preview-api": "7.0.0-beta.14",
|
|
116
|
+
"@storybook/theming": "7.0.0-beta.14",
|
|
117
|
+
"@storybook/types": "7.0.0-beta.14",
|
|
117
118
|
"fs-extra": "^9.0.1",
|
|
118
|
-
"global": "^4.4.0",
|
|
119
119
|
"remark-external-links": "^8.0.0",
|
|
120
120
|
"remark-slug": "^6.0.0",
|
|
121
121
|
"ts-dedent": "^2.0.0"
|
|
@@ -141,7 +141,7 @@
|
|
|
141
141
|
"./src/shims/mdx-react-shim.ts"
|
|
142
142
|
]
|
|
143
143
|
},
|
|
144
|
-
"gitHead": "
|
|
144
|
+
"gitHead": "c3b2e8fe2517ba2d7630e260de0fd1ad86cafeb6",
|
|
145
145
|
"storybook": {
|
|
146
146
|
"displayName": "Docs",
|
|
147
147
|
"icon": "https://user-images.githubusercontent.com/263385/101991672-48355c80-3c7c-11eb-82d9-95fa12438f64.png",
|
package/react/README.md
CHANGED
|
@@ -98,14 +98,15 @@ Some **markdown** description, or whatever you want.
|
|
|
98
98
|
|
|
99
99
|
## Inline stories
|
|
100
100
|
|
|
101
|
-
|
|
101
|
+
|
|
102
|
+
Storybook Docs renders all React stories inline by default.
|
|
103
|
+
|
|
104
|
+
However, you can render stories in an iframe, with a default height of `60px` (configurable using the `docs.iframeHeight` story parameter), by using the `docs.inlineStories` parameter.
|
|
105
|
+
|
|
106
|
+
To do so for all stories, update `.storybook/preview.js`:
|
|
102
107
|
|
|
103
108
|
```js
|
|
104
|
-
export const parameters = {
|
|
105
|
-
docs: {
|
|
106
|
-
inlineStories: false,
|
|
107
|
-
},
|
|
108
|
-
};
|
|
109
|
+
export const parameters = { docs: { inlineStories: false } };
|
|
109
110
|
```
|
|
110
111
|
|
|
111
112
|
## TypeScript props with `react-docgen`
|
package/vue/README.md
CHANGED
|
@@ -133,18 +133,14 @@ Yes, it's redundant to declare `component` twice. [Coming soon](https://github.c
|
|
|
133
133
|
|
|
134
134
|
## Inline Stories
|
|
135
135
|
|
|
136
|
-
Storybook Docs renders all Vue stories
|
|
136
|
+
Storybook Docs renders all Vue stories inline by default.
|
|
137
137
|
|
|
138
|
-
|
|
138
|
+
However, you can render stories in an iframe, with a default height of `60px` (configurable using the `docs.iframeHeight` story parameter), by using the `docs.inlineStories` parameter.
|
|
139
139
|
|
|
140
|
-
|
|
141
|
-
import { addParameters } from '@storybook/vue';
|
|
140
|
+
To do so for all stories, update `.storybook/preview.js`:
|
|
142
141
|
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
inlineStories: true,
|
|
146
|
-
},
|
|
147
|
-
});
|
|
142
|
+
```js
|
|
143
|
+
export const parameters = { docs: { inlineStories: false, }, };
|
|
148
144
|
```
|
|
149
145
|
|
|
150
146
|
## More resources
|
package/web-components/README.md
CHANGED
|
@@ -112,24 +112,15 @@ For a full example see the [web-components-kitchen-sink/custom-elements.json](..
|
|
|
112
112
|
|
|
113
113
|
## Stories not inline
|
|
114
114
|
|
|
115
|
-
By default stories are rendered inline.
|
|
116
|
-
For web components that is usually fine as they are style encapsulated via shadow dom.
|
|
117
|
-
However when you have a style tag in you template it might be best to show them in an iframe.
|
|
118
115
|
|
|
119
|
-
|
|
116
|
+
Storybook Docs renders all web components stories inline by default.
|
|
120
117
|
|
|
121
|
-
|
|
122
|
-
addParameters({
|
|
123
|
-
docs: {
|
|
124
|
-
inlineStories: false,
|
|
125
|
-
},
|
|
126
|
-
});
|
|
127
|
-
```
|
|
118
|
+
However, you can render stories in an iframe, with a default height of `60px` (configurable using the `docs.iframeHeight` story parameter), by using the `docs.inlineStories` parameter.
|
|
128
119
|
|
|
129
|
-
|
|
120
|
+
To do so for all stories, update `.storybook/preview.js`:
|
|
130
121
|
|
|
131
122
|
```js
|
|
132
|
-
|
|
123
|
+
export const parameters = { docs: { inlineStories: false } };
|
|
133
124
|
```
|
|
134
125
|
|
|
135
126
|
## More resources
|