@storybook/addon-docs 7.0.0-alpha.1 → 7.0.0-alpha.12

package/dist/esm/blocks/Preview.js

@@ -1,9 +0,0 @@
-import React from 'react';
-import deprecate from 'util-deprecate';
-import dedent from 'ts-dedent';
-import { Canvas } from './Canvas';
-export const Preview = deprecate(props => /*#__PURE__*/React.createElement(Canvas, props), dedent`
-    Preview doc block has been renamed to Canvas.
-
-    https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#previewprops-renamed
-  `);

package/dist/esm/blocks/Primary.js

@@ -1,23 +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 } from 'react';
-import { DocsContext } from './DocsContext';
-import { DocsStory } from './DocsStory';
-export const Primary = ({
-  name
-}) => {
-  const {
-    componentStories: getComponentStories
-  } = useContext(DocsContext);
-  const componentStories = getComponentStories();
-  let story;
-
-  if (componentStories) {
-    story = name ? componentStories.find(s => s.name === name) : componentStories[0];
-  }
-
-  return story ? /*#__PURE__*/React.createElement(DocsStory, _extends({}, story, {
-    expanded: false,
-    withToolbar: true
-  })) : null;
-};

package/dist/esm/blocks/Props.js

@@ -1,14 +0,0 @@
-import React from 'react';
-import deprecate from 'util-deprecate';
-import dedent from 'ts-dedent';
-import { ArgsTable } from './ArgsTable';
-import { CURRENT_SELECTION } from './types';
-export const Props = deprecate(props => /*#__PURE__*/React.createElement(ArgsTable, props), dedent`
-    Props doc block has been renamed to ArgsTable.
-
-    https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#previewprops-renamed
-  `); // @ts-ignore
-
-Props.defaultProps = {
-  of: CURRENT_SELECTION
-};

package/dist/esm/blocks/Source.js

