@storybook/react

  • Version 9.1.1
  • Published
  • 1.66 MB
  • 2 dependencies
  • MIT license

Install

npm i @storybook/react
yarn add @storybook/react
pnpm add @storybook/react

Overview

Storybook React renderer

Index

Variables

variable INTERNAL_DEFAULT_PROJECT_ANNOTATIONS

const INTERNAL_DEFAULT_PROJECT_ANNOTATIONS: ProjectAnnotations<ReactRenderer>;

    Functions

    function composeStories

    composeStories: <TModule extends Store_CSFExports<ReactRenderer, any>>(
    csfExports: TModule,
    projectAnnotations?: ProjectAnnotations<ReactRenderer>
    ) => Omit<StoriesWithPartialProps<ReactRenderer, TModule>, keyof Store_CSFExports>;
    • Function that will receive a stories import (e.g. import * as stories from './Button.stories') and optionally projectAnnotations (e.g. `import * as projectAnnotations 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:

      import { render } from '@testing-library/react';
      import { composeStories } from '@storybook/react';
      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();
      });

      Parameter csfExports

      E.g. (import * as stories from './Button.stories')

      Parameter projectAnnotations

      E.g. (import * as projectAnnotations from '../.storybook/preview') this can be applied automatically if you use setProjectAnnotations in your setup files.

    function composeStory

    composeStory: <TArgs extends Args = Args>(
    story: StoryAnnotationsOrFn<ReactRenderer, TArgs>,
    componentAnnotations: ComponentAnnotations<
    ReactRenderer,
    ComponentProps<TCmpOrArgs>
    >,
    projectAnnotations?: ProjectAnnotations<ReactRenderer>,
    exportsName?: string
    ) => ComposedStoryFn<ReactRenderer, Partial<TArgs>>;
    • Function that will receive a story along with meta (e.g. a default export from a .stories file) and optionally projectAnnotations e.g. (import * as projectAnnotations 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:

      import { render } from '@testing-library/react';
      import { composeStory } from '@storybook/react';
      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();
      });

      Parameter story

      Parameter componentAnnotations

      E.g. (import Meta from './Button.stories')

      Parameter projectAnnotations

      E.g. (import * as projectAnnotations from '../.storybook/preview') this can be applied automatically if you use setProjectAnnotations in your setup files.

      Parameter exportsName

      In case your story does not contain a name and you want it to have a name.

    function setProjectAnnotations

    setProjectAnnotations: (
    projectAnnotations:
    | NamedOrDefaultProjectAnnotations<any>
    | NamedOrDefaultProjectAnnotations<any>[]
    ) => NormalizedProjectAnnotations<ReactRenderer>;
    • 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:

      // setup-file.js
      import { setProjectAnnotations } from '@storybook/react';
      import projectAnnotations from './.storybook/preview';
      setProjectAnnotations(projectAnnotations);

      Parameter projectAnnotations

      E.g. (import * as projectAnnotations from '../.storybook/preview')

    Interfaces

    interface ReactPreview

    interface ReactPreview<T extends AddonTypes> extends Preview<ReactTypes & T> {}

      method meta

      meta: <
      TArgs extends Args,
      Decorators extends DecoratorFunction<ReactTypes & T, any>,
      TMetaArgs extends Partial<TArgs>
      >(
      meta: {
      render?: ArgsStoryFn<ReactTypes & T, TArgs>;
      component?: ComponentType<TArgs>;
      decorators?: Decorators | Decorators[];
      args?: TMetaArgs;
      } & Omit<
      ComponentAnnotations<ReactTypes & T, TArgs>,
      'decorators' | 'component' | 'args' | 'render'
      >
      ) => ReactMeta<
      ReactTypes &
      T & {
      args: Simplify<
      TArgs &
      Simplify<
      RemoveIndexSignature<
      DecoratorsArgs<ReactTypes & T, Decorators>
      >
      >
      >;
      },
      { args: Partial<TArgs> extends TMetaArgs ? {} : TMetaArgs }
      >;

        interface ReactRenderer

        interface ReactRenderer extends WebRenderer {}

          property component

          component: ComponentType<this['T']>;

            property mount

            mount: (ui?: JSX.Element) => Promise<Canvas>;

              property storyResult

              storyResult: StoryFnReactReturnType;

                interface ReactStory

                interface ReactStory<
                T extends ReactTypes,
                TInput extends StoryAnnotations<T, T['args']>
                > extends Story<T, TInput> {}

                  property Component

                  Component: ComponentType<Partial<T['args']>>;

                    interface ReactTypes

                    interface ReactTypes extends ReactRenderer {}

                      property parameters

                      parameters: ReactParameters;

                        Type Aliases

                        type AddMocks

                        type AddMocks<TArgs, DefaultArgs> = Simplify<{
                        [T in keyof TArgs]: T extends keyof DefaultArgs
                        ? DefaultArgs[T] extends (...args: any) => any & {
                        mock: {};
                        }
                        ? DefaultArgs[T]
                        : TArgs[T]
                        : TArgs[T];
                        }>;

                          type Decorator

                          type Decorator<TArgs = StrictArgs> = DecoratorFunction<ReactRenderer, TArgs>;

                            type Loader

                            type Loader<TArgs = StrictArgs> = LoaderFunction<ReactRenderer, TArgs>;

                              type Meta

                              type Meta<TCmpOrArgs = Args> = [TCmpOrArgs] extends [ComponentType<any>]
                              ? ComponentAnnotations<ReactRenderer, ComponentProps<TCmpOrArgs>>
                              : ComponentAnnotations<ReactRenderer, TCmpOrArgs>;
                              • Metadata to configure the stories for a component.

                                See Also

                                • [Default export](https://storybook.js.org/docs/api/csf#default-export)

                              type Preview

                              type Preview = ProjectAnnotations<ReactRenderer>;

                                type StoryContext

                                type StoryContext<TArgs = StrictArgs> = StoryContext$1<ReactRenderer, TArgs>;

                                  type StoryFn

                                  type StoryFn<TCmpOrArgs = Args> = [TCmpOrArgs] extends [ComponentType<any>]
                                  ? AnnotatedStoryFn<ReactRenderer, ComponentProps<TCmpOrArgs>>
                                  : AnnotatedStoryFn<ReactRenderer, TCmpOrArgs>;
                                  • Story function that represents a CSFv2 component example.

                                    See Also

                                    • [Named Story exports](https://storybook.js.org/docs/api/csf#named-story-exports)

                                  type StoryObj

                                  type StoryObj<TMetaOrCmpOrArgs = Args> = [TMetaOrCmpOrArgs] extends [
                                  {
                                  render?: ArgsStoryFn<ReactRenderer, any>;
                                  component?: infer Component;
                                  args?: infer DefaultArgs;
                                  }
                                  ]
                                  ? 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>;
                                  • Story object that represents a CSFv3 component example.

                                    See Also

                                    • [Named Story exports](https://storybook.js.org/docs/api/csf#named-story-exports)

                                  Package Files (4)

                                  Dependencies (2)

                                  Dev Dependencies (19)

                                  Peer Dependencies (4)

                                  Badge

                                  To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                                  You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@storybook/react.

                                  • Markdown
                                    [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@storybook/react)
                                  • HTML
                                    <a href="https://www.jsdocs.io/package/@storybook/react"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>