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

package/dist/cjs/blocks/utils.js

@@ -1,40 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getComponentName = void 0;
-exports.scrollToElement = scrollToElement;
-
-/* eslint-disable no-underscore-dangle */
-const titleCase = str => str.split('-').map(part => part.charAt(0).toUpperCase() + part.slice(1)).join('');
-
-const getComponentName = component => {
-  if (!component) {
-    return undefined;
-  }
-
-  if (typeof component === 'string') {
-    if (component.includes('-')) {
-      return titleCase(component);
-    }
-
-    return component;
-  }
-
-  if (component.__docgenInfo && component.__docgenInfo.displayName) {
-    return component.__docgenInfo.displayName;
-  }
-
-  return component.name;
-};
-
-exports.getComponentName = getComponentName;
-
-function scrollToElement(element, block = 'start') {
-  element.scrollIntoView({
-    behavior: 'smooth',
-    block,
-    inline: 'nearest'
-  });
-}

package/dist/cjs/index.js

@@ -1,18 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _blocks = require("./blocks");
-
-Object.keys(_blocks).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _blocks[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _blocks[key];
-    }
-  });
-});

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/cjs/preset.js

@@ -1,154 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.storyIndexers = void 0;
-exports.webpack = webpack;
-
-var _fsExtra = _interopRequireDefault(require("fs-extra"));
-
-var _remarkSlug = _interopRequireDefault(require("remark-slug"));
-
-var _remarkExternalLinks = _interopRequireDefault(require("remark-external-links"));
-
-var _global = _interopRequireDefault(require("global"));
-
-var _nodeLogger = require("@storybook/node-logger");
-
-var _csfTools = require("@storybook/csf-tools");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function createBabelOptions({
-  babelOptions,
-  mdxBabelOptions,
-  configureJSX
-}) {
-  const babelPlugins = mdxBabelOptions?.plugins || babelOptions?.plugins || [];
-  const jsxPlugin = [require.resolve('@babel/plugin-transform-react-jsx'), {
-    pragma: 'React.createElement',
-    pragmaFrag: 'React.Fragment'
-  }];
-  const plugins = configureJSX ? [...babelPlugins, jsxPlugin] : babelPlugins;
-  return Object.assign({
-    // don't use the root babelrc by default (users can override this in mdxBabelOptions)
-    babelrc: false,
-    configFile: false
-  }, babelOptions, mdxBabelOptions, {
-    plugins
-  });
-}
-
-async function webpack(webpackConfig = {}, options) {
-  const resolvedBabelLoader = require.resolve('babel-loader');
-
-  const {
-    module = {}
-  } = webpackConfig; // it will reuse babel options that are already in use in storybook
-  // also, these babel options are chained with other presets.
-
-  const {
-    babelOptions,
-    mdxBabelOptions,
-    configureJSX = true,
-    sourceLoaderOptions = {
-      injectStoryParameters: true
-    },
-    transcludeMarkdown = false
-  } = options;
-  const mdxLoaderOptions = {
-    skipCsf: true,
-    remarkPlugins: [_remarkSlug.default, _remarkExternalLinks.default]
-  };
-  const mdxVersion = _global.default.FEATURES?.previewMdx2 ? 'MDX2' : 'MDX1';
-
-  _nodeLogger.logger.info(`Addon-docs: using ${mdxVersion}`);
-
-  const mdxLoader = _global.default.FEATURES?.previewMdx2 ? require.resolve('@storybook/mdx2-csf/loader') : require.resolve('@storybook/mdx1-csf/loader'); // set `sourceLoaderOptions` to `null` to disable for manual configuration
-
-  const sourceLoader = sourceLoaderOptions ? [{
-    test: /\.(stories|story)\.[tj]sx?$/,
-    loader: require.resolve('@storybook/source-loader'),
-    options: Object.assign({}, sourceLoaderOptions, {
-      inspectLocalDependencies: true
-    }),
-    enforce: 'pre'
-  }] : [];
-  let rules = module.rules || [];
-
-  if (transcludeMarkdown) {
-    rules = [...rules.filter(rule => rule.test?.toString() !== '/\\.md$/'), {
-      test: /\.md$/,
-      use: [{
-        loader: resolvedBabelLoader,
-        options: createBabelOptions({
-          babelOptions,
-          mdxBabelOptions,
-          configureJSX
-        })
-      }, {
-        loader: mdxLoader,
-        options: mdxLoaderOptions
-      }]
-    }];
-  }
-
-  const result = Object.assign({}, webpackConfig, {
-    module: Object.assign({}, module, {
-      rules: [...rules, {
-        test: /(stories|story)\.mdx$/,
-        use: [{
-          loader: resolvedBabelLoader,
-          options: createBabelOptions({
-            babelOptions,
-            mdxBabelOptions,
-            configureJSX
-          })
-        }, {
-          loader: mdxLoader
-        }]
-      }, {
-        test: /\.mdx$/,
-        exclude: /(stories|story)\.mdx$/,
-        use: [{
-          loader: resolvedBabelLoader,
-          options: createBabelOptions({
-            babelOptions,
-            mdxBabelOptions,
-            configureJSX
-          })
-        }, {
-          loader: mdxLoader,
-          options: mdxLoaderOptions
-        }]
-      }, ...sourceLoader]
-    })
-  });
-  return result;
-}
-
-const storyIndexers = async indexers => {
-  const mdxIndexer = async (fileName, opts) => {
-    let code = (await _fsExtra.default.readFile(fileName, 'utf-8')).toString(); // @ts-ignore
-
-    const {
-      compile
-    } = _global.default.FEATURES?.previewMdx2 ? await Promise.resolve().then(() => _interopRequireWildcard(require('@storybook/mdx2-csf'))) : await Promise.resolve().then(() => _interopRequireWildcard(require('@storybook/mdx1-csf')));
-    code = await compile(code, {});
-    return (0, _csfTools.loadCsf)(code, Object.assign({}, opts, {
-      fileName
-    })).parse();
-  };
-
-  return [{
-    test: /(stories|story)\.mdx$/,
-    indexer: mdxIndexer
-  }, ...(indexers || [])];
-};
-
-exports.storyIndexers = storyIndexers;

