@storybook/addon-docs 7.0.0-alpha.7 → 7.0.0-beta.0

package/README.md

@@ -23,7 +23,6 @@ Read on to learn more:
   - [Installation](#installation)
     - [Be sure to check framework specific installation needs](#be-sure-to-check-framework-specific-installation-needs)
   - [Preset options](#preset-options)
-  - [Manual configuration](#manual-configuration)
   - [TypeScript configuration](#typescript-configuration)
   - [More resources](#more-resources)
 
@@ -37,7 +36,7 @@ Click on the `Docs` tab to see it:
   <img src="https://raw.githubusercontent.com/storybookjs/storybook/main/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/tree/next/addons/docs/docs/docspage.md).
+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
 
@@ -73,7 +72,7 @@ And here's how that's rendered in Storybook:
   <img src="https://raw.githubusercontent.com/storybookjs/storybook/main/addons/docs/docs/media/mdx-simple.png" width="100%" />
 </center>
 
-For more information on `MDX`, see the [`MDX` reference](https://github.com/storybookjs/storybook/tree/next/addons/docs/docs/mdx.md).
+For more information on `MDX`, see the [`MDX` reference](https://github.com/storybookjs/storybook/blob/next/code/addons/docs/docs/mdx.md).
 
 ## Framework support
 
@@ -81,10 +80,9 @@ Storybook Docs supports all view layers that Storybook supports except for React
 
 [Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
 
-
 **Note:** `#` = WIP support
 
-Want to add enhanced features to your favorite framework? Check out this [dev guide](https://github.com/storybookjs/storybook/tree/next/addons/docs/docs/multiframework.md)
+Want to add enhanced features to your favorite framework? Check out this [dev guide](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/docs/multiframework.md)
 
 ## Installation
 
@@ -109,7 +107,7 @@ module.exports = {
 };
 ```
 
-If using in conjunction with the [storyshots add-on](https://github.com/storybookjs/storybook/blob/next/addons/storyshots/storyshots-core/README.md), you will need to
+If using in conjunction with the [storyshots add-on](https://github.com/storybookjs/storybook/blob/next/code/addons/storyshots/storyshots-core/README.md), you will need to
 configure Jest to transform MDX stories into something Storyshots can understand:
 
 Add the following to your Jest configuration:
@@ -125,12 +123,12 @@ Add the following to your Jest configuration:
 
 ### Be sure to check framework specific installation needs
 
-- [React](https://github.com/storybookjs/storybook/tree/next/addons/docs/react) (covered here)
-- [Vue](https://github.com/storybookjs/storybook/tree/next/addons/docs/vue)
-- [Angular](https://github.com/storybookjs/storybook/tree/next/addons/docs/angular)
-- [Ember](https://github.com/storybookjs/storybook/tree/next/addons/docs/ember)
-- [Web Components](https://github.com/storybookjs/storybook/tree/next/addons/docs/web-components)
-- [Common setup (all other frameworks)](https://github.com/storybookjs/storybook/tree/next/addons/docs/common)
+- [React](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/react) (covered here)
+- [Vue](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/vue)
+- [Angular](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/angular)
+- [Ember](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/ember)
+- [Web Components](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/web-components)
+- [Common setup (all other frameworks)](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/common)
 
 ## Preset options
 
@@ -144,7 +142,7 @@ module.exports = {
       options: {
         configureJSX: true,
         babelOptions: {},
-        sourceLoaderOptions: null,
+        csfPluginOptions: null,
         transcludeMarkdown: true,
       },
     },
@@ -154,7 +152,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`.
 
-`sourceLoaderOptions` is an object for configuring `@storybook/source-loader`. When set to `null` it tells docs not to run the `source-loader` at all, which can be used as an optimization, or if you're already using `source-loader` in your `main.js`.
+`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`.
 
 The `transcludeMarkdown` option enables mdx files to import `.md` files and render them as a component.
 
@@ -167,75 +165,14 @@ import Changelog from '../CHANGELOG.md';
 <Changelog />
 ```
 
-## Manual configuration
-
-We recommend using the preset, which should work out of the box. If you don't want to use the preset, and prefer to configure "the long way" add the following configuration to `.storybook/main.js` (see comments inline for explanation):
-
-```js
-const createCompiler = require('@storybook/addon-docs/mdx-compiler-plugin');
-
-module.exports = {
-  // 1. register the docs panel (as opposed to '@storybook/addon-docs' which
-  //    will configure everything with a preset)
-  addons: ['@storybook/addon-docs/register'],
-  // 2. manually configure webpack, since you're not using the preset
-  webpackFinal: async (config) => {
-    config.module.rules.push({
-      // 2a. Load `.stories.mdx` / `.story.mdx` files as CSF and generate
-      //     the docs page from the markdown
-      test: /\.(stories|story)\.mdx$/,
-      use: [
-        {
-          // Need to add babel-loader as dependency: `yarn add -D babel-loader`
-          loader: require.resolve('babel-loader'),
-          // may or may not need this line depending on your app's setup
-          options: {
-            plugins: ['@babel/plugin-transform-react-jsx'],
-          },
-        },
-        {
-          loader: '@mdx-js/loader',
-          options: {
-            compilers: [createCompiler({})],
-          },
-        },
-      ],
-    });
-    // 2b. Run `source-loader` on story files to show their source code
-    //     automatically in `DocsPage` or the `Source` doc block.
-    config.module.rules.push({
-      test: /\.(stories|story)\.[tj]sx?$/,
-      loader: require.resolve('@storybook/source-loader'),
-      exclude: [/node_modules/],
-      enforce: 'pre',
-    });
-    return config;
-  },
-};
-```
-
-You'll also need to set up the docs parameter in `.storybook/preview.js`. This includes the `DocsPage` for rendering the page, a container, and various configuration options, such as `extractComponentDescription` for manually extracting a component description:
-
-```js
-import { addParameters } from '@storybook/react';
-import { DocsPage, DocsContainer } from '@storybook/addon-docs';
-
-addParameters({
-  docs: {
-    container: DocsContainer,
-    page: DocsPage,
-  },
-});
-```
-
 ## TypeScript configuration
 
-As of SB6 [TypeScript is zero-config](https://storybook.js.org/docs/react/configure/typescript) and should work with SB Docs out of the box. For advanced configuration options, refer to the [Props documentation](https://github.com/storybookjs/storybook/tree/next/addons/docs/docs/props-tables.md).
+As of SB6 [TypeScript is zero-config](https://storybook.js.org/docs/react/configure/typescript) and should work with SB Docs out of the box. For advanced configuration options, refer to the [Props documentation](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/docs/props-tables.md).
 
 ## More resources
 
 Want to learn more? Here are some more articles on Storybook Docs:
 
-- References: [DocsPage](https://github.com/storybookjs/storybook/tree/next/addons/docs/docs/docspage.md) / [MDX](https://github.com/storybookjs/storybook/tree/next/addons/docs/docs/mdx.md) / [FAQ](https://github.com/storybookjs/storybook/tree/next/addons/docs/docs/faq.md) / [Recipes](https://github.com/storybookjs/storybook/tree/next/addons/docs/docs/recipes.md) / [Theming](https://github.com/storybookjs/storybook/tree/next/addons/docs/docs/theming.md) / [Props](https://github.com/storybookjs/storybook/tree/next/addons/docs/docs/props-tables.md)
+- References: [DocsPage](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/docs/docspage.md) / [MDX](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/docs/mdx.md) / [FAQ](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/docs/faq.md) / [Recipes](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/docs/recipes.md) / [Theming](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/docs/theming.md) / [Props](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/docs/props-tables.md)
 - Announcements: [Vision](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a) / [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf) / [MDX](https://medium.com/storybookjs/rich-docs-with-storybook-mdx-61bc145ae7bc) / [Framework support](https://medium.com/storybookjs/storybook-docs-for-new-frameworks-b1f6090ee0ea)
 - Example: [Storybook Design System](https://github.com/storybookjs/design-system)

package/angular/index.js

@@ -2,6 +2,6 @@
 /* global window */
 
 export const setCompodocJson = (compodocJson) => {
-  // @ts-ignore
+  // @ts-expect-error (Converted from ts-ignore)
   window.__STORYBOOK_COMPODOC_JSON__ = compodocJson;
 };

package/dist/DocsRenderer-FLOC7YSC.mjs

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

package/dist/chunk-HXSBEJGO.mjs

@@ -0,0 +1 @@
+var __require=(x=>typeof require!="undefined"?require:typeof Proxy!="undefined"?new Proxy(x,{get:(a,b)=>(typeof require!="undefined"?require:a)[b]}):x)(function(x){if(typeof require!="undefined")return require.apply(this,arguments);throw new Error('Dynamic require of "'+x+'" is not supported')});export{__require};

package/dist/chunk-MA2MUXQN.mjs

@@ -0,0 +1 @@
+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};

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+export * from '@storybook/blocks';
+import { Renderer, DocsRenderFunction } from '@storybook/types';
+
+declare class DocsRenderer<TRenderer extends Renderer> {
+    render: DocsRenderFunction<TRenderer>;
+    unmount: (element: HTMLElement) => void;
+    constructor();
+}
+
+export { DocsRenderer };

package/dist/index.js

@@ -0,0 +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});

package/dist/index.mjs

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

package/dist/preset.d.ts

@@ -0,0 +1,5 @@
+declare const webpackX: any;
+declare const storyIndexersX: any;
+declare const docsX: any;
+
+export { docsX as docs, storyIndexersX as storyIndexers, webpackX as webpack };

package/dist/preset.js

@@ -0,0 +1,7 @@
+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`
+      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});

package/dist/preset.mjs

@@ -0,0 +1,7 @@
+import{__require}from"./chunk-HXSBEJGO.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`
+      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};

package/dist/preview.d.ts

@@ -0,0 +1,3 @@
+declare const parameters: any;
+
+export { parameters };

package/dist/preview.js

@@ -0,0 +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});

package/dist/preview.mjs

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

package/dist/shims/mdx-react-shim.d.ts

@@ -0,0 +1 @@
+export * from '@mdx-js/react';

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

@@ -0,0 +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);

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

@@ -0,0 +1 @@
+export*from"@mdx-js/react";

package/jest-transform-mdx.js

@@ -2,15 +2,16 @@ const path = require('path');
 const { ScriptTransformer } = require('@jest/transform');
 const { dedent } = require('ts-dedent');
 
-const { compileSync } = require('@storybook/mdx1-csf');
+const { compile } = require('@storybook/mdx2-csf');
 
 module.exports = {
-  process(src, filename, config, { instrument }) {
+  async processAsync(src, filename, config, { instrument }) {
+    const code = await compile(src, { skipCsf: false });
     const result = dedent`
       /* @jsx mdx */
       import React from 'react'
       import { mdx } from '@mdx-js/react'
-      ${compileSync(src, { filepath: filename })}
+      ${code}
     `;
 
     const extension = path.extname(filename);

package/jest.config.js

@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-docs",
-  "version": "7.0.0-alpha.7",
+  "version": "7.0.0-beta.0",
   "description": "Document component usage and properties in Markdown",
   "keywords": [
     "addon",
@@ -24,9 +24,55 @@
     "url": "https://opencollective.com/storybook"
   },
   "license": "MIT",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "node": "./dist/index.js",
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./preview": {
+      "require": "./dist/preview.js",
+      "import": "./dist/preview.mjs",
+      "types": "./dist/preview.d.ts"
+    },
+    "./preset": {
+      "require": "./dist/preset.js",
+      "import": "./dist/preset.mjs",
+      "types": "./dist/preset.d.ts"
+    },
+    "./dist/preview": {
+      "require": "./dist/preview.js",
+      "import": "./dist/preview.mjs",
+      "types": "./dist/preview.d.ts"
+    },
+    "./dist/preset": {
+      "require": "./dist/preset.js",
+      "import": "./dist/preset.mjs",
+      "types": "./dist/preset.d.ts"
+    },
+    "./dist/shims/mdx-react-shim": {
+      "require": "./dist/shims/mdx-react-shim.js",
+      "import": "./dist/shims/mdx-react-shim.mjs",
+      "types": "./dist/shims/mdx-react-shim.d.ts"
+    },
+    "./mdx-react-shim": {
+      "require": "./dist/shims/mdx-react-shim.js",
+      "import": "./dist/shims/mdx-react-shim.mjs",
+      "types": "./dist/shims/mdx-react-shim.d.ts"
+    },
+    "./svelte/HOC.svelte": "./svelte/HOC.svelte",
+    "./ember": "./ember/index.js",
+    "./ember/index.js": "./ember/index.js",
+    "./angular": "./angular/index.js",
+    "./angular/index.js": "./angular/index.js",
+    "./web-components/index.js": "./web-components/index.js",
+    "./jest-transform-mdx": "./jest-transform-mdx.js",
+    "./package.json": "./package.json"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
     "angular/**/*",
@@ -45,63 +91,51 @@
     "!__testfixtures__"
   ],
   "scripts": {
-    "prepare": "node ../../scripts/prepare.js"
+    "check": "../../../scripts/node_modules/.bin/tsc --noEmit",
+    "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@babel/plugin-transform-react-jsx": "^7.12.12",
-    "@babel/preset-env": "^7.12.11",
-    "@jest/transform": "^26.6.2",
-    "@mdx-js/react": "^1.6.22",
-    "@storybook/addons": "7.0.0-alpha.7",
-    "@storybook/api": "7.0.0-alpha.7",
-    "@storybook/components": "7.0.0-alpha.7",
-    "@storybook/core-common": "7.0.0-alpha.7",
-    "@storybook/core-events": "7.0.0-alpha.7",
-    "@storybook/csf": "0.0.2--canary.4566f4d.1",
-    "@storybook/csf-tools": "7.0.0-alpha.7",
-    "@storybook/docs-tools": "7.0.0-alpha.7",
-    "@storybook/mdx1-csf": "^0.0.1",
-    "@storybook/node-logger": "7.0.0-alpha.7",
-    "@storybook/postinstall": "7.0.0-alpha.7",
-    "@storybook/preview-web": "7.0.0-alpha.7",
-    "@storybook/source-loader": "7.0.0-alpha.7",
-    "@storybook/store": "7.0.0-alpha.7",
-    "@storybook/theming": "7.0.0-alpha.7",
-    "babel-loader": "^8.2.5",
-    "core-js": "^3.8.2",
-    "fast-deep-equal": "^3.1.3",
+    "@babel/core": "^7.20.2",
+    "@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.0",
+    "@storybook/components": "7.0.0-beta.0",
+    "@storybook/csf-plugin": "7.0.0-beta.0",
+    "@storybook/csf-tools": "7.0.0-beta.0",
+    "@storybook/mdx2-csf": "next",
+    "@storybook/node-logger": "7.0.0-beta.0",
+    "@storybook/postinstall": "7.0.0-beta.0",
+    "@storybook/preview-api": "7.0.0-beta.0",
+    "@storybook/theming": "7.0.0-beta.0",
+    "@storybook/types": "7.0.0-beta.0",
+    "fs-extra": "^9.0.1",
     "global": "^4.4.0",
-    "lodash": "^4.17.21",
     "remark-external-links": "^8.0.0",
     "remark-slug": "^6.0.0",
-    "ts-dedent": "^2.0.0",
-    "util-deprecate": "^1.0.2"
+    "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.10",
-    "@storybook/mdx2-csf": "^0.0.3",
-    "@types/util-deprecate": "^1.0.0"
+    "react": "^16.14.0",
+    "react-dom": "^16.8.0",
+    "typescript": "~4.9.3"
   },
   "peerDependencies": {
-    "@storybook/mdx2-csf": "^0.0.3",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
-  "peerDependenciesMeta": {
-    "@storybook/mdx2-csf": {
-      "optional": true
-    },
-    "react": {
-      "optional": true
-    },
-    "react-dom": {
-      "optional": true
-    }
-  },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d334cabd251cd0ed8b845a87707dc84f007d4074",
+  "bundler": {
+    "entries": [
+      "./src/index.ts",
+      "./src/preset.ts",
+      "./src/preview.ts",
+      "./src/shims/mdx-react-shim.ts"
+    ]
+  },
+  "gitHead": "2e4ddde6a0a291266d91fe6a5ecda767bf119e70",
   "storybook": {
     "displayName": "Docs",
     "icon": "https://user-images.githubusercontent.com/263385/101991672-48355c80-3c7c-11eb-82d9-95fa12438f64.png",

package/preset.js

@@ -1 +1 @@
-module.exports = require('./dist/cjs/preset');
+module.exports = require('./dist/preset');

package/preview.js

@@ -1 +1,2 @@
-export * from './dist/esm/preview';
+// eslint-disable-next-line import/export
+export * from './dist/preview';

package/web-components/README.md

@@ -39,6 +39,7 @@ Known analyzers that output `custom-elements.json` v1.0.0:
   - Supports Vanilla, LitElement, FASTElement, Stencil, Catalyst, Atomico
 
 Known analyzers that output older versions of `custom-elements.json`:
+
 - [web-component-analyzer](https://github.com/runem/web-component-analyzer)
   - Supports LitElement, Polymer, Vanilla, (Stencil)
 - [stenciljs](https://stenciljs.com/)

package/LICENSE

@@ -1,21 +0,0 @@
-The MIT License (MIT)
-
-Copyright (c) 2017 Kadira Inc. <hello@kadira.io>
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.

package/blocks.d.ts

@@ -1,2 +0,0 @@
-export { ColorPalette, ColorItem, IconGallery, IconItem, Typeset } from '@storybook/components';
-export * from './dist/types/blocks/index.d';

package/blocks.js

@@ -1,14 +0,0 @@
-import deprecate from 'util-deprecate';
-import dedent from 'ts-dedent';
-
-const warnBlocksImport = deprecate(
-  () => {},
-  dedent`
-    Importing from '@storybook/addon-docs/blocks' is deprecated, import directly from '@storybook/addon-docs' instead:
-    
-    https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-scoped-blocks-imports
-`
-);
-warnBlocksImport();
-
-export * from './dist/esm/blocks';

package/dist/cjs/blocks/Anchor.js

@@ -1,23 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.anchorBlockIdFromId = exports.Anchor = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const anchorBlockIdFromId = storyId => `anchor--${storyId}`;
-
-exports.anchorBlockIdFromId = anchorBlockIdFromId;
-
-const Anchor = ({
-  storyId,
-  children
-}) => /*#__PURE__*/_react.default.createElement("div", {
-  id: anchorBlockIdFromId(storyId)
-}, children);
-
-exports.Anchor = Anchor;