React Components and Hooks

/**
 * Component wrapper for individual stories
 */
const Story: React.FC<any>;

/**
 * Component for story metadata and configuration
 */
const Meta: React.FC<any>;

/**
 * Component for adding descriptions to stories
 */
const Description: React.FC<any>;

import { Story, Meta, Description } from "@ladle/react";

// Basic story usage
export const BasicButton: Story = (args) => <Button {...args} />;

// Story with metadata
export const DocumentedButton: Story = (args) => (
  <>
    <Meta title="Button Examples" />
    <Description>This is a documented button component</Description>
    <Button {...args} />
  </>
);

/**
 * Hook to access Ladle's global state and dispatch function
 * @returns Object containing globalState and dispatch
 */
function useLadleContext(): {
  globalState: GlobalState;
  dispatch: React.Dispatch<GlobalAction>;
};

interface GlobalState {
  mode: ModeState;           // "full" | "preview"
  theme: ThemeState;         // "light" | "dark" | "auto"
  action: ActionState;       // Action panel state
  story: string;            // Current story identifier
  rtl: boolean;             // Right-to-left text direction
  source: boolean;          // Source code visibility
  control: ControlState;    // Controls panel state
  controlInitialized: boolean;
  width: number;            // Viewport width
  hotkeys: boolean;         // Hotkeys enabled state
}

type GlobalAction = 
  | { type: "UpdateAll"; payload: Partial<GlobalState> }
  | { type: "UpdateMode"; payload: ModeState }
  | { type: "UpdateTheme"; payload: ThemeState }
  // ... other action types

import { useLadleContext } from "@ladle/react";

function MyCustomStory() {
  const { globalState, dispatch } = useLadleContext();
  
  const toggleTheme = () => {
    dispatch({
      type: "UpdateTheme",
      payload: globalState.theme === "light" ? "dark" : "light"
    });
  };
  
  return (
    <div>
      <p>Current theme: {globalState.theme}</p>
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  );
}

/**
 * Function to create navigation handlers for specific stories
 * @param value - Story identifier to navigate to
 * @returns Click handler function for navigation
 */
function linkTo(value: string): () => void;

/**
 * Function to create action handlers for logging events
 * @param name - Name of the action for logging
 * @returns Event handler function that logs the action
 */
function action(name: string): (event?: any) => void;

/**
 * Hook for programmatic navigation (deprecated, use linkTo instead)
 * @returns Navigation function
 * @deprecated Use linkTo instead
 */
function useLink(): (value: string) => void;

import { linkTo, action } from "@ladle/react";

function NavigationExample() {
  const goToButton = linkTo("components-button--primary");
  const logClick = action("button-clicked");
  
  return (
    <div>
      <button onClick={goToButton}>
        Go to Button Story
      </button>
      <button onClick={logClick}>
        Log Action
      </button>
    </div>
  );
}

import { ui } from "@ladle/react";

/**
 * Styled button component
 */
const ui.Button: React.FC<{
  children: React.ReactNode;
  onClick: React.MouseEventHandler<HTMLButtonElement>;
  style?: React.CSSProperties;
  "aria-label"?: string;
}>;

/**
 * Styled link component
 */
const ui.Link: React.FC<{
  href: string;
  children: React.ReactNode;
  style?: React.CSSProperties;
}>;

/**
 * Styled code display component
 */
const ui.Code: React.FC<{
  children: React.ReactNode;
}>;

/**
 * Modal dialog component with overlay
 */
const ui.Modal: React.FC<{
  children: React.ReactNode;
  close: () => void;
  isOpen: boolean;
  label?: string;
  maxWidth?: string;
}>;

import { ui } from "@ladle/react";

function UIComponentsExample() {
  const [isModalOpen, setIsModalOpen] = useState(false);
  
  return (
    <div>
      <ui.Button onClick={() => setIsModalOpen(true)}>
        Open Modal
      </ui.Button>
      
      <ui.Link href="https://example.com">
        External Link
      </ui.Link>
      
      <ui.Code>
        const code = "example";
      </ui.Code>
      
      <ui.Modal
        isOpen={isModalOpen}
        close={() => setIsModalOpen(false)}
        label="Example Modal"
        maxWidth="500px"
      >
        <p>Modal content goes here</p>
      </ui.Modal>
    </div>
  );
}

import { dialog } from "@ladle/react";

/**
 * Dialog overlay component for modal backgrounds
 */
const dialog.DialogOverlay: React.FC;

/**
 * Dialog content container component
 */
const dialog.DialogContent: React.FC;

import { dialog } from "@ladle/react";

function CustomDialog({ isOpen, onClose, children }) {
  if (!isOpen) return null;
  
  return (
    <dialog.DialogOverlay>
      <dialog.DialogContent>
        <button onClick={onClose}>Close</button>
        {children}
      </dialog.DialogContent>
    </dialog.DialogOverlay>
  );
}

import { icons } from "@ladle/react";

// Basic icons
const icons.Close: React.FC;        // Close/X icon
const icons.Ladle: React.FC;        // Ladle logo
const icons.Rtl: React.FC;          // RTL direction icon
const icons.Preview: React.FC;      // Preview mode icon
const icons.Bulb: React.FC;         // Theme switching icon
const icons.Page: React.FC;         // Page/document icon
const icons.Right: React.FC;        // Right arrow icon
const icons.Controls: React.FC;     // Controls panel icon
const icons.Source: React.FC;       // Source code icon
const icons.A11y: React.FC;         // Accessibility icon
const icons.Width: React.FC;        // Width adjustment icon
const icons.Action: React.FC;       // Action logging icon

// Icons with props
const icons.Down: React.FC<{
  rotate?: boolean;  // Rotate the arrow icon
}>;

// Special icons with side effects
const icons.Ring: React.FC;         // Loading ring with animations

import { icons } from "@ladle/react";

function CustomToolbar() {
  const [expanded, setExpanded] = useState(false);
  
  return (
    <div>
      <button onClick={() => setExpanded(!expanded)}>
        <icons.Down rotate={expanded} />
        Menu
      </button>
      
      {expanded && (
        <div>
          <icons.Controls /> Controls
          <icons.Source /> Source
          <icons.A11y /> Accessibility
        </div>
      )}
    </div>
  );
}

import { msw } from "@ladle/react";

/**
 * Complete MSW library re-export for API mocking
 * Includes all MSW functionality for browser mocking
 */
const msw: typeof import("msw");

import { msw } from "@ladle/react";
import type { Story } from "@ladle/react";

const MyComponent: Story = () => <ComponentThatMakesAPICall />;

// Add MSW handlers to story
MyComponent.msw = [
  msw.http.get("/api/users", ({ request, params, cookies }) => {
    return HttpResponse.json([
      { id: 1, name: "John Doe" },
      { id: 2, name: "Jane Smith" }
    ]);
  })
];

/**
 * Hook for MDX component mapping from @mdx-js/react
 */
const useMDXComponents: typeof import("@mdx-js/react").useMDXComponents;

import { useMDXComponents } from "@ladle/react";

function MDXStory() {
  const components = useMDXComponents({
    h1: (props) => <h1 style={{ color: "blue" }} {...props} />,
    code: (props) => <code style={{ background: "#f0f0f0" }} {...props} />
  });
  
  // Use components in MDX context
  return <div>MDX content with custom components</div>;
}