@storybook/addon-docs 8.6.0-alpha.5 → 8.6.0-beta.0

package/dist/chunk-PRSJUHPQ.mjs

@@ -0,0 +1,5 @@
+import { __export } from './chunk-H6MOWX77.mjs';
+
+var preview_exports={};__export(preview_exports,{parameters:()=>parameters});var excludeTags=Object.entries(globalThis.TAGS_OPTIONS??{}).reduce((acc,entry)=>{let[tag,option]=entry;return option.excludeFromDocsStories&&(acc[tag]=!0),acc},{}),parameters={docs:{renderer:async()=>{let{DocsRenderer}=await import('./DocsRenderer-CFRXHY34.mjs');return new DocsRenderer},stories:{filter:story=>(story.tags||[]).filter(tag=>excludeTags[tag]).length===0&&!story.parameters.docs?.disable}}};
+
+export { parameters, preview_exports };

package/dist/index.d.ts

@@ -1,5 +1,7 @@
+import * as core_dist_types from 'storybook/internal/types';
+import * as core_dist_csf from 'storybook/internal/csf';
 export * from '@storybook/blocks';
-import { Renderer, DocsRenderFunction } from 'storybook/internal/types';
+import { Renderer, DocsRenderFunction, ModuleExports, ModuleExport } from 'storybook/internal/types';
 
 declare class DocsRenderer<TRenderer extends Renderer> {
     render: DocsRenderFunction<TRenderer>;
@@ -7,4 +9,191 @@ declare class DocsRenderer<TRenderer extends Renderer> {
     constructor();
 }
 
-export { DocsRenderer };
+type StoryBlockParameters = {
+    /** Whether a story's play function runs when shown in docs page */
+    autoplay?: boolean;
+    /**
+     * Set a minimum height (note for an iframe this is the actual height) when rendering a story in
+     * an iframe or inline. This overrides `parameters.docs.story.iframeHeight` for iframes.
+     */
+    height?: string;
+    /** IFrame configuration */
+    iframeHeight?: string;
+    /**
+     * Whether the story is rendered inline (in the same browser frame as the other docs content) or
+     * in an iframe
+     */
+    inline?: boolean;
+    /** Specifies the CSF file to which the story is associated */
+    meta: ModuleExports;
+    /**
+     * Specifies which story is rendered by the Story block. If no `of` is defined and the MDX file is
+     * attached, the primary (first) story will be rendered.
+     */
+    of: ModuleExport;
+};
+type ControlsBlockParameters = {
+    /** Exclude specific properties from the Controls panel */
+    exclude?: string[] | RegExp;
+    /** Exclude only specific properties in the Controls panel */
+    include?: string[] | RegExp;
+    /** Controls sorting order */
+    sort?: 'none' | 'alpha' | 'requiredFirst';
+};
+type ArgTypesBlockParameters = {
+    /** Exclude specific arg types from the args table */
+    exclude?: string[] | RegExp;
+    /** Exclude only specific arg types from the args table */
+    include?: string[] | RegExp;
+    /**
+     * Specifies which story to get the arg types from. If a CSF file exports is provided, it will use
+     * the primary (first) story in the file.
+     */
+    of: ModuleExport | ModuleExports;
+    /**
+     * Controls arg types order
+     *
+     * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-argtypes#sort
+     */
+    sort?: 'none' | 'alpha' | 'requiredFirst';
+};
+type CanvasBlockParameters = {
+    /**
+     * Provides any additional custom actions to show in the bottom right corner. These are simple
+     * buttons that do anything you specify in the onClick function.
+     */
+    additionalActions?: {
+        className?: string;
+        disabled?: boolean;
+        onClick: () => void;
+        title: string | JSX.Element;
+    }[];
+    /** Provide HTML class(es) to the preview element, for custom styling. */
+    className?: string;
+    /**
+     * Specify how the canvas should layout the story.
+     *
+     * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-canvas#layout
+     */
+    layout?: 'centered' | 'fullscreen' | 'padded';
+    /** Specifies which story is rendered */
+    of: ModuleExport;
+    /** Show story source code */
+    sourceState?: 'hidden' | 'shown';
+    /**
+     * Story configuration
+     *
+     * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-canvas#story
+     */
+    story?: StoryBlockParameters;
+    /** Disable story source code */
+    withSource?: 'open' | 'closed' | 'none';
+    /** Whether to render a toolbar containing tools to interact with the story. */
+    withToolbar?: 'open' | 'closed' | 'none';
+};
+type DescriptionBlockParameters = {
+    /** Component description */
+    component?: string;
+    /** Story description */
+    story?: string;
+};
+type SourceBlockParameters = {
+    /** The source code to be rendered. Will be inferred if not passed */
+    code?: string;
+    /** Whether to render the code in dark mode */
+    dark?: boolean;
+    /** Determines if decorators are rendered in the source code snippet. */
+    excludeDecorators?: boolean;
+    /**
+     * The formatting used on source code. Both true and 'dedent' have the same effect of removing any
+     * extraneous indentation. Supports all valid prettier parser names.
+     *
+     * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-source#format
+     */
+    format?: boolean | 'dedent' | string;
+    /** Source code language */
+    language?: 'bash' | 'css' | 'graphql' | 'html' | 'json' | 'jsextra' | 'jsx' | 'md' | 'text' | 'tsx' | 'typescript' | 'yml';
+    /**
+     * Specifies which story is rendered by the Source block. If no of is defined and the MDX file is
+     * attached, the primary (first) story will be rendered.
+     */
+    of: ModuleExport;
+    /** Source code transformations */
+    transform?: (code: string, storyContext: any) => string;
+    /**
+     * Specifies how the source code is rendered.
+     *
+     * @default 'auto'
+     * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-source#type
+     */
+    type?: 'auto' | 'code' | 'dynamic';
+};
+interface DocsParameters {
+    /**
+     * Docs configuration
+     *
+     * @see https://storybook.js.org/docs/writing-docs
+     */
+    docs?: {
+        /**
+         * The subtitle displayed when shown in docs page
+         *
+         * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-argtypes
+         */
+        argTypes?: ArgTypesBlockParameters;
+        /**
+         * Canvas configuration when shown in docs page
+         *
+         * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-canvas
+         */
+        canvas?: CanvasBlockParameters;
+        /**
+         * Controls block configuration
+         *
+         * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-controls
+         */
+        controls?: ControlsBlockParameters;
+        /**
+         * Component/story description when shown in docs page
+         *
+         * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-description#writing-descriptions
+         */
+        description?: DescriptionBlockParameters;
+        /** Remove the addon panel and disable the addon's behavior */
+        disable?: boolean;
+        /**
+         * Replace the default documentation template used by Storybook with your own
+         *
+         * @see https://storybook.js.org/docs/writing-docs/autodocs#write-a-custom-template
+         */
+        page?: unknown;
+        /**
+         * Source code configuration when shown in docs page
+         *
+         * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-source
+         */
+        source?: SourceBlockParameters;
+        /**
+         * Story configuration
+         *
+         * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-story
+         */
+        story?: StoryBlockParameters;
+        /**
+         * The subtitle displayed when shown in docs page
+         *
+         * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-subtitle
+         */
+        subtitle?: string;
+        /**
+         * The title displayed when shown in docs page
+         *
+         * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-title
+         */
+        title?: string;
+    };
+}
+
+declare const _default: () => core_dist_types.ProjectAnnotations<core_dist_csf.Renderer>;
+
+export { DocsParameters, DocsRenderer, _default as default };

package/dist/index.js

@@ -1 +1 @@
-"use strict";var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to},__reExport=(target,mod,secondTarget)=>(__copyProps(target,mod,"default"),secondTarget&&__copyProps(secondTarget,mod,"default")),__toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod)),__toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var src_exports={};__export(src_exports,{DocsRenderer:()=>DocsRenderer});module.exports=__toCommonJS(src_exports);__reExport(src_exports,require("@storybook/blocks"),module.exports);var import_react=__toESM(require("react")),import_blocks=require("@storybook/blocks"),import_react_dom_shim=require("@storybook/react-dom-shim"),defaultComponents={code:import_blocks.CodeOrSourceMdx,a:import_blocks.AnchorMdx,...import_blocks.HeadersMdx},ErrorBoundary=class extends import_react.Component{constructor(){super(...arguments);this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}componentDidCatch(err){let{showException}=this.props;showException(err)}render(){let{hasError}=this.state,{children}=this.props;return hasError?null:import_react.default.createElement(import_react.default.Fragment,null,children)}},DocsRenderer=class{constructor(){this.render=async(context,docsParameter,element)=>{let components={...defaultComponents,...docsParameter?.components},TDocs=import_blocks.Docs;return new Promise((resolve,reject)=>{import("@mdx-js/react").then(({MDXProvider})=>(0,import_react_dom_shim.renderElement)(import_react.default.createElement(ErrorBoundary,{showException:reject,key:Math.random()},import_react.default.createElement(MDXProvider,{components},import_react.default.createElement(TDocs,{context,docsParameter}))),element)).then(()=>resolve())})},this.unmount=element=>{(0,import_react_dom_shim.unmountElement)(element)}}};0&&(module.exports={DocsRenderer,...require("@storybook/blocks")});
+"use strict";var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty;var __esm=(fn,res)=>function(){return fn&&(res=(0,fn[__getOwnPropNames(fn)[0]])(fn=0)),res};var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to},__reExport=(target,mod,secondTarget)=>(__copyProps(target,mod,"default"),secondTarget&&__copyProps(secondTarget,mod,"default")),__toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod)),__toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var DocsRenderer_exports={};__export(DocsRenderer_exports,{DocsRenderer:()=>DocsRenderer,defaultComponents:()=>defaultComponents});var import_react,import_blocks,import_react_dom_shim,defaultComponents,ErrorBoundary,DocsRenderer,init_DocsRenderer=__esm({"src/DocsRenderer.tsx"(){"use strict";import_react=__toESM(require("react")),import_blocks=require("@storybook/blocks"),import_react_dom_shim=require("@storybook/react-dom-shim"),defaultComponents={code:import_blocks.CodeOrSourceMdx,a:import_blocks.AnchorMdx,...import_blocks.HeadersMdx},ErrorBoundary=class extends import_react.Component{constructor(){super(...arguments);this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}componentDidCatch(err){let{showException}=this.props;showException(err)}render(){let{hasError}=this.state,{children}=this.props;return hasError?null:import_react.default.createElement(import_react.default.Fragment,null,children)}},DocsRenderer=class{constructor(){this.render=async(context,docsParameter,element)=>{let components={...defaultComponents,...docsParameter?.components},TDocs=import_blocks.Docs;return new Promise((resolve,reject)=>{import("@mdx-js/react").then(({MDXProvider})=>(0,import_react_dom_shim.renderElement)(import_react.default.createElement(ErrorBoundary,{showException:reject,key:Math.random()},import_react.default.createElement(MDXProvider,{components},import_react.default.createElement(TDocs,{context,docsParameter}))),element)).then(()=>resolve())})},this.unmount=element=>{(0,import_react_dom_shim.unmountElement)(element)}}}}});var src_exports={};__export(src_exports,{DocsRenderer:()=>DocsRenderer,default:()=>src_default});module.exports=__toCommonJS(src_exports);var import_preview_api=require("storybook/internal/preview-api");var preview_exports={};__export(preview_exports,{parameters:()=>parameters});var excludeTags=Object.entries(globalThis.TAGS_OPTIONS??{}).reduce((acc,entry)=>{let[tag,option]=entry;return option.excludeFromDocsStories&&(acc[tag]=!0),acc},{}),parameters={docs:{renderer:async()=>{let{DocsRenderer:DocsRenderer2}=await Promise.resolve().then(()=>(init_DocsRenderer(),DocsRenderer_exports));return new DocsRenderer2},stories:{filter:story=>(story.tags||[]).filter(tag=>excludeTags[tag]).length===0&&!story.parameters.docs?.disable}}};__reExport(src_exports,require("@storybook/blocks"),module.exports);init_DocsRenderer();var src_default=()=>(0,import_preview_api.definePreview)(preview_exports);0&&(module.exports={DocsRenderer,...require("@storybook/blocks")});

