@moontra/moonui-pro 2.0.22 → 2.0.23

package/src/components/calendar/index.tsx

@@ -0,0 +1,531 @@
+"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 { 
+  ChevronLeft, 
+  ChevronRight,
+  Calendar as CalendarIcon,
+  Plus,
+  Edit,
+  Trash2,
+  Clock,
+  MapPin,
+  User,
+  Lock,
+  Sparkles
+} from 'lucide-react'
+import { cn } from '../../lib/utils'
+import { EventDialog } from './event-dialog'
+
+export interface CalendarEvent {
+  id: string
+  title: string
+  description?: string
+  date: Date
+  startTime?: string
+  endTime?: string
+  location?: string
+  attendees?: string[]
+  color?: string
+  type?: 'meeting' | 'task' | 'reminder' | 'event'
+}
+
+export interface CalendarProps {
+  events?: CalendarEvent[]
+  onEventClick?: (event: CalendarEvent) => void
+  onEventAdd?: (eventData: Omit<CalendarEvent, 'id'> & { id?: string }) => void
+  onEventEdit?: (eventData: Omit<CalendarEvent, 'id'> & { id: string }) => void
+  onEventDelete?: (eventId: string) => void
+  className?: string
+  showWeekends?: boolean
+  showEventDetails?: boolean
+  disabled?: boolean
+  minDate?: Date
+  maxDate?: Date
+  highlightToday?: boolean
+  height?: number
+  // For NPM package usage - allows external control of pro access
+  showProUpgrade?: boolean
+}
+
+const DAYS_OF_WEEK = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+const MONTHS = [
+  'January', 'February', 'March', 'April', 'May', 'June',
+  'July', 'August', 'September', 'October', 'November', 'December'
+]
+
+const EVENT_COLORS = {
+  meeting: 'bg-blue-500',
+  task: 'bg-green-500',
+  reminder: 'bg-yellow-500',
+  event: 'bg-purple-500'
+}
+
+export function Calendar({
+  events = [],
+  onEventClick,
+  onEventAdd,
+  onEventEdit,
+  onEventDelete,
+  className,
+  showWeekends = true,
+  showEventDetails = true,
+  disabled = false,
+  minDate,
+  maxDate,
+  highlightToday = true,
+  height,
+  showProUpgrade = false
+}: CalendarProps) {
+  // For NPM package usage, show upgrade prompt if specified
+  if (showProUpgrade) {
+    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">
+                Calendar 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 [currentDate, setCurrentDate] = React.useState(new Date())
+  const [selectedDate, setSelectedDate] = React.useState<Date | null>(null)
+  const [view, setView] = React.useState<'month' | 'week' | 'day'>('month')
+  const [eventDialogOpen, setEventDialogOpen] = React.useState(false)
+  const [eventDialogMode, setEventDialogMode] = React.useState<'create' | 'edit'>('create')
+  const [selectedEvent, setSelectedEvent] = React.useState<CalendarEvent | null>(null)
+  const [draggedEvent, setDraggedEvent] = React.useState<CalendarEvent | null>(null)
+  const [dragTargetDate, setDragTargetDate] = React.useState<Date | null>(null)
+
+  const today = new Date()
+  const currentMonth = currentDate.getMonth()
+  const currentYear = currentDate.getFullYear()
+
+  const firstDayOfMonth = new Date(currentYear, currentMonth, 1)
+  const lastDayOfMonth = new Date(currentYear, currentMonth + 1, 0)
+  const startDate = new Date(firstDayOfMonth)
+  startDate.setDate(startDate.getDate() - startDate.getDay())
+
+  const endDate = new Date(lastDayOfMonth)
+  endDate.setDate(endDate.getDate() + (6 - endDate.getDay()))
+
+  const calendarDays = []
+  const currentDateIterator = new Date(startDate)
+
+  while (currentDateIterator <= endDate) {
+    calendarDays.push(new Date(currentDateIterator))
+    currentDateIterator.setDate(currentDateIterator.getDate() + 1)
+  }
+
+  const getEventsForDate = (date: Date) => {
+    return events.filter(event => {
+      const eventDate = new Date(event.date)
+      return eventDate.toDateString() === date.toDateString()
+    })
+  }
+
+  const isToday = (date: Date) => {
+    return date.toDateString() === today.toDateString()
+  }
+
+  const isCurrentMonth = (date: Date) => {
+    return date.getMonth() === currentMonth
+  }
+
+  const isSelected = (date: Date) => {
+    return selectedDate && date.toDateString() === selectedDate.toDateString()
+  }
+
+  const isDisabled = (date: Date) => {
+    if (disabled) return true
+    if (minDate && date < minDate) return true
+    if (maxDate && date > maxDate) return true
+    return false
+  }
+
+  const navigateMonth = (direction: 'prev' | 'next') => {
+    const newDate = new Date(currentDate)
+    if (direction === 'prev') {
+      newDate.setMonth(currentMonth - 1)
+    } else {
+      newDate.setMonth(currentMonth + 1)
+    }
+    setCurrentDate(newDate)
+  }
+
+  const handleDateClick = (date: Date) => {
+    if (isDisabled(date)) return
+    
+    setSelectedDate(date)
+    const dateEvents = getEventsForDate(date)
+    
+    if (dateEvents.length === 0) {
+      // Open dialog for creating new event
+      setEventDialogMode('create')
+      setSelectedEvent(null)
+      setEventDialogOpen(true)
+    } else if (dateEvents.length === 1) {
+      onEventClick?.(dateEvents[0])
+    }
+  }
+
+  const handleEventClick = (event: CalendarEvent, e: React.MouseEvent) => {
+    e.stopPropagation()
+    onEventClick?.(event)
+  }
+
+  const handleEventDragStart = (event: CalendarEvent, e: React.DragEvent) => {
+    setDraggedEvent(event)
+    e.dataTransfer.effectAllowed = 'move'
+    e.dataTransfer.setData('text/plain', event.id)
+    
+    // Add visual feedback
+    const target = e.target as HTMLElement
+    target.style.opacity = '0.5'
+  }
+
+  const handleEventDragEnd = (e: React.DragEvent) => {
+    setDraggedEvent(null)
+    setDragTargetDate(null)
+    
+    // Remove visual feedback
+    const target = e.target as HTMLElement
+    target.style.opacity = '1'
+  }
+
+  const handleDateDragOver = (date: Date, e: React.DragEvent) => {
+    if (isDisabled(date) || !draggedEvent) return
+    e.preventDefault()
+    e.dataTransfer.dropEffect = 'move'
+    setDragTargetDate(date)
+  }
+
+  const handleDateDrop = (date: Date, e: React.DragEvent) => {
+    e.preventDefault()
+    
+    if (!draggedEvent || isDisabled(date)) return
+    
+    // Only move if it's a different date
+    if (draggedEvent.date.toDateString() !== date.toDateString()) {
+      const updatedEvent = {
+        ...draggedEvent,
+        date: date
+      }
+      
+      onEventEdit?.(updatedEvent)
+    }
+    
+    setDraggedEvent(null)
+    setDragTargetDate(null)
+  }
+
+  const handleEventEdit = (event: CalendarEvent, e: React.MouseEvent) => {
+    e.stopPropagation()
+    setEventDialogMode('edit')
+    setSelectedEvent(event)
+    setEventDialogOpen(true)
+  }
+
+  const handleEventDelete = (event: CalendarEvent, e: React.MouseEvent) => {
+    e.stopPropagation()
+    onEventDelete?.(event.id)
+  }
+
+  const handleEventSave = (eventData: Omit<CalendarEvent, 'id'> & { id?: string }) => {
+    if (eventDialogMode === 'create') {
+      onEventAdd?.(eventData)
+    } else if (eventDialogMode === 'edit' && eventData.id) {
+      onEventEdit?.(eventData as Omit<CalendarEvent, 'id'> & { id: string })
+    }
+  }
+
+  const handleEventDialogDelete = (eventId: string) => {
+    onEventDelete?.(eventId)
+  }
+
+  const goToToday = () => {
+    setCurrentDate(new Date())
+    setSelectedDate(new Date())
+  }
+
+  const filteredDays = showWeekends ? calendarDays : calendarDays.filter(day => {
+    const dayOfWeek = day.getDay()
+    return dayOfWeek !== 0 && dayOfWeek !== 6
+  })
+
+  const visibleDaysOfWeek = showWeekends ? DAYS_OF_WEEK : DAYS_OF_WEEK.slice(1, 6)
+
+  return (
+    <>
+      <Card className={cn("w-full max-w-full overflow-hidden", className)} style={{ height: height ? `${height}px` : undefined }}>
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <div>
+            <CardTitle className="flex items-center gap-2">
+              <CalendarIcon className="h-5 w-5" />
+              Calendar
+            </CardTitle>
+            <CardDescription>
+              {MONTHS[currentMonth]} {currentYear}
+            </CardDescription>
+          </div>
+          <div className="flex items-center gap-2">
+            <Button variant="outline" size="sm" onClick={goToToday}>
+              Today
+            </Button>
+            <Button 
+              variant="outline" 
+              size="sm" 
+              onClick={() => navigateMonth('prev')}
+              disabled={disabled}
+            >
+              <ChevronLeft className="h-4 w-4" />
+            </Button>
+            <Button 
+              variant="outline" 
+              size="sm" 
+              onClick={() => navigateMonth('next')}
+              disabled={disabled}
+            >
+              <ChevronRight className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent className="overflow-x-auto">
+        <div className="space-y-4">
+          {/* Calendar Grid */}
+          <div className="grid grid-cols-7 gap-1 w-full" style={{ minWidth: "500px" }}>
+            {/* Day Headers */}
+            {visibleDaysOfWeek.map((day) => (
+              <div key={day} className="p-1 text-center text-xs font-medium text-muted-foreground min-w-[70px]">
+                {day}
+              </div>
+            ))}
+
+            {/* Calendar Days */}
+            {filteredDays.map((date, index) => {
+              const dayEvents = getEventsForDate(date)
+              const isCurrentMonthDate = isCurrentMonth(date)
+              const isTodayDate = isToday(date)
+              const isSelectedDate = isSelected(date)
+              const isDisabledDate = isDisabled(date)
+
+              return (
+                <div
+                  key={index}
+                  className={cn(
+                    "min-h-[80px] min-w-[70px] p-1 border border-border/50 cursor-pointer hover:bg-muted/50 transition-colors text-xs flex flex-col",
+                    !isCurrentMonthDate && "text-muted-foreground bg-muted/20",
+                    isTodayDate && highlightToday && "bg-primary/10 border-primary/50",
+                    isSelectedDate && "bg-primary/20 border-primary",
+                    isDisabledDate && "cursor-not-allowed opacity-50",
+                    dragTargetDate && dragTargetDate.toDateString() === date.toDateString() && "bg-primary/30 border-primary"
+                  )}
+                  onClick={() => handleDateClick(date)}
+                  onDragOver={(e) => handleDateDragOver(date, e)}
+                  onDrop={(e) => handleDateDrop(date, e)}
+                >
+                  <div className="flex items-center justify-between mb-1">
+                    <span className={cn(
+                      "text-sm font-medium",
+                      isTodayDate && "text-primary font-bold"
+                    )}>
+                      {date.getDate()}
+                    </span>
+                    {dayEvents.length > 0 && (
+                      <Badge variant="secondary" className="text-xs px-1">
+                        {dayEvents.length}
+                      </Badge>
+                    )}
+                  </div>
+
+                  {/* Events */}
+                  <div className="flex-1 space-y-1 overflow-hidden">
+                    {dayEvents.slice(0, 3).map((event) => (
+                      <div
+                        key={event.id}
+                        className={cn(
+                          "text-xs p-1 mb-1 rounded text-white cursor-move group relative select-none block w-full truncate",
+                          event.color || EVENT_COLORS[event.type || 'event']
+                        )}
+                        draggable={!disabled}
+                        onClick={(e) => handleEventClick(event, e)}
+                        onDragStart={(e) => handleEventDragStart(event, e)}
+                        onDragEnd={handleEventDragEnd}
+                        style={{
+                          backgroundColor: event.color || undefined
+                        }}
+                      >
+                        <div className="flex items-center justify-between">
+                          <span className="truncate flex-1">{event.title}</span>
+                          {showEventDetails && (
+                            <div className="hidden group-hover:flex items-center gap-1 ml-1">
+                              <Button
+                                variant="ghost"
+                                size="sm"
+                                className="h-4 w-4 p-0 text-white/80 hover:text-white"
+                                onClick={(e) => handleEventEdit(event, e)}
+                              >
+                                <Edit className="h-3 w-3" />
+                              </Button>
+                              <Button
+                                variant="ghost"
+                                size="sm"
+                                className="h-4 w-4 p-0 text-white/80 hover:text-white"
+                                onClick={(e) => handleEventDelete(event, e)}
+                              >
+                                <Trash2 className="h-3 w-3" />
+                              </Button>
+                            </div>
+                          )}
+                        </div>
+                        {event.startTime && (
+                          <div className="flex items-center gap-1 mt-1">
+                            <Clock className="h-3 w-3" />
+                            <span>{event.startTime}</span>
+                          </div>
+                        )}
+                      </div>
+                    ))}
+                    {dayEvents.length > 3 && (
+                      <div className="text-xs text-muted-foreground text-center">
+                        +{dayEvents.length - 3} more
+                      </div>
+                    )}
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+
+          {/* Selected Date Details */}
+          {selectedDate && (
+            <div className="border rounded-lg p-4 bg-muted/50">
+              <h4 className="font-medium mb-2">
+                {selectedDate.toLocaleDateString('en-US', { 
+                  weekday: 'long', 
+                  year: 'numeric', 
+                  month: 'long', 
+                  day: 'numeric' 
+                })}
+              </h4>
+              
+              <div className="space-y-2">
+                {getEventsForDate(selectedDate).map((event) => (
+                  <div key={event.id} className="flex items-start gap-3 p-2 border rounded">
+                    <div className={cn(
+                      "w-3 h-3 rounded-full mt-1 flex-shrink-0",
+                      event.color || EVENT_COLORS[event.type || 'event']
+                    )} />
+                    <div className="flex-1">
+                      <div className="flex items-center justify-between">
+                        <h5 className="font-medium">{event.title}</h5>
+                        <div className="flex items-center gap-1">
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={(e) => handleEventEdit(event, e)}
+                          >
+                            <Edit className="h-4 w-4" />
+                          </Button>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={(e) => handleEventDelete(event, e)}
+                          >
+                            <Trash2 className="h-4 w-4" />
+                          </Button>
+                        </div>
+                      </div>
+                      {event.description && (
+                        <p className="text-sm text-muted-foreground mt-1">
+                          {event.description}
+                        </p>
+                      )}
+                      <div className="flex items-center gap-4 text-xs text-muted-foreground mt-2">
+                        {event.startTime && (
+                          <div className="flex items-center gap-1">
+                            <Clock className="h-3 w-3" />
+                            <span>{event.startTime} - {event.endTime}</span>
+                          </div>
+                        )}
+                        {event.location && (
+                          <div className="flex items-center gap-1">
+                            <MapPin className="h-3 w-3" />
+                            <span>{event.location}</span>
+                          </div>
+                        )}
+                        {event.attendees && event.attendees.length > 0 && (
+                          <div className="flex items-center gap-1">
+                            <User className="h-3 w-3" />
+                            <span>{event.attendees.length} attendees</span>
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                ))}
+                
+                {getEventsForDate(selectedDate).length === 0 && (
+                  <div className="text-center py-4">
+                    <p className="text-sm text-muted-foreground mb-2">
+                      No events scheduled for this date
+                    </p>
+                    <Button 
+                      variant="outline" 
+                      size="sm" 
+                      onClick={() => {
+                        setEventDialogMode('create')
+                        setSelectedEvent(null)
+                        setEventDialogOpen(true)
+                      }}
+                    >
+                      <Plus className="h-4 w-4 mr-1" />
+                      Add Event
+                    </Button>
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+
+    {/* Event Dialog */}
+    <EventDialog
+      open={eventDialogOpen}
+      onOpenChange={setEventDialogOpen}
+      event={selectedEvent}
+      selectedDate={selectedDate}
+      onSave={handleEventSave}
+      onDelete={handleEventDialogDelete}
+      mode={eventDialogMode}
+    />
+  </>
+  )
+}
+
+export default Calendar