@storybook/addon-docs 7.0.0-alpha.5 → 7.0.0-alpha.51

package/dist/esm/blocks/Story.js

@@ -1,114 +0,0 @@
-import React, { useContext, useRef, useEffect, useState } from 'react';
-import { MDXProvider } from '@mdx-js/react';
-import { resetComponents, Story as PureStory, StorySkeleton } from '@storybook/components';
-import { toId, storyNameFromExport } from '@storybook/csf';
-import { CURRENT_SELECTION } from './types';
-import { DocsContext } from './DocsContext';
-import { useStory } from './useStory';
-export const storyBlockIdFromId = storyId => `story--${storyId}`;
-export const lookupStoryId = (storyName, {
-  mdxStoryNameToKey,
-  mdxComponentAnnotations
-}) => toId(mdxComponentAnnotations.id || mdxComponentAnnotations.title, storyNameFromExport(mdxStoryNameToKey[storyName]));
-export const getStoryId = (props, context) => {
-  const {
-    id
-  } = props;
-  const {
-    name
-  } = props;
-  const inputId = id === CURRENT_SELECTION ? context.id : id;
-  return inputId || lookupStoryId(name, context);
-};
-export const getStoryProps = ({
-  height,
-  inline
-}, story) => {
-  const {
-    name: storyName,
-    parameters
-  } = story;
-  const {
-    docs = {}
-  } = parameters;
-
-  if (docs.disable) {
-    return null;
-  } // prefer block props, then story parameters defined by the framework-specific settings and optionally overridden by users
-
-
-  const {
-    inlineStories = false,
-    iframeHeight = 100
-  } = docs;
-  const storyIsInline = typeof inline === 'boolean' ? inline : inlineStories;
-  return Object.assign({
-    inline: storyIsInline,
-    id: story.id,
-    height: height || (storyIsInline ? undefined : iframeHeight),
-    title: storyName
-  }, storyIsInline && {
-    parameters
-  });
-};
-
-const Story = props => {
-  const context = useContext(DocsContext);
-  const storyRef = useRef();
-  const storyId = getStoryId(props, context);
-  const story = useStory(storyId, context);
-  const [showLoader, setShowLoader] = useState(true);
-  useEffect(() => {
-    let cleanup;
-
-    if (story && storyRef.current) {
-      const element = storyRef.current;
-      cleanup = context.renderStoryToElement(story, element);
-      setShowLoader(false);
-    }
-
-    return () => cleanup && cleanup();
-  }, [story]);
-
-  if (!story) {
-    return /*#__PURE__*/React.createElement(StorySkeleton, null);
-  }
-
-  const storyProps = getStoryProps(props, story);
-
-  if (!storyProps) {
-    return null;
-  }
-
-  if (storyProps.inline) {
-    // We do this so React doesn't complain when we replace the span in a secondary render
-    const htmlContents = `<span></span>`; // FIXME: height/style/etc. lifted from PureStory
-
-    const {
-      height
-    } = storyProps;
-    return /*#__PURE__*/React.createElement("div", {
-      id: storyBlockIdFromId(story.id)
-    }, /*#__PURE__*/React.createElement(MDXProvider, {
-      components: resetComponents
-    }, height ? /*#__PURE__*/React.createElement("style", null, `#story--${story.id} { min-height: ${height}; transform: translateZ(0); overflow: auto }`) : null, showLoader && /*#__PURE__*/React.createElement(StorySkeleton, null), /*#__PURE__*/React.createElement("div", {
-      ref: storyRef,
-      "data-name": story.name,
-      dangerouslySetInnerHTML: {
-        __html: htmlContents
-      }
-    })));
-  }
-
-  return /*#__PURE__*/React.createElement("div", {
-    id: storyBlockIdFromId(story.id)
-  }, /*#__PURE__*/React.createElement(MDXProvider, {
-    components: resetComponents
-  }, /*#__PURE__*/React.createElement(PureStory, storyProps)));
-};
-
-Story.defaultProps = {
-  children: null,
-  name: null
-};
-export { Story };

package/dist/esm/blocks/Subheading.js

@@ -1,17 +0,0 @@
-import React from 'react';
-import { H3 } from '@storybook/components';
-import { HeaderMdx } from './mdx';
-export const Subheading = ({
-  children,
-  disableAnchor
-}) => {
-  if (disableAnchor || typeof children !== 'string') {
-    return /*#__PURE__*/React.createElement(H3, null, children);
-  }
-
-  const tagID = children.toLowerCase().replace(/[^a-z0-9]/gi, '-');
-  return /*#__PURE__*/React.createElement(HeaderMdx, {
-    as: "h3",
-    id: tagID
-  }, children);
-};

package/dist/esm/blocks/Subtitle.js