package/dist/index.mjs

@@ -1,3 +1,9 @@
+import { preview_exports } from './chunk-PRSJUHPQ.mjs';
 export { DocsRenderer } from './chunk-NUUEMKO5.mjs';
 import './chunk-H6MOWX77.mjs';
+import { definePreview } from 'storybook/internal/preview-api';
 export * from '@storybook/blocks';
+
+var src_default=()=>definePreview(preview_exports);
+
+export { src_default as default };

package/dist/manager.js

@@ -1 +1 @@
-"use strict";var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty;var __copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod));var import_react=__toESM(require("react")),import_components=require("storybook/internal/components"),import_docs_tools=require("storybook/internal/docs-tools"),import_manager_api=require("storybook/internal/manager-api"),import_blocks=require("@storybook/blocks");import_manager_api.addons.register(import_docs_tools.ADDON_ID,api=>{import_manager_api.addons.add(import_docs_tools.PANEL_ID,{title:"Code",type:import_manager_api.types.PANEL,paramKey:import_docs_tools.PARAM_KEY,disabled:parameters=>!parameters?.docs?.codePanel,match:({viewMode})=>viewMode==="story",render:({active})=>{let[codeSnippet,setSourceCode]=(0,import_manager_api.useAddonState)(import_docs_tools.ADDON_ID,{source:"",format:"html"});return(0,import_manager_api.useChannel)({[import_docs_tools.SNIPPET_RENDERED]:({source,format})=>{setSourceCode({source,format})}}),import_react.default.createElement(import_components.AddonPanel,{active:!!active},import_react.default.createElement(import_blocks.Source,{code:codeSnippet.source,format:codeSnippet.format,dark:!0}))}})});
+"use strict";var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty;var __copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod));var import_react=__toESM(require("react")),import_components=require("storybook/internal/components"),import_docs_tools=require("storybook/internal/docs-tools"),import_manager_api=require("storybook/internal/manager-api"),import_theming=require("storybook/internal/theming"),import_blocks=require("@storybook/blocks");import_manager_api.addons.register(import_docs_tools.ADDON_ID,api=>{import_manager_api.addons.add(import_docs_tools.PANEL_ID,{title:"Code",type:import_manager_api.types.PANEL,paramKey:import_docs_tools.PARAM_KEY,disabled:parameters=>!parameters?.docs?.codePanel,match:({viewMode})=>viewMode==="story",render:({active})=>{let parameter=(0,import_manager_api.useParameter)(import_docs_tools.PARAM_KEY,{source:{code:""},theme:"dark"}),[codeSnippet,setSourceCode]=import_react.default.useState({});(0,import_manager_api.useChannel)({[import_docs_tools.SNIPPET_RENDERED]:({source,format})=>{setSourceCode({source,format})}});let isDark=(0,import_theming.useTheme)().base!=="light";return import_react.default.createElement(import_components.AddonPanel,{active:!!active},import_react.default.createElement(SourceStyles,null,import_react.default.createElement(import_blocks.Source,{...parameter.source,code:parameter.source.code||codeSnippet.source,format:parameter.source.format||codeSnippet.format,dark:isDark})))}})});var SourceStyles=import_theming.styled.div(()=>({height:"100%",[`> :first-child${import_theming.ignoreSsrWarning}`]:{margin:0,height:"100%",boxShadow:"none"}}));

