@etus/ui 0.1.1 → 0.1.2

package/src/components/advanced/EventCalendar/EventCalendar.types.ts

@@ -1,232 +0,0 @@
-import type { HTMLAttributes } from "react"
-
-/**
- * Recurrence rule for repeating events
- */
-export interface RecurrenceRule {
-  /** Days of week for weekly recurrence (0 = Sunday) */
-  byDay?: number[]
-  /** Maximum number of occurrences */
-  count?: number
-  /** Frequency of recurrence */
-  frequency: "daily" | "monthly" | "weekly" | "yearly"
-  /** Interval between occurrences */
-  interval?: number
-  /** End date for recurrence */
-  until?: Date
-}
-
-/**
- * Calendar event interface
- */
-export interface CalendarEvent {
-  /** Whether event spans entire day(s) */
-  allDay?: boolean
-  /** Event category for filtering/grouping */
-  category?: string
-  /** Event color (CSS color value or semantic color) */
-  color?: string
-  /** Event description */
-  description?: string
-  /** End date/time */
-  end: Date
-  /** Unique identifier */
-  id: string
-  /** Event location */
-  location?: string
-  /** Additional metadata */
-  metadata?: Record<string, unknown>
-  /** Recurrence rule for repeating events */
-  recurring?: RecurrenceRule
-  /** Start date/time */
-  start: Date
-  /** Event title */
-  title: string
-}
-
-/**
- * Time slot for event creation
- */
-export interface TimeSlot {
-  /** Whether this is an all-day slot */
-  allDay?: boolean
-  /** End of the time slot */
-  end: Date
-  /** Start of the time slot */
-  start: Date
-}
-
-/**
- * Calendar view type
- */
-export type EventCalendarView = "agenda" | "day" | "month" | "week"
-
-/**
- * EventCalendar component props
- */
-export interface EventCalendarProps
-  extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
-  /** Currently focused date */
-  date?: Date
-  /** Whether events can be edited (drag/resize) */
-  editable?: boolean
-  /** List of events to display */
-  events?: CalendarEvent[]
-  /** Whether the calendar is in loading state */
-  loading?: boolean
-  /** Locale for date formatting */
-  locale?: string
-  /** Maximum time displayed in day/week views */
-  maxTime?: string
-  /** Minimum time displayed in day/week views */
-  minTime?: string
-  /** Callback when date changes */
-  onDateChange?: (date: Date) => void
-  /** Callback when an event is clicked */
-  onEventClick?: (event: CalendarEvent) => void
-  /** Callback when a time slot is selected for new event */
-  onEventCreate?: (slot: TimeSlot) => void
-  /** Callback when an event is deleted */
-  onEventDelete?: (id: string) => void
-  /** Callback when an event is updated (e.g., via drag) */
-  onEventUpdate?: (
-    event: CalendarEvent,
-    changes: Partial<CalendarEvent>
-  ) => void
-  /** Callback when view changes */
-  onViewChange?: (view: EventCalendarView) => void
-  /** Custom event renderer */
-  renderEvent?: (event: CalendarEvent) => React.ReactNode
-  /** Whether time slots can be selected */
-  selectable?: boolean
-  /** Current view mode */
-  view?: EventCalendarView
-  /** First day of the week (0 = Sunday, 1 = Monday) */
-  weekStartsOn?: 0 | 1
-}
-
-/**
- * EventCalendarHeader component props
- */
-export interface EventCalendarHeaderProps {
-  /** Current date being viewed */
-  date: Date
-  /** Locale for date formatting */
-  locale?: string
-  /** Callback to navigate to next period */
-  onNext: () => void
-  /** Callback to navigate to previous period */
-  onPrevious: () => void
-  /** Callback to go to today */
-  onToday: () => void
-  /** Callback when view changes */
-  onViewChange: (view: EventCalendarView) => void
-  /** Current view mode */
-  view: EventCalendarView
-}
-
-/**
- * EventCalendarEvent component props
- */
-export interface EventCalendarEventProps {
-  /** The event data */
-  event: CalendarEvent
-  /** Whether the event is being dragged */
-  isDragging?: boolean
-  /** Callback when event is clicked */
-  onClick?: (event: CalendarEvent) => void
-  /** Custom renderer */
-  renderEvent?: (event: CalendarEvent) => React.ReactNode
-}
-
-/**
- * EventCalendarMonth component props
- */
-export interface EventCalendarMonthProps {
-  /** Current date being viewed */
-  date: Date
-  /** List of events */
-  events: CalendarEvent[]
-  /** Locale for date formatting */
-  locale?: string
-  /** Callback when a day is clicked */
-  onDayClick?: (date: Date) => void
-  /** Callback when an event is clicked */
-  onEventClick?: (event: CalendarEvent) => void
-  /** Callback when a time slot is selected */
-  onSlotSelect?: (slot: TimeSlot) => void
-  /** Custom event renderer */
-  renderEvent?: (event: CalendarEvent) => React.ReactNode
-  /** Whether slots are selectable */
-  selectable: boolean
-  /** First day of week */
-  weekStartsOn: 0 | 1
-}
-
-/**
- * EventCalendarWeek component props
- */
-export interface EventCalendarWeekProps {
-  /** Current date being viewed */
-  date: Date
-  /** List of events */
-  events: CalendarEvent[]
-  /** Locale for date formatting */
-  locale?: string
-  /** Maximum time displayed */
-  maxTime: string
-  /** Minimum time displayed */
-  minTime: string
-  /** Callback when an event is clicked */
-  onEventClick?: (event: CalendarEvent) => void
-  /** Callback when a time slot is selected */
-  onSlotSelect?: (slot: TimeSlot) => void
-  /** Custom event renderer */
-  renderEvent?: (event: CalendarEvent) => React.ReactNode
-  /** Whether slots are selectable */
-  selectable: boolean
-  /** First day of week */
-  weekStartsOn: 0 | 1
-}
-
-/**
- * EventCalendarDay component props
- */
-export interface EventCalendarDayProps {
-  /** Current date being viewed */
-  date: Date
-  /** List of events */
-  events: CalendarEvent[]
-  /** Locale for date formatting */
-  locale?: string
-  /** Maximum time displayed */
-  maxTime: string
-  /** Minimum time displayed */
-  minTime: string
-  /** Callback when an event is clicked */
-  onEventClick?: (event: CalendarEvent) => void
-  /** Callback when a time slot is selected */
-  onSlotSelect?: (slot: TimeSlot) => void
-  /** Custom event renderer */
-  renderEvent?: (event: CalendarEvent) => React.ReactNode
-  /** Whether slots are selectable */
-  selectable: boolean
-}
-
-/**
- * EventCalendarAgenda component props
- */
-export interface EventCalendarAgendaProps {
-  /** Current date being viewed */
-  date: Date
-  /** Number of days to show in agenda */
-  daysToShow?: number
-  /** List of events */
-  events: CalendarEvent[]
-  /** Locale for date formatting */
-  locale?: string
-  /** Callback when an event is clicked */
-  onEventClick?: (event: CalendarEvent) => void
-  /** Custom event renderer */
-  renderEvent?: (event: CalendarEvent) => React.ReactNode
-}

