@storybook/addon-docs 7.0.0-alpha.7 → 7.0.0-alpha.8

package/dist/cjs/blocks/mdx.js

@@ -1,234 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.assertIsFn = exports.HeadersMdx = exports.HeaderMdx = exports.CodeOrSourceMdx = exports.AnchorMdx = exports.AddContext = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _addons = require("@storybook/addons");
-
-var _coreEvents = require("@storybook/core-events");
-
-var _components = require("@storybook/components");
-
-var _global = _interopRequireDefault(require("global"));
-
-var _theming = require("@storybook/theming");
-
-var _DocsContext = require("./DocsContext");
-
-const _excluded = ["children"],
-      _excluded2 = ["className", "children"],
-      _excluded3 = ["href", "target", "children"],
-      _excluded4 = ["as", "id", "children"],
-      _excluded5 = ["as", "id", "children"];
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-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); }
-
-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; }
-
-const {
-  document
-} = _global.default; // Hacky utility for asserting identifiers in MDX Story elements
-
-const assertIsFn = val => {
-  if (typeof val !== 'function') {
-    throw new Error(`Expected story function, got: ${val}`);
-  }
-
-  return val;
-}; // Hacky utility for adding mdxStoryToId to the default context
-
-
-exports.assertIsFn = assertIsFn;
-
-const AddContext = props => {
-  const {
-    children
-  } = props,
-        rest = _objectWithoutPropertiesLoose(props, _excluded);
-
-  const parentContext = _react.default.useContext(_DocsContext.DocsContext);
-
-  return /*#__PURE__*/_react.default.createElement(_DocsContext.DocsContext.Provider, {
-    value: Object.assign({}, parentContext, rest)
-  }, children);
-};
-
-exports.AddContext = AddContext;
-
-const CodeOrSourceMdx = _ref => {
-  let {
-    className,
-    children
-  } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded2);
-
-  // markdown-to-jsx does not add className to inline code
-  if (typeof className !== 'string' && (typeof children !== 'string' || !children.match(/[\n\r]/g))) {
-    return /*#__PURE__*/_react.default.createElement(_components.Code, null, children);
-  } // className: "lang-jsx"
-
-
-  const language = className && className.split('-');
-  return /*#__PURE__*/_react.default.createElement(_components.Source, _extends({
-    language: language && language[1] || 'plaintext',
-    format: false,
-    code: children
-  }, rest));
-};
-
-exports.CodeOrSourceMdx = CodeOrSourceMdx;
-
-function navigate(url) {
-  _addons.addons.getChannel().emit(_coreEvents.NAVIGATE_URL, url);
-} // @ts-ignore
-
-
-const A = _components.components.a;
-
-const AnchorInPage = ({
-  hash,
-  children
-}) => /*#__PURE__*/_react.default.createElement(A, {
-  href: hash,
-  target: "_self",
-  onClick: event => {
-    const id = hash.substring(1);
-    const element = document.getElementById(id);
-
-    if (element) {
-      navigate(hash);
-    }
-  }
-}, children);
-
-const AnchorMdx = props => {
-  const {
-    href,
-    target,
-    children
-  } = props,
-        rest = _objectWithoutPropertiesLoose(props, _excluded3);
-
-  if (href) {
-    // Enable scrolling for in-page anchors.
-    if (href.startsWith('#')) {
-      return /*#__PURE__*/_react.default.createElement(AnchorInPage, {
-        hash: href
-      }, children);
-    } // Links to other pages of SB should use the base URL of the top level iframe instead of the base URL of the preview iframe.
-
-
-    if (target !== '_blank' && !href.startsWith('https://')) {
-      return /*#__PURE__*/_react.default.createElement(A, _extends({
-        href: href,
-        onClick: event => {
-          event.preventDefault(); // use the A element's href, which has been modified for
-          // local paths without a `?path=` query param prefix
-
-          navigate(event.currentTarget.getAttribute('href'));
-        },
-        target: target
-      }, rest), children);
-    }
-  } // External URL dont need any modification.
-
-
-  return /*#__PURE__*/_react.default.createElement(A, props);
-};
-
-exports.AnchorMdx = AnchorMdx;
-const SUPPORTED_MDX_HEADERS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
-const OcticonHeaders = SUPPORTED_MDX_HEADERS.reduce((acc, headerType) => Object.assign({}, acc, {
-  // @ts-ignore
-  [headerType]: (0, _theming.styled)(_components.components[headerType])({
-    '& svg': {
-      visibility: 'hidden'
-    },
-    '&:hover svg': {
-      visibility: 'visible'
-    }
-  })
-}), {});
-
-const OcticonAnchor = _theming.styled.a(() => ({
-  float: 'left',
-  paddingRight: '4px',
-  marginLeft: '-20px',
-  // Allow the theme's text color to override the default link color.
-  color: 'inherit'
-}));
-
-const HeaderWithOcticonAnchor = _ref2 => {
-  let {
-    as,
-    id,
-    children
-  } = _ref2,
-      rest = _objectWithoutPropertiesLoose(_ref2, _excluded4);
-
-  // @ts-ignore
-  const OcticonHeader = OcticonHeaders[as];
-  const hash = `#${id}`;
-  return /*#__PURE__*/_react.default.createElement(OcticonHeader, _extends({
-    id: id
-  }, rest), /*#__PURE__*/_react.default.createElement(OcticonAnchor, {
-    "aria-hidden": "true",
-    href: hash,
-    tabIndex: -1,
-    target: "_self",
-    onClick: event => {
-      const element = document.getElementById(id);
-
-      if (element) {
-        navigate(hash);
-      }
-    }
-  }, /*#__PURE__*/_react.default.createElement("svg", {
-    viewBox: "0 0 16 16",
-    version: "1.1",
-    width: "16",
-    height: "16",
-    "aria-hidden": "true",
-    fill: "currentColor"
-  }, /*#__PURE__*/_react.default.createElement("path", {
-    fillRule: "evenodd",
-    d: "M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"
-  }))), children);
-};
-
-const HeaderMdx = props => {
-  const {
-    as,
-    id,
-    children
-  } = props,
-        rest = _objectWithoutPropertiesLoose(props, _excluded5); // An id should have been added on every header by the "remark-slug" plugin.
-
-
-  if (id) {
-    return /*#__PURE__*/_react.default.createElement(HeaderWithOcticonAnchor, _extends({
-      as: as,
-      id: id
-    }, rest), children);
-  } // @ts-ignore
-
-
-  const Header = _components.components[as]; // Make sure it still work if "remark-slug" plugin is not present.
-
-  return /*#__PURE__*/_react.default.createElement(Header, props);
-};
-
-exports.HeaderMdx = HeaderMdx;
-const HeadersMdx = SUPPORTED_MDX_HEADERS.reduce((acc, headerType) => Object.assign({}, acc, {
-  // @ts-ignore
-  [headerType]: props => /*#__PURE__*/_react.default.createElement(HeaderMdx, _extends({
-    as: headerType
-  }, props))
-}), {});
-exports.HeadersMdx = HeadersMdx;