@@ -1,144 +0,0 @@
-import React, { useContext } from 'react';
-import { Source as PureSource, SourceError } from '@storybook/components';
-import { DocsContext } from './DocsContext';
-import { SourceContext } from './SourceContainer';
-import { CURRENT_SELECTION } from './types';
-import { SourceType } from '../shared';
-import { enhanceSource } from './enhanceSource';
-import { useStories } from './useStory';
-export let SourceState;
-
-(function (SourceState) {
-  SourceState["OPEN"] = "open";
-  SourceState["CLOSED"] = "closed";
-  SourceState["NONE"] = "none";
-})(SourceState || (SourceState = {}));
-
-const getSourceState = stories => {
-  const states = stories.map(story => story.parameters.docs?.source?.state).filter(Boolean);
-  if (states.length === 0) return SourceState.CLOSED; // FIXME: handling multiple stories is a pain
-
-  return states[0];
-};
-
-const getStorySource = (storyId, sourceContext) => {
-  const {
-    sources
-  } = sourceContext; // source rendering is async so source is unavailable at the start of the render cycle,
-  // so we fail gracefully here without warning
-
-  return sources?.[storyId] || {
-    code: '',
-    format: false
-  };
-};
-
-const getSnippet = (snippet, story) => {
-  if (!story) {
-    return snippet;
-  }
-
-  const {
-    parameters
-  } = story; // eslint-disable-next-line no-underscore-dangle
-
-  const isArgsStory = parameters.__isArgsStory;
-  const type = parameters.docs?.source?.type || SourceType.AUTO; // if user has hard-coded the snippet, that takes precedence
-
-  const userCode = parameters.docs?.source?.code;
-
-  if (userCode !== undefined) {
-    return userCode;
-  } // if user has explicitly set this as dynamic, use snippet
-
-
-  if (type === SourceType.DYNAMIC) {
-    return parameters.docs?.transformSource?.(snippet, story) || snippet;
-  } // if this is an args story and there's a snippet
-
-
-  if (type === SourceType.AUTO && snippet && isArgsStory) {
-    return parameters.docs?.transformSource?.(snippet, story) || snippet;
-  } // otherwise, use the source code logic
-
-
-  const enhanced = enhanceSource(story) || parameters;
-  return enhanced?.docs?.source?.code || '';
-};
-
-export const getSourceProps = (props, docsContext, sourceContext) => {
-  const {
-    id: currentId,
-    storyById
-  } = docsContext;
-  const {
-    parameters
-  } = storyById(currentId);
-  const codeProps = props;
-  const singleProps = props;
-  const multiProps = props;
-  let source = codeProps.code; // prefer user-specified code
-
-  let {
-    format
-  } = codeProps; // prefer user-specified code
-
-  const targetIds = multiProps.ids || [singleProps.id || currentId];
-  const storyIds = targetIds.map(targetId => targetId === CURRENT_SELECTION ? currentId : targetId);
-  const stories = useStories(storyIds, docsContext);
-
-  if (!stories.every(Boolean)) {
-    return {
-      error: SourceError.SOURCE_UNAVAILABLE,
-      state: SourceState.NONE
-    };
-  }
-
-  if (!source) {
-    // just take the format from the first story, given how they're all concatinated together...
-    // TODO: we should consider sending an event with all the sources separately, instead of concatenating them here
-    ({
-      format
-    } = getStorySource(storyIds[0], sourceContext));
-    source = storyIds.map((storyId, idx) => {
-      const {
-        code: storySource
-      } = getStorySource(storyId, sourceContext);
-      const storyObj = stories[idx];
-      return getSnippet(storySource, storyObj);
-    }).join('\n\n');
-  }
-
-  const state = getSourceState(stories);
-  const {
-    docs: docsParameters = {}
-  } = parameters;
-  const {
-    source: sourceParameters = {}
-  } = docsParameters;
-  const {
-    language: docsLanguage = null
-  } = sourceParameters;
-  return source ? {
-    code: source,
-    state,
-    format,
-    language: props.language || docsLanguage || 'jsx',
-    dark: props.dark || false
-  } : {
-    error: SourceError.SOURCE_UNAVAILABLE,
-    state
-  };
-};
-/**
- * Story source doc block renders source code if provided,
- * or the source for a story if `storyId` is provided, or
- * the source for the current story if nothing is provided.
- */
-
-export const Source = props => {
-  const sourceContext = useContext(SourceContext);
-  const docsContext = useContext(DocsContext);
-  const sourceProps = getSourceProps(props, docsContext, sourceContext);
-  return /*#__PURE__*/React.createElement(PureSource, sourceProps);
-};

package/dist/esm/blocks/SourceContainer.js

@@ -1,44 +0,0 @@
-import React, { createContext, useEffect, useState } from 'react';
-import deepEqual from 'fast-deep-equal';
-import { addons } from '@storybook/addons';
-import { SNIPPET_RENDERED } from '../shared';
-export const SourceContext = /*#__PURE__*/createContext({
-  sources: {}
-});
-export const SourceContainer = ({
-  children
-}) => {
-  const [sources, setSources] = useState({});
-  const channel = addons.getChannel();
-  useEffect(() => {
-    const handleSnippetRendered = (id, newSource, format = false) => {
-      // optimization: if the source is the same, ignore the incoming event
-      if (sources[id] && sources[id].code === newSource) {
-        return;
-      }
-
-      setSources(current => {
-        const newSources = Object.assign({}, current, {
-          [id]: {
-            code: newSource,
-            format
-          }
-        });
-
-        if (!deepEqual(current, newSources)) {
-          return newSources;
-        }
-
-        return current;
-      });
-    };
-
-    channel.on(SNIPPET_RENDERED, handleSnippetRendered);
-    return () => channel.off(SNIPPET_RENDERED, handleSnippetRendered);
-  }, []);
-  return /*#__PURE__*/React.createElement(SourceContext.Provider, {
-    value: {
-      sources
-    }
-  }, children);
-};

package/dist/esm/blocks/Stories.js

