@etus/ui 0.1.0

package/src/components/advanced/DragAndDrop/DragAndDrop.tsx

@@ -0,0 +1,495 @@
+import type {
+  DndContextProps,
+  DraggableProps,
+  DragHandleProps,
+  DragOverlayProps,
+  DroppableProps,
+  SortableContextProps,
+  SortableItemProps,
+} from "./DragAndDrop.types"
+import type { DraggableAttributes, DraggableSyntheticListeners } from "@dnd-kit/core"
+
+// DragAndDrop/DragAndDrop.tsx
+import {
+  closestCenter,
+  DndContext as DndContextPrimitive,
+  DragOverlay as DragOverlayPrimitive,
+  KeyboardSensor,
+  PointerSensor,
+  useDraggable,
+  useDroppable,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core"
+import {
+  arrayMove as dndArrayMove,
+  SortableContext as SortableContextPrimitive,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable"
+import { CSS } from "@dnd-kit/utilities"
+import * as React from "react"
+
+import { cn } from "../../../lib/utils"
+// ============================================
+// CONTEXT FOR SORTABLE HANDLE
+// ============================================
+import {
+  draggableVariants,
+  dragHandleVariants,
+  dragOverlayVariants,
+  droppableVariants,
+  sortableItemVariants,
+} from "./DragAndDrop.variants"
+
+interface SortableHandleContextValue {
+  attributes: DraggableAttributes
+  isDragging: boolean
+  listeners: DraggableSyntheticListeners
+}
+
+const SortableHandleContext = React.createContext<null | SortableHandleContextValue>(null)
+
+function useSortableHandle() {
+  const context = React.use(SortableHandleContext)
+  if (!context) {
+    throw new Error("DragHandle must be used within a SortableItem")
+  }
+  return context
+}
+
+// ============================================
+// DND CONTEXT
+// ============================================
+
+/**
+ * DndContext - Provider for drag and drop functionality
+ *
+ * @example
+ * ```tsx
+ * <DndContext onDragEnd={handleDragEnd}>
+ *   <Draggable id="item-1">Drag me</Draggable>
+ *   <Droppable id="drop-zone">Drop here</Droppable>
+ * </DndContext>
+ * ```
+ */
+function DndContext({
+  children,
+  className,
+  collisionDetection = closestCenter,
+  modifiers,
+  onDragCancel,
+  onDragEnd,
+  onDragMove,
+  onDragOver,
+  onDragStart,
+  sensors: sensorsProp,
+}: DndContextProps) {
+  const defaultSensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 8,
+      },
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  )
+
+  const sensors = sensorsProp ?? defaultSensors
+
+  return (
+    <DndContextPrimitive
+      collisionDetection={collisionDetection}
+      modifiers={modifiers}
+      sensors={sensors}
+      onDragCancel={onDragCancel}
+      onDragEnd={onDragEnd}
+      onDragMove={onDragMove}
+      onDragOver={onDragOver}
+      onDragStart={onDragStart}
+    >
+      <div className={className} data-slot="dnd-context">
+        {children}
+      </div>
+    </DndContextPrimitive>
+  )
+}
+
+// ============================================
+// DRAGGABLE
+// ============================================
+
+/**
+ * Draggable - Makes an element draggable
+ *
+ * @example
+ * ```tsx
+ * <Draggable id="item-1">
+ *   <div className="p-4 border rounded">Drag me</div>
+ * </Draggable>
+ * ```
+ */
+function Draggable({
+  children,
+  className,
+  data,
+  disabled = false,
+  id,
+}: DraggableProps) {
+  const {
+    attributes,
+    isDragging,
+    listeners,
+    setNodeRef,
+    transform,
+  } = useDraggable({
+    id,
+    data,
+    disabled,
+  })
+
+  const style: React.CSSProperties = {
+    transform: transform
+      ? `translate3d(${String(transform.x)}px, ${String(transform.y)}px, 0)`
+      : undefined,
+  }
+
+  const renderProps = {
+    attributes: attributes as unknown as Record<string, unknown>,
+    isDragging,
+    listeners: listeners as unknown as Record<string, unknown> | undefined,
+    setNodeRef,
+    transform,
+  }
+
+  // Render-prop API intentionally exposes setNodeRef for custom roots.
+  // eslint-disable-next-line react-hooks/refs
+  const content = typeof children === "function" ? children(renderProps) : children
+
+  return (
+    <div
+      ref={setNodeRef}
+      className={cn(draggableVariants({ isDragging, disabled }), className)}
+      data-slot="draggable"
+      style={style}
+      {...attributes}
+      {...listeners}
+    >
+      {content}
+    </div>
+  )
+}
+
+// ============================================
+// DROPPABLE
+// ============================================
+
+/**
+ * Droppable - Defines a drop zone
+ *
+ * @example
+ * ```tsx
+ * <Droppable id="drop-zone">
+ *   <div className="p-4 border rounded">Drop items here</div>
+ * </Droppable>
+ * ```
+ */
+function Droppable({
+  children,
+  className,
+  data,
+  disabled = false,
+  id,
+}: DroppableProps) {
+  const { isOver, setNodeRef } = useDroppable({
+    id,
+    data,
+    disabled,
+  })
+
+  const renderProps = {
+    isOver,
+    setNodeRef,
+  }
+
+  // Render-prop API intentionally exposes setNodeRef for custom roots.
+  // eslint-disable-next-line react-hooks/refs
+  const content = typeof children === "function" ? children(renderProps) : children
+
+  return (
+    <div
+      ref={setNodeRef}
+      className={cn(droppableVariants({ isOver, disabled }), className)}
+      data-slot="droppable"
+    >
+      {content}
+    </div>
+  )
+}
+
+// ============================================
+// DRAG OVERLAY
+// ============================================
+
+/**
+ * DragOverlay - Overlay shown during drag
+ *
+ * @example
+ * ```tsx
+ * <DndContext>
+ *   {items.map(item => <Draggable key={item.id} id={item.id} />)}
+ *   <DragOverlay>
+ *     {activeId ? <div>Dragging: {activeId}</div> : null}
+ *   </DragOverlay>
+ * </DndContext>
+ * ```
+ */
+function DragOverlay({
+  children,
+  className,
+  dropAnimation = {
+    duration: 200,
+    easing: "ease-out",
+  },
+  modifiers,
+  zIndex = 999,
+}: DragOverlayProps) {
+  return (
+    <DragOverlayPrimitive
+      dropAnimation={dropAnimation}
+      modifiers={modifiers}
+      zIndex={zIndex}
+    >
+      {children ? (
+        <div
+          className={cn(dragOverlayVariants(), className)}
+          data-slot="drag-overlay"
+        >
+          {children}
+        </div>
+      ) : null}
+    </DragOverlayPrimitive>
+  )
+}
+
+// ============================================
+// SORTABLE CONTEXT
+// ============================================
+
+/**
+ * SortableContext - Context for sortable lists
+ *
+ * @example
+ * ```tsx
+ * <SortableContext items={items}>
+ *   {items.map(item => (
+ *     <SortableItem key={item.id} id={item.id}>
+ *       {item.name}
+ *     </SortableItem>
+ *   ))}
+ * </SortableContext>
+ * ```
+ */
+function SortableContext({
+  children,
+  disabled = false,
+  items,
+  strategy = verticalListSortingStrategy,
+}: SortableContextProps) {
+  return (
+    <SortableContextPrimitive
+      disabled={disabled}
+      items={items}
+      strategy={strategy}
+    >
+      <div data-slot="sortable-context">{children}</div>
+    </SortableContextPrimitive>
+  )
+}
+
+// ============================================
+// SORTABLE ITEM
+// ============================================
+
+/**
+ * SortableItem - Sortable item within a SortableContext
+ *
+ * @example
+ * ```tsx
+ * <SortableItem id={item.id}>
+ *   <div className="p-4 border rounded">{item.name}</div>
+ * </SortableItem>
+ * ```
+ */
+function SortableItem({
+  children,
+  className,
+  data,
+  disabled = false,
+  id,
+}: SortableItemProps) {
+  const {
+    attributes,
+    isDragging,
+    isSorting,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+  } = useSortable({
+    id,
+    data,
+    disabled,
+  })
+
+  const style: React.CSSProperties = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  }
+
+  const renderProps = {
+    attributes: attributes as unknown as Record<string, unknown>,
+    isDragging,
+    isSorting,
+    listeners: listeners as unknown as Record<string, unknown> | undefined,
+    setNodeRef,
+    style,
+    transition,
+  }
+
+  const handleContextValue: SortableHandleContextValue = {
+    attributes,
+    isDragging,
+    listeners,
+  }
+
+  // Render-prop API intentionally exposes setNodeRef for custom roots.
+  // eslint-disable-next-line react-hooks/refs
+  const content = typeof children === "function" ? children(renderProps) : children
+
+  return (
+    <SortableHandleContext value={handleContextValue}>
+      <div
+        ref={setNodeRef}
+        className={cn(
+          sortableItemVariants({ isDragging, isSorting, disabled }),
+          className
+        )}
+        data-slot="sortable-item"
+        style={style}
+        {...attributes}
+        {...listeners}
+      >
+        {content}
+      </div>
+    </SortableHandleContext>
+  )
+}
+
+// ============================================
+// DRAG HANDLE
+// ============================================
+
+/**
+ * DragHandle - Handle for initiating drag within a SortableItem
+ *
+ * @example
+ * ```tsx
+ * <SortableItem id={item.id}>
+ *   <div className="flex items-center gap-2">
+ *     <DragHandle>
+ *       <GripVerticalIcon className="h-4 w-4" />
+ *     </DragHandle>
+ *     <span>{item.name}</span>
+ *   </div>
+ * </SortableItem>
+ * ```
+ */
+function DragHandle({
+  children,
+  className,
+  disabled = false,
+  ...props
+}: DragHandleProps) {
+  const { attributes, isDragging, listeners } = useSortableHandle()
+
+  return (
+    <button
+      className={cn(dragHandleVariants({ isDragging, disabled }), className)}
+      data-slot="drag-handle"
+      disabled={disabled}
+      type="button"
+      {...attributes}
+      {...listeners}
+      {...props}
+    >
+      {children}
+    </button>
+  )
+}
+
+// ============================================
+// UTILITY: ARRAY MOVE
+// ============================================
+
+/**
+ * arrayMove - Utility to reorder array items
+ *
+ * @example
+ * ```tsx
+ * const newItems = arrayMove(items, oldIndex, newIndex)
+ * ```
+ */
+function arrayMove<T>(array: T[], from: number, to: number): T[] {
+  return dndArrayMove(array, from, to)
+}
+
+// ============================================
+// EXPORTS
+// ============================================
+
+export {
+  arrayMove,
+  DndContext,
+  type DndContextProps,
+  Draggable,
+  type DraggableProps,
+  DragHandle,
+  type DragHandleProps,
+  DragOverlay,
+  type DragOverlayProps,
+  Droppable,
+  type DroppableProps,
+  SortableContext,
+  type SortableContextProps,
+  SortableItem,
+  type SortableItemProps,
+}
+
+// Re-export useful types
+export type {
+  DragCancelEvent,
+  DragEndEvent,
+  DragMoveEvent,
+  DragOverEvent,
+  DragStartEvent,
+  UniqueIdentifier,
+} from "./DragAndDrop.types"
+
+// Re-export sorting strategies
+export {
+  horizontalListSortingStrategy,
+  rectSortingStrategy,
+  rectSwappingStrategy,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable"
+
+// Re-export collision detection
+export {
+  closestCenter,
+  closestCorners,
+  pointerWithin,
+  rectIntersection,
+} from "@dnd-kit/core"

package/src/components/advanced/DragAndDrop/DragAndDrop.types.ts

@@ -0,0 +1,237 @@
+// DragAndDrop/DragAndDrop.types.ts
+import type {
+  CollisionDetection,
+  DragCancelEvent,
+  DragEndEvent,
+  DragMoveEvent,
+  DragOverEvent,
+  DragStartEvent,
+  Modifiers,
+  SensorDescriptor,
+  UniqueIdentifier,
+} from "@dnd-kit/core"
+import type { SortingStrategy } from "@dnd-kit/sortable"
+import type { ComponentProps, ReactNode } from "react"
+
+// ============================================
+// DND CONTEXT TYPES
+// ============================================
+
+/**
+ * Props for the DndContext component
+ */
+export interface DndContextProps {
+  /** Content to wrap with drag and drop context */
+  children: ReactNode
+  /** Additional CSS classes */
+  className?: string
+  /** Collision detection algorithm */
+  collisionDetection?: CollisionDetection
+  /** Modifiers for drag movement */
+  modifiers?: Modifiers
+  /** Callback when drag is cancelled */
+  onDragCancel?: (event: DragCancelEvent) => void
+  /** Callback when drag ends */
+  onDragEnd?: (event: DragEndEvent) => void
+  /** Callback during drag movement */
+  onDragMove?: (event: DragMoveEvent) => void
+  /** Callback when dragging over a droppable */
+  onDragOver?: (event: DragOverEvent) => void
+  /** Callback when drag starts */
+  onDragStart?: (event: DragStartEvent) => void
+  /** Custom sensors for input handling */
+  sensors?: SensorDescriptor<Record<string, unknown>>[]
+}
+
+// ============================================
+// DRAGGABLE TYPES
+// ============================================
+
+/**
+ * Render props for Draggable component
+ */
+export interface DraggableRenderProps {
+  /** Attributes for the draggable element */
+  attributes: Record<string, unknown>
+  /** Whether the element is currently being dragged */
+  isDragging: boolean
+  /** Event listeners for drag interactions */
+  listeners: Record<string, unknown> | undefined
+  /** Ref to attach to the draggable element */
+  setNodeRef: (node: HTMLElement | null) => void
+  /** Current transform state */
+  transform: null | { scaleX: number; scaleY: number; x: number; y: number; }
+}
+
+/**
+ * Props for the Draggable component
+ */
+export interface DraggableProps {
+  /** Content or render function */
+  children: ((props: DraggableRenderProps) => ReactNode) | ReactNode
+  /** Additional CSS classes */
+  className?: string
+  /** Additional data to associate with the draggable */
+  data?: Record<string, unknown>
+  /** Whether dragging is disabled */
+  disabled?: boolean
+  /** Unique identifier for the draggable */
+  id: UniqueIdentifier
+}
+
+// ============================================
+// DROPPABLE TYPES
+// ============================================
+
+/**
+ * Render props for Droppable component
+ */
+export interface DroppableRenderProps {
+  /** Whether an item is currently being dragged over */
+  isOver: boolean
+  /** Ref to attach to the droppable element */
+  setNodeRef: (node: HTMLElement | null) => void
+}
+
+/**
+ * Props for the Droppable component
+ */
+export interface DroppableProps {
+  /** Content or render function */
+  children: ((props: DroppableRenderProps) => ReactNode) | ReactNode
+  /** Additional CSS classes */
+  className?: string
+  /** Additional data to associate with the droppable */
+  data?: Record<string, unknown>
+  /** Whether dropping is disabled */
+  disabled?: boolean
+  /** Unique identifier for the droppable */
+  id: UniqueIdentifier
+}
+
+// ============================================
+// DRAG OVERLAY TYPES
+// ============================================
+
+/**
+ * Props for the DragOverlay component
+ */
+export interface DragOverlayProps {
+  /** Content to show in the overlay */
+  children?: ReactNode
+  /** Additional CSS classes */
+  className?: string
+  /** Whether to adjust scale during drag */
+  dropAnimation?: null | {
+    duration?: number
+    easing?: string
+  }
+  /** Modifiers for overlay positioning */
+  modifiers?: Modifiers
+  /** Z-index for the overlay */
+  zIndex?: number
+}
+
+// ============================================
+// SORTABLE TYPES
+// ============================================
+
+/**
+ * Props for the SortableContext component
+ */
+export interface SortableContextProps {
+  /** Content to wrap */
+  children: ReactNode
+  /** Whether sorting is disabled */
+  disabled?: boolean
+  /** Array of item IDs */
+  items: (UniqueIdentifier | { id: UniqueIdentifier })[]
+  /** Sorting strategy */
+  strategy?: SortingStrategy
+}
+
+/**
+ * Render props for SortableItem component
+ */
+export interface SortableItemRenderProps {
+  /** Attributes for the sortable element */
+  attributes: Record<string, unknown>
+  /** Whether the element is currently being dragged */
+  isDragging: boolean
+  /** Whether the element is being sorted */
+  isSorting: boolean
+  /** Event listeners for drag interactions */
+  listeners: Record<string, unknown> | undefined
+  /** Ref to attach to the sortable element */
+  setNodeRef: (node: HTMLElement | null) => void
+  /** Current transform style */
+  style: React.CSSProperties
+  /** Current transition */
+  transition: string | undefined
+}
+
+/**
+ * Props for the SortableItem component
+ */
+export interface SortableItemProps {
+  /** Content or render function */
+  children: ((props: SortableItemRenderProps) => ReactNode) | ReactNode
+  /** Additional CSS classes */
+  className?: string
+  /** Additional data to associate with the sortable item */
+  data?: Record<string, unknown>
+  /** Whether sorting is disabled for this item */
+  disabled?: boolean
+  /** Unique identifier for the sortable item */
+  id: UniqueIdentifier
+}
+
+// ============================================
+// DRAG HANDLE TYPES
+// ============================================
+
+/**
+ * Props for the DragHandle component
+ */
+export interface DragHandleProps extends ComponentProps<"button"> {
+  /** Content for the handle (usually an icon) */
+  children?: ReactNode
+  /** Additional CSS classes */
+  className?: string
+}
+
+// ============================================
+// UTILITY TYPES
+// ============================================
+
+/**
+ * Active item during drag
+ */
+export interface ActiveItem {
+  /** Additional data */
+  data?: Record<string, unknown>
+  /** Unique identifier */
+  id: UniqueIdentifier
+}
+
+/**
+ * Data slot names used by DragAndDrop components
+ */
+export type DragAndDropDataSlot =
+  | "dnd-context"
+  | "drag-handle"
+  | "drag-overlay"
+  | "draggable"
+  | "droppable"
+  | "sortable-context"
+  | "sortable-item"
+
+// Re-export useful types from @dnd-kit/core
+export type {
+  DragCancelEvent,
+  DragEndEvent,
+  DragMoveEvent,
+  DragOverEvent,
+  DragStartEvent,
+  UniqueIdentifier,
+}