@luxfi/ui 7.4.15 → 8.1.0

package/src/kanban.tsx

@@ -0,0 +1,772 @@
+"use client"
+
+import * as React from "react"
+import { Box, css, sx, variants } from '@hanzo/ui'
+import {
+  closestCorners,
+  DndContext,
+  DragEndEvent,
+  DragOverEvent,
+  DragOverlay,
+  DragStartEvent,
+  PointerSensor,
+  UniqueIdentifier,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core"
+import {
+  arrayMove,
+  SortableContext,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable"
+import { CSS } from "@dnd-kit/utilities"
+import {
+  Calendar,
+  Edit3,
+  MoreHorizontal,
+  Plus,
+  Search,
+  User,
+  X,
+} from "lucide-react"
+
+import { cn } from "./utils"
+
+import { Badge } from "./badge"
+import { Button } from "./button"
+import { Card, CardContent, CardHeader } from "@hanzo/ui"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@hanzo/ui"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@hanzo/ui"
+import { Input } from "./input"
+import { Label } from "@hanzo/ui"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@hanzo/ui"
+import { Textarea } from "./textarea"
+
+// Types
+export interface KanbanCard {
+  id: string
+  title: string
+  description?: string
+  labels?: KanbanLabel[]
+  priority?: "low" | "medium" | "high" | "urgent"
+  assignee?: string
+  dueDate?: string
+  createdAt: string
+  updatedAt: string
+}
+
+export interface KanbanLabel {
+  id: string
+  name: string
+  color: string
+}
+
+export interface KanbanColumn {
+  id: string
+  title: string
+  cards: KanbanCard[]
+  limit?: number
+}
+
+export interface KanbanBoard {
+  id: string
+  title: string
+  columns: KanbanColumn[]
+  labels: KanbanLabel[]
+}
+
+// Priority variants
+const priorityVariants = variants(
+  "inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-semibold",
+  {
+    variants: {
+      priority: {
+        low: "border-[var(--color-link-primary)] bg-[var(--color-link-primary)] text-[var(--color-link-primary)] dark:border-[var(--color-link-primary)] dark:bg-[var(--color-link-primary)]/20 dark:text-[var(--color-link-primary)]",
+        medium:
+          "border-[var(--lux-state-notice)] bg-[var(--lux-state-notice)] text-[var(--lux-state-notice)] dark:border-[var(--lux-state-notice)] dark:bg-[var(--lux-state-notice)]/20 dark:text-[var(--lux-state-notice)]",
+        high: "border-[var(--lux-state-notice)] bg-[var(--lux-state-notice)] text-[var(--lux-state-notice)] dark:border-[var(--lux-state-notice)] dark:bg-[var(--lux-state-notice)]/20 dark:text-[var(--lux-state-notice)]",
+        urgent:
+          "border-[var(--lux-state-error)] bg-[var(--lux-state-error)] text-[var(--lux-state-error)] dark:border-[var(--lux-state-error)] dark:bg-[var(--lux-state-error)]/20 dark:text-[var(--lux-state-error)]",
+      },
+    },
+    defaultVariants: {
+      priority: "low",
+    },
+  }
+)
+
+// Sortable Card Component
+function SortableCard({
+  card,
+  onEdit,
+  onDelete,
+}: {
+  card: KanbanCard
+  onEdit: (card: KanbanCard) => void
+  onDelete: (cardId: string) => void
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: card.id })
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  }
+
+  return (
+    <Box
+      ref={setNodeRef}
+      style={style}
+      {...attributes}
+      {...listeners}
+      className={cn(
+        "cursor-grab active:cursor-grabbing",
+        isDragging && "opacity-50"
+      )}
+    >
+      <KanbanCardComponent card={card} onEdit={onEdit} onDelete={onDelete} />
+    </Box>
+  )
+}
+
+// Card Component
+function KanbanCardComponent({
+  card,
+  onEdit,
+  onDelete,
+}: {
+  card: KanbanCard
+  onEdit: (card: KanbanCard) => void
+  onDelete: (cardId: string) => void
+}) {
+  return (
+    <Card {...sx('mb-3 group hover:shadow-md transition-shadow')}>
+      <CardHeader {...sx('pb-3')}>
+        <Box className="flex items-start justify-between">
+          <Box className="flex-1 min-w-0">
+            <Box tag="h4" className="font-medium text-sm leading-tight mb-2 break-words">
+              {card.title}
+            </Box>
+            {card.description && (
+              <Box tag="p" className="text-xs text-muted-foreground line-clamp-2 mb-2">
+                {card.description}
+              </Box>
+            )}
+
+            {/* Labels */}
+            {card.labels && card.labels.length > 0 && (
+              <Box className="flex flex-wrap gap-1 mb-2">
+                {card.labels.map((label) => (
+                  <Badge
+                    key={label.id}
+                    variant="outline"
+                    className="text-xs h-5"
+                    style={{
+                      backgroundColor: `${label.color}20`,
+                      borderColor: label.color,
+                      color: label.color,
+                    }}
+                  >
+                    {label.name}
+                  </Badge>
+                ))}
+              </Box>
+            )}
+
+            {/* Priority and Meta */}
+            <Box className="flex items-center justify-between text-xs">
+              <Box className="flex items-center gap-2">
+                {card.priority && (
+                  <Box tag="span"
+                    className={cn(
+                      priorityVariants({ priority: card.priority })
+                    )}
+                  >
+                    {card.priority}
+                  </Box>
+                )}
+                {card.assignee && (
+                  <Box className="flex items-center gap-1 text-muted-foreground">
+                    <User style={css('h-3 w-3')} />
+                    <span>{card.assignee}</span>
+                  </Box>
+                )}
+              </Box>
+
+              <Box className="flex items-center gap-1">
+                {card.dueDate && (
+                  <Box className="flex items-center gap-1 text-muted-foreground">
+                    <Calendar style={css('h-3 w-3')} />
+                    <span>{new Date(card.dueDate).toLocaleDateString()}</span>
+                  </Box>
+                )}
+
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      {...sx('h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity')}
+                    >
+                      <MoreHorizontal style={css('h-3 w-3')} />
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end">
+                    <DropdownMenuItem onClick={() => onEdit(card)}>
+                      <Edit3 style={css('h-4 w-4 mr-2')} />
+                      Edit
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                      onClick={() => onDelete(card.id)}
+                      className="text-destructive"
+                    >
+                      <X style={css('h-4 w-4 mr-2')} />
+                      Delete
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </Box>
+            </Box>
+          </Box>
+        </Box>
+      </CardHeader>
+    </Card>
+  )
+}
+
+// Column Component
+function KanbanColumnComponent({
+  column,
+  onAddCard,
+  onEditCard,
+  onDeleteCard,
+}: {
+  column: KanbanColumn
+  onAddCard: (columnId: string) => void
+  onEditCard: (card: KanbanCard) => void
+  onDeleteCard: (cardId: string) => void
+}) {
+  const { setNodeRef } = useSortable({ id: column.id })
+
+  return (
+    <Box
+      ref={setNodeRef}
+      className="bg-muted/50 rounded-lg p-4 min-w-[280px] max-w-[280px] flex flex-col"
+    >
+      {/* Column Header */}
+      <Box className="flex items-center justify-between mb-4">
+        <Box className="flex items-center gap-2">
+          <Box tag="h3" className="font-semibold text-sm">{column.title}</Box>
+          <Badge colorPalette="gray" {...sx('text-xs')}>
+            {column.cards.length}
+            {column.limit && `/${column.limit}`}
+          </Badge>
+        </Box>
+        <Button
+          variant="ghost"
+          size="icon"
+          {...sx('h-8 w-8')}
+          onClick={() => onAddCard(column.id)}
+        >
+          <Plus style={css('h-4 w-4')} />
+        </Button>
+      </Box>
+
+      {/* Cards Container */}
+      <SortableContext
+        items={column.cards.map((card) => card.id)}
+        strategy={verticalListSortingStrategy}
+      >
+        <Box className="flex-1 min-h-[200px]">
+          {column.cards.map((card) => (
+            <SortableCard
+              key={card.id}
+              card={card}
+              onEdit={onEditCard}
+              onDelete={onDeleteCard}
+            />
+          ))}
+        </Box>
+      </SortableContext>
+    </Box>
+  )
+}
+
+// Card Form Dialog
+function CardFormDialog({
+  open,
+  onOpenChange,
+  card,
+  onSave,
+  labels,
+}: {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  card?: KanbanCard
+  onSave: (cardData: Partial<KanbanCard>) => void
+  labels: KanbanLabel[]
+}) {
+  const [formData, setFormData] = React.useState({
+    title: card?.title || "",
+    description: card?.description || "",
+    priority: card?.priority || "low",
+    assignee: card?.assignee || "",
+    dueDate: card?.dueDate || "",
+    labels: card?.labels?.map((l) => l.id) || [],
+  })
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!formData.title.trim()) return
+
+    onSave({
+      ...card,
+      ...formData,
+      labels: labels.filter((l) => formData.labels.includes(l.id)),
+      updatedAt: new Date().toISOString(),
+    })
+    onOpenChange(false)
+  }
+
+  React.useEffect(() => {
+    if (card) {
+      setFormData({
+        title: card.title,
+        description: card.description || "",
+        priority: card.priority || "low",
+        assignee: card.assignee || "",
+        dueDate: card.dueDate || "",
+        labels: card.labels?.map((l) => l.id) || [],
+      })
+    } else {
+      setFormData({
+        title: "",
+        description: "",
+        priority: "low",
+        assignee: "",
+        dueDate: "",
+        labels: [],
+      })
+    }
+  }, [card])
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent {...sx('max-w-md')}>
+        <DialogHeader>
+          <DialogTitle>{card ? "Edit Card" : "Create Card"}</DialogTitle>
+          <DialogDescription>
+            {card
+              ? "Update the card details below."
+              : "Create a new card for your kanban board."}
+          </DialogDescription>
+        </DialogHeader>
+
+        <Box tag="form" onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <Label htmlFor="title">Title *</Label>
+            <Input
+              id="title"
+              value={formData.title}
+              onChange={(e) =>
+                setFormData((prev) => ({ ...prev, title: e.target.value }))
+              }
+              placeholder="Enter card title..."
+              required
+            />
+          </div>
+
+          <div>
+            <Label htmlFor="description">Description</Label>
+            <Textarea
+              id="description"
+              value={formData.description}
+              onChange={(e) =>
+                setFormData((prev) => ({
+                  ...prev,
+                  description: e.target.value,
+                }))
+              }
+              placeholder="Enter card description..."
+              rows={3}
+            />
+          </div>
+
+          <Box className="grid grid-cols-2 gap-4">
+            <div>
+              <Label htmlFor="priority">Priority</Label>
+              <Select
+                value={formData.priority}
+                onValueChange={(value) =>
+                  setFormData((prev) => ({ ...prev, priority: value as any }))
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="low">Low</SelectItem>
+                  <SelectItem value="medium">Medium</SelectItem>
+                  <SelectItem value="high">High</SelectItem>
+                  <SelectItem value="urgent">Urgent</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div>
+              <Label htmlFor="assignee">Assignee</Label>
+              <Input
+                id="assignee"
+                value={formData.assignee}
+                onChange={(e) =>
+                  setFormData((prev) => ({ ...prev, assignee: e.target.value }))
+                }
+                placeholder="Assign to..."
+              />
+            </div>
+          </Box>
+
+          <div>
+            <Label htmlFor="dueDate">Due Date</Label>
+            <Input
+              id="dueDate"
+              type="date"
+              value={formData.dueDate}
+              onChange={(e) =>
+                setFormData((prev) => ({ ...prev, dueDate: e.target.value }))
+              }
+            />
+          </div>
+
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => onOpenChange(false)}
+            >
+              Cancel
+            </Button>
+            <Button type="submit">{card ? "Update" : "Create"} Card</Button>
+          </DialogFooter>
+        </Box>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+// Main Kanban Board Component
+export interface KanbanBoardProps {
+  board: KanbanBoard
+  onUpdateBoard: (board: KanbanBoard) => void
+  className?: string
+}
+
+export function KanbanBoard({
+  board,
+  onUpdateBoard,
+  className,
+}: KanbanBoardProps) {
+  const [activeCard, setActiveCard] = React.useState<KanbanCard | null>(null)
+  const [searchQuery, setSearchQuery] = React.useState("")
+  const [cardFormOpen, setCardFormOpen] = React.useState(false)
+  const [editingCard, setEditingCard] = React.useState<KanbanCard | undefined>(
+    undefined
+  )
+  const [activeColumnId, setActiveColumnId] = React.useState<string>("")
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 8,
+      },
+    })
+  )
+
+  // Filter cards based on search query
+  const filteredBoard = React.useMemo(() => {
+    if (!searchQuery.trim()) return board
+
+    const filtered = {
+      ...board,
+      columns: board.columns.map((column) => ({
+        ...column,
+        cards: column.cards.filter(
+          (card) =>
+            card.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+            card.description
+              ?.toLowerCase()
+              .includes(searchQuery.toLowerCase()) ||
+            card.labels?.some((label) =>
+              label.name.toLowerCase().includes(searchQuery.toLowerCase())
+            )
+        ),
+      })),
+    }
+    return filtered
+  }, [board, searchQuery])
+
+  const handleDragStart = (event: DragStartEvent) => {
+    const { active } = event
+    const card = board.columns
+      .flatMap((col) => col.cards)
+      .find((card) => card.id === active.id)
+    setActiveCard(card || null)
+  }
+
+  const handleDragOver = (event: DragOverEvent) => {
+    const { active, over } = event
+    if (!over) return
+
+    const activeId = active.id
+    const overId = over.id
+
+    // Find the containers
+    const activeContainer = findContainer(activeId)
+    const overContainer = findContainer(overId)
+
+    if (
+      !activeContainer ||
+      !overContainer ||
+      activeContainer === overContainer
+    ) {
+      return
+    }
+
+    // Move card between columns
+    const updatedBoard = { ...board }
+    const activeColumnIndex = updatedBoard.columns.findIndex(
+      (col) => col.id === activeContainer
+    )
+    const overColumnIndex = updatedBoard.columns.findIndex(
+      (col) => col.id === overContainer
+    )
+
+    const activeColumn = updatedBoard.columns[activeColumnIndex]
+    const overColumn = updatedBoard.columns[overColumnIndex]
+
+    const activeCardIndex = activeColumn.cards.findIndex(
+      (card) => card.id === activeId
+    )
+    const [movedCard] = activeColumn.cards.splice(activeCardIndex, 1)
+
+    // Check column limit
+    if (overColumn.limit && overColumn.cards.length >= overColumn.limit) {
+      return
+    }
+
+    overColumn.cards.push(movedCard)
+    onUpdateBoard(updatedBoard)
+  }
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event
+    setActiveCard(null)
+
+    if (!over) return
+
+    const activeId = active.id
+    const overId = over.id
+
+    const activeContainer = findContainer(activeId)
+    const overContainer = findContainer(overId)
+
+    if (!activeContainer || !overContainer) return
+
+    const activeColumnIndex = board.columns.findIndex(
+      (col) => col.id === activeContainer
+    )
+    const activeColumn = board.columns[activeColumnIndex]
+
+    if (activeContainer === overContainer) {
+      // Reordering within the same column
+      const oldIndex = activeColumn.cards.findIndex(
+        (card) => card.id === activeId
+      )
+      const newIndex = activeColumn.cards.findIndex(
+        (card) => card.id === overId
+      )
+
+      if (oldIndex !== newIndex) {
+        const updatedBoard = { ...board }
+        updatedBoard.columns[activeColumnIndex].cards = arrayMove(
+          activeColumn.cards,
+          oldIndex,
+          newIndex
+        )
+        onUpdateBoard(updatedBoard)
+      }
+    }
+  }
+
+  const findContainer = (id: UniqueIdentifier): string | undefined => {
+    // Check if it's a column
+    if (board.columns.some((col) => col.id === id)) {
+      return id as string
+    }
+
+    // Find which column contains this card
+    return board.columns.find((col) => col.cards.some((card) => card.id === id))
+      ?.id
+  }
+
+  const handleAddCard = (columnId: string) => {
+    setActiveColumnId(columnId)
+    setEditingCard(undefined)
+    setCardFormOpen(true)
+  }
+
+  const handleEditCard = (card: KanbanCard) => {
+    setEditingCard(card)
+    setActiveColumnId("")
+    setCardFormOpen(true)
+  }
+
+  const handleSaveCard = (cardData: Partial<KanbanCard>) => {
+    const updatedBoard = { ...board }
+
+    if (editingCard) {
+      // Update existing card
+      const columnIndex = updatedBoard.columns.findIndex((col) =>
+        col.cards.some((card) => card.id === editingCard.id)
+      )
+      if (columnIndex !== -1) {
+        const cardIndex = updatedBoard.columns[columnIndex].cards.findIndex(
+          (card) => card.id === editingCard.id
+        )
+        if (cardIndex !== -1) {
+          updatedBoard.columns[columnIndex].cards[cardIndex] = {
+            ...editingCard,
+            ...cardData,
+          } as KanbanCard
+        }
+      }
+    } else {
+      // Create new card
+      const columnIndex = updatedBoard.columns.findIndex(
+        (col) => col.id === activeColumnId
+      )
+      if (columnIndex !== -1) {
+        const newCard: KanbanCard = {
+          id: `card-${Date.now()}`,
+          title: cardData.title!,
+          description: cardData.description,
+          labels: cardData.labels,
+          priority: cardData.priority,
+          assignee: cardData.assignee,
+          dueDate: cardData.dueDate,
+          createdAt: new Date().toISOString(),
+          updatedAt: new Date().toISOString(),
+        }
+        updatedBoard.columns[columnIndex].cards.push(newCard)
+      }
+    }
+
+    onUpdateBoard(updatedBoard)
+  }
+
+  const handleDeleteCard = (cardId: string) => {
+    const updatedBoard = { ...board }
+    const columnIndex = updatedBoard.columns.findIndex((col) =>
+      col.cards.some((card) => card.id === cardId)
+    )
+    if (columnIndex !== -1) {
+      updatedBoard.columns[columnIndex].cards = updatedBoard.columns[
+        columnIndex
+      ].cards.filter((card) => card.id !== cardId)
+      onUpdateBoard(updatedBoard)
+    }
+  }
+
+  return (
+    <Box className={cn("flex flex-col h-full", className)}>
+      {/* Header */}
+      <Box className="flex items-center justify-between p-4 border-b">
+        <Box tag="h1" className="text-2xl font-bold">{board.title}</Box>
+        <Box className="flex items-center gap-3">
+          <Box className="relative">
+            <Search style={css('absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground')} />
+            <Input
+              placeholder="Search cards..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              {...sx('pl-9 w-64')}
+            />
+          </Box>
+        </Box>
+      </Box>
+
+      {/* Board */}
+      <Box className="flex-1 overflow-x-auto">
+        <Box className="h-full p-4">
+          <DndContext
+            sensors={sensors}
+            collisionDetection={closestCorners}
+            onDragStart={handleDragStart}
+            onDragOver={handleDragOver}
+            onDragEnd={handleDragEnd}
+          >
+            <Box className="flex gap-6 h-full pb-4">
+              {filteredBoard.columns.map((column) => (
+                <KanbanColumnComponent
+                  key={column.id}
+                  column={column}
+                  onAddCard={handleAddCard}
+                  onEditCard={handleEditCard}
+                  onDeleteCard={handleDeleteCard}
+                />
+              ))}
+            </Box>
+
+            <DragOverlay>
+              {activeCard ? (
+                <KanbanCardComponent
+                  card={activeCard}
+                  onEdit={() => {}}
+                  onDelete={() => {}}
+                />
+              ) : null}
+            </DragOverlay>
+          </DndContext>
+        </Box>
+      </Box>
+
+      {/* Card Form Dialog */}
+      <CardFormDialog
+        open={cardFormOpen}
+        onOpenChange={setCardFormOpen}
+        card={editingCard}
+        onSave={handleSaveCard}
+        labels={board.labels}
+      />
+    </Box>
+  )
+}
+
+// Export default for registry
+export default KanbanBoard