package/dist/cjs/preview.js

@@ -1,22 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.parameters = void 0;
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-const parameters = {
-  docs: {
-    renderer: async () => {
-      const {
-        DocsRenderer
-      } = await Promise.resolve().then(() => _interopRequireWildcard(require('./blocks/DocsRenderer')));
-      return new DocsRenderer();
-    }
-  }
-};
-exports.parameters = parameters;

package/dist/cjs/shared.js

@@ -1,22 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.SourceType = exports.SNIPPET_RENDERED = exports.PARAM_KEY = exports.PANEL_ID = exports.ADDON_ID = void 0;
-const ADDON_ID = 'storybook/docs';
-exports.ADDON_ID = ADDON_ID;
-const PANEL_ID = `${ADDON_ID}/panel`;
-exports.PANEL_ID = PANEL_ID;
-const PARAM_KEY = `docs`;
-exports.PARAM_KEY = PARAM_KEY;
-const SNIPPET_RENDERED = `${ADDON_ID}/snippet-rendered`;
-exports.SNIPPET_RENDERED = SNIPPET_RENDERED;
-let SourceType;
-exports.SourceType = SourceType;
-
-(function (SourceType) {
-  SourceType["AUTO"] = "auto";
-  SourceType["CODE"] = "code";
-  SourceType["DYNAMIC"] = "dynamic";
-})(SourceType || (exports.SourceType = SourceType = {}));

package/dist/esm/blocks/Anchor.js

