@nextsparkjs/theme-productivity 0.1.0-beta.1

package/components/KanbanCard.tsx

@@ -0,0 +1,218 @@
+'use client'
+
+import { useSortable } from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
+import { Calendar, Clock, MessageSquare, Paperclip, CheckSquare, AlertCircle } from 'lucide-react'
+import { cn } from '@nextsparkjs/core/lib/utils'
+
+export interface CardData {
+  id: string
+  title: string
+  description?: string | null
+  priority?: 'low' | 'medium' | 'high' | 'urgent' | null
+  status?: string | null
+  dueDate?: string | null
+  position?: number
+  listId: string
+  labels?: string[]
+  assigneeId?: string | null
+  commentsCount?: number
+  attachmentsCount?: number
+  checklistProgress?: { completed: number; total: number } | null
+}
+
+interface KanbanCardProps {
+  card: CardData
+  onClick?: () => void
+}
+
+// Priority color bar classes
+const priorityBarColors: Record<string, string> = {
+  low: 'bg-slate-400',
+  medium: 'bg-blue-500',
+  high: 'bg-orange-500',
+  urgent: 'bg-red-500',
+}
+
+// Label color mapping
+const labelColors: Record<string, { bg: string; text: string }> = {
+  bug: { bg: 'bg-red-500', text: 'text-white' },
+  feature: { bg: 'bg-blue-500', text: 'text-white' },
+  enhancement: { bg: 'bg-green-500', text: 'text-white' },
+  documentation: { bg: 'bg-purple-500', text: 'text-white' },
+  urgent: { bg: 'bg-red-600', text: 'text-white' },
+  important: { bg: 'bg-orange-500', text: 'text-white' },
+  design: { bg: 'bg-pink-500', text: 'text-white' },
+  backend: { bg: 'bg-indigo-500', text: 'text-white' },
+  frontend: { bg: 'bg-cyan-500', text: 'text-white' },
+}
+
+export function KanbanCard({ card, onClick }: KanbanCardProps) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({
+    id: card.id,
+    data: {
+      type: 'card',
+      card,
+    },
+  })
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  }
+
+  const formatDate = (dateString: string) => {
+    const date = new Date(dateString)
+    const today = new Date()
+    const tomorrow = new Date(today)
+    tomorrow.setDate(tomorrow.getDate() + 1)
+
+    // Check if it's today
+    if (date.toDateString() === today.toDateString()) {
+      return 'Today'
+    }
+    // Check if it's tomorrow
+    if (date.toDateString() === tomorrow.toDateString()) {
+      return 'Tomorrow'
+    }
+    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
+  }
+
+  const getDueDateStatus = () => {
+    if (!card.dueDate) return null
+    const now = new Date()
+    const dueDate = new Date(card.dueDate)
+    const diffTime = dueDate.getTime() - now.getTime()
+    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
+
+    if (diffDays < 0) return 'overdue'
+    if (diffDays === 0) return 'today'
+    if (diffDays <= 2) return 'soon'
+    return 'normal'
+  }
+
+  const dueDateStatus = getDueDateStatus()
+  const hasLabels = card.labels && card.labels.length > 0
+  const hasMetadata = card.dueDate || card.commentsCount || card.attachmentsCount || card.checklistProgress
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={cn(
+        'group relative bg-card rounded-lg border border-border/50 overflow-hidden',
+        'cursor-pointer transition-all duration-200',
+        'hover:border-border hover:shadow-md hover:-translate-y-0.5',
+        isDragging && 'opacity-60 shadow-xl rotate-2 scale-105 z-50'
+      )}
+      onClick={onClick}
+      data-cy={`cards-item-${card.id}`}
+      {...attributes}
+      {...listeners}
+    >
+      {/* Priority color bar at top */}
+      {card.priority && (
+        <div className={cn('h-1 w-full', priorityBarColors[card.priority])} />
+      )}
+
+      <div className="p-3 space-y-2">
+        {/* Labels row */}
+        {hasLabels && (
+          <div className="flex flex-wrap gap-1">
+            {card.labels!.slice(0, 4).map((label) => {
+              const colors = labelColors[label.toLowerCase()] || { bg: 'bg-gray-500', text: 'text-white' }
+              return (
+                <span
+                  key={label}
+                  className={cn(
+                    'px-2 py-0.5 text-[10px] font-semibold rounded-full uppercase tracking-wide',
+                    colors.bg, colors.text
+                  )}
+                >
+                  {label}
+                </span>
+              )
+            })}
+            {card.labels!.length > 4 && (
+              <span className="px-2 py-0.5 text-[10px] font-medium text-muted-foreground bg-muted rounded-full">
+                +{card.labels!.length - 4}
+              </span>
+            )}
+          </div>
+        )}
+
+        {/* Title */}
+        <h4 className="font-medium text-sm leading-snug text-card-foreground">
+          {card.title}
+        </h4>
+
+        {/* Description preview */}
+        {card.description && (
+          <p className="text-xs text-muted-foreground line-clamp-2">
+            {card.description}
+          </p>
+        )}
+
+        {/* Footer badges row */}
+        {hasMetadata && (
+          <div className="flex items-center gap-3 pt-1 flex-wrap">
+            {/* Due date badge */}
+            {card.dueDate && (
+              <div
+                className={cn(
+                  'flex items-center gap-1 text-xs px-1.5 py-0.5 rounded',
+                  dueDateStatus === 'overdue' && 'bg-red-100 text-red-700 dark:bg-red-900/50 dark:text-red-300',
+                  dueDateStatus === 'today' && 'bg-amber-100 text-amber-700 dark:bg-amber-900/50 dark:text-amber-300',
+                  dueDateStatus === 'soon' && 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/50 dark:text-yellow-300',
+                  dueDateStatus === 'normal' && 'text-muted-foreground'
+                )}
+              >
+                {dueDateStatus === 'overdue' ? (
+                  <AlertCircle className="h-3 w-3" />
+                ) : (
+                  <Clock className="h-3 w-3" />
+                )}
+                <span className="font-medium">{formatDate(card.dueDate)}</span>
+              </div>
+            )}
+
+            {/* Checklist progress */}
+            {card.checklistProgress && (
+              <div className="flex items-center gap-1 text-xs text-muted-foreground">
+                <CheckSquare className="h-3 w-3" />
+                <span>{card.checklistProgress.completed}/{card.checklistProgress.total}</span>
+              </div>
+            )}
+
+            {/* Comments count */}
+            {card.commentsCount && card.commentsCount > 0 && (
+              <div className="flex items-center gap-1 text-xs text-muted-foreground">
+                <MessageSquare className="h-3 w-3" />
+                <span>{card.commentsCount}</span>
+              </div>
+            )}
+
+            {/* Attachments count */}
+            {card.attachmentsCount && card.attachmentsCount > 0 && (
+              <div className="flex items-center gap-1 text-xs text-muted-foreground">
+                <Paperclip className="h-3 w-3" />
+                <span>{card.attachmentsCount}</span>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Hover overlay for quick actions hint */}
+      <div className="absolute inset-0 bg-primary/5 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none" />
+    </div>
+  )
+}
+

package/components/KanbanColumn.tsx

@@ -0,0 +1,264 @@
+'use client'
+
+import { useState } from 'react'
+import { useDroppable } from '@dnd-kit/core'
+import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable'
+import { Button } from '@nextsparkjs/core/components/ui/button'
+import { Input } from '@nextsparkjs/core/components/ui/input'
+import { GripVertical, Plus, X, MoreHorizontal } from 'lucide-react'
+import { KanbanCard, type CardData } from './KanbanCard'
+import { cn } from '@nextsparkjs/core/lib/utils'
+import { PermissionGate } from '@nextsparkjs/core/components/permissions/PermissionGate'
+import { usePermission } from '@nextsparkjs/core/lib/permissions/hooks'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@nextsparkjs/core/components/ui/dropdown-menu'
+import type { DragHandleProps } from './SortableList'
+
+export interface ListData {
+  id: string
+  name: string
+  position: number
+  boardId: string
+}
+
+interface KanbanColumnProps {
+  list: ListData
+  cards: CardData[]
+  onAddCard?: (listId: string, title: string) => void
+  onCardClick?: (card: CardData) => void
+  dragHandleProps?: DragHandleProps
+  onDeleteList?: (listId: string) => void
+  onRenameList?: (listId: string, newName: string) => void
+}
+
+export function KanbanColumn({
+  list,
+  cards,
+  onAddCard,
+  onCardClick,
+  dragHandleProps,
+  onDeleteList,
+  onRenameList,
+}: KanbanColumnProps) {
+  const [isAddingCard, setIsAddingCard] = useState(false)
+  const [newCardTitle, setNewCardTitle] = useState('')
+  const [isEditing, setIsEditing] = useState(false)
+  const [editedName, setEditedName] = useState(list.name)
+
+  // Permission check for list editing
+  const canUpdateList = usePermission('lists.update')
+
+  const { setNodeRef, isOver } = useDroppable({
+    id: list.id,
+    data: {
+      type: 'column',
+      list,
+    },
+  })
+
+  const handleAddCard = () => {
+    if (newCardTitle.trim() && onAddCard) {
+      onAddCard(list.id, newCardTitle.trim())
+      setNewCardTitle('')
+      setIsAddingCard(false)
+    }
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      handleAddCard()
+    } else if (e.key === 'Escape') {
+      setIsAddingCard(false)
+      setNewCardTitle('')
+    }
+  }
+
+  const handleRename = () => {
+    if (editedName.trim() && editedName !== list.name && onRenameList) {
+      onRenameList(list.id, editedName.trim())
+    }
+    setIsEditing(false)
+  }
+
+  const cardIds = cards.map((c) => c.id)
+
+  return (
+    <div
+      ref={setNodeRef}
+      className={cn(
+        'flex flex-col w-[280px] flex-shrink-0 rounded-xl transition-all duration-200',
+        'bg-muted/40 dark:bg-muted/20 backdrop-blur-sm',
+        'border border-border/30',
+        isOver && 'ring-2 ring-primary/50 bg-primary/5'
+      )}
+      style={{
+        maxHeight: 'calc(100vh - 180px)',
+      }}
+      data-cy={`lists-column-${list.id}`}
+    >
+      {/* Column Header */}
+      <div className="px-3 pt-3 pb-2" data-cy={`lists-column-header-${list.id}`}>
+        <div className="flex items-center justify-between gap-2">
+          <div className="flex items-center gap-1.5 flex-1 min-w-0">
+            {dragHandleProps && (
+              <button
+                {...dragHandleProps}
+                className="p-1 -ml-1 cursor-grab active:cursor-grabbing text-muted-foreground hover:text-foreground transition-colors rounded-md hover:bg-background/80 shrink-0"
+                aria-label="Drag to reorder list"
+              >
+                <GripVertical className="h-4 w-4" />
+              </button>
+            )}
+            {isEditing ? (
+              <Input
+                autoFocus
+                value={editedName}
+                onChange={(e) => setEditedName(e.target.value)}
+                onBlur={handleRename}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') handleRename()
+                  if (e.key === 'Escape') {
+                    setEditedName(list.name)
+                    setIsEditing(false)
+                  }
+                }}
+                className="h-7 text-sm font-semibold px-1.5 bg-background"
+              />
+            ) : (
+              <h3
+                className={cn(
+                  "font-semibold text-sm text-foreground truncate transition-colors",
+                  canUpdateList && "cursor-pointer hover:text-primary"
+                )}
+                onClick={canUpdateList ? () => setIsEditing(true) : undefined}
+                data-cy={`lists-column-title-${list.id}`}
+              >
+                {list.name}
+              </h3>
+            )}
+          </div>
+          <div className="flex items-center gap-1 shrink-0">
+            <span className="text-xs font-medium text-muted-foreground bg-background/80 px-2 py-0.5 rounded-md">
+              {cards.length}
+            </span>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="ghost" size="icon" className="h-7 w-7 text-muted-foreground hover:text-foreground" data-cy={`lists-column-menu-trigger-${list.id}`}>
+                  <MoreHorizontal className="h-4 w-4" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="w-48" data-cy={`lists-column-menu-${list.id}`}>
+                <PermissionGate permission="lists.update">
+                  <DropdownMenuItem onClick={() => setIsEditing(true)}>
+                    Rename list
+                  </DropdownMenuItem>
+                </PermissionGate>
+                <PermissionGate permission="cards.create">
+                  <DropdownMenuItem onClick={() => setIsAddingCard(true)}>
+                    Add card
+                  </DropdownMenuItem>
+                </PermissionGate>
+                <PermissionGate permission="lists.delete">
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem
+                    className="text-destructive focus:text-destructive"
+                    onClick={() => onDeleteList?.(list.id)}
+                  >
+                    Delete list
+                  </DropdownMenuItem>
+                </PermissionGate>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </div>
+      </div>
+
+      {/* Cards Container with custom scrollbar */}
+      <div className="flex-1 overflow-y-auto px-2 custom-scrollbar">
+        <div className="min-h-[60px] pb-2 px-1">
+          <SortableContext items={cardIds} strategy={verticalListSortingStrategy}>
+            <div className="space-y-2">
+              {cards.length === 0 && !isAddingCard && (
+                <div className="text-center py-6 text-muted-foreground text-xs">
+                  No cards yet
+                </div>
+              )}
+              {cards.map((card) => (
+                <KanbanCard
+                  key={card.id}
+                  card={card}
+                  onClick={() => onCardClick?.(card)}
+                />
+              ))}
+            </div>
+          </SortableContext>
+        </div>
+      </div>
+
+      {/* Add Card Section - Fixed at bottom */}
+      <PermissionGate permission="cards.create">
+        <div className="px-3 py-2 border-t border-border/30">
+          {isAddingCard ? (
+            <div className="space-y-2" data-cy={`cards-add-form-${list.id}`}>
+              <textarea
+                autoFocus
+                placeholder="Enter a title for this card..."
+                value={newCardTitle}
+                onChange={(e) => setNewCardTitle(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' && !e.shiftKey) {
+                    e.preventDefault()
+                    handleAddCard()
+                  }
+                  if (e.key === 'Escape') {
+                    setIsAddingCard(false)
+                    setNewCardTitle('')
+                  }
+                }}
+                className="w-full min-h-[60px] p-2 text-sm bg-card border border-border rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary"
+                data-cy={`cards-field-title-${list.id}`}
+              />
+              <div className="flex items-center gap-2">
+                <Button size="sm" onClick={handleAddCard} disabled={!newCardTitle.trim()} data-cy={`cards-form-submit-${list.id}`}>
+                  Add Card
+                </Button>
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  onClick={() => {
+                    setIsAddingCard(false)
+                    setNewCardTitle('')
+                  }}
+                >
+                  <X className="h-4 w-4" />
+                </Button>
+              </div>
+            </div>
+          ) : (
+            <Button
+              variant="ghost"
+              size="sm"
+              className="w-full justify-start text-muted-foreground hover:text-foreground hover:bg-background/80 rounded-lg"
+              onClick={() => setIsAddingCard(true)}
+              data-cy={`lists-add-card-${list.id}`}
+            >
+              <Plus className="h-4 w-4 mr-2" />
+              Add a card
+            </Button>
+          )}
+        </div>
+      </PermissionGate>
+
+      {/* Drop indicator line when dragging over */}
+      {isOver && (
+        <div className="absolute inset-x-2 bottom-14 h-0.5 bg-primary rounded-full animate-pulse" />
+      )}
+    </div>
+  )
+}
+

package/components/SortableList.tsx

@@ -0,0 +1,46 @@
+'use client'
+
+import { useSortable } from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
+import type { ListData } from './KanbanColumn'
+
+// Export drag handle props type for KanbanColumn
+export type DragHandleProps = ReturnType<typeof useSortable>['listeners']
+
+interface SortableListProps {
+  list: ListData
+  children: (props: { dragHandleProps: DragHandleProps }) => React.ReactNode
+  disabled?: boolean
+}
+
+export function SortableList({ list, children, disabled = false }: SortableListProps) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({
+    id: list.id,
+    data: {
+      type: 'list',
+      list,
+    },
+    disabled,
+  })
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  }
+
+  return (
+    <div ref={setNodeRef} style={style} {...attributes}>
+      <div className={isDragging ? 'ring-2 ring-primary/50 rounded-lg' : ''}>
+        {children({ dragHandleProps: listeners })}
+      </div>
+    </div>
+  )
+}

package/components/index.ts

@@ -0,0 +1,4 @@
+export { KanbanCard, type CardData } from './KanbanCard'
+export { KanbanColumn, type ListData } from './KanbanColumn'
+export { KanbanBoard } from './KanbanBoard'
+