@@ -1,23 +0,0 @@
-import React, { useContext } from 'react';
-import { Subtitle as PureSubtitle } from '@storybook/components';
-import { DocsContext } from './DocsContext';
-export const Subtitle = ({
-  children
-}) => {
-  const {
-    id,
-    storyById
-  } = useContext(DocsContext);
-  const {
-    parameters
-  } = storyById(id);
-  let text = children;
-
-  if (!text) {
-    text = parameters?.componentSubtitle;
-  }
-
-  return text ? /*#__PURE__*/React.createElement(PureSubtitle, {
-    className: "sbdocs-subtitle"
-  }, text) : null;
-};

package/dist/esm/blocks/Title.js

@@ -1,24 +0,0 @@
-import React, { useContext } from 'react';
-import { Title as PureTitle } from '@storybook/components';
-import { DocsContext } from './DocsContext';
-const STORY_KIND_PATH_SEPARATOR = /\s*\/\s*/;
-export const extractTitle = ({
-  title
-}) => {
-  const groups = title.trim().split(STORY_KIND_PATH_SEPARATOR);
-  return groups && groups[groups.length - 1] || title;
-};
-export const Title = ({
-  children
-}) => {
-  const context = useContext(DocsContext);
-  let text = children;
-
-  if (!text) {
-    text = extractTitle(context);
-  }
-
-  return text ? /*#__PURE__*/React.createElement(PureTitle, {
-    className: "sbdocs-title"
-  }, text) : null;
-};

package/dist/esm/blocks/Wrapper.js

@@ -1,8 +0,0 @@
-import React from 'react';
-export const Wrapper = ({
-  children
-}) => /*#__PURE__*/React.createElement("div", {
-  style: {
-    fontFamily: 'sans-serif'
-  }
-}, children);

package/dist/esm/blocks/enhanceSource.js

@@ -1,87 +0,0 @@
-import { combineParameters } from '@storybook/store'; // ============================================================
-// START @storybook/source-loader/extract-source
-//
-// This code duplicated because tree-shaking isn't working.
-// It's not DRY, but source-loader is on the chopping block for
-// the next version of addon-docs, so it's not the worst sin.
-// ============================================================
-
-/**
- * given a location, extract the text from the full source
- */
-function extractSource(location, lines) {
-  const {
-    startBody: start,
-    endBody: end
-  } = location;
-
-  if (start.line === end.line && lines[start.line - 1] !== undefined) {
-    return lines[start.line - 1].substring(start.col, end.col);
-  } // NOTE: storysource locations are 1-based not 0-based!
-
-
-  const startLine = lines[start.line - 1];
-  const endLine = lines[end.line - 1];
-
-  if (startLine === undefined || endLine === undefined) {
-    return null;
-  }
-
-  return [startLine.substring(start.col), ...lines.slice(start.line, end.line - 1), endLine.substring(0, end.col)].join('\n');
-} // ============================================================
-// END @storybook/source-loader/extract-source
-// ============================================================
-
-
-/**
- * Replaces full story id name like: story-kind--story-name -> story-name
- * @param id
- */
-const storyIdToSanitizedStoryName = id => id.replace(/^.*?--/, '');
-
-const extract = (targetId, {
-  source,
-  locationsMap
-}) => {
-  if (!locationsMap) {
-    return source;
-  }
-
-  const sanitizedStoryName = storyIdToSanitizedStoryName(targetId);
-  const location = locationsMap[sanitizedStoryName];
-
-  if (!location) {
-    return source;
-  }
-
-  const lines = source.split('\n');
-  return extractSource(location, lines);
-};
-
-export const enhanceSource = story => {
-  const {
-    id,
-    parameters
-  } = story;
-  const {
-    storySource,
-    docs = {}
-  } = parameters;
-  const {
-    transformSource
-  } = docs; // no input or user has manually overridden the output
-
-  if (!storySource?.source || docs.source?.code) {
-    return null;
-  }
-
-  const input = extract(id, storySource);
-  const code = transformSource ? transformSource(input, story) : input;
-  return {
-    docs: combineParameters(docs, {
-      source: {
-        code
-      }
-    })
-  };
-};

package/dist/esm/blocks/index.js

@@ -1,24 +0,0 @@
-export { ColorPalette, ColorItem, IconGallery, IconItem, Typeset } from '@storybook/components';
-export * from './Anchor';
-export * from './ArgsTable';
-export * from './Canvas';
-export * from './Description';
-export * from './DocsContext';
-export * from './DocsPage';
-export * from './DocsContainer';
-export * from './DocsStory';
-export * from './Heading';
-export * from './Meta';
-export * from './Preview';
-export * from './Primary';
-export * from './Props';
-export * from './Source';
-export * from './SourceContainer';
-export * from './Stories';
-export * from './Story';
-export * from './Subheading';
-export * from './Subtitle';
-export * from './Title';
-export * from './Wrapper';
-export * from './types';
-export * from './mdx';

package/dist/esm/blocks/mdx.js

