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

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,34 +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) {
-  // 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] = useState({});
-  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/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/types/blocks/Anchor.d.ts

@@ -1,6 +0,0 @@
-import { FC } from 'react';
-export declare const anchorBlockIdFromId: (storyId: string) => string;
-export interface AnchorProps {
-    storyId: string;
-}
-export declare const Anchor: FC<AnchorProps>;

package/dist/types/blocks/ArgsTable.d.ts

@@ -1,33 +0,0 @@
-import { FC } from 'react';
-import { SortType } from '@storybook/components';
-import { PropDescriptor } from '@storybook/store';
-import { StrictArgTypes } from '@storybook/csf';
-import { DocsContextProps } from './DocsContext';
-import { Component } from './types';
-interface BaseProps {
-    include?: PropDescriptor;
-    exclude?: PropDescriptor;
-    sort?: SortType;
-}
-declare type OfProps = BaseProps & {
-    of: '.' | '^' | Component;
-};
-declare type ComponentsProps = BaseProps & {
-    components: {
-        [label: string]: Component;
-    };
-};
-declare type StoryProps = BaseProps & {
-    story: '.' | '^' | string;
-    showComponent?: boolean;
-};
-declare type ArgsTableProps = BaseProps | OfProps | ComponentsProps | StoryProps;
-export declare const extractComponentArgTypes: (component: Component, { id, storyById }: DocsContextProps, include?: PropDescriptor, exclude?: PropDescriptor) => StrictArgTypes;
-export declare const getComponent: (props: ArgsTableProps, { id, storyById }: DocsContextProps) => Component;
-export declare const StoryTable: FC<StoryProps & {
-    component: Component;
-    subcomponents: Record<string, Component>;
-}>;
-export declare const ComponentsTable: FC<ComponentsProps>;
-export declare const ArgsTable: FC<ArgsTableProps>;
-export {};

package/dist/types/blocks/Canvas.d.ts

@@ -1,9 +0,0 @@
-import { FC } from 'react';
-import { PreviewProps as PurePreviewProps } from '@storybook/components';
-import { SourceState } from './Source';
-export { SourceState };
-declare type CanvasProps = PurePreviewProps & {
-    withSource?: SourceState;
-    mdxSource?: string;
-};
-export declare const Canvas: FC<CanvasProps>;

package/dist/types/blocks/Description.d.ts

@@ -1,20 +0,0 @@
-import { FunctionComponent } from 'react';
-import { DescriptionProps as PureDescriptionProps } from '@storybook/components';
-import { DocsContextProps } from './DocsContext';
-import { Component } from './types';
-export declare enum DescriptionType {
-    INFO = "info",
-    NOTES = "notes",
-    DOCGEN = "docgen",
-    LEGACY_5_2 = "legacy-5.2",
-    AUTO = "auto"
-}
-interface DescriptionProps {
-    of?: '.' | Component;
-    type?: DescriptionType;
-    markdown?: string;
-    children?: string;
-}
-export declare const getDescriptionProps: ({ of, type, markdown, children }: DescriptionProps, { id, storyById }: DocsContextProps<any>) => PureDescriptionProps;
-declare const DescriptionContainer: FunctionComponent<DescriptionProps>;
-export { DescriptionContainer as Description };

package/dist/types/blocks/DocsContainer.d.ts

@@ -1,7 +0,0 @@
-import { FunctionComponent } from 'react';
-import { AnyFramework } from '@storybook/csf';
-import { DocsContextProps } from './DocsContext';
-export interface DocsContainerProps<TFramework extends AnyFramework = AnyFramework> {
-    context: DocsContextProps<TFramework>;
-}
-export declare const DocsContainer: FunctionComponent<DocsContainerProps>;

package/dist/types/blocks/DocsContext.d.ts

@@ -1,5 +0,0 @@
-import { Context } from 'react';
-import type { DocsContextProps } from '@storybook/preview-web';
-import type { AnyFramework } from '@storybook/csf';
-export type { DocsContextProps };
-export declare const DocsContext: Context<DocsContextProps<AnyFramework>>;

package/dist/types/blocks/DocsPage.d.ts

@@ -1,2 +0,0 @@
-import { FC } from 'react';
-export declare const DocsPage: FC;

package/dist/types/blocks/DocsRenderer.d.ts

@@ -1,7 +0,0 @@
-import { AnyFramework } from '@storybook/csf';
-import { DocsRenderFunction } from '@storybook/preview-web';
-export declare class DocsRenderer<TFramework extends AnyFramework> {
-    render: DocsRenderFunction<TFramework>;
-    unmount: (element: HTMLElement) => void;
-    constructor();
-}

package/dist/types/blocks/DocsStory.d.ts

@@ -1,3 +0,0 @@
-import { FunctionComponent } from 'react';
-import { DocsStoryProps } from './types';
-export declare const DocsStory: FunctionComponent<DocsStoryProps>;

package/dist/types/blocks/ExternalDocsContainer.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-export declare const ExternalDocsContainer: React.FC<{
-    projectAnnotations: any;
-}>;

package/dist/types/blocks/ExternalPreview.d.ts

@@ -1,19 +0,0 @@
-import { Preview } from '@storybook/preview-web';
-import { ModuleExports, ModuleExport } from '@storybook/store';
-import { AnyFramework, StoryId, ProjectAnnotations } from '@storybook/csf';
-declare type StoryExport = ModuleExport;
-declare type MetaExport = ModuleExports;
-export declare class ExternalPreview<TFramework extends AnyFramework> extends Preview<TFramework> {
-    projectAnnotations: ProjectAnnotations;
-    private initialized;
-    private importPaths;
-    private titles;
-    storyIds: Map<any, string>;
-    private storyIndex;
-    private moduleExportsByImportPath;
-    constructor(projectAnnotations: ProjectAnnotations);
-    storyIdByModuleExport(storyExport: StoryExport, meta: MetaExport): string;
-    addStoryFromExports(storyExport: StoryExport, meta: MetaExport): Promise<void>;
-    storyById(storyId: StoryId): import("@storybook/store").Story<TFramework>;
-}
-export {};

package/dist/types/blocks/Heading.d.ts

@@ -1,6 +0,0 @@
-import { FunctionComponent } from 'react';
-export interface HeadingProps {
-    children: JSX.Element | string;
-    disableAnchor?: boolean;
-}
-export declare const Heading: FunctionComponent<HeadingProps>;

package/dist/types/blocks/Meta.d.ts

@@ -1,12 +0,0 @@
-import { FC } from 'react';
-import { BaseAnnotations } from '@storybook/csf';
-import type { ModuleExports } from '@storybook/store';
-declare type MetaProps = BaseAnnotations & {
-    of?: ModuleExports;
-};
-/**
- * This component is used to declare component metadata in docs
- * and gets transformed into a default export underneath the hood.
- */
-export declare const Meta: FC<MetaProps>;
-export {};

package/dist/types/blocks/Preview.d.ts

@@ -1,3 +0,0 @@
-import { ComponentProps } from 'react';
-import { Canvas } from './Canvas';
-export declare const Preview: (props: ComponentProps<typeof Canvas>) => JSX.Element;

package/dist/types/blocks/Primary.d.ts

@@ -1,6 +0,0 @@
-import { FC } from 'react';
-interface PrimaryProps {
-    name?: string;
-}
-export declare const Primary: FC<PrimaryProps>;
-export {};

package/dist/types/blocks/Props.d.ts

@@ -1,3 +0,0 @@
-import { ComponentProps } from 'react';
-import { ArgsTable } from './ArgsTable';
-export declare const Props: (props: ComponentProps<typeof ArgsTable>) => JSX.Element;

package/dist/types/blocks/Source.d.ts

@@ -1,38 +0,0 @@
-import { ComponentProps, FC } from 'react';
-import { Source as PureSource } from '@storybook/components';
-import { DocsContextProps } from './DocsContext';
-import { SourceContextProps } from './SourceContainer';
-export declare enum SourceState {
-    OPEN = "open",
-    CLOSED = "closed",
-    NONE = "none"
-}
-interface CommonProps {
-    language?: string;
-    dark?: boolean;
-    format?: PureSourceProps['format'];
-    code?: string;
-}
-declare type SingleSourceProps = {
-    id: string;
-} & CommonProps;
-declare type MultiSourceProps = {
-    ids: string[];
-} & CommonProps;
-declare type CodeProps = {
-    code: string;
-} & CommonProps;
-declare type NoneProps = CommonProps;
-declare type SourceProps = SingleSourceProps | MultiSourceProps | CodeProps | NoneProps;
-declare type SourceStateProps = {
-    state: SourceState;
-};
-declare type PureSourceProps = ComponentProps<typeof PureSource>;
-export declare const getSourceProps: (props: SourceProps, docsContext: DocsContextProps<any>, sourceContext: SourceContextProps) => PureSourceProps & SourceStateProps;
-/**
- * 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 declare const Source: FC<PureSourceProps>;
-export {};

package/dist/types/blocks/SourceContainer.d.ts

@@ -1,14 +0,0 @@
-import { FC, Context } from 'react';
-import type { SyntaxHighlighterFormatTypes } from '@storybook/components';
-import type { StoryId } from '@storybook/api';
-export interface SourceItem {
-    code: string;
-    format: SyntaxHighlighterFormatTypes;
-}
-export declare type StorySources = Record<StoryId, SourceItem>;
-export interface SourceContextProps {
-    sources: StorySources;
-    setSource?: (id: StoryId, item: SourceItem) => void;
-}
-export declare const SourceContext: Context<SourceContextProps>;
-export declare const SourceContainer: FC<{}>;

package/dist/types/blocks/Stories.d.ts

@@ -1,7 +0,0 @@
-import { FunctionComponent } from 'react';
-interface StoriesProps {
-    title?: JSX.Element | string;
-    includePrimary?: boolean;
-}
-export declare const Stories: FunctionComponent<StoriesProps>;
-export {};

package/dist/types/blocks/Story.d.ts

@@ -1,30 +0,0 @@
-import { FunctionComponent, ReactNode, ElementType, ComponentProps } from 'react';
-import { Story as PureStory } from '@storybook/components';
-import { StoryId, StoryAnnotations, AnyFramework } from '@storybook/csf';
-import type { ModuleExport, ModuleExports, Story as StoryType } from '@storybook/store';
-import { DocsContextProps } from './DocsContext';
-export declare const storyBlockIdFromId: (storyId: string) => string;
-declare type PureStoryProps = ComponentProps<typeof PureStory>;
-declare type CommonProps = StoryAnnotations & {
-    height?: string;
-    inline?: boolean;
-};
-declare type StoryDefProps = {
-    name: string;
-    children: ReactNode;
-};
-declare type StoryRefProps = {
-    id?: string;
-    of?: ModuleExport;
-    meta?: ModuleExports;
-};
-declare type StoryImportProps = {
-    name: string;
-    story: ElementType;
-};
-export declare type StoryProps = (StoryDefProps | StoryRefProps | StoryImportProps) & CommonProps;
-export declare const lookupStoryId: (storyName: string, { mdxStoryNameToKey, mdxComponentAnnotations }: DocsContextProps) => string;
-export declare const getStoryId: (props: StoryProps, context: DocsContextProps) => StoryId;
-export declare const getStoryProps: <TFramework extends AnyFramework>({ height, inline }: StoryProps, story: StoryType<TFramework>) => PureStoryProps;
-declare const Story: FunctionComponent<StoryProps>;
-export { Story };

package/dist/types/blocks/Subheading.d.ts

@@ -1,3 +0,0 @@
-import { FunctionComponent } from 'react';
-import { HeadingProps } from './Heading';
-export declare const Subheading: FunctionComponent<HeadingProps>;

package/dist/types/blocks/Subtitle.d.ts

@@ -1,6 +0,0 @@
-import { FunctionComponent } from 'react';
-interface SubtitleProps {
-    children?: JSX.Element | string;
-}
-export declare const Subtitle: FunctionComponent<SubtitleProps>;
-export {};

package/dist/types/blocks/Title.d.ts

@@ -1,8 +0,0 @@
-import { FunctionComponent } from 'react';
-import { DocsContextProps } from './DocsContext';
-interface TitleProps {
-    children?: JSX.Element | string;
-}
-export declare const extractTitle: ({ title }: DocsContextProps) => string;
-export declare const Title: FunctionComponent<TitleProps>;
-export {};

package/dist/types/blocks/Wrapper.d.ts

@@ -1,2 +0,0 @@
-import { FunctionComponent } from 'react';
-export declare const Wrapper: FunctionComponent;

package/dist/types/blocks/enhanceSource.d.ts

@@ -1,3 +0,0 @@
-import type { Parameters } from '@storybook/addons';
-import type { Story } from '@storybook/store';
-export declare const enhanceSource: (story: Story<any>) => Parameters;

package/dist/types/blocks/mdx.d.ts

@@ -1,20 +0,0 @@
-import { FC } from 'react';
-import { DocsContextProps } from './DocsContext';
-export declare const assertIsFn: (val: any) => any;
-export declare const AddContext: FC<DocsContextProps>;
-interface CodeOrSourceMdxProps {
-    className?: string;
-}
-export declare const CodeOrSourceMdx: FC<CodeOrSourceMdxProps>;
-interface AnchorMdxProps {
-    href: string;
-    target: string;
-}
-export declare const AnchorMdx: FC<AnchorMdxProps>;
-interface HeaderMdxProps {
-    as: string;
-    id: string;
-}
-export declare const HeaderMdx: FC<HeaderMdxProps>;
-export declare const HeadersMdx: {};
-export {};

package/dist/types/blocks/types.d.ts

@@ -1,13 +0,0 @@
-export declare const CURRENT_SELECTION = ".";
-export declare const PRIMARY_STORY = "^";
-export declare type Component = any;
-export interface StoryData {
-    id?: string;
-    kind?: string;
-    name?: string;
-    parameters?: any;
-}
-export declare type DocsStoryProps = StoryData & {
-    expanded?: boolean;
-    withToolbar?: boolean;
-};

package/dist/types/blocks/useStory.d.ts

@@ -1,5 +0,0 @@
-import type { StoryId, AnyFramework } from '@storybook/csf';
-import type { Story } from '@storybook/store';
-import { DocsContextProps } from './DocsContext';
-export declare function useStory<TFramework extends AnyFramework = AnyFramework>(storyId: StoryId, context: DocsContextProps<TFramework>): Story<TFramework> | void;
-export declare function useStories<TFramework extends AnyFramework = AnyFramework>(storyIds: StoryId[], context: DocsContextProps<TFramework>): (Story<TFramework> | void)[];

package/dist/types/blocks/utils.d.ts

@@ -1,3 +0,0 @@
-import { Component } from './types';
-export declare const getComponentName: (component: Component) => string;
-export declare function scrollToElement(element: any, block?: string): void;