React Renderer Types

// Core exports from @storybook/react
export type { ReactRenderer, ReactTypes, ReactParameters } from "@storybook/react";

// React types
import type { ComponentType, JSX } from "react";
import type { RootOptions } from "react-dom/client";

// Core Storybook types
import type {
  WebRenderer,
  Canvas,
  RenderContext,
  StoryContext as GenericStoryContext
} from "storybook/internal/types";

/**
 * Core React renderer interface that extends WebRenderer with React-specific functionality.
 * Defines how React components are handled within Storybook.
 */
interface ReactRenderer extends WebRenderer {
  /** The React component type being rendered */
  component: ComponentType<this['T']>;
  /** The expected return type from story functions (JSX.Element) */
  storyResult: StoryFnReactReturnType;
  /** Function to mount React elements for testing */
  mount: (ui?: JSX.Element) => Promise<Canvas>;
}

/**
 * Extended React type system that includes renderer capabilities and React-specific parameters.
 * Used throughout the React renderer for type inference and configuration.
 */
interface ReactTypes extends ReactRenderer {
  /** React-specific parameters for story configuration */
  parameters: ReactParameters;
}

/**
 * React-specific parameters interface for configuring React behavior in stories.
 * Includes options for React Server Components and React DOM configuration.
 */
interface ReactParameters {
  /** React renderer configuration */
  react?: {
    /**
     * Whether to enable React Server Components (RSC)
     * Requires React >= 18.3 for proper functionality
     * 
     * @see https://storybook.js.org/docs/get-started/frameworks/nextjs#react-server-components-rsc
     */
    rsc?: boolean;
    /** Options passed to React root creation (React 18+) */
    rootOptions?: RootOptions;
  };
}

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

const meta: Meta<typeof ServerComponent> = {
  title: "Example/ServerComponent",
  component: ServerComponent,
  parameters: {
    react: {
      rsc: true, // Enable React Server Components
      rootOptions: {
        onRecoverableError: (error) => {
          console.warn("RSC recoverable error:", error);
        },
      },
    },
  },
};

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

export const Default: Story = {};

/**
 * The expected return type from React story functions.
 * All React stories must return JSX elements.
 */
type StoryFnReactReturnType = JSX.Element;

import type { StoryFn } from "@storybook/react";
import { Button } from "./Button";

// Story function must return JSX.Element
const Primary: StoryFn<typeof Button> = (args): StoryFnReactReturnType => {
  return <Button {...args} />;
};

/**
 * Configuration interface for displaying errors in the React renderer.
 * Used by error boundaries and error handling mechanisms.
 */
interface ShowErrorArgs {
  /** The main error title to display */
  title: string;
  /** Detailed error description or message */
  description: string;
}

/**
 * Render context type providing access to story execution context.
 * Contains story metadata, canvas elements, and rendering functions.
 */
type RenderContext = RenderContext<ReactRenderer>;

/**
 * Story context type providing access to story state and configuration.
 * Available in decorators, loaders, and render functions.
 */
type StoryContext = StoryContext<ReactRenderer>;

import type { ReactRenderer } from "@storybook/react";

const customMount: ReactRenderer['mount'] = (context) => async (ui) => {
  if (ui != null) {
    context.originalStoryFn = () => ui;
  }
  
  // Custom mounting logic
  await context.renderToCanvas();
  
  // Return the canvas for testing
  return context.canvas;
};

import type { Meta } from "@storybook/react";
import type { RootOptions } from "react-dom/client";

const rootOptions: RootOptions = {
  onRecoverableError: (error, errorInfo) => {
    console.error("React recoverable error:", error, errorInfo);
  },
  identifierPrefix: "storybook-",
};

const meta: Meta = {
  parameters: {
    react: {
      rootOptions,
    },
  },
};

// Internal error boundary implementation
class ErrorBoundary extends React.Component<{
  showException: (err: Error) => void;
  showMain: () => void;
  children?: React.ReactNode;
}> {
  state = { hasError: false };

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  componentDidCatch(err: Error) {
    const { showException } = this.props;
    showException(err);
  }

  render() {
    const { hasError } = this.state;
    const { children } = this.props;
    return hasError ? null : children;
  }
}

import type { Preview } from "@storybook/react";

const preview: Preview = {
  parameters: {
    react: {
      rsc: true,
    },
  },
  decorators: [
    (Story, context) => {
      // RSC requires React.Suspense wrapper
      if (context.parameters?.react?.rsc) {
        return (
          <React.Suspense fallback={<div>Loading...</div>}>
            <Story />
          </React.Suspense>
        );
      }
      return <Story />;
    },
  ],
};

export default preview;