@opencosmos/ui 1.3.1

package/src/components/forms/DragDrop.tsx

@@ -0,0 +1,440 @@
+'use client';
+
+import React, { createContext, useContext } from 'react';
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  DragEndEvent,
+  DragOverlay,
+  DragStartEvent,
+} from '@dnd-kit/core';
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+  rectSortingStrategy,
+  SortingStrategy,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { GripVertical } from 'lucide-react';
+import { cn } from '../../lib/utils';
+
+/**
+ * Item interface for drag and drop lists
+ */
+export interface DragDropItem {
+  id: string;
+  [key: string]: any;
+}
+
+/**
+ * Context for sharing drag handle listeners
+ */
+interface DragHandleContextValue {
+  attributes: any;
+  listeners: any;
+  setActivatorNodeRef?: (element: HTMLElement | null) => void;
+}
+
+const DragHandleContext = createContext<DragHandleContextValue | null>(null);
+
+/**
+ * Props for DragDropList component
+ */
+export interface DragDropListProps<T extends DragDropItem> {
+  /**
+   * Array of items to display
+   */
+  items: T[];
+  /**
+   * Callback fired when items are reordered
+   */
+  onReorder: (items: T[]) => void;
+  /**
+   * Render function for each item
+   */
+  renderItem: (item: T, isDragging: boolean) => React.ReactNode;
+  /**
+   * Enable drag handle mode (only drag from handle)
+   * @default false
+   */
+  withHandle?: boolean;
+  /**
+   * Custom class name for the list container
+   */
+  className?: string;
+  /**
+   * Custom class name for list items
+   */
+  itemClassName?: string;
+  /**
+   * Sorting strategy for the drag & drop behavior
+   * - verticalListSortingStrategy: For vertical lists (default)
+   * - rectSortingStrategy: For grid layouts
+   * @default verticalListSortingStrategy
+   */
+  strategy?: SortingStrategy;
+}
+
+/**
+ * Props for sortable item
+ */
+interface SortableItemProps {
+  id: string;
+  children: React.ReactNode;
+  withHandle?: boolean;
+  className?: string;
+}
+
+/**
+ * Internal sortable item component
+ */
+function SortableItem({ id, children, withHandle, className }: SortableItemProps) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    setActivatorNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+
+  // If using handle, don't attach listeners to the item
+  const itemProps = withHandle ? {} : { ...listeners, ...attributes };
+
+  const content = withHandle ? (
+    <DragHandleContext.Provider value={{ attributes, listeners, setActivatorNodeRef }}>
+      {children}
+    </DragHandleContext.Provider>
+  ) : (
+    children
+  );
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={cn(
+        'relative transition-opacity',
+        isDragging && 'z-50',
+        className
+      )}
+      {...itemProps}
+    >
+      {content}
+    </div>
+  );
+}
+
+/**
+ * Drag handle component for manual drag control
+ * Must be used within a DragDropList with withHandle={true}
+ */
+export interface DragDropHandleProps {
+  /**
+   * Custom class name
+   */
+  className?: string;
+  /**
+   * Handle icon
+   */
+  icon?: React.ReactNode;
+}
+
+export function DragDropHandle({ className, icon }: DragDropHandleProps) {
+  const context = useContext(DragHandleContext);
+
+  if (!context) {
+    console.warn('DragDropHandle must be used within a DragDropList with withHandle={true}');
+    return null;
+  }
+
+  const { attributes, listeners, setActivatorNodeRef } = context;
+
+  return (
+    <div
+      ref={setActivatorNodeRef}
+      {...attributes}
+      {...listeners}
+      className={cn(
+        'flex items-center justify-center cursor-grab active:cursor-grabbing',
+        'text-[var(--color-text-secondary)] hover:text-[var(--color-foreground)]',
+        'transition-colors',
+        className
+      )}
+    >
+      {icon || <GripVertical className="w-4 h-4" />}
+    </div>
+  );
+}
+
+/**
+ * DragDropList - Sortable list component with drag and drop functionality
+ *
+ * @example
+ * ```tsx
+ * const [items, setItems] = useState([
+ *   { id: '1', name: 'Item 1' },
+ *   { id: '2', name: 'Item 2' },
+ * ]);
+ *
+ * <DragDropList
+ *   items={items}
+ *   onReorder={setItems}
+ *   renderItem={(item) => (
+ *     <div className="p-4 bg-surface rounded">{item.name}</div>
+ *   )}
+ * />
+ * ```
+ */
+export function DragDropList<T extends DragDropItem>({
+  items,
+  onReorder,
+  renderItem,
+  withHandle = false,
+  className,
+  itemClassName,
+  strategy = verticalListSortingStrategy,
+}: DragDropListProps<T>) {
+  const [activeId, setActiveId] = React.useState<string | null>(null);
+
+  // Configure sensors for touch/mouse/keyboard support
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 5, // Prevents accidental drags on mobile
+      },
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  );
+
+  const handleDragStart = (event: DragStartEvent) => {
+    setActiveId(event.active.id as string);
+  };
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+
+    if (over && active.id !== over.id) {
+      const oldIndex = items.findIndex((item) => item.id === active.id);
+      const newIndex = items.findIndex((item) => item.id === over.id);
+      onReorder(arrayMove(items, oldIndex, newIndex));
+    }
+
+    setActiveId(null);
+  };
+
+  const activeItem = items.find((item) => item.id === activeId);
+
+  return (
+    <DndContext
+      sensors={sensors}
+      collisionDetection={closestCenter}
+      onDragStart={handleDragStart}
+      onDragEnd={handleDragEnd}
+    >
+      <SortableContext items={items} strategy={strategy}>
+        <div className={cn(strategy === verticalListSortingStrategy && 'space-y-2', className)}>
+          {items.map((item) => (
+            <SortableItem
+              key={item.id}
+              id={item.id}
+              withHandle={withHandle}
+              className={itemClassName}
+            >
+              {renderItem(item, item.id === activeId)}
+            </SortableItem>
+          ))}
+        </div>
+      </SortableContext>
+
+      <DragOverlay>
+        {activeId && activeItem ? (
+          <div className="opacity-80 shadow-lg">
+            {renderItem(activeItem, true)}
+          </div>
+        ) : null}
+      </DragOverlay>
+    </DndContext>
+  );
+}
+
+/**
+ * Props for DragDropTable component
+ */
+export interface DragDropTableProps<T extends DragDropItem> {
+  /**
+   * Array of items to display
+   */
+  items: T[];
+  /**
+   * Callback fired when items are reordered
+   */
+  onReorder: (items: T[]) => void;
+  /**
+   * Table columns configuration
+   */
+  columns: {
+    key: string;
+    header: string;
+    render?: (item: T) => React.ReactNode;
+  }[];
+  /**
+   * Custom class name for the table
+   */
+  className?: string;
+}
+
+/**
+ * DragDropTable - Sortable table with draggable rows
+ *
+ * @example
+ * ```tsx
+ * <DragDropTable
+ *   items={data}
+ *   onReorder={setData}
+ *   columns={[
+ *     { key: 'name', header: 'Name' },
+ *     { key: 'email', header: 'Email' },
+ *   ]}
+ * />
+ * ```
+ */
+export function DragDropTable<T extends DragDropItem>({
+  items,
+  onReorder,
+  columns,
+  className,
+}: DragDropTableProps<T>) {
+  const [activeId, setActiveId] = React.useState<string | null>(null);
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 5,
+      },
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  );
+
+  const handleDragStart = (event: DragStartEvent) => {
+    setActiveId(event.active.id as string);
+  };
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+
+    if (over && active.id !== over.id) {
+      const oldIndex = items.findIndex((item) => item.id === active.id);
+      const newIndex = items.findIndex((item) => item.id === over.id);
+      onReorder(arrayMove(items, oldIndex, newIndex));
+    }
+
+    setActiveId(null);
+  };
+
+  return (
+    <DndContext
+      sensors={sensors}
+      collisionDetection={closestCenter}
+      onDragStart={handleDragStart}
+      onDragEnd={handleDragEnd}
+    >
+      <div className={cn('overflow-x-auto', className)}>
+        <table className="w-full border-collapse">
+          <thead>
+            <tr className="border-b border-[var(--color-border)]">
+              <th className="w-12"></th>
+              {columns.map((column) => (
+                <th
+                  key={column.key}
+                  className="text-left p-3 text-sm font-medium text-[var(--color-text-secondary)]"
+                >
+                  {column.header}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            <SortableContext items={items} strategy={verticalListSortingStrategy}>
+              {items.map((item) => (
+                <TableRow
+                  key={item.id}
+                  item={item}
+                  columns={columns}
+                  isDragging={item.id === activeId}
+                />
+              ))}
+            </SortableContext>
+          </tbody>
+        </table>
+      </div>
+    </DndContext>
+  );
+}
+
+interface TableRowProps<T extends DragDropItem> {
+  item: T;
+  columns: { key: string; header: string; render?: (item: T) => React.ReactNode }[];
+  isDragging: boolean;
+}
+
+function TableRow<T extends DragDropItem>({ item, columns, isDragging }: TableRowProps<T>) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+  } = useSortable({ id: item.id });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+
+  return (
+    <tr
+      ref={setNodeRef}
+      style={style}
+      className={cn(
+        'border-b border-[var(--color-border)] hover:bg-[var(--color-hover)]',
+        'transition-colors',
+        isDragging && 'bg-[var(--color-active)]'
+      )}
+    >
+      <td className="p-3">
+        <div
+          {...attributes}
+          {...listeners}
+          className="cursor-grab active:cursor-grabbing text-[var(--color-text-secondary)] hover:text-[var(--color-foreground)] transition-colors"
+        >
+          <GripVertical className="w-4 h-4" />
+        </div>
+      </td>
+      {columns.map((column) => (
+        <td key={column.key} className="p-3 text-sm">
+          {column.render ? column.render(item) : (item as any)[column.key]}
+        </td>
+      ))}
+    </tr>
+  );
+}

