@storybook/react

  • Version 7.6.17
  • Published
  • 104 kB
  • 21 dependencies
  • MIT license

Install

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

Overview

Storybook React renderer

Index

Variables

variable configure

const configure: (loader: Addon_Loadable, module: NodeModule) => void;

    variable forceReRender

    const forceReRender: () => void;

      variable raw

      const raw: () => any;

        variable storiesOf

        const storiesOf: any;

          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 * 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
          ) => _storybook_types.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 * 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 setGlobalConfig

          setGlobalConfig: (
          projectAnnotations:
          | ProjectAnnotations<ReactRenderer>
          | ProjectAnnotations<ReactRenderer>[]
          ) => void;
          • Preserved for users migrating from @storybook/testing-react.

            Deprecated

            Use setProjectAnnotations instead

          function setProjectAnnotations

          setProjectAnnotations: (
          projectAnnotations:
          | ProjectAnnotations<ReactRenderer>
          | ProjectAnnotations<ReactRenderer>[]
          ) => void;
          • 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.js (for jest)
            import { setProjectAnnotations } from '@storybook/react';
            import projectAnnotations from './.storybook/preview';
            setProjectAnnotations(projectAnnotations);

            Parameter projectAnnotations

            e.g. (import projectAnnotations from '../.storybook/preview')

          Interfaces

          interface ReactRenderer

          interface ReactRenderer extends WebRenderer {}

            property component

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

              property storyResult

              storyResult: StoryFnReactReturnType;

                Type Aliases

                type ComponentMeta

                type ComponentMeta<T extends JSXElement> = Meta<ComponentProps<T>>;
                • Deprecated

                  Use Meta instead, e.g. ComponentMeta<typeof Button> -> Meta<typeof Button>.

                  For the common case where a component's stories are simple components that receives args as props:

                  export default { ... } as ComponentMeta<typeof Button>;

                type ComponentStory

                type ComponentStory<T extends JSXElement> = ComponentStoryFn<T>;
                • Deprecated

                  Use StoryFn instead, e.g. ComponentStory<typeof Button> -> StoryFn<typeof Button>. Use StoryObj if you want to migrate to CSF3, which uses objects instead of functions to represent stories You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/.

                  For the common case where a (CSFv3) story is a simple component that receives args as props:

                  const MyStory: ComponentStory<typeof Button> = {
                  args: { buttonArg1: 'val' },
                  }

                type ComponentStoryFn

                type ComponentStoryFn<T extends JSXElement> = StoryFn<ComponentProps<T>>;
                • Deprecated

                  Use StoryFn instead, e.g. ComponentStoryFn<typeof Button> -> StoryFn<typeof Button>. Use StoryObj if you want to migrate to CSF3, which uses objects instead of functions to represent stories. You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/

                  For the common case where a (CSFv2) story is a simple component that receives args as props:

                  const Template: ComponentStoryFn<typeof Button> = (args) => <Button {...args} />

                type ComponentStoryObj

                type ComponentStoryObj<T extends JSXElement> = StoryObj<ComponentProps<T>>;
                • Deprecated

                  Use StoryObj instead, e.g. ComponentStoryObj<typeof Button> -> StoryObj<typeof Button>.

                  For the common case where a (CSFv3) story is a simple component that receives args as props:

                  const MyStory: ComponentStoryObj<typeof Button> = {
                  args: { buttonArg1: 'val' },
                  }

                type Decorator

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

                  type DecoratorFn

                  type DecoratorFn = DecoratorFunction<ReactRenderer>;
                  • Deprecated

                    Use Decorator instead.

                  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/formats/component-story-format/#default-export)

                    type Preview

                    type Preview = ProjectAnnotations<ReactRenderer>;

                      type Story

                      type Story<TArgs = Args> = StoryFn<TArgs>;
                      • See Also

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

                        Deprecated

                        Use StoryFn instead. Use StoryObj if you want to migrate to CSF3, which uses objects instead of functions to represent stories. You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/

                        Story function that represents a CSFv2 component example.

                      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/formats/component-story-format/#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 & ActionArgs<TArgs>)
                        >
                        >
                        : never
                        : TMetaOrCmpOrArgs extends ComponentType<any>
                        ? StoryAnnotations<ReactRenderer, ComponentProps<TMetaOrCmpOrArgs>>
                        : StoryAnnotations<ReactRenderer, TMetaOrCmpOrArgs>;
                        • Story function that represents a CSFv3 component example.

                          See Also

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

                        Package Files (2)

                        Dependencies (21)

                        Dev Dependencies (6)

                        Peer Dependencies (3)

                        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>