Components Documentation

Complete guide to all React components.

UI Components

Modal

A fully accessible modal dialog component.

Features:

• Focus trapping
• Escape key to close
• Overlay click to close
• Multiple sizes
• Portal rendering

Usage:

import Modal from '@/components/Modal';

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

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Open Modal</button>
      <Modal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        title="Modal Title"
        size="md"
      >
        <p>Modal content goes here</p>
      </Modal>
    </>
  );
}

Props:

| Prop | Type | Default | Description | |------|------|---------|-------------| | isOpen | boolean | - | Whether modal is open | | onClose | () => void | - | Close handler | | title | string | - | Modal title | | children | ReactNode | - | Modal content | | size | 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full' | 'md' | Modal size | | closeOnOverlayClick | boolean | true | Close on overlay click | | closeOnEscape | boolean | true | Close on Escape key | | showCloseButton | boolean | true | Show close button |

Tooltip

Contextual tooltip component with smart positioning.

Features:

• Auto-positioning within viewport
• Hover and focus triggers
• Configurable delay
• Multiple positions

Usage:

import Tooltip from '@/components/Tooltip';

<Tooltip content="This is a tooltip" position="top" delay={200}>
  <button>Hover me</button>
</Tooltip>

Props:

| Prop | Type | Default | Description | |------|------|---------|-------------| | content | string \| ReactNode | - | Tooltip content | | children | ReactNode | - | Trigger element | | position | 'top' \| 'bottom' \| 'left' \| 'right' | 'top' | Tooltip position | | delay | number | 200 | Delay in milliseconds | | disabled | boolean | false | Disable tooltip |

Dropdown

Accessible dropdown menu component.

Features:

• Keyboard navigation
• Focus trapping
• Multiple positions
• Icon support
• Dividers

Usage:

import Dropdown from '@/components/Dropdown';

<Dropdown
  trigger={<button>Menu</button>}
  items={[
    { id: '1', label: 'Edit', onClick: () => {} },
    { id: '2', label: 'Delete', onClick: () => {} },
    { id: 'divider', divider: true },
    { id: '3', label: 'Settings', onClick: () => {} },
  ]}
  position="bottom-left"
/>

Props:

| Prop | Type | Default | Description | |------|------|---------|-------------| | trigger | ReactNode | - | Dropdown trigger | | items | DropdownItem[] | - | Menu items | | position | 'bottom-left' \| 'bottom-right' \| 'top-left' \| 'top-right' | 'bottom-left' | Dropdown position |

Accordion

Collapsible accordion component.

Features:

• Single or multiple open items
• Smooth animations
• Accessible (ARIA)
• Default open items

Usage:

import Accordion from '@/components/UI/Accordion';

<Accordion
  items={[
    {
      id: '1',
      title: 'Section 1',
      content: <p>Content 1</p>,
      defaultOpen: true,
    },
    {
      id: '2',
      title: 'Section 2',
      content: <p>Content 2</p>,
    },
  ]}
  allowMultiple={false}
/>

Props:

| Prop | Type | Default | Description | |------|------|---------|-------------| | items | AccordionItem[] | - | Accordion items | | allowMultiple | boolean | false | Allow multiple open items | | className | string | '' | Additional CSS classes |

Tabs

Tabbed interface component.

Features:

• Keyboard navigation
• Accessible (ARIA)
• Disabled tabs
• Change callbacks

Usage:

import Tabs from '@/components/UI/Tabs';

<Tabs
  tabs={[
    { id: '1', label: 'Tab 1', content: <p>Content 1</p> },
    { id: '2', label: 'Tab 2', content: <p>Content 2</p>, disabled: true },
    { id: '3', label: 'Tab 3', content: <p>Content 3</p> },
  ]}
  defaultTab="1"
  onChange={(tabId) => console.log('Tab changed:', tabId)}
/>

Props:

| Prop | Type | Default | Description | |------|------|---------|-------------| | tabs | Tab[] | - | Tab items | | defaultTab | string | - | Default active tab | | onChange | (tabId: string) => void | - | Tab change handler | | className | string | '' | Additional CSS classes |

