Preview Configuration

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

// Core Storybook types
import type {
  Args,
  ProjectAnnotations,
  ComponentAnnotations,
  StoryAnnotations,
  DecoratorFunction,
  ArgsStoryFn,
  PreviewAddon,
  AddonTypes,
  Preview,
  Meta,
  Story,
  InferTypes
} from "storybook/internal/types";

// React types
import type { ComponentType } from "react";

// Utility types
import type { SetOptional, Simplify, UnionToIntersection } from "type-fest";

// React renderer types (see React Renderer Types documentation)
import type { ReactTypes, ReactRenderer } from "./react-renderer.md";

// Story types (see Story Types & Metadata documentation)
import type { AddMocks } from "./story-types.md#addmocks-type-helper";

/**
 * Defines a preview configuration with addon integration and type safety.
 * Combines React renderer annotations with custom addons and project configuration.
 * 
 * @param input - Configuration object containing addons and project annotations
 * @returns Strongly-typed ReactPreview instance with addon support
 */
function __definePreview<Addons extends PreviewAddon<never>[]>(
  input: { addons: Addons } & ProjectAnnotations<ReactTypes & InferTypes<Addons>>
): ReactPreview<ReactTypes & InferTypes<Addons>>;

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

// Define preview with custom configuration
const preview = __definePreview({
  addons: [], // Custom addons would go here
  parameters: {
    actions: { argTypesRegex: "^on[A-Z].*" },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
    backgrounds: {
      default: "light",
      values: [
        { name: "light", value: "#ffffff" },
        { name: "dark", value: "#333333" },
      ],
    },
  },
  decorators: [
    (Story, context) => (
      <div className={`theme-${context.globals.theme}`}>
        <Story />
      </div>
    ),
  ],
});

/**
 * Extended preview interface for React with addon type inference.
 * Provides enhanced meta creation with React-specific typing and story composition.
 */
interface ReactPreview<T extends AddonTypes> extends Preview<ReactTypes & T> {
  /**
   * Creates component metadata with React-specific type safety and addon support.
   * Automatically configures story creation with proper component prop inference.
   */
  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, TArgs>;
}

const preview = __definePreview({
  addons: [],
  // ... other configuration
});

// Create type-safe meta using the preview
const buttonMeta = preview.meta({
  title: "Example/Button",
  component: Button,
  args: {
    primary: false,
    size: "medium",
  },
  argTypes: {
    size: {
      control: { type: "select" },
      options: ["small", "medium", "large"],
    },
  },
});

/**
 * React-specific meta interface that extends standard Meta with React functionality.
 * Provides enhanced story creation with component inference and decorator support.
 */
interface ReactMeta<T extends ReactTypes, MetaInput extends ComponentAnnotations<T>>
  extends Meta<T, MetaInput> {
  /**
   * Creates a story with React-specific functionality and type safety.
   * Supports both functional and object-based story definitions.
   */
  story<
    TInput extends
      | (() => ReactTypes['storyResult'])
      | (StoryAnnotations<T, T['args']> & {
          render: () => ReactTypes['storyResult'];
        }),
  >(
    story?: TInput
  ): ReactStory<T, TInput extends () => ReactTypes['storyResult'] ? { render: TInput } : TInput>;

  /**
   * Creates a story with full configuration and type inference.
   * Handles optional args based on meta configuration.
   */
  story<
    TInput extends Simplify<
      StoryAnnotations<
        T,
        AddMocks<T['args'], MetaInput['args']>,
        SetOptional<T['args'], keyof T['args'] & keyof MetaInput['args']>
      >
    >,
  >(
    story?: TInput
  ): ReactStory<T, TInput>;
}

/**
 * React-specific story interface that extends standard Story with React functionality.
 * Provides a Component property that can be rendered directly as a React component.
 */
interface ReactStory<T extends ReactTypes, TInput extends StoryAnnotations<T, T['args']>>
  extends Story<T, TInput> {
  /**
   * React component that can be rendered directly.
   * Automatically composed with story configuration and args.
   */
  Component: ComponentType<Partial<T['args']>>;
}

const meta = preview.meta({
  component: Button,
  args: { size: "medium" },
});

const primaryStory = meta.story({
  args: { primary: true },
});

// Use the Component property to render the story
function MyTest() {
  return (
    <div>
      <primaryStory.Component label="Test Button" />
    </div>
  );
}

/**
 * Type helper that extracts and merges args from decorator functions.
 * Ensures proper type inference when multiple decorators provide args.
 */
type DecoratorsArgs<TRenderer extends Renderer, Decorators> = UnionToIntersection<
  Decorators extends DecoratorFunction<TRenderer, infer TArgs> ? TArgs : unknown
>;

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

const withTheme: Decorator<{ theme?: string }> = (Story, context) => {
  const theme = context.args.theme || context.parameters.theme || "light";
  return (
    <div className={`theme-${theme}`}>
      <Story />
    </div>
  );
};

const preview = __definePreview({
  addons: [],
  decorators: [withTheme],
  parameters: {
    theme: "light",
  },
});

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

// Define global types for your project
declare module "@storybook/react" {
  interface Parameters {
    myCustomParameter?: {
      option1: boolean;
      option2: string;
    };
  }
}

const preview: Preview = {
  parameters: {
    myCustomParameter: {
      option1: true,
      option2: "default",
    },
  },
};

const preview = __definePreview({
  addons: [],
  parameters: {
    react: {
      rsc: true, // Enable React Server Components
      rootOptions: {
        onRecoverableError: (error) => {
          console.warn("Recoverable error:", error);
        },
      },
    },
  },
});