@storybook/addon-docs 7.0.0-alpha.11 → 7.0.0-alpha.16

package/dist/cjs/DocsRenderer.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultComponents = exports.DocsRenderer = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+var _components = require("@storybook/components");
+
+var _blocks = require("@storybook/blocks");
+
+var _react2 = require("@mdx-js/react");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// TS doesn't like that we export a component with types that it doesn't know about (TS4203)
+const defaultComponents = Object.assign({}, _components.components, {
+  code: _blocks.CodeOrSourceMdx,
+  a: _blocks.AnchorMdx
+}, _blocks.HeadersMdx);
+exports.defaultComponents = defaultComponents;
+
+class DocsRenderer {
+  constructor() {
+    this.render = void 0;
+    this.unmount = void 0;
+
+    this.render = (context, docsParameter, element, callback) => {
+      // Use a random key to force the container to re-render each time we call `renderDocs`
+      //   TODO: do we still need this? It was needed for angular (legacy) inline rendering:
+      //   https://github.com/storybookjs/storybook/pull/16149
+      _reactDom.default.render( /*#__PURE__*/_react.default.createElement(_react2.MDXProvider, {
+        components: defaultComponents
+      }, /*#__PURE__*/_react.default.createElement(_blocks.Docs, {
+        key: Math.random(),
+        context: context,
+        docsParameter: docsParameter
+      })), element, callback);
+    };
+
+    this.unmount = element => {
+      _reactDom.default.unmountComponentAtNode(element);
+    };
+  }
+
+}
+
+exports.DocsRenderer = DocsRenderer;

package/dist/cjs/index.js

@@ -3,11 +3,21 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  DocsRenderer: true
+};
+Object.defineProperty(exports, "DocsRenderer", {
+  enumerable: true,
+  get: function () {
+    return _DocsRenderer.DocsRenderer;
+  }
+});
 
 var _blocks = require("./blocks");
 
 Object.keys(_blocks).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _blocks[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -15,4 +25,6 @@ Object.keys(_blocks).forEach(function (key) {
       return _blocks[key];
     }
   });
-});
+});
+
+var _DocsRenderer = require("./DocsRenderer");

package/dist/cjs/preset.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.storyIndexers = void 0;
+exports.storyIndexers = exports.docs = void 0;
 exports.webpack = webpack;
 
 var _fsExtra = _interopRequireDefault(require("fs-extra"));
@@ -64,6 +64,7 @@ async function webpack(webpackConfig = {}, options) {
     transcludeMarkdown = false
   } = options;
   const mdxLoaderOptions = {
+    // whether to skip storybook files, useful for docs only mdx or md files
     skipCsf: true,
     remarkPlugins: [_remarkSlug.default, _remarkExternalLinks.default]
   };
@@ -116,7 +117,10 @@ async function webpack(webpackConfig = {}, options) {
             configureJSX
           })
         }, {
-          loader: mdxLoader
+          loader: mdxLoader,
+          options: Object.assign({}, mdxLoaderOptions, {
+            skipCsf: false
+          })
         }]
       }, {
         test: /\.mdx$/,
@@ -155,8 +159,19 @@ const storyIndexers = async indexers => {
 
   return [{
     test: /(stories|story)\.mdx$/,
-    indexer: mdxIndexer
+    indexer: mdxIndexer,
+    addDocsTemplate: true
   }, ...(indexers || [])];
 };
 
-exports.storyIndexers = storyIndexers;
+exports.storyIndexers = storyIndexers;
+
+const docs = docsOptions => {
+  return Object.assign({}, docsOptions, {
+    enabled: true,
+    defaultName: 'Docs',
+    docsPage: true
+  });
+};
+
+exports.docs = docs;

package/dist/cjs/preview.js

@@ -14,7 +14,7 @@ const parameters = {
     renderer: async () => {
       const {
         DocsRenderer
-      } = await Promise.resolve().then(() => _interopRequireWildcard(require('./blocks')));
+      } = await Promise.resolve().then(() => _interopRequireWildcard(require('./DocsRenderer')));
       return new DocsRenderer();
     }
   }