FileUpload

Drag-and-drop file upload component.

Features:

• Drag and drop
• File validation
• Upload progress
• Size and type restrictions

Usage:

import FileUpload from '@/components/FileUpload';

<FileUpload
  accept="image/*"
  maxSize={10 * 1024 * 1024}
  multiple={false}
  onUpload={async (files) => {
    // Handle upload
    for (const file of files) {
      await uploadFile(file);
    }
  }}
  onError={(error) => {
    console.error(error);
  }}
/>

Props:

| Prop | Type | Default | Description | |------|------|---------|-------------| | accept | string | - | Accepted file types | | maxSize | number | 10485760 | Max file size in bytes | | multiple | boolean | false | Allow multiple files | | onUpload | (files: File[]) => Promise<void> \| void | - | Upload handler | | onError | (error: string) => void | - | Error handler | | className | string | '' | Additional CSS classes |

MultiStepForm

Multi-step wizard form component.

Features:

• Progress indicator
• Step validation
• Navigation between steps
• Custom step components

Usage:

import MultiStepForm from '@/components/MultiStepForm';

<MultiStepForm
  steps={[
    {
      id: '1',
      title: 'Personal Info',
      component: <PersonalInfoForm />,
      validation: () => {
        // Validate step
        return true;
      },
    },
    {
      id: '2',
      title: 'Contact Info',
      component: <ContactInfoForm />,
    },
  ]}
  initialValues={{}}
  onSubmit={async (values) => {
    // Handle final submission
  }}
/>

Props:

| Prop | Type | Default | Description | |------|------|---------|-------------| | steps | Step[] | - | Form steps | | initialValues | T | - | Initial form values | | onSubmit | (values: T) => Promise<void> \| void | - | Submit handler | | onStepChange | (stepIndex: number) => void | - | Step change handler |

Loading Components

LoadingState

Various loading state indicators.

Usage:

import { LoadingState } from '@/components/LoadingStates';

<LoadingState type="spinner" size="md" message="Loading..." />
<LoadingState type="dots" />
<LoadingState type="bars" />
<LoadingState type="pulse" />
<LoadingState type="skeleton" fullScreen />

Types:

• spinner: Spinning circle
• dots: Animated dots
• bars: Animated bars
• pulse: Pulsing circle
• skeleton: Skeleton loader

SkeletonCard

Skeleton card component.

import { SkeletonCard } from '@/components/LoadingStates';

<SkeletonCard />

SkeletonList

Skeleton list component.

import { SkeletonList } from '@/components/LoadingStates';

<SkeletonList count={5} />

SkeletonGrid

Skeleton grid component.

import { SkeletonGrid } from '@/components/LoadingStates';

<SkeletonGrid count={6} />

Error Components

ErrorBoundaryAdvanced

Advanced error boundary with recovery.

Usage:

import { ErrorBoundaryAdvanced } from '@/components/ErrorBoundaryAdvanced';

<ErrorBoundaryAdvanced
  fallback={<CustomErrorUI />}
  onError={(error, errorInfo) => {
    // Log error
  }}
  resetKeys={[userId]}
>
  <App />
</ErrorBoundaryAdvanced>

Props:

| Prop | Type | Default | Description | |------|------|---------|-------------| | children | ReactNode | - | Children to wrap | | fallback | ReactNode | - | Custom error UI | | onError | (error: Error, errorInfo: ErrorInfo) => void | - | Error handler | | resetKeys | Array<string \| number> | - | Keys to reset on change | | resetOnPropsChange | boolean | false | Reset on props change |

ErrorRecovery

Error recovery component.

import ErrorRecovery from '@/components/ErrorRecovery';

<ErrorRecovery
  error={error}
  onRecover={() => {
    // Handle recovery
  }}
/>

Other Components

LanguageSelector

Language selection dropdown.

import LanguageSelector from '@/components/LanguageSelector';

<LanguageSelector />

NotificationContainer

Notification display container (automatically added to layout).

DevTools

Developer tools panel (Ctrl+Shift+D to toggle).

import DevTools from '@/components/DevTools';

<DevTools />