index.d.ts 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194
  1. import * as _storybook_types from '@storybook/types';
  2. import { Addon_ClientStoryApi, Addon_Loadable, Args, ComponentAnnotations, AnnotatedStoryFn, ArgsStoryFn, ArgsFromMeta, StoryAnnotations, DecoratorFunction, StrictArgs, LoaderFunction, StoryContext as StoryContext$1, ProjectAnnotations, StoryAnnotationsOrFn, Store_CSFExports, StoriesWithPartialProps } from '@storybook/types';
  3. export { ArgTypes, Args, Parameters, StrictArgs } from '@storybook/types';
  4. import { R as ReactRenderer } from './types-0fc72a6d.js';
  5. import { ComponentType, ComponentProps, JSXElementConstructor } from 'react';
  6. import { Simplify, SetOptional } from 'type-fest';
  7. interface ClientApi extends Addon_ClientStoryApi<ReactRenderer['storyResult']> {
  8. configure(loader: Addon_Loadable, module: NodeModule): void;
  9. forceReRender(): void;
  10. raw: () => any;
  11. }
  12. declare const storiesOf: ClientApi['storiesOf'];
  13. declare const configure: ClientApi['configure'];
  14. declare const forceReRender: ClientApi['forceReRender'];
  15. declare const raw: ClientApi['raw'];
  16. type JSXElement = keyof JSX.IntrinsicElements | JSXElementConstructor<any>;
  17. /**
  18. * Metadata to configure the stories for a component.
  19. *
  20. * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
  21. */
  22. type Meta<TCmpOrArgs = Args> = [TCmpOrArgs] extends [ComponentType<any>] ? ComponentAnnotations<ReactRenderer, ComponentProps<TCmpOrArgs>> : ComponentAnnotations<ReactRenderer, TCmpOrArgs>;
  23. /**
  24. * Story function that represents a CSFv2 component example.
  25. *
  26. * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  27. */
  28. type StoryFn<TCmpOrArgs = Args> = [TCmpOrArgs] extends [ComponentType<any>] ? AnnotatedStoryFn<ReactRenderer, ComponentProps<TCmpOrArgs>> : AnnotatedStoryFn<ReactRenderer, TCmpOrArgs>;
  29. /**
  30. * Story function that represents a CSFv3 component example.
  31. *
  32. * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  33. */
  34. type StoryObj<TMetaOrCmpOrArgs = Args> = [TMetaOrCmpOrArgs] extends [
  35. {
  36. render?: ArgsStoryFn<ReactRenderer, any>;
  37. component?: infer Component;
  38. args?: infer DefaultArgs;
  39. }
  40. ] ? Simplify<(Component extends ComponentType<any> ? ComponentProps<Component> : unknown) & ArgsFromMeta<ReactRenderer, TMetaOrCmpOrArgs>> extends infer TArgs ? StoryAnnotations<ReactRenderer, AddMocks<TArgs, DefaultArgs>, SetOptional<TArgs, keyof TArgs & keyof (DefaultArgs & ActionArgs<TArgs>)>> : never : TMetaOrCmpOrArgs extends ComponentType<any> ? StoryAnnotations<ReactRenderer, ComponentProps<TMetaOrCmpOrArgs>> : StoryAnnotations<ReactRenderer, TMetaOrCmpOrArgs>;
  41. type AddMocks<TArgs, DefaultArgs> = Simplify<{
  42. [T in keyof TArgs]: T extends keyof DefaultArgs ? DefaultArgs[T] extends (...args: any) => any & {
  43. mock: {};
  44. } ? DefaultArgs[T] : TArgs[T] : TArgs[T];
  45. }>;
  46. type ActionArgs<TArgs> = {
  47. [P in keyof TArgs as TArgs[P] extends (...args: any[]) => any ? ((...args: any[]) => void) extends TArgs[P] ? P : never : never]: TArgs[P];
  48. };
  49. /**
  50. * @deprecated Use `Meta` instead, e.g. ComponentMeta<typeof Button> -> Meta<typeof Button>.
  51. *
  52. * For the common case where a component's stories are simple components that receives args as props:
  53. *
  54. * ```tsx
  55. * export default { ... } as ComponentMeta<typeof Button>;
  56. * ```
  57. */
  58. type ComponentMeta<T extends JSXElement> = Meta<ComponentProps<T>>;
  59. /**
  60. * @deprecated Use `StoryFn` instead, e.g. ComponentStoryFn<typeof Button> -> StoryFn<typeof Button>.
  61. * Use `StoryObj` if you want to migrate to CSF3, which uses objects instead of functions to represent stories.
  62. * You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/
  63. *
  64. * For the common case where a (CSFv2) story is a simple component that receives args as props:
  65. *
  66. * ```tsx
  67. * const Template: ComponentStoryFn<typeof Button> = (args) => <Button {...args} />
  68. * ```
  69. */
  70. type ComponentStoryFn<T extends JSXElement> = StoryFn<ComponentProps<T>>;
  71. /**
  72. * @deprecated Use `StoryObj` instead, e.g. ComponentStoryObj<typeof Button> -> StoryObj<typeof Button>.
  73. *
  74. * For the common case where a (CSFv3) story is a simple component that receives args as props:
  75. *
  76. * ```tsx
  77. * const MyStory: ComponentStoryObj<typeof Button> = {
  78. * args: { buttonArg1: 'val' },
  79. * }
  80. * ```
  81. */
  82. type ComponentStoryObj<T extends JSXElement> = StoryObj<ComponentProps<T>>;
  83. /**
  84. * @deprecated Use `StoryFn` instead.
  85. * Use `StoryObj` if you want to migrate to CSF3, which uses objects instead of functions to represent stories.
  86. * You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/
  87. *
  88. * Story function that represents a CSFv2 component example.
  89. *
  90. * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  91. */
  92. type Story<TArgs = Args> = StoryFn<TArgs>;
  93. /**
  94. * @deprecated Use `StoryFn` instead, e.g. ComponentStory<typeof Button> -> StoryFn<typeof Button>.
  95. * Use `StoryObj` if you want to migrate to CSF3, which uses objects instead of functions to represent stories
  96. * You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/.
  97. *
  98. * For the common case where a (CSFv3) story is a simple component that receives args as props:
  99. *
  100. * ```tsx
  101. * const MyStory: ComponentStory<typeof Button> = {
  102. * args: { buttonArg1: 'val' },
  103. * }
  104. * ```
  105. */
  106. type ComponentStory<T extends JSXElement> = ComponentStoryFn<T>;
  107. /**
  108. * @deprecated Use Decorator instead.
  109. */
  110. type DecoratorFn = DecoratorFunction<ReactRenderer>;
  111. type Decorator<TArgs = StrictArgs> = DecoratorFunction<ReactRenderer, TArgs>;
  112. type Loader<TArgs = StrictArgs> = LoaderFunction<ReactRenderer, TArgs>;
  113. type StoryContext<TArgs = StrictArgs> = StoryContext$1<ReactRenderer, TArgs>;
  114. type Preview = ProjectAnnotations<ReactRenderer>;
  115. /** Function that sets the globalConfig of your storybook. The global config is the preview module of your .storybook folder.
  116. *
  117. * It should be run a single time, so that your global config (e.g. decorators) is applied to your stories when using `composeStories` or `composeStory`.
  118. *
  119. * Example:
  120. *```jsx
  121. * // setup.js (for jest)
  122. * import { setProjectAnnotations } from '@storybook/react';
  123. * import projectAnnotations from './.storybook/preview';
  124. *
  125. * setProjectAnnotations(projectAnnotations);
  126. *```
  127. *
  128. * @param projectAnnotations - e.g. (import projectAnnotations from '../.storybook/preview')
  129. */
  130. declare function setProjectAnnotations(projectAnnotations: ProjectAnnotations<ReactRenderer> | ProjectAnnotations<ReactRenderer>[]): void;
  131. /** Preserved for users migrating from `@storybook/testing-react`.
  132. *
  133. * @deprecated Use setProjectAnnotations instead
  134. */
  135. declare function setGlobalConfig(projectAnnotations: ProjectAnnotations<ReactRenderer> | ProjectAnnotations<ReactRenderer>[]): void;
  136. /**
  137. * Function that will receive a story along with meta (e.g. a default export from a .stories file)
  138. * and optionally projectAnnotations e.g. (import * from '../.storybook/preview)
  139. * and will return a composed component that has all args/parameters/decorators/etc combined and applied to it.
  140. *
  141. *
  142. * It's very useful for reusing a story in scenarios outside of Storybook like unit testing.
  143. *
  144. * Example:
  145. *```jsx
  146. * import { render } from '@testing-library/react';
  147. * import { composeStory } from '@storybook/react';
  148. * import Meta, { Primary as PrimaryStory } from './Button.stories';
  149. *
  150. * const Primary = composeStory(PrimaryStory, Meta);
  151. *
  152. * test('renders primary button with Hello World', () => {
  153. * const { getByText } = render(<Primary>Hello world</Primary>);
  154. * expect(getByText(/Hello world/i)).not.toBeNull();
  155. * });
  156. *```
  157. *
  158. * @param story
  159. * @param componentAnnotations - e.g. (import Meta from './Button.stories')
  160. * @param [projectAnnotations] - e.g. (import * as projectAnnotations from '../.storybook/preview') this can be applied automatically if you use `setProjectAnnotations` in your setup files.
  161. * @param [exportsName] - in case your story does not contain a name and you want it to have a name.
  162. */
  163. declare function composeStory<TArgs extends Args = Args>(story: StoryAnnotationsOrFn<ReactRenderer, TArgs>, componentAnnotations: Meta<TArgs | any>, projectAnnotations?: ProjectAnnotations<ReactRenderer>, exportsName?: string): _storybook_types.ComposedStoryFn<ReactRenderer, Partial<TArgs>>;
  164. /**
  165. * Function that will receive a stories import (e.g. `import * as stories from './Button.stories'`)
  166. * and optionally projectAnnotations (e.g. `import * from '../.storybook/preview`)
  167. * and will return an object containing all the stories passed, but now as a composed component that has all args/parameters/decorators/etc combined and applied to it.
  168. *
  169. *
  170. * It's very useful for reusing stories in scenarios outside of Storybook like unit testing.
  171. *
  172. * Example:
  173. *```jsx
  174. * import { render } from '@testing-library/react';
  175. * import { composeStories } from '@storybook/react';
  176. * import * as stories from './Button.stories';
  177. *
  178. * const { Primary, Secondary } = composeStories(stories);
  179. *
  180. * test('renders primary button with Hello World', () => {
  181. * const { getByText } = render(<Primary>Hello world</Primary>);
  182. * expect(getByText(/Hello world/i)).not.toBeNull();
  183. * });
  184. *```
  185. *
  186. * @param csfExports - e.g. (import * as stories from './Button.stories')
  187. * @param [projectAnnotations] - e.g. (import * as projectAnnotations from '../.storybook/preview') this can be applied automatically if you use `setProjectAnnotations` in your setup files.
  188. */
  189. declare function composeStories<TModule extends Store_CSFExports<ReactRenderer, any>>(csfExports: TModule, projectAnnotations?: ProjectAnnotations<ReactRenderer>): Omit<StoriesWithPartialProps<ReactRenderer, TModule>, keyof Store_CSFExports>;
  190. export { ComponentMeta, ComponentStory, ComponentStoryFn, ComponentStoryObj, Decorator, DecoratorFn, Loader, Meta, Preview, ReactRenderer, Story, StoryContext, StoryFn, StoryObj, composeStories, composeStory, configure, forceReRender, raw, setGlobalConfig, setProjectAnnotations, storiesOf };