@@ -1,30 +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 } from 'react';
-import { DocsContext } from './DocsContext';
-import { DocsStory } from './DocsStory';
-import { Heading } from './Heading';
-export const Stories = ({
-  title,
-  includePrimary = false
-}) => {
-  const {
-    componentStories
-  } = useContext(DocsContext);
-  let stories = componentStories();
-  stories = stories.filter(story => !story.parameters?.docs?.disable);
-  if (!includePrimary) stories = stories.slice(1);
-
-  if (!stories || stories.length === 0) {
-    return null;
-  }
-
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Heading, null, title), stories.map(story => story && /*#__PURE__*/React.createElement(DocsStory, _extends({
-    key: story.id
-  }, story, {
-    expanded: true
-  }))));
-};
-Stories.defaultProps = {
-  title: 'Stories'
-};

package/dist/esm/blocks/Story.js

@@ -1,166 +0,0 @@
-import React, { useContext, useRef, useEffect, useState } from 'react';
-import { MDXProvider } from '@mdx-js/react';
-import global from 'global';
-import { resetComponents, Story as PureStory, StorySkeleton } from '@storybook/components';
-import { toId, storyNameFromExport } from '@storybook/csf';
-import { addons } from '@storybook/addons';
-import Events from '@storybook/core-events';
-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, context, onStoryFnCalled) => {
-  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,
-    prepareForInline
-  } = docs;
-  const storyIsInline = typeof inline === 'boolean' ? inline : inlineStories;
-
-  if (storyIsInline && !prepareForInline) {
-    throw new Error(`Story '${storyName}' is set to render inline, but no 'prepareForInline' function is implemented in your docs configuration!`);
-  }
-
-  const boundStoryFn = () => {
-    const storyResult = story.unboundStoryFn(Object.assign({}, context.getStoryContext(story), {
-      loaded: {},
-      abortSignal: undefined,
-      canvasElement: undefined
-    })); // We need to wait until the bound story function has actually been called before we
-    // consider the story rendered. Certain frameworks (i.e. angular) don't actually render
-    // the component in the very first react render cycle, and so we can't just wait until the
-    // `PureStory` component has been rendered to consider the underlying story "rendered".
-
-    onStoryFnCalled();
-    return storyResult;
-  };
-
-  return Object.assign({
-    inline: storyIsInline,
-    id: story.id,
-    height: height || (storyIsInline ? undefined : iframeHeight),
-    title: storyName
-  }, storyIsInline && {
-    parameters,
-    storyFn: () => prepareForInline(boundStoryFn, context.getStoryContext(story))
-  });
-};
-
-function makeGate() {
-  let open;
-  const gate = new Promise(r => {
-    open = r;
-  });
-  return [gate, open];
-}
-
-const Story = props => {
-  const context = useContext(DocsContext);
-  const channel = addons.getChannel();
-  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]);
-  const [storyFnRan, onStoryFnRan] = makeGate();
-  const [rendered, onRendered] = makeGate();
-  useEffect(onRendered);
-
-  if (!story) {
-    return /*#__PURE__*/React.createElement(StorySkeleton, null);
-  }
-
-  const storyProps = getStoryProps(props, story, context, onStoryFnRan);
-
-  if (!storyProps) {
-    return null;
-  }
-
-  if (storyProps.inline) {
-    // If we are rendering a old-style inline Story via `PureStory` below, we want to emit
-    // the `STORY_RENDERED` event when it renders. The modern mode below calls out to
-    // `Preview.renderStoryToDom()` which itself emits the event.
-    if (!global?.FEATURES?.modernInlineRender) {
-      // We need to wait for two things before we can consider the story rendered:
-      //  (a) React's `useEffect` hook needs to fire. This is needed for React stories, as
-      //      decorators of the form `<A><B/></A>` will not actually execute `B` in the first
-      //      call to the story function.
-      //  (b) The story function needs to actually have been called.
-      //      Certain frameworks (i.e.angular) don't actually render the component in the very first
-      //      React render cycle, so we need to wait for the framework to actually do that
-      Promise.all([storyFnRan, rendered]).then(() => {
-        channel.emit(Events.STORY_RENDERED, storyId);
-      });
-    } else {
-      // 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
-      }
-    })
-  };
-};