| 1 | import { CSFExports, ComposedStory, StoriesWithPartialProps } from '@storybook/store';
|
| 2 | import { ProjectAnnotations, Args } from '@storybook/csf';
|
| 3 | import type { Meta, ReactFramework } from '../preview/types-6-0';
|
| 4 | /** Function that sets the globalConfig of your storybook. The global config is the preview module of your .storybook folder.
|
| 5 | *
|
| 6 | * 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`.
|
| 7 | *
|
| 8 | * Example:
|
| 9 | *```jsx
|
| 10 | * // setup.js (for jest)
|
| 11 | * import { setProjectAnnotations } from '@storybook/react';
|
| 12 | * import * as projectAnnotations from './.storybook/preview';
|
| 13 | *
|
| 14 | * setProjectAnnotations(projectAnnotations);
|
| 15 | *```
|
| 16 | *
|
| 17 | * @param projectAnnotations - e.g. (import * as projectAnnotations from '../.storybook/preview')
|
| 18 | */
|
| 19 | export declare function setProjectAnnotations(projectAnnotations: ProjectAnnotations<ReactFramework> | ProjectAnnotations<ReactFramework>[]): void;
|
| 20 | /** Preserved for users migrating from `@storybook/testing-react`.
|
| 21 | *
|
| 22 | * @deprecated Use setProjectAnnotations instead
|
| 23 | */
|
| 24 | export declare function setGlobalConfig(projectAnnotations: ProjectAnnotations<ReactFramework> | ProjectAnnotations<ReactFramework>[]): void;
|
| 25 | /**
|
| 26 | * Function that will receive a story along with meta (e.g. a default export from a .stories file)
|
| 27 | * and optionally projectAnnotations e.g. (import * from '../.storybook/preview)
|
| 28 | * and will return a composed component that has all args/parameters/decorators/etc combined and applied to it.
|
| 29 | *
|
| 30 | *
|
| 31 | * It's very useful for reusing a story in scenarios outside of Storybook like unit testing.
|
| 32 | *
|
| 33 | * Example:
|
| 34 | *```jsx
|
| 35 | * import { render } from '@testing-library/react';
|
| 36 | * import { composeStory } from '@storybook/react';
|
| 37 | * import Meta, { Primary as PrimaryStory } from './Button.stories';
|
| 38 | *
|
| 39 | * const Primary = composeStory(PrimaryStory, Meta);
|
| 40 | *
|
| 41 | * test('renders primary button with Hello World', () => {
|
| 42 | * const { getByText } = render(<Primary>Hello world</Primary>);
|
| 43 | * expect(getByText(/Hello world/i)).not.toBeNull();
|
| 44 | * });
|
| 45 | *```
|
| 46 | *
|
| 47 | * @param story
|
| 48 | * @param componentAnnotations - e.g. (import Meta from './Button.stories')
|
| 49 | * @param [projectAnnotations] - e.g. (import * as projectAnnotations from '../.storybook/preview') this can be applied automatically if you use `setProjectAnnotations` in your setup files.
|
| 50 | * @param [exportsName] - in case your story does not contain a name and you want it to have a name.
|
| 51 | */
|
| 52 | export declare function composeStory<TArgs = Args>(story: ComposedStory<ReactFramework, TArgs>, componentAnnotations: Meta<TArgs | any>, projectAnnotations?: ProjectAnnotations<ReactFramework>, exportsName?: string): {
|
| 53 | (extraArgs: Partial<TArgs>): import("../preview/types").StoryFnReactReturnType;
|
| 54 | storyName: string;
|
| 55 | args: Args;
|
| 56 | play: import("@storybook/store").ComposedStoryPlayFn;
|
| 57 | parameters: import("@storybook/store").Parameters;
|
| 58 | };
|
| 59 | /**
|
| 60 | * Function that will receive a stories import (e.g. `import * as stories from './Button.stories'`)
|
| 61 | * and optionally projectAnnotations (e.g. `import * from '../.storybook/preview`)
|
| 62 | * 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.
|
| 63 | *
|
| 64 | *
|
| 65 | * It's very useful for reusing stories in scenarios outside of Storybook like unit testing.
|
| 66 | *
|
| 67 | * Example:
|
| 68 | *```jsx
|
| 69 | * import { render } from '@testing-library/react';
|
| 70 | * import { composeStories } from '@storybook/react';
|
| 71 | * import * as stories from './Button.stories';
|
| 72 | *
|
| 73 | * const { Primary, Secondary } = composeStories(stories);
|
| 74 | *
|
| 75 | * test('renders primary button with Hello World', () => {
|
| 76 | * const { getByText } = render(<Primary>Hello world</Primary>);
|
| 77 | * expect(getByText(/Hello world/i)).not.toBeNull();
|
| 78 | * });
|
| 79 | *```
|
| 80 | *
|
| 81 | * @param csfExports - e.g. (import * as stories 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 | */
|
| 84 | export declare function composeStories<TModule extends CSFExports<ReactFramework>>(csfExports: TModule, projectAnnotations?: ProjectAnnotations<ReactFramework>): Pick<StoriesWithPartialProps<ReactFramework, TModule>, Exclude<keyof TModule, "default" | "__esModule" | "__namedExportsOrder">>;
|