@etus/ui 0.1.0

package/src/components/workflow/KanbanBoard/KanbanBoard.tsx

@@ -0,0 +1,806 @@
+import type {
+  KanbanBoardProps,
+  KanbanCardProps,
+  KanbanColumn,
+  KanbanColumnProps,
+  KanbanItem,
+} from "./KanbanBoard.types"
+import type { DragEndEvent, DragOverEvent, DragStartEvent, UniqueIdentifier } from "@dnd-kit/core"
+import type { KeyboardEvent } from "react"
+
+import { horizontalListSortingStrategy, SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable"
+import {
+  Calendar,
+  ChevronDown,
+  ChevronRight,
+  GripVertical,
+  MessageSquare,
+  Paperclip,
+  Plus,
+  Search,
+} from "lucide-react"
+import { useId, useMemo, useState } from "react"
+
+import { cn } from "../../../lib/utils"
+import {
+  DndContext,
+  DragHandle,
+  DragOverlay,
+  Droppable,
+  SortableItem,
+} from "../../advanced/DragAndDrop"
+import { Avatar, AvatarFallback, AvatarImage } from "../../primitives/Avatar"
+import { Badge } from "../../primitives/Badge"
+import { Button } from "../../primitives/Button"
+import {
+  kanbanAddButtonVariants,
+  kanbanBoardVariants,
+  kanbanCardDescriptionVariants,
+  kanbanCardMetaVariants,
+  kanbanCardTitleVariants,
+  kanbanCardVariants,
+  kanbanColumnContentVariants,
+  kanbanColumnHeaderVariants,
+  kanbanColumnVariants,
+  kanbanLabelVariants,
+  kanbanSearchVariants,
+} from "./KanbanBoard.variants"
+
+// ============================================
+// HELPER FUNCTIONS
+// ============================================
+
+/**
+ * Get initials from a name
+ */
+function getInitials(name: string): string {
+  return name
+    .split(" ")
+    .map((part) => part[0])
+    .join("")
+    .toUpperCase()
+    .slice(0, 2)
+}
+
+/**
+ * Format date for display
+ */
+function formatDueDate(date: Date): string {
+  const now = new Date()
+  const diff = date.getTime() - now.getTime()
+  const days = Math.ceil(diff / (1000 * 60 * 60 * 24))
+
+  if (days < 0) return "Overdue"
+  if (days === 0) return "Today"
+  if (days === 1) return "Tomorrow"
+  if (days <= 7) return `${String(days)} days`
+  return date.toLocaleDateString()
+}
+
+/**
+ * Get WIP status for column
+ */
+function getWipStatus(
+  itemCount: number,
+  wipLimit?: number
+): "exceeded" | "normal" | "warning" {
+  if (!wipLimit) return "normal"
+  if (itemCount >= wipLimit) return "exceeded"
+  if (itemCount >= wipLimit - 1) return "warning"
+  return "normal"
+}
+
+// ============================================
+// KANBAN CARD
+// ============================================
+
+/**
+ * KanbanCard displays an individual task item
+ */
+// eslint-disable-next-line sonarjs/cognitive-complexity -- Complexity inherent to rendering multiple optional card elements
+function KanbanCard({
+  className,
+  isDragging = false,
+  item,
+  onClick,
+  onDelete: _onDelete,
+}: KanbanCardProps) {
+  const cardId = useId()
+  const hasMeta = Boolean(
+    item.assignees?.length ??
+    item.labels?.length ??
+    item.dueDate ??
+    item.comments ??
+    item.attachments ??
+    item.subtasks
+  )
+
+  const handleClick = () => {
+    onClick?.({ item })
+  }
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault()
+      handleClick()
+    }
+  }
+
+  return (
+    <div
+      aria-describedby={item.description ? `${cardId}-desc` : undefined}
+      aria-label={item.title}
+      className={cn(kanbanCardVariants({ isDragging, priority: item.priority ?? null }), className)}
+      data-slot="kanban-card"
+      role="listitem"
+      tabIndex={0}
+      onClick={handleClick}
+      onKeyDown={handleKeyDown}
+    >
+      {/* Labels */}
+      {item.labels && item.labels.length > 0 ? (
+        <div className="flex flex-wrap gap-1" data-slot="kanban-card-labels">
+          {item.labels.slice(0, 3).map((label) => (
+            <span
+              key={label.id}
+              className={kanbanLabelVariants()}
+              style={{ backgroundColor: `${label.color}20`, color: label.color }}
+            >
+              {label.name}
+            </span>
+          ))}
+          {item.labels.length > 3 ? (
+            <span className="text-[10px] text-muted-foreground">
+              +{item.labels.length - 3}
+            </span>
+          ) : null}
+        </div>
+      ) : null}
+
+      {/* Title */}
+      <div className={kanbanCardTitleVariants()} data-slot="kanban-card-title">
+        {item.title}
+      </div>
+
+      {/* Description */}
+      {item.description ? (
+        <div
+          className={kanbanCardDescriptionVariants()}
+          data-slot="kanban-card-description"
+          id={`${cardId}-desc`}
+        >
+          {item.description}
+        </div>
+      ) : null}
+
+      {/* Metadata row */}
+      {hasMeta ? (
+        <div className={kanbanCardMetaVariants()} data-slot="kanban-card-meta">
+          {/* Due date */}
+          {item.dueDate ? (
+            <span
+              className={cn(
+                "flex items-center gap-1",
+                new Date(item.dueDate) < new Date() && "text-destructive"
+              )}
+              title={`Due: ${item.dueDate.toLocaleDateString()}`}
+            >
+              <Calendar className="h-3 w-3" />
+              {formatDueDate(new Date(item.dueDate))}
+            </span>
+          ) : null}
+
+          {/* Subtasks */}
+          {item.subtasks ? (
+            <span className="flex items-center gap-1" title="Subtasks progress">
+              {item.subtasks.completed}/{item.subtasks.total}
+            </span>
+          ) : null}
+
+          {/* Comments */}
+          {item.comments ? (
+            <span className="flex items-center gap-1" title={`${String(item.comments)} comments`}>
+              <MessageSquare className="h-3 w-3" />
+              {item.comments}
+            </span>
+          ) : null}
+
+          {/* Attachments */}
+          {item.attachments ? (
+            <span className="flex items-center gap-1" title={`${String(item.attachments)} attachments`}>
+              <Paperclip className="h-3 w-3" />
+              {item.attachments}
+            </span>
+          ) : null}
+
+          {/* Spacer */}
+          <div className="flex-1" />
+
+          {/* Assignees */}
+          {item.assignees && item.assignees.length > 0 ? (
+            <div className="flex -space-x-1" data-slot="kanban-card-assignees">
+              {item.assignees.slice(0, 3).map((user) => (
+                <Avatar
+                  key={user.id}
+                  className="h-5 w-5 border-2 border-background"
+                  title={user.name}
+                >
+                  {user.avatar ? (
+                    <AvatarImage alt={user.name} src={user.avatar} />
+                  ) : null}
+                  <AvatarFallback className="text-[8px]">
+                    {getInitials(user.name)}
+                  </AvatarFallback>
+                </Avatar>
+              ))}
+              {item.assignees.length > 3 ? (
+                <span className="flex h-5 w-5 items-center justify-center rounded-full bg-muted text-[8px] border-2 border-background">
+                  +{item.assignees.length - 3}
+                </span>
+              ) : null}
+            </div>
+          ) : null}
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+// ============================================
+// KANBAN COLUMN
+// ============================================
+
+/**
+ * KanbanColumn displays a single column with its items
+ */
+function KanbanColumn({
+  allowAddItem = true,
+  className,
+  column,
+  isOver = false,
+  items,
+  onItemAdd,
+  onItemClick,
+  onItemDelete,
+  onToggleCollapse,
+  showColumnCount = true,
+  showWipLimits = true,
+}: KanbanColumnProps) {
+  const columnId = useId()
+  const wipStatus = getWipStatus(items.length, column.wipLimit)
+  const isCollapsed = column.isCollapsed ?? false
+
+  const handleAddItem = () => {
+    onItemAdd?.({ columnId: column.id })
+  }
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      const target = event.currentTarget
+      const cards = [...target.querySelectorAll('[data-slot="kanban-card"]')] as HTMLElement[]
+      const focused = document.activeElement as HTMLElement
+      const currentIndex = cards.indexOf(focused)
+
+      if (currentIndex === -1) {
+        cards[0]?.focus()
+        return
+      }
+
+      const nextIndex = event.key === "ArrowDown"
+        ? Math.min(currentIndex + 1, cards.length - 1)
+        : Math.max(currentIndex - 1, 0)
+
+      const nextElement = cards[nextIndex]
+      nextElement?.focus()
+      event.preventDefault()
+    }
+  }
+
+  // Collapsed column view
+  if (isCollapsed) {
+    return (
+      <div
+        data-collapsed
+        className={cn(kanbanColumnVariants({ isCollapsed: true, isOver: false }), className)}
+        data-slot="kanban-column"
+      >
+        <Button
+          aria-expanded={false}
+          aria-label={`Expand ${column.title}`}
+          className="h-full w-full flex flex-col items-center justify-start pt-3 gap-2"
+          variant="ghost"
+          onClick={onToggleCollapse}
+        >
+          <ChevronRight className="h-4 w-4" />
+          <span
+            className="text-sm font-semibold writing-mode-vertical"
+            style={{ writingMode: "vertical-rl" }}
+          >
+            {column.title}
+          </span>
+          {showColumnCount ? (
+            <Badge className="mt-2" color="muted" type="pill-color">
+              {items.length}
+            </Badge>
+          ) : null}
+        </Button>
+      </div>
+    )
+  }
+
+  return (
+    <Droppable data={{ type: "column", column }} id={column.id}>
+      {({ isOver: droppableIsOver }) => (
+        <div
+          className={cn(
+            kanbanColumnVariants({ isCollapsed: false, isOver: isOver || droppableIsOver }),
+            className
+          )}
+          aria-label={`${column.title} column`}
+          data-slot="kanban-column"
+          role="list"
+          onKeyDown={handleKeyDown}
+        >
+          {/* Column Header */}
+          <div
+            className={kanbanColumnHeaderVariants({ wipStatus })}
+            data-slot="kanban-column-header"
+          >
+            <div className="flex items-center gap-2">
+              {column.color ? (
+                <div
+                  className="h-3 w-3 rounded-full"
+                  style={{ backgroundColor: column.color }}
+                />
+              ) : null}
+              <span className="text-sm font-semibold">{column.title}</span>
+              {showColumnCount ? (
+                <Badge color="muted" data-slot="column-count" type="pill-color">
+                  {items.length}
+                </Badge>
+              ) : null}
+              {showWipLimits && column.wipLimit ? (
+                <span
+                  className="text-xs"
+                  data-slot="wip-indicator"
+                  title={`WIP Limit: ${String(column.wipLimit)}`}
+                >
+                  /{column.wipLimit}
+                </span>
+              ) : null}
+            </div>
+            {onToggleCollapse ? (
+              <Button
+                aria-expanded={true}
+                aria-label={`Collapse ${column.title}`}
+                className="h-6 w-6 p-0"
+                size="sm"
+                variant="ghost"
+                onClick={onToggleCollapse}
+              >
+                <ChevronDown className="h-4 w-4" />
+              </Button>
+            ) : null}
+          </div>
+
+          {/* Cards */}
+          <SortableContext
+            items={items.map((i) => i.id)}
+            strategy={verticalListSortingStrategy}
+          >
+            <div
+              aria-labelledby={columnId}
+              className={kanbanColumnContentVariants()}
+              data-slot="kanban-column-content"
+            >
+              {items.map((item) => (
+                <SortableItem
+                  key={item.id}
+                  data={{ type: "item", item, columnId: column.id }}
+                  id={item.id}
+                >
+                  {({ isDragging }) => (
+                    <div className="relative">
+                      <DragHandle
+                        aria-label={`Drag ${item.title}`}
+                        className="absolute left-1 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity cursor-grab active:cursor-grabbing h-6 w-6 flex items-center justify-center"
+                      >
+                        <GripVertical className="h-4 w-4 text-muted-foreground" />
+                      </DragHandle>
+                      <KanbanCard
+                        isDragging={isDragging}
+                        item={item}
+                        onClick={onItemClick}
+                        onDelete={onItemDelete}
+                      />
+                    </div>
+                  )}
+                </SortableItem>
+              ))}
+
+              {/* Add card button */}
+              {allowAddItem ? (
+                <button
+                  aria-label={`Add item to ${column.title}`}
+                  className={kanbanAddButtonVariants()}
+                  type="button"
+                  onClick={handleAddItem}
+                >
+                  <Plus className="h-4 w-4" />
+                  Add card
+                </button>
+              ) : null}
+            </div>
+          </SortableContext>
+        </div>
+      )}
+    </Droppable>
+  )
+}
+
+// ============================================
+// KANBAN BOARD
+// ============================================
+
+/**
+ * KanbanBoard component for visual task management.
+ *
+ * Organizes items into columns representing workflow stages with drag-and-drop
+ * support for moving items between columns.
+ *
+ * @example
+ * ```tsx
+ * const columns = [
+ *   { id: 'todo', title: 'To Do' },
+ *   { id: 'doing', title: 'In Progress', wipLimit: 3 },
+ *   { id: 'done', title: 'Done' },
+ * ]
+ *
+ * const items = [
+ *   { id: '1', title: 'Task 1', columnId: 'todo', order: 0 },
+ *   { id: '2', title: 'Task 2', columnId: 'doing', order: 0 },
+ * ]
+ *
+ * <KanbanBoard
+ *   columns={columns}
+ *   items={items}
+ *   onItemMove={({ itemId, fromColumn, toColumn }) => {
+ *     console.log(`Moved ${itemId} from ${fromColumn} to ${toColumn}`)
+ *   }}
+ * />
+ * ```
+ */
+function KanbanBoard({
+  allowAddColumn = false,
+  allowAddItem = true,
+  allowColumnReorder = false,
+  className,
+  columns,
+  columnWidth = 288,
+  filterBy,
+  groupBy,
+  items,
+  onColumnAdd,
+  onColumnDelete: _onColumnDelete,
+  onColumnReorder: _onColumnReorder,
+  onColumnUpdate: _onColumnUpdate,
+  onItemAdd,
+  onItemClick,
+  onItemDelete,
+  onItemMove,
+  onItemUpdate: _onItemUpdate,
+  searchable = false,
+  showColumnCount = true,
+  showWipLimits = true,
+  variant = "default",
+  layout = "horizontal",
+  ...props
+}: KanbanBoardProps) {
+  const _boardId = useId()
+  const [searchQuery, setSearchQuery] = useState("")
+  const [activeId, setActiveId] = useState<null | UniqueIdentifier>(null)
+  const [collapsedColumns, setCollapsedColumns] = useState<Set<string>>(() => new Set())
+
+  // Filter items based on search and filters
+  const filteredItems = useMemo(() => {
+    let result = [...items]
+
+    // Apply search filter
+    if (searchQuery) {
+      const query = searchQuery.toLowerCase()
+      result = result.filter(
+        (item) =>
+          item.title.toLowerCase().includes(query) ||
+          item.description?.toLowerCase().includes(query)
+      )
+    }
+
+    // Apply filter config
+    if (filterBy) {
+      if (filterBy.priority?.length) {
+        result = result.filter((item) =>
+          item.priority && filterBy.priority?.includes(item.priority)
+        )
+      }
+      if (filterBy.assignees?.length) {
+        result = result.filter((item) =>
+          item.assignees?.some((a) => filterBy.assignees?.includes(a.id))
+        )
+      }
+      if (filterBy.labels?.length) {
+        result = result.filter((item) =>
+          item.labels?.some((l) => filterBy.labels?.includes(l.id))
+        )
+      }
+      if (filterBy.dueDate) {
+        result = result.filter((item) => {
+          if (!item.dueDate) return false
+          const date = new Date(item.dueDate)
+          if (filterBy.dueDate?.from && date < filterBy.dueDate.from) return false
+          if (filterBy.dueDate?.to && date > filterBy.dueDate.to) return false
+          return true
+        })
+      }
+    }
+
+    return result
+  }, [items, searchQuery, filterBy])
+
+  // Get items for a specific column
+  const getColumnItems = (columnId: string) => {
+    return filteredItems
+      .filter((item) => item.columnId === columnId)
+      .sort((a, b) => a.order - b.order)
+  }
+
+  // Get the active item being dragged
+  const activeItem = useMemo(() => {
+    if (!activeId) return null
+    return items.find((item) => item.id === activeId) ?? null
+  }, [activeId, items])
+
+  // Toggle column collapse
+  const handleToggleCollapse = (columnId: string) => {
+    setCollapsedColumns((prev) => {
+      const next = new Set(prev)
+      if (next.has(columnId)) {
+        next.delete(columnId)
+      } else {
+        next.add(columnId)
+      }
+      return next
+    })
+  }
+
+  // Drag handlers
+  const handleDragStart = (event: DragStartEvent) => {
+    setActiveId(event.active.id)
+  }
+
+  const handleDragOver = (_event: DragOverEvent) => {
+    // Could implement preview of drop here
+  }
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event
+    setActiveId(null)
+
+    if (!over) return
+
+    const activeData = active.data.current as undefined | { columnId?: string; item?: KanbanItem; type?: string }
+    const overData = over.data.current as undefined | { column?: KanbanColumn; columnId?: string; item?: KanbanItem; type?: string }
+
+    if (activeData?.type !== "item") return
+
+    const activeItem = activeData.item
+    if (!activeItem) return
+
+    let toColumn: string
+    let index = 0
+
+    if (overData?.type === "column") {
+      // Dropped on column
+      toColumn = overData.column?.id ?? ""
+      index = getColumnItems(toColumn).length
+    } else if (overData?.type === "item") {
+      // Dropped on item
+      toColumn = overData.item?.columnId ?? ""
+      const targetItems = getColumnItems(toColumn)
+      const overItem = overData.item
+      index = overItem ? targetItems.findIndex((i) => i.id === overItem.id) : 0
+    } else {
+      return
+    }
+
+    if (activeItem.columnId !== toColumn || active.id !== over.id) {
+      onItemMove?.({
+        fromColumn: activeItem.columnId,
+        index,
+        itemId: activeItem.id,
+        toColumn,
+      })
+    }
+  }
+
+  const handleDragCancel = () => {
+    setActiveId(null)
+  }
+
+  // Prepare columns with collapse state
+  const columnsWithState = columns.map((col) => ({
+    ...col,
+    isCollapsed: collapsedColumns.has(col.id) || col.isCollapsed,
+  }))
+
+  // Group items by swimlane if groupBy is specified
+  const swimlanes = useMemo(() => {
+    if (!groupBy || variant !== "swimlanes") return null
+
+    const groups = new Map<string, KanbanItem[]>()
+    for (const item of filteredItems) {
+      const key = (item.customFields?.[groupBy] as string | undefined) ?? "Ungrouped"
+      const group = groups.get(key) ?? []
+      group.push(item)
+      groups.set(key, group)
+    }
+    return groups
+  }, [filteredItems, groupBy, variant])
+
+  // Column width style
+  const widthValue = typeof columnWidth === "number" ? `${String(columnWidth)}px` : columnWidth
+  const columnStyle = {
+    minWidth: widthValue,
+    width: widthValue,
+  }
+
+  return (
+    <div
+      aria-label="Kanban board"
+      className="flex flex-col gap-4"
+      data-slot="kanban-board-wrapper"
+      role="region"
+      {...props}
+    >
+      {/* Search bar */}
+      {searchable ? (
+        <div className={kanbanSearchVariants()} data-slot="kanban-search">
+          <Search className="h-4 w-4 text-muted-foreground" />
+          <input
+            aria-label="Search items"
+            className="flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+            placeholder="Search items..."
+            type="text"
+            value={searchQuery}
+            onChange={(e) => { setSearchQuery(e.target.value); }}
+          />
+        </div>
+      ) : null}
+
+      {/* Board */}
+      <DndContext
+        className={cn(kanbanBoardVariants({ layout, variant }), className)}
+        onDragCancel={handleDragCancel}
+        onDragEnd={handleDragEnd}
+        onDragOver={handleDragOver}
+        onDragStart={handleDragStart}
+      >
+        {variant === "swimlanes" && swimlanes ? (
+          // Swimlanes layout
+          <div className="flex flex-col gap-6" data-slot="kanban-swimlanes">
+            {[...swimlanes.entries()].map(([lane, _laneItems]) => (
+              <div key={lane} className="flex flex-col gap-2">
+                <div className="text-sm font-semibold text-muted-foreground">
+                  {lane}
+                </div>
+                <div className="flex gap-4 overflow-x-auto">
+                  <SortableContext
+                    disabled={!allowColumnReorder}
+                    items={columnsWithState.map((c) => c.id)}
+                    strategy={horizontalListSortingStrategy}
+                  >
+                    {columnsWithState.map((column) => (
+                      <div key={column.id} style={columnStyle}>
+                        <KanbanColumn
+                          items={getColumnItems(column.id).filter(
+                            (item) => ((item.customFields?.[groupBy ?? ""] as string | undefined) ?? "Ungrouped") === lane
+                          )}
+                          allowAddItem={allowAddItem}
+                          column={column}
+                          showColumnCount={showColumnCount}
+                          showWipLimits={showWipLimits}
+                          onItemAdd={onItemAdd}
+                          onItemClick={onItemClick}
+                          onItemDelete={onItemDelete}
+                          onToggleCollapse={() => { handleToggleCollapse(column.id); }}
+                        />
+                      </div>
+                    ))}
+                  </SortableContext>
+                </div>
+              </div>
+            ))}
+          </div>
+        ) : (
+          // Standard layout
+          <SortableContext
+            disabled={!allowColumnReorder}
+            items={columnsWithState.map((c) => c.id)}
+            strategy={horizontalListSortingStrategy}
+          >
+            {columnsWithState.map((column) => (
+              <div key={column.id} style={column.isCollapsed ? undefined : columnStyle}>
+                <KanbanColumn
+                  allowAddItem={allowAddItem}
+                  column={column}
+                  items={getColumnItems(column.id)}
+                  showColumnCount={showColumnCount}
+                  showWipLimits={showWipLimits}
+                  onItemAdd={onItemAdd}
+                  onItemClick={onItemClick}
+                  onItemDelete={onItemDelete}
+                  onToggleCollapse={() => { handleToggleCollapse(column.id); }}
+                />
+              </div>
+            ))}
+
+            {/* Add column button */}
+            {allowAddColumn ? (
+              <button
+                className={cn(
+                  kanbanAddButtonVariants(),
+                  "min-w-[200px] h-[200px] flex-col"
+                )}
+                aria-label="Add column"
+                type="button"
+                onClick={onColumnAdd}
+              >
+                <Plus className="h-6 w-6" />
+                Add column
+              </button>
+            ) : null}
+          </SortableContext>
+        )}
+
+        {/* Drag overlay */}
+        <DragOverlay>
+          {activeItem ? (
+            <div
+              className="opacity-90 rotate-3"
+              style={columnStyle}
+            >
+              <KanbanCard isDragging item={activeItem} />
+            </div>
+          ) : null}
+        </DragOverlay>
+      </DndContext>
+    </div>
+  )
+}
+
+// ============================================
+// EXPORTS
+// ============================================
+
+export {
+  KanbanBoard,
+  kanbanBoardVariants,
+  KanbanCard,
+  kanbanCardVariants,
+  kanbanColumnVariants,
+}
+
+export type {
+  ItemAddPayload,
+  ItemClickPayload,
+  ItemDeletePayload,
+  ItemMovePayload,
+  KanbanBoardProps,
+  KanbanCardProps,
+  KanbanColumn,
+  KanbanColumnProps,
+  KanbanFilterConfig,
+  KanbanItem,
+  KanbanLabel,
+  KanbanSubtasks,
+  KanbanUser,
+} from "./KanbanBoard.types"