or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.mdportable-stories.mdpreview-configuration.mdreact-renderer.mdstory-types.mdtesting-integration.md
tile.json

tessl/npm-storybook--react

React renderer for Storybook framework providing TypeScript support, portable stories, and React-specific functionality

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@storybook/react@9.1.x

To install, run

npx @tessl/cli install tessl/npm-storybook--react@9.1.0

index.mddocs/

Storybook React

Storybook React is the React renderer package for Storybook, a frontend workshop for building UI components and pages in isolation. It provides React-specific functionality including component mounting, prop extraction, TypeScript support, and integration with React DevTools. The package enables developers to create, test, and document React components with hot reloading, interactive controls, and comprehensive testing capabilities.

Package Information

  • Package Name: @storybook/react
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @storybook/react

Core Imports

// Essential types for story creation
import type { Meta, StoryObj, StoryFn, Preview } from "@storybook/react";

// Decorator and configuration types
import type { Decorator, Loader, StoryContext } from "@storybook/react";

// Advanced preview configuration
import { __definePreview } from "@storybook/react";

// Portable stories for testing
import { composeStory, composeStories, setProjectAnnotations } from "@storybook/react";

// Experimental Playwright integration
import { createTest } from "@storybook/react/experimental-playwright";

// React renderer types (for advanced usage)
import type { ReactRenderer, ReactTypes, ReactParameters } from "@storybook/react";

For CommonJS:

const { Meta, StoryObj, composeStory, composeStories } = require("@storybook/react");

Dependencies:

This package requires the following peer dependencies:

  • react (^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta)
  • react-dom (^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta)
  • storybook (workspace:^)
  • typescript (>= 4.9.x, optional)

Basic Usage

import type { Meta, StoryObj } from "@storybook/react";
import { Button } from "./Button";

// Define component metadata
const meta: Meta<typeof Button> = {
  title: "Example/Button",
  component: Button,
  parameters: {
    layout: "centered",
  },
  tags: ["autodocs"],
  argTypes: {
    backgroundColor: { control: "color" },
  },
};

export default meta;
type Story = StoryObj<typeof meta>;

// Define stories
export const Primary: Story = {
  args: {
    primary: true,
    label: "Button",
  },
};

export const Secondary: Story = {
  args: {
    label: "Button",
  },
};

Architecture

Storybook React is built around several key components:

  • Type System: Complete TypeScript definitions for React components, stories, and configurations
  • Portable Stories: Stories can be reused outside Storybook for unit testing and other purposes
  • React Renderer: Handles React-specific rendering including error boundaries and React DevTools integration
  • Preview System: Configurable preview environment with decorators and parameters
  • CSF Support: Component Story Format v2 and v3 with full type safety
  • Testing Integration: Built-in compatibility with testing libraries and Playwright

Capabilities

Story Types & Metadata

Core TypeScript definitions for creating type-safe stories and component metadata. Essential for all Storybook React usage.

type Meta<TCmpOrArgs = Args> = ComponentAnnotations<ReactRenderer, ComponentProps<TCmpOrArgs>>;

type StoryObj<TMetaOrCmpOrArgs = Args> = StoryAnnotations<ReactRenderer, TMetaOrCmpOrArgs>;

type StoryFn<TCmpOrArgs = Args> = AnnotatedStoryFn<ReactRenderer, ComponentProps<TCmpOrArgs>>;

Story Types & Metadata

Portable Stories

Functionality for using Storybook stories outside of Storybook, particularly useful for unit testing and component reuse.

function setProjectAnnotations(
  projectAnnotations: NamedOrDefaultProjectAnnotations<any> | NamedOrDefaultProjectAnnotations<any>[]
): NormalizedProjectAnnotations<ReactRenderer>;

function composeStory<TArgs extends Args = Args>(
  story: StoryAnnotationsOrFn<ReactRenderer, TArgs>,
  componentAnnotations: Meta<TArgs | any>,
  projectAnnotations?: ProjectAnnotations<ReactRenderer>,
  exportsName?: string
): ComposedStoryFn<ReactRenderer, Partial<TArgs>>;

function composeStories<TModule extends Store_CSFExports<ReactRenderer, any>>(
  csfExports: TModule,
  projectAnnotations?: ProjectAnnotations<ReactRenderer>
): Omit<StoriesWithPartialProps<ReactRenderer, TModule>, keyof Store_CSFExports>;

Portable Stories

Preview Configuration

Advanced preview system for configuring the Storybook React environment, decorators, and rendering behavior.

function __definePreview<Addons extends PreviewAddon<never>[]>(
  input: { addons: Addons } & ProjectAnnotations<ReactTypes & InferTypes<Addons>>
): ReactPreview<ReactTypes & InferTypes<Addons>>;

interface ReactPreview<T extends AddonTypes> extends Preview<ReactTypes & T> {
  meta<TArgs extends Args>(
    meta: ComponentAnnotations<ReactTypes & T, TArgs>
  ): ReactMeta<ReactTypes & T, TArgs>;
}

Preview Configuration

React Renderer Types

Core React renderer interfaces and type definitions for handling React-specific functionality.

interface ReactRenderer extends WebRenderer {
  component: ComponentType<this['T']>;
  storyResult: StoryFnReactReturnType;
  mount: (ui?: JSX.Element) => Promise<Canvas>;
}

interface ReactTypes extends ReactRenderer {
  parameters: ReactParameters;
}

interface ReactParameters {
  react?: {
    rsc?: boolean;
    rootOptions?: RootOptions;
  };
}

React Renderer Types

Testing Integration

Testing utilities and experimental Playwright integration for enhanced testing workflows.

function createTest(): any;

Testing Integration