Kanban board

1type Card = { id: string; title: string };2type Column = { id: string; title: string; cardIds: string[] };3type Board = { columns: Column[]; cards: Record<string, Card>; version: number };4type Target = { columnId: string; index: number };5type DragState = null | { cardId: string; origin: Target; over: Target | null };

1import { useRef, useState } from "react";2
3type Card = { id: string; title: string };4type Column = { id: string; title: string; cardIds: string[] };5type Board = {6  columnOrder: string[];7  columns: Record<string, Column>;8  cards: Record<string, Card>;9};10
11// Pure. Remove cardId from wherever it is, then insert it into toColumn12// directly before beforeId (or at the end when beforeId is null).13function moveCard(board: Board, cardId: string, toColumn: string, beforeId: string | null): Board {14  const columns: Record<string, Column> = {};15  for (const [id, column] of Object.entries(board.columns)) {16    columns[id] = { ...column, cardIds: column.cardIds.filter((c) => c !== cardId) };17  }18  const target = columns[toColumn].cardIds;19  const at = beforeId ? target.indexOf(beforeId) : target.length;20  target.splice(at === -1 ? target.length : at, 0, cardId);21  return { ...board, columns };22}23
24// Keyboard step: move one place up or down within the same column.25function nudge(board: Board, cardId: string, columnId: string, direction: 1 | -1): Board {26  const ids = board.columns[columnId].cardIds;27  const from = ids.indexOf(cardId);28  const to = from + direction;29  if (to < 0 || to >= ids.length) return board;30  const beforeId = direction > 0 ? ids[to + 1] ?? null : ids[to];31  return moveCard(board, cardId, columnId, beforeId);32}33
34export function Kanban({ initial }: { initial: Board }) {35  const [board, setBoard] = useState(initial);36  const [dragId, setDragId] = useState<string | null>(null);37  const liveRef = useRef<HTMLParagraphElement>(null);38
39  const announce = (message: string) => {40    if (liveRef.current) liveRef.current.textContent = message;41  };42
43  function drop(toColumn: string, beforeId: string | null) {44    if (!dragId) return;45    setBoard((b) => moveCard(b, dragId, toColumn, beforeId));46    announce(board.cards[dragId].title + " moved to " + board.columns[toColumn].title);47    setDragId(null);48  }49
50  function onCardKeyDown(event: React.KeyboardEvent, cardId: string, columnId: string) {51    const colIndex = board.columnOrder.indexOf(columnId);52    if (event.key === "ArrowUp" || event.key === "ArrowDown") {53      event.preventDefault();54      setBoard((b) => nudge(b, cardId, columnId, event.key === "ArrowDown" ? 1 : -1));55      announce("Moved " + (event.key === "ArrowDown" ? "down" : "up"));56    } else if (event.key === "ArrowRight" && colIndex < board.columnOrder.length - 1) {57      event.preventDefault();58      const to = board.columnOrder[colIndex + 1];59      setBoard((b) => moveCard(b, cardId, to, null));60      announce("Moved to " + board.columns[to].title);61    } else if (event.key === "ArrowLeft" && colIndex > 0) {62      event.preventDefault();63      const to = board.columnOrder[colIndex - 1];64      setBoard((b) => moveCard(b, cardId, to, null));65      announce("Moved to " + board.columns[to].title);66    }67  }68
69  return (70    <div className="board">71      {board.columnOrder.map((columnId) => {72        const column = board.columns[columnId];73        return (74          <section75            key={columnId}76            aria-label={column.title}77            onDragOver={(event) => event.preventDefault()}78            onDrop={() => drop(columnId, null)}79          >80            <h2>{column.title}</h2>81            <ul>82              {column.cardIds.map((cardId) => (83                <li84                  key={cardId}85                  draggable86                  tabIndex={0}87                  aria-roledescription="Draggable card"88                  onDragStart={() => setDragId(cardId)}89                  onDragEnd={() => setDragId(null)}90                  onDragOver={(event) => event.preventDefault()}91                  onDrop={(event) => { event.stopPropagation(); drop(columnId, cardId); }}92                  onKeyDown={(event) => onCardKeyDown(event, cardId, columnId)}93                >94                  {board.cards[cardId].title}95                </li>96              ))}97            </ul>98          </section>99        );100      })}101      <p ref={liveRef} role="status" aria-live="polite" className="sr-only" />102    </div>103  );104}