@storybook/addon-docs 7.0.0-alpha.6 → 7.0.0-alpha.60

package/dist/esm/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?.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 };

package/dist/esm/blocks/DocsContainer.js

@@ -1,105 +0,0 @@
-import React, { useEffect } from 'react';
-import global from 'global';
-import deprecate from 'util-deprecate';
-import dedent from 'ts-dedent';
-import { MDXProvider } from '@mdx-js/react';
-import { ThemeProvider, ensure as ensureTheme } from '@storybook/theming';
-import { DocsWrapper, DocsContent, components as htmlComponents } from '@storybook/components';
-import { DocsContext } from './DocsContext';
-import { anchorBlockIdFromId } from './Anchor';
-import { storyBlockIdFromId } from './Story';
-import { SourceContainer } from './SourceContainer';
-import { CodeOrSourceMdx, AnchorMdx, HeadersMdx } from './mdx';
-import { scrollToElement } from './utils';
-const {
-  document,
-  window: globalWindow
-} = global;
-const defaultComponents = Object.assign({}, htmlComponents, {
-  code: CodeOrSourceMdx,
-  a: AnchorMdx
-}, HeadersMdx);
-const warnOptionsTheme = deprecate(() => {}, dedent`
-    Deprecated parameter: options.theme => docs.theme
-
-    https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/theming.md#storybook-theming
-`);
-export const DocsContainer = ({
-  context,
-  children
-}) => {
-  const {
-    id: storyId,
-    type,
-    storyById
-  } = context;
-  const allComponents = Object.assign({}, defaultComponents);
-  let theme = ensureTheme(null);
-
-  if (type === 'legacy') {
-    const {
-      parameters: {
-        options = {},
-        docs = {}
-      }
-    } = storyById(storyId);
-    let themeVars = docs.theme;
-
-    if (!themeVars && options.theme) {
-      warnOptionsTheme();
-      themeVars = options.theme;
-    }
-
-    theme = ensureTheme(themeVars);
-    Object.assign(allComponents, docs.components);
-  }
-
-  useEffect(() => {
-    let url;
-
-    try {
-      url = new URL(globalWindow.parent.location);
-    } catch (err) {
-      return;
-    }
-
-    if (url.hash) {
-      const element = document.getElementById(url.hash.substring(1));
-
-      if (element) {
-        // Introducing a delay to ensure scrolling works when it's a full refresh.
-        setTimeout(() => {
-          scrollToElement(element);
-        }, 200);
-      }
-    } else {
-      const element = document.getElementById(anchorBlockIdFromId(storyId)) || document.getElementById(storyBlockIdFromId(storyId));
-
-      if (element) {
-        const allStories = element.parentElement.querySelectorAll('[id|="anchor-"]');
-        let scrollTarget = element;
-
-        if (allStories && allStories[0] === element) {
-          // Include content above first story
-          scrollTarget = document.getElementById('docs-root');
-        } // Introducing a delay to ensure scrolling works when it's a full refresh.
-
-
-        setTimeout(() => {
-          scrollToElement(scrollTarget, 'start');
-        }, 200);
-      }
-    }
-  }, [storyId]);
-  return /*#__PURE__*/React.createElement(DocsContext.Provider, {
-    value: context
-  }, /*#__PURE__*/React.createElement(SourceContainer, null, /*#__PURE__*/React.createElement(ThemeProvider, {
-    theme: theme
-  }, /*#__PURE__*/React.createElement(MDXProvider, {
-    components: allComponents
-  }, /*#__PURE__*/React.createElement(DocsWrapper, {
-    className: "sbdocs sbdocs-wrapper"
-  }, /*#__PURE__*/React.createElement(DocsContent, {
-    className: "sbdocs sbdocs-content"
-  }, children))))));
-};

package/dist/esm/blocks/DocsContext.js

@@ -1,16 +0,0 @@
-import { createContext } from 'react';
-import { window as globalWindow } from 'global';
-
-// We add DocsContext to window. The reason is that in case DocsContext.ts is
-// imported multiple times (maybe once directly, and another time from a minified bundle)
-// we will have multiple DocsContext definitions - leading to lost context in
-// the React component tree.
-// This was specifically a problem with the Vite builder.
-
-/* eslint-disable no-underscore-dangle */
-if (globalWindow && globalWindow.__DOCS_CONTEXT__ === undefined) {
-  globalWindow.__DOCS_CONTEXT__ = /*#__PURE__*/createContext(null);
-  globalWindow.__DOCS_CONTEXT__.displayName = 'DocsContext';
-}
-
-export const DocsContext = globalWindow ? globalWindow.__DOCS_CONTEXT__ : /*#__PURE__*/createContext(null);

