@storybook/blocks 7.0.0-beta.30 → 7.0.0-beta.32

package/dist/index.d.ts

@@ -1,9 +1,11 @@
 import * as _storybook_types from '@storybook/types';
-import { Conditional, DocsContextProps, PreparedStory, Renderer, StrictArgTypes, StoryId, ResolvedModuleExport, Parameters as Parameters$1, ProjectAnnotations, BaseAnnotations, ModuleExports, StoryAnnotations, ModuleExport, ComponentTitle } from '@storybook/types';
+import { Conditional, DocsContextProps, PreparedStory, ModuleExports, Renderer as Renderer$1, StrictArgTypes, StoryId, ModuleExport, Parameters as Parameters$1, ProjectAnnotations, BaseAnnotations, StoryAnnotations, ComponentTitle } from '@storybook/types';
 export { DocsContextProps } from '@storybook/types';
 import React, { FunctionComponent, ComponentProps, ReactNode, FC, Context } from 'react';
+import { Renderer } from '@storybook/csf';
 import { PropDescriptor } from '@storybook/preview-api';
 import { SyntaxHighlighter, ActionItem, SyntaxHighlighterFormatTypes } from '@storybook/components';
+import { SourceType } from '@storybook/docs-tools';
 import { Channel } from '@storybook/channels';
 import { ThemeVars } from '@storybook/theming';
 
@@ -11,17 +13,28 @@ declare enum SourceError {
     NO_STORY = "There\u2019s no story here.",
     SOURCE_UNAVAILABLE = "Oh no! The source is not available."
 }
