@moontra/moonui-pro 2.11.4 → 2.13.0

package/src/components/kanban/types.ts

@@ -0,0 +1,111 @@
+export interface KanbanAssignee {
+  id: string
+  name: string
+  avatar?: string
+  email?: string
+}
+
+export interface KanbanLabel {
+  id: string
+  name: string
+  color: string
+}
+
+export interface KanbanChecklist {
+  id: string
+  title: string
+  items: {
+    id: string
+    text: string
+    completed: boolean
+  }[]
+}
+
+export interface KanbanActivity {
+  id: string
+  user: KanbanAssignee
+  action: string
+  timestamp: Date
+  details?: string
+}
+
+export interface KanbanCard {
+  id: string
+  title: string
+  description?: string
+  coverImage?: string
+  assignees?: KanbanAssignee[]
+  dueDate?: Date
+  startDate?: Date
+  priority?: 'low' | 'medium' | 'high' | 'urgent'
+  tags?: string[]
+  labels?: KanbanLabel[]
+  attachments?: {
+    id: string
+    name: string
+    type: string
+    url: string
+    size: number
+  }[]
+  comments?: number
+  completed?: boolean
+  progress?: number
+  checklist?: KanbanChecklist
+  activities?: KanbanActivity[]
+  customFields?: Record<string, any>
+  position: number
+}
+
+export interface KanbanColumn {
+  id: string
+  title: string
+  color?: string
+  cards: KanbanCard[]
+  limit?: number
+  collapsed?: boolean
+  locked?: boolean
+  template?: 'todo' | 'inProgress' | 'done' | 'custom'
+}
+
+export interface KanbanFilter {
+  id: string
+  name: string
+  query: string
+  assignees?: string[]
+  labels?: string[]
+  priority?: string[]
+  tags?: string[]
+  dueDate?: {
+    from?: Date
+    to?: Date
+  }
+}
+
+export interface KanbanProps {
+  columns: KanbanColumn[]
+  onCardMove?: (cardId: string, fromColumn: string, toColumn: string, newPosition: number) => void
+  onCardClick?: (card: KanbanCard) => void
+  onCardEdit?: (card: KanbanCard) => void
+  onCardDelete?: (card: KanbanCard) => void
+  onCardUpdate?: (card: KanbanCard) => void
+  onAddCard?: (columnId: string, card?: Partial<KanbanCard>) => void
+  onAddColumn?: (column?: Partial<KanbanColumn>) => void
+  onColumnUpdate?: (column: KanbanColumn) => void
+  onColumnDelete?: (columnId: string) => void
+  onBulkAction?: (action: string, cardIds: string[]) => void
+  onExport?: (format: 'json' | 'csv') => void
+  className?: string
+  showAddColumn?: boolean
+  showCardDetails?: boolean
+  showFilters?: boolean
+  showSearch?: boolean
+  enableKeyboardShortcuts?: boolean
+  cardTemplates?: Partial<KanbanCard>[]
+  columnTemplates?: Partial<KanbanColumn>[]
+  filters?: KanbanFilter[]
+  defaultFilter?: string
+  loading?: boolean
+  disabled?: boolean
+  labels?: KanbanLabel[]
+  users?: KanbanAssignee[]
+}

package/src/components/ui/avatar.tsx

@@ -83,16 +83,29 @@ const MoonUIAvatarFallbackPro = React.forwardRef<
 MoonUIAvatarFallbackPro.displayName = AvatarPrimitive.Fallback.displayName;
 
 // Avatar Group Component for displaying multiple avatars
-interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
-  limit?: number;
-  avatars: React.ReactNode[];
+interface MoonUIAvatarGroupProProps extends React.HTMLAttributes<HTMLDivElement> {
+  max?: number;
+  size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+  children?: React.ReactNode;
   overlapOffset?: number;
 }
 