package/src/components/forms/FileUpload.tsx

@@ -0,0 +1,252 @@
+'use client'
+
+import * as React from "react"
+import { useDropzone, type Accept, type FileRejection } from "react-dropzone"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../../lib/utils"
+
+const fileUploadZoneVariants = cva(
+  "relative flex flex-col items-center justify-center rounded-lg border-2 border-dashed transition-colors cursor-pointer",
+  {
+    variants: {
+      state: {
+        idle: "border-border bg-muted/30 hover:border-primary/50 hover:bg-muted/50",
+        active: "border-primary bg-primary/5",
+        reject: "border-destructive bg-destructive/5",
+        disabled: "border-border/50 bg-muted/20 cursor-not-allowed opacity-60",
+      },
+      size: {
+        sm: "px-4 py-6 gap-1",
+        default: "px-6 py-10 gap-2",
+        lg: "px-8 py-14 gap-3",
+      },
+    },
+    defaultVariants: {
+      state: "idle",
+      size: "default",
+    },
+  }
+)
+
+export interface FileUploadProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onDrop'> {
+  /** Accepted file types (MIME types) */
+  accept?: Accept
+  /** Max file size in bytes */
+  maxSize?: number
+  /** Max number of files */
+  maxFiles?: number
+  /** Allow multiple file selection */
+  multiple?: boolean
+  /** Disabled state */
+  disabled?: boolean
+  /** Called when valid files are dropped/selected */
+  onFilesSelected?: (files: File[]) => void
+  /** Called when files are rejected */
+  onFilesRejected?: (rejections: FileRejection[]) => void
+  /** Label text */
+  label?: string
+  /** Description text shown in the drop zone */
+  description?: string
+  /** Size variant */
+  size?: "sm" | "default" | "lg"
+}
+
+const UploadIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    aria-hidden="true"
+    className="text-foreground-secondary"
+  >
+    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+    <polyline points="17 8 12 3 7 8" />
+    <line x1="12" y1="3" x2="12" y2="15" />
+  </svg>
+)
+
+const FileIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    aria-hidden="true"
+  >
+    <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" />
+    <path d="M14 2v4a2 2 0 0 0 2 2h4" />
+  </svg>
+)
+
+const XIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="14"
+    height="14"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    aria-hidden="true"
+  >
+    <line x1="18" y1="6" x2="6" y2="18" />
+    <line x1="6" y1="6" x2="18" y2="18" />
+  </svg>
+)
+
+function formatFileSize(bytes: number): string {
+  if (bytes === 0) return "0 B"
+  const k = 1024
+  const sizes = ["B", "KB", "MB", "GB"]
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`
+}
+
+function FileUpload({
+  className,
+  accept,
+  maxSize,
+  maxFiles = 0,
+  multiple = false,
+  disabled = false,
+  onFilesSelected,
+  onFilesRejected,
+  label,
+  description,
+  size = "default",
+  ...props
+}: FileUploadProps) {
+  const [files, setFiles] = React.useState<File[]>([])
+  const [errors, setErrors] = React.useState<string[]>([])
+
+  const onDrop = React.useCallback(
+    (acceptedFiles: File[], rejectedFiles: FileRejection[]) => {
+      if (acceptedFiles.length > 0) {
+        const newFiles = multiple ? [...files, ...acceptedFiles] : acceptedFiles
+        setFiles(newFiles)
+        onFilesSelected?.(newFiles)
+      }
+      if (rejectedFiles.length > 0) {
+        const errorMessages = rejectedFiles.flatMap((rejection) =>
+          rejection.errors.map((err) => `${rejection.file.name}: ${err.message}`)
+        )
+        setErrors(errorMessages)
+        onFilesRejected?.(rejectedFiles)
+      } else {
+        setErrors([])
+      }
+    },
+    [files, multiple, onFilesSelected, onFilesRejected]
+  )
+
+  const { getRootProps, getInputProps, isDragActive, isDragReject } = useDropzone({
+    onDrop,
+    accept,
+    maxSize,
+    maxFiles: maxFiles > 0 ? maxFiles : undefined,
+    multiple,
+    disabled,
+  })
+
+  const removeFile = (index: number) => {
+    const newFiles = files.filter((_, i) => i !== index)
+    setFiles(newFiles)
+    onFilesSelected?.(newFiles)
+  }
+
+  const state = disabled
+    ? "disabled"
+    : isDragReject
+      ? "reject"
+      : isDragActive
+        ? "active"
+        : "idle"
+
+  return (
+    <div data-slot="file-upload" className={cn("space-y-3", className)} {...props}>
+      {label && (
+        <p className="text-sm font-medium text-foreground">{label}</p>
+      )}
+
+      <div
+        {...getRootProps()}
+        className={cn(fileUploadZoneVariants({ state, size }))}
+        role="button"
+        aria-label={label ?? "Upload files"}
+      >
+        <input {...getInputProps()} />
+        <UploadIcon />
+        <p className="text-sm font-medium text-foreground">
+          {isDragActive
+            ? "Drop files here"
+            : "Drag & drop files here, or click to browse"}
+        </p>
+        {description && (
+          <p className="text-xs text-foreground-secondary">{description}</p>
+        )}
+        {maxSize && (
+          <p className="text-xs text-foreground-secondary">
+            Max size: {formatFileSize(maxSize)}
+          </p>
+        )}
+      </div>
+
+      {/* Error messages */}
+      {errors.length > 0 && (
+        <div className="space-y-1" role="alert">
+          {errors.map((error, i) => (
+            <p key={i} className="text-sm text-destructive">{error}</p>
+          ))}
+        </div>
+      )}
+
+      {/* File list */}
+      {files.length > 0 && (
+        <ul data-slot="file-upload-list" className="space-y-2">
+          {files.map((file, index) => (
+            <li
+              key={`${file.name}-${index}`}
+              className="flex items-center gap-3 rounded-lg border border-border bg-surface p-3"
+            >
+              <FileIcon />
+              <div className="flex-1 min-w-0">
+                <p className="text-sm font-medium text-foreground truncate">
+                  {file.name}
+                </p>
+                <p className="text-xs text-foreground-secondary">
+                  {formatFileSize(file.size)}
+                </p>
+              </div>
+              <button
+                type="button"
+                onClick={(e) => {
+                  e.stopPropagation()
+                  removeFile(index)
+                }}
+                className="shrink-0 rounded-xs p-1 text-foreground-secondary hover:text-foreground hover:bg-muted transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                aria-label={`Remove ${file.name}`}
+              >
+                <XIcon />
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}
+
+export { FileUpload, fileUploadZoneVariants }