package/dist/esm/blocks/DocsPage.js

@@ -1,11 +0,0 @@
-import React from 'react';
-import { Title } from './Title';
-import { Subtitle } from './Subtitle';
-import { Description } from './Description';
-import { Primary } from './Primary';
-import { PRIMARY_STORY } from './types';
-import { ArgsTable } from './ArgsTable';
-import { Stories } from './Stories';
-export const DocsPage = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Title, null), /*#__PURE__*/React.createElement(Subtitle, null), /*#__PURE__*/React.createElement(Description, null), /*#__PURE__*/React.createElement(Primary, null), /*#__PURE__*/React.createElement(ArgsTable, {
-  story: PRIMARY_STORY
-}), /*#__PURE__*/React.createElement(Stories, null));

package/dist/esm/blocks/DocsRenderer.js

@@ -1,32 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { DocsContainer } from './DocsContainer';
-import { DocsPage } from './DocsPage';
-export class DocsRenderer {
-  constructor() {
-    this.render = void 0;
-    this.unmount = void 0;
-
-    this.render = (docsContext, docsParameters, element, callback) => {
-      renderDocsAsync(docsContext, docsParameters, element).then(callback);
-    };
-
-    this.unmount = element => {
-      ReactDOM.unmountComponentAtNode(element);
-    };
-  }
-
-}
-
-async function renderDocsAsync(docsContext, docsParameters, element) {
-  const Container = docsParameters.container || (await docsParameters.getContainer?.()) || DocsContainer;
-  const Page = docsParameters.page || (await docsParameters.getPage?.()) || DocsPage; // Use `title` as a key so that we force a re-render every time we switch components
-
-  const docsElement = /*#__PURE__*/React.createElement(Container, {
-    key: docsContext.title,
-    context: docsContext
-  }, /*#__PURE__*/React.createElement(Page, null));
-  await new Promise(resolve => {
-    ReactDOM.render(docsElement, element, resolve);
-  });
-}

package/dist/esm/blocks/DocsStory.js

@@ -1,46 +0,0 @@
-import React from 'react';
-import deprecate from 'util-deprecate';
-import dedent from 'ts-dedent';
-import { Subheading } from './Subheading';
-import { Anchor } from './Anchor';
-import { Description } from './Description';
-import { Story } from './Story';
-import { Canvas } from './Canvas';
-const warnStoryDescription = deprecate(() => {}, dedent`
-    Deprecated parameter: docs.storyDescription => docs.description.story
-      
-    https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#docs-description-parameter
-  `);
-export const DocsStory = ({
-  id,
-  name,
-  expanded = true,
-  withToolbar = false,
-  parameters = {}
-}) => {
-  let description;
-  const {
-    docs
-  } = parameters;
-
-  if (expanded && docs) {
-    description = docs.description?.story;
-
-    if (!description) {
-      description = docs.storyDescription;
-      if (description) warnStoryDescription();
-    }
-  }
-
-  const subheading = expanded && name;
-  return /*#__PURE__*/React.createElement(Anchor, {
-    storyId: id
-  }, subheading && /*#__PURE__*/React.createElement(Subheading, null, subheading), description && /*#__PURE__*/React.createElement(Description, {
-    markdown: description
-  }), /*#__PURE__*/React.createElement(Canvas, {
-    withToolbar: withToolbar
-  }, /*#__PURE__*/React.createElement(Story, {
-    id: id,
-    parameters: parameters
-  })));
-};

package/dist/esm/blocks/ExternalDocsContainer.js

@@ -1,48 +0,0 @@
-import React from 'react';
-import { ThemeProvider, themes, ensure } from '@storybook/theming';
-import { DocsContext } from './DocsContext';
-import { ExternalPreview } from './ExternalPreview';
-let preview;
-export const ExternalDocsContainer = ({
-  projectAnnotations,
-  children
-}) => {
-  if (!preview) preview = new ExternalPreview(projectAnnotations);
-  let pageMeta;
-
-  const setMeta = m => {
-    pageMeta = m;
-  };
-
-  const docsContext = {
-    type: 'external',
-    id: 'external-docs',
-    title: 'External',
-    name: 'Docs',
-    storyIdByModuleExport: (storyExport, metaExport) => {
-      return preview.storyIdByModuleExport(storyExport, metaExport || pageMeta);
-    },
-    storyById: id => {
-      return preview.storyById(id);
-    },
-    getStoryContext: () => {
-      throw new Error('not implemented');
-    },
-    componentStories: () => {
-      // TODO: could implement in a very similar way to in DocsRender. (TODO: How to share code?)
-      throw new Error('not implemented');
-    },
-    loadStory: async id => {
-      return preview.storyById(id);
-    },
-    renderStoryToElement: (story, element) => {
-      return preview.renderStoryToElement(story, element);
-    },
-    setMeta
-  };
-  return /*#__PURE__*/React.createElement(DocsContext.Provider, {
-    value: docsContext
-  }, /*#__PURE__*/React.createElement(ThemeProvider, {
-    theme: ensure(themes.normal)
-  }, children));
-};