package/dist/esm/DocsRenderer.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { components as htmlComponents } from '@storybook/components';
+import { Docs, CodeOrSourceMdx, AnchorMdx, HeadersMdx } from '@storybook/blocks';
+import { MDXProvider } from '@mdx-js/react'; // TS doesn't like that we export a component with types that it doesn't know about (TS4203)
+
+export const defaultComponents = Object.assign({}, htmlComponents, {
+  code: CodeOrSourceMdx,
+  a: AnchorMdx
+}, HeadersMdx);
+export class DocsRenderer {
+  constructor() {
+    this.render = void 0;
+    this.unmount = void 0;
+
+    this.render = (context, docsParameter, element, callback) => {
+      // Use a random key to force the container to re-render each time we call `renderDocs`
+      //   TODO: do we still need this? It was needed for angular (legacy) inline rendering:
+      //   https://github.com/storybookjs/storybook/pull/16149
+      ReactDOM.render( /*#__PURE__*/React.createElement(MDXProvider, {
+        components: defaultComponents
+      }, /*#__PURE__*/React.createElement(Docs, {
+        key: Math.random(),
+        context: context,
+        docsParameter: docsParameter
+      })), element, callback);
+    };
+
+    this.unmount = element => {
+      ReactDOM.unmountComponentAtNode(element);
+    };
+  }
+
+}

package/dist/esm/index.js

@@ -1 +1,2 @@
-export * from './blocks';
+export * from './blocks';
+export { DocsRenderer } from './DocsRenderer';

package/dist/esm/preset.js

@@ -45,6 +45,7 @@ export async function webpack(webpackConfig = {}, options) {
     transcludeMarkdown = false
   } = options;
   const mdxLoaderOptions = {
+    // whether to skip storybook files, useful for docs only mdx or md files
     skipCsf: true,
     remarkPlugins: [remarkSlug, remarkExternalLinks]
   };
@@ -91,7 +92,10 @@ export async function webpack(webpackConfig = {}, options) {
             configureJSX
           })
         }, {
-          loader: mdxLoader
+          loader: mdxLoader,
+          options: Object.assign({}, mdxLoaderOptions, {
+            skipCsf: false
+          })
         }]
       }, {
         test: /\.mdx$/,
@@ -127,6 +131,14 @@ export const storyIndexers = async indexers => {
 
   return [{
     test: /(stories|story)\.mdx$/,
-    indexer: mdxIndexer
+    indexer: mdxIndexer,
+    addDocsTemplate: true
   }, ...(indexers || [])];
+};
+export const docs = docsOptions => {
+  return Object.assign({}, docsOptions, {
+    enabled: true,
+    defaultName: 'Docs',
+    docsPage: true
+  });
 };

package/dist/esm/preview.js

@@ -3,7 +3,7 @@ export const parameters = {
     renderer: async () => {
       const {
         DocsRenderer
-      } = await import('./blocks');
+      } = await import('./DocsRenderer');
       return new DocsRenderer();
     }
   }

package/dist/types/DocsRenderer.d.ts

@@ -0,0 +1,8 @@
+import { AnyFramework } from '@storybook/csf';
+import { DocsRenderFunction } from '@storybook/preview-web';
+export declare const defaultComponents: Record<string, any>;
+export declare class DocsRenderer<TFramework extends AnyFramework> {
+    render: DocsRenderFunction<TFramework>;
+    unmount: (element: HTMLElement) => void;
+    constructor();
+}

package/dist/types/index.d.ts

@@ -1 +1,2 @@
 export * from './blocks';
+export { DocsRenderer } from './DocsRenderer';

package/dist/types/preset.d.ts

@@ -1,4 +1,4 @@
-import type { Options, StoryIndexer } from '@storybook/core-common';
+import type { DocsOptions, Options, StoryIndexer } from '@storybook/core-common';
 declare type BabelParams = {
     babelOptions?: any;
     mdxBabelOptions?: any;
@@ -8,5 +8,10 @@ export declare function webpack(webpackConfig: any, options: Options & BabelPara
     sourceLoaderOptions: any;
     transcludeMarkdown: boolean;
 }): Promise<any>;
