UNPKG

6.47 kBTypeScriptView Raw
1import * as _storybook_types from '@storybook/types';
2import { Args, ComponentAnnotations, AnnotatedStoryFn, ArgsStoryFn, ArgsFromMeta, StoryAnnotations, StrictArgs, DecoratorFunction, LoaderFunction, StoryContext as StoryContext$1, ProjectAnnotations, StoryAnnotationsOrFn, Store_CSFExports, StoriesWithPartialProps } from '@storybook/types';
3export { ArgTypes, Args, Parameters, StrictArgs } from '@storybook/types';
4import { ComponentType, ComponentProps } from 'react';
5import { Simplify, SetOptional } from 'type-fest';
6import { R as ReactRenderer } from './types-bf5e6555.js';
7
8/**
9 * Metadata to configure the stories for a component.
10 *
11 * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
12 */
13type Meta<TCmpOrArgs = Args> = [TCmpOrArgs] extends [ComponentType<any>] ? ComponentAnnotations<ReactRenderer, ComponentProps<TCmpOrArgs>> : ComponentAnnotations<ReactRenderer, TCmpOrArgs>;
14/**
15 * Story function that represents a CSFv2 component example.
16 *
17 * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
18 */
19type StoryFn<TCmpOrArgs = Args> = [TCmpOrArgs] extends [ComponentType<any>] ? AnnotatedStoryFn<ReactRenderer, ComponentProps<TCmpOrArgs>> : AnnotatedStoryFn<ReactRenderer, TCmpOrArgs>;
20/**
21 * Story object that represents a CSFv3 component example.
22 *
23 * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
24 */
25type StoryObj<TMetaOrCmpOrArgs = Args> = [TMetaOrCmpOrArgs] extends [
26 {
27 render?: ArgsStoryFn<ReactRenderer, any>;
28 component?: infer Component;
29 args?: infer DefaultArgs;
30 }
31] ? 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>> : never : TMetaOrCmpOrArgs extends ComponentType<any> ? StoryAnnotations<ReactRenderer, ComponentProps<TMetaOrCmpOrArgs>> : StoryAnnotations<ReactRenderer, TMetaOrCmpOrArgs>;
32type AddMocks<TArgs, DefaultArgs> = Simplify<{
33 [T in keyof TArgs]: T extends keyof DefaultArgs ? DefaultArgs[T] extends (...args: any) => any & {
34 mock: {};
35 } ? DefaultArgs[T] : TArgs[T] : TArgs[T];
36}>;
37type Decorator<TArgs = StrictArgs> = DecoratorFunction<ReactRenderer, TArgs>;
38type Loader<TArgs = StrictArgs> = LoaderFunction<ReactRenderer, TArgs>;
39type StoryContext<TArgs = StrictArgs> = StoryContext$1<ReactRenderer, TArgs>;
40type Preview = ProjectAnnotations<ReactRenderer>;
41
42/** Function that sets the globalConfig of your storybook. The global config is the preview module of your .storybook folder.
43 *
44 * 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`.
45 *
46 * Example:
47 *```jsx
48 * // setup.js (for jest)
49 * import { setProjectAnnotations } from '@storybook/react';
50 * import projectAnnotations from './.storybook/preview';
51 *
52 * setProjectAnnotations(projectAnnotations);
53 *```
54 *
55 * @param projectAnnotations - e.g. (import projectAnnotations from '../.storybook/preview')
56 */
57declare function setProjectAnnotations(projectAnnotations: ProjectAnnotations<ReactRenderer> | ProjectAnnotations<ReactRenderer>[]): void;
58/**
59 * Function that will receive a story along with meta (e.g. a default export from a .stories file)
60 * and optionally projectAnnotations e.g. (import * from '../.storybook/preview)
61 * and will return a composed component that has all args/parameters/decorators/etc combined and applied to it.
62 *
63 *
64 * It's very useful for reusing a story in scenarios outside of Storybook like unit testing.
65 *
66 * Example:
67 *```jsx
68 * import { render } from '@testing-library/react';
69 * import { composeStory } from '@storybook/react';
70 * import Meta, { Primary as PrimaryStory } from './Button.stories';
71 *
72 * const Primary = composeStory(PrimaryStory, Meta);
73 *
74 * test('renders primary button with Hello World', () => {
75 * const { getByText } = render(<Primary>Hello world</Primary>);
76 * expect(getByText(/Hello world/i)).not.toBeNull();
77 * });
78 *```
79 *
80 * @param story
81 * @param componentAnnotations - e.g. (import Meta from './Button.stories')
82 * @param [projectAnnotations] - e.g. (import * as projectAnnotations from '../.storybook/preview') this can be applied automatically if you use `setProjectAnnotations` in your setup files.
83 * @param [exportsName] - in case your story does not contain a name and you want it to have a name.
84 */
85declare 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>>;
86/**
87 * Function that will receive a stories import (e.g. `import * as stories from './Button.stories'`)
88 * and optionally projectAnnotations (e.g. `import * from '../.storybook/preview`)
89 * 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.
90 *
91 *
92 * It's very useful for reusing stories in scenarios outside of Storybook like unit testing.
93 *
94 * Example:
95 *```jsx
96 * import { render } from '@testing-library/react';
97 * import { composeStories } from '@storybook/react';
98 * import * as stories from './Button.stories';
99 *
100 * const { Primary, Secondary } = composeStories(stories);
101 *
102 * test('renders primary button with Hello World', () => {
103 * const { getByText } = render(<Primary>Hello world</Primary>);
104 * expect(getByText(/Hello world/i)).not.toBeNull();
105 * });
106 *```
107 *
108 * @param csfExports - e.g. (import * as stories from './Button.stories')
109 * @param [projectAnnotations] - e.g. (import * as projectAnnotations from '../.storybook/preview') this can be applied automatically if you use `setProjectAnnotations` in your setup files.
110 */
111declare function composeStories<TModule extends Store_CSFExports<ReactRenderer, any>>(csfExports: TModule, projectAnnotations?: ProjectAnnotations<ReactRenderer>): Omit<StoriesWithPartialProps<ReactRenderer, TModule>, keyof Store_CSFExports>;
112
113export { Decorator, Loader, Meta, Preview, ReactRenderer, StoryContext, StoryFn, StoryObj, composeStories, composeStory, setProjectAnnotations };