@storybook/addon-docs 9.1.0-alpha.5 → 9.1.0-alpha.6

package/dist/DocsContainer-fccc2203.d.ts

@@ -0,0 +1,51 @@
+import React__default, { ReactElement, FC, PropsWithChildren } from 'react';
+import { Channel } from 'storybook/internal/channels';
+import { Renderer, DocsContextProps } from 'storybook/internal/types';
+import { ThemeVars } from 'storybook/theming';
+
+interface TocbotOptions {
+    tocSelector: string;
+    contentSelector: string;
+    headingSelector: string;
+    ignoreSelector?: string;
+    headingsOffset?: number;
+    scrollSmoothOffset?: number;
+    orderedList?: boolean;
+    onClick?: (e: MouseEvent) => void;
+    scrollEndCallback?: () => void;
+    [key: string]: unknown;
+}
+interface TocParameters {
+    /** CSS selector for the container to search for headings. */
+    contentsSelector?: string;
+    /**
+     * When true, hide the TOC. We still show the empty container (as opposed to showing nothing at
+     * all) because it affects the page layout and we want to preserve the layout across pages.
+     */
+    disable?: boolean;
+    /** CSS selector to match headings to list in the TOC. */
+    headingSelector?: string;
+    /** Headings that match the ignoreSelector will be skipped. */
+    ignoreSelector?: string;
+    /** Custom title ReactElement or string to display above the TOC. */
+    title?: ReactElement | string | null;
+    /**
+     * TocBot options, not guaranteed to be available in future versions.
+     *
+     * @see tocbot docs {@link https://tscanlin.github.io/tocbot/#usage}
+     */
+    unsafeTocbotOptions?: Omit<TocbotOptions, 'onClick' | 'scrollEndCallback'>;
+}
+type TableOfContentsProps = React__default.PropsWithChildren<TocParameters & {
+    className?: string;
+    channel: Channel;
+}>;
+declare const TableOfContents: ({ title, disable, headingSelector, contentsSelector, ignoreSelector, unsafeTocbotOptions, channel, className, }: TableOfContentsProps) => React__default.JSX.Element;
+
+interface DocsContainerProps<TFramework extends Renderer = Renderer> {
+    context: DocsContextProps<TFramework>;
+    theme?: ThemeVars;
+}
+declare const DocsContainer: FC<PropsWithChildren<DocsContainerProps>>;
+
+export { DocsContainerProps as D, TocParameters as T, TableOfContents as a, DocsContainer as b };

package/dist/blocks.d.ts

@@ -1,13 +1,49 @@
 import * as React from 'react';
-import React__default, { FC, ComponentProps, FunctionComponent, PropsWithChildren, ReactElement, Context, ReactNode } from 'react';
+import React__default, { ComponentProps, FunctionComponent, PropsWithChildren, FC, Context, ReactElement, ReactNode } from 'react';
 import { Conditional, DocsContextProps, PreparedStory, ModuleExports, Renderer as Renderer$1, Args as Args$1, StoryId, ModuleExport, ResolvedModuleExportType, ResolvedModuleExportFromType, Parameters as Parameters$1, ProjectAnnotations, BaseAnnotations, ComponentTitle } from 'storybook/internal/types';
 export { DocsContextProps } from 'storybook/internal/types';
-import { Channel } from 'storybook/internal/channels';
+export { b as DocsContainer, D as DocsContainerProps, a as TableOfContents } from './DocsContainer-fccc2203.js';
 import { Renderer } from 'storybook/internal/csf';
 import { PropDescriptor } from 'storybook/preview-api';
 import { SupportedLanguage, SyntaxHighlighter, ActionItem, SyntaxHighlighterFormatTypes } from 'storybook/internal/components';
 import { SourceType } from 'storybook/internal/docs-tools';
