import { PreviewAddon, InferTypes, AddonTypes } from 'storybook/internal/csf'; import { CompatibleString, NamedOrDefaultProjectAnnotations, NormalizedProjectAnnotations, Args, StoryAnnotationsOrFn, ProjectAnnotations, ComposedStoryFn, Store_CSFExports, StoriesWithPartialProps } from 'storybook/internal/types'; import { ReactRenderer, Meta, ReactTypes, ReactPreview } from '@storybook/react'; export * from '@storybook/react'; import { BuilderOptions, StorybookConfigWebpack, TypescriptOptions } from '@storybook/builder-webpack5'; import { ReactOptions, StorybookConfig as StorybookConfig$1, TypescriptOptions as TypescriptOptions$1 } from '@storybook/preset-react-webpack'; import * as NextImage from 'next/image'; import { NextRouter } from 'next/router'; type FrameworkName = CompatibleString<'@storybook/nextjs'>; type BuilderName = CompatibleString<'@storybook/builder-webpack5'>; type FrameworkOptions = ReactOptions & { nextConfigPath?: string; builder?: BuilderOptions; }; type StorybookConfigFramework = { framework: FrameworkName | { name: FrameworkName; options: FrameworkOptions; }; core?: StorybookConfig$1['core'] & { builder?: BuilderName | { name: BuilderName; options: BuilderOptions; }; }; typescript?: Partial & StorybookConfig$1['typescript']; }; /** The interface for Storybook configuration in `main.ts` files. */ type StorybookConfig = Omit & StorybookConfigWebpack & StorybookConfigFramework; interface NextJsParameters { /** * Next.js framework configuration * * @see https://storybook.js.org/docs/get-started/frameworks/nextjs */ nextjs?: { /** * Enable App Directory features If your story imports components that use next/navigation, you * need to set this parameter to true */ appDirectory?: boolean; /** * Next.js navigation configuration when using `next/navigation`. Please note that it can only * be used in components/pages in the app directory. */ navigation?: Partial; /** Next.js router configuration */ router?: Partial; /** Next.js image props */ image?: Partial; }; } interface NextJsTypes { parameters: NextJsParameters; } /** * Function that sets the globalConfig of your storybook. The global config is the preview module of * your .storybook folder. * * 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`. * * Example: * * ```jsx * // setup-file.js * import { setProjectAnnotations } from '@storybook/nextjs'; * import projectAnnotations from './.storybook/preview'; * * setProjectAnnotations(projectAnnotations); * ``` * * @param projectAnnotations - E.g. (import projectAnnotations from '../.storybook/preview') */ declare function setProjectAnnotations(projectAnnotations: NamedOrDefaultProjectAnnotations | NamedOrDefaultProjectAnnotations[]): NormalizedProjectAnnotations; /** * Function that will receive a story along with meta (e.g. a default export from a .stories file) * and optionally projectAnnotations e.g. (import * from '../.storybook/preview) and will return a * composed component that has all args/parameters/decorators/etc combined and applied to it. * * It's very useful for reusing a story in scenarios outside of Storybook like unit testing. * * Example: * * ```jsx * import { render } from '@testing-library/react'; * import { composeStory } from '@storybook/nextjs'; * import Meta, { Primary as PrimaryStory } from './Button.stories'; * * const Primary = composeStory(PrimaryStory, Meta); * * test('renders primary button with Hello World', () => { * const { getByText } = render(Hello world); * expect(getByText(/Hello world/i)).not.toBeNull(); * }); * ``` * * @param story * @param componentAnnotations - E.g. (import Meta from './Button.stories') * @param [projectAnnotations] - E.g. (import * as projectAnnotations from '../.storybook/preview') * this can be applied automatically if you use `setProjectAnnotations` in your setup files. * @param [exportsName] - In case your story does not contain a name and you want it to have a name. */ declare function composeStory(story: StoryAnnotationsOrFn, componentAnnotations: Meta, projectAnnotations?: ProjectAnnotations, exportsName?: string): ComposedStoryFn>; /** * Function that will receive a stories import (e.g. `import * as stories from './Button.stories'`) * and optionally projectAnnotations (e.g. `import * from '../.storybook/preview`) 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. * * It's very useful for reusing stories in scenarios outside of Storybook like unit testing. * * Example: * * ```jsx * import { render } from '@testing-library/react'; * import { composeStories } from '@storybook/nextjs'; * import * as stories from './Button.stories'; * * const { Primary, Secondary } = composeStories(stories); * * test('renders primary button with Hello World', () => { * const { getByText } = render(Hello world); * expect(getByText(/Hello world/i)).not.toBeNull(); * }); * ``` * * @param csfExports - E.g. (import * as stories from './Button.stories') * @param [projectAnnotations] - E.g. (import * as projectAnnotations from '../.storybook/preview') * this can be applied automatically if you use `setProjectAnnotations` in your setup files. */ declare function composeStories>(csfExports: TModule, projectAnnotations?: ProjectAnnotations): Omit, keyof Store_CSFExports>; declare function definePreview[]>(preview: { addons?: Addons; } & ProjectAnnotations>): NextPreview>; interface NextPreview extends ReactPreview { } export { type FrameworkOptions, type NextJsParameters, type NextJsTypes, type NextPreview, type StorybookConfig, composeStories, composeStory, definePreview, setProjectAnnotations };