storybook 9.1.0-alpha.0 → 9.1.0-alpha.10

package/dist/csf/index.d.ts

@@ -1,4 +1,5 @@
-import { Renderer as Renderer$1, ProjectAnnotations as ProjectAnnotations$1, NormalizedProjectAnnotations, ComponentAnnotations as ComponentAnnotations$1, Args as Args$1, NormalizedComponentAnnotations, StoryAnnotations as StoryAnnotations$1, NormalizedStoryAnnotations } from 'storybook/internal/types';
+import { StorybookTypes, Renderer as Renderer$1, ProjectAnnotations as ProjectAnnotations$1, NormalizedProjectAnnotations, Args as Args$1, ComponentAnnotations as ComponentAnnotations$1, StoryAnnotations as StoryAnnotations$1, ComposedStoryFn } from 'storybook/internal/types';
+import { AddonTypes as AddonTypes$1, StoryContext as StoryContext$1 } from 'storybook/internal/csf';
 
 declare global {
 	interface SymbolConstructor {
@@ -289,6 +290,256 @@ type SBOtherType = SBBaseType & {
 };
 type SBType = SBScalarType | SBEnumType | SBArrayType | SBObjectType | SBIntersectionType | SBUnionType | SBOtherType;
 
+interface ActionsParameters {
+    /**
+     * Actions configuration
+     *
+     * @see https://storybook.js.org/docs/essentials/actions#parameters
+     */
+    actions?: {
+        /**
+         * Create actions for each arg that matches the regex. (**NOT recommended, see below**)
+         *
+         * This is quite useful when your component has dozens (or hundreds) of methods and you do not
+         * want to manually apply the fn utility for each of those methods. However, this is not the
+         * recommended way of writing actions. That's because automatically inferred args are not
+         * available as spies in your play function. If you use argTypesRegex and your stories have play
+         * functions, you will need to also define args with the fn utility to test them in your play
+         * function.
+         *
+         * @example `argTypesRegex: '^on.*'`
+         */
+        argTypesRegex?: string;
+        /** Remove the addon panel and disable the addon's behavior */
+        disable?: boolean;
+        /**
+         * Binds a standard HTML event handler to the outermost HTML element rendered by your component
+         * and triggers an action when the event is called for a given selector. The format is
+         * `<eventname> <selector>`. The selector is optional; it defaults to all elements.
+         *
+         * **To enable this feature, you must use the `withActions` decorator.**
+         *
+         * @example `handles: ['mouseover', 'click .btn']`
+         *
+         * @see https://storybook.js.org/docs/essentials/actions#action-event-handlers
+         */
+        handles?: string[];
+    };
+}
+interface ActionsTypes {
+    parameters: ActionsParameters;
+}
+
+declare const PARAM_KEY = "backgrounds";
+
+interface Background {
+    name: string;
+    value: string;
+}
+type BackgroundMap = Record<string, Background>;
+interface GridConfig {
+    cellAmount: number;
+    cellSize: number;
+    opacity: number;
+    offsetX?: number;
+    offsetY?: number;
+}
+type GlobalState$1 = {
+    value: string | undefined;
+    grid?: boolean;
+};
+interface BackgroundsParameters {
+    /**
+     * Backgrounds configuration
+     *
+     * @see https://storybook.js.org/docs/essentials/backgrounds#parameters
+     */
+    backgrounds?: {
+        /** Default background color */
+        default?: string;
+        /** Remove the addon panel and disable the addon's behavior */
+        disable?: boolean;
+        /** Configuration for the background grid */
+        grid?: GridConfig;
+        /** Available background colors */
+        options?: BackgroundMap;
+    };
+}
+interface BackgroundsGlobals {
+    /**
+     * Backgrounds configuration
+     *
+     * @see https://storybook.js.org/docs/essentials/backgrounds#globals
+     */
+    [PARAM_KEY]?: GlobalState$1 | GlobalState$1['value'];
+}
+interface BackgroundTypes {
+    parameters: BackgroundsParameters;
+    globals: BackgroundsGlobals;
+}
+
+interface ControlsParameters {
+    /**
+     * Controls configuration
+     *
+     * @see https://storybook.js.org/docs/essentials/controls#parameters-1
+     */
+    controls?: {
+        /** Remove the addon panel and disable the addon's behavior */
+        disable?: boolean;
+        /** Disable the ability to create or edit stories from the Controls panel */
+        disableSaveFromUI?: boolean;
+        /** Exclude specific properties from the Controls panel */
+        exclude?: string[] | RegExp;
+        /**
+         * Show the full documentation for each property in the Controls addon panel, including the
+         * description and default value.
+         */
+        expanded?: boolean;
+        /** Exclude only specific properties in the Controls panel */
+        include?: string[] | RegExp;
+        /**
+         * Custom control type matchers
+         *
+         * @see https://storybook.js.org/docs/essentials/controls#custom-control-type-matchers
+         */
+        matchers?: {
+            date?: RegExp;
+            color?: RegExp;
+        };
+        /**
+         * Preset color swatches for the color picker control
+         *
+         * @example PresetColors: [{ color: '#ff4785', title: 'Coral' }, 'rgba(0, 159, 183, 1)',
+         * '#fe4a49']
+         */
+        presetColors?: Array<string | {
+            color: string;
+            title?: string;
+        }>;
+        /** Controls sorting order */
+        sort?: 'none' | 'alpha' | 'requiredFirst';
+    };
+}
+interface ControlsTypes {
+    parameters: ControlsParameters;
+}
+
+interface HighlightTypes {
+    parameters: HighlightParameters;
+}
+interface HighlightParameters {
+    /**
+     * Highlight configuration
+     *
+     * @see https://storybook.js.org/docs/essentials/highlight#parameters
+     */
+    highlight?: {
+        /** Remove the addon panel and disable the addon's behavior */
+        disable?: boolean;
+    };
+}
+
+interface MeasureParameters {
+    /**
+     * Measure configuration
+     *
+     * @see https://storybook.js.org/docs/essentials/measure-and-outline#parameters
+     */
+    measure?: {
+        /** Remove the addon panel and disable the addon's behavior */
+        disable?: boolean;
+    };
+}
+interface MeasureTypes {
+    parameters: MeasureParameters;
+}
+
+interface OutlineParameters {
+    /**
+     * Outline configuration
+     *
+     * @see https://storybook.js.org/docs/essentials/measure-and-outline#parameters
+     */
+    outline?: {
+        /** Remove the addon panel and disable the addon's behavior */
+        disable?: boolean;
+    };
+}
+interface OutlineTypes {
+    parameters: OutlineParameters;
+}
+
+interface TestParameters {
+    test?: {
+        /** Ignore unhandled errors during test execution */
+        dangerouslyIgnoreUnhandledErrors?: boolean;
+        /** Whether to throw exceptions coming from the play function */
+        throwPlayFunctionExceptions?: boolean;
+    };
+}
+interface TestTypes {
+    parameters: TestParameters;
+}
+
+interface Viewport {
+    name: string;
+    styles: ViewportStyles;
+    type?: 'desktop' | 'mobile' | 'tablet' | 'other';
+}
+interface ViewportStyles {
+    height: string;
+    width: string;
+}
+type GlobalState = {
+    /**
+     * When set, the viewport is applied and cannot be changed using the toolbar. Must match the key
+     * of one of the available viewports.
+     */
+    value: string | undefined;
+    /**
+     * When true the viewport applied will be rotated 90°, e.g. it will rotate from portrait to
+     * landscape orientation.
+     */
+    isRotated?: boolean;
+};
+interface ViewportParameters {
+    /**
+     * Viewport configuration
+     *
+     * @see https://storybook.js.org/docs/essentials/viewport#parameters
+     */
+    viewport?: {
+        /**
+         * Remove the addon panel and disable the addon's behavior . If you wish to turn off this addon
+         * for the entire Storybook, you should do so when registering addon-essentials
+         *
+         * @see https://storybook.js.org/docs/essentials/index#disabling-addons
+         */
+        disable?: boolean;
+        /**
+         * Specify the available viewports. The width and height values must include the unit, e.g.
+         * '320px'.
+         */
+        options: Record<string, Viewport>;
+    };
+}
+interface ViewportGlobals {
+    /**
+     * Viewport configuration
+     *
+     * @see https://storybook.js.org/docs/essentials/viewport#globals
+     */
+    viewport?: GlobalState | GlobalState['value'];
+}
+interface ViewportTypes {
+    parameters: ViewportParameters;
+    globals: ViewportGlobals;
+}
+
+type CoreTypes = StorybookTypes & ActionsTypes & BackgroundTypes & ControlsTypes & HighlightTypes & MeasureTypes & OutlineTypes & TestTypes & ViewportTypes;
+declare function getCoreAnnotations(): any[];
+
 type StoryId = string;
 type ComponentId = string;
 type ComponentTitle = string;
@@ -438,7 +689,11 @@ interface GlobalTypes {
 interface StrictGlobalTypes {
     [name: string]: StrictInputType;
 }
-interface Renderer {
+interface AddonTypes {
+    parameters?: Record<string, any>;
+    globals?: Record<string, any>;
+}
+interface Renderer extends AddonTypes {
     /** What is the type of the `component` annotation in this renderer? */
     component: any;
     /** What does the story function return in this renderer? */
@@ -447,6 +702,8 @@ interface Renderer {
     canvasElement: any;
     mount(): Promise<Canvas>;
     T?: unknown;
+    args: unknown;
+    csf4: boolean;
 }
 /** @deprecated - Use `Renderer` */
 type AnyFramework = Renderer;
@@ -524,7 +781,7 @@ interface BaseAnnotations<TRenderer extends Renderer = Renderer, TArgs = Args> {
      *
      * @see [Parameters](https://storybook.js.org/docs/writing-stories/parameters)
      */
-    parameters?: Parameters;
+    parameters?: Parameters & (TRenderer['csf4'] extends true ? CoreTypes['parameters'] & TRenderer['parameters'] : unknown);
     /**
      * Dynamic data that are provided (and possibly updated by) Storybook and its addons.
      *
@@ -589,7 +846,7 @@ interface ProjectAnnotations<TRenderer extends Renderer = Renderer, TArgs = Args
      *   reverse order of initialization.
      */
     beforeAll?: BeforeAll;
-    initialGlobals?: Globals;
+    initialGlobals?: Globals & (TRenderer['csf4'] extends true ? CoreTypes['globals'] & TRenderer['globals'] : unknown);
     globalTypes?: GlobalTypes;
     applyDecorators?: DecoratorApplicator<TRenderer, Args>;
     runStep?: StepRunner<TRenderer, TArgs>;
@@ -653,11 +910,13 @@ interface ComponentAnnotations<TRenderer extends Renderer = Renderer, TArgs = Ar
      *
      * By defining them each component will have its tab in the args table.
      */
-    subcomponents?: Record<string, TRenderer['component']>;
+    subcomponents?: Record<string, (TRenderer & {
+        T: any;
+    })['component']>;
     /** Function that is executed after the story is rendered. */
     play?: PlayFunction<TRenderer, TArgs>;
     /** Override the globals values for all stories in this component */
-    globals?: Globals;
+    globals?: Globals & (TRenderer['csf4'] extends true ? CoreTypes['globals'] & TRenderer['globals'] : unknown);
 }
 type StoryAnnotations<TRenderer extends Renderer = Renderer, TArgs = Args, TRequiredArgs = Partial<TArgs>> = BaseAnnotations<TRenderer, TArgs> & {
     /** Override the display name in the UI (CSF v3) */
@@ -667,7 +926,7 @@ type StoryAnnotations<TRenderer extends Renderer = Renderer, TArgs = Args, TRequ
     /** Function that is executed after the story is rendered. */
     play?: PlayFunction<TRenderer, TArgs>;
     /** Override the globals values for this story */
-    globals?: Globals;
+    globals?: Globals & (TRenderer['csf4'] extends true ? CoreTypes['globals'] & TRenderer['globals'] : unknown);
     /** @deprecated */
     story?: Omit<StoryAnnotations<TRenderer, TArgs>, 'story'>;
 } & ({} extends TRequiredArgs ? {
@@ -695,24 +954,48 @@ declare const includeConditionalArg: (argType: InputType, args: Args, globals: G
 
 interface Preview<TRenderer extends Renderer$1 = Renderer$1> {
     readonly _tag: 'Preview';
-    input: ProjectAnnotations$1<TRenderer>;
+    input: ProjectAnnotations$1<TRenderer> & {
+        addons?: PreviewAddon<never>[];
+    };
     composed: NormalizedProjectAnnotations<TRenderer>;
-    meta(input: ComponentAnnotations$1<TRenderer>): Meta<TRenderer>;
+    meta<TArgs extends Args$1, TInput extends ComponentAnnotations$1<TRenderer & {
+        args: TArgs;
+    }, TArgs>>(input: TInput): Meta<TRenderer & {
+        args: TArgs;
+    }, TInput>;
 }
+type InferTypes<T extends PreviewAddon<never>[]> = T extends PreviewAddon<infer C>[] ? C & {
+    csf4: true;
+} : never;
+declare function definePreview<TRenderer extends Renderer$1, Addons extends PreviewAddon<never>[]>(input: ProjectAnnotations$1<TRenderer> & {
+    addons?: Addons;
+}): Preview<TRenderer & InferTypes<Addons>>;
+interface PreviewAddon<in TExtraContext extends AddonTypes$1 = AddonTypes$1> extends ProjectAnnotations$1<Renderer$1> {
+}
+declare function definePreviewAddon<TExtraContext extends AddonTypes$1 = AddonTypes$1>(preview: ProjectAnnotations$1<Renderer$1>): PreviewAddon<TExtraContext>;
 declare function isPreview(input: unknown): input is Preview<Renderer$1>;
-interface Meta<TRenderer extends Renderer$1, TArgs extends Args$1 = Args$1> {
+interface Meta<TRenderer extends Renderer$1, TInput extends ComponentAnnotations$1<TRenderer, TRenderer['args']> = ComponentAnnotations$1<TRenderer, TRenderer['args']>> {
     readonly _tag: 'Meta';
-    input: ComponentAnnotations$1<TRenderer, TArgs>;
-    composed: NormalizedComponentAnnotations<TRenderer>;
+    input: TInput;
     preview: Preview<TRenderer>;
-    story(input: StoryAnnotations$1<TRenderer, TArgs>): Story<TRenderer, TArgs>;
+    story(input?: () => TRenderer['storyResult']): Story<TRenderer, {
+        render: () => TRenderer['storyResult'];
+    }>;
+    story<TInput extends StoryAnnotations$1<TRenderer, TRenderer['args']>>(input?: TInput): Story<TRenderer, TInput>;
 }
 declare function isMeta(input: unknown): input is Meta<Renderer$1>;
-interface Story<TRenderer extends Renderer$1, TArgs extends Args$1 = Args$1> {
+interface Story<TRenderer extends Renderer$1, TInput extends StoryAnnotations$1<TRenderer, TRenderer['args']> = StoryAnnotations$1<TRenderer, TRenderer['args']>> {
     readonly _tag: 'Story';
-    input: StoryAnnotations$1<TRenderer, TArgs>;
-    composed: NormalizedStoryAnnotations<TRenderer>;
-    meta: Meta<TRenderer, TArgs>;
+    input: TInput;
+    composed: Pick<ComposedStoryFn<TRenderer>, 'argTypes' | 'parameters' | 'id' | 'tags' | 'globals'> & {
+        args: TRenderer['args'];
+        name: string;
+    };
+    meta: Meta<TRenderer>;
+    __compose: () => ComposedStoryFn<TRenderer>;
+    play: TInput['play'];
+    run: (context?: Partial<StoryContext$1<TRenderer, Partial<TRenderer['args']>>>) => Promise<void>;
+    extend<TInput extends StoryAnnotations$1<TRenderer, TRenderer['args']>>(input: TInput): Story<TRenderer, TInput>;
 }
 declare function isStory<TRenderer extends Renderer$1>(input: unknown): input is Story<TRenderer>;
 
@@ -745,4 +1028,4 @@ declare const parseKind: (kind: string, { rootSeparator, groupSeparator }: Separ
 /** Combine a set of project / meta / story tags, removing duplicates and handling negations. */
 declare const combineTags: (...tags: string[]) => string[];
 
-export { type AfterEach, type AnnotatedStoryFn, type AnyFramework, type ArgTypes, type ArgTypesEnhancer, type Args, type ArgsEnhancer, type ArgsFromMeta, type ArgsStoryFn, type BaseAnnotations, type BeforeAll, type BeforeEach, type Canvas, type CleanupCallback, type ComponentAnnotations, type ComponentId, type ComponentTitle, type Conditional, type DecoratorApplicator, type DecoratorFunction, type GlobalTypes, type Globals, type IncludeExcludeOptions, type InputType, type LegacyAnnotatedStoryFn, type LegacyStoryAnnotationsOrFn, type LegacyStoryFn, type LoaderFunction, type Meta, type Parameters, type PartialStoryFn, type PlayFunction, type PlayFunctionContext, type Preview, type ProjectAnnotations, type Renderer, type SBArrayType, type SBEnumType, type SBIntersectionType, type SBObjectType, type SBOtherType, type SBScalarType, type SBType, type SBUnionType, type SeparatorOptions, type StepFunction, type StepLabel, type StepRunner, type Story, type StoryAnnotations, type StoryAnnotationsOrFn, type StoryContext, type StoryContextForEnhancers, type StoryContextForLoaders, type StoryContextUpdate, type StoryFn, type StoryId, type StoryIdentifier, type StoryKind, type StoryName, type StrictArgTypes, type StrictArgs, type StrictGlobalTypes, type StrictInputType, type StrictParameters, type Tag, type ViewMode, combineTags, includeConditionalArg, isExportStory, isMeta, isPreview, isStory, parseKind, sanitize, storyNameFromExport, toId };
+export { type AddonTypes, type AfterEach, type AnnotatedStoryFn, type AnyFramework, type ArgTypes, type ArgTypesEnhancer, type Args, type ArgsEnhancer, type ArgsFromMeta, type ArgsStoryFn, type BaseAnnotations, type BeforeAll, type BeforeEach, type Canvas, type CleanupCallback, type ComponentAnnotations, type ComponentId, type ComponentTitle, type Conditional, type CoreTypes, type DecoratorApplicator, type DecoratorFunction, type GlobalTypes, type Globals, type IncludeExcludeOptions, type InferTypes, type InputType, type LegacyAnnotatedStoryFn, type LegacyStoryAnnotationsOrFn, type LegacyStoryFn, type LoaderFunction, type Meta, type Parameters, type PartialStoryFn, type PlayFunction, type PlayFunctionContext, type Preview, type PreviewAddon, type ProjectAnnotations, type Renderer, type SBArrayType, type SBEnumType, type SBIntersectionType, type SBObjectType, type SBOtherType, type SBScalarType, type SBType, type SBUnionType, type SeparatorOptions, type StepFunction, type StepLabel, type StepRunner, type Story, type StoryAnnotations, type StoryAnnotationsOrFn, type StoryContext, type StoryContextForEnhancers, type StoryContextForLoaders, type StoryContextUpdate, type StoryFn, type StoryId, type StoryIdentifier, type StoryKind, type StoryName, type StrictArgTypes, type StrictArgs, type StrictGlobalTypes, type StrictInputType, type StrictParameters, type Tag, type ViewMode, combineTags, definePreview, definePreviewAddon, getCoreAnnotations, includeConditionalArg, isExportStory, isMeta, isPreview, isStory, parseKind, sanitize, storyNameFromExport, toId };