-interface SourceErrorProps {
-    isLoading?: boolean;
-    error?: SourceError;
-}
 interface SourceCodeProps {
+    /**
+     * The language the syntax highlighter uses for your story’s code
+     */
     language?: string;
+    /**
+     * Use this to override the content of the source block.
+     */
     code?: string;
+    /**
+     * The (prettier) 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;
 }
-type SourceProps$1 = SourceErrorProps & SourceCodeProps;
+interface SourceProps$1 extends SourceCodeProps {
+    isLoading?: boolean;
+    error?: SourceError;
+}
 /**
  * Syntax-highlighted source code for a component (or anything!)
  */
@@ -46,7 +59,7 @@ interface ArgType {
     if?: Conditional;
     [key: string]: any;
 }
-interface ArgTypes {
+interface ArgTypes$1 {
     [key: string]: ArgType;
 }
 interface Args {
@@ -72,7 +85,7 @@ interface ArgsTableOptionProps {
     sort?: SortType;
 }
 interface ArgsTableDataProps {
-    rows: ArgTypes;
+    rows: ArgTypes$1;
     args?: Args;
     globals?: Globals;
 }
@@ -91,17 +104,19 @@ declare const ArgsTable$1: FC<ArgsTableProps$1>;
 
 declare const NoControlsWarning: () => JSX.Element;
 
-interface CommonProps$1 {
+interface CommonProps {
     story: PreparedStory;
     inline: boolean;
+    primary: boolean;
 }
-interface InlineStoryProps extends CommonProps$1 {
+interface InlineStoryProps extends CommonProps {
     inline: true;
     height?: string;
     autoplay: boolean;
+    forceInitialArgs: boolean;
     renderStoryToElement: DocsContextProps['renderStoryToElement'];
 }
-interface IFrameStoryProps extends CommonProps$1 {
+interface IFrameStoryProps extends CommonProps {
     inline: false;
     height: string;
 }
@@ -168,7 +183,17 @@ interface AnchorProps {
 }
 declare const Anchor: FC<AnchorProps>;
 
-declare const DocsContext: Context<DocsContextProps<Renderer>>;
+type ArgTypesParameters = {
+    include?: PropDescriptor;
+    exclude?: PropDescriptor;
+    sort?: SortType;
+};
+type ArgTypesProps = ArgTypesParameters & {
+    of?: Renderer['component'] | ModuleExports;
+};
+declare const ArgTypes: FC<ArgTypesProps>;
+
+declare const DocsContext: Context<DocsContextProps<Renderer$1>>;
 
 declare const PRIMARY_STORY = "^";
 type Component = any;
@@ -181,6 +206,8 @@ interface StoryData {
 type DocsStoryProps = StoryData & {
     expanded?: boolean;
     withToolbar?: boolean;
+    __forceInitialArgs?: boolean;
+    __primary?: boolean;
 };
 
 interface BaseProps {
@@ -212,7 +239,7 @@ declare const ArgsTable: FC<ArgsTableProps>;
 
 interface SourceItem {
     code: string;
-    format: SyntaxHighlighterFormatTypes;
+    format?: SyntaxHighlighterFormatTypes;
 }
 type StorySources = Record<StoryId, SourceItem>;
 interface SourceContextProps {
@@ -229,23 +256,37 @@ declare enum SourceState {
     CLOSED = "closed",
     NONE = "none"
 }
-interface CommonProps {
-    language?: string;
-    dark?: boolean;
-    format?: PureSourceProps['format'];
-    code?: string;
-}
-type SingleSourceProps = {
-    id: string;
-} & CommonProps;
-type MultiSourceProps = {
-    ids: string[];
-} & CommonProps;
-type CodeProps = {
-    code: string;
-} & CommonProps;
-type NoneProps = CommonProps;
-type SourceProps = SingleSourceProps | MultiSourceProps | CodeProps | NoneProps;
+type SourceParameters = SourceCodeProps & {
+    /**
+     * Where to read the source code from, see `SourceType`
+     */
+    type?: SourceType;
+    /**
+     * Transform the detected source for display
+     */
+    transformSource?: (code: string, story: PreparedStory) => string;
+    /**
+     * Internal: set by our CSF loader (`enrichCsf` in `@storybook/csf-tools`).
+     */
+    originalSource?: string;
+};
+type SourceProps = Omit<SourceParameters, 'transformSource' | 'storySource'> & {
+    /**
+     * Pass the export defining a story to render its source
+     *
+     * ```jsx
+     * import { Source } from '@storybook/blocks';
+     * import * as ButtonStories from './Button.stories';
+     *
+     * <Source of={ButtonStories.Primary} />
+     * ```
+     */
+    of?: ModuleExport;
+    /** @deprecated use of={storyExport} instead */
+    id?: string;
+    /** @deprecated use of={storyExport} instead */
+    ids?: string[];
+};
 type SourceStateProps = {
     state: SourceState;
 };
@@ -256,7 +297,7 @@ declare const useSourceProps: (props: SourceProps, docsContext: DocsContextProps
  * or the source for a story if `storyId` is provided, or
  * the source for the current story if nothing is provided.
  */
-declare const Source: FC<PureSourceProps>;
+declare const Source: FC<SourceProps>;
 
 type CanvasProps = Omit<PreviewProps, 'isExpanded' | 'isLoading'> & {
     withSource?: SourceState;
@@ -265,14 +306,14 @@ type CanvasProps = Omit<PreviewProps, 'isExpanded' | 'isLoading'> & {
 };
 declare const Canvas: FC<CanvasProps>;
 
-type Of = Parameters<DocsContextProps['resolveModuleExport']>[0];
+type Of = Parameters<DocsContextProps['resolveOf']>[0];
 /**
  * A hook to resolve the `of` prop passed to a block.
  * will return the resolved module
  * if the resolved module is a meta it will include a preparedMeta property similar to a preparedStory
  * if the resolved module is a component it will include the project annotations
  */
-declare const useOf: (of: Of, validTypes?: ResolvedModuleExport['type'][]) => {
+declare const useOf: (moduleExportOrType: any, validTypes?: _storybook_types.ResolvedModuleExportType[]) => {
     type: "story";
     story: _storybook_types.PreparedStory<_storybook_types.Renderer>;
 } | {
@@ -312,7 +353,7 @@ interface DescriptionProps {
 }
 declare const DescriptionContainer: FC<DescriptionProps>;
 
-type DocsProps<TFramework extends Renderer = Renderer> = {
+type DocsProps<TFramework extends Renderer$1 = Renderer$1> = {
     docsParameter: Parameters$1;
     context: DocsContextProps<TFramework>;
 };
@@ -320,7 +361,7 @@ declare const Docs: FunctionComponent<DocsProps>;
 
 declare const DocsPage: FC;
 
-interface DocsContainerProps<TFramework extends Renderer = Renderer> {
+interface DocsContainerProps<TFramework extends Renderer$1 = Renderer$1> {
     context: DocsContextProps<TFramework>;
     theme?: ThemeVars;
     children?: ReactNode;
@@ -329,7 +370,7 @@ declare const DocsContainer: FunctionComponent<DocsContainerProps>;
 
 declare const DocsStory: FC<DocsStoryProps>;
 
-type ExternalDocsProps<TFramework extends Renderer = Renderer> = {
+type ExternalDocsProps<TFramework extends Renderer$1 = Renderer$1> = {
     projectAnnotationsList: ProjectAnnotations<TFramework>[];
 };
 declare const ExternalDocs: FunctionComponent<ExternalDocsProps>;
@@ -364,7 +405,6 @@ interface StoriesProps {
 }
 declare const Stories: FC<StoriesProps>;
 
-declare const storyBlockIdFromId: (storyId: string) => string;
 type PureStoryProps = ComponentProps<typeof Story$1>;
 /**
  * Props to define a story
@@ -380,6 +420,10 @@ type StoryRefProps = {
      * @deprecated Use of={storyExport} instead
      */
     id?: string;
+    /**
+     * @deprecated Use of={storyExport} and define the story in the CSF file
+     */
+    story?: StoryAnnotations;
     /**
      * Pass the export defining a story to render that story
      *
@@ -417,10 +461,18 @@ type StoryParameters = {
      * Whether to run the story's play function
      */
     autoplay?: boolean;
+    /**
+     * Internal prop to control if a story re-renders on args updates
+     */
+    __forceInitialArgs?: boolean;
+    /**
+     * Internal prop if this story is the primary story
+     */
+    __primary?: boolean;
 };
 type StoryProps = (StoryDefProps | StoryRefProps) & StoryParameters;
 declare const getStoryId: (props: StoryProps, context: DocsContextProps) => StoryId;
-declare const getStoryProps: <TFramework extends Renderer>(props: StoryParameters, story: PreparedStory<TFramework>, context: DocsContextProps<TFramework>) => PureStoryProps;
+declare const getStoryProps: <TFramework extends Renderer$1>(props: StoryParameters, story: PreparedStory<TFramework>, context: DocsContextProps<TFramework>) => PureStoryProps;
 declare const Story: FC<StoryProps>;
 
 declare const Subheading: FC<HeadingProps>;
@@ -581,4 +633,4 @@ type ColorProps = ColorControlProps;
 declare const LazyColorControl: React.LazyExoticComponent<React.FC<ColorControlProps>>;
 declare const ColorControl: (props: ComponentProps<typeof LazyColorControl>) => JSX.Element;
 
-export { AddContext, Anchor, AnchorMdx, AnchorProps, ArgsTable, BooleanConfig, BooleanControl, BooleanProps, BooleanValue, Canvas, CodeOrSourceMdx, ColorConfig, ColorControl, ColorItem, ColorPalette, ColorProps, ColorValue, Component, ComponentsTable, 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, Meta, NoControlsWarning, NormalizedOptionsConfig, NumberConfig, NumberControl, NumberValue, ObjectConfig, ObjectControl, ObjectProps, ObjectValue, Of, Options, OptionsArray, OptionsConfig, OptionsControl, OptionsControlType, OptionsMultiSelection, OptionsObject, OptionsProps, OptionsSelection, OptionsSingleSelection, PRIMARY_STORY, PresetColor, Primary, ArgsTable$1 as PureArgsTable, RangeConfig, RangeControl, SortType, Source, SourceContainer, SourceContext, SourceContextProps, SourceItem, SourceState, Stories, Story, StoryData, StoryProps, StorySources, StoryTable, Subheading, Subtitle, TextConfig, TextControl, TextProps, TextValue, Title, Typeset, Unstyled, Wrapper, anchorBlockIdFromId, assertIsFn, extractComponentArgTypes, extractTitle, format, formatDate, formatTime, getComponent, getStoryId, getStoryProps, parse, parseDate, parseTime, storyBlockIdFromId, useOf, useSourceProps };
+export { AddContext, Anchor, AnchorMdx, AnchorProps, ArgTypes, ArgsTable, BooleanConfig, BooleanControl, BooleanProps, BooleanValue, Canvas, CodeOrSourceMdx, ColorConfig, ColorControl, ColorItem, ColorPalette, ColorProps, ColorValue, Component, ComponentsTable, 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, Meta, NoControlsWarning, NormalizedOptionsConfig, NumberConfig, NumberControl, NumberValue, ObjectConfig, ObjectControl, ObjectProps, ObjectValue, Of, Options, OptionsArray, OptionsConfig, OptionsControl, OptionsControlType, OptionsMultiSelection, OptionsObject, OptionsProps, OptionsSelection, OptionsSingleSelection, PRIMARY_STORY, PresetColor, Primary, ArgsTable$1 as PureArgsTable, RangeConfig, RangeControl, SortType, Source, SourceContainer, SourceContext, SourceContextProps, SourceItem, SourceState, Stories, Story, StoryData, StoryProps, StorySources, StoryTable, Subheading, Subtitle, TextConfig, TextControl, TextProps, TextValue, Title, Typeset, Unstyled, Wrapper, anchorBlockIdFromId, assertIsFn, extractComponentArgTypes, extractTitle, format, formatDate, formatTime, getComponent, getStoryId, getStoryProps, parse, parseDate, parseTime, useOf, useSourceProps };