package/dist/cjs/blocks/types.js

@@ -1,10 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.PRIMARY_STORY = exports.CURRENT_SELECTION = void 0;
-const CURRENT_SELECTION = '.';
-exports.CURRENT_SELECTION = CURRENT_SELECTION;
-const PRIMARY_STORY = '^';
-exports.PRIMARY_STORY = PRIMARY_STORY;

package/dist/cjs/blocks/useStory.js

@@ -1,44 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useStories = useStories;
-exports.useStory = useStory;
-
-var _react = require("react");
-
-function useStory(storyId, context) {
-  const stories = useStories([storyId], context);
-  return stories && stories[0];
-}
-
-function useStories(storyIds, context) {
-  // Legacy docs pages can reference any story by id. Those stories will need to be
-  // asyncronously loaded; we use the state for this
-  const [storiesById, setStories] = (0, _react.useState)({});
-  (0, _react.useEffect)(() => {
-    Promise.all(storyIds.map(async storyId => {
-      // loadStory will be called every single time useStory is called
-      // because useEffect does not use storyIds as an input. This is because
-      // HMR can change the story even when the storyId hasn't changed. However, it
-      // will be a no-op once the story has loaded. Furthermore, the `story` will
-      // have an exact equality when the story hasn't changed, so it won't trigger
-      // any unnecessary re-renders
-      const story = await context.loadStory(storyId);
-      setStories(current => current[storyId] === story ? current : Object.assign({}, current, {
-        [storyId]: story
-      }));
-    }));
-  });
-  return storyIds.map(storyId => {
-    if (storiesById[storyId]) return storiesById[storyId];
-
-    try {
-      // If we are allowed to load this story id synchonously, this will work
-      return context.storyById(storyId);
-    } catch (err) {
-      return null;
-    }
-  });
-}

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/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
-};