@storybook/addon-docs 8.0.0-alpha.0 → 8.0.0-alpha.10

package/dist/preview.js

@@ -1 +1 @@
-"use strict";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,ErrorBoundary,DocsRenderer,init_DocsRenderer=__esm({"src/DocsRenderer.tsx"(){"use strict";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},ErrorBoundary=class extends import_react.Component{constructor(){super(...arguments);this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}componentDidCatch(err){let{showException}=this.props;showException(err)}render(){let{hasError}=this.state,{children}=this.props;return hasError?null:import_react.default.createElement(import_react.default.Fragment,null,children)}},DocsRenderer=class{constructor(){this.render=async(context,docsParameter,element)=>{let components={...defaultComponents,...docsParameter==null?void 0:docsParameter.components},TDocs=import_blocks.Docs;return new Promise((resolve,reject)=>{import("@mdx-js/react").then(({MDXProvider})=>(0,import_react_dom_shim.renderElement)(import_react.default.createElement(ErrorBoundary,{showException:reject,key:Math.random()},import_react.default.createElement(MDXProvider,{components},import_react.default.createElement(TDocs,{context,docsParameter}))),element)).then(()=>resolve())})},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});
+"use strict";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,ErrorBoundary,DocsRenderer,init_DocsRenderer=__esm({"src/DocsRenderer.tsx"(){"use strict";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},ErrorBoundary=class extends import_react.Component{constructor(){super(...arguments);this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}componentDidCatch(err){let{showException}=this.props;showException(err)}render(){let{hasError}=this.state,{children}=this.props;return hasError?null:import_react.default.createElement(import_react.default.Fragment,null,children)}},DocsRenderer=class{constructor(){this.render=async(context,docsParameter,element)=>{let components={...defaultComponents,...docsParameter?.components},TDocs=import_blocks.Docs;return new Promise((resolve,reject)=>{import("@mdx-js/react").then(({MDXProvider})=>(0,import_react_dom_shim.renderElement)(import_react.default.createElement(ErrorBoundary,{showException:reject,key:Math.random()},import_react.default.createElement(MDXProvider,{components},import_react.default.createElement(TDocs,{context,docsParameter}))),element)).then(()=>resolve())})},this.unmount=element=>{(0,import_react_dom_shim.unmountElement)(element)}}}}});var preview_exports={};__export(preview_exports,{parameters:()=>parameters});module.exports=__toCommonJS(preview_exports);var import_global=require("@storybook/global"),excludeTags=Object.entries(import_global.global.TAGS_OPTIONS??{}).reduce((acc,entry)=>{let[tag,option]=entry;return option.excludeFromDocsStories&&(acc[tag]=!0),acc},{}),parameters={docs:{renderer:async()=>{let{DocsRenderer:DocsRenderer2}=await Promise.resolve().then(()=>(init_DocsRenderer(),DocsRenderer_exports));return new DocsRenderer2},stories:{filter:story=>(story.tags||[]).filter(tag=>excludeTags[tag]).length===0&&!story.parameters.docs?.disable}}};0&&(module.exports={parameters});

package/dist/preview.mjs

@@ -1,3 +1,6 @@
-var parameters={docs:{renderer:async()=>{let{DocsRenderer}=await import('./DocsRenderer-NNNQARDV.mjs');return new DocsRenderer}}};
+import './chunk-FG2YIYKM.mjs';
+import { global } from '@storybook/global';
+
+var excludeTags=Object.entries(global.TAGS_OPTIONS??{}).reduce((acc,entry)=>{let[tag,option]=entry;return option.excludeFromDocsStories&&(acc[tag]=!0),acc},{}),parameters={docs:{renderer:async()=>{let{DocsRenderer}=await import('./DocsRenderer-56ZJCE2Q.mjs');return new DocsRenderer},stories:{filter:story=>(story.tags||[]).filter(tag=>excludeTags[tag]).length===0&&!story.parameters.docs?.disable}}};
 
 export { parameters };

package/ember/README.md

@@ -51,7 +51,7 @@ Next, add the following to your `.storybook/preview.js` to load the generated js
 
 ```js
 import { setJSONDoc } from '@storybook/addon-docs/ember';
-import docJson from '../storybook-docgen/index.json';
+import docJson from '../dist/storybook-docgen/index.json';
 setJSONDoc(docJson);
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-docs",
-  "version": "8.0.0-alpha.0",
+  "version": "8.0.0-alpha.10",
   "description": "Document component usage and properties in Markdown",
   "keywords": [
     "addon",
@@ -38,7 +38,8 @@
     },
     "./preset": {
       "types": "./dist/preset.d.ts",
-      "require": "./dist/preset.js"
+      "require": "./dist/preset.js",
+      "import": "./dist/preset.js"
     },
     "./blocks": {
       "types": "./dist/blocks.d.ts",
@@ -64,13 +65,13 @@
       "require": "./dist/shims/mdx-react-shim.js",
       "import": "./dist/shims/mdx-react-shim.mjs"
     },
+    "./mdx-loader": "./dist/mdx-loader.js",
     "./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",
@@ -83,7 +84,6 @@
     "ember/**/*",
     "html/**/*",
     "svelte/**/*",
-    "postinstall/**/*",
     "react/**/*",
     "vue/**/*",
     "web-components/**/*",
@@ -98,37 +98,33 @@
     "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@jest/transform": "^29.3.1",
-    "@mdx-js/react": "^2.1.5",
-    "@storybook/blocks": "8.0.0-alpha.0",
-    "@storybook/client-logger": "8.0.0-alpha.0",
-    "@storybook/components": "8.0.0-alpha.0",
-    "@storybook/csf-plugin": "8.0.0-alpha.0",
-    "@storybook/csf-tools": "8.0.0-alpha.0",
+    "@babel/core": "^7.12.3",
+    "@mdx-js/react": "^3.0.0",
+    "@storybook/blocks": "8.0.0-alpha.10",
+    "@storybook/client-logger": "8.0.0-alpha.10",
+    "@storybook/components": "8.0.0-alpha.10",
+    "@storybook/csf-plugin": "8.0.0-alpha.10",
+    "@storybook/csf-tools": "8.0.0-alpha.10",
     "@storybook/global": "^5.0.0",
-    "@storybook/mdx2-csf": "^1.0.0",
-    "@storybook/node-logger": "8.0.0-alpha.0",
-    "@storybook/postinstall": "8.0.0-alpha.0",
-    "@storybook/preview-api": "8.0.0-alpha.0",
-    "@storybook/react-dom-shim": "8.0.0-alpha.0",
-    "@storybook/theming": "8.0.0-alpha.0",
-    "@storybook/types": "8.0.0-alpha.0",
+    "@storybook/node-logger": "8.0.0-alpha.10",
+    "@storybook/preview-api": "8.0.0-alpha.10",
+    "@storybook/react-dom-shim": "8.0.0-alpha.10",
+    "@storybook/theming": "8.0.0-alpha.10",
+    "@storybook/types": "8.0.0-alpha.10",
     "fs-extra": "^11.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "remark-external-links": "^8.0.0",
     "remark-slug": "^6.0.0",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
+    "@mdx-js/mdx": "^3.0.0",
     "@rollup/pluginutils": "^5.0.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "@storybook/test": "8.0.0-alpha.10",
     "typescript": "^5.3.2",
     "vite": "^4.0.4"
   },
-  "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
-  },
   "publishConfig": {
     "access": "public"
   },
@@ -138,10 +134,8 @@
       "./src/preset.ts",
       "./src/preview.ts",
       "./src/blocks.ts",
-      "./src/shims/mdx-react-shim.ts"
-    ],
-    "externals": [
-      "@storybook/mdx1-csf"
+      "./src/shims/mdx-react-shim.ts",
+      "./src/mdx-loader.ts"
     ]
   },
   "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17",

package/react/README.md

@@ -15,7 +15,7 @@ To learn more about Storybook Docs, read the [general documentation](../README.m
 - [Props tables](#props-tables)
 - [MDX](#mdx)
 - [Inline stories](#inline-stories)
-- [TypeScript props with `react-docgen`](#typescript-props-with-react-docgen)
+- [TypeScript props with `react-docgen-typescript`](#typescript-props-with-react-docgen-typescript)
 - [More resources](#more-resources)
 
 ## Installation
@@ -108,17 +108,17 @@ To do so for all stories, update `.storybook/preview.js`:
 export const parameters = { docs: { story: { inline: false } } };
 ```
 
-## TypeScript props with `react-docgen`
+## TypeScript props with `react-docgen-typescript`
 
-If you're using TypeScript, there are two different options for generating props: `react-docgen-typescript` (default) or `react-docgen`.
+If you're using TypeScript, there are two different options for generating props: `react-docgen` (default) or `react-docgen-typescript`.
 
 You can add the following lines to your `.storybook/main.js` to switch between the two (or disable docgen):
 
 ```js
 export default {
   typescript: {
-    // also valid 'react-docgen-typescript' | false
-    reactDocgen: 'react-docgen',
+    // also valid 'react-docgen' | false
+    reactDocgen: 'react-docgen-typescript',
   },
 };
 ```
@@ -129,7 +129,7 @@ Neither option is perfect, so here's everything you should know if you're thinki
 | --------------- | ------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
 | **Features**    | **Great**. The analysis produces great results which gives the best props table experience.                               | **OK**. React-docgen produces basic results that are fine for most use cases.                         |
 | **Performance** | **Slow**. It's doing a lot more work to produce those results, and may also have an inefficient implementation.           | **Blazing fast**. Adding it to your project increases build time negligibly.                          |
-| **Bugs**        | **Many**. There are a lot of corner cases that are not handled properly, and are annoying for developers.                 | **Few**. But there's a dealbreaker, which is lack for imported types (see below).                     |
+| **Bugs**        | **Some**. There are corner cases that are not handled properly, and are annoying for developers.                          | **Some**. There are corner cases that are not handled properly, and are annoying for developers.      |
 | **SB docs**     | **Good**. Our prop tables have supported `react-docgen-typescript` results from the beginning, so it's relatively stable. | **OK**. There are some obvious improvements to fully support `react-docgen`, and they're coming soon. |
 
 **Performance** is a common question, so here are build times from a random project to quantify. Your mileage may vary:
@@ -140,34 +140,6 @@ Neither option is perfect, so here's everything you should know if you're thinki
 | react-docgen            | 29s        |
 | none                    | 28s        |
 
-The biggest limitation of `react-docgen` is lack of support for imported types. What that means is that when a component uses a type defined in another file or package, `react-docgen` is unable to extract props information for that type.
-
-```tsx
-import React, { FC } from 'react';
-import SomeType from './someFile';
-
-type NewType = SomeType & { foo: string };
-const MyComponent: FC<NewType> = ...
-```
-
-So in the previous example, `SomeType` would simply be ignored! There's an [open PR for this in the `react-docgen` repo](https://github.com/reactjs/react-docgen/pull/352) which you can upvote if it affects you.
-
-Another common pitfall when switching to `react-docgen` is [lack of support for `React.FC`](https://github.com/reactjs/react-docgen/issues/387). This means that the following common pattern **DOESN'T WORK**:
-
-```tsx
-import React, { FC } from 'react';
-interface IProps { ... };
-const MyComponent: FC<IProps> = ({ ... }) => ...
-```
-
-Fortunately, the following workaround works:
-
-```tsx
-const MyComponent: FC<IProps> = ({ ... }: IProps) => ...
-```
-
-Please upvote [the issue](https://github.com/reactjs/react-docgen/issues/387) if this is affecting your productivity, or better yet, submit a fix!
-
 ## More resources
 
 Want to learn more? Here are some more articles on Storybook Docs:

package/jest-transform-mdx.js

@@ -1,22 +0,0 @@
-const path = require('path');
-const { ScriptTransformer } = require('@jest/transform');
-const { dedent } = require('ts-dedent');
-
-const { compile } = require('@storybook/mdx2-csf');
-
-module.exports = {
-  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'
-      ${code}
-    `;
-
-    const extension = path.extname(filename);
-    const jsFileName = `${filename.slice(0, -extension.length)}.js`;
-
-    return new ScriptTransformer(config).transformSource(jsFileName, result, instrument);
-  },
-};

package/jest.config.js

@@ -1,7 +0,0 @@
-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/postinstall/presets.js

@@ -1,36 +0,0 @@
-import fs from 'fs';
-import { presetsAddPreset, getFrameworks } from '@storybook/postinstall';
-import { logger } from '@storybook/node-logger';
-
-export default function transformer(file, api) {
-  const packageJson = JSON.parse(fs.readFileSync('./package.json'));
-  const frameworks = getFrameworks(packageJson);
-
-  let err = null;
-  let framework = null;
-  let presetOptions = null;
-  if (frameworks.length !== 1) {
-    err = `${frameworks.length === 0 ? 'No' : 'Multiple'} frameworks found: ${frameworks}`;
-    logger.error(`${err}, please configure '@storybook/addon-docs' manually.`);
-    return file.source;
-  }
-
-  // eslint-disable-next-line prefer-destructuring
-  framework = frameworks[0];
-
-  const { dependencies, devDependencies } = packageJson;
-  if (
-    framework === 'react' &&
-    ((dependencies && dependencies['react-scripts']) ||
-      (devDependencies && devDependencies['react-scripts']))
-  ) {
-    presetOptions = {};
-  }
-
-  const j = api.jscodeshift;
-  const root = j(file.source);
-
-  presetsAddPreset(`@storybook/addon-docs/preset`, presetOptions, { root, api });
-
-  return root.toSource({ quote: 'single' });
-}

package/template/stories/stories-mdx/csf-in-mdx.non-stories.js

@@ -1,19 +0,0 @@
-// NOTE: commented out default since these stories are re-exported
-// in the primary file './csf-docs-with-mdx-docs.stories.mdx'
-//
-// export default {
-//   title: 'Addons/Docs/csf-with-mdx-docs',
-//   component: Button,
-// };
-
-export const Primary = {
-  args: { label: 'Primary' },
-};
-
-export const Secondary = {
-  args: { label: 'Secondary' },
-};
-
-export const ImplicitName = {
-  args: { label: 'Implicit Name' },
-};