-export declare const storyIndexers: (indexers?: StoryIndexer[]) => Promise<StoryIndexer[]>;
+export declare const storyIndexers: (indexers: StoryIndexer[] | null) => Promise<StoryIndexer[]>;
+export declare const docs: (docsOptions: DocsOptions) => {
+    enabled: boolean;
+    defaultName: string;
+    docsPage: boolean;
+};
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-docs",
-  "version": "7.0.0-alpha.11",
+  "version": "7.0.0-alpha.16",
   "description": "Document component usage and properties in Markdown",
   "keywords": [
     "addon",
@@ -53,25 +53,25 @@
     "@babel/preset-env": "^7.12.11",
     "@jest/transform": "^26.6.2",
     "@mdx-js/react": "^1.6.22",
-    "@storybook/addons": "7.0.0-alpha.11",
-    "@storybook/api": "7.0.0-alpha.11",
-    "@storybook/blocks": "7.0.0-alpha.11",
-    "@storybook/components": "7.0.0-alpha.11",
-    "@storybook/core-common": "7.0.0-alpha.11",
-    "@storybook/core-events": "7.0.0-alpha.11",
+    "@storybook/addons": "7.0.0-alpha.16",
+    "@storybook/api": "7.0.0-alpha.16",
+    "@storybook/blocks": "7.0.0-alpha.16",
+    "@storybook/components": "7.0.0-alpha.16",
+    "@storybook/core-common": "7.0.0-alpha.16",
+    "@storybook/core-events": "7.0.0-alpha.16",
     "@storybook/csf": "0.0.2--canary.4566f4d.1",
-    "@storybook/csf-tools": "7.0.0-alpha.11",
-    "@storybook/docs-tools": "7.0.0-alpha.11",
-    "@storybook/mdx1-csf": "^0.0.1",
-    "@storybook/node-logger": "7.0.0-alpha.11",
-    "@storybook/postinstall": "7.0.0-alpha.11",
-    "@storybook/preview-web": "7.0.0-alpha.11",
-    "@storybook/source-loader": "7.0.0-alpha.11",
-    "@storybook/store": "7.0.0-alpha.11",
-    "@storybook/theming": "7.0.0-alpha.11",
+    "@storybook/csf-tools": "7.0.0-alpha.16",
+    "@storybook/docs-tools": "7.0.0-alpha.16",
+    "@storybook/mdx1-csf": "0.0.5-canary.13.9ce928a.0",
+    "@storybook/node-logger": "7.0.0-alpha.16",
+    "@storybook/postinstall": "7.0.0-alpha.16",
+    "@storybook/preview-web": "7.0.0-alpha.16",
+    "@storybook/source-loader": "7.0.0-alpha.16",
+    "@storybook/store": "7.0.0-alpha.16",
+    "@storybook/theming": "7.0.0-alpha.16",
     "babel-loader": "^8.2.5",
     "core-js": "^3.8.2",
-    "fast-deep-equal": "^3.1.3",
+    "dequal": "^2.0.2",
     "global": "^4.4.0",
     "lodash": "^4.17.21",
     "remark-external-links": "^8.0.0",
@@ -81,12 +81,12 @@
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",
-    "@storybook/mdx2-csf": "^0.0.3",
+    "@storybook/mdx2-csf": "0.0.4-canary.14.04ffbe8.0",
     "@types/util-deprecate": "^1.0.0",
     "typescript": "~4.6.3"
   },
   "peerDependencies": {
-    "@storybook/mdx2-csf": "^0.0.3",
+    "@storybook/mdx2-csf": "0.0.4-canary.14.04ffbe8.0",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
@@ -104,7 +104,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "688d338903e84a7e83cb104472e868e734399f65",
+  "gitHead": "df30e7db2b251418af106345e5722477f057ec36",
   "storybook": {
     "displayName": "Docs",
     "icon": "https://user-images.githubusercontent.com/263385/101991672-48355c80-3c7c-11eb-82d9-95fa12438f64.png",

package/dist/cjs/manager.js

@@ -1,20 +0,0 @@
-"use strict";
-
-var _addons = require("@storybook/addons");
-
-var _shared = require("./shared");
-
-_addons.addons.register(_shared.ADDON_ID, () => {
-  _addons.addons.add(_shared.PANEL_ID, {
-    type: _addons.types.TAB,
-    title: 'Docs',
-    route: ({
-      storyId,
-      refId
-    }) => refId ? `/docs/${refId}_${storyId}` : `/docs/${storyId}`,
-    match: ({
-      viewMode
-    }) => viewMode === 'docs',
-    render: () => null
-  });
-});

package/dist/esm/manager.js

@@ -1,16 +0,0 @@
-import { addons, types } from '@storybook/addons';
-import { ADDON_ID, PANEL_ID } from './shared';
-addons.register(ADDON_ID, () => {
-  addons.add(PANEL_ID, {
-    type: types.TAB,
-    title: 'Docs',
-    route: ({
-      storyId,
-      refId
-    }) => refId ? `/docs/${refId}_${storyId}` : `/docs/${storyId}`,
-    match: ({
-      viewMode
-    }) => viewMode === 'docs',
-    render: () => null
-  });
-});

package/dist/types/manager.d.ts

@@ -1 +0,0 @@
-export {};

package/manager.js

@@ -1 +0,0 @@
-import './dist/esm/manager';

package/register.js

@@ -1,6 +0,0 @@
-import { once } from '@storybook/client-logger';
-import './manager';
-
-once.warn(
-  'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs'
-);