import { Simplify, RemoveIndexSignature, UnionToIntersection } from 'type-fest'; interface SBBaseType { required?: boolean; raw?: string; } type SBScalarType = SBBaseType & { name: 'boolean' | 'string' | 'number' | 'function' | 'symbol'; }; type SBArrayType = SBBaseType & { name: 'array'; value: SBType; }; type SBObjectType = SBBaseType & { name: 'object'; value: Record; }; type SBEnumType = SBBaseType & { name: 'enum'; value: (string | number)[]; }; type SBIntersectionType = SBBaseType & { name: 'intersection'; value: SBType[]; }; type SBUnionType = SBBaseType & { name: 'union'; value: SBType[]; }; type SBOtherType = SBBaseType & { name: 'other'; value: string; }; type SBType = SBScalarType | SBEnumType | SBArrayType | SBObjectType | SBIntersectionType | SBUnionType | SBOtherType; type StoryId = string; type ComponentId = string; type ComponentTitle = string; type StoryName = string; /** @deprecated */ type StoryKind = ComponentTitle; type Tag = string; interface StoryIdentifier { componentId: ComponentId; title: ComponentTitle; /** @deprecated */ kind: ComponentTitle; id: StoryId; name: StoryName; /** @deprecated */ story: StoryName; tags: Tag[]; } interface Parameters { [name: string]: any; } interface StrictParameters { [name: string]: unknown; } type ControlType = 'object' | 'boolean' | 'check' | 'inline-check' | 'radio' | 'inline-radio' | 'select' | 'multi-select' | 'number' | 'range' | 'file' | 'color' | 'date' | 'text'; type ConditionalTest = { truthy?: boolean; } | { exists: boolean; } | { eq: any; } | { neq: any; }; type ConditionalValue = { arg: string; } | { global: string; }; type Conditional = ConditionalValue & ConditionalTest; interface ControlBase { [key: string]: any; /** * @see https://storybook.js.org/docs/api/arg-types#controltype */ type?: ControlType; disable?: boolean; } type Control = ControlType | false | (ControlBase & (ControlBase | { type: 'color'; /** * @see https://storybook.js.org/docs/api/arg-types#controlpresetcolors */ presetColors?: string[]; } | { type: 'file'; /** * @see https://storybook.js.org/docs/api/arg-types#controlaccept */ accept?: string; } | { type: 'inline-check' | 'radio' | 'inline-radio' | 'select' | 'multi-select'; /** * @see https://storybook.js.org/docs/api/arg-types#controllabels */ labels?: { [options: string]: string; }; } | { type: 'number' | 'range'; /** * @see https://storybook.js.org/docs/api/arg-types#controlmax */ max?: number; /** * @see https://storybook.js.org/docs/api/arg-types#controlmin */ min?: number; /** * @see https://storybook.js.org/docs/api/arg-types#controlstep */ step?: number; })); interface InputType { /** * @see https://storybook.js.org/docs/api/arg-types#control */ control?: Control; /** * @see https://storybook.js.org/docs/api/arg-types#description */ description?: string; /** * @see https://storybook.js.org/docs/api/arg-types#if */ if?: Conditional; /** * @see https://storybook.js.org/docs/api/arg-types#mapping */ mapping?: { [key: string]: any; }; /** * @see https://storybook.js.org/docs/api/arg-types#name */ name?: string; /** * @see https://storybook.js.org/docs/api/arg-types#options */ options?: readonly any[]; /** * @see https://storybook.js.org/docs/api/arg-types#table */ table?: { [key: string]: unknown; /** * @see https://storybook.js.org/docs/api/arg-types#tablecategory */ category?: string; /** * @see https://storybook.js.org/docs/api/arg-types#tabledefaultvalue */ defaultValue?: { summary?: string; detail?: string; }; /** * @see https://storybook.js.org/docs/api/arg-types#tabledisable */ disable?: boolean; /** * @see https://storybook.js.org/docs/api/arg-types#tablesubcategory */ subcategory?: string; /** * @see https://storybook.js.org/docs/api/arg-types#tabletype */ type?: { summary?: string; detail?: string; }; }; /** * @see https://storybook.js.org/docs/api/arg-types#type */ type?: SBType | SBScalarType['name']; /** * @see https://storybook.js.org/docs/api/arg-types#defaultvalue * * @deprecated Use `table.defaultValue.summary` instead. */ defaultValue?: any; [key: string]: any; } interface StrictInputType extends InputType { name: string; type?: SBType; } interface Args { [name: string]: any; } interface StrictArgs { [name: string]: unknown; } /** * @see https://storybook.js.org/docs/api/arg-types#argtypes */ type ArgTypes = { [name in keyof TArgs]: InputType; }; type StrictArgTypes = { [name in keyof TArgs]: StrictInputType; }; interface Globals { [name: string]: any; } interface GlobalTypes { [name: string]: InputType; } interface StrictGlobalTypes { [name: string]: StrictInputType; } interface Renderer { /** What is the type of the `component` annotation in this renderer? */ component: unknown; /** What does the story function return in this renderer? */ storyResult: unknown; /** What type of element does this renderer render to? */ canvasElement: unknown; mount(): Promise; T?: unknown; } /** @deprecated - use `Renderer` */ type AnyFramework = Renderer; interface StoryContextForEnhancers extends StoryIdentifier { component?: (TRenderer & { T: any; })['component']; subcomponents?: Record; parameters: Parameters; initialArgs: TArgs; argTypes: StrictArgTypes; } type ArgsEnhancer = (context: StoryContextForEnhancers) => TArgs; type ArgTypesEnhancer = ((context: StoryContextForEnhancers) => StrictArgTypes) & { secondPass?: boolean; }; interface StoryContextUpdate { args?: TArgs; globals?: Globals; [key: string]: any; } type ViewMode = 'story' | 'docs'; type LoaderFunction = (context: StoryContextForLoaders) => Promise | void> | Record | void; type Awaitable = T | PromiseLike; type CleanupCallback = () => Awaitable; type BeforeAll = () => Awaitable; type BeforeEach = (context: StoryContext) => Awaitable; interface Canvas { } interface StoryContext extends StoryContextForEnhancers, Required> { loaded: Record; abortSignal: AbortSignal; canvasElement: TRenderer['canvasElement']; hooks: unknown; originalStoryFn: StoryFn; viewMode: ViewMode; step: StepFunction; context: this; canvas: Canvas; mount: TRenderer['mount']; } /** @deprecated Use {@link StoryContext} instead. */ interface StoryContextForLoaders extends StoryContext { } /** @deprecated Use {@link StoryContext} instead. */ interface PlayFunctionContext extends StoryContext { } type StepLabel = string; type StepFunction = (label: StepLabel, play: PlayFunction) => Promise | void; type PlayFunction = (context: PlayFunctionContext) => Promise | void; type PartialStoryFn = (update?: StoryContextUpdate>) => TRenderer['storyResult']; type LegacyStoryFn = (context: StoryContext) => TRenderer['storyResult']; type ArgsStoryFn = (args: TArgs, context: StoryContext) => (TRenderer & { T: TArgs; })['storyResult']; type StoryFn = LegacyStoryFn | ArgsStoryFn; type DecoratorFunction = (fn: PartialStoryFn, c: StoryContext) => TRenderer['storyResult']; type DecoratorApplicator = (storyFn: LegacyStoryFn, decorators: DecoratorFunction[]) => LegacyStoryFn; type StepRunner = (label: StepLabel, play: PlayFunction, context: StoryContext) => Promise; interface BaseAnnotations { /** * Wrapper components or Storybook decorators that wrap a story. * * Decorators defined in Meta will be applied to every story variation. * @see [Decorators](https://storybook.js.org/docs/addons/introduction/#1-decorators) */ decorators?: DecoratorFunction>[] | DecoratorFunction>; /** * Custom metadata for a story. * @see [Parameters](https://storybook.js.org/docs/basics/writing-stories/#parameters) */ parameters?: Parameters; /** * Dynamic data that are provided (and possibly updated by) Storybook and its addons. * @see [Arg story inputs](https://storybook.js.org/docs/react/api/csf#args-story-inputs) */ args?: Partial; /** * ArgTypes encode basic metadata for args, such as `name`, `description`, `defaultValue` for an arg. These get automatically filled in by Storybook Docs. * @see [Control annotations](https://github.com/storybookjs/storybook/blob/91e9dee33faa8eff0b342a366845de7100415367/addons/controls/README.md#control-annotations) */ argTypes?: Partial>; /** * Asynchronous functions which provide data for a story. * @see [Loaders](https://storybook.js.org/docs/react/writing-stories/loaders) */ loaders?: LoaderFunction[] | LoaderFunction; /** * Function to be called before each story. When the function is async, it will be awaited. * * `beforeEach` can be added to preview, the default export and to a specific story. * They are run (and awaited) in the order: preview, default export, story * * A cleanup function can be returned. */ beforeEach?: BeforeEach[] | BeforeEach; /** * Define a custom render function for the story(ies). If not passed, a default render function by the renderer will be used. */ render?: ArgsStoryFn; /** * Named tags for a story, used to filter stories in different contexts. */ tags?: Tag[]; mount?: (context: StoryContext) => TRenderer['mount']; } interface ProjectAnnotations extends BaseAnnotations { argsEnhancers?: ArgsEnhancer[]; argTypesEnhancers?: ArgTypesEnhancer[]; /** * Lifecycle hook which runs once, before any loaders, decorators or stories, and may rerun when configuration changes or when reinitializing (e.g. between test runs). * The function may be synchronous or asynchronous, and may return a cleanup function which may also be synchronous or asynchronous. * The cleanup function is not guaranteed to run (e.g. when the browser closes), but runs when configuration changes or when reinitializing. * This hook may only be defined globally (i.e. not on component or story level). * When multiple hooks are specified, they are to be executed sequentially (and awaited) in the following order: * - Addon hooks (in order of addons array in e.g. .storybook/main.js) * - Annotation hooks (in order of previewAnnotations array in e.g. .storybook/main.js) * - Preview hook (via e.g. .storybook/preview.js) * Cleanup functions are executed sequentially in reverse order of initialization. */ beforeAll?: BeforeAll; /** * @deprecated Project `globals` renamed to `initiaGlobals` */ globals?: Globals; initialGlobals?: Globals; globalTypes?: GlobalTypes; applyDecorators?: DecoratorApplicator; runStep?: StepRunner; } type StoryDescriptor$1 = string[] | RegExp; interface ComponentAnnotations extends BaseAnnotations { /** * Title of the component which will be presented in the navigation. **Should be unique.** * * Components can be organized in a nested structure using "/" as a separator. * * Since CSF 3.0 this property is optional -- it can be inferred from the filesystem path * * @example * export default { * ... * title: 'Design System/Atoms/Button' * } * * @see [Story Hierarchy](https://storybook.js.org/docs/basics/writing-stories/#story-hierarchy) */ title?: ComponentTitle; /** * Id of the component (prefix of the story id) which is used for URLs. * * By default is inferred from sanitizing the title * * @see [Story Hierarchy](https://storybook.js.org/docs/basics/writing-stories/#story-hierarchy) */ id?: ComponentId; /** * Used to only include certain named exports as stories. Useful when you want to have non-story exports such as mock data or ignore a few stories. * @example * includeStories: ['SimpleStory', 'ComplexStory'] * includeStories: /.*Story$/ * * @see [Non-story exports](https://storybook.js.org/docs/formats/component-story-format/#non-story-exports) */ includeStories?: StoryDescriptor$1; /** * Used to exclude certain named exports. Useful when you want to have non-story exports such as mock data or ignore a few stories. * @example * excludeStories: ['simpleData', 'complexData'] * excludeStories: /.*Data$/ * * @see [Non-story exports](https://storybook.js.org/docs/formats/component-story-format/#non-story-exports) */ excludeStories?: StoryDescriptor$1; /** * The primary component for your story. * * Used by addons for automatic prop table generation and display of other component metadata. */ component?: (TRenderer & { T: Record extends Required ? any : TArgs; })['component']; /** * Auxiliary subcomponents that are part of the stories. * * Used by addons for automatic prop table generation and display of other component metadata. * * @example * import { Button, ButtonGroup } from './components'; * * export default { * ... * subcomponents: { Button, ButtonGroup } * } * * By defining them each component will have its tab in the args table. */ subcomponents?: Record; /** * Function that is executed after the story is rendered. */ play?: PlayFunction; /** * Override the globals values for all stories in this component */ globals?: Globals; } type StoryAnnotations> = BaseAnnotations & { /** * Override the display name in the UI (CSF v3) */ name?: StoryName; /** * Override the display name in the UI (CSF v2) */ storyName?: StoryName; /** * Function that is executed after the story is rendered. */ play?: PlayFunction; /** * Override the globals values for this story */ globals?: Globals; /** @deprecated */ story?: Omit, 'story'>; } & ({} extends TRequiredArgs ? { args?: TRequiredArgs; } : { args: TRequiredArgs; }); type LegacyAnnotatedStoryFn = StoryFn & StoryAnnotations; type LegacyStoryAnnotationsOrFn = LegacyAnnotatedStoryFn | StoryAnnotations; type AnnotatedStoryFn = ArgsStoryFn & StoryAnnotations; type StoryAnnotationsOrFn = AnnotatedStoryFn | StoryAnnotations; type ArgsFromMeta = Meta extends { render?: ArgsStoryFn; loaders?: (infer Loaders)[] | infer Loaders; decorators?: (infer Decorators)[] | infer Decorators; } ? Simplify & LoaderArgs>> : unknown; type DecoratorsArgs = UnionToIntersection ? TArgs : unknown>; type LoaderArgs = UnionToIntersection ? TArgs : unknown>; /** * Helper function to include/exclude an arg based on the value of other other args * aka "conditional args" */ declare const includeConditionalArg: (argType: InputType, args: Args, globals: Globals) => any; /** * Remove punctuation and illegal characters from a story ID. * * See https://gist.github.com/davidjrice/9d2af51100e41c6c4b4a */ declare const sanitize: (string: string) => string; /** * Generate a storybook ID from a component/kind and story name. */ declare const toId: (kind: string, name?: string) => string; /** * Transform a CSF named export into a readable story name */ declare const storyNameFromExport: (key: string) => string; type StoryDescriptor = string[] | RegExp; interface IncludeExcludeOptions { includeStories?: StoryDescriptor; excludeStories?: StoryDescriptor; } /** * Does a named export match CSF inclusion/exclusion options? */ declare function isExportStory(key: string, { includeStories, excludeStories }: IncludeExcludeOptions): boolean | null; interface SeparatorOptions { rootSeparator: string | RegExp; groupSeparator: string | RegExp; } /** * Parse out the component/kind name from a path, using the given separator config. */ declare const parseKind: (kind: string, { rootSeparator, groupSeparator }: SeparatorOptions) => { root: string | null; groups: string[]; }; /** * Combine a set of project / meta / story tags, removing duplicates and handling negations. */ declare const combineTags: (...tags: string[]) => string[]; export { AnnotatedStoryFn, AnyFramework, ArgTypes, ArgTypesEnhancer, Args, ArgsEnhancer, ArgsFromMeta, ArgsStoryFn, BaseAnnotations, BeforeAll, BeforeEach, Canvas, CleanupCallback, ComponentAnnotations, ComponentId, ComponentTitle, Conditional, DecoratorApplicator, DecoratorFunction, GlobalTypes, Globals, IncludeExcludeOptions, InputType, LegacyAnnotatedStoryFn, LegacyStoryAnnotationsOrFn, LegacyStoryFn, LoaderFunction, Parameters, PartialStoryFn, PlayFunction, PlayFunctionContext, ProjectAnnotations, Renderer, SBArrayType, SBEnumType, SBIntersectionType, SBObjectType, SBOtherType, SBScalarType, SBType, SBUnionType, SeparatorOptions, StepFunction, StepLabel, StepRunner, StoryAnnotations, StoryAnnotationsOrFn, StoryContext, StoryContextForEnhancers, StoryContextForLoaders, StoryContextUpdate, StoryFn, StoryId, StoryIdentifier, StoryKind, StoryName, StrictArgTypes, StrictArgs, StrictGlobalTypes, StrictInputType, StrictParameters, Tag, ViewMode, combineTags, includeConditionalArg, isExportStory, parseKind, sanitize, storyNameFromExport, toId };