@wakastellar/ui 1.0.12 → 2.1.0

package/src/blocks/calendar-view/index.tsx

@@ -0,0 +1,756 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils"
+import { Button } from "../../components/button"
+import { Badge } from "../../components/badge"
+import { Card, CardContent, CardHeader, CardTitle } from "../../components/card"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "../../components/popover"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "../../components/dialog"
+import { Input } from "../../components/input"
+import { Label } from "../../components/label"
+import { Textarea } from "../../components/textarea"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../../components/select"
+import {
+  ChevronLeft,
+  ChevronRight,
+  Plus,
+  Clock,
+  MapPin,
+  Users,
+  Calendar as CalendarIcon,
+  MoreHorizontal,
+  Edit,
+  Trash2,
+  X,
+} from "lucide-react"
+
+// ============================================
+// TYPES
+// ============================================
+
+export type CalendarViewMode = "month" | "week" | "day" | "agenda"
+
+export type EventColor =
+  | "blue"
+  | "green"
+  | "red"
+  | "yellow"
+  | "purple"
+  | "pink"
+  | "orange"
+  | "cyan"
+
+export interface CalendarEvent {
+  id: string
+  title: string
+  description?: string
+  start: Date | string
+  end: Date | string
+  allDay?: boolean
+  color?: EventColor
+  location?: string
+  attendees?: { id: string; name: string; avatar?: string }[]
+  recurring?: "daily" | "weekly" | "monthly" | "yearly"
+  metadata?: Record<string, unknown>
+}
+
+export interface WakaCalendarViewProps {
+  /** Événements */
+  events: CalendarEvent[]
+  /** Date courante */
+  currentDate?: Date
+  /** Callback changement de date */
+  onDateChange?: (date: Date) => void
+  /** Mode de vue */
+  viewMode?: CalendarViewMode
+  /** Callback changement de mode */
+  onViewModeChange?: (mode: CalendarViewMode) => void
+  /** Callback clic sur un événement */
+  onEventClick?: (event: CalendarEvent) => void
+  /** Callback création d'événement */
+  onEventCreate?: (event: Partial<CalendarEvent>) => void
+  /** Callback modification d'événement */
+  onEventEdit?: (eventId: string, data: Partial<CalendarEvent>) => void
+  /** Callback suppression d'événement */
+  onEventDelete?: (eventId: string) => void
+  /** Callback clic sur un jour */
+  onDayClick?: (date: Date) => void
+  /** Afficher le header */
+  showHeader?: boolean
+  /** Afficher le sélecteur de vue */
+  showViewSelector?: boolean
+  /** Afficher le bouton ajouter */
+  showAddButton?: boolean
+  /** Premier jour de la semaine (0 = dimanche, 1 = lundi) */
+  weekStartsOn?: 0 | 1
+  /** Locale */
+  locale?: string
+  /** Classes CSS additionnelles */
+  className?: string
+}
+
+// ============================================
+// COLOR CONFIG
+// ============================================
+
+const eventColors: Record<EventColor, { bg: string; text: string; border: string }> = {
+  blue: { bg: "bg-blue-100", text: "text-blue-700", border: "border-blue-500" },
+  green: { bg: "bg-green-100", text: "text-green-700", border: "border-green-500" },
+  red: { bg: "bg-red-100", text: "text-red-700", border: "border-red-500" },
+  yellow: { bg: "bg-yellow-100", text: "text-yellow-700", border: "border-yellow-500" },
+  purple: { bg: "bg-purple-100", text: "text-purple-700", border: "border-purple-500" },
+  pink: { bg: "bg-pink-100", text: "text-pink-700", border: "border-pink-500" },
+  orange: { bg: "bg-orange-100", text: "text-orange-700", border: "border-orange-500" },
+  cyan: { bg: "bg-cyan-100", text: "text-cyan-700", border: "border-cyan-500" },
+}
+
+// ============================================
+// HELPERS
+// ============================================
+
+function getDaysInMonth(year: number, month: number): Date[] {
+  const days: Date[] = []
+  const firstDay = new Date(year, month, 1)
+  const lastDay = new Date(year, month + 1, 0)
+
+  for (let d = 1; d <= lastDay.getDate(); d++) {
+    days.push(new Date(year, month, d))
+  }
+
+  return days
+}
+
+function getWeekDays(date: Date, weekStartsOn: 0 | 1): Date[] {
+  const days: Date[] = []
+  const day = date.getDay()
+  const diff = (day < weekStartsOn ? 7 : 0) + day - weekStartsOn
+
+  const start = new Date(date)
+  start.setDate(date.getDate() - diff)
+
+  for (let i = 0; i < 7; i++) {
+    const d = new Date(start)
+    d.setDate(start.getDate() + i)
+    days.push(d)
+  }
+
+  return days
+}
+
+function isSameDay(d1: Date, d2: Date): boolean {
+  return (
+    d1.getFullYear() === d2.getFullYear() &&
+    d1.getMonth() === d2.getMonth() &&
+    d1.getDate() === d2.getDate()
+  )
+}
+
+function getEventsForDay(events: CalendarEvent[], date: Date): CalendarEvent[] {
+  return events.filter((event) => {
+    const start = typeof event.start === "string" ? new Date(event.start) : event.start
+    const end = typeof event.end === "string" ? new Date(event.end) : event.end
+
+    if (event.allDay) {
+      return isSameDay(start, date) || (date >= start && date <= end)
+    }
+
+    return isSameDay(start, date)
+  })
+}
+
+// ============================================
+// SUB-COMPONENTS
+// ============================================
+
+interface CalendarHeaderProps {
+  currentDate: Date
+  viewMode: CalendarViewMode
+  onPrevious: () => void
+  onNext: () => void
+  onToday: () => void
+  onViewModeChange?: (mode: CalendarViewMode) => void
+  onAddClick?: () => void
+  showViewSelector: boolean
+  showAddButton: boolean
+  locale: string
+}
+
+function CalendarHeader({
+  currentDate,
+  viewMode,
+  onPrevious,
+  onNext,
+  onToday,
+  onViewModeChange,
+  onAddClick,
+  showViewSelector,
+  showAddButton,
+  locale,
+}: CalendarHeaderProps) {
+  const getTitle = (): string => {
+    switch (viewMode) {
+      case "month":
+        return currentDate.toLocaleDateString(locale, { month: "long", year: "numeric" })
+      case "week":
+        return `Semaine du ${currentDate.toLocaleDateString(locale, { day: "numeric", month: "long" })}`
+      case "day":
+        return currentDate.toLocaleDateString(locale, {
+          weekday: "long",
+          day: "numeric",
+          month: "long",
+          year: "numeric",
+        })
+      case "agenda":
+        return "Agenda"
+      default:
+        return ""
+    }
+  }
+
+  return (
+    <div className="flex items-center justify-between mb-4">
+      <div className="flex items-center gap-2">
+        <Button variant="outline" size="icon" onClick={onPrevious}>
+          <ChevronLeft className="h-4 w-4" />
+        </Button>
+        <Button variant="outline" size="icon" onClick={onNext}>
+          <ChevronRight className="h-4 w-4" />
+        </Button>
+        <Button variant="outline" size="sm" onClick={onToday}>
+          Aujourd'hui
+        </Button>
+        <h2 className="text-xl font-semibold ml-4 capitalize">{getTitle()}</h2>
+      </div>
+
+      <div className="flex items-center gap-2">
+        {showViewSelector && onViewModeChange && (
+          <Select value={viewMode} onValueChange={(v) => onViewModeChange(v as CalendarViewMode)}>
+            <SelectTrigger className="w-[120px]">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="month">Mois</SelectItem>
+              <SelectItem value="week">Semaine</SelectItem>
+              <SelectItem value="day">Jour</SelectItem>
+              <SelectItem value="agenda">Agenda</SelectItem>
+            </SelectContent>
+          </Select>
+        )}
+        {showAddButton && onAddClick && (
+          <Button onClick={onAddClick}>
+            <Plus className="h-4 w-4 mr-2" />
+            Événement
+          </Button>
+        )}
+      </div>
+    </div>
+  )
+}
+
+interface EventBadgeProps {
+  event: CalendarEvent
+  onClick?: () => void
+  compact?: boolean
+}
+
+function EventBadge({ event, onClick, compact = false }: EventBadgeProps) {
+  const color = eventColors[event.color || "blue"]
+  const start = typeof event.start === "string" ? new Date(event.start) : event.start
+
+  return (
+    <button
+      onClick={(e) => {
+        e.stopPropagation()
+        onClick?.()
+      }}
+      className={cn(
+        "w-full text-left rounded px-1.5 py-0.5 text-xs truncate border-l-2",
+        color.bg,
+        color.text,
+        color.border
+      )}
+    >
+      {!event.allDay && !compact && (
+        <span className="font-medium mr-1">
+          {start.toLocaleTimeString("fr-FR", { hour: "2-digit", minute: "2-digit" })}
+        </span>
+      )}
+      {event.title}
+    </button>
+  )
+}
+
+interface EventPopoverProps {
+  event: CalendarEvent
+  onEdit?: () => void
+  onDelete?: () => void
+}
+
+function EventPopover({ event, onEdit, onDelete }: EventPopoverProps) {
+  const start = typeof event.start === "string" ? new Date(event.start) : event.start
+  const end = typeof event.end === "string" ? new Date(event.end) : event.end
+  const color = eventColors[event.color || "blue"]
+
+  return (
+    <div className="w-72">
+      <div className="flex items-start justify-between">
+        <div className={cn("w-3 h-3 rounded-full mt-1", color.bg.replace("100", "500"))} />
+        <div className="flex gap-1">
+          {onEdit && (
+            <Button variant="ghost" size="icon" className="h-7 w-7" onClick={onEdit}>
+              <Edit className="h-3 w-3" />
+            </Button>
+          )}
+          {onDelete && (
+            <Button variant="ghost" size="icon" className="h-7 w-7" onClick={onDelete}>
+              <Trash2 className="h-3 w-3" />
+            </Button>
+          )}
+        </div>
+      </div>
+
+      <h4 className="font-semibold mt-2">{event.title}</h4>
+
+      <div className="space-y-2 mt-3 text-sm text-muted-foreground">
+        <div className="flex items-center gap-2">
+          <Clock className="h-4 w-4" />
+          {event.allDay ? (
+            <span>Toute la journée</span>
+          ) : (
+            <span>
+              {start.toLocaleString("fr-FR", {
+                weekday: "short",
+                day: "numeric",
+                month: "short",
+                hour: "2-digit",
+                minute: "2-digit",
+              })}
+              {" - "}
+              {end.toLocaleTimeString("fr-FR", { hour: "2-digit", minute: "2-digit" })}
+            </span>
+          )}
+        </div>
+
+        {event.location && (
+          <div className="flex items-center gap-2">
+            <MapPin className="h-4 w-4" />
+            <span>{event.location}</span>
+          </div>
+        )}
+
+        {event.attendees && event.attendees.length > 0 && (
+          <div className="flex items-center gap-2">
+            <Users className="h-4 w-4" />
+            <span>{event.attendees.length} participant(s)</span>
+          </div>
+        )}
+      </div>
+
+      {event.description && (
+        <p className="mt-3 text-sm">{event.description}</p>
+      )}
+    </div>
+  )
+}
+
+interface MonthViewProps {
+  currentDate: Date
+  events: CalendarEvent[]
+  weekStartsOn: 0 | 1
+  locale: string
+  onDayClick?: (date: Date) => void
+  onEventClick?: (event: CalendarEvent) => void
+  onEventEdit?: (eventId: string, data: Partial<CalendarEvent>) => void
+  onEventDelete?: (eventId: string) => void
+}
+
+function MonthView({
+  currentDate,
+  events,
+  weekStartsOn,
+  locale,
+  onDayClick,
+  onEventClick,
+  onEventEdit,
+  onEventDelete,
+}: MonthViewProps) {
+  const year = currentDate.getFullYear()
+  const month = currentDate.getMonth()
+  const days = getDaysInMonth(year, month)
+  const today = new Date()
+
+  // Get day names
+  const dayNames = Array.from({ length: 7 }, (_, i) => {
+    const d = new Date(2024, 0, weekStartsOn + i)
+    return d.toLocaleDateString(locale, { weekday: "short" })
+  })
+
+  // Get first day offset
+  const firstDay = new Date(year, month, 1)
+  const startOffset = (firstDay.getDay() - weekStartsOn + 7) % 7
+
+  // Build calendar grid
+  const grid: (Date | null)[] = []
+  for (let i = 0; i < startOffset; i++) {
+    grid.push(null)
+  }
+  grid.push(...days)
+
+  // Fill remaining cells
+  while (grid.length % 7 !== 0) {
+    grid.push(null)
+  }
+
+  return (
+    <div className="border rounded-lg overflow-hidden">
+      {/* Day headers */}
+      <div className="grid grid-cols-7 bg-muted">
+        {dayNames.map((name) => (
+          <div key={name} className="p-2 text-center text-sm font-medium capitalize">
+            {name}
+          </div>
+        ))}
+      </div>
+
+      {/* Calendar grid */}
+      <div className="grid grid-cols-7">
+        {grid.map((date, index) => {
+          const dayEvents = date ? getEventsForDay(events, date) : []
+          const isToday = date && isSameDay(date, today)
+          const isCurrentMonth = date && date.getMonth() === month
+
+          return (
+            <div
+              key={index}
+              className={cn(
+                "min-h-[100px] border-t border-l p-1 cursor-pointer hover:bg-muted/50",
+                !isCurrentMonth && "bg-muted/30 text-muted-foreground"
+              )}
+              onClick={() => date && onDayClick?.(date)}
+            >
+              {date && (
+                <>
+                  <div
+                    className={cn(
+                      "text-sm font-medium mb-1 w-7 h-7 flex items-center justify-center rounded-full",
+                      isToday && "bg-primary text-primary-foreground"
+                    )}
+                  >
+                    {date.getDate()}
+                  </div>
+                  <div className="space-y-1">
+                    {dayEvents.slice(0, 3).map((event) => (
+                      <Popover key={event.id}>
+                        <PopoverTrigger asChild>
+                          <div>
+                            <EventBadge
+                              event={event}
+                              onClick={() => onEventClick?.(event)}
+                              compact
+                            />
+                          </div>
+                        </PopoverTrigger>
+                        <PopoverContent>
+                          <EventPopover
+                            event={event}
+                            onEdit={() => onEventEdit?.(event.id, {})}
+                            onDelete={() => onEventDelete?.(event.id)}
+                          />
+                        </PopoverContent>
+                      </Popover>
+                    ))}
+                    {dayEvents.length > 3 && (
+                      <button className="text-xs text-muted-foreground hover:text-foreground">
+                        +{dayEvents.length - 3} autres
+                      </button>
+                    )}
+                  </div>
+                </>
+              )}
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+interface AgendaViewProps {
+  currentDate: Date
+  events: CalendarEvent[]
+  locale: string
+  onEventClick?: (event: CalendarEvent) => void
+}
+
+function AgendaView({ currentDate, events, locale, onEventClick }: AgendaViewProps) {
+  // Get events for the next 30 days
+  const upcomingEvents = events
+    .filter((event) => {
+      const start = typeof event.start === "string" ? new Date(event.start) : event.start
+      const thirtyDaysLater = new Date(currentDate)
+      thirtyDaysLater.setDate(thirtyDaysLater.getDate() + 30)
+      return start >= currentDate && start <= thirtyDaysLater
+    })
+    .sort((a, b) => {
+      const aStart = typeof a.start === "string" ? new Date(a.start) : a.start
+      const bStart = typeof b.start === "string" ? new Date(b.start) : b.start
+      return aStart.getTime() - bStart.getTime()
+    })
+
+  // Group by date
+  const groupedEvents: Record<string, CalendarEvent[]> = {}
+  upcomingEvents.forEach((event) => {
+    const start = typeof event.start === "string" ? new Date(event.start) : event.start
+    const key = start.toDateString()
+    if (!groupedEvents[key]) {
+      groupedEvents[key] = []
+    }
+    groupedEvents[key].push(event)
+  })
+
+  return (
+    <div className="space-y-4">
+      {Object.entries(groupedEvents).map(([dateKey, dayEvents]) => {
+        const date = new Date(dateKey)
+        return (
+          <div key={dateKey}>
+            <h3 className="text-sm font-medium text-muted-foreground mb-2 capitalize">
+              {date.toLocaleDateString(locale, {
+                weekday: "long",
+                day: "numeric",
+                month: "long",
+              })}
+            </h3>
+            <div className="space-y-2">
+              {dayEvents.map((event) => {
+                const color = eventColors[event.color || "blue"]
+                const start = typeof event.start === "string" ? new Date(event.start) : event.start
+                const end = typeof event.end === "string" ? new Date(event.end) : event.end
+
+                return (
+                  <Card
+                    key={event.id}
+                    className="cursor-pointer hover:shadow-md transition-shadow"
+                    onClick={() => onEventClick?.(event)}
+                  >
+                    <CardContent className="p-3 flex gap-3">
+                      <div className={cn("w-1 rounded-full", color.bg.replace("100", "500"))} />
+                      <div className="flex-1">
+                        <h4 className="font-medium">{event.title}</h4>
+                        <p className="text-sm text-muted-foreground">
+                          {event.allDay
+                            ? "Toute la journée"
+                            : `${start.toLocaleTimeString(locale, { hour: "2-digit", minute: "2-digit" })} - ${end.toLocaleTimeString(locale, { hour: "2-digit", minute: "2-digit" })}`}
+                        </p>
+                        {event.location && (
+                          <p className="text-sm text-muted-foreground flex items-center gap-1 mt-1">
+                            <MapPin className="h-3 w-3" />
+                            {event.location}
+                          </p>
+                        )}
+                      </div>
+                    </CardContent>
+                  </Card>
+                )
+              })}
+            </div>
+          </div>
+        )
+      })}
+
+      {Object.keys(groupedEvents).length === 0 && (
+        <div className="text-center py-12 text-muted-foreground">
+          Aucun événement à venir
+        </div>
+      )}
+    </div>
+  )
+}
+
+// ============================================
+// MAIN COMPONENT
+// ============================================
+
+export function WakaCalendarView({
+  events,
+  currentDate: externalCurrentDate,
+  onDateChange,
+  viewMode: externalViewMode,
+  onViewModeChange,
+  onEventClick,
+  onEventCreate,
+  onEventEdit,
+  onEventDelete,
+  onDayClick,
+  showHeader = true,
+  showViewSelector = true,
+  showAddButton = true,
+  weekStartsOn = 1,
+  locale = "fr-FR",
+  className,
+}: WakaCalendarViewProps) {
+  const [internalCurrentDate, setInternalCurrentDate] = React.useState(new Date())
+  const [internalViewMode, setInternalViewMode] = React.useState<CalendarViewMode>("month")
+  const [isAddDialogOpen, setIsAddDialogOpen] = React.useState(false)
+
+  const currentDate = externalCurrentDate ?? internalCurrentDate
+  const viewMode = externalViewMode ?? internalViewMode
+
+  const handleDateChange = (date: Date) => {
+    if (onDateChange) {
+      onDateChange(date)
+    } else {
+      setInternalCurrentDate(date)
+    }
+  }
+
+  const handleViewModeChange = (mode: CalendarViewMode) => {
+    if (onViewModeChange) {
+      onViewModeChange(mode)
+    } else {
+      setInternalViewMode(mode)
+    }
+  }
+
+  const navigatePrevious = () => {
+    const newDate = new Date(currentDate)
+    switch (viewMode) {
+      case "month":
+        newDate.setMonth(newDate.getMonth() - 1)
+        break
+      case "week":
+        newDate.setDate(newDate.getDate() - 7)
+        break
+      case "day":
+        newDate.setDate(newDate.getDate() - 1)
+        break
+    }
+    handleDateChange(newDate)
+  }
+
+  const navigateNext = () => {
+    const newDate = new Date(currentDate)
+    switch (viewMode) {
+      case "month":
+        newDate.setMonth(newDate.getMonth() + 1)
+        break
+      case "week":
+        newDate.setDate(newDate.getDate() + 7)
+        break
+      case "day":
+        newDate.setDate(newDate.getDate() + 1)
+        break
+    }
+    handleDateChange(newDate)
+  }
+
+  const navigateToday = () => {
+    handleDateChange(new Date())
+  }
+
+  return (
+    <div className={cn("space-y-4", className)}>
+      {showHeader && (
+        <CalendarHeader
+          currentDate={currentDate}
+          viewMode={viewMode}
+          onPrevious={navigatePrevious}
+          onNext={navigateNext}
+          onToday={navigateToday}
+          onViewModeChange={handleViewModeChange}
+          onAddClick={() => setIsAddDialogOpen(true)}
+          showViewSelector={showViewSelector}
+          showAddButton={showAddButton}
+          locale={locale}
+        />
+      )}
+
+      {viewMode === "month" && (
+        <MonthView
+          currentDate={currentDate}
+          events={events}
+          weekStartsOn={weekStartsOn}
+          locale={locale}
+          onDayClick={onDayClick}
+          onEventClick={onEventClick}
+          onEventEdit={onEventEdit}
+          onEventDelete={onEventDelete}
+        />
+      )}
+
+      {viewMode === "agenda" && (
+        <AgendaView
+          currentDate={currentDate}
+          events={events}
+          locale={locale}
+          onEventClick={onEventClick}
+        />
+      )}
+
+      {(viewMode === "week" || viewMode === "day") && (
+        <div className="text-center py-12 text-muted-foreground">
+          Vue {viewMode === "week" ? "semaine" : "jour"} - À implémenter
+        </div>
+      )}
+    </div>
+  )
+}
+
+// ============================================
+// PRESETS
+// ============================================
+
+export const defaultCalendarEvents: CalendarEvent[] = [
+  {
+    id: "1",
+    title: "Réunion d'équipe",
+    start: new Date(),
+    end: new Date(Date.now() + 1000 * 60 * 60),
+    color: "blue",
+    location: "Salle de réunion A",
+  },
+  {
+    id: "2",
+    title: "Déjeuner avec le client",
+    start: new Date(Date.now() + 1000 * 60 * 60 * 24),
+    end: new Date(Date.now() + 1000 * 60 * 60 * 25),
+    color: "green",
+    location: "Restaurant Le Gourmet",
+  },
+  {
+    id: "3",
+    title: "Formation React",
+    start: new Date(Date.now() + 1000 * 60 * 60 * 24 * 2),
+    end: new Date(Date.now() + 1000 * 60 * 60 * 24 * 2 + 1000 * 60 * 60 * 4),
+    color: "purple",
+    allDay: true,
+  },
+  {
+    id: "4",
+    title: "Deadline projet",
+    start: new Date(Date.now() + 1000 * 60 * 60 * 24 * 5),
+    end: new Date(Date.now() + 1000 * 60 * 60 * 24 * 5),
+    color: "red",
+    allDay: true,
+  },
+]
+
+export default WakaCalendarView