@etus/ui 0.1.1 → 0.1.2

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

@@ -1,495 +0,0 @@
-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

@@ -1,237 +0,0 @@
-// 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,
-}