{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "kanban-board", "title": "Kanban Board", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/kanban-board/KanbanBoard.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport { Plus } from 'lucide-react'\nimport { type KanbanColumn as KanbanColumnType, type KanbanTask, findTaskById } from '@/lib/use-kanban'\nimport { PageHeader, PageHeaderHeading } from '@/components/ui/page'\nimport { Button } from '@/components/ui/button'\nimport { Badge } from '@/components/ui/badge'\nimport { KanbanToolbar } from './KanbanToolbar'\nimport { KanbanColumn, type FilteredColumn } from './KanbanColumn'\nimport { KanbanListView } from './KanbanListView'\nimport { KanbanTaskSheet } from './KanbanTaskSheet'\nimport { KanbanAddTaskDialog } from './KanbanAddTaskDialog'\n\nexport interface KanbanBoardProps {\n columns: KanbanColumnType[]\n onColumnsChange?: (value: KanbanColumnType[]) => void\n title?: string | null\n description?: string | null\n defaultColumnId?: string\n hideHeader?: boolean\n hideToolbar?: boolean\n lockParentScroll?: boolean\n}\n\nexport function KanbanBoard({\n columns,\n onColumnsChange,\n title = 'Kanban Board',\n description = 'Drag tasks across columns to update their status.',\n defaultColumnId = 'backlog',\n hideHeader = false,\n hideToolbar = false,\n lockParentScroll = true,\n}: KanbanBoardProps) {\n const kanbanEl = React.useRef(null)\n\n React.useEffect(() => {\n if (!lockParentScroll) return\n const parentMain = kanbanEl.current?.closest('main[data-slot=\"sidebar-inset\"]') as HTMLElement | null\n if (parentMain) parentMain.style.overflow = 'hidden'\n document.documentElement.style.overflow = 'hidden'\n return () => {\n if (parentMain) parentMain.style.overflow = ''\n document.documentElement.style.overflow = ''\n }\n }, [lockParentScroll])\n\n const [searchQuery, setSearchQuery] = React.useState('')\n const [selectedPriority, setSelectedPriority] = React.useState(null)\n const [selectedAssignee, setSelectedAssignee] = React.useState(null)\n const [viewMode, setViewMode] = React.useState<'board' | 'list'>('board')\n const [collapsedColumns, setCollapsedColumns] = React.useState>(new Set())\n\n const [detailOpen, setDetailOpen] = React.useState(false)\n const [detailTask, setDetailTask] = React.useState(null)\n\n const [addTaskOpen, setAddTaskOpen] = React.useState(false)\n const [addTaskColumnId, setAddTaskColumnId] = React.useState(defaultColumnId)\n\n const draggedTaskRef = React.useRef(null)\n const dragOverColumnRef = React.useRef(null)\n const dropTargetIndexRef = React.useRef(-1)\n const lastDragEndRef = React.useRef(0)\n\n const [draggedTask, setDraggedTask] = React.useState(null)\n const [dragOverColumn, setDragOverColumn] = React.useState(null)\n const [dropTargetIndex, setDropTargetIndex] = React.useState(-1)\n\n // Mutating helper: the consumer owns `columns`, so we clone, mutate the\n // clone, and emit it back via onColumnsChange — mirroring the Vue v-model.\n function commitColumns(mutator: (cols: KanbanColumnType[]) => void) {\n const next = columns.map((c) => ({ ...c, tasks: [...c.tasks] }))\n mutator(next)\n onColumnsChange?.(next)\n }\n\n const filteredColumns = React.useMemo(() => {\n return columns.map((col) => ({\n ...col,\n tasks: col.tasks.filter((task) => {\n const q = searchQuery.toLowerCase()\n const matchesSearch = !q || task.title.toLowerCase().includes(q) || task.id.toLowerCase().includes(q)\n const matchesPriority = !selectedPriority || task.priority === selectedPriority\n const matchesAssignee = !selectedAssignee || task.assignee.name === selectedAssignee\n return matchesSearch && matchesPriority && matchesAssignee\n }),\n }))\n }, [columns, searchQuery, selectedPriority, selectedAssignee])\n\n const totalTasks = React.useMemo(() => columns.reduce((sum, col) => sum + col.tasks.length, 0), [columns])\n\n function toggleCollapse(columnId: string) {\n setCollapsedColumns((prev) => {\n const next = new Set(prev)\n if (next.has(columnId)) next.delete(columnId)\n else next.add(columnId)\n return next\n })\n }\n\n function addComment(task: KanbanTask, text: string) {\n commitColumns((cols) => {\n const target = findTaskById(cols, task.id)\n if (target) {\n target.commentItems = [\n ...target.commentItems,\n {\n id: `c${Date.now()}`,\n author: 'Admin User',\n authorColor: 'bg-chart-1/15 text-chart-1',\n text,\n time: 'Just now',\n },\n ]\n }\n })\n }\n\n function moveTask(task: KanbanTask, targetColumnId: string) {\n commitColumns((cols) => {\n const sourceCol = cols.find((c) => c.tasks.some((t) => t.id === task.id))\n const targetCol = cols.find((c) => c.id === targetColumnId)\n if (!sourceCol || !targetCol || sourceCol.id === targetColumnId) return\n const taskIndex = sourceCol.tasks.findIndex((t) => t.id === task.id)\n if (taskIndex === -1) return\n const removed = sourceCol.tasks.splice(taskIndex, 1)\n if (removed[0]) targetCol.tasks.push(removed[0])\n })\n }\n\n function openTaskDetail(task: KanbanTask) {\n setDetailTask(task)\n setDetailOpen(true)\n }\n\n function onDragStart(event: React.DragEvent, taskId: string) {\n draggedTaskRef.current = taskId\n setDraggedTask(taskId)\n if (event.dataTransfer) {\n event.dataTransfer.effectAllowed = 'move'\n event.dataTransfer.setData('text/plain', taskId)\n }\n }\n\n function resetDrag() {\n draggedTaskRef.current = null\n dragOverColumnRef.current = null\n dropTargetIndexRef.current = -1\n setDraggedTask(null)\n setDragOverColumn(null)\n setDropTargetIndex(-1)\n lastDragEndRef.current = Date.now()\n }\n\n function onDrop() {\n const dragged = draggedTaskRef.current\n const overColumn = dragOverColumnRef.current\n if (!dragged || !overColumn) {\n resetDrag()\n return\n }\n\n commitColumns((cols) => {\n let sourceColIdx = -1\n let taskIdx = -1\n for (let c = 0; c < cols.length; c++) {\n const col = cols[c]\n if (!col) continue\n const tIdx = col.tasks.findIndex((t) => t.id === dragged)\n if (tIdx !== -1) {\n sourceColIdx = c\n taskIdx = tIdx\n break\n }\n }\n const targetColIdx = cols.findIndex((c) => c.id === overColumn)\n if (sourceColIdx === -1 || targetColIdx === -1) return\n\n const sourceCol = cols[sourceColIdx]\n const targetCol = cols[targetColIdx]\n if (!sourceCol || !targetCol) return\n\n const [task] = sourceCol.tasks.splice(taskIdx, 1)\n if (!task) return\n\n let insertAt = dropTargetIndexRef.current\n if (insertAt < 0) insertAt = targetCol.tasks.length\n if (sourceColIdx === targetColIdx && taskIdx < insertAt) insertAt--\n\n targetCol.tasks.splice(insertAt, 0, task)\n })\n resetDrag()\n }\n\n function onCardClick(task: KanbanTask) {\n if (Date.now() - lastDragEndRef.current < 200) return\n openTaskDetail(task)\n }\n\n function onCardDragOver(event: React.DragEvent, columnId: string, taskIndex: number) {\n dragOverColumnRef.current = columnId\n setDragOverColumn(columnId)\n const rect = (event.currentTarget as HTMLElement).getBoundingClientRect()\n const midY = rect.top + rect.height / 2\n const idx = event.clientY < midY ? taskIndex : taskIndex + 1\n dropTargetIndexRef.current = idx\n setDropTargetIndex(idx)\n }\n\n function onLaneDragOver(_event: React.DragEvent, columnId: string, taskCount: number) {\n dragOverColumnRef.current = columnId\n setDragOverColumn(columnId)\n dropTargetIndexRef.current = taskCount\n setDropTargetIndex(taskCount)\n }\n\n function openAddTask(columnId: string) {\n setAddTaskColumnId(columnId)\n setAddTaskOpen(true)\n }\n\n function onCreateTask(columnId: string, tasks: KanbanTask[]) {\n commitColumns((cols) => {\n const col = cols.find((c) => c.id === columnId)\n if (col) col.tasks.push(...tasks)\n })\n }\n\n return (\n \n {!hideHeader && (\n
\n \n
\n \n
\n \n {totalTasks} tasks\n \n \n
\n
\n \n
\n )}\n\n {!hideToolbar && (\n \n )}\n\n {viewMode === 'board' ? (\n
\n {filteredColumns.map((column) => (\n \n ))}\n
\n ) : (\n \n )}\n\n \n\n \n\n \n \n )\n}", "type": "registry:block", "target": "~/components/blocks/kanban-board/KanbanBoard.tsx" }, { "path": "packages/registry-react/blocks/kanban-board/KanbanCard.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport { MoreHorizontal, MessageSquare, Paperclip, ExternalLink } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { type KanbanColumn as KanbanColumnType, type KanbanTask, priorityConfig, getTaskColumn } from '@/lib/use-kanban'\nimport { Button } from '@/components/ui/button'\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu'\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'\nimport { TagBadge } from './TagBadge'\nimport { SubtaskProgress } from './SubtaskProgress'\nimport { DueDateBadge } from './DueDateBadge'\nimport { UserAvatar } from './UserAvatar'\n\nexport function KanbanCard({\n task,\n isDone,\n columns,\n onClick,\n onQuickView,\n}: {\n task: KanbanTask\n isDone: boolean\n columns: KanbanColumnType[]\n onClick?: (task: KanbanTask) => void\n onQuickView?: (task: KanbanTask) => void\n}) {\n const subtasksDone = React.useMemo(() => {\n if (!columns || !task.subtaskIds.length) return 0\n return task.subtaskIds.filter((id) => getTaskColumn(columns, id)?.id === 'done').length\n }, [columns, task.subtaskIds])\n\n return (\n onClick?.(task)}\n >\n \n\n
\n {task.id}\n \n \n e.stopPropagation()}\n >\n \n \n \n \n {\n e.stopPropagation()\n onQuickView?.(task)\n }}\n >\n Quick view\n \n \n \n \n Open detail\n \n \n Edit\n Move to...\n Assign to...\n \n Delete\n \n \n
\n\n \n {task.title}\n

