@wakastellar/ui 2.0.0 → 2.1.0

package/src/blocks/kanban-board/index.tsx

@@ -0,0 +1,779 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils"
+import { Button } from "../../components/button"
+import { Input } from "../../components/input"
+import { Badge } from "../../components/badge"
+import { Avatar, AvatarFallback, AvatarImage } from "../../components/avatar"
+import { Card, CardContent, CardHeader } from "../../components/card"
+import { Textarea } from "../../components/textarea"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../../components/dropdown-menu"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "../../components/dialog"
+import {
+  Plus,
+  MoreHorizontal,
+  Edit,
+  Trash2,
+  Calendar,
+  Tag,
+  User,
+  GripVertical,
+  X,
+  Check,
+  Clock,
+  AlertCircle,
+} from "lucide-react"
+
+// ============================================
+// TYPES
+// ============================================
+
+export type KanbanCardPriority = "low" | "medium" | "high" | "urgent"
+
+export interface KanbanCardLabel {
+  id: string
+  name: string
+  color: string
+}
+
+export interface KanbanCardAssignee {
+  id: string
+  name: string
+  avatar?: string
+}
+
+export interface KanbanCard {
+  id: string
+  title: string
+  description?: string
+  priority?: KanbanCardPriority
+  labels?: KanbanCardLabel[]
+  assignees?: KanbanCardAssignee[]
+  dueDate?: Date | string
+  createdAt?: Date | string
+  metadata?: Record<string, unknown>
+}
+
+export interface KanbanColumn {
+  id: string
+  title: string
+  cards: KanbanCard[]
+  color?: string
+  limit?: number
+}
+
+export interface WakaKanbanBoardProps {
+  /** Colonnes du tableau */
+  columns: KanbanColumn[]
+  /** Callback lors du changement des colonnes */
+  onColumnsChange?: (columns: KanbanColumn[]) => void
+  /** Callback lors du clic sur une carte */
+  onCardClick?: (card: KanbanCard, columnId: string) => void
+  /** Callback lors de l'ajout d'une carte */
+  onCardAdd?: (columnId: string, card: Partial<KanbanCard>) => void
+  /** Callback lors de la modification d'une carte */
+  onCardEdit?: (cardId: string, columnId: string, data: Partial<KanbanCard>) => void
+  /** Callback lors de la suppression d'une carte */
+  onCardDelete?: (cardId: string, columnId: string) => void
+  /** Callback lors du déplacement d'une carte */
+  onCardMove?: (cardId: string, fromColumnId: string, toColumnId: string, index: number) => void
+  /** Callback lors de l'ajout d'une colonne */
+  onColumnAdd?: (column: Partial<KanbanColumn>) => void
+  /** Callback lors de la modification d'une colonne */
+  onColumnEdit?: (columnId: string, data: Partial<KanbanColumn>) => void
+  /** Callback lors de la suppression d'une colonne */
+  onColumnDelete?: (columnId: string) => void
+  /** Afficher le bouton d'ajout de carte */
+  showAddCard?: boolean
+  /** Afficher le bouton d'ajout de colonne */
+  showAddColumn?: boolean
+  /** Afficher le nombre de cartes */
+  showCardCount?: boolean
+  /** Afficher les assignés */
+  showAssignees?: boolean
+  /** Afficher les labels */
+  showLabels?: boolean
+  /** Afficher la priorité */
+  showPriority?: boolean
+  /** Afficher la date d'échéance */
+  showDueDate?: boolean
+  /** Autoriser le drag & drop */
+  draggable?: boolean
+  /** Labels disponibles */
+  availableLabels?: KanbanCardLabel[]
+  /** Assignés disponibles */
+  availableAssignees?: KanbanCardAssignee[]
+  /** Classes CSS additionnelles */
+  className?: string
+}
+
+// ============================================
+// PRIORITY CONFIG
+// ============================================
+
+const priorityConfig: Record<KanbanCardPriority, { label: string; color: string; icon: React.ElementType }> = {
+  low: { label: "Basse", color: "bg-gray-500", icon: Clock },
+  medium: { label: "Moyenne", color: "bg-blue-500", icon: Clock },
+  high: { label: "Haute", color: "bg-orange-500", icon: AlertCircle },
+  urgent: { label: "Urgente", color: "bg-red-500", icon: AlertCircle },
+}
+
+// ============================================
+// SUB-COMPONENTS
+// ============================================
+
+interface KanbanCardComponentProps {
+  card: KanbanCard
+  columnId: string
+  showAssignees: boolean
+  showLabels: boolean
+  showPriority: boolean
+  showDueDate: boolean
+  draggable: boolean
+  onCardClick?: (card: KanbanCard, columnId: string) => void
+  onCardEdit?: (cardId: string, columnId: string, data: Partial<KanbanCard>) => void
+  onCardDelete?: (cardId: string, columnId: string) => void
+  onDragStart?: (e: React.DragEvent, cardId: string, columnId: string) => void
+}
+
+function KanbanCardComponent({
+  card,
+  columnId,
+  showAssignees,
+  showLabels,
+  showPriority,
+  showDueDate,
+  draggable,
+  onCardClick,
+  onCardEdit,
+  onCardDelete,
+  onDragStart,
+}: KanbanCardComponentProps) {
+  const isOverdue = React.useMemo(() => {
+    if (!card.dueDate) return false
+    const due = typeof card.dueDate === "string" ? new Date(card.dueDate) : card.dueDate
+    return due < new Date()
+  }, [card.dueDate])
+
+  const formatDueDate = (date: Date | string): string => {
+    const d = typeof date === "string" ? new Date(date) : date
+    return d.toLocaleDateString("fr-FR", { day: "numeric", month: "short" })
+  }
+
+  return (
+    <Card
+      className={cn(
+        "cursor-pointer hover:shadow-md transition-shadow",
+        draggable && "cursor-grab active:cursor-grabbing"
+      )}
+      draggable={draggable}
+      onDragStart={(e) => onDragStart?.(e, card.id, columnId)}
+      onClick={() => onCardClick?.(card, columnId)}
+    >
+      <CardContent className="p-3 space-y-2">
+        {/* Labels */}
+        {showLabels && card.labels && card.labels.length > 0 && (
+          <div className="flex flex-wrap gap-1">
+            {card.labels.map((label) => (
+              <div
+                key={label.id}
+                className="h-1.5 w-8 rounded-full"
+                style={{ backgroundColor: label.color }}
+                title={label.name}
+              />
+            ))}
+          </div>
+        )}
+
+        {/* Title */}
+        <div className="flex items-start justify-between gap-2">
+          <h4 className="text-sm font-medium leading-tight">{card.title}</h4>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild onClick={(e) => e.stopPropagation()}>
+              <Button variant="ghost" size="icon" className="h-6 w-6 flex-shrink-0">
+                <MoreHorizontal className="h-3 w-3" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem onClick={(e) => { e.stopPropagation(); onCardClick?.(card, columnId); }}>
+                <Edit className="mr-2 h-4 w-4" />
+                Modifier
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem
+                onClick={(e) => { e.stopPropagation(); onCardDelete?.(card.id, columnId); }}
+                className="text-destructive"
+              >
+                <Trash2 className="mr-2 h-4 w-4" />
+                Supprimer
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+
+        {/* Description preview */}
+        {card.description && (
+          <p className="text-xs text-muted-foreground line-clamp-2">
+            {card.description}
+          </p>
+        )}
+
+        {/* Footer */}
+        <div className="flex items-center justify-between pt-1">
+          <div className="flex items-center gap-2">
+            {/* Priority */}
+            {showPriority && card.priority && (
+              <div
+                className={cn(
+                  "h-2 w-2 rounded-full",
+                  priorityConfig[card.priority].color
+                )}
+                title={priorityConfig[card.priority].label}
+              />
+            )}
+
+            {/* Due date */}
+            {showDueDate && card.dueDate && (
+              <Badge
+                variant={isOverdue ? "destructive" : "outline"}
+                className="text-xs px-1.5 py-0"
+              >
+                <Calendar className="h-3 w-3 mr-1" />
+                {formatDueDate(card.dueDate)}
+              </Badge>
+            )}
+          </div>
+
+          {/* Assignees */}
+          {showAssignees && card.assignees && card.assignees.length > 0 && (
+            <div className="flex -space-x-1">
+              {card.assignees.slice(0, 3).map((assignee) => (
+                <Avatar key={assignee.id} className="h-5 w-5 border-2 border-background">
+                  <AvatarImage src={assignee.avatar} />
+                  <AvatarFallback className="text-[8px]">
+                    {assignee.name.charAt(0)}
+                  </AvatarFallback>
+                </Avatar>
+              ))}
+              {card.assignees.length > 3 && (
+                <div className="h-5 w-5 rounded-full bg-muted flex items-center justify-center text-[8px] border-2 border-background">
+                  +{card.assignees.length - 3}
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+interface KanbanColumnComponentProps {
+  column: KanbanColumn
+  showCardCount: boolean
+  showAddCard: boolean
+  showAssignees: boolean
+  showLabels: boolean
+  showPriority: boolean
+  showDueDate: boolean
+  draggable: boolean
+  onCardClick?: (card: KanbanCard, columnId: string) => void
+  onCardAdd?: (columnId: string, card: Partial<KanbanCard>) => void
+  onCardEdit?: (cardId: string, columnId: string, data: Partial<KanbanCard>) => void
+  onCardDelete?: (cardId: string, columnId: string) => void
+  onColumnEdit?: (columnId: string, data: Partial<KanbanColumn>) => void
+  onColumnDelete?: (columnId: string) => void
+  onDragStart?: (e: React.DragEvent, cardId: string, columnId: string) => void
+  onDragOver?: (e: React.DragEvent) => void
+  onDrop?: (e: React.DragEvent, columnId: string) => void
+}
+
+function KanbanColumnComponent({
+  column,
+  showCardCount,
+  showAddCard,
+  showAssignees,
+  showLabels,
+  showPriority,
+  showDueDate,
+  draggable,
+  onCardClick,
+  onCardAdd,
+  onCardEdit,
+  onCardDelete,
+  onColumnEdit,
+  onColumnDelete,
+  onDragStart,
+  onDragOver,
+  onDrop,
+}: KanbanColumnComponentProps) {
+  const [isAddingCard, setIsAddingCard] = React.useState(false)
+  const [newCardTitle, setNewCardTitle] = React.useState("")
+  const [isEditingTitle, setIsEditingTitle] = React.useState(false)
+  const [editedTitle, setEditedTitle] = React.useState(column.title)
+
+  const handleAddCard = () => {
+    if (newCardTitle.trim()) {
+      onCardAdd?.(column.id, { title: newCardTitle.trim() })
+      setNewCardTitle("")
+      setIsAddingCard(false)
+    }
+  }
+
+  const handleSaveTitle = () => {
+    if (editedTitle.trim() && editedTitle !== column.title) {
+      onColumnEdit?.(column.id, { title: editedTitle.trim() })
+    }
+    setIsEditingTitle(false)
+  }
+
+  const isOverLimit = column.limit && column.cards.length >= column.limit
+
+  return (
+    <div
+      className="flex flex-col w-72 flex-shrink-0 bg-muted/50 rounded-lg"
+      onDragOver={onDragOver}
+      onDrop={(e) => onDrop?.(e, column.id)}
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between p-3 border-b">
+        <div className="flex items-center gap-2">
+          {column.color && (
+            <div
+              className="h-3 w-3 rounded-full"
+              style={{ backgroundColor: column.color }}
+            />
+          )}
+          {isEditingTitle ? (
+            <div className="flex items-center gap-1">
+              <Input
+                value={editedTitle}
+                onChange={(e) => setEditedTitle(e.target.value)}
+                className="h-7 text-sm font-semibold"
+                autoFocus
+                onBlur={handleSaveTitle}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") handleSaveTitle()
+                  if (e.key === "Escape") setIsEditingTitle(false)
+                }}
+              />
+            </div>
+          ) : (
+            <h3
+              className="font-semibold text-sm cursor-pointer"
+              onClick={() => setIsEditingTitle(true)}
+            >
+              {column.title}
+            </h3>
+          )}
+          {showCardCount && (
+            <Badge variant="secondary" className="text-xs">
+              {column.cards.length}
+              {column.limit && `/${column.limit}`}
+            </Badge>
+          )}
+        </div>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="icon" className="h-7 w-7">
+              <MoreHorizontal className="h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem onClick={() => setIsEditingTitle(true)}>
+              <Edit className="mr-2 h-4 w-4" />
+              Renommer
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              onClick={() => onColumnDelete?.(column.id)}
+              className="text-destructive"
+            >
+              <Trash2 className="mr-2 h-4 w-4" />
+              Supprimer
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+
+      {/* Cards */}
+      <div className="flex-1 p-2 space-y-2 min-h-[200px] overflow-y-auto">
+        {column.cards.map((card) => (
+          <KanbanCardComponent
+            key={card.id}
+            card={card}
+            columnId={column.id}
+            showAssignees={showAssignees}
+            showLabels={showLabels}
+            showPriority={showPriority}
+            showDueDate={showDueDate}
+            draggable={draggable}
+            onCardClick={onCardClick}
+            onCardEdit={onCardEdit}
+            onCardDelete={onCardDelete}
+            onDragStart={onDragStart}
+          />
+        ))}
+
+        {/* Add card form */}
+        {isAddingCard && (
+          <Card className="p-2">
+            <Textarea
+              placeholder="Titre de la carte..."
+              value={newCardTitle}
+              onChange={(e) => setNewCardTitle(e.target.value)}
+              className="min-h-[60px] text-sm"
+              autoFocus
+            />
+            <div className="flex gap-2 mt-2">
+              <Button size="sm" onClick={handleAddCard}>
+                Ajouter
+              </Button>
+              <Button
+                size="sm"
+                variant="ghost"
+                onClick={() => {
+                  setIsAddingCard(false)
+                  setNewCardTitle("")
+                }}
+              >
+                <X className="h-4 w-4" />
+              </Button>
+            </div>
+          </Card>
+        )}
+      </div>
+
+      {/* Add card button */}
+      {showAddCard && !isAddingCard && !isOverLimit && (
+        <div className="p-2 border-t">
+          <Button
+            variant="ghost"
+            size="sm"
+            className="w-full justify-start"
+            onClick={() => setIsAddingCard(true)}
+          >
+            <Plus className="h-4 w-4 mr-2" />
+            Ajouter une carte
+          </Button>
+        </div>
+      )}
+
+      {isOverLimit && (
+        <div className="p-2 border-t text-center text-xs text-muted-foreground">
+          Limite atteinte
+        </div>
+      )}
+    </div>
+  )
+}
+
+// ============================================
+// MAIN COMPONENT
+// ============================================
+
+export function WakaKanbanBoard({
+  columns: externalColumns,
+  onColumnsChange,
+  onCardClick,
+  onCardAdd,
+  onCardEdit,
+  onCardDelete,
+  onCardMove,
+  onColumnAdd,
+  onColumnEdit,
+  onColumnDelete,
+  showAddCard = true,
+  showAddColumn = true,
+  showCardCount = true,
+  showAssignees = true,
+  showLabels = true,
+  showPriority = true,
+  showDueDate = true,
+  draggable = true,
+  availableLabels = [],
+  availableAssignees = [],
+  className,
+}: WakaKanbanBoardProps) {
+  const [columns, setColumns] = React.useState(externalColumns)
+  const [draggedCard, setDraggedCard] = React.useState<{ cardId: string; columnId: string } | null>(null)
+  const [isAddingColumn, setIsAddingColumn] = React.useState(false)
+  const [newColumnTitle, setNewColumnTitle] = React.useState("")
+
+  React.useEffect(() => {
+    setColumns(externalColumns)
+  }, [externalColumns])
+
+  const handleDragStart = (e: React.DragEvent, cardId: string, columnId: string) => {
+    setDraggedCard({ cardId, columnId })
+    e.dataTransfer.effectAllowed = "move"
+  }
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault()
+    e.dataTransfer.dropEffect = "move"
+  }
+
+  const handleDrop = (e: React.DragEvent, toColumnId: string) => {
+    e.preventDefault()
+    if (!draggedCard) return
+
+    const { cardId, columnId: fromColumnId } = draggedCard
+
+    if (fromColumnId === toColumnId) {
+      setDraggedCard(null)
+      return
+    }
+
+    if (onCardMove) {
+      onCardMove(cardId, fromColumnId, toColumnId, 0)
+    } else {
+      // Internal state management
+      const newColumns = columns.map((col) => {
+        if (col.id === fromColumnId) {
+          return {
+            ...col,
+            cards: col.cards.filter((card) => card.id !== cardId),
+          }
+        }
+        if (col.id === toColumnId) {
+          const card = columns
+            .find((c) => c.id === fromColumnId)
+            ?.cards.find((c) => c.id === cardId)
+          if (card) {
+            return {
+              ...col,
+              cards: [...col.cards, card],
+            }
+          }
+        }
+        return col
+      })
+      setColumns(newColumns)
+      onColumnsChange?.(newColumns)
+    }
+
+    setDraggedCard(null)
+  }
+
+  const handleCardAdd = (columnId: string, card: Partial<KanbanCard>) => {
+    if (onCardAdd) {
+      onCardAdd(columnId, card)
+    } else {
+      const newCard: KanbanCard = {
+        id: `card-${Date.now()}`,
+        title: card.title || "Nouvelle carte",
+        ...card,
+      }
+      const newColumns = columns.map((col) => {
+        if (col.id === columnId) {
+          return { ...col, cards: [...col.cards, newCard] }
+        }
+        return col
+      })
+      setColumns(newColumns)
+      onColumnsChange?.(newColumns)
+    }
+  }
+
+  const handleCardDelete = (cardId: string, columnId: string) => {
+    if (onCardDelete) {
+      onCardDelete(cardId, columnId)
+    } else {
+      const newColumns = columns.map((col) => {
+        if (col.id === columnId) {
+          return { ...col, cards: col.cards.filter((card) => card.id !== cardId) }
+        }
+        return col
+      })
+      setColumns(newColumns)
+      onColumnsChange?.(newColumns)
+    }
+  }
+
+  const handleColumnDelete = (columnId: string) => {
+    if (onColumnDelete) {
+      onColumnDelete(columnId)
+    } else {
+      const newColumns = columns.filter((col) => col.id !== columnId)
+      setColumns(newColumns)
+      onColumnsChange?.(newColumns)
+    }
+  }
+
+  const handleAddColumn = () => {
+    if (newColumnTitle.trim()) {
+      const newColumn: KanbanColumn = {
+        id: `column-${Date.now()}`,
+        title: newColumnTitle.trim(),
+        cards: [],
+      }
+      if (onColumnAdd) {
+        onColumnAdd(newColumn)
+      } else {
+        const newColumns = [...columns, newColumn]
+        setColumns(newColumns)
+        onColumnsChange?.(newColumns)
+      }
+      setNewColumnTitle("")
+      setIsAddingColumn(false)
+    }
+  }
+
+  return (
+    <div className={cn("overflow-x-auto", className)}>
+      <div className="flex gap-4 p-4 min-h-[500px]">
+        {columns.map((column) => (
+          <KanbanColumnComponent
+            key={column.id}
+            column={column}
+            showCardCount={showCardCount}
+            showAddCard={showAddCard}
+            showAssignees={showAssignees}
+            showLabels={showLabels}
+            showPriority={showPriority}
+            showDueDate={showDueDate}
+            draggable={draggable}
+            onCardClick={onCardClick}
+            onCardAdd={handleCardAdd}
+            onCardEdit={onCardEdit}
+            onCardDelete={handleCardDelete}
+            onColumnEdit={onColumnEdit}
+            onColumnDelete={handleColumnDelete}
+            onDragStart={handleDragStart}
+            onDragOver={handleDragOver}
+            onDrop={handleDrop}
+          />
+        ))}
+
+        {/* Add column */}
+        {showAddColumn && (
+          <div className="w-72 flex-shrink-0">
+            {isAddingColumn ? (
+              <Card className="p-3">
+                <Input
+                  placeholder="Titre de la colonne..."
+                  value={newColumnTitle}
+                  onChange={(e) => setNewColumnTitle(e.target.value)}
+                  autoFocus
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") handleAddColumn()
+                    if (e.key === "Escape") setIsAddingColumn(false)
+                  }}
+                />
+                <div className="flex gap-2 mt-2">
+                  <Button size="sm" onClick={handleAddColumn}>
+                    Ajouter
+                  </Button>
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    onClick={() => {
+                      setIsAddingColumn(false)
+                      setNewColumnTitle("")
+                    }}
+                  >
+                    <X className="h-4 w-4" />
+                  </Button>
+                </div>
+              </Card>
+            ) : (
+              <Button
+                variant="outline"
+                className="w-full justify-start h-12"
+                onClick={() => setIsAddingColumn(true)}
+              >
+                <Plus className="h-4 w-4 mr-2" />
+                Ajouter une colonne
+              </Button>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+// ============================================
+// PRESETS
+// ============================================
+
+export const defaultKanbanColumns: KanbanColumn[] = [
+  {
+    id: "todo",
+    title: "À faire",
+    color: "#6b7280",
+    cards: [
+      {
+        id: "1",
+        title: "Implémenter l'authentification",
+        description: "Ajouter le login/logout avec JWT",
+        priority: "high",
+        labels: [{ id: "dev", name: "Dev", color: "#3b82f6" }],
+        assignees: [{ id: "1", name: "Marie D." }],
+      },
+      {
+        id: "2",
+        title: "Créer les maquettes",
+        priority: "medium",
+        labels: [{ id: "design", name: "Design", color: "#8b5cf6" }],
+      },
+    ],
+  },
+  {
+    id: "in-progress",
+    title: "En cours",
+    color: "#3b82f6",
+    limit: 3,
+    cards: [
+      {
+        id: "3",
+        title: "Refactoring du dashboard",
+        priority: "medium",
+        assignees: [{ id: "2", name: "Pierre M." }],
+        dueDate: new Date(Date.now() + 1000 * 60 * 60 * 24 * 2),
+      },
+    ],
+  },
+  {
+    id: "review",
+    title: "En revue",
+    color: "#f59e0b",
+    cards: [],
+  },
+  {
+    id: "done",
+    title: "Terminé",
+    color: "#10b981",
+    cards: [
+      {
+        id: "4",
+        title: "Setup du projet",
+        priority: "low",
+      },
+    ],
+  },
+]
+
+export const defaultKanbanLabels: KanbanCardLabel[] = [
+  { id: "dev", name: "Dev", color: "#3b82f6" },
+  { id: "design", name: "Design", color: "#8b5cf6" },
+  { id: "bug", name: "Bug", color: "#ef4444" },
+  { id: "feature", name: "Feature", color: "#10b981" },
+]
+
+export default WakaKanbanBoard