@@ -1,203 +0,0 @@
-const _excluded = ["children"],
-      _excluded2 = ["className", "children"],
-      _excluded3 = ["href", "target", "children"],
-      _excluded4 = ["as", "id", "children"],
-      _excluded5 = ["as", "id", "children"];
-
-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; }
-
-import React from 'react';
-import { addons } from '@storybook/addons';
-import { NAVIGATE_URL } from '@storybook/core-events';
-import { Source, Code, components } from '@storybook/components';
-import global from 'global';
-import { styled } from '@storybook/theming';
-import { DocsContext } from './DocsContext';
-const {
-  document
-} = global; // Hacky utility for asserting identifiers in MDX Story elements
-
-export 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
-
-export const AddContext = props => {
-  const {
-    children
-  } = props,
-        rest = _objectWithoutPropertiesLoose(props, _excluded);
-
-  const parentContext = React.useContext(DocsContext);
-  return /*#__PURE__*/React.createElement(DocsContext.Provider, {
-    value: Object.assign({}, parentContext, rest)
-  }, children);
-};
-export 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.createElement(Code, null, children);
-  } // className: "lang-jsx"
-
-
-  const language = className && className.split('-');
-  return /*#__PURE__*/React.createElement(Source, _extends({
-    language: language && language[1] || 'plaintext',
-    format: false,
-    code: children
-  }, rest));
-};
-
-function navigate(url) {
-  addons.getChannel().emit(NAVIGATE_URL, url);
-} // @ts-ignore
-
-
-const A = components.a;
-
-const AnchorInPage = ({
-  hash,
-  children
-}) => /*#__PURE__*/React.createElement(A, {
-  href: hash,
-  target: "_self",
-  onClick: event => {
-    const id = hash.substring(1);
-    const element = document.getElementById(id);
-
-    if (element) {
-      navigate(hash);
-    }
-  }
-}, children);
-
-export 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.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.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.createElement(A, props);
-};
-const SUPPORTED_MDX_HEADERS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
-const OcticonHeaders = SUPPORTED_MDX_HEADERS.reduce((acc, headerType) => Object.assign({}, acc, {
-  // @ts-ignore
-  [headerType]: styled(components[headerType])({
-    '& svg': {
-      visibility: 'hidden'
-    },
-    '&:hover svg': {
-      visibility: 'visible'
-    }
-  })
-}), {});
-const OcticonAnchor = 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.createElement(OcticonHeader, _extends({
-    id: id
-  }, rest), /*#__PURE__*/React.createElement(OcticonAnchor, {
-    "aria-hidden": "true",
-    href: hash,
-    tabIndex: -1,
-    target: "_self",
-    onClick: event => {
-      const element = document.getElementById(id);
-
-      if (element) {
-        navigate(hash);
-      }
-    }
-  }, /*#__PURE__*/React.createElement("svg", {
-    viewBox: "0 0 16 16",
-    version: "1.1",
-    width: "16",
-    height: "16",
-    "aria-hidden": "true",
-    fill: "currentColor"
-  }, /*#__PURE__*/React.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);
-};
-
-export 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.createElement(HeaderWithOcticonAnchor, _extends({
-      as: as,
-      id: id
-    }, rest), children);
-  } // @ts-ignore
-
-
-  const Header = components[as]; // Make sure it still work if "remark-slug" plugin is not present.
-
-  return /*#__PURE__*/React.createElement(Header, props);
-};
-export const HeadersMdx = SUPPORTED_MDX_HEADERS.reduce((acc, headerType) => Object.assign({}, acc, {
-  // @ts-ignore
-  [headerType]: props => /*#__PURE__*/React.createElement(HeaderMdx, _extends({
-    as: headerType
-  }, props))
-}), {});

package/dist/esm/blocks/types.js

@@ -1,2 +0,0 @@
-export const CURRENT_SELECTION = '.';
-export const PRIMARY_STORY = '^';

package/dist/esm/blocks/useStory.js

@@ -1,27 +0,0 @@
-import { useState, useEffect } from 'react';
-export function useStory(storyId, context) {
-  const stories = useStories([storyId], context);
-  return stories && stories[0];
-}
-export function useStories(storyIds, context) {
-  const initialStoriesById = context.componentStories().reduce((acc, story) => {
-    acc[story.id] = story;
-    return acc;
-  }, {});
-  const [storiesById, setStories] = useState(initialStoriesById);
-  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 => storiesById[storyId]);
-}

package/dist/esm/blocks/utils.js

@@ -1,29 +0,0 @@
-/* eslint-disable no-underscore-dangle */
-const titleCase = str => str.split('-').map(part => part.charAt(0).toUpperCase() + part.slice(1)).join('');
-
-export 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;
-};
-export function scrollToElement(element, block = 'start') {
-  element.scrollIntoView({
-    behavior: 'smooth',
-    block,
-    inline: 'nearest'
-  });
-}

package/dist/esm/index.js

@@ -1 +0,0 @@
-export * from './blocks';

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