1 | import * as _storybook_types from '@storybook/types';
|
2 | import { Args, ComponentAnnotations, AnnotatedStoryFn, ArgsStoryFn, ArgsFromMeta, StoryAnnotations, StrictArgs, DecoratorFunction, LoaderFunction, StoryContext as StoryContext$1, ProjectAnnotations, StoryAnnotationsOrFn, Store_CSFExports, StoriesWithPartialProps } from '@storybook/types';
|
3 | export { ArgTypes, Args, Parameters, StrictArgs } from '@storybook/types';
|
4 | import { ComponentType, ComponentProps } from 'react';
|
5 | import { Simplify, SetOptional } from 'type-fest';
|
6 | import { 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 | */
|
13 | type 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 | */
|
19 | type 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 | */
|
25 | type 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>;
|
32 | type 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 | }>;
|
37 | type Decorator<TArgs = StrictArgs> = DecoratorFunction<ReactRenderer, TArgs>;
|
38 | type Loader<TArgs = StrictArgs> = LoaderFunction<ReactRenderer, TArgs>;
|
39 | type StoryContext<TArgs = StrictArgs> = StoryContext$1<ReactRenderer, TArgs>;
|
40 | type 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 | */
|
57 | declare 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 | */
|
85 | 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>>;
|
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 | */
|
111 | declare function composeStories<TModule extends Store_CSFExports<ReactRenderer, any>>(csfExports: TModule, projectAnnotations?: ProjectAnnotations<ReactRenderer>): Omit<StoriesWithPartialProps<ReactRenderer, TModule>, keyof Store_CSFExports>;
|
112 |
|
113 | export { Decorator, Loader, Meta, Preview, ReactRenderer, StoryContext, StoryFn, StoryObj, composeStories, composeStory, setProjectAnnotations };
|