@storybook/addon-docs 7.0.0-beta.6 → 7.0.0-beta.60

package/README.md

@@ -1,16 +1,16 @@
 <center>
-  <img src="https://raw.githubusercontent.com/storybookjs/storybook/main/addons/docs/docs/media/hero.png" width="100%" />
+  <img src="https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/docs/docs/media/hero.png" width="100%" />
 </center>
 
 # Storybook Docs
 
-> migration guide: This page documents the method to configure storybook introduced recently in 5.3.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.
+> 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.
 
 Storybook Docs transforms your Storybook stories into world-class component documentation.
 
 **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.
 
-**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.
+**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.
 
 Just like Storybook, Docs supports every major view layer including React, Vue, Angular, HTML, Web components, Svelte, and many more.
 
@@ -33,43 +33,41 @@ When you [install Docs](#installation), every story gets a `DocsPage`. `DocsPage
 Click on the `Docs` tab to see it:
 
 <center>
-  <img src="https://raw.githubusercontent.com/storybookjs/storybook/main/addons/docs/docs/media/docs-tab.png" width="100%" />
+  <img src="https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/docs/docs/media/docs-tab.png" width="100%" />
 </center>
 
 For more information on how it works, see the [`DocsPage` reference](https://github.com/storybookjs/storybook/blob/next/code/addons/docs/docs/docspage.md).
 
 ## MDX
 
-`MDX` is a syntax for writing long-form documentation and 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.
+`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.
 
 Here's an example file:
 
+<!-- prettier-ignore-start -->
+
 ```md
-import { Meta, Story, Canvas } from '@storybook/addon-docs';
-import { Checkbox } from './Checkbox';
+import { Meta, Story, Canvas } from '@storybook/blocks';
+import * as CheckboxStories from './Checkbox.stories';
 
-<Meta title="MDX/Checkbox" component={Checkbox} />
+<Meta title="MDX/Checkbox" of={CheckboxStories} />
 
 # Checkbox
 
-With `MDX` we can define a story for `Checkbox` right in the middle of our
+With `MDX` we can include a story for `Checkbox` right in the middle of our
 markdown documentation.
 
 <Canvas>
-  <Story name="all checkboxes">
-    <form>
-      <Checkbox id="Unchecked" label="Unchecked" />
-      <Checkbox id="Checked" label="Checked" checked />
-      <Checkbox appearance="secondary" id="second" label="Secondary" checked />
-    </form>
-  </Story>
+  <Story of={CheckboxStories.Unchecked} />
 </Canvas>
 ```
 
+<!-- prettier-ignore-end -->
+
 And here's how that's rendered in Storybook:
 
 <center>
-  <img src="https://raw.githubusercontent.com/storybookjs/storybook/main/addons/docs/docs/media/mdx-simple.png" width="100%" />
+  <img src="https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/docs/docs/media/mdx-simple.png" width="100%" />
 </center>
 
 For more information on `MDX`, see the [`MDX` reference](https://github.com/storybookjs/storybook/blob/next/code/addons/docs/docs/mdx.md).
@@ -101,9 +99,14 @@ yarn add -D react
 Then add the following to your `.storybook/main.js`:
 
 ```js
-module.exports = {
-  stories: ['../src/**/*.stories.@(js|mdx)'],
-  addons: ['@storybook/addon-docs'],
+export default {
+  stories: [
+    '../src/**/*.mdx', // 👈 Add this, to match your project's structure
+    '../src/**/*.stories.@(js|jsx|ts|tsx)',
+  ],
+  addons: [
+    '@storybook/addon-docs', // 👈 Also add this
+  ],
 };
 ```
 
@@ -135,14 +138,14 @@ Add the following to your Jest configuration:
 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:
 
 ```js
-module.exports = {
+export default {
   addons: [
     {
       name: '@storybook/addon-docs',
       options: {
-        configureJSX: true,
-        babelOptions: {},
+        jsxOptions: {},
         csfPluginOptions: null,
+        mdxPluginOptions: {},
         transcludeMarkdown: true,
       },
     },
@@ -150,7 +153,7 @@ module.exports = {
 };
 ```
 
-The `configureJSX` option is useful when you're writing your docs in MDX and your project's babel config isn't already set up to handle JSX files. `babelOptions` is a way to further configure the babel processor when you're using `configureJSX`.
+`jsxOptions` are options that will be passed to `@babel/preset-react` for `.md` and `.mdx` files.
 
 `csfPluginOptions` is an object for configuring `@storybook/csf-plugin`. When set to `null` it tells docs not to run the `csf-plugin` at all, which can be used as an optimization, or if you're already using `csf-plugin` in your `main.js`.
 

package/angular/README.md

@@ -13,8 +13,11 @@ To learn more about Storybook Docs, read the [general documentation](../README.m
 - [Installation](#installation)
 - [DocsPage](#docspage)
 - [Props tables](#props-tables)
+  - [Automatic Compodoc setup](#automatic-compodoc-setup)
+- [Manual Compodoc setup](#manual-compodoc-setup)
 - [MDX](#mdx)
 - [IFrame height](#iframe-height)
+- [Inline Stories](#inline-stories)
 - [More resources](#more-resources)
 
 ## Installation
@@ -28,7 +31,7 @@ yarn add -D @storybook/addon-docs@next
 Then add the following to your `.storybook/main.js` exports:
 
 ```js
-module.exports = {
+export default {
   addons: ['@storybook/addon-docs'],
 };
 ```
@@ -41,35 +44,63 @@ When you [install docs](#installation) you should get basic [DocsPage](../docs/d
 
 Getting [Props tables](../docs/props-tables.md) for your components requires a few more steps. Docs for Angular relies on [Compodoc](https://compodoc.app/), the excellent API documentation tool. It supports `inputs`, `outputs`, `properties`, `methods`, `view/content child/children` as first class prop types.
 
-To get this, you'll first need to install Compodoc:
+### Automatic Compodoc setup
+
+During `sb init`, you will be asked, whether you want to setup Compodoc for your project. Just answer the question with Yes. Compodoc is then ready to use!
+
+## Manual Compodoc setup
+
+You'll need to register Compodoc's `documentation.json` file in `.storybook/preview.ts`:
+
+```js
+import { setCompodocJson } from '@storybook/addon-docs/angular';
+import docJson from '../documentation.json';
+
+setCompodocJson(docJson);
+```
+
+Finally, to set up compodoc, you'll first need to install Compodoc:
 
 ```sh
 yarn add -D @compodoc/compodoc
 ```
 
-Then you'll need to configure Compodoc to generate a `documentation.json` file. Adding the following snippet to your `package.json` creates a metadata file `./documentation.json` each time you run storybook:
+Then you'll need to configure Compodoc to generate a `documentation.json` file. Adding the following snippet to your `projects.<project>.architect.<storybook|build-storybook>` in the `angular.json` creates a metadata file `./documentation.json` each time you run storybook:
 
-```json
+```jsonc
+// angular.json
 {
-  ...
-  "scripts": {
-    "docs:json": "compodoc -p ./tsconfig.json -e json -d .",
-    "storybook": "npm run docs:json && start-storybook -p 6006 -s src/assets",
-    ...
-  },
+  "projects": {
+    "your-project": {
+      "architect": {
+        "storybook": {
+          ...,
+          "compodoc": true,
+          "compodocArgs": [
+            "-e",
+            "json",
+            "-d",
+            "." // the root folder of your project
+          ],
+        },
+        "build-storybook": {
+          ...,
+          "compodoc": true,
+          "compodocArgs": [
+            "-e",
+            "json",
+            "-d",
+            "." // the root folder of your project
+          ],
+        }
+      }
+    }
+  }
 }
 ```
 
 Unfortunately, it's not currently possible to update this dynamically as you edit your components, but [there's an open issue](https://github.com/storybookjs/storybook/issues/8672) to support this with improvements to Compodoc.
 
-Next, add the following to `.storybook/preview.ts` to load the Compodoc-generated file:
-
-```js
-import { setCompodocJson } from '@storybook/addon-docs/angular';
-import docJson from '../documentation.json';
-setCompodocJson(docJson);
-```
-
 Finally, be sure to fill in the `component` field in your story metadata:
 
 ```ts
@@ -104,9 +135,9 @@ yarn add -D react
 
 Then update your `.storybook/main.js` to make sure you load MDX files:
 
-```ts
-module.exports = {
-  stories: ['../src/stories/**/*.stories.@(js|ts|mdx)'],
+```js
+export default {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
 };
 ```
 
@@ -186,9 +217,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: { story: { iframeHeight: '400px' } } };
 ```
 
 For `DocsPage`, you need to update the parameter locally in a story:
@@ -196,7 +225,7 @@ For `DocsPage`, you need to update the parameter locally in a story:
 ```ts
 export const basic = () => ...
 basic.parameters = {
-  docs: { iframeHeight: 400 }
+  docs: { story: { iframeHeight: '400px' } },
 }
 ```
 
@@ -208,18 +237,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 `100px` (configurable using the `docs.story.iframeHeight` story parameter), by using the `docs.story.inline` 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: { story: { inline: false } } };
 ```
 
 ## More resources

package/angular/index.js

@@ -1,7 +1,7 @@
 /* eslint-disable no-underscore-dangle */
-/* global window */
+import { global } from '@storybook/global';
 
 export const setCompodocJson = (compodocJson) => {
   // @ts-expect-error (Converted from ts-ignore)
-  window.__STORYBOOK_COMPODOC_JSON__ = compodocJson;
+  global.__STORYBOOK_COMPODOC_JSON__ = compodocJson;
 };

package/common/README.md

@@ -21,7 +21,7 @@ yarn add -D @storybook/addon-docs@next
 Then add the following to your `.storybook/main.js` addons:
 
 ```js
-module.exports = {
+export default {
   addons: ['@storybook/addon-docs'],
 };
 ```
@@ -43,7 +43,7 @@ yarn add -D react
 Then update your `.storybook/main.js` to make sure you load MDX files:
 
 ```js
-module.exports = {
+export default {
   stories: ['../src/stories/**/*.stories.@(js|mdx)'],
 };
 ```
@@ -71,9 +71,7 @@ In the "common" setup, Storybook Docs renders stories inside `iframe`s, with a d
 To update the global default, modify `.storybook/preview.js`:
 
 ```ts
-import { addParameters } from '@storybook/ember';
-
-addParameters({ docs: { iframeHeight: 400 } });
+export const parameters = { docs: { story: { iframeHeight: '400px' } } };
 ```
 
 For `DocsPage`, you need to update the parameter locally in a story:
@@ -81,7 +79,7 @@ For `DocsPage`, you need to update the parameter locally in a story:
 ```ts
 export const basic = () => ...
 basic.parameters = {
-  docs: { iframeHeight: 400 }
+  docs: { story: { iframeHeight: '400px' } }
 }
 ```
 

package/dist/{DocsRenderer-QMFTTPNP.mjs → DocsRenderer-ED6OA6OB.mjs}

@@ -1 +1 @@
-import{DocsRenderer,defaultComponents}from"./chunk-MA2MUXQN.mjs";import"./chunk-R4NKYYJA.mjs";export{DocsRenderer,defaultComponents};
+import{DocsRenderer,defaultComponents}from"./chunk-G4YQS2SV.mjs";import"./chunk-R4NKYYJA.mjs";export{DocsRenderer,defaultComponents};

package/dist/blocks.d.ts

@@ -0,0 +1 @@
+export * from '@storybook/blocks';

package/dist/blocks.js

@@ -0,0 +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_client_logger=require("@storybook/client-logger");__reExport(blocks_exports,require("@storybook/blocks"),module.exports);(0,import_client_logger.deprecate)("Import from '@storybook/addon-docs/blocks' is deprecated. Please import from '@storybook/blocks' instead.");

package/dist/blocks.mjs

@@ -0,0 +1 @@
+import{deprecate}from"@storybook/client-logger";export*from"@storybook/blocks";deprecate("Import from '@storybook/addon-docs/blocks' is deprecated. Please import from '@storybook/blocks' instead.");

package/dist/chunk-G4YQS2SV.mjs

@@ -0,0 +1 @@
+import React from"react";import{renderElement,unmountElement}from"@storybook/react-dom-shim";import{Docs,CodeOrSourceMdx,AnchorMdx,HeadersMdx}from"@storybook/blocks";var defaultComponents={code:CodeOrSourceMdx,a:AnchorMdx,...HeadersMdx},DocsRenderer=class{constructor(){this.render=(context,docsParameter,element,callback)=>{let components={...defaultComponents,...docsParameter?.components};import("@mdx-js/react").then(({MDXProvider})=>renderElement(React.createElement(MDXProvider,{components},React.createElement(Docs,{context,docsParameter})),element)).then(callback)},this.unmount=element=>{unmountElement(element)}}};export{defaultComponents,DocsRenderer};

package/dist/index.js

@@ -1 +1 @@
-var f=Object.create;var p=Object.defineProperty;var D=Object.getOwnPropertyDescriptor;var T=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var C=(o,e)=>{for(var n in e)p(o,n,{get:e[n],enumerable:!0})},s=(o,e,n,d)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of T(e))!y.call(o,t)&&t!==n&&p(o,t,{get:()=>e[t],enumerable:!(d=D(e,t))||d.enumerable});return o},c=(o,e,n)=>(s(o,e,"default"),n&&s(n,e,"default")),u=(o,e,n)=>(n=o!=null?f(h(o)):{},s(e||!o||!o.__esModule?p(n,"default",{value:o,enumerable:!0}):n,o)),v=o=>s(p({},"__esModule",{value:!0}),o);var m={};C(m,{DocsRenderer:()=>i});module.exports=v(m);c(m,require("@storybook/blocks"),module.exports);var x=u(require("react")),M=u(require("react-dom")),r=require("@storybook/blocks"),H={code:r.CodeOrSourceMdx,a:r.AnchorMdx,...r.HeadersMdx},i=class{constructor(){this.render=(e,n,d,t)=>{let l={...H,...n==null?void 0:n.components};import("@mdx-js/react").then(({MDXProvider:R})=>{M.default.render(x.default.createElement(R,{components:l},x.default.createElement(r.Docs,{key:Math.random(),context:e,docsParameter:n})),d,t)})},this.unmount=e=>{M.default.unmountComponentAtNode(e)}}};0&&(module.exports={DocsRenderer});
+var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__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")),__toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod)),__toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var src_exports={};__export(src_exports,{DocsRenderer:()=>DocsRenderer});module.exports=__toCommonJS(src_exports);__reExport(src_exports,require("@storybook/blocks"),module.exports);var import_react=__toESM(require("react")),import_react_dom_shim=require("@storybook/react-dom-shim"),import_blocks=require("@storybook/blocks"),defaultComponents={code:import_blocks.CodeOrSourceMdx,a:import_blocks.AnchorMdx,...import_blocks.HeadersMdx},DocsRenderer=class{constructor(){this.render=(context,docsParameter,element,callback)=>{let components={...defaultComponents,...docsParameter==null?void 0:docsParameter.components};import("@mdx-js/react").then(({MDXProvider})=>(0,import_react_dom_shim.renderElement)(import_react.default.createElement(MDXProvider,{components},import_react.default.createElement(import_blocks.Docs,{context,docsParameter})),element)).then(callback)},this.unmount=element=>{(0,import_react_dom_shim.unmountElement)(element)}}};0&&(module.exports={DocsRenderer});

package/dist/index.mjs

@@ -1 +1 @@
-import{DocsRenderer}from"./chunk-MA2MUXQN.mjs";import"./chunk-R4NKYYJA.mjs";export*from"@storybook/blocks";export{DocsRenderer};
+import{DocsRenderer}from"./chunk-G4YQS2SV.mjs";import"./chunk-R4NKYYJA.mjs";export*from"@storybook/blocks";export{DocsRenderer};

package/dist/preset.d.ts

@@ -1,5 +1,8 @@
+import { StorybookConfig } from '@storybook/types';
+
+declare const addons: StorybookConfig['addons'];
 declare const webpackX: any;
 declare const storyIndexersX: any;
 declare const docsX: any;
 
-export { docsX as docs, storyIndexersX as storyIndexers, webpackX as webpack };
+export { addons, docsX as docs, storyIndexersX as storyIndexers, webpackX as webpack };

package/dist/preset.js

@@ -1,7 +1,40 @@
-var w=Object.create;var d=Object.defineProperty;var L=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var $=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var X=(e,r)=>{for(var o in r)d(e,o,{get:r[o],enumerable:!0})},y=(e,r,o,t)=>{if(r&&typeof r=="object"||typeof r=="function")for(let s of S(r))!h.call(e,s)&&s!==o&&d(e,s,{get:()=>r[s],enumerable:!(t=L(r,s))||t.enumerable});return e};var i=(e,r,o)=>(o=e!=null?w($(e)):{},y(r||!e||!e.__esModule?d(o,"default",{value:e,enumerable:!0}):o,e)),v=e=>y(d({},"__esModule",{value:!0}),e);var B={};X(B,{docs:()=>q,storyIndexers:()=>j,webpack:()=>R});module.exports=v(B);var g=i(require("fs-extra")),x=i(require("remark-slug")),b=i(require("remark-external-links")),k=require("ts-dedent"),O=require("@storybook/csf-tools");function m({mdxBabelOptions:e,configureJSX:r}){let o=(e==null?void 0:e.plugins)||[],t=o.filter(a=>{let l=Array.isArray(a)?a[0]:a;return typeof l=="string"?!l.includes("plugin-transform-react-jsx"):!0}),s=[require.resolve("@babel/plugin-transform-react-jsx"),{pragma:"React.createElement",pragmaFrag:"React.Fragment"}],n=r?[...t,s]:o;return{babelrc:!1,configFile:!1,...e,plugins:n}}async function A(e={},r){let o=await r.presets.apply("babelLoaderRef"),{module:t={}}=e,{mdxBabelOptions:s,configureJSX:n=!0,csfPluginOptions:a={},sourceLoaderOptions:l=null,transcludeMarkdown:I=!1}=r,u=await r.presets.apply("mdxLoaderOptions",{skipCsf:!0,mdxCompileOptions:{providerImportSource:"@storybook/addon-docs/mdx-react-shim",remarkPlugins:[x.default,b.default]}});if(l)throw new Error(k.dedent`
+var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__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};var __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod)),__toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var preset_exports={};__export(preset_exports,{addons:()=>addons,docs:()=>docsX,storyIndexers:()=>storyIndexersX,webpack:()=>webpackX});module.exports=__toCommonJS(preset_exports);var import_fs_extra=__toESM(require("fs-extra")),import_remark_slug=__toESM(require("remark-slug")),import_remark_external_links=__toESM(require("remark-external-links")),import_ts_dedent2=require("ts-dedent"),import_global=require("@storybook/global"),import_csf_tools=require("@storybook/csf-tools"),import_node_logger2=require("@storybook/node-logger");var import_node_logger=require("@storybook/node-logger"),import_ts_dedent=__toESM(require("ts-dedent"));function ensureReactPeerDeps(){try{require.resolve("react"),require.resolve("react-dom")}catch{import_node_logger.logger.error(import_ts_dedent.default`
+      Starting in 7.0, react and react-dom are now required peer dependencies of Storybook.
+      https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#react-peer-dependencies-required
+
+      It seems that you haven't run Storybook's CLI to upgrade to the latest version.
+      The upgrade command will install the required peer dependencies for you and will take 
+      care of other important auto migrations as well.
+
+      If you want to upgrade to the latest prerelease version, please run:
+
+      $ npx storybook@next upgrade --prerelease
+
+      Otherwise, please run:
+
+      $ npx storybook upgrade
+
+      If you do not want to use the upgrade commands, 
+      please install react and react-dom in your project manually.
+
+      npm:
+      $ npm add react react-dom --dev
+
+      yarn:
+      $ yarn add react react-dom --dev
+
+      pnpm:
+      $ pnpm add react react-dom --dev
+    `),process.exit(1)}}async function webpack(webpackConfig={},options){var _a,_b,_c;let{module:module2={}}=webpackConfig,{csfPluginOptions={},jsxOptions={},sourceLoaderOptions=null,configureJsx,mdxBabelOptions,mdxPluginOptions={}}=options,mdxLoaderOptions=await options.presets.apply("mdxLoaderOptions",{skipCsf:!0,...mdxPluginOptions,mdxCompileOptions:{providerImportSource:"@storybook/addon-docs/mdx-react-shim",...mdxPluginOptions.mdxCompileOptions,remarkPlugins:[import_remark_slug.default,import_remark_external_links.default].concat(((_a=mdxPluginOptions==null?void 0:mdxPluginOptions.mdxCompileOptions)==null?void 0:_a.remarkPlugins)??[])},jsxOptions});if(sourceLoaderOptions)throw new Error(import_ts_dedent2.dedent`
       Addon-docs no longer uses source-loader in 7.0.
 
       To update your configuration, please see migration instructions here:
 
       https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#dropped-source-loader--storiesof-static-snippets
-    `);let c=require.resolve("@storybook/mdx2-csf/loader"),p=t.rules||[];return I&&(p=[...p.filter(P=>{var f;return((f=P.test)==null?void 0:f.toString())!=="/\\.md$/"}),{test:/\.md$/,use:[{loader:o,options:m({mdxBabelOptions:s,configureJSX:n})},{loader:c,options:u}]}]),{...e,plugins:[...e.plugins||[],...a?[require("@storybook/csf-plugin").webpack(a)]:[]],module:{...t,rules:[...p,{test:/(stories|story)\.mdx$/,use:[{loader:o,options:m({mdxBabelOptions:s,configureJSX:n})},{loader:c,options:{...u,skipCsf:!1}}]},{test:/\.mdx$/,exclude:/(stories|story)\.mdx$/,use:[{loader:o,options:m({mdxBabelOptions:s,configureJSX:n})},{loader:c,options:u}]}]}}}var C=e=>[{test:/(stories|story)\.mdx$/,indexer:async(o,t)=>{let s=(await g.default.readFile(o,"utf-8")).toString(),{compile:n}=await import("@storybook/mdx2-csf");return s=await n(s,{}),(0,O.loadCsf)(s,{...t,fileName:o}).parse()}},...e||[]],F=e=>({...e,enabled:!0,defaultName:"Docs",docsPage:!0}),R=A,j=C,q=F;0&&(module.exports={docs,storyIndexers,webpack});
+    `);if(mdxBabelOptions||configureJsx)throw new Error(import_ts_dedent2.dedent`
+      Addon-docs no longer uses configureJsx or mdxBabelOptions in 7.0.
+
+      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 mdxVersion=(_b=import_global.global.FEATURES)!=null&&_b.legacyMdx1?"MDX1":"MDX2";import_node_logger2.logger.info(`Addon-docs: using ${mdxVersion}`);let mdxLoader=(_c=import_global.global.FEATURES)!=null&&_c.legacyMdx1?require.resolve("@storybook/mdx1-csf/loader"):require.resolve("@storybook/mdx2-csf/loader");return{...webpackConfig,plugins:[...webpackConfig.plugins||[],...csfPluginOptions?[require("@storybook/csf-plugin").webpack(csfPluginOptions)]:[]],module:{...module2,rules:[...module2.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)=>{var _a;let code=(await import_fs_extra.default.readFile(fileName,"utf-8")).toString(),{compile}=(_a=import_global.global.FEATURES)!=null&&_a.legacyMdx1?await import("@storybook/mdx1-csf"):await import("@storybook/mdx2-csf");return code=await compile(code,{}),(0,import_csf_tools.loadCsf)(code,{...opts,fileName}).parse()}},...indexers||[]],docs=docsOptions=>({...docsOptions,defaultName:"Docs",autodocs:"tag"}),addons=[require.resolve("@storybook/react-dom-shim/dist/preset")],webpackX=webpack,storyIndexersX=storyIndexers,docsX=docs;ensureReactPeerDeps();0&&(module.exports={addons,docs,storyIndexers,webpack});

package/dist/preset.mjs

@@ -1,7 +1,40 @@
-import{__require}from"./chunk-R4NKYYJA.mjs";import fs from"fs-extra";import remarkSlug from"remark-slug";import remarkExternalLinks from"remark-external-links";import{dedent}from"ts-dedent";import{loadCsf}from"@storybook/csf-tools";function createBabelOptions({mdxBabelOptions,configureJSX}){let babelPlugins=mdxBabelOptions?.plugins||[],filteredBabelPlugins=babelPlugins.filter(p=>{let name=Array.isArray(p)?p[0]:p;return typeof name=="string"?!name.includes("plugin-transform-react-jsx"):!0}),jsxPlugin=[__require.resolve("@babel/plugin-transform-react-jsx"),{pragma:"React.createElement",pragmaFrag:"React.Fragment"}],plugins=configureJSX?[...filteredBabelPlugins,jsxPlugin]:babelPlugins;return{babelrc:!1,configFile:!1,...mdxBabelOptions,plugins}}async function webpack(webpackConfig={},options){let resolvedBabelLoader=await options.presets.apply("babelLoaderRef"),{module={}}=webpackConfig,{mdxBabelOptions,configureJSX=!0,csfPluginOptions={},sourceLoaderOptions=null,transcludeMarkdown=!1}=options,mdxLoaderOptions=await options.presets.apply("mdxLoaderOptions",{skipCsf:!0,mdxCompileOptions:{providerImportSource:"@storybook/addon-docs/mdx-react-shim",remarkPlugins:[remarkSlug,remarkExternalLinks]}});if(sourceLoaderOptions)throw new Error(dedent`
+import{__require}from"./chunk-R4NKYYJA.mjs";import fs from"fs-extra";import remarkSlug from"remark-slug";import remarkExternalLinks from"remark-external-links";import{dedent as dedent2}from"ts-dedent";import{global}from"@storybook/global";import{loadCsf}from"@storybook/csf-tools";import{logger as logger2}from"@storybook/node-logger";import{logger}from"@storybook/node-logger";import dedent from"ts-dedent";function ensureReactPeerDeps(){try{__require.resolve("react"),__require.resolve("react-dom")}catch{logger.error(dedent`
+      Starting in 7.0, react and react-dom are now required peer dependencies of Storybook.
+      https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#react-peer-dependencies-required
+
+      It seems that you haven't run Storybook's CLI to upgrade to the latest version.
+      The upgrade command will install the required peer dependencies for you and will take 
+      care of other important auto migrations as well.
+
+      If you want to upgrade to the latest prerelease version, please run:
+
+      $ npx storybook@next upgrade --prerelease
+
+      Otherwise, please run:
+
+      $ npx storybook upgrade
+
+      If you do not want to use the upgrade commands, 
+      please install react and react-dom in your project manually.
+
+      npm:
+      $ npm add react react-dom --dev
+
+      yarn:
+      $ yarn add react react-dom --dev
+
+      pnpm:
+      $ pnpm add react react-dom --dev
+    `),process.exit(1)}}async function webpack(webpackConfig={},options){let{module={}}=webpackConfig,{csfPluginOptions={},jsxOptions={},sourceLoaderOptions=null,configureJsx,mdxBabelOptions,mdxPluginOptions={}}=options,mdxLoaderOptions=await options.presets.apply("mdxLoaderOptions",{skipCsf:!0,...mdxPluginOptions,mdxCompileOptions:{providerImportSource:"@storybook/addon-docs/mdx-react-shim",...mdxPluginOptions.mdxCompileOptions,remarkPlugins:[remarkSlug,remarkExternalLinks].concat(mdxPluginOptions?.mdxCompileOptions?.remarkPlugins??[])},jsxOptions});if(sourceLoaderOptions)throw new Error(dedent2`
       Addon-docs no longer uses source-loader in 7.0.
 
       To update your configuration, please see migration instructions here:
 
       https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#dropped-source-loader--storiesof-static-snippets
-    `);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:resolvedBabelLoader,options:createBabelOptions({mdxBabelOptions,configureJSX})},{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:resolvedBabelLoader,options:createBabelOptions({mdxBabelOptions,configureJSX})},{loader:mdxLoader,options:{...mdxLoaderOptions,skipCsf:!1}}]},{test:/\.mdx$/,exclude:/(stories|story)\.mdx$/,use:[{loader:resolvedBabelLoader,options:createBabelOptions({mdxBabelOptions,configureJSX})},{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};
+    `);if(mdxBabelOptions||configureJsx)throw new Error(dedent2`
+      Addon-docs no longer uses configureJsx or mdxBabelOptions in 7.0.
+
+      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 mdxVersion=global.FEATURES?.legacyMdx1?"MDX1":"MDX2";logger2.info(`Addon-docs: using ${mdxVersion}`);let mdxLoader=global.FEATURES?.legacyMdx1?__require.resolve("@storybook/mdx1-csf/loader"):__require.resolve("@storybook/mdx2-csf/loader");return{...webpackConfig,plugins:[...webpackConfig.plugins||[],...csfPluginOptions?[__require("@storybook/csf-plugin").webpack(csfPluginOptions)]:[]],module:{...module,rules:[...module.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}=global.FEATURES?.legacyMdx1?await import("@storybook/mdx1-csf"):await import("@storybook/mdx2-csf");return code=await compile(code,{}),loadCsf(code,{...opts,fileName}).parse()}},...indexers||[]],docs=docsOptions=>({...docsOptions,defaultName:"Docs",autodocs:"tag"}),addons=[__require.resolve("@storybook/react-dom-shim/dist/preset")],webpackX=webpack,storyIndexersX=storyIndexers,docsX=docs;ensureReactPeerDeps();export{addons,docsX as docs,storyIndexersX as storyIndexers,webpackX as webpack};

package/dist/preview.js

@@ -1 +1 @@
-var D=Object.create;var d=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var v=(e,o)=>()=>(e&&(o=e(e=0)),o);var u=(e,o)=>{for(var n in o)d(e,n,{get:o[n],enumerable:!0})},a=(e,o,n,s)=>{if(o&&typeof o=="object"||typeof o=="function")for(let t of f(o))!C.call(e,t)&&t!==n&&d(e,t,{get:()=>o[t],enumerable:!(s=T(o,t))||s.enumerable});return e};var c=(e,o,n)=>(n=e!=null?D(h(e)):{},a(o||!e||!e.__esModule?d(n,"default",{value:e,enumerable:!0}):n,e)),H=e=>a(d({},"__esModule",{value:!0}),e);var M={};u(M,{DocsRenderer:()=>i,defaultComponents:()=>x});var m,p,r,x,i,l=v(()=>{m=c(require("react")),p=c(require("react-dom")),r=require("@storybook/blocks"),x={code:r.CodeOrSourceMdx,a:r.AnchorMdx,...r.HeadersMdx},i=class{constructor(){this.render=(o,n,s,t)=>{let y={...x,...n==null?void 0:n.components};import("@mdx-js/react").then(({MDXProvider:R})=>{p.default.render(m.default.createElement(R,{components:y},m.default.createElement(r.Docs,{key:Math.random(),context:o,docsParameter:n})),s,t)})},this.unmount=o=>{p.default.unmountComponentAtNode(o)}}}});var E={};u(E,{parameters:()=>b});module.exports=H(E);var b={docs:{renderer:async()=>{let{DocsRenderer:e}=await Promise.resolve().then(()=>(l(),M));return new e}}};0&&(module.exports={parameters});
+var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty;var __esm=(fn,res)=>function(){return fn&&(res=(0,fn[__getOwnPropNames(fn)[0]])(fn=0)),res};var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__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};var __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod)),__toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var DocsRenderer_exports={};__export(DocsRenderer_exports,{DocsRenderer:()=>DocsRenderer,defaultComponents:()=>defaultComponents});var import_react,import_react_dom_shim,import_blocks,defaultComponents,DocsRenderer,init_DocsRenderer=__esm({"src/DocsRenderer.tsx"(){import_react=__toESM(require("react")),import_react_dom_shim=require("@storybook/react-dom-shim"),import_blocks=require("@storybook/blocks"),defaultComponents={code:import_blocks.CodeOrSourceMdx,a:import_blocks.AnchorMdx,...import_blocks.HeadersMdx},DocsRenderer=class{constructor(){this.render=(context,docsParameter,element,callback)=>{let components={...defaultComponents,...docsParameter==null?void 0:docsParameter.components};import("@mdx-js/react").then(({MDXProvider})=>(0,import_react_dom_shim.renderElement)(import_react.default.createElement(MDXProvider,{components},import_react.default.createElement(import_blocks.Docs,{context,docsParameter})),element)).then(callback)},this.unmount=element=>{(0,import_react_dom_shim.unmountElement)(element)}}}}});var preview_exports={};__export(preview_exports,{parameters:()=>parameters});module.exports=__toCommonJS(preview_exports);var parameters={docs:{renderer:async()=>{let{DocsRenderer:DocsRenderer2}=await Promise.resolve().then(()=>(init_DocsRenderer(),DocsRenderer_exports));return new DocsRenderer2}}};0&&(module.exports={parameters});

package/dist/preview.mjs

@@ -1 +1 @@
-import"./chunk-R4NKYYJA.mjs";var parameters={docs:{renderer:async()=>{let{DocsRenderer}=await import("./DocsRenderer-QMFTTPNP.mjs");return new DocsRenderer}}};export{parameters};
+import"./chunk-R4NKYYJA.mjs";var parameters={docs:{renderer:async()=>{let{DocsRenderer}=await import("./DocsRenderer-ED6OA6OB.mjs");return new DocsRenderer}}};export{parameters};

package/dist/shims/mdx-react-shim.js

@@ -1 +1 @@
-var a=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var p=(r,o,f,x)=>{if(o&&typeof o=="object"||typeof o=="function")for(let e of c(o))!d.call(r,e)&&e!==f&&a(r,e,{get:()=>o[e],enumerable:!(x=b(o,e))||x.enumerable});return r},t=(r,o,f)=>(p(r,o,"default"),f&&p(f,o,"default"));var g=r=>p(a({},"__esModule",{value:!0}),r);var m={};module.exports=g(m);t(m,require("@mdx-js/react"),module.exports);
+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 mdx_react_shim_exports={};module.exports=__toCommonJS(mdx_react_shim_exports);__reExport(mdx_react_shim_exports,require("@mdx-js/react"),module.exports);

package/ember/README.md

@@ -24,7 +24,7 @@ yarn add -D @storybook/addon-docs@next
 Then add the following to your `.storybook/main.js` addons:
 
 ```js
-module.exports = {
+export default {
   addons: ['@storybook/addon-docs'],
 };
 ```
@@ -87,7 +87,7 @@ yarn add -D react
 Then update your `.storybook/main.js` to make sure you load MDX files:
 
 ```js
-module.exports = {
+export default {
   stories: ['../src/stories/**/*.stories.@(js|mdx)'],
 };
 ```
@@ -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: { story: { iframeHeight: '400px' } } };
 ```
 
 For `DocsPage`, you need to update the parameter locally in a story:
@@ -135,7 +133,7 @@ For `DocsPage`, you need to update the parameter locally in a story:
 ```ts
 export const basic = () => ...
 basic.parameters = {
-  docs: { iframeHeight: 400 }
+  docs: { story: { iframeHeight: '400px' } }
 }
 ```
 

package/ember/index.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-underscore-dangle */
-/* global window */
+import { global } from '@storybook/global';
 
 export const setJSONDoc = (jsondoc) => {
-  window.__EMBER_GENERATED_DOC_JSON__ = jsondoc;
+  global.__EMBER_GENERATED_DOC_JSON__ = jsondoc;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-docs",
-  "version": "7.0.0-beta.6",
+  "version": "7.0.0-beta.60",
   "description": "Document component usage and properties in Markdown",
   "keywords": [
     "addon",
@@ -10,7 +10,7 @@
     "essentials",
     "organize"
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/main/addons/docs",
+  "homepage": "https://github.com/storybookjs/storybook/tree/next/code/addons/docs",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
   },
@@ -41,6 +41,11 @@
       "import": "./dist/preset.mjs",
       "types": "./dist/preset.d.ts"
     },
+    "./blocks": {
+      "require": "./dist/blocks.js",
+      "import": "./dist/blocks.mjs",
+      "types": "./dist/blocks.d.ts"
+    },
     "./dist/preview": {
       "require": "./dist/preview.js",
       "import": "./dist/preview.mjs",
@@ -87,8 +92,7 @@
     "lit/**/*",
     "README.md",
     "*.js",
-    "*.d.ts",
-    "!__testfixtures__"
+    "*.d.ts"
   ],
   "scripts": {
     "check": "../../../scripts/node_modules/.bin/tsc --noEmit",
@@ -99,18 +103,20 @@
     "@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.6",
-    "@storybook/components": "7.0.0-beta.6",
-    "@storybook/csf-plugin": "7.0.0-beta.6",
-    "@storybook/csf-tools": "7.0.0-beta.6",
+    "@storybook/blocks": "7.0.0-beta.60",
+    "@storybook/client-logger": "7.0.0-beta.60",
+    "@storybook/components": "7.0.0-beta.60",
+    "@storybook/csf-plugin": "7.0.0-beta.60",
+    "@storybook/csf-tools": "7.0.0-beta.60",
+    "@storybook/global": "^5.0.0",
     "@storybook/mdx2-csf": "next",
-    "@storybook/node-logger": "7.0.0-beta.6",
-    "@storybook/postinstall": "7.0.0-beta.6",
-    "@storybook/preview-api": "7.0.0-beta.6",
-    "@storybook/theming": "7.0.0-beta.6",
-    "@storybook/types": "7.0.0-beta.6",
-    "fs-extra": "^9.0.1",
-    "global": "^4.4.0",
+    "@storybook/node-logger": "7.0.0-beta.60",
+    "@storybook/postinstall": "7.0.0-beta.60",
+    "@storybook/preview-api": "7.0.0-beta.60",
+    "@storybook/react-dom-shim": "7.0.0-beta.60",
+    "@storybook/theming": "7.0.0-beta.60",
+    "@storybook/types": "7.0.0-beta.60",
+    "fs-extra": "^11.1.0",
     "remark-external-links": "^8.0.0",
     "remark-slug": "^6.0.0",
     "ts-dedent": "^2.0.0"
@@ -121,9 +127,15 @@
     "typescript": "~4.9.3"
   },
   "peerDependencies": {
+    "@storybook/mdx1-csf": ">=1.0.0-0",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
+  "peerDependenciesMeta": {
+    "@storybook/mdx1-csf": {
+      "optional": true
+    }
+  },
   "publishConfig": {
     "access": "public"
   },
@@ -132,10 +144,11 @@
       "./src/index.ts",
       "./src/preset.ts",
       "./src/preview.ts",
+      "./src/blocks.ts",
       "./src/shims/mdx-react-shim.ts"
     ]
   },
-  "gitHead": "edcda9c064bcb77c903263fafcaee2bd369f429a",
+  "gitHead": "325e0406b449b740d94d481a32a62304a8b2fd11",
   "storybook": {
     "displayName": "Docs",
     "icon": "https://user-images.githubusercontent.com/263385/101991672-48355c80-3c7c-11eb-82d9-95fa12438f64.png",

package/postinstall/presets.js

@@ -24,9 +24,7 @@ export default function transformer(file, api) {
     ((dependencies && dependencies['react-scripts']) ||
       (devDependencies && devDependencies['react-scripts']))
   ) {
-    presetOptions = {
-      configureJSX: true,
-    };
+    presetOptions = {};
   }
 
   const j = api.jscodeshift;

package/react/README.md

@@ -29,7 +29,7 @@ yarn add -D @storybook/addon-docs@next
 Then add the following to your `.storybook/main.js` list of `addons`:
 
 ```js
-module.exports = {
+export default {
   // other settings
   addons: ['@storybook/addon-docs'];
 }
@@ -70,7 +70,7 @@ storiesOf('InfoButton', module)
 Then update your `.storybook/main.js` to make sure you load MDX files:
 
 ```js
-module.exports = {
+export default {
   stories: ['../src/stories/**/*.stories.@(js|mdx)'],
 };
 ```
@@ -98,14 +98,14 @@ 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.story.iframeHeight` story parameter), by using the `docs.stories.inline` parameter.
+
+To do so for all stories, update `.storybook/preview.js`:
 
 ```js
-export const parameters = {
-  docs: {
-    inlineStories: false,
-  },
-};
+export const parameters = { docs: { story: { inline: false } } };
 ```
 
 ## TypeScript props with `react-docgen`
@@ -115,7 +115,7 @@ If you're using TypeScript, there are two different options for generating props
 You can add the following lines to your `.storybook/main.js` to switch between the two (or disable docgen):
 
 ```js
-module.exports = {
+export default {
   typescript: {
     // also valid 'react-docgen-typescript' | false
     reactDocgen: 'react-docgen',

package/vue/README.md

@@ -29,7 +29,7 @@ yarn add -D @storybook/addon-docs@next
 Then add the following to your `.storybook/main.js` addons:
 
 ```js
-module.exports = {
+export default {
   addons: ['@storybook/addon-docs'],
 };
 ```
@@ -39,9 +39,9 @@ module.exports = {
 The `addon-docs` preset for Vue has a configuration option that can be used to configure [`vue-docgen-api`](https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/packages/vue-docgen-api), a tool which extracts information from Vue components. Here's an example of how to use the preset with options for Vue app:
 
 ```js
-const path = require('path');
+import * as path from 'path';
 
-module.exports = {
+export default {
   addons: [
     {
       name: '@storybook/addon-docs',
@@ -102,7 +102,7 @@ yarn add -D react
 Then update your `.storybook/main.js` to make sure you load MDX files:
 
 ```js
-module.exports = {
+export default {
   stories: ['../src/stories/**/*.stories.@(js|mdx)'],
 };
 ```
@@ -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.story.iframeHeight` story parameter), by using the `docs.stories.inline` 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: { story: { inline: false } } };
 ```
 
 ## More resources

package/web-components/README.md

@@ -112,24 +112,14 @@ 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.
+Storybook Docs renders all web components stories inline by default.
 
-To always use iframes you can set
+However, you can render stories in an iframe, with a default height of `60px` (configurable using the `docs.story.iframeHeight` story parameter), by using the `docs.stories.inline` parameter.
 
-```js
-addParameters({
-  docs: {
-    inlineStories: false,
-  },
-});
-```
-
-or add it to individual stories.
+To do so for all stories, update `.storybook/preview.js`:
 
 ```js
-<Story inline={false} />
+export const parameters = { docs: { story: { inline: false } } };
 ```
 
 ## More resources

package/dist/chunk-MA2MUXQN.mjs

@@ -1 +0,0 @@
-import React from"react";import ReactDOM from"react-dom";import{Docs,CodeOrSourceMdx,AnchorMdx,HeadersMdx}from"@storybook/blocks";var defaultComponents={code:CodeOrSourceMdx,a:AnchorMdx,...HeadersMdx},DocsRenderer=class{constructor(){this.render=(context,docsParameter,element,callback)=>{let components={...defaultComponents,...docsParameter?.components};import("@mdx-js/react").then(({MDXProvider})=>{ReactDOM.render(React.createElement(MDXProvider,{components},React.createElement(Docs,{key:Math.random(),context,docsParameter})),element,callback)})},this.unmount=element=>{ReactDOM.unmountComponentAtNode(element)}}};export{defaultComponents,DocsRenderer};