@storybook/react

  • Version 6.5.12
  • Published
  • 339 kB
  • 35 dependencies
  • MIT license

Install

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

Overview

Storybook for React: Develop React Component in isolation with Hot Reloading.

Index

Variables

variable addDecorator

const addDecorator: any;

    variable addParameters

    const addParameters: any;

      variable configure

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

        variable forceReRender

        const forceReRender: () => void;

          variable getStorybook

          const getStorybook: () => IStorybookSection[];

            variable raw

            const raw: () => any;

              variable setAddon

              const setAddon: (addon: any) => void;

                variable storiesOf

                const storiesOf: any;

                  Functions

                  function composeStories

                  composeStories: <TModule extends CSFExports<ReactFramework>>(
                  csfExports: TModule,
                  projectAnnotations?: ProjectAnnotations<ReactFramework>
                  ) => Pick<
                  StoriesWithPartialProps<ReactFramework, TModule>,
                  Exclude<keyof TModule, 'default' | '__esModule' | '__namedExportsOrder'>
                  >;
                  • 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 = Args>(
                  story: ComposedStory<ReactFramework, TArgs>,
                  componentAnnotations: ComponentAnnotations<ReactFramework, TArgs>,
                  projectAnnotations?: ProjectAnnotations<ReactFramework>,
                  exportsName?: string
                  ) => {
                  (extraArgs: Partial<TArgs>): ReactElement<unknown>;
                  storyName: string;
                  args: Args;
                  play: any;
                  parameters: any;
                  };
                  • 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<ReactFramework>
                  | ProjectAnnotations<ReactFramework>[]
                  ) => void;
                  • Preserved for users migrating from @storybook/testing-react.

                    Deprecated

                    Use setProjectAnnotations instead

                  function setProjectAnnotations

                  setProjectAnnotations: (
                  projectAnnotations:
                  | ProjectAnnotations<ReactFramework>
                  | ProjectAnnotations<ReactFramework>[]
                  ) => 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 * as projectAnnotations from './.storybook/preview';
                    setProjectAnnotations(projectAnnotations);

                    Parameter projectAnnotations

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

                  Type Aliases

                  type ComponentMeta

                  type ComponentMeta<
                  T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>
                  > = Meta<ComponentProps<T>>;
                  • 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 keyof JSX.IntrinsicElements | JSXElementConstructor<any>
                  > = Story<ComponentProps<T>>;
                  • For the common case where a (CSFv2) story is a simple component that receives args as props:

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

                    NOTE: this is an alias for ComponentStoryFn. In Storybook v7, ComponentStory will alias ComponentStoryObj

                  type ComponentStoryFn

                  type ComponentStoryFn<
                  T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>
                  > = StoryFn<ComponentProps<T>>;
                  • For the common case where a (CSFv2) story is a simple component that receives args as props:

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

                  type ComponentStoryObj

                  type ComponentStoryObj<
                  T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>
                  > = StoryObj<ComponentProps<T>>;
                  • 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 DecoratorFn

                  type DecoratorFn = Parameters<typeof addDecorator>[0];

                    type Meta

                    type Meta<TArgs = Args> = ComponentAnnotations<ReactFramework, TArgs>;
                    • Metadata to configure the stories for a component.

                      See Also

                      • [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)

                    type ReactFramework

                    type ReactFramework = {
                    component: ComponentType<any>;
                    storyResult: StoryFnReactReturnType;
                    };

                      type Story

                      type Story<TArgs = Args> = StoryFn<TArgs>;
                      • 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)

                          NOTE that in Storybook 7.0, this type will be renamed to StoryFn and replaced by the current StoryObj type.

                      type StoryFn

                      type StoryFn<TArgs = Args> = AnnotatedStoryFn<ReactFramework, TArgs>;
                      • 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<TArgs = Args> = StoryAnnotations<ReactFramework, TArgs>;
                      • 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 (5)

                      Dependencies (35)

                      Dev Dependencies (3)

                      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>