package/src/components/advanced/EventCalendar/EventCalendar.variants.ts

@@ -1,222 +0,0 @@
-import { cva } from "class-variance-authority"
-
-/**
- * EventCalendar container variants
- */
-export const eventCalendarVariants = cva(
-  "flex flex-col bg-background rounded-lg border border-border overflow-hidden",
-  {
-    variants: {
-      size: {
-        sm: "min-h-[400px]",
-        md: "min-h-[500px]",
-        lg: "min-h-[600px]",
-        full: "h-full min-h-[500px]",
-      },
-    },
-    defaultVariants: {
-      size: "md",
-    },
-  }
-)
-
-/**
- * Calendar header variants
- */
-export const eventCalendarHeaderVariants = cva(
-  "flex items-center justify-between p-3 border-b border-border bg-muted/30",
-  {
-    variants: {
-      compact: {
-        true: "p-2",
-        false: "p-3",
-      },
-    },
-    defaultVariants: {
-      compact: false,
-    },
-  }
-)
-
-/**
- * Calendar grid cell variants
- */
-export const eventCalendarCellVariants = cva(
-  "relative min-h-[80px] border-r border-b border-border p-1 transition-colors",
-  {
-    variants: {
-      isToday: {
-        true: "bg-primary/5",
-        false: "",
-      },
-      isWeekend: {
-        true: "bg-muted/30",
-        false: "",
-      },
-      isOutsideMonth: {
-        true: "bg-muted/50 text-muted-foreground",
-        false: "",
-      },
-      isSelected: {
-        true: "ring-2 ring-primary ring-inset",
-        false: "",
-      },
-      isSelectable: {
-        true: "cursor-pointer hover:bg-accent/50",
-        false: "",
-      },
-    },
-    defaultVariants: {
-      isToday: false,
-      isWeekend: false,
-      isOutsideMonth: false,
-      isSelected: false,
-      isSelectable: true,
-    },
-  }
-)
-
-/**
- * Calendar event chip variants
- * Uses semantic chart colors for event categorization
- */
-export const eventCalendarEventVariants = cva(
-  "group relative rounded px-1.5 py-0.5 text-xs font-medium truncate cursor-pointer transition-all",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary/10 text-primary hover:bg-primary/20",
-        blue: "bg-[color:var(--chart-3)]/10 text-[color:var(--chart-3)] hover:bg-[color:var(--chart-3)]/20",
-        green: "bg-[color:var(--chart-2)]/10 text-[color:var(--chart-2)] hover:bg-[color:var(--chart-2)]/20",
-        red: "bg-destructive/10 text-destructive hover:bg-destructive/20",
-        yellow: "bg-[color:var(--chart-4)]/10 text-[color:var(--chart-4)] hover:bg-[color:var(--chart-4)]/20",
-        purple: "bg-[color:var(--chart-1)]/10 text-[color:var(--chart-1)] hover:bg-[color:var(--chart-1)]/20",
-        orange: "bg-[color:var(--chart-5)]/10 text-[color:var(--chart-5)] hover:bg-[color:var(--chart-5)]/20",
-        pink: "bg-[color:var(--chart-1)]/10 text-[color:var(--chart-1)] hover:bg-[color:var(--chart-1)]/20",
-        cyan: "bg-[color:var(--chart-2)]/10 text-[color:var(--chart-2)] hover:bg-[color:var(--chart-2)]/20",
-      },
-      isAllDay: {
-        true: "font-semibold",
-        false: "",
-      },
-      isDragging: {
-        true: "opacity-50 ring-2 ring-primary",
-        false: "",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      isAllDay: false,
-      isDragging: false,
-    },
-  }
-)
-
-/**
- * Time slot variants for week/day views
- */
-export const eventCalendarTimeSlotVariants = cva(
-  "relative border-b border-border transition-colors",
-  {
-    variants: {
-      isHour: {
-        true: "border-border",
-        false: "border-border/50",
-      },
-      isCurrentTime: {
-        true: "before:absolute before:left-0 before:right-0 before:h-0.5 before:bg-destructive before:z-10",
-        false: "",
-      },
-      isSelectable: {
-        true: "cursor-pointer hover:bg-accent/30",
-        false: "",
-      },
-    },
-    defaultVariants: {
-      isHour: false,
-      isCurrentTime: false,
-      isSelectable: true,
-    },
-  }
-)
-
-/**
- * View toggle button variants
- */
-export const eventCalendarViewButtonVariants = cva(
-  "px-3 py-1.5 text-sm font-medium rounded-md transition-colors",
-  {
-    variants: {
-      isActive: {
-        true: "bg-primary text-primary-foreground",
-        false: "text-muted-foreground hover:text-foreground hover:bg-muted",
-      },
-    },
-    defaultVariants: {
-      isActive: false,
-    },
-  }
-)
-
-/**
- * Day number variants
- */
-export const eventCalendarDayNumberVariants = cva(
-  "inline-flex items-center justify-center w-7 h-7 text-sm rounded-full transition-colors",
-  {
-    variants: {
-      isToday: {
-        true: "bg-primary text-primary-foreground font-semibold",
-        false: "text-foreground",
-      },
-      isOutsideMonth: {
-        true: "text-muted-foreground",
-        false: "",
-      },
-    },
-    defaultVariants: {
-      isToday: false,
-      isOutsideMonth: false,
-    },
-  }
-)
-
-/**
- * Agenda item variants
- */
-export const eventCalendarAgendaItemVariants = cva(
-  "flex items-start gap-3 p-3 rounded-lg transition-colors",
-  {
-    variants: {
-      isClickable: {
-        true: "cursor-pointer hover:bg-muted/50",
-        false: "",
-      },
-    },
-    defaultVariants: {
-      isClickable: true,
-    },
-  }
-)
-
-/**
- * Map color string to variant
- */
-export function getEventVariant(
-  color?: string
-): "blue" | "cyan" | "default" | "green" | "orange" | "pink" | "purple" | "red" | "yellow" {
-  if (!color) return "default"
-
-  const colorMap: Record<string, "blue" | "cyan" | "green" | "orange" | "pink" | "purple" | "red" | "yellow"> = {
-    blue: "blue",
-    green: "green",
-    red: "red",
-    yellow: "yellow",
-    purple: "purple",
-    orange: "orange",
-    pink: "pink",
-    cyan: "cyan",
-  }
-
-  return colorMap[color.toLowerCase()] ?? "default"
-}