-import { ThemeVars } from 'storybook/theming';
+import 'storybook/internal/channels';
+import 'storybook/theming';
+
+declare enum SourceError {
+    NO_STORY = "There\u2019s no story here.",
+    SOURCE_UNAVAILABLE = "Oh no! The source is not available."
+}
+interface SourceCodeProps {
+    /** The language the syntax highlighter uses for your story’s code */
+    language?: SupportedLanguage;
+    /** Use this to override the content of the source block. */
+    code?: string;
+    /** The formatter the syntax highlighter uses for your story’s code. */
+    format?: ComponentProps<typeof SyntaxHighlighter>['format'];
+    /** Display the source snippet in a dark mode. */
+    dark?: boolean;
+}
+interface SourceProps$1 extends SourceCodeProps {
+    isLoading?: boolean;
+    error?: SourceError;
+}
+/** Syntax-highlighted source code for a component (or anything!) */
+declare const Source$1: FunctionComponent<SourceProps$1>;
+
+type PreviewProps = PropsWithChildren<{
+    isLoading?: true;
+    layout?: Layout;
+    inline?: boolean;
+    isColumn?: boolean;
+    columns?: number;
+    withSource?: SourceProps$1;
+    isExpanded?: boolean;
+    withToolbar?: boolean;
+    className?: string;
+    additionalActions?: ActionItem[];
+}>;
+type Layout = 'padded' | 'fullscreen' | 'centered';
 
 interface ArgType {
     name?: string;
@@ -74,41 +110,6 @@ type ArgsTableProps = ArgsTableOptionProps & (ArgsTableDataProps | ArgsTableErro
  */
 declare const ArgsTable: FC<ArgsTableProps>;
 
-declare enum SourceError {
-    NO_STORY = "There\u2019s no story here.",
-    SOURCE_UNAVAILABLE = "Oh no! The source is not available."
-}
-interface SourceCodeProps {
-    /** The language the syntax highlighter uses for your story’s code */
-    language?: SupportedLanguage;
-    /** Use this to override the content of the source block. */
-    code?: string;
-    /** The formatter the syntax highlighter uses for your story’s code. */
-    format?: ComponentProps<typeof SyntaxHighlighter>['format'];
-    /** Display the source snippet in a dark mode. */
-    dark?: boolean;
-}
-interface SourceProps$1 extends SourceCodeProps {
-    isLoading?: boolean;
-    error?: SourceError;
-}
-/** Syntax-highlighted source code for a component (or anything!) */
-declare const Source$1: FunctionComponent<SourceProps$1>;
-
-type PreviewProps = PropsWithChildren<{
-    isLoading?: true;
-    layout?: Layout;
-    inline?: boolean;
-    isColumn?: boolean;
-    columns?: number;
-    withSource?: SourceProps$1;
-    isExpanded?: boolean;
-    withToolbar?: boolean;
-    className?: string;
-    additionalActions?: ActionItem[];
-}>;
-type Layout = 'padded' | 'fullscreen' | 'centered';
-
 interface CommonProps {
     story: PreparedStory;
     inline: boolean;
@@ -174,45 +175,6 @@ interface IconGalleryProps {
 /** Show a grid of icons, as specified by `IconItem`. */
 declare const IconGallery: FunctionComponent<IconGalleryProps>;
 
-interface TocbotOptions {
-    tocSelector: string;
-    contentSelector: string;
-    headingSelector: string;
-    ignoreSelector?: string;
-    headingsOffset?: number;
-    scrollSmoothOffset?: number;
-    orderedList?: boolean;
-    onClick?: (e: MouseEvent) => void;
-    scrollEndCallback?: () => void;
-    [key: string]: unknown;
-}
-interface TocParameters {
-    /** CSS selector for the container to search for headings. */
-    contentsSelector?: string;
-    /**
-     * When true, hide the TOC. We still show the empty container (as opposed to showing nothing at
-     * all) because it affects the page layout and we want to preserve the layout across pages.
-     */
-    disable?: boolean;
-    /** CSS selector to match headings to list in the TOC. */
-    headingSelector?: string;
-    /** Headings that match the ignoreSelector will be skipped. */
-    ignoreSelector?: string;
-    /** Custom title ReactElement or string to display above the TOC. */
-    title?: ReactElement | string | null;
-    /**
-     * TocBot options, not guaranteed to be available in future versions.
-     *
-     * @see tocbot docs {@link https://tscanlin.github.io/tocbot/#usage}
-     */
-    unsafeTocbotOptions?: Omit<TocbotOptions, 'onClick' | 'scrollEndCallback'>;
-}
-type TableOfContentsProps = React__default.PropsWithChildren<TocParameters & {
-    className?: string;
-    channel: Channel;
-}>;
-declare const TableOfContents: ({ title, disable, headingSelector, contentsSelector, ignoreSelector, unsafeTocbotOptions, channel, className, }: TableOfContentsProps) => React__default.JSX.Element;
-
 declare const anchorBlockIdFromId: (storyId: string) => string;
 interface AnchorProps {
     storyId: string;
@@ -411,12 +373,6 @@ declare function Docs<TRenderer extends Renderer$1 = Renderer$1>({ context, docs
 
 declare const DocsPage: FC;
 
-interface DocsContainerProps<TFramework extends Renderer$1 = Renderer$1> {
-    context: DocsContextProps<TFramework>;
-    theme?: ThemeVars;
-}
-declare const DocsContainer: FC<PropsWithChildren<DocsContainerProps>>;
-
 declare const PRIMARY_STORY = "^";
 type Component = any;
 type DocsStoryProps = {
@@ -1069,4 +1025,4 @@ type ColorProps = ColorControlProps;
 declare const LazyColorControl: React__default.LazyExoticComponent<React__default.FC<ColorControlProps>>;
 declare const ColorControl: (props: ComponentProps<typeof LazyColorControl>) => React__default.JSX.Element;
 
-export { AddContext, Anchor, AnchorMdx, AnchorProps, ArgTypes, BooleanConfig, BooleanControl, BooleanProps, BooleanValue, Canvas, CodeOrSourceMdx, ColorConfig, ColorControl, ColorItem, ColorPalette, ColorProps, ColorValue, Component, Control, ControlProps, ControlType, Controls, DateConfig, DateControl, DateProps, DateValue, DescriptionContainer as Description, DescriptionType, Docs, DocsContainer, DocsContainerProps, DocsContext, DocsPage, DocsProps, DocsStory, DocsStoryProps, ExternalDocs, ExternalDocsContainer, ExternalDocsProps, FilesControl, FilesControlProps, HeaderMdx, HeadersMdx, Heading, HeadingProps, IconGallery, IconItem, Markdown, Meta, NormalizedOptionsConfig, NumberConfig, NumberControl, NumberValue, ObjectConfig, ObjectControl, ObjectProps, ObjectValue, Of, Options, OptionsArray, OptionsConfig, OptionsControl, OptionsControlType, OptionsMultiSelection, OptionsObject, OptionsProps, OptionsSelection, OptionsSingleSelection, PRIMARY_STORY, PresetColor, Primary, ArgsTable as PureArgsTable, RangeConfig, RangeControl, SortType, Source, SourceContainer, SourceContext, SourceContextProps, SourceItem, SourceParameters, SourceProps, Stories, Story, StoryProps, StorySources, Subheading, Subtitle, TableOfContents, TextConfig, TextControl, TextProps, TextValue, Title, Typeset, UNKNOWN_ARGS_HASH, Unstyled, Wrapper, anchorBlockIdFromId, argsHash, assertIsFn, extractTitle, format, formatDate, formatTime, getStoryId, getStoryProps, parse, parseDate, parseTime, slugs, useOf, useSourceProps };
+export { AddContext, Anchor, AnchorMdx, AnchorProps, ArgTypes, BooleanConfig, BooleanControl, BooleanProps, BooleanValue, Canvas, CodeOrSourceMdx, ColorConfig, ColorControl, ColorItem, ColorPalette, ColorProps, ColorValue, Component, Control, ControlProps, ControlType, Controls, DateConfig, DateControl, DateProps, DateValue, DescriptionContainer as Description, DescriptionType, Docs, DocsContext, DocsPage, DocsProps, DocsStory, DocsStoryProps, ExternalDocs, ExternalDocsContainer, ExternalDocsProps, FilesControl, FilesControlProps, HeaderMdx, HeadersMdx, Heading, HeadingProps, IconGallery, IconItem, Markdown, Meta, NormalizedOptionsConfig, NumberConfig, NumberControl, NumberValue, ObjectConfig, ObjectControl, ObjectProps, ObjectValue, Of, Options, OptionsArray, OptionsConfig, OptionsControl, OptionsControlType, OptionsMultiSelection, OptionsObject, OptionsProps, OptionsSelection, OptionsSingleSelection, PRIMARY_STORY, PresetColor, Primary, ArgsTable as PureArgsTable, RangeConfig, RangeControl, SortType, Source, SourceContainer, SourceContext, SourceContextProps, SourceItem, SourceParameters, SourceProps, Stories, Story, StoryProps, StorySources, Subheading, Subtitle, TextConfig, TextControl, TextProps, TextValue, Title, Typeset, UNKNOWN_ARGS_HASH, Unstyled, Wrapper, anchorBlockIdFromId, argsHash, assertIsFn, extractTitle, format, formatDate, formatTime, getStoryId, getStoryProps, parse, parseDate, parseTime, slugs, useOf, useSourceProps };

package/dist/index.d.ts

@@ -1,5 +1,9 @@
 import * as storybook_internal_csf from 'storybook/internal/csf';
+import { ComponentType } from 'react';
 import { ModuleExports, ModuleExport, Renderer, DocsRenderFunction } from 'storybook/internal/types';
+import { ThemeVars } from 'storybook/theming';
+import { D as DocsContainerProps, T as TocParameters } from './DocsContainer-fccc2203.js';
+import 'storybook/internal/channels';
 
 type StoryBlockParameters = {
     /** Whether a story's play function runs when shown in docs page */
@@ -111,7 +115,7 @@ type SourceBlockParameters = {
      */
     of: ModuleExport;
     /** Source code transformations */
-    transform?: (code: string, storyContext: any) => string;
+    transform?: (code: string, storyContext: any) => string | Promise<string>;
     /**
      * Specifies how the source code is rendered.
      *
@@ -139,12 +143,24 @@ interface DocsParameters {
          * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-canvas
          */
         canvas?: Partial<CanvasBlockParameters>;
+        /**
+         * Enable the Code panel.
+         *
+         * @see https://storybook.js.org/docs/writing-docs/code-panel
+         */
+        codePanel?: boolean;
         /**
          * Controls block configuration
          *
          * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-controls
          */
         controls?: ControlsBlockParameters;
+        /**
+         * Customize the Docs Container
+         *
+         * @see https://storybook.js.org/docs/writing-docs/autodocs#customize-the-docs-container
+         */
+        container?: ComponentType<DocsContainerProps>;
         /**
          * Component/story description when shown in docs page
          *
@@ -158,7 +174,7 @@ interface DocsParameters {
          *
          * @see https://storybook.js.org/docs/writing-docs/autodocs#write-a-custom-template
          */
-        page?: unknown;
+        page?: ComponentType;
         /**
          * Source code configuration when shown in docs page
          *
@@ -177,12 +193,24 @@ interface DocsParameters {
          * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-subtitle
          */
         subtitle?: string;
+        /**
+         * Override the default theme
+         *
+         * @see https://storybook.js.org/docs/writing-docs/autodocs#override-the-default-theme
+         */
+        theme?: ThemeVars;
         /**
          * The title displayed when shown in docs page
          *
          * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-title
          */
         title?: string;
+        /**
+         * Configure the table of contents
+         *
+         * @see https://storybook.js.org/docs/writing-docs/autodocs#configure-the-table-of-contents
+         */
+        toc?: true | TocParameters;
     };
 }
 interface DocsTypes {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-docs",
-  "version": "9.1.0-alpha.5",
+  "version": "9.1.0-alpha.6",
   "description": "Document component usage and properties in Markdown",
   "keywords": [
     "addon",
@@ -111,9 +111,9 @@
   },
   "dependencies": {
     "@mdx-js/react": "^3.0.0",
-    "@storybook/csf-plugin": "9.1.0-alpha.5",
+    "@storybook/csf-plugin": "9.1.0-alpha.6",
     "@storybook/icons": "^1.2.12",
-    "@storybook/react-dom-shim": "9.1.0-alpha.5",
+    "@storybook/react-dom-shim": "9.1.0-alpha.6",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "ts-dedent": "^2.0.0"
@@ -140,7 +140,7 @@
     "vite": "^6.2.5"
   },
   "peerDependencies": {
-    "storybook": "^9.1.0-alpha.5"
+    "storybook": "^9.1.0-alpha.6"
   },
   "publishConfig": {
     "access": "public"