@storybook/addon-docs 6.5.9 → 7.0.0-alpha.10

package/dist/esm/blocks/useStory.js

@@ -1,84 +0,0 @@
-import "regenerator-runtime/runtime.js";
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
-
-function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-import "core-js/modules/es.object.to-string.js";
-import "core-js/modules/es.array.iterator.js";
-import "core-js/modules/es.promise.js";
-import "core-js/modules/es.string.iterator.js";
-import "core-js/modules/web.dom-collections.iterator.js";
-import "core-js/modules/es.array.map.js";
-import "core-js/modules/es.object.assign.js";
-import "core-js/modules/es.symbol.js";
-import "core-js/modules/es.symbol.description.js";
-import "core-js/modules/es.symbol.iterator.js";
-import "core-js/modules/es.array.slice.js";
-import "core-js/modules/es.function.name.js";
-import "core-js/modules/es.array.from.js";
-import "core-js/modules/es.regexp.exec.js";
-import { useState, useEffect } from 'react';
-export function useStory(storyId, context) {
-  var stories = useStories([storyId], context);
-  return stories && stories[0];
-}
-export function useStories(storyIds, context) {
-  var initialStoriesById = context.componentStories().reduce(function (acc, story) {
-    acc[story.id] = story;
-    return acc;
-  }, {});
-
-  var _useState = useState(initialStoriesById),
-      _useState2 = _slicedToArray(_useState, 2),
-      storiesById = _useState2[0],
-      setStories = _useState2[1];
-
-  useEffect(function () {
-    Promise.all(storyIds.map( /*#__PURE__*/function () {
-      var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(storyId) {
-        var story;
-        return regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) {
-            switch (_context.prev = _context.next) {
-              case 0:
-                _context.next = 2;
-                return context.loadStory(storyId);
-
-              case 2:
-                story = _context.sent;
-                setStories(function (current) {
-                  return current[storyId] === story ? current : Object.assign({}, current, _defineProperty({}, storyId, story));
-                });
-
-              case 4:
-              case "end":
-                return _context.stop();
-            }
-          }
-        }, _callee);
-      }));
-
-      return function (_x) {
-        return _ref.apply(this, arguments);
-      };
-    }()));
-  });
-  return storyIds.map(function (storyId) {
-    return storiesById[storyId];
-  });
-}

package/dist/esm/blocks/utils.js

@@ -1,43 +0,0 @@
-import "core-js/modules/es.array.join.js";
-import "core-js/modules/es.array.map.js";
-import "core-js/modules/es.regexp.exec.js";
-import "core-js/modules/es.string.split.js";
-import "core-js/modules/es.array.slice.js";
-import "core-js/modules/es.array.includes.js";
-import "core-js/modules/es.string.includes.js";
-import "core-js/modules/es.function.name.js";
-
-/* eslint-disable no-underscore-dangle */
-var titleCase = function titleCase(str) {
-  return str.split('-').map(function (part) {
-    return part.charAt(0).toUpperCase() + part.slice(1);
-  }).join('');
-};
-
-export var getComponentName = function 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;
-};
-export function scrollToElement(element) {
-  var block = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'start';
-  element.scrollIntoView({
-    behavior: 'smooth',
-    block: block,
-    inline: 'nearest'
-  });
-}

package/dist/modern/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/modern/blocks/ArgsTable.js

@@ -1,292 +0,0 @@
-function _extends() { _extends = Object.assign || 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 !== null && v !== void 0 && 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 === null || controls === void 0 ? void 0 : 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/modern/blocks/Canvas.js

@@ -1,83 +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));
-  const targetIds = storyChildren.map(s => s.props.id || toId(mdxComponentAnnotations.id || mdxComponentAnnotations.title, storyNameFromExport(mdxStoryNameToKey[s.props.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));
-};

package/dist/modern/blocks/Description.js

@@ -1,107 +0,0 @@
-import React, { useContext } from 'react';
-import { Description } from '@storybook/components';
-import { str } from '@storybook/docs-tools';
-import { DocsContext } from './DocsContext';
-import { CURRENT_SELECTION } from './types';
-export let DescriptionType;
-
-(function (DescriptionType) {
-  DescriptionType["INFO"] = "info";
-  DescriptionType["NOTES"] = "notes";
-  DescriptionType["DOCGEN"] = "docgen";
-  DescriptionType["LEGACY_5_2"] = "legacy-5.2";
-  DescriptionType["AUTO"] = "auto";
-})(DescriptionType || (DescriptionType = {}));
-
-const getNotes = notes => notes && (typeof notes === 'string' ? notes : str(notes.markdown) || str(notes.text));
-
-const getInfo = info => info && (typeof info === 'string' ? info : str(info.text));
-
-const noDescription = component => null;
-
-export const getDescriptionProps = ({
-  of,
-  type,
-  markdown,
-  children
-}, {
-  id,
-  storyById
-}) => {
-  const {
-    component,
-    parameters
-  } = storyById(id);
-
-  if (children || markdown) {
-    return {
-      markdown: children || markdown
-    };
-  }
-
-  const {
-    notes,
-    info,
-    docs
-  } = parameters;
-  const {
-    extractComponentDescription = noDescription,
-    description
-  } = docs || {};
-  const target = of === CURRENT_SELECTION ? component : of; // override component description
-
-  const componentDescriptionParameter = description === null || description === void 0 ? void 0 : description.component;
-
-  if (componentDescriptionParameter) {
-    return {
-      markdown: componentDescriptionParameter
-    };
-  }
-
-  switch (type) {
-    case DescriptionType.INFO:
-      return {
-        markdown: getInfo(info)
-      };
-
-    case DescriptionType.NOTES:
-      return {
-        markdown: getNotes(notes)
-      };
-    // FIXME: remove in 6.0
-
-    case DescriptionType.LEGACY_5_2:
-      return {
-        markdown: `
-${getNotes(notes) || getInfo(info) || ''}
-
-${extractComponentDescription(target) || ''}
-`.trim()
-      };
-
-    case DescriptionType.DOCGEN:
-    case DescriptionType.AUTO:
-    default:
-      return {
-        markdown: extractComponentDescription(target, Object.assign({
-          component
-        }, parameters))
-      };
-  }
-};
-
-const DescriptionContainer = props => {
-  const context = useContext(DocsContext);
-  const {
-    markdown
-  } = getDescriptionProps(props, context);
-  return markdown ? /*#__PURE__*/React.createElement(Description, {
-    markdown: markdown
-  }) : null;
-}; // since we are in the docs blocks, assume default description if for primary component story
-
-
-DescriptionContainer.defaultProps = {
-  of: '.'
-};
-export { DescriptionContainer as Description };