\n\n {task.tags.length > 0 && (\n
\n {task.tags.map((tag) => (\n \n ))}\n
\n )}\n\n {task.subtaskIds.length > 0 && (\n
\n \n
\n )}\n\n
\n {task.dueDate && }\n\n {task.commentItems.length > 0 && (\n
\n \n {task.commentItems.length}\n
\n )}\n\n {task.fileItems.length > 0 && (\n
\n \n {task.fileItems.length}\n
\n )}\n\n
\n \n \n \n \n \n \n \n \n {task.assignee.name}\n \n \n \n
\n
\n \n )\n}", "type": "registry:block", "target": "~/components/blocks/kanban-board/KanbanCard.tsx" }, { "path": "packages/registry-react/blocks/kanban-board/KanbanColumn.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport { Plus, MoreHorizontal, ChevronsLeft, ChevronsRight } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { type KanbanColumn as KanbanColumnType, type KanbanTask } from '@/lib/use-kanban'\nimport { Button } from '@/components/ui/button'\nimport { Badge } from '@/components/ui/badge'\nimport { KanbanCard } from './KanbanCard'\n\nexport interface FilteredColumn {\n id: string\n title: string\n color: string\n dotColor: string\n tasks: KanbanTask[]\n}\n\nexport function KanbanColumn({\n column,\n collapsed,\n draggedTask,\n dragOverColumn,\n dropTargetIndex,\n allColumns,\n onToggleCollapse,\n onAddTask,\n onCardClick,\n onCardQuickView,\n onDragStart,\n onDragEnd,\n onCardDragOver,\n onLaneDragOver,\n onDrop,\n}: {\n column: FilteredColumn\n collapsed: boolean\n draggedTask: string | null\n dragOverColumn: string | null\n dropTargetIndex: number\n allColumns: KanbanColumnType[]\n onToggleCollapse: (columnId: string) => void\n onAddTask: (columnId: string) => void\n onCardClick: (task: KanbanTask) => void\n onCardQuickView: (task: KanbanTask) => void\n onDragStart: (event: React.DragEvent, taskId: string) => void\n onDragEnd: () => void\n onCardDragOver: (event: React.DragEvent, columnId: string, taskIndex: number) => void\n onLaneDragOver: (event: React.DragEvent, columnId: string, taskCount: number) => void\n onDrop: () => void\n}) {\n return (\n e.preventDefault()}\n onDrop={() => onDrop()}\n >\n {collapsed ? (\n onToggleCollapse(column.id)}\n >\n \n \n {column.title}\n \n \n {column.tasks.length}\n \n \n \n ) : (\n <>\n
\n onToggleCollapse(column.id)}\n >\n \n \n \n

{column.title}

\n \n {column.tasks.length}\n \n
\n \n \n \n onAddTask(column.id)}\n >\n \n \n
\n
\n\n {\n e.preventDefault()\n onLaneDragOver(e, column.id, column.tasks.length)\n }}\n >\n {column.tasks.map((task, taskIndex) => (\n \n \n onDragStart(e, task.id)}\n onDragEnd={() => onDragEnd()}\n onDragOver={(e) => {\n e.stopPropagation()\n e.preventDefault()\n onCardDragOver(e, column.id, taskIndex)\n }}\n >\n \n \n \n ))}\n\n {column.tasks.length > 0 && (\n \n )}\n\n {column.tasks.length === 0 && (\n onAddTask(column.id)}\n >\n \n

No tasks

\n \n )}\n \n\n onAddTask(column.id)}\n >\n \n Add task\n \n \n )}\n \n )\n}", "type": "registry:block", "target": "~/components/blocks/kanban-board/KanbanColumn.tsx" }, { "path": "packages/registry-react/blocks/kanban-board/KanbanListView.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport { ChevronDown, ChevronRight, ExternalLink, MessageSquare, Paperclip, ArrowUpDown } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { type KanbanColumn as KanbanColumnType, type KanbanTask, getTaskColumn } from '@/lib/use-kanban'\nimport { Badge } from '@/components/ui/badge'\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from '@/components/ui/select'\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'\nimport { type FilteredColumn } from './KanbanColumn'\nimport { TagBadge } from './TagBadge'\nimport { SubtaskProgress } from './SubtaskProgress'\nimport { PriorityBadge } from './PriorityBadge'\nimport { DueDateBadge } from './DueDateBadge'\nimport { UserAvatar } from './UserAvatar'\n\ntype SortField = 'id' | 'title' | 'priority' | 'assignee' | 'dueDate' | 'status'\ntype SortDir = 'asc' | 'desc'\n\ninterface FlatTask {\n task: KanbanTask\n columnId: string\n columnTitle: string\n dotColor: string\n}\n\nconst priorityOrder: Record = { urgent: 0, high: 1, medium: 2, low: 3 }\n\nexport function KanbanListView({\n columns,\n allColumns,\n onTaskClick,\n onMoveTask,\n}: {\n columns: FilteredColumn[]\n allColumns: KanbanColumnType[]\n onTaskClick: (task: KanbanTask) => void\n onMoveTask: (task: KanbanTask, targetColumnId: string) => void\n}) {\n const [sortField, setSortField] = React.useState('status')\n const [sortDir, setSortDir] = React.useState('asc')\n const [collapsedGroups, setCollapsedGroups] = React.useState>(new Set())\n\n function toggleSort(field: SortField) {\n if (sortField === field) {\n setSortDir((d) => (d === 'asc' ? 'desc' : 'asc'))\n } else {\n setSortField(field)\n setSortDir('asc')\n }\n }\n\n function toggleGroup(columnId: string) {\n setCollapsedGroups((prev) => {\n const next = new Set(prev)\n if (next.has(columnId)) next.delete(columnId)\n else next.add(columnId)\n return next\n })\n }\n\n const flatTasks = React.useMemo(() => {\n const items: FlatTask[] = []\n for (const col of columns) {\n for (const task of col.tasks) {\n items.push({ task, columnId: col.id, columnTitle: col.title, dotColor: col.dotColor })\n }\n }\n return [...items].sort((a, b) => {\n let cmp = 0\n switch (sortField) {\n case 'id': {\n const numA = parseInt(a.task.id.replace(/^[A-Z]+-/, ''), 10)\n const numB = parseInt(b.task.id.replace(/^[A-Z]+-/, ''), 10)\n cmp = numA - numB\n break\n }\n case 'title':\n cmp = a.task.title.localeCompare(b.task.title)\n break\n case 'priority':\n cmp = (priorityOrder[a.task.priority] ?? 99) - (priorityOrder[b.task.priority] ?? 99)\n break\n case 'assignee':\n cmp = a.task.assignee.name.localeCompare(b.task.assignee.name)\n break\n case 'dueDate':\n cmp = (a.task.dueDate ?? '9999').localeCompare(b.task.dueDate ?? '9999')\n break\n case 'status': {\n const colOrder = allColumns.map((c) => c.id)\n cmp = colOrder.indexOf(a.columnId) - colOrder.indexOf(b.columnId)\n break\n }\n }\n return sortDir === 'desc' ? -cmp : cmp\n })\n }, [columns, allColumns, sortField, sortDir])\n\n const groupedTasks = React.useMemo(() => {\n const groups: { column: KanbanColumnType; tasks: FlatTask[] }[] = []\n for (const col of allColumns) {\n const tasks = flatTasks.filter((t) => t.columnId === col.id)\n groups.push({ column: col, tasks })\n }\n return groups\n }, [allColumns, flatTasks])\n\n function subtasksDone(task: KanbanTask): number {\n if (!task.subtaskIds.length) return 0\n return task.subtaskIds.filter((id) => getTaskColumn(allColumns, id)?.id === 'done').length\n }\n\n const headerCols: { field: SortField; label: string }[] = [\n { field: 'id', label: 'ID' },\n { field: 'title', label: 'Task' },\n { field: 'status', label: 'Status' },\n { field: 'priority', label: 'Priority' },\n { field: 'assignee', label: 'Assignee' },\n { field: 'dueDate', label: 'Due' },\n ]\n\n return (\n
\n
\n {headerCols.map((h) => (\n \n ))}\n Info\n
\n\n {groupedTasks.map((group) => (\n \n toggleGroup(group.column.id)}\n >\n {collapsedGroups.has(group.column.id) ? (\n \n ) : (\n \n )}\n \n {group.column.title}\n \n {group.tasks.length}\n \n \n\n {!collapsedGroups.has(group.column.id) &&\n group.tasks.map((item) => (\n onTaskClick(item.task)}\n >\n {item.task.id}\n\n
\n
\n \n {item.task.title}\n \n e.stopPropagation()}\n >\n \n \n
\n {(item.task.tags.length > 0 || item.task.subtaskIds.length > 0) && (\n
\n {item.task.tags.map((tag) => (\n \n ))}\n {item.task.subtaskIds.length > 0 && (\n \n )}\n
\n )}\n
\n\n
\n onMoveTask(item.task, String(val))}\n >\n e.stopPropagation()}\n >\n \n \n \n \n \n \n {allColumns.map((col) => (\n \n \n \n {col.title}\n \n \n ))}\n \n \n
\n\n \n\n
\n \n {item.task.assignee.name}\n
\n\n
\n {item.task.dueDate ? (\n \n ) : (\n —\n )}\n
\n\n
\n \n {item.task.commentItems.length > 0 && (\n \n \n \n \n {item.task.commentItems.length}\n \n \n {item.task.commentItems.length} comments\n \n )}\n {item.task.fileItems.length > 0 && (\n \n \n \n \n {item.task.fileItems.length}\n \n \n {item.task.fileItems.length} files\n \n )}\n \n
\n
\n ))}\n \n ))}\n\n {flatTasks.length === 0 && (\n
\n No tasks match your filters.\n
\n )}\n \n )\n}", "type": "registry:block", "target": "~/components/blocks/kanban-board/KanbanListView.tsx" }, { "path": "packages/registry-react/blocks/kanban-board/KanbanTaskSheet.tsx", "content": "'use client'\n\nimport { Clock, ExternalLink, Download } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { type KanbanColumn as KanbanColumnType, type KanbanTask, priorityConfig, fileIconMap } from '@/lib/use-kanban'\nimport { Button } from '@/components/ui/button'\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from '@/components/ui/select'\nimport { Sheet, SheetContent, SheetTitle, SheetDescription, SheetFooter, SheetClose } from '@/components/ui/sheet'\nimport { TagBadge } from './TagBadge'\nimport { PriorityBadge } from './PriorityBadge'\nimport { DueDateBadge } from './DueDateBadge'\nimport { UserAvatar } from './UserAvatar'\nimport { SubtaskList } from './SubtaskList'\nimport { CommentList } from './CommentList'\n\nexport function KanbanTaskSheet({\n open,\n task,\n columns,\n onOpenChange,\n onMoveTask,\n onAddComment,\n}: {\n open: boolean\n task: KanbanTask | null\n columns: KanbanColumnType[]\n onOpenChange: (value: boolean) => void\n onMoveTask: (task: KanbanTask, columnId: string) => void\n onAddComment: (task: KanbanTask, text: string) => void\n}) {\n const columnIdForTask = task\n ? (columns.find((c) => c.tasks.some((t) => t.id === task.id))?.id ?? '')\n : ''\n\n return (\n \n \n {task && (\n <>\n
\n\n
\n
\n {task.id}\n ·\n \n \n
\n\n {task.title}\n Task details\n {task.description ? (\n \n ) : (\n

No description provided.

\n )}\n\n
\n {task.tags.length ? (\n task.tags.map((tag) => )\n ) : (\n No tags\n )}\n
\n
\n\n
\n\n
\n
\n
\n \n
\n

{task.assignee.name}

\n

Assignee

\n
\n
\n {task.dueDate ? (\n \n ) : (\n

\n \n No due date\n

\n )}\n
\n
\n\n {task.parentId && (\n
\n Parent:\n onOpenChange(false)}\n >\n {task.parentId}\n \n
\n )}\n\n
\n

\n Subtasks\n {task.subtaskIds.length > 0 && (\n ({task.subtaskIds.length})\n )}\n

\n \n
\n\n
\n\n
\n

\n Comments\n {task.commentItems.length > 0 && (\n ({task.commentItems.length})\n )}\n

\n onAddComment(task, text)} />\n
\n\n
\n\n
\n

\n Files\n {task.fileItems.length > 0 && (\n ({task.fileItems.length})\n )}\n

\n {task.fileItems.length ? (\n
\n {task.fileItems.map((file) => {\n const FileIcon = fileIconMap[file.type]\n return (\n \n
\n \n
\n
\n

{file.name}

\n

{file.size}

\n
\n \n \n \n
\n )\n })}\n
\n ) : (\n

No files attached.

\n )}\n
\n
\n
\n\n \n \n \n \n )}\n \n \n )\n}", "type": "registry:block", "target": "~/components/blocks/kanban-board/KanbanTaskSheet.tsx" }, { "path": "packages/registry-react/blocks/kanban-board/KanbanAddTaskDialog.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport { Plus, X, CheckCircle2, Calendar as CalendarIcon } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport {\n type KanbanColumn as KanbanColumnType,\n type KanbanTask,\n priorityConfig,\n assignees,\n tagPresets,\n} from '@/lib/use-kanban'\nimport { Button } from '@/components/ui/button'\nimport { Input } from '@/components/ui/input'\nimport { Label } from '@/components/ui/label'\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from '@/components/ui/select'\nimport {\n Dialog,\n DialogScrollContent,\n DialogHeader,\n DialogTitle,\n DialogDescription,\n DialogFooter,\n} from '@/components/ui/dialog'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'\nimport { Calendar } from '@/components/ui/calendar'\nimport { RichTextEditor } from '@/components/ui/rich-text-editor'\n\ninterface AddTaskForm {\n title: string\n description: string\n priority: KanbanTask['priority']\n assigneeKey: keyof typeof assignees\n tagKeys: (keyof typeof tagPresets)[]\n subtaskTexts: string[]\n}\n\nconst emptyForm = (): AddTaskForm => ({\n title: '',\n description: '',\n priority: 'medium',\n assigneeKey: 'alice',\n tagKeys: [],\n subtaskTexts: [],\n})\n\nexport function KanbanAddTaskDialog({\n open,\n columns,\n initialColumnId,\n onOpenChange,\n onCreate,\n}: {\n open: boolean\n columns: KanbanColumnType[]\n initialColumnId: string\n onOpenChange: (value: boolean) => void\n onCreate: (columnId: string, tasks: KanbanTask[]) => void\n}) {\n const [columnId, setColumnId] = React.useState(initialColumnId)\n const [dueDate, setDueDate] = React.useState(undefined)\n const [form, setForm] = React.useState(emptyForm)\n const [newSubtaskText, setNewSubtaskText] = React.useState('')\n\n React.useEffect(() => {\n setColumnId(initialColumnId)\n }, [initialColumnId])\n\n React.useEffect(() => {\n if (open) {\n setColumnId(initialColumnId)\n setForm(emptyForm())\n setDueDate(undefined)\n setNewSubtaskText('')\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [open])\n\n function addSubtask() {\n const text = newSubtaskText.trim()\n if (!text) return\n setForm((f) => ({ ...f, subtaskTexts: [...f.subtaskTexts, text] }))\n setNewSubtaskText('')\n }\n\n function removeSubtask(index: number) {\n setForm((f) => ({ ...f, subtaskTexts: f.subtaskTexts.filter((_, i) => i !== index) }))\n }\n\n function toggleTag(key: keyof typeof tagPresets) {\n setForm((f) => {\n const idx = f.tagKeys.indexOf(key)\n const tagKeys = idx >= 0 ? f.tagKeys.filter((k) => k !== key) : [...f.tagKeys, key]\n return { ...f, tagKeys }\n })\n }\n\n function submit() {\n if (!form.title.trim()) return\n const maxId = columns\n .flatMap((c) => c.tasks)\n .reduce((max, t) => {\n const num = parseInt(t.id.replace(/^[A-Z]+-/, ''), 10)\n return num > max ? num : max\n }, 0)\n const idPrefix = columns.flatMap((c) => c.tasks)[0]?.id.split('-')[0] ?? 'TASK'\n const parentId = `${idPrefix}-${maxId + 1}`\n const subtaskTasks: KanbanTask[] = form.subtaskTexts.map((text, i) => ({\n id: `${idPrefix}-${maxId + 2 + i}`,\n title: text,\n priority: 'medium' as const,\n assignee: assignees[form.assigneeKey],\n tags: [],\n parentId,\n subtaskIds: [],\n commentItems: [],\n fileItems: [],\n }))\n const newTask: KanbanTask = {\n id: parentId,\n title: form.title.trim(),\n description: form.description.trim() || undefined,\n priority: form.priority,\n assignee: assignees[form.assigneeKey],\n tags: form.tagKeys.map((k) => tagPresets[k]),\n dueDate: dueDate ? dueDate.toISOString().slice(0, 10) : undefined,\n subtaskIds: subtaskTasks.map((t) => t.id),\n commentItems: [],\n fileItems: [],\n }\n onCreate(columnId, [newTask, ...subtaskTasks])\n onOpenChange(false)\n }\n\n return (\n \n \n \n New Task\n \n Adding task to {columns.find((c) => c.id === columnId)?.title ?? 'column'}\n \n \n\n
\n
\n \n setForm((f) => ({ ...f, title: e.target.value }))}\n />\n
\n\n
\n \n setForm((f) => ({ ...f, description: val }))}\n />\n
\n\n
\n
\n \n setForm((f) => ({ ...f, priority: val as KanbanTask['priority'] }))}\n >\n \n \n \n \n {Object.entries(priorityConfig).map(([key, config]) => (\n \n {config.label}\n \n ))}\n \n \n
\n\n
\n \n setForm((f) => ({ ...f, assigneeKey: val as keyof typeof assignees }))}\n >\n \n \n \n \n {Object.entries(assignees).map(([key, person]) => (\n \n {person.name}\n \n ))}\n \n \n
\n\n
\n \n \n
\n
\n\n
\n \n \n \n \n \n {dueDate ? dueDate.toLocaleDateString('en-US', { dateStyle: 'medium' }) : 'Pick a date'}\n \n \n \n \n \n \n
\n\n
\n \n
\n {Object.entries(tagPresets).map(([key, tag]) => {\n const active = form.tagKeys.includes(key as keyof typeof tagPresets)\n return (\n toggleTag(key as keyof typeof tagPresets)}\n >\n {active && }\n {tag.label}\n \n )\n })}\n
\n
\n\n
\n \n {form.subtaskTexts.length > 0 && (\n
\n {form.subtaskTexts.map((text, index) => (\n
\n {text}\n \n
\n ))}\n
\n )}\n
\n setNewSubtaskText(e.target.value)}\n onKeyUp={(e) => e.key === 'Enter' && addSubtask()}\n />\n \n
\n
\n
\n\n \n \n \n \n \n \n )\n}", "type": "registry:block", "target": "~/components/blocks/kanban-board/KanbanAddTaskDialog.tsx" }, { "path": "packages/registry-react/blocks/kanban-board/KanbanToolbar.tsx", "content": "'use client'\n\nimport { Search, Filter, ChevronDown, X, LayoutGrid, List } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { priorityConfig, assignees, getInitials } from '@/lib/use-kanban'\nimport { Button } from '@/components/ui/button'\nimport { Badge } from '@/components/ui/badge'\nimport { Input } from '@/components/ui/input'\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar'\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu'\nimport { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'\n\nexport function KanbanToolbar({\n searchQuery,\n selectedPriority,\n selectedAssignee,\n viewMode,\n onSearchQueryChange,\n onSelectedPriorityChange,\n onSelectedAssigneeChange,\n onViewModeChange,\n}: {\n searchQuery: string\n selectedPriority: string | null\n selectedAssignee: string | null\n viewMode: 'board' | 'list'\n onSearchQueryChange: (value: string) => void\n onSelectedPriorityChange: (value: string | null) => void\n onSelectedAssigneeChange: (value: string | null) => void\n onViewModeChange: (value: 'board' | 'list') => void\n}) {\n return (\n
\n
\n \n onSearchQueryChange(e.target.value)}\n />\n
\n\n \n \n \n \n \n {Object.entries(priorityConfig).map(([key, config]) => {\n const Icon = config.icon\n return (\n onSelectedPriorityChange(selectedPriority === key ? null : key)}\n >\n \n {config.label}\n {selectedPriority === key && }\n \n )\n })}\n {selectedPriority && }\n {selectedPriority && (\n onSelectedPriorityChange(null)}>Clear filter\n )}\n \n \n\n {selectedAssignee && (\n onSelectedAssigneeChange(null)}\n >\n {selectedAssignee}\n \n \n )}\n\n v && onViewModeChange(v as 'board' | 'list')}\n >\n \n \n \n \n \n \n \n\n
\n \n {Object.entries(assignees).map(([key, a]) => (\n \n \n onSelectedAssigneeChange(selectedAssignee === a.name ? null : a.name)}\n >\n \n \n {getInitials(a.name)}\n \n \n \n \n \n {a.name}\n {selectedAssignee === a.name && (filtered)}\n \n \n ))}\n \n
\n
\n )\n}", "type": "registry:block", "target": "~/components/blocks/kanban-board/KanbanToolbar.tsx" }, { "path": "packages/registry-react/blocks/kanban-board/PriorityBadge.tsx", "content": "'use client'\n\nimport { cn } from '@/lib/utils'\nimport { priorityConfig } from '@/lib/use-kanban'\n\nexport function PriorityBadge({\n priority,\n iconSize = 'size-3.5',\n className,\n}: {\n priority: string\n iconSize?: string\n className?: string\n}) {\n const config = priorityConfig[priority]\n if (!config) return null\n const Icon = config.icon\n return (\n
\n \n {config.label}\n
\n )\n}", "type": "registry:block", "target": "~/components/blocks/kanban-board/PriorityBadge.tsx" }, { "path": "packages/registry-react/blocks/kanban-board/DueDateBadge.tsx", "content": "'use client'\n\nimport { Clock } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { getDueStatus, formatDueDate } from '@/lib/use-kanban'\n\nexport function DueDateBadge({\n dueDate,\n variant,\n className,\n}: {\n dueDate: string\n variant?: 'chip' | 'inline'\n className?: string\n}) {\n const status = getDueStatus(dueDate)\n const formatted = formatDueDate(dueDate)\n\n const chipClasses =\n status === 'overdue'\n ? 'bg-destructive/10 text-destructive'\n : status === 'soon'\n ? 'bg-warning/10 text-warning'\n : 'text-muted-foreground bg-muted'\n\n const inlineClasses =\n status === 'overdue' ? 'text-destructive' : status === 'soon' ? 'text-warning' : 'text-foreground'\n\n if (variant === 'chip') {\n return (\n \n \n {formatted}\n
\n )\n }\n\n return (\n

\n \n {formatted}\n

\n )\n}", "type": "registry:block", "target": "~/components/blocks/kanban-board/DueDateBadge.tsx" }, { "path": "packages/registry-react/blocks/kanban-board/TagBadge.tsx", "content": "'use client'\n\nimport { cn } from '@/lib/utils'\n\nexport function TagBadge({ label, color, className }: { label: string; color: string; className?: string }) {\n return (\n \n {label}\n \n )\n}", "type": "registry:block", "target": "~/components/blocks/kanban-board/TagBadge.tsx" }, { "path": "packages/registry-react/blocks/kanban-board/UserAvatar.tsx", "content": "'use client'\n\nimport { cn } from '@/lib/utils'\nimport { getInitials } from '@/lib/use-kanban'\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar'\n\nconst userAvatarSizeMap = {\n xs: { avatar: 'size-6', text: 'text-[8px]' },\n sm: { avatar: 'size-7', text: 'text-[9px]' },\n md: { avatar: 'size-8', text: 'text-[11px]' },\n}\n\nexport function UserAvatar({\n name,\n color,\n size = 'sm',\n className,\n}: {\n name: string\n color: string\n size?: 'xs' | 'sm' | 'md'\n className?: string\n}) {\n return (\n \n \n {getInitials(name)}\n \n \n )\n}", "type": "registry:block", "target": "~/components/blocks/kanban-board/UserAvatar.tsx" }, { "path": "packages/registry-react/blocks/kanban-board/SubtaskProgress.tsx", "content": "'use client'\n\nimport { CheckCircle2 } from 'lucide-react'\nimport { cn } from '@/lib/utils'\n\nexport function SubtaskProgress({ done, total, className }: { done: number; total: number; className?: string }) {\n if (total <= 0) return null\n const percent = total > 0 ? Math.round((done / total) * 100) : 0\n const isComplete = done === total && total > 0\n return (\n
\n
\n \n {isComplete && }\n {done}/{total} subtasks\n \n {percent}%\n
\n
\n \n
\n
\n )\n}", "type": "registry:block", "target": "~/components/blocks/kanban-board/SubtaskProgress.tsx" }, { "path": "packages/registry-react/blocks/kanban-board/SubtaskList.tsx", "content": "'use client'\n\nimport { cn } from '@/lib/utils'\nimport {\n type KanbanColumn as KanbanColumnType,\n type KanbanTask,\n findTaskById,\n getTaskColumn,\n} from '@/lib/use-kanban'\n\nexport function SubtaskList({\n subtaskIds,\n columns,\n compact = false,\n}: {\n subtaskIds: string[]\n columns: KanbanColumnType[]\n compact?: boolean\n}) {\n const subtasks = subtaskIds\n .map((id) => {\n const task = findTaskById(columns, id)\n const column = getTaskColumn(columns, id)\n return task ? { task, column } : null\n })\n .filter(Boolean) as { task: KanbanTask; column: KanbanColumnType | undefined }[]\n\n const doneCount = subtasks.filter((s) => s.column?.id === 'done').length\n const percent = subtasks.length > 0 ? Math.round((doneCount / subtasks.length) * 100) : 0\n\n if (!subtasks.length) {\n return (\n

\n No subtasks yet.\n

\n )\n }\n\n return (\n
\n
\n \n {doneCount}/{subtasks.length} done\n \n \n {percent}%\n \n
\n
\n \n
\n\n
\n {subtasks.map(({ task, column }) => (\n \n \n \n {task.id}\n \n \n {task.title}\n \n \n {column?.title ?? 'Unknown'}\n \n \n ))}\n
\n
\n )\n}", "type": "registry:block", "target": "~/components/blocks/kanban-board/SubtaskList.tsx" }, { "path": "packages/registry-react/blocks/kanban-board/CommentList.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport { Send } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { type CommentItem } from '@/lib/use-kanban'\nimport { Button } from '@/components/ui/button'\nimport { RichTextEditor } from '@/components/ui/rich-text-editor'\nimport { UserAvatar } from './UserAvatar'\n\nexport function CommentList({\n comments,\n compact = false,\n onAdd,\n}: {\n comments: CommentItem[]\n compact?: boolean\n onAdd?: (text: string) => void\n}) {\n const [newComment, setNewComment] = React.useState('')\n\n function submit() {\n const stripped = newComment.replace(/<[^>]*>/g, '').trim()\n if (!stripped) return\n onAdd?.(newComment)\n setNewComment('')\n }\n\n return (\n <>\n {comments.length ? (\n
\n {comments.map((comment) => (\n
\n \n
\n
\n \n {compact ? comment.author.split(' ')[0] : comment.author}\n \n \n {comment.time}\n \n
\n \n
\n
\n ))}\n
\n ) : (\n

\n No comments yet.\n

\n )}\n\n
\n
\n \n
\n
\n \n
\n ]*>/g, '').trim()}\n onClick={submit}\n >\n \n Comment\n \n
\n
\n
\n \n )\n}", "type": "registry:block", "target": "~/components/blocks/kanban-board/CommentList.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/use-kanban.json", "https://uipkge.dev/r/react/kanban-data.json", "https://uipkge.dev/r/react/page.json", "https://uipkge.dev/r/react/card.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/badge.json", "https://uipkge.dev/r/react/input.json", "https://uipkge.dev/r/react/label.json", "https://uipkge.dev/r/react/select.json", "https://uipkge.dev/r/react/sheet.json", "https://uipkge.dev/r/react/dialog.json", "https://uipkge.dev/r/react/popover.json", "https://uipkge.dev/r/react/calendar.json", "https://uipkge.dev/r/react/dropdown-menu.json", "https://uipkge.dev/r/react/tooltip.json", "https://uipkge.dev/r/react/avatar.json", "https://uipkge.dev/r/react/toggle-group.json", "https://uipkge.dev/r/react/rich-text-editor.json" ], "description": "Full kanban surface: 4 status columns, drag-and-drop card movement with insertion indicator, board/list view toggle, search + priority + assignee filters, collapsible columns, click-to-open task detail Sheet (comments, subtasks, files), full-form Add Task Dialog with priority/assignee/due-date/tags/subtasks. Mega-block: ships 14 React files (KanbanBoard + 6 kanban-* views + 7 small badges/lists). Bind with columns/onColumnsChange; consumer owns the columns array so swapping the in-memory store for Drizzle/Postgres is a one-line change. Auto-pulls the use-kanban hook (types + configs + helpers) and kanban-data lib (seed columns).", "categories": [ "dashboard", "data" ] }