@moontra/moonui-pro 2.0.22 → 2.1.0

package/src/components/kanban/index.tsx

@@ -0,0 +1,436 @@
+"use client"
+
+import React from 'react'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card'
+import { Button } from '../ui/button'
+import { Badge } from '../ui/badge'
+import { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar'
+import { 
+  Plus, 
+  MoreHorizontal, 
+  User, 
+  Calendar, 
+  MessageCircle, 
+  Paperclip,
+  Edit,
+  Trash2,
+  GripVertical,
+  Lock,
+  Sparkles
+} from 'lucide-react'
+import { cn } from '../../lib/utils'
+// Note: DocsProAccess should be handled by consuming application
+import { useSubscription } from '../../hooks/use-subscription'
+
+export interface KanbanCard {
+  id: string
+  title: string
+  description?: string
+  assignee?: {
+    name: string
+    avatar?: string
+    email?: string
+  }
+  dueDate?: Date
+  priority?: 'low' | 'medium' | 'high' | 'urgent'
+  tags?: string[]
+  attachments?: number
+  comments?: number
+  completed?: boolean
+}
+
+export interface KanbanColumn {
+  id: string
+  title: string
+  color?: string
+  cards: KanbanCard[]
+  limit?: number
+}
+
+export interface KanbanProps {
+  columns: KanbanColumn[]
+  onCardMove?: (cardId: string, fromColumn: string, toColumn: string, newIndex: number) => void
+  onCardClick?: (card: KanbanCard) => void
+  onCardEdit?: (card: KanbanCard) => void
+  onCardDelete?: (card: KanbanCard) => void
+  onAddCard?: (columnId: string) => void
+  onAddColumn?: () => void
+  className?: string
+  showAddColumn?: boolean
+  showCardDetails?: boolean
+  disabled?: boolean
+}
+
+const PRIORITY_COLORS = {
+  low: 'bg-green-100 text-green-800 border-green-200',
+  medium: 'bg-yellow-100 text-yellow-800 border-yellow-200',
+  high: 'bg-orange-100 text-orange-800 border-orange-200',
+  urgent: 'bg-red-100 text-red-800 border-red-200'
+}
+
+const PRIORITY_DOTS = {
+  low: 'bg-green-500',
+  medium: 'bg-yellow-500',
+  high: 'bg-orange-500',
+  urgent: 'bg-red-500'
+}
+
+export function Kanban({
+  columns,
+  onCardMove,
+  onCardClick,
+  onCardEdit,
+  onCardDelete,
+  onAddCard,
+  onAddColumn,
+  className,
+  showAddColumn = true,
+  showCardDetails = true,
+  disabled = false
+}: KanbanProps) {
+  // Check if we're in docs mode or have pro access
+  const docsProAccess = { hasAccess: true } // Pro access assumed in package
+  const { hasProAccess, isLoading } = useSubscription()
+  
+  // In docs mode, always show the component
+  const canShowComponent = docsProAccess.isDocsMode || hasProAccess
+  
+  // If not in docs mode and no pro access, show upgrade prompt
+  if (!docsProAccess.isDocsMode && !isLoading && !hasProAccess) {
+    return (
+      <Card className={cn("w-full", className)}>
+        <CardContent className="py-12 text-center">
+          <div className="max-w-md mx-auto space-y-4">
+            <div className="rounded-full bg-purple-100 dark:bg-purple-900/30 p-3 w-fit mx-auto">
+              <Lock className="h-6 w-6 text-purple-600 dark:text-purple-400" />
+            </div>
+            <div>
+              <h3 className="font-semibold text-lg mb-2">Pro Feature</h3>
+              <p className="text-muted-foreground text-sm mb-4">
+                Kanban Board is available exclusively to MoonUI Pro subscribers.
+              </p>
+              <div className="flex gap-3 justify-center">
+                <a href="/pricing">
+                  <Button size="sm">
+                    <Sparkles className="mr-2 h-4 w-4" />
+                    Upgrade to Pro
+                  </Button>
+                </a>
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    )
+  }
+  
+  const [draggedCard, setDraggedCard] = React.useState<string | null>(null)
+  const [draggedOverColumn, setDraggedOverColumn] = React.useState<string | null>(null)
+  const [draggedFromColumn, setDraggedFromColumn] = React.useState<string | null>(null)
+
+  const handleDragStart = (e: React.DragEvent, cardId: string) => {
+    if (disabled) return
+    
+    // Find which column this card belongs to
+    const sourceColumn = columns.find(col => 
+      col.cards.some(card => card.id === cardId)
+    )
+    
+    setDraggedCard(cardId)
+    setDraggedFromColumn(sourceColumn?.id || null)
+    e.dataTransfer.effectAllowed = 'move'
+    e.dataTransfer.setData('text/plain', cardId)
+    
+    // Add visual feedback
+    e.currentTarget.classList.add('opacity-50')
+  }
+
+  const handleDragEnd = (e: React.DragEvent) => {
+    if (disabled) return
+    
+    // Reset all states
+    setDraggedCard(null)
+    setDraggedOverColumn(null)
+    setDraggedFromColumn(null)
+    
+    // Remove visual feedback
+    e.currentTarget.classList.remove('opacity-50')
+  }
+
+  const handleDragOver = (e: React.DragEvent, columnId: string) => {
+    if (disabled) return
+    e.preventDefault()
+    e.dataTransfer.dropEffect = 'move'
+    setDraggedOverColumn(columnId)
+  }
+
+  const handleDragEnter = (e: React.DragEvent, columnId: string) => {
+    if (disabled) return
+    e.preventDefault()
+    setDraggedOverColumn(columnId)
+  }
+
+  const handleDragLeave = (e: React.DragEvent, columnId: string) => {
+    if (disabled) return
+    e.preventDefault()
+    
+    // Only clear if we're leaving the column entirely
+    const rect = e.currentTarget.getBoundingClientRect()
+    const isLeavingColumn = (
+      e.clientX < rect.left || 
+      e.clientX > rect.right || 
+      e.clientY < rect.top || 
+      e.clientY > rect.bottom
+    )
+    
+    if (isLeavingColumn) {
+      setDraggedOverColumn(null)
+    }
+  }
+
+  const handleDrop = (e: React.DragEvent, columnId: string) => {
+    if (disabled) return
+    e.preventDefault()
+    
+    const cardId = e.dataTransfer.getData('text/plain') || draggedCard
+    
+    if (cardId && onCardMove && draggedFromColumn && draggedFromColumn !== columnId) {
+      const targetColumn = columns.find(col => col.id === columnId)
+      const newIndex = targetColumn?.cards.length || 0
+      onCardMove(cardId, draggedFromColumn, columnId, newIndex)
+    }
+    
+    // Reset all states
+    setDraggedCard(null)
+    setDraggedOverColumn(null)
+    setDraggedFromColumn(null)
+  }
+
+  const handleCardClick = (card: KanbanCard) => {
+    if (disabled) return
+    onCardClick?.(card)
+  }
+
+  const handleCardEdit = (card: KanbanCard, e: React.MouseEvent) => {
+    if (disabled) return
+    e.stopPropagation()
+    onCardEdit?.(card)
+  }
+
+  const handleCardDelete = (card: KanbanCard, e: React.MouseEvent) => {
+    if (disabled) return
+    e.stopPropagation()
+    onCardDelete?.(card)
+  }
+
+  const formatDate = (date: Date) => {
+    return date.toLocaleDateString('en-US', { 
+      month: 'short', 
+      day: 'numeric' 
+    })
+  }
+
+  const isOverdue = (dueDate: Date) => {
+    return dueDate < new Date()
+  }
+
+  const getInitials = (name: string) => {
+    return name.split(' ').map(n => n[0]).join('').toUpperCase()
+  }
+
+  return (
+    <div className={cn("w-full", className)}>
+      <div className="flex gap-6 overflow-x-auto pb-4">
+        {columns.map((column) => {
+          const isOverLimit = column.limit && column.cards.length > column.limit
+          const isDraggedOver = draggedOverColumn === column.id
+          
+          return (
+            <div
+              key={column.id}
+              className={cn(
+                "flex-shrink-0 w-80 transition-colors duration-200",
+                isDraggedOver && "bg-primary/5 rounded-lg border-2 border-primary/20"
+              )}
+              onDragOver={(e) => handleDragOver(e, column.id)}
+              onDragEnter={(e) => handleDragEnter(e, column.id)}
+              onDragLeave={(e) => handleDragLeave(e, column.id)}
+              onDrop={(e) => handleDrop(e, column.id)}
+            >
+              <Card className="h-full">
+                <CardHeader className="pb-3">
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-2">
+                      {column.color && (
+                        <div 
+                          className="w-3 h-3 rounded-full" 
+                          style={{ backgroundColor: column.color }}
+                        />
+                      )}
+                      <CardTitle className="text-sm font-medium">
+                        {column.title}
+                      </CardTitle>
+                      <Badge variant="secondary" className="text-xs">
+                        {column.cards.length}
+                      </Badge>
+                    </div>
+                    <Button variant="ghost" size="sm">
+                      <MoreHorizontal className="h-4 w-4" />
+                    </Button>
+                  </div>
+                  {column.limit && (
+                    <CardDescription className={cn(
+                      "text-xs",
+                      isOverLimit && "text-destructive"
+                    )}>
+                      {isOverLimit ? 'Over limit' : `${column.cards.length}/${column.limit} cards`}
+                    </CardDescription>
+                  )}
+                </CardHeader>
+                
+                <CardContent className="space-y-3">
+                  {/* Cards */}
+                  {column.cards.map((card) => (
+                    <div
+                      key={card.id}
+                      draggable={!disabled}
+                      onDragStart={(e) => handleDragStart(e, card.id)}
+                      onDragEnd={handleDragEnd}
+                      onClick={() => handleCardClick(card)}
+                      className={cn(
+                        "p-3 bg-background border rounded-lg cursor-pointer hover:shadow-md transition-all duration-200",
+                        "group relative select-none",
+                        draggedCard === card.id && "opacity-50 scale-95",
+                        disabled && "cursor-not-allowed"
+                      )}
+                    >
+                      <div className="flex items-start justify-between gap-2">
+                        <div className="flex-1">
+                          <h4 className="font-medium text-sm mb-1">{card.title}</h4>
+                          {card.description && (
+                            <p className="text-xs text-muted-foreground mb-2 line-clamp-2">
+                              {card.description}
+                            </p>
+                          )}
+                        </div>
+                        <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className="h-6 w-6 p-0"
+                            onClick={(e) => handleCardEdit(card, e)}
+                          >
+                            <Edit className="h-3 w-3" />
+                          </Button>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className="h-6 w-6 p-0"
+                            onClick={(e) => handleCardDelete(card, e)}
+                          >
+                            <Trash2 className="h-3 w-3" />
+                          </Button>
+                          <div className="cursor-move">
+                            <GripVertical className="h-3 w-3 text-muted-foreground" />
+                          </div>
+                        </div>
+                      </div>
+
+                      {/* Tags */}
+                      {card.tags && card.tags.length > 0 && (
+                        <div className="flex flex-wrap gap-1 mb-2">
+                          {card.tags.map((tag, index) => (
+                            <Badge key={index} variant="outline" className="text-xs px-1 py-0">
+                              {tag}
+                            </Badge>
+                          ))}
+                        </div>
+                      )}
+
+                      {/* Card Details */}
+                      {showCardDetails && (
+                        <div className="flex items-center justify-between text-xs text-muted-foreground">
+                          <div className="flex items-center gap-2">
+                            {card.priority && (
+                              <div className="flex items-center gap-1">
+                                <div className={cn("w-2 h-2 rounded-full", PRIORITY_DOTS[card.priority])} />
+                                <span className="capitalize">{card.priority}</span>
+                              </div>
+                            )}
+                            {card.dueDate && (
+                              <div className={cn(
+                                "flex items-center gap-1",
+                                isOverdue(card.dueDate) && "text-destructive"
+                              )}>
+                                <Calendar className="h-3 w-3" />
+                                <span>{formatDate(card.dueDate)}</span>
+                              </div>
+                            )}
+                          </div>
+                          
+                          <div className="flex items-center gap-2">
+                            {card.comments && card.comments > 0 && (
+                              <div className="flex items-center gap-1">
+                                <MessageCircle className="h-3 w-3" />
+                                <span>{card.comments}</span>
+                              </div>
+                            )}
+                            {card.attachments && card.attachments > 0 && (
+                              <div className="flex items-center gap-1">
+                                <Paperclip className="h-3 w-3" />
+                                <span>{card.attachments}</span>
+                              </div>
+                            )}
+                            {card.assignee && (
+                              <Avatar className="h-5 w-5">
+                                <AvatarImage src={card.assignee.avatar} />
+                                <AvatarFallback className="text-xs">
+                                  {getInitials(card.assignee.name)}
+                                </AvatarFallback>
+                              </Avatar>
+                            )}
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  ))}
+
+                  {/* Add Card Button */}
+                  {onAddCard && (
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => onAddCard(column.id)}
+                      className="w-full justify-start text-muted-foreground hover:text-foreground"
+                      disabled={disabled}
+                    >
+                      <Plus className="h-4 w-4 mr-2" />
+                      Add card
+                    </Button>
+                  )}
+                </CardContent>
+              </Card>
+            </div>
+          )
+        })}
+
+        {/* Add Column Button */}
+        {showAddColumn && onAddColumn && (
+          <div className="flex-shrink-0 w-80">
+            <Button
+              variant="outline"
+              onClick={onAddColumn}
+              className="w-full h-full min-h-[200px] border-dashed justify-center items-center"
+              disabled={disabled}
+            >
+              <Plus className="h-6 w-6 mr-2" />
+              Add column
+            </Button>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default Kanban