-const MoonUIAvatarGroupPro = React.forwardRef<HTMLDivElement, AvatarGroupProps>(
-  ({ className, limit, avatars, overlapOffset = -8, ...props }, ref) => {
-    const visibleAvatars = limit ? avatars.slice(0, limit) : avatars;
-    const remainingCount = limit ? Math.max(0, avatars.length - limit) : 0;
+const MoonUIAvatarGroupPro = React.forwardRef<HTMLDivElement, MoonUIAvatarGroupProProps>(
+  ({ className, max = 3, size = "md", children, overlapOffset, ...props }, ref) => {
+    const childrenArray = React.Children.toArray(children);
+    const visibleChildren = max ? childrenArray.slice(0, max) : childrenArray;
+    const remainingCount = max ? Math.max(0, childrenArray.length - max) : 0;
+
+    // Calculate overlap offset based on size
+    const defaultOffsets = {
+      xs: -4,
+      sm: -6,
+      md: -8,
+      lg: -10,
+      xl: -12,
+      "2xl": -16,
+    };
+    const finalOffset = overlapOffset ?? defaultOffsets[size as keyof typeof defaultOffsets] ?? -8;
 
     return (
       <div
@@ -101,25 +114,27 @@ const MoonUIAvatarGroupPro = React.forwardRef<HTMLDivElement, AvatarGroupProps>(
         {...props}
       >
         <div className="flex">
-          {visibleAvatars.map((avatar, index) => (
+          {visibleChildren.map((child, index) => (
             <div 
               key={index} 
-              className="relative"
+              className="relative ring-2 ring-background rounded-full"
               style={{ 
-                marginLeft: index === 0 ? 0 : `${overlapOffset}px`,
-                zIndex: visibleAvatars.length - index 
+                marginLeft: index === 0 ? 0 : `${finalOffset}px`,
+                zIndex: visibleChildren.length - index 
               }}
             >
-              {avatar}
+              {React.isValidElement(child) && child.type === MoonUIAvatarPro
+                ? React.cloneElement(child as React.ReactElement<any>, { size })
+                : child}
             </div>
           ))}
           {remainingCount > 0 && (
             <div 
-              className="relative z-0"
-              style={{ marginLeft: `${overlapOffset}px` }}
+              className="relative z-0 ring-2 ring-background rounded-full"
+              style={{ marginLeft: `${finalOffset}px` }}
             >
-              <MoonUIAvatarPro variant="border">
-                <MoonUIAvatarFallbackPro>
+              <MoonUIAvatarPro size={size} className="bg-muted">
+                <MoonUIAvatarFallbackPro className="text-xs font-medium">
                   +{remainingCount}
                 </MoonUIAvatarFallbackPro>
               </MoonUIAvatarPro>
@@ -130,9 +145,9 @@ const MoonUIAvatarGroupPro = React.forwardRef<HTMLDivElement, AvatarGroupProps>(
     );
   }
 );
-MoonUIAvatarGroupPro.displayName = "AvatarGroup";
+MoonUIAvatarGroupPro.displayName = "MoonUIAvatarGroupPro";
 
-export { MoonUIAvatarPro, MoonUIAvatarImagePro, MoonUIAvatarFallbackPro, MoonUIAvatarGroupPro as AvatarGroup  };
+export { MoonUIAvatarPro, MoonUIAvatarImagePro, MoonUIAvatarFallbackPro, MoonUIAvatarGroupPro };
 
 // Backward compatibility exports
-export { MoonUIAvatarPro as Avatar, MoonUIAvatarImagePro as AvatarImage, MoonUIAvatarFallbackPro as AvatarFallback };
+export { MoonUIAvatarPro as Avatar, MoonUIAvatarImagePro as AvatarImage, MoonUIAvatarFallbackPro as AvatarFallback, MoonUIAvatarGroupPro as AvatarGroup };

package/src/hooks/use-toast.ts

@@ -0,0 +1,15 @@
+interface ToastOptions {
+  title: string
+  description?: string
+  variant?: 'default' | 'destructive'
+}
+
+export function useToast() {
+  const toast = (options: ToastOptions) => {
+    // Simple console implementation for now
+    // In production, this would integrate with a proper toast system
+    console.log(`[Toast] ${options.title}${options.description ? ': ' + options.description : ''}`)
+  }
+
+  return { toast }
+}

package/src/components/kanban/index.tsx

@@ -1,434 +0,0 @@
-"use client"
-
-import React from 'react'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card'
-import { Button } from '../ui/button'
-import { MoonUIBadgePro as Badge } from '../ui/badge'
-import { MoonUIAvatarPro, MoonUIAvatarFallbackPro, MoonUIAvatarImagePro } 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'
-
-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
-}
-
-interface KanbanColumn {
-  id: string
-  title: string
-  color?: string
-  cards: KanbanCard[]
-  limit?: number
-}
-
-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 { hasProAccess, isLoading } = useSubscription()
-  
-  // In docs mode, always show the component
-  
-  // If not in docs mode and no pro access, show upgrade prompt
-  if (!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 && (
-                              <MoonUIAvatarPro className="h-5 w-5">
-                                <MoonUIAvatarImagePro src={card.assignee.avatar} />
-                                <MoonUIAvatarFallbackPro className="text-xs">
-                                  {getInitials(card.assignee.name)}
-                                </MoonUIAvatarFallbackPro>
-                              </MoonUIAvatarPro>
-                            )}
-                          </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