@@ -1,8 +0,0 @@
-import React from 'react';
-export const anchorBlockIdFromId = storyId => `anchor--${storyId}`;
-export const Anchor = ({
-  storyId,
-  children
-}) => /*#__PURE__*/React.createElement("div", {
-  id: anchorBlockIdFromId(storyId)
-}, children);

package/dist/esm/blocks/ArgsTable.js

@@ -1,292 +0,0 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-import React, { useContext, useEffect, useState, useCallback } from 'react';
-import mapValues from 'lodash/mapValues';
-import { ArgsTable as PureArgsTable, ArgsTableError, TabbedArgsTable } from '@storybook/components';
-import { addons } from '@storybook/addons';
-import { filterArgTypes } from '@storybook/store';
-import Events from '@storybook/core-events';
-import { DocsContext } from './DocsContext';
-import { CURRENT_SELECTION, PRIMARY_STORY } from './types';
-import { getComponentName } from './utils';
-import { lookupStoryId } from './Story';
-import { useStory } from './useStory';
-
-const getContext = (storyId, context) => {
-  const story = context.storyById(storyId);
-
-  if (!story) {
-    throw new Error(`Unknown story: ${storyId}`);
-  }
-
-  return context.getStoryContext(story);
-};
-
-const useArgs = (storyId, context) => {
-  const channel = addons.getChannel();
-  const storyContext = getContext(storyId, context);
-  const [args, setArgs] = useState(storyContext.args);
-  useEffect(() => {
-    const cb = changed => {
-      if (changed.storyId === storyId) {
-        setArgs(changed.args);
-      }
-    };
-
-    channel.on(Events.STORY_ARGS_UPDATED, cb);
-    return () => channel.off(Events.STORY_ARGS_UPDATED, cb);
-  }, [storyId]);
-  const updateArgs = useCallback(updatedArgs => channel.emit(Events.UPDATE_STORY_ARGS, {
-    storyId,
-    updatedArgs
-  }), [storyId]);
-  const resetArgs = useCallback(argNames => channel.emit(Events.RESET_STORY_ARGS, {
-    storyId,
-    argNames
-  }), [storyId]);
-  return [args, updateArgs, resetArgs];
-};
-
-const useGlobals = (storyId, context) => {
-  const channel = addons.getChannel();
-  const storyContext = getContext(storyId, context);
-  const [globals, setGlobals] = useState(storyContext.globals);
-  useEffect(() => {
-    const cb = changed => {
-      setGlobals(changed.globals);
-    };
-
-    channel.on(Events.GLOBALS_UPDATED, cb);
-    return () => channel.off(Events.GLOBALS_UPDATED, cb);
-  }, []);
-  return [globals];
-};
-
-export const extractComponentArgTypes = (component, {
-  id,
-  storyById
-}, include, exclude) => {
-  const {
-    parameters
-  } = storyById(id);
-  const {
-    extractArgTypes
-  } = parameters.docs || {};
-
-  if (!extractArgTypes) {
-    throw new Error(ArgsTableError.ARGS_UNSUPPORTED);
-  }
-
-  let argTypes = extractArgTypes(component);
-  argTypes = filterArgTypes(argTypes, include, exclude);
-  return argTypes;
-};
-
-const isShortcut = value => {
-  return value && [CURRENT_SELECTION, PRIMARY_STORY].includes(value);
-};
-
-export const getComponent = (props = {}, {
-  id,
-  storyById
-}) => {
-  const {
-    of
-  } = props;
-  const {
-    story
-  } = props;
-  const {
-    component
-  } = storyById(id);
-
-  if (isShortcut(of) || isShortcut(story)) {
-    return component || null;
-  }
-
-  if (!of) {
-    throw new Error(ArgsTableError.NO_COMPONENT);
-  }
-
-  return of;
-};
-
-const addComponentTabs = (tabs, components, context, include, exclude, sort) => Object.assign({}, tabs, mapValues(components, comp => ({
-  rows: extractComponentArgTypes(comp, context, include, exclude),
-  sort
-})));
-
-export const StoryTable = props => {
-  const context = useContext(DocsContext);
-  const {
-    id: currentId,
-    componentStories
-  } = context;
-  const {
-    story: storyName,
-    component,
-    subcomponents,
-    showComponent,
-    include,
-    exclude,
-    sort
-  } = props;
-
-  try {
-    let storyId;
-
-    switch (storyName) {
-      case CURRENT_SELECTION:
-        {
-          storyId = currentId;
-          break;
-        }
-
-      case PRIMARY_STORY:
-        {
-          const primaryStory = componentStories()[0];
-          storyId = primaryStory.id;
-          break;
-        }
-
-      default:
-        {
-          storyId = lookupStoryId(storyName, context);
-        }
-    }
-
-    const story = useStory(storyId, context); // eslint-disable-next-line prefer-const
-
-    let [args, updateArgs, resetArgs] = useArgs(storyId, context);
-    const [globals] = useGlobals(storyId, context);
-    if (!story) return /*#__PURE__*/React.createElement(PureArgsTable, {
-      isLoading: true,
-      updateArgs: updateArgs,
-      resetArgs: resetArgs
-    });
-    const argTypes = filterArgTypes(story.argTypes, include, exclude);
-    const mainLabel = getComponentName(component) || 'Story';
-    let tabs = {
-      [mainLabel]: {
-        rows: argTypes,
-        args,
-        globals,
-        updateArgs,
-        resetArgs
-      }
-    }; // Use the dynamically generated component tabs if there are no controls
-
-    const storyHasArgsWithControls = argTypes && Object.values(argTypes).find(v => !!v?.control);
-
-    if (!storyHasArgsWithControls) {
-      updateArgs = null;
-      resetArgs = null;
-      tabs = {};
-    }
-
-    if (component && (!storyHasArgsWithControls || showComponent)) {
-      tabs = addComponentTabs(tabs, {
-        [mainLabel]: component
-      }, context, include, exclude);
-    }
-
-    if (subcomponents) {
-      if (Array.isArray(subcomponents)) {
-        throw new Error(`Unexpected subcomponents array. Expected an object whose keys are tab labels and whose values are components.`);
-      }
-
-      tabs = addComponentTabs(tabs, subcomponents, context, include, exclude);
-    }
-
-    return /*#__PURE__*/React.createElement(TabbedArgsTable, {
-      tabs: tabs,
-      sort: sort
-    });
-  } catch (err) {
-    return /*#__PURE__*/React.createElement(PureArgsTable, {
-      error: err.message
-    });
-  }
-};
-export const ComponentsTable = props => {
-  const context = useContext(DocsContext);
-  const {
-    components,
-    include,
-    exclude,
-    sort
-  } = props;
-  const tabs = addComponentTabs({}, components, context, include, exclude);
-  return /*#__PURE__*/React.createElement(TabbedArgsTable, {
-    tabs: tabs,
-    sort: sort
-  });
-};
-export const ArgsTable = props => {
-  const context = useContext(DocsContext);
-  const {
-    id,
-    storyById
-  } = context;
-  const {
-    parameters: {
-      controls
-    },
-    subcomponents
-  } = storyById(id);
-  const {
-    include,
-    exclude,
-    components,
-    sort: sortProp
-  } = props;
-  const {
-    story: storyName
-  } = props;
-  const sort = sortProp || controls?.sort;
-  const main = getComponent(props, context);
-
-  if (storyName) {
-    return /*#__PURE__*/React.createElement(StoryTable, _extends({}, props, {
-      component: main,
-      subcomponents,
-      sort
-    }));
-  }
-
-  if (!components && !subcomponents) {
-    let mainProps;
-
-    try {
-      mainProps = {
-        rows: extractComponentArgTypes(main, context, include, exclude)
-      };
-    } catch (err) {
-      mainProps = {
-        error: err.message
-      };
-    }
-
-    return /*#__PURE__*/React.createElement(PureArgsTable, _extends({}, mainProps, {
-      sort: sort
-    }));
-  }
-
-  if (components) {
-    return /*#__PURE__*/React.createElement(ComponentsTable, _extends({}, props, {
-      components,
-      sort
-    }));
-  }
-
-  const mainLabel = getComponentName(main);
-  return /*#__PURE__*/React.createElement(ComponentsTable, _extends({}, props, {
-    components: Object.assign({
-      [mainLabel]: main
-    }, subcomponents),
-    sort: sort
-  }));
-};
-ArgsTable.defaultProps = {
-  of: CURRENT_SELECTION
-};

