@storybook/nextjs-vite/dist/index.d.ts

Storybook for Next.js and Vite: Develop, document, and test UI components in isolation

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 vitePluginStorybookNextJs from 'vite-plugin-storybook-nextjs';
import { BuilderOptions } from '@storybook/builder-vite';
import { StorybookConfig as StorybookConfig$1 } from '@storybook/react-vite';
import { NextRouter } from 'next/router';

type FrameworkName = CompatibleString<'@storybook/nextjs-vite'>;
type BuilderName = CompatibleString<'@storybook/builder-vite'>;
type FrameworkOptions = {
    /** The path to the Next.js configuration file. */
    nextConfigPath?: string;
    image?: {
        includeFiles?: string[];
        excludeFiles?: string[];
    };
    builder?: BuilderOptions;
};
type StorybookConfigFramework = {
    framework: FrameworkName | {
        name: FrameworkName;
        options: FrameworkOptions;
    };
    core?: StorybookConfig$1['core'] & {
        builder?: BuilderName | {
            name: BuilderName;
            options: BuilderOptions;
        };
    };
};
/** The interface for Storybook configuration in `main.ts` files. */
type StorybookConfig = Omit<StorybookConfig$1, keyof StorybookConfigFramework> & 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<NextRouter>;
        /** Next.js router configuration */
        router?: Partial<NextRouter>;
    };
}
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-vite';
 * import projectAnnotations from './.storybook/preview';
 *
 * setProjectAnnotations(projectAnnotations);
 * ```
 *
 * @param projectAnnotations - E.g. (import projectAnnotations from '../.storybook/preview')
 */
declare function setProjectAnnotations(projectAnnotations: NamedOrDefaultProjectAnnotations<any> | NamedOrDefaultProjectAnnotations<any>[]): NormalizedProjectAnnotations<ReactRenderer>;
/**
 * 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-vite';
 * import Meta, { Primary as PrimaryStory } from './Button.stories';
 *
 * const Primary = composeStory(PrimaryStory, Meta);
 *
 * test('renders primary button with Hello World', () => {
 *   const { getByText } = render(<Primary>Hello world</Primary>);
 *   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<TArgs extends Args = Args>(story: StoryAnnotationsOrFn<ReactRenderer, TArgs>, componentAnnotations: Meta<TArgs | any>, projectAnnotations?: ProjectAnnotations<ReactRenderer>, exportsName?: string): ComposedStoryFn<ReactRenderer, Partial<TArgs>>;
/**
 * 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-vite';
 * import * as stories from './Button.stories';
 *
 * const { Primary, Secondary } = composeStories(stories);
 *
 * test('renders primary button with Hello World', () => {
 *   const { getByText } = render(<Primary>Hello world</Primary>);
 *   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<TModule extends Store_CSFExports<ReactRenderer, any>>(csfExports: TModule, projectAnnotations?: ProjectAnnotations<ReactRenderer>): Omit<StoriesWithPartialProps<ReactRenderer, TModule>, keyof Store_CSFExports>;

declare module '@storybook/nextjs-vite/vite-plugin' {
    const storybookNextJsPlugin: typeof vitePluginStorybookNextJs;
}
declare function definePreview<Addons extends PreviewAddon<never>[]>(preview: {
    addons?: Addons;
} & ProjectAnnotations<ReactTypes & NextJsTypes & InferTypes<Addons>>): NextPreview<InferTypes<Addons>>;
interface NextPreview<T extends AddonTypes> extends ReactPreview<NextJsTypes & T> {
}

export { type FrameworkOptions, type NextJsParameters, type NextJsTypes, type StorybookConfig, composeStories, composeStory, definePreview, setProjectAnnotations };