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