UI Components

/**
 * Modal/dialog component for overlays and focused interactions
 */
interface ModalProps extends Omit<React.ComponentProps<typeof Dialog.Root>, 'children'> {
  /** Modal width in pixels */
  width?: number;
  /** Modal height in pixels */
  height?: number;
  /** Modal content */
  children: React.ReactNode;
  /** Called when escape key is pressed */
  onEscapeKeyDown?: (event: KeyboardEvent) => void;
  /** Called when clicking outside modal */
  onInteractOutside?: (event: PointerEvent | FocusEvent) => void;
  /** CSS class name for styling */
  className?: string;
  /** Container element for portal */
  container?: HTMLElement;
}

/**
 * Modal/dialog component for overlays and focused interactions
 * Built on top of Radix UI Dialog primitive
 */
const Modal: React.ComponentType<ModalProps>;

/**
 * Action bar container component for grouping related actions
 */
const ActionBar: React.ComponentType<{
  /** Action items to display */
  actionItems?: ActionItem[];
  /** Additional content */
  children?: React.ReactNode;
}>;

interface ActionItem {
  /** Unique identifier for the action */
  id: string;
  /** Display title for the action */
  title: string;
  /** Click handler */
  onClick: () => void;
  /** Disabled state */
  disabled?: boolean;
}

/**
 * Spacing utility component for consistent margins and padding
 */
const Spaced: React.ComponentType<{
  /** Children to space */
  children: React.ReactNode;
  /** Spacing configuration */
  [key: string]: any;
}>;

/**
 * Placeholder content component for empty states
 */
const Placeholder: React.ComponentType<{
  /** Placeholder content */
  children?: React.ReactNode;
  /** Placeholder configuration */
  [key: string]: any;
}>;

/**
 * Scrollable area component with custom scrollbar styling
 */
const ScrollArea: React.ComponentType<{
  /** Scrollable content */
  children: React.ReactNode;
  /** Scroll configuration */
  [key: string]: any;
}>;

/**
 * Zoom control component for scaling content
 */
const Zoom: React.ComponentType<{
  /** Content to zoom */
  children: React.ReactNode;
  /** Zoom level and controls */
  [key: string]: any;
}>;

/**
 * Error message formatter component with consistent styling
 */
const ErrorFormatter: React.ComponentType<{
  /** Error to format and display */
  error: Error | string;
  /** Additional formatting options */
  [key: string]: any;
}>;

/**
 * Loading indicator component
 */
const Loader: React.ComponentType<{
  /** Loading state configuration */
  [key: string]: any;
}>;

/**
 * Progress spinner component with animation
 */
const ProgressSpinner: React.ComponentType<{
  /** Spinner configuration */
  [key: string]: any;
}>;

interface BadgeProps {
  /** Badge status/variant affecting color and styling */
  status?: 'positive' | 'negative' | 'neutral' | 'warning' | 'critical';
  /** Badge content */
  children?: React.ReactNode;
}

/**
 * Badge/label component for status indicators and labels
 * Supports different status variants with appropriate colors
 */
const Badge: React.ComponentType<BadgeProps>;

/**
 * Code block with copy-to-clipboard functionality
 */
const ClipboardCode: React.ComponentType<{
  /** Code content to display */
  code: string;
  /** Programming language for syntax highlighting */
  language?: string;
  /** Additional options */
  [key: string]: any;
}>;

import { Modal, Button, P } from "@storybook/components";
import { useState } from "react";

function MyComponent() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setIsOpen(true)}>
        Open Modal
      </Button>
      
      <Modal 
        open={isOpen} 
        onOpenChange={setIsOpen}
        width={400}
        height={300}
        onEscapeKeyDown={() => setIsOpen(false)}
      >
        <P>Modal content goes here</P>
        <Button onClick={() => setIsOpen(false)}>
          Close
        </Button>
      </Modal>
    </>
  );
}

import { ActionBar } from "@storybook/components";

const actions = [
  {
    id: 'save',
    title: 'Save',
    onClick: () => console.log('Save clicked'),
    disabled: false
  },
  {
    id: 'delete',
    title: 'Delete',
    onClick: () => console.log('Delete clicked'),
    disabled: true
  }
];

<ActionBar actionItems={actions} />

import { Spaced, Placeholder, ScrollArea, Zoom } from "@storybook/components";

// Spacing utility
<Spaced>
  <div>First item</div>
  <div>Second item</div>
  <div>Third item</div>
</Spaced>

// Placeholder for empty states
<Placeholder>
  No content available
</Placeholder>

// Scrollable area
<ScrollArea>
  <div style={{ height: 1000 }}>
    Long scrollable content here
  </div>
</ScrollArea>

// Zoom control
<Zoom>
  <img src="large-image.jpg" alt="Zoomable content" />
</Zoom>

import { ErrorFormatter } from "@storybook/components";

// With Error object
<ErrorFormatter error={new Error("Something went wrong")} />

// With string message
<ErrorFormatter error="Invalid input provided" />

import { Loader, ProgressSpinner } from "@storybook/components";

// Basic loader
<Loader />

// Progress spinner
<ProgressSpinner />

import { Badge } from "@storybook/components";

// Different status variants
<Badge status="positive">New</Badge>
<Badge status="warning">Beta</Badge>
<Badge status="critical">Deprecated</Badge>
<Badge status="negative">Error</Badge>
<Badge status="neutral">Info</Badge>

// Without status (default styling)
<Badge>Default</Badge>

import { ClipboardCode } from "@storybook/components";

<ClipboardCode 
  code="const example = 'Hello World';"
  language="javascript"
/>

<ClipboardCode 
  code={`
    import { Button } from "@storybook/components";
    
    <Button variant="solid">Click me</Button>
  `}
  language="tsx"
/>