wip 7

frontend/src/components/README.md

@@ -0,0 +1,208 @@
+# UI Components
+
+This directory contains reusable UI components for the AnthoLume application.
+
+## Toast Notifications
+
+### Usage
+
+The toast system provides info, warning, and error notifications that respect the current theme and dark/light mode.
+
+```tsx
+import { useToasts } from './components/ToastContext';
+
+function MyComponent() {
+  const { showInfo, showWarning, showError, showToast } = useToasts();
+
+  const handleAction = async () => {
+    try {
+      // Do something
+      showInfo('Operation completed successfully!');
+    } catch (error) {
+      showError('An error occurred while processing your request.');
+    }
+  };
+
+  return <button onClick={handleAction}>Click me</button>;
+}
+```
+
+### API
+
+- `showToast(message: string, type?: 'info' | 'warning' | 'error', duration?: number): string`
+  - Shows a toast notification
+  - Returns the toast ID for manual removal
+  - Default type: 'info'
+  - Default duration: 5000ms (0 = no auto-dismiss)
+
+- `showInfo(message: string, duration?: number): string`
+  - Shortcut for showing an info toast
+
+- `showWarning(message: string, duration?: number): string`
+  - Shortcut for showing a warning toast
+
+- `showError(message: string, duration?: number): string`
+  - Shortcut for showing an error toast
+
+- `removeToast(id: string): void`
+  - Manually remove a toast by ID
+
+- `clearToasts(): void`
+  - Clear all active toasts
+
+### Examples
+
+```tsx
+// Info toast (auto-dismisses after 5 seconds)
+showInfo('Document saved successfully!');
+
+// Warning toast (auto-dismisses after 10 seconds)
+showWarning('Low disk space warning', 10000);
+
+// Error toast (no auto-dismiss)
+showError('Failed to load data', 0);
+
+// Generic toast
+showToast('Custom message', 'warning', 3000);
+```
+
+## Skeleton Loading
+
+### Usage
+
+Skeleton components provide placeholder content while data is loading. They automatically adapt to dark/light mode.
+
+### Components
+
+#### `Skeleton`
+
+Basic skeleton element with various variants:
+
+```tsx
+import { Skeleton } from './components/Skeleton';
+
+// Default (rounded rectangle)
+<Skeleton className="w-full h-8" />
+
+// Text variant
+<Skeleton variant="text" className="w-3/4" />
+
+// Circular variant (for avatars)
+<Skeleton variant="circular" width={40} height={40} />
+
+// Rectangular variant
+<Skeleton variant="rectangular" width="100%" height={200} />
+```
+
+#### `SkeletonText`
+
+Multiple lines of text skeleton:
+
+```tsx
+<SkeletonText lines={3} />
+<SkeletonText lines={5} className="max-w-md" />
+```
+
+#### `SkeletonAvatar`
+
+Avatar placeholder:
+
+```tsx
+<SkeletonAvatar size="md" />
+<SkeletonAvatar size={56} />
+```
+
+#### `SkeletonCard`
+
+Card placeholder with optional elements:
+
+```tsx
+// Default card
+<SkeletonCard />
+
+// With avatar
+<SkeletonCard showAvatar />
+
+// Custom configuration
+<SkeletonCard 
+  showAvatar 
+  showTitle 
+  showText 
+  textLines={4}
+  className="max-w-sm"
+/>
+```
+
+#### `SkeletonTable`
+
+Table placeholder:
+
+```tsx
+<SkeletonTable rows={5} columns={4} />
+<SkeletonTable rows={10} columns={6} showHeader={false} />
+```
+
+#### `SkeletonButton`
+
+Button placeholder:
+
+```tsx
+<SkeletonButton width={120} />
+<SkeletonButton className="w-full" />
+```
+
+#### `PageLoader`
+
+Full-page loading indicator:
+
+```tsx
+<PageLoader message="Loading your documents..." />
+```
+
+#### `InlineLoader`
+
+Small inline loading spinner:
+
+```tsx
+<InlineLoader size="sm" />
+<InlineLoader size="md" />
+<InlineLoader size="lg" />
+```
+
+## Integration with Table Component
+
+The Table component now supports skeleton loading:
+
+```tsx
+import { Table, SkeletonTable } from './components/Table';
+
+function DocumentList() {
+  const { data, isLoading } = useGetDocuments();
+
+  if (isLoading) {
+    return <SkeletonTable rows={10} columns={5} />;
+  }
+
+  return (
+    <Table
+      columns={columns}
+      data={data?.documents || []}
+    />
+  );
+}
+```
+
+## Theme Support
+
+All components automatically adapt to the current theme:
+
+- **Light mode**: Uses gray tones for skeletons, appropriate colors for toasts
+- **Dark mode**: Uses darker gray tones for skeletons, adjusted colors for toasts
+
+The theme is controlled via Tailwind's `dark:` classes, which respond to the system preference or manual theme toggles.
+
+## Dependencies
+
+- `clsx` - Utility for constructing className strings
+- `tailwind-merge` - Merges Tailwind CSS classes intelligently
+- `lucide-react` - Icon library used by Toast component