@storybook/addon-docs 7.0.0-beta.13 → 7.0.0-beta.14

package/angular/README.md

@@ -15,6 +15,7 @@ To learn more about Storybook Docs, read the [general documentation](../README.m
 - [Props tables](#props-tables)
 - [MDX](#mdx)
 - [IFrame height](#iframe-height)
+- [Inline Stories](#inline-stories)
 - [More resources](#more-resources)
 
 ## Installation
@@ -186,9 +187,7 @@ Storybook Docs renders all Angular stories inside IFrames, with a default height
 To update the global default, modify `.storybook/preview.ts`:
 
 ```ts
-import { addParameters } from '@storybook/angular';
-
-addParameters({ docs: { iframeHeight: 400 } });
+export const parameters = { docs: { iframeHeight: 400 } };
 ```
 
 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:
 
 ## Inline Stories
 
-Storybook Docs renders all Angular stories inside IFrames by default. But it is possible to use an inline rendering:
+Storybook Docs renders all Angular stories inline by default. 
 
-Then update `.storybook/preview.js`:
+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.
 
-```js
-import { addParameters } from '@storybook/angular';
+To do so for all stories, update `.storybook/preview.js`:
 
-addParameters({
-  docs: {
-    inlineStories: true,
-  },
-});
+```js
+export const parameters = { docs: { inlineStories: false } };
 ```
 
 ## More resources

package/dist/preset.js

@@ -10,4 +10,4 @@ var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropD
       To update your configuration, please see migration instructions here:
 
       https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#dropped-addon-docs-manual-babel-configuration
-    `);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,enabled:!0,defaultName:"Docs",docsPage:!0}),webpackX=webpack,storyIndexersX=storyIndexers,docsX=docs;0&&(module.exports={docs,storyIndexers,webpack});
+    `);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

@@ -10,4 +10,4 @@ import{__require}from"./chunk-R4NKYYJA.mjs";import fs from"fs-extra";import rema
       To update your configuration, please see migration instructions here:
 
       https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#dropped-addon-docs-manual-babel-configuration
-    `);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,enabled:!0,defaultName:"Docs",docsPage:!0}),webpackX=webpack,storyIndexersX=storyIndexers,docsX=docs;export{docsX as docs,storyIndexersX as storyIndexers,webpackX as webpack};
+    `);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

@@ -125,9 +125,7 @@ Storybook Docs renders all Ember stories inside `iframe`s, with a default height
 To update the global default, modify `.storybook/preview.js`:
 
 ```ts
-import { addParameters } from '@storybook/ember';
-
-addParameters({ docs: { iframeHeight: 400 } });
+export const parameters =  { docs: { iframeHeight: 400 } };
 ```
 
 For `DocsPage`, you need to update the parameter locally in a story:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-docs",
-  "version": "7.0.0-beta.13",
+  "version": "7.0.0-beta.14",
   "description": "Document component usage and properties in Markdown",
   "keywords": [
     "addon",
@@ -104,17 +104,17 @@
     "@babel/plugin-transform-react-jsx": "^7.19.0",
     "@jest/transform": "^29.3.1",
     "@mdx-js/react": "^2.1.5",
-    "@storybook/blocks": "7.0.0-beta.13",
-    "@storybook/components": "7.0.0-beta.13",
-    "@storybook/csf-plugin": "7.0.0-beta.13",
-    "@storybook/csf-tools": "7.0.0-beta.13",
+    "@storybook/blocks": "7.0.0-beta.14",
+    "@storybook/components": "7.0.0-beta.14",
+    "@storybook/csf-plugin": "7.0.0-beta.14",
+    "@storybook/csf-tools": "7.0.0-beta.14",
     "@storybook/global": "^5.0.0",
     "@storybook/mdx2-csf": "next",
-    "@storybook/node-logger": "7.0.0-beta.13",
-    "@storybook/postinstall": "7.0.0-beta.13",
-    "@storybook/preview-api": "7.0.0-beta.13",
-    "@storybook/theming": "7.0.0-beta.13",
-    "@storybook/types": "7.0.0-beta.13",
+    "@storybook/node-logger": "7.0.0-beta.14",
+    "@storybook/postinstall": "7.0.0-beta.14",
+    "@storybook/preview-api": "7.0.0-beta.14",
+    "@storybook/theming": "7.0.0-beta.14",
+    "@storybook/types": "7.0.0-beta.14",
     "fs-extra": "^9.0.1",
     "remark-external-links": "^8.0.0",
     "remark-slug": "^6.0.0",
@@ -141,7 +141,7 @@
       "./src/shims/mdx-react-shim.ts"
     ]
   },
-  "gitHead": "ddf86bd126ede0c019d7c9494f99f24a5cad9908",
+  "gitHead": "c3b2e8fe2517ba2d7630e260de0fd1ad86cafeb6",
   "storybook": {
     "displayName": "Docs",
     "icon": "https://user-images.githubusercontent.com/263385/101991672-48355c80-3c7c-11eb-82d9-95fa12438f64.png",

package/react/README.md

@@ -98,14 +98,15 @@ Some **markdown** description, or whatever you want.
 
 ## Inline stories
 
-Storybook Docs renders all React stories inline on the page by default. If you want to render stories in an `iframe` so that they are better isolated. To do this, update `.storybook/preview.js`:
+
+Storybook Docs renders all React stories inline by default.
+
+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.
+
+To do so for all stories, update `.storybook/preview.js`:
 
 ```js
-export const parameters = {
-  docs: {
-    inlineStories: false,
-  },
-};
+export const parameters = { docs: { inlineStories: false } };
 ```
 
 ## TypeScript props with `react-docgen`

package/vue/README.md

@@ -133,18 +133,14 @@ Yes, it's redundant to declare `component` twice. [Coming soon](https://github.c
 
 ## Inline Stories
 
-Storybook Docs renders all Vue stories inside IFrames, with a default height of `60px` (configurable using the `docs.iframeHeight` story parameter).
+Storybook Docs renders all Vue stories inline by default.
 
-Starting in 5.3, you can also render stories inline, and in 6.0 this has become the default behavior. To render inline, update `.storybook/preview.js`:
+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.
 
-```js
-import { addParameters } from '@storybook/vue';
+To do so for all stories, update `.storybook/preview.js`:
 
-addParameters({
-  docs: {
-    inlineStories: true,
-  },
-});
+```js
+export const parameters = { docs: { inlineStories: false, }, };
 ```
 
 ## More resources

package/web-components/README.md

@@ -112,24 +112,15 @@ For a full example see the [web-components-kitchen-sink/custom-elements.json](..
 
 ## Stories not inline
 
-By default stories are rendered inline.
-For web components that is usually fine as they are style encapsulated via shadow dom.
-However when you have a style tag in you template it might be best to show them in an iframe.
 
-To always use iframes you can set
+Storybook Docs renders all web components stories inline by default.
 
-```js
-addParameters({
-  docs: {
-    inlineStories: false,
-  },
-});
-```
+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.
 
-or add it to individual stories.
+To do so for all stories, update `.storybook/preview.js`:
 
 ```js
-<Story inline={false} />
+export const parameters = { docs: { inlineStories: false } };
 ```
 
 ## More resources