package/dist/manager.mjs

@@ -1,7 +1,8 @@
 import React from 'react';
 import { AddonPanel } from 'storybook/internal/components';
 import { ADDON_ID, PANEL_ID, PARAM_KEY, SNIPPET_RENDERED } from 'storybook/internal/docs-tools';
-import { addons, types, useAddonState, useChannel } from 'storybook/internal/manager-api';
+import { addons, types, useParameter, useChannel } from 'storybook/internal/manager-api';
+import { useTheme, styled, ignoreSsrWarning } from 'storybook/internal/theming';
 import { Source } from '@storybook/blocks';
 
-addons.register(ADDON_ID,api=>{addons.add(PANEL_ID,{title:"Code",type:types.PANEL,paramKey:PARAM_KEY,disabled:parameters=>!parameters?.docs?.codePanel,match:({viewMode})=>viewMode==="story",render:({active})=>{let[codeSnippet,setSourceCode]=useAddonState(ADDON_ID,{source:"",format:"html"});return useChannel({[SNIPPET_RENDERED]:({source,format})=>{setSourceCode({source,format});}}),React.createElement(AddonPanel,{active:!!active},React.createElement(Source,{code:codeSnippet.source,format:codeSnippet.format,dark:!0}))}});});
+addons.register(ADDON_ID,api=>{addons.add(PANEL_ID,{title:"Code",type:types.PANEL,paramKey:PARAM_KEY,disabled:parameters=>!parameters?.docs?.codePanel,match:({viewMode})=>viewMode==="story",render:({active})=>{let parameter=useParameter(PARAM_KEY,{source:{code:""},theme:"dark"}),[codeSnippet,setSourceCode]=React.useState({});useChannel({[SNIPPET_RENDERED]:({source,format})=>{setSourceCode({source,format});}});let isDark=useTheme().base!=="light";return React.createElement(AddonPanel,{active:!!active},React.createElement(SourceStyles,null,React.createElement(Source,{...parameter.source,code:parameter.source.code||codeSnippet.source,format:parameter.source.format||codeSnippet.format,dark:isDark})))}});});var SourceStyles=styled.div(()=>({height:"100%",[`> :first-child${ignoreSsrWarning}`]:{margin:0,height:"100%",boxShadow:"none"}}));