package/dist/esm/blocks/ExternalPreview.js

@@ -1,89 +0,0 @@
-import { Preview } from '@storybook/preview-web';
-import { toId } from '@storybook/csf';
-
-class ConstantMap {
-  // eslint-disable-next-line no-useless-constructor
-  constructor(prefix) {
-    this.prefix = prefix;
-    this.entries = new Map();
-  }
-
-  get(key) {
-    if (!this.entries.has(key)) {
-      this.entries.set(key, `${this.prefix}${this.entries.size}`);
-    }
-
-    return this.entries.get(key);
-  }
-
-}
-
-export class ExternalPreview extends Preview {
-  constructor(projectAnnotations) {
-    super();
-    this.projectAnnotations = projectAnnotations;
-    this.initialized = false;
-    this.importPaths = new ConstantMap('./importPath/');
-    this.titles = new ConstantMap('title-');
-    this.storyIds = new Map();
-    this.storyIndex = {
-      v: 4,
-      entries: {}
-    };
-    this.moduleExportsByImportPath = {};
-  }
-
-  storyIdByModuleExport(storyExport, meta) {
-    if (!this.storyIds.has(storyExport)) this.addStoryFromExports(storyExport, meta);
-    return this.storyIds.get(storyExport);
-  }
-
-  addStoryFromExports(storyExport, meta) {
-    const importPath = this.importPaths.get(meta);
-    this.moduleExportsByImportPath[importPath] = meta;
-    const title = meta.default.title || this.titles.get(meta);
-    const exportEntry = Object.entries(meta).find(([_, moduleExport]) => moduleExport === storyExport);
-    if (!exportEntry) throw new Error(`Didn't find \`of\` used in Story block in the provided CSF exports`);
-    const storyId = toId(title, exportEntry[0]);
-    this.storyIds.set(storyExport, storyId);
-    this.storyIndex.entries[storyId] = {
-      id: storyId,
-      importPath,
-      title,
-      name: 'Name',
-      type: 'story'
-    };
-
-    if (!this.initialized) {
-      this.initialized = true;
-      return this.initialize({
-        getStoryIndex: () => this.storyIndex,
-        importFn: path => {
-          return Promise.resolve(this.moduleExportsByImportPath[path]);
-        },
-        getProjectAnnotations: () => this.projectAnnotations
-      });
-    } // else
-
-
-    return this.onStoriesChanged({
-      storyIndex: this.storyIndex
-    });
-  }
-
-  storyById(storyId) {
-    const entry = this.storyIndex.entries[storyId];
-    if (!entry) throw new Error(`Unknown storyId ${storyId}`);
-    const {
-      importPath,
-      title
-    } = entry;
-    const moduleExports = this.moduleExportsByImportPath[importPath];
-    const csfFile = this.storyStore.processCSFFileWithCache(moduleExports, importPath, title);
-    return this.storyStore.storyFromCSFFile({
-      storyId,
-      csfFile
-    });
-  }
-
-}

package/dist/esm/blocks/Heading.js

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

package/dist/esm/blocks/Meta.js

@@ -1,45 +0,0 @@
-import React, { useContext } from 'react';
-import global from 'global';
-import { Anchor } from './Anchor';
-import { DocsContext } from './DocsContext';
-const {
-  document
-} = global;
-
-function getFirstStoryId(docsContext) {
-  const stories = docsContext.componentStories();
-  return stories.length > 0 ? stories[0].id : null;
-}
-
-function renderAnchor() {
-  const context = useContext(DocsContext);
-
-  if (context.type !== 'legacy') {
-    return null;
-  }
-
-  const anchorId = getFirstStoryId(context) || context.id;
-  return /*#__PURE__*/React.createElement(Anchor, {
-    storyId: anchorId
-  });
-}
-/**
- * This component is used to declare component metadata in docs
- * and gets transformed into a default export underneath the hood.
- */
-
-
-export const Meta = ({
-  of
-}) => {
-  let isDocs = true;
-
-  if (document) {
-    const params = new URL(document.location).searchParams;
-    isDocs = params.get('viewMode') === 'docs';
-  }
-
-  const context = useContext(DocsContext);
-  if (of) context.setMeta(of);
-  return isDocs ? renderAnchor() : null;
-};

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