index.d.ts 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361
  1. import { Simplify, RemoveIndexSignature, UnionToIntersection } from 'type-fest';
  2. interface SBBaseType {
  3. required?: boolean;
  4. raw?: string;
  5. }
  6. type SBScalarType = SBBaseType & {
  7. name: 'boolean' | 'string' | 'number' | 'function' | 'symbol';
  8. };
  9. type SBArrayType = SBBaseType & {
  10. name: 'array';
  11. value: SBType;
  12. };
  13. type SBObjectType = SBBaseType & {
  14. name: 'object';
  15. value: Record<string, SBType>;
  16. };
  17. type SBEnumType = SBBaseType & {
  18. name: 'enum';
  19. value: (string | number)[];
  20. };
  21. type SBIntersectionType = SBBaseType & {
  22. name: 'intersection';
  23. value: SBType[];
  24. };
  25. type SBUnionType = SBBaseType & {
  26. name: 'union';
  27. value: SBType[];
  28. };
  29. type SBOtherType = SBBaseType & {
  30. name: 'other';
  31. value: string;
  32. };
  33. type SBType = SBScalarType | SBEnumType | SBArrayType | SBObjectType | SBIntersectionType | SBUnionType | SBOtherType;
  34. type StoryId = string;
  35. type ComponentId = string;
  36. type ComponentTitle = string;
  37. type StoryName = string;
  38. /** @deprecated */
  39. type StoryKind = ComponentTitle;
  40. type Tag = string;
  41. interface StoryIdentifier {
  42. componentId: ComponentId;
  43. title: ComponentTitle;
  44. /** @deprecated */
  45. kind: ComponentTitle;
  46. id: StoryId;
  47. name: StoryName;
  48. /** @deprecated */
  49. story: StoryName;
  50. tags: Tag[];
  51. }
  52. interface Parameters {
  53. [name: string]: any;
  54. }
  55. interface StrictParameters {
  56. [name: string]: unknown;
  57. }
  58. type ConditionalTest = {
  59. truthy?: boolean;
  60. } | {
  61. exists: boolean;
  62. } | {
  63. eq: any;
  64. } | {
  65. neq: any;
  66. };
  67. type ConditionalValue = {
  68. arg: string;
  69. } | {
  70. global: string;
  71. };
  72. type Conditional = ConditionalValue & ConditionalTest;
  73. interface InputType {
  74. name?: string;
  75. description?: string;
  76. defaultValue?: any;
  77. type?: SBType | SBScalarType['name'];
  78. if?: Conditional;
  79. [key: string]: any;
  80. }
  81. interface StrictInputType extends InputType {
  82. name: string;
  83. type?: SBType;
  84. }
  85. interface Args {
  86. [name: string]: any;
  87. }
  88. interface StrictArgs {
  89. [name: string]: unknown;
  90. }
  91. type ArgTypes<TArgs = Args> = {
  92. [name in keyof TArgs]: InputType;
  93. };
  94. type StrictArgTypes<TArgs = Args> = {
  95. [name in keyof TArgs]: StrictInputType;
  96. };
  97. interface Globals {
  98. [name: string]: any;
  99. }
  100. interface GlobalTypes {
  101. [name: string]: InputType;
  102. }
  103. interface StrictGlobalTypes {
  104. [name: string]: StrictInputType;
  105. }
  106. type Renderer = {
  107. /** What is the type of the `component` annotation in this renderer? */
  108. component: unknown;
  109. /** What does the story function return in this renderer? */
  110. storyResult: unknown;
  111. /** What type of element does this renderer render to? */
  112. canvasElement: unknown;
  113. T?: unknown;
  114. };
  115. /** @deprecated - use `Renderer` */
  116. type AnyFramework = Renderer;
  117. interface StoryContextForEnhancers<TRenderer extends Renderer = Renderer, TArgs = Args> extends StoryIdentifier {
  118. component?: (TRenderer & {
  119. T: any;
  120. })['component'];
  121. subcomponents?: Record<string, (TRenderer & {
  122. T: any;
  123. })['component']>;
  124. parameters: Parameters;
  125. initialArgs: TArgs;
  126. argTypes: StrictArgTypes<TArgs>;
  127. }
  128. type ArgsEnhancer<TRenderer extends Renderer = Renderer, TArgs = Args> = (context: StoryContextForEnhancers<TRenderer, TArgs>) => TArgs;
  129. type ArgTypesEnhancer<TRenderer extends Renderer = Renderer, TArgs = Args> = ((context: StoryContextForEnhancers<TRenderer, TArgs>) => StrictArgTypes<TArgs>) & {
  130. secondPass?: boolean;
  131. };
  132. interface StoryContextUpdate<TArgs = Args> {
  133. args?: TArgs;
  134. globals?: Globals;
  135. [key: string]: any;
  136. }
  137. type ViewMode = 'story' | 'docs';
  138. interface StoryContextForLoaders<TRenderer extends Renderer = Renderer, TArgs = Args> extends StoryContextForEnhancers<TRenderer, TArgs>, Required<StoryContextUpdate<TArgs>> {
  139. hooks: unknown;
  140. viewMode: ViewMode;
  141. originalStoryFn: StoryFn<TRenderer>;
  142. }
  143. type LoaderFunction<TRenderer extends Renderer = Renderer, TArgs = Args> = (context: StoryContextForLoaders<TRenderer, TArgs>) => Promise<Record<string, any> | void> | Record<string, any> | void;
  144. interface StoryContext<TRenderer extends Renderer = Renderer, TArgs = Args> extends StoryContextForLoaders<TRenderer, TArgs> {
  145. loaded: Record<string, any>;
  146. abortSignal: AbortSignal;
  147. canvasElement: TRenderer['canvasElement'];
  148. }
  149. type StepLabel = string;
  150. type StepFunction<TRenderer extends Renderer = Renderer, TArgs = Args> = (label: StepLabel, play: PlayFunction<TRenderer, TArgs>) => Promise<void> | void;
  151. type PlayFunctionContext<TRenderer extends Renderer = Renderer, TArgs = Args> = StoryContext<TRenderer, TArgs> & {
  152. step: StepFunction<TRenderer, TArgs>;
  153. };
  154. type PlayFunction<TRenderer extends Renderer = Renderer, TArgs = Args> = (context: PlayFunctionContext<TRenderer, TArgs>) => Promise<void> | void;
  155. type PartialStoryFn<TRenderer extends Renderer = Renderer, TArgs = Args> = (update?: StoryContextUpdate<Partial<TArgs>>) => TRenderer['storyResult'];
  156. type LegacyStoryFn<TRenderer extends Renderer = Renderer, TArgs = Args> = (context: StoryContext<TRenderer, TArgs>) => TRenderer['storyResult'];
  157. type ArgsStoryFn<TRenderer extends Renderer = Renderer, TArgs = Args> = (args: TArgs, context: StoryContext<TRenderer, TArgs>) => (TRenderer & {
  158. T: TArgs;
  159. })['storyResult'];
  160. type StoryFn<TRenderer extends Renderer = Renderer, TArgs = Args> = LegacyStoryFn<TRenderer, TArgs> | ArgsStoryFn<TRenderer, TArgs>;
  161. type DecoratorFunction<TRenderer extends Renderer = Renderer, TArgs = Args> = (fn: PartialStoryFn<TRenderer, TArgs>, c: StoryContext<TRenderer, TArgs>) => TRenderer['storyResult'];
  162. type DecoratorApplicator<TRenderer extends Renderer = Renderer, TArgs = Args> = (storyFn: LegacyStoryFn<TRenderer, TArgs>, decorators: DecoratorFunction<TRenderer, TArgs>[]) => LegacyStoryFn<TRenderer, TArgs>;
  163. type StepRunner<TRenderer extends Renderer = Renderer, TArgs = Args> = (label: StepLabel, play: PlayFunction<TRenderer, TArgs>, context: PlayFunctionContext<TRenderer, TArgs>) => Promise<void>;
  164. type BaseAnnotations<TRenderer extends Renderer = Renderer, TArgs = Args> = {
  165. /**
  166. * Wrapper components or Storybook decorators that wrap a story.
  167. *
  168. * Decorators defined in Meta will be applied to every story variation.
  169. * @see [Decorators](https://storybook.js.org/docs/addons/introduction/#1-decorators)
  170. */
  171. decorators?: DecoratorFunction<TRenderer, Simplify<TArgs>>[] | DecoratorFunction<TRenderer, Simplify<TArgs>>;
  172. /**
  173. * Custom metadata for a story.
  174. * @see [Parameters](https://storybook.js.org/docs/basics/writing-stories/#parameters)
  175. */
  176. parameters?: Parameters;
  177. /**
  178. * Dynamic data that are provided (and possibly updated by) Storybook and its addons.
  179. * @see [Arg story inputs](https://storybook.js.org/docs/react/api/csf#args-story-inputs)
  180. */
  181. args?: Partial<TArgs>;
  182. /**
  183. * ArgTypes encode basic metadata for args, such as `name`, `description`, `defaultValue` for an arg. These get automatically filled in by Storybook Docs.
  184. * @see [Control annotations](https://github.com/storybookjs/storybook/blob/91e9dee33faa8eff0b342a366845de7100415367/addons/controls/README.md#control-annotations)
  185. */
  186. argTypes?: Partial<ArgTypes<TArgs>>;
  187. /**
  188. * Asynchronous functions which provide data for a story.
  189. * @see [Loaders](https://storybook.js.org/docs/react/writing-stories/loaders)
  190. */
  191. loaders?: LoaderFunction<TRenderer, TArgs>[] | LoaderFunction<TRenderer, TArgs>;
  192. /**
  193. * Define a custom render function for the story(ies). If not passed, a default render function by the renderer will be used.
  194. */
  195. render?: ArgsStoryFn<TRenderer, TArgs>;
  196. };
  197. type ProjectAnnotations<TRenderer extends Renderer = Renderer, TArgs = Args> = BaseAnnotations<TRenderer, TArgs> & {
  198. argsEnhancers?: ArgsEnhancer<TRenderer, Args>[];
  199. argTypesEnhancers?: ArgTypesEnhancer<TRenderer, Args>[];
  200. globals?: Globals;
  201. globalTypes?: GlobalTypes;
  202. applyDecorators?: DecoratorApplicator<TRenderer, Args>;
  203. runStep?: StepRunner<TRenderer, TArgs>;
  204. };
  205. type StoryDescriptor$1 = string[] | RegExp;
  206. interface ComponentAnnotations<TRenderer extends Renderer = Renderer, TArgs = Args> extends BaseAnnotations<TRenderer, TArgs> {
  207. /**
  208. * Title of the component which will be presented in the navigation. **Should be unique.**
  209. *
  210. * Components can be organized in a nested structure using "/" as a separator.
  211. *
  212. * Since CSF 3.0 this property is optional -- it can be inferred from the filesystem path
  213. *
  214. * @example
  215. * export default {
  216. * ...
  217. * title: 'Design System/Atoms/Button'
  218. * }
  219. *
  220. * @see [Story Hierarchy](https://storybook.js.org/docs/basics/writing-stories/#story-hierarchy)
  221. */
  222. title?: ComponentTitle;
  223. /**
  224. * Id of the component (prefix of the story id) which is used for URLs.
  225. *
  226. * By default is inferred from sanitizing the title
  227. *
  228. * @see [Story Hierarchy](https://storybook.js.org/docs/basics/writing-stories/#story-hierarchy)
  229. */
  230. id?: ComponentId;
  231. /**
  232. * 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.
  233. * @example
  234. * includeStories: ['SimpleStory', 'ComplexStory']
  235. * includeStories: /.*Story$/
  236. *
  237. * @see [Non-story exports](https://storybook.js.org/docs/formats/component-story-format/#non-story-exports)
  238. */
  239. includeStories?: StoryDescriptor$1;
  240. /**
  241. * Used to exclude certain named exports. Useful when you want to have non-story exports such as mock data or ignore a few stories.
  242. * @example
  243. * excludeStories: ['simpleData', 'complexData']
  244. * excludeStories: /.*Data$/
  245. *
  246. * @see [Non-story exports](https://storybook.js.org/docs/formats/component-story-format/#non-story-exports)
  247. */
  248. excludeStories?: StoryDescriptor$1;
  249. /**
  250. * The primary component for your story.
  251. *
  252. * Used by addons for automatic prop table generation and display of other component metadata.
  253. */
  254. component?: (TRenderer & {
  255. T: Record<string, unknown> extends Required<TArgs> ? any : TArgs;
  256. })['component'];
  257. /**
  258. * Auxiliary subcomponents that are part of the stories.
  259. *
  260. * Used by addons for automatic prop table generation and display of other component metadata.
  261. *
  262. * @example
  263. * import { Button, ButtonGroup } from './components';
  264. *
  265. * export default {
  266. * ...
  267. * subcomponents: { Button, ButtonGroup }
  268. * }
  269. *
  270. * By defining them each component will have its tab in the args table.
  271. */
  272. subcomponents?: Record<string, TRenderer['component']>;
  273. /**
  274. * Function that is executed after the story is rendered.
  275. */
  276. play?: PlayFunction<TRenderer, TArgs>;
  277. /**
  278. * Named tags for a story, used to filter stories in different contexts.
  279. */
  280. tags?: Tag[];
  281. }
  282. type StoryAnnotations<TRenderer extends Renderer = Renderer, TArgs = Args, TRequiredArgs = Partial<TArgs>> = BaseAnnotations<TRenderer, TArgs> & {
  283. /**
  284. * Override the display name in the UI (CSF v3)
  285. */
  286. name?: StoryName;
  287. /**
  288. * Override the display name in the UI (CSF v2)
  289. */
  290. storyName?: StoryName;
  291. /**
  292. * Function that is executed after the story is rendered.
  293. */
  294. play?: PlayFunction<TRenderer, TArgs>;
  295. /**
  296. * Named tags for a story, used to filter stories in different contexts.
  297. */
  298. tags?: Tag[];
  299. /** @deprecated */
  300. story?: Omit<StoryAnnotations<TRenderer, TArgs>, 'story'>;
  301. } & ({} extends TRequiredArgs ? {
  302. args?: TRequiredArgs;
  303. } : {
  304. args: TRequiredArgs;
  305. });
  306. type LegacyAnnotatedStoryFn<TRenderer extends Renderer = Renderer, TArgs = Args> = StoryFn<TRenderer, TArgs> & StoryAnnotations<TRenderer, TArgs>;
  307. type LegacyStoryAnnotationsOrFn<TRenderer extends Renderer = Renderer, TArgs = Args> = LegacyAnnotatedStoryFn<TRenderer, TArgs> | StoryAnnotations<TRenderer, TArgs>;
  308. type AnnotatedStoryFn<TRenderer extends Renderer = Renderer, TArgs = Args> = ArgsStoryFn<TRenderer, TArgs> & StoryAnnotations<TRenderer, TArgs>;
  309. type StoryAnnotationsOrFn<TRenderer extends Renderer = Renderer, TArgs = Args> = AnnotatedStoryFn<TRenderer, TArgs> | StoryAnnotations<TRenderer, TArgs>;
  310. type ArgsFromMeta<TRenderer extends Renderer, Meta> = Meta extends {
  311. render?: ArgsStoryFn<TRenderer, infer RArgs>;
  312. loaders?: (infer Loaders)[] | infer Loaders;
  313. decorators?: (infer Decorators)[] | infer Decorators;
  314. } ? Simplify<RemoveIndexSignature<RArgs & DecoratorsArgs<TRenderer, Decorators> & LoaderArgs<TRenderer, Loaders>>> : unknown;
  315. type DecoratorsArgs<TRenderer extends Renderer, Decorators> = UnionToIntersection<Decorators extends DecoratorFunction<TRenderer, infer TArgs> ? TArgs : unknown>;
  316. type LoaderArgs<TRenderer extends Renderer, Loaders> = UnionToIntersection<Loaders extends LoaderFunction<TRenderer, infer TArgs> ? TArgs : unknown>;
  317. /**
  318. * Helper function to include/exclude an arg based on the value of other other args
  319. * aka "conditional args"
  320. */
  321. declare const includeConditionalArg: (argType: InputType, args: Args, globals: Globals) => any;
  322. /**
  323. * Remove punctuation and illegal characters from a story ID.
  324. *
  325. * See https://gist.github.com/davidjrice/9d2af51100e41c6c4b4a
  326. */
  327. declare const sanitize: (string: string) => string;
  328. /**
  329. * Generate a storybook ID from a component/kind and story name.
  330. */
  331. declare const toId: (kind: string, name?: string) => string;
  332. /**
  333. * Transform a CSF named export into a readable story name
  334. */
  335. declare const storyNameFromExport: (key: string) => string;
  336. type StoryDescriptor = string[] | RegExp;
  337. interface IncludeExcludeOptions {
  338. includeStories?: StoryDescriptor;
  339. excludeStories?: StoryDescriptor;
  340. }
  341. /**
  342. * Does a named export match CSF inclusion/exclusion options?
  343. */
  344. declare function isExportStory(key: string, { includeStories, excludeStories }: IncludeExcludeOptions): boolean | null;
  345. interface SeparatorOptions {
  346. rootSeparator: string | RegExp;
  347. groupSeparator: string | RegExp;
  348. }
  349. /**
  350. * Parse out the component/kind name from a path, using the given separator config.
  351. */
  352. declare const parseKind: (kind: string, { rootSeparator, groupSeparator }: SeparatorOptions) => {
  353. root: string | null;
  354. groups: string[];
  355. };
  356. export { AnnotatedStoryFn, AnyFramework, ArgTypes, ArgTypesEnhancer, Args, ArgsEnhancer, ArgsFromMeta, ArgsStoryFn, BaseAnnotations, 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, includeConditionalArg, isExportStory, parseKind, sanitize, storyNameFromExport, toId };