package/dist/esm/blocks/Canvas.js

@@ -1,93 +0,0 @@
-const _excluded = ["withSource", "mdxSource", "children"];
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-import React, { useContext } from 'react';
-import { MDXProvider } from '@mdx-js/react';
-import { toId, storyNameFromExport } from '@storybook/csf';
-import { resetComponents, Preview as PurePreview, PreviewSkeleton } from '@storybook/components';
-import { DocsContext } from './DocsContext';
-import { SourceContext } from './SourceContainer';
-import { getSourceProps, SourceState } from './Source';
-import { useStories } from './useStory';
-import { CURRENT_SELECTION } from './types';
-export { SourceState };
-
-const getPreviewProps = (_ref, docsContext, sourceContext) => {
-  let {
-    withSource,
-    mdxSource,
-    children
-  } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-  const {
-    mdxComponentAnnotations,
-    mdxStoryNameToKey
-  } = docsContext;
-  let sourceState = withSource;
-  let isLoading = false;
-
-  if (sourceState === SourceState.NONE) {
-    return {
-      isLoading,
-      previewProps: props
-    };
-  }
-
-  if (mdxSource) {
-    return {
-      isLoading,
-      previewProps: Object.assign({}, props, {
-        withSource: getSourceProps({
-          code: decodeURI(mdxSource)
-        }, docsContext, sourceContext)
-      })
-    };
-  }
-
-  const childArray = Array.isArray(children) ? children : [children];
-  const storyChildren = childArray.filter(c => c.props && (c.props.id || c.props.name || c.props.of));
-  const targetIds = storyChildren.map(({
-    props: {
-      id,
-      of,
-      name
-    }
-  }) => {
-    if (id) return id;
-    if (of) return docsContext.storyIdByModuleExport(of);
-    return toId(mdxComponentAnnotations.id || mdxComponentAnnotations.title, storyNameFromExport(mdxStoryNameToKey[name]));
-  });
-  const sourceProps = getSourceProps({
-    ids: targetIds
-  }, docsContext, sourceContext);
-  if (!sourceState) sourceState = sourceProps.state;
-  const storyIds = targetIds.map(targetId => targetId === CURRENT_SELECTION ? docsContext.id : targetId);
-  const stories = useStories(storyIds, docsContext);
-  isLoading = stories.some(s => !s);
-  return {
-    isLoading,
-    previewProps: Object.assign({}, props, {
-      // pass through columns etc.
-      withSource: sourceProps,
-      isExpanded: sourceState === SourceState.OPEN
-    })
-  };
-};
-
-export const Canvas = props => {
-  const docsContext = useContext(DocsContext);
-  const sourceContext = useContext(SourceContext);
-  const {
-    isLoading,
-    previewProps
-  } = getPreviewProps(props, docsContext, sourceContext);
-  const {
-    children
-  } = props;
-  if (isLoading) return /*#__PURE__*/React.createElement(PreviewSkeleton, null);
-  return /*#__PURE__*/React.createElement(MDXProvider, {
-    components: resetComponents
-  }, /*#__PURE__*/React.createElement(PurePreview, previewProps, children));
-};