Kanban Board

1"use client"
2 
3import * as React from "react"
4import {
5  DndContext,
6  closestCorners,
7  KeyboardSensor,
8  PointerSensor,
9  useSensor,
10  useSensors,
11  DragOverlay,
12  type DragStartEvent,
13  type DragEndEvent,
14  type DragOverEvent,
15} from "@dnd-kit/core"
16import {
17  arrayMove,
18  SortableContext,
19  sortableKeyboardCoordinates,
20  useSortable,
21  verticalListSortingStrategy,
22} from "@dnd-kit/sortable"
23import { CSS } from "@dnd-kit/utilities"
24import { motion, AnimatePresence } from "motion/react"
25import { cn } from "@/lib/utils"
26 
27const EASE_OUT_QUART: [number, number, number, number] = [0.25, 1, 0.5, 1]
28 
29// ── Types ────────────────────────────────────────────────────────────
30 
31interface KanbanTag {
32  id: string
33  label: string
34  color?: string
35}
36 
37interface KanbanColumn<T extends { id: string | number }> {
38  id: string
39  title: string
40  items: T[]
41}
42 
43interface KanbanBoardProps<T extends { id: string | number }> {
44  columns: KanbanColumn<T>[]
45  onColumnsChange: (columns: KanbanColumn<T>[]) => void
46  renderItem: (item: T, columnId: string) => React.ReactNode
47  onAddItem?: (columnId: string, title: string, tagId?: string) => void
48  tags?: KanbanTag[]
49  /** Extract the tag id from an item - used for tag filtering */
50  getItemTagId?: (item: T) => string | undefined
51  collapsible?: boolean
52  className?: string
53  columnClassName?: string
54  minColumnWidth?: number
55  collapsedColumnWidth?: number
56}
57 
58// ── Sortable Item ────────────────────────────────────────────────────
59 
60function KanbanSortableItem({
61  id,
62  children,
63  isDragOverlay,
64}: {
65  id: string | number
66  children: React.ReactNode
67  isDragOverlay?: boolean
68}) {
69  const {
70    attributes,
71    listeners,
72    setNodeRef,
73    transform,
74    isDragging,
75  } = useSortable({ id })
76 
77  if (isDragOverlay) {
78    return (
79      <motion.div
80        className="touch-none cursor-grabbing"
81        initial={{ scale: 1, boxShadow: "0 1px 3px rgba(0,0,0,0.08)" }}
82        animate={{
83          scale: 1.03,
84          boxShadow: "0 12px 40px rgba(0,0,0,0.15), 0 4px 12px rgba(0,0,0,0.1)",
85        }}
86        transition={{ duration: 0.2, ease: EASE_OUT_QUART }}
87      >
88        {children}
89      </motion.div>
90    )
91  }
92 
93  const style: React.CSSProperties = {
94    transform: CSS.Translate.toString(transform),
95// … truncated