@storybook/addon-docs 7.0.0-beta.1 → 7.0.0-beta.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -4,13 +4,13 @@
4
4
 
5
5
  # Storybook Docs
6
6
 
7
- > 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.
7
+ > 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.
8
8
 
9
9
  Storybook Docs transforms your Storybook stories into world-class component documentation.
10
10
 
11
11
  **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.
12
12
 
13
- **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.
13
+ **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.
14
14
 
15
15
  Just like Storybook, Docs supports every major view layer including React, Vue, Angular, HTML, Web components, Svelte, and many more.
16
16
 
@@ -40,32 +40,30 @@ For more information on how it works, see the [`DocsPage` reference](https://git
40
40
 
41
41
  ## MDX
42
42
 
43
- `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.
43
+ `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.
44
44
 
45
45
  Here's an example file:
46
46
 
47
+ <!-- prettier-ignore-start -->
48
+
47
49
  ```md
48
- import { Meta, Story, Canvas } from '@storybook/addon-docs';
49
- import { Checkbox } from './Checkbox';
50
+ import { Meta, Story, Canvas } from '@storybook/blocks';
51
+ import * as CheckboxStories from './Checkbox.stories';
50
52
 
51
- <Meta title="MDX/Checkbox" component={Checkbox} />
53
+ <Meta title="MDX/Checkbox" of={CheckboxStories} />
52
54
 
53
55
  # Checkbox
54
56
 
55
- With `MDX` we can define a story for `Checkbox` right in the middle of our
57
+ With `MDX` we can include a story for `Checkbox` right in the middle of our
56
58
  markdown documentation.
57
59
 
58
60
  <Canvas>
59
- <Story name="all checkboxes">
60
- <form>
61
- <Checkbox id="Unchecked" label="Unchecked" />
62
- <Checkbox id="Checked" label="Checked" checked />
63
- <Checkbox appearance="secondary" id="second" label="Secondary" checked />
64
- </form>
65
- </Story>
61
+ <Story of={CheckboxStories.Unchecked} />
66
62
  </Canvas>
67
63
  ```
68
64
 
65
+ <!-- prettier-ignore-end -->
66
+
69
67
  And here's how that's rendered in Storybook:
70
68
 
71
69
  <center>
@@ -102,8 +100,13 @@ Then add the following to your `.storybook/main.js`:
102
100
 
103
101
  ```js
104
102
  module.exports = {
105
- stories: ['../src/**/*.stories.@(js|mdx)'],
106
- addons: ['@storybook/addon-docs'],
103
+ stories: [
104
+ '../src/**/*.mdx)', // 👈 Add this, to match your project's structure
105
+ '../src/**/*.stories.@(js|jsx|ts|tsx)',
106
+ ],
107
+ addons: [
108
+ '@storybook/addon-docs', // 👈 Also add this
109
+ ],
107
110
  };
108
111
  ```
109
112
 
@@ -140,8 +143,7 @@ module.exports = {
140
143
  {
141
144
  name: '@storybook/addon-docs',
142
145
  options: {
143
- configureJSX: true,
144
- babelOptions: {},
146
+ jsxOptions: {},
145
147
  csfPluginOptions: null,
146
148
  transcludeMarkdown: true,
147
149
  },
@@ -150,7 +152,7 @@ module.exports = {
150
152
  };
151
153
  ```
152
154
 
153
- 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`.
155
+ `jsxOptions` are options that will be passed to `@babel/preset-react` for `.md` and `.mdx` files.
154
156
 
155
157
  `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`.
156
158
 
@@ -1 +1 @@
1
- import{DocsRenderer,defaultComponents}from"./chunk-MA2MUXQN.mjs";import"./chunk-HXSBEJGO.mjs";export{DocsRenderer,defaultComponents};
1
+ import{DocsRenderer,defaultComponents}from"./chunk-MA2MUXQN.mjs";import"./chunk-R4NKYYJA.mjs";export{DocsRenderer,defaultComponents};
@@ -0,0 +1 @@
1
+ export * from '@storybook/blocks';
package/dist/blocks.js ADDED
@@ -0,0 +1 @@
1
+ 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 __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 blocks_exports={};module.exports=__toCommonJS(blocks_exports);var import_global=__toESM(require("global"),1),{LOGLEVEL,console}=import_global.default,levels={trace:1,debug:2,info:3,warn:4,error:5,silent:10},currentLogLevelString=LOGLEVEL,currentLogLevelNumber=levels[currentLogLevelString]||levels.info,logger={trace:(message,...rest)=>currentLogLevelNumber<=levels.trace&&console.trace(message,...rest),debug:(message,...rest)=>currentLogLevelNumber<=levels.debug&&console.debug(message,...rest),info:(message,...rest)=>currentLogLevelNumber<=levels.info&&console.info(message,...rest),warn:(message,...rest)=>currentLogLevelNumber<=levels.warn&&console.warn(message,...rest),error:(message,...rest)=>currentLogLevelNumber<=levels.error&&console.error(message,...rest),log:(message,...rest)=>currentLogLevelNumber<levels.silent&&console.log(message,...rest)},logged=new Set,once=type=>(message,...rest)=>{if(!logged.has(message))return logged.add(message),logger[type](message,...rest)};once.clear=()=>logged.clear();once.trace=once("trace");once.debug=once("debug");once.info=once("info");once.warn=once("warn");once.error=once("error");once.log=once("log");var deprecate=once("warn"),pretty=type=>(...args)=>{let argArray=[];if(args.length){let startTagRe=/<span\s+style=(['"])([^'"]*)\1\s*>/gi,endTagRe=/<\/span>/gi,reResultArray;for(argArray.push(args[0].replace(startTagRe,"%c").replace(endTagRe,"%c"));reResultArray=startTagRe.exec(args[0]);)argArray.push(reResultArray[2]),argArray.push("");for(let j=1;j<args.length;j++)argArray.push(args[j])}logger[type].apply(logger,argArray)};pretty.trace=pretty("trace");pretty.debug=pretty("debug");pretty.info=pretty("info");pretty.warn=pretty("warn");pretty.error=pretty("error");__reExport(blocks_exports,require("@storybook/blocks"),module.exports);deprecate("Import from '@storybook/addon-docs/blocks' is deprecated. Please import from '@storybook/blocks' instead.");
@@ -0,0 +1 @@
1
+ import"./chunk-R4NKYYJA.mjs";import global from"global";var{LOGLEVEL,console}=global,levels={trace:1,debug:2,info:3,warn:4,error:5,silent:10},currentLogLevelString=LOGLEVEL,currentLogLevelNumber=levels[currentLogLevelString]||levels.info,logger={trace:(message,...rest)=>currentLogLevelNumber<=levels.trace&&console.trace(message,...rest),debug:(message,...rest)=>currentLogLevelNumber<=levels.debug&&console.debug(message,...rest),info:(message,...rest)=>currentLogLevelNumber<=levels.info&&console.info(message,...rest),warn:(message,...rest)=>currentLogLevelNumber<=levels.warn&&console.warn(message,...rest),error:(message,...rest)=>currentLogLevelNumber<=levels.error&&console.error(message,...rest),log:(message,...rest)=>currentLogLevelNumber<levels.silent&&console.log(message,...rest)},logged=new Set,once=type=>(message,...rest)=>{if(!logged.has(message))return logged.add(message),logger[type](message,...rest)};once.clear=()=>logged.clear();once.trace=once("trace");once.debug=once("debug");once.info=once("info");once.warn=once("warn");once.error=once("error");once.log=once("log");var deprecate=once("warn"),pretty=type=>(...args)=>{let argArray=[];if(args.length){let startTagRe=/<span\s+style=(['"])([^'"]*)\1\s*>/gi,endTagRe=/<\/span>/gi,reResultArray;for(argArray.push(args[0].replace(startTagRe,"%c").replace(endTagRe,"%c"));reResultArray=startTagRe.exec(args[0]);)argArray.push(reResultArray[2]),argArray.push("");for(let j=1;j<args.length;j++)argArray.push(args[j])}logger[type].apply(logger,argArray)};pretty.trace=pretty("trace");pretty.debug=pretty("debug");pretty.info=pretty("info");pretty.warn=pretty("warn");pretty.error=pretty("error");export*from"@storybook/blocks";deprecate("Import from '@storybook/addon-docs/blocks' is deprecated. Please import from '@storybook/blocks' instead.");
@@ -0,0 +1 @@
1
+ var __require=(x=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(x,{get:(a,b)=>(typeof require<"u"?require:a)[b]}):x)(function(x){if(typeof require<"u")return require.apply(this,arguments);throw new Error('Dynamic require of "'+x+'" is not supported')});export{__require};
package/dist/index.js CHANGED
@@ -1 +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});
1
+ 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=__toESM(require("react-dom")),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})=>{import_react_dom.default.render(import_react.default.createElement(MDXProvider,{components},import_react.default.createElement(import_blocks.Docs,{key:Math.random(),context,docsParameter})),element,callback)})},this.unmount=element=>{import_react_dom.default.unmountComponentAtNode(element)}}};0&&(module.exports={DocsRenderer});
package/dist/index.mjs CHANGED
@@ -1 +1 @@
1
- import{DocsRenderer}from"./chunk-MA2MUXQN.mjs";import"./chunk-HXSBEJGO.mjs";export*from"@storybook/blocks";export{DocsRenderer};
1
+ import{DocsRenderer}from"./chunk-MA2MUXQN.mjs";import"./chunk-R4NKYYJA.mjs";export*from"@storybook/blocks";export{DocsRenderer};
package/dist/preset.js CHANGED
@@ -1,7 +1,13 @@
1
- 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`
1
+ 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,{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_dedent=require("ts-dedent"),import_csf_tools=require("@storybook/csf-tools");async function webpack(webpackConfig={},options){let{module:module2={}}=webpackConfig,{csfPluginOptions={},jsxOptions={},transcludeMarkdown=!1,sourceLoaderOptions=null,configureJsx,mdxBabelOptions}=options,mdxLoaderOptions=await options.presets.apply("mdxLoaderOptions",{skipCsf:!0,mdxCompileOptions:{providerImportSource:"@storybook/addon-docs/mdx-react-shim",remarkPlugins:[import_remark_slug.default,import_remark_external_links.default]},jsxOptions});if(sourceLoaderOptions)throw new Error(import_ts_dedent.dedent`
2
2
  Addon-docs no longer uses source-loader in 7.0.
3
3
 
4
4
  To update your configuration, please see migration instructions here:
5
5
 
6
6
  https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#dropped-source-loader--storiesof-static-snippets
7
- `);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});
7
+ `);if(mdxBabelOptions||configureJsx)throw new Error(import_ts_dedent.dedent`
8
+ Addon-docs no longer uses configureJsx or mdxBabelOptions in 7.0.
9
+
10
+ To update your configuration, please see migration instructions here:
11
+
12
+ https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#dropped-addon-docs-manual-babel-configuration
13
+ `);let mdxLoader=require.resolve("@storybook/mdx2-csf/loader"),rules=module2.rules||[];return transcludeMarkdown&&(rules=[...rules.filter(rule=>{var _a;return((_a=rule.test)==null?void 0:_a.toString())!=="/\\.md$/"}),{test:/\.md$/,use:[{loader:mdxLoader,options:mdxLoaderOptions}]}]),{...webpackConfig,plugins:[...webpackConfig.plugins||[],...csfPluginOptions?[require("@storybook/csf-plugin").webpack(csfPluginOptions)]:[]],module:{...module2,rules:[...rules,{test:/(stories|story)\.mdx$/,use:[{loader:mdxLoader,options:{...mdxLoaderOptions,skipCsf:!1}}]},{test:/\.mdx$/,exclude:/(stories|story)\.mdx$/,use:[{loader:mdxLoader,options:mdxLoaderOptions}]}]}}}var storyIndexers=indexers=>[{test:/(stories|story)\.mdx$/,indexer:async(fileName,opts)=>{let code=(await import_fs_extra.default.readFile(fileName,"utf-8")).toString(),{compile}=await import("@storybook/mdx2-csf");return code=await compile(code,{}),(0,import_csf_tools.loadCsf)(code,{...opts,fileName}).parse()}},...indexers||[]],docs=docsOptions=>({...docsOptions,enabled:!0,defaultName:"Docs",docsPage:!0}),webpackX=webpack,storyIndexersX=storyIndexers,docsX=docs;0&&(module.exports={docs,storyIndexers,webpack});
package/dist/preset.mjs CHANGED
@@ -1,7 +1,13 @@
1
- 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`
1
+ 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";async function webpack(webpackConfig={},options){let{module={}}=webpackConfig,{csfPluginOptions={},jsxOptions={},transcludeMarkdown=!1,sourceLoaderOptions=null,configureJsx,mdxBabelOptions}=options,mdxLoaderOptions=await options.presets.apply("mdxLoaderOptions",{skipCsf:!0,mdxCompileOptions:{providerImportSource:"@storybook/addon-docs/mdx-react-shim",remarkPlugins:[remarkSlug,remarkExternalLinks]},jsxOptions});if(sourceLoaderOptions)throw new Error(dedent`
2
2
  Addon-docs no longer uses source-loader in 7.0.
3
3
 
4
4
  To update your configuration, please see migration instructions here:
5
5
 
6
6
  https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#dropped-source-loader--storiesof-static-snippets
7
- `);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};
7
+ `);if(mdxBabelOptions||configureJsx)throw new Error(dedent`
8
+ Addon-docs no longer uses configureJsx or mdxBabelOptions in 7.0.
9
+
10
+ To update your configuration, please see migration instructions here:
11
+
12
+ https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#dropped-addon-docs-manual-babel-configuration
13
+ `);let mdxLoader=__require.resolve("@storybook/mdx2-csf/loader"),rules=module.rules||[];return transcludeMarkdown&&(rules=[...rules.filter(rule=>rule.test?.toString()!=="/\\.md$/"),{test:/\.md$/,use:[{loader:mdxLoader,options:mdxLoaderOptions}]}]),{...webpackConfig,plugins:[...webpackConfig.plugins||[],...csfPluginOptions?[__require("@storybook/csf-plugin").webpack(csfPluginOptions)]:[]],module:{...module,rules:[...rules,{test:/(stories|story)\.mdx$/,use:[{loader:mdxLoader,options:{...mdxLoaderOptions,skipCsf:!1}}]},{test:/\.mdx$/,exclude:/(stories|story)\.mdx$/,use:[{loader:mdxLoader,options:mdxLoaderOptions}]}]}}}var storyIndexers=indexers=>[{test:/(stories|story)\.mdx$/,indexer:async(fileName,opts)=>{let code=(await fs.readFile(fileName,"utf-8")).toString(),{compile}=await import("@storybook/mdx2-csf");return code=await compile(code,{}),loadCsf(code,{...opts,fileName}).parse()}},...indexers||[]],docs=docsOptions=>({...docsOptions,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.js CHANGED
@@ -1 +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});
1
+ 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,import_blocks,defaultComponents,DocsRenderer,init_DocsRenderer=__esm({"src/DocsRenderer.tsx"(){import_react=__toESM(require("react")),import_react_dom=__toESM(require("react-dom")),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})=>{import_react_dom.default.render(import_react.default.createElement(MDXProvider,{components},import_react.default.createElement(import_blocks.Docs,{key:Math.random(),context,docsParameter})),element,callback)})},this.unmount=element=>{import_react_dom.default.unmountComponentAtNode(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 CHANGED
@@ -1 +1 @@
1
- import"./chunk-HXSBEJGO.mjs";var parameters={docs:{renderer:async()=>{let{DocsRenderer}=await import("./DocsRenderer-FLOC7YSC.mjs");return new DocsRenderer}}};export{parameters};
1
+ import"./chunk-R4NKYYJA.mjs";var parameters={docs:{renderer:async()=>{let{DocsRenderer}=await import("./DocsRenderer-QMFTTPNP.mjs");return new DocsRenderer}}};export{parameters};
@@ -1 +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);
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 mdx_react_shim_exports={};module.exports=__toCommonJS(mdx_react_shim_exports);__reExport(mdx_react_shim_exports,require("@mdx-js/react"),module.exports);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@storybook/addon-docs",
3
- "version": "7.0.0-beta.1",
3
+ "version": "7.0.0-beta.11",
4
4
  "description": "Document component usage and properties in Markdown",
5
5
  "keywords": [
6
6
  "addon",
@@ -41,6 +41,11 @@
41
41
  "import": "./dist/preset.mjs",
42
42
  "types": "./dist/preset.d.ts"
43
43
  },
44
+ "./blocks": {
45
+ "require": "./dist/blocks.js",
46
+ "import": "./dist/blocks.mjs",
47
+ "types": "./dist/blocks.d.ts"
48
+ },
44
49
  "./dist/preview": {
45
50
  "require": "./dist/preview.js",
46
51
  "import": "./dist/preview.mjs",
@@ -99,16 +104,16 @@
99
104
  "@babel/plugin-transform-react-jsx": "^7.19.0",
100
105
  "@jest/transform": "^29.3.1",
101
106
  "@mdx-js/react": "^2.1.5",
102
- "@storybook/blocks": "7.0.0-beta.1",
103
- "@storybook/components": "7.0.0-beta.1",
104
- "@storybook/csf-plugin": "7.0.0-beta.1",
105
- "@storybook/csf-tools": "7.0.0-beta.1",
107
+ "@storybook/blocks": "7.0.0-beta.11",
108
+ "@storybook/components": "7.0.0-beta.11",
109
+ "@storybook/csf-plugin": "7.0.0-beta.11",
110
+ "@storybook/csf-tools": "7.0.0-beta.11",
106
111
  "@storybook/mdx2-csf": "next",
107
- "@storybook/node-logger": "7.0.0-beta.1",
108
- "@storybook/postinstall": "7.0.0-beta.1",
109
- "@storybook/preview-api": "7.0.0-beta.1",
110
- "@storybook/theming": "7.0.0-beta.1",
111
- "@storybook/types": "7.0.0-beta.1",
112
+ "@storybook/node-logger": "7.0.0-beta.11",
113
+ "@storybook/postinstall": "7.0.0-beta.11",
114
+ "@storybook/preview-api": "7.0.0-beta.11",
115
+ "@storybook/theming": "7.0.0-beta.11",
116
+ "@storybook/types": "7.0.0-beta.11",
112
117
  "fs-extra": "^9.0.1",
113
118
  "global": "^4.4.0",
114
119
  "remark-external-links": "^8.0.0",
@@ -132,10 +137,11 @@
132
137
  "./src/index.ts",
133
138
  "./src/preset.ts",
134
139
  "./src/preview.ts",
140
+ "./src/blocks.ts",
135
141
  "./src/shims/mdx-react-shim.ts"
136
142
  ]
137
143
  },
138
- "gitHead": "42c08678ac06d9c2c8e7a4c31a91e0a14bf5c2cd",
144
+ "gitHead": "f488007ad9e0ff9c4ade4837f584db87fa0d46eb",
139
145
  "storybook": {
140
146
  "displayName": "Docs",
141
147
  "icon": "https://user-images.githubusercontent.com/263385/101991672-48355c80-3c7c-11eb-82d9-95fa12438f64.png",
@@ -24,9 +24,7 @@ export default function transformer(file, api) {
24
24
  ((dependencies && dependencies['react-scripts']) ||
25
25
  (devDependencies && devDependencies['react-scripts']))
26
26
  ) {
27
- presetOptions = {
28
- configureJSX: true,
29
- };
27
+ presetOptions = {};
30
28
  }
31
29
 
32
30
  const j = api.jscodeshift;
@@ -1 +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};