@wakastellar/ui 2.0.0 → 2.1.1

package/src/components/waka-date-range-picker/index.tsx

@@ -0,0 +1,378 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import { Calendar as CalendarIcon, X } from "lucide-react"
+import { Button } from "../button"
+import { Calendar } from "../calendar"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "../popover"
+import { format, isAfter, isBefore, isValid, startOfDay, endOfDay, subDays, startOfMonth, endOfMonth, startOfYear, subMonths, type Locale } from "date-fns"
+import { fr } from "date-fns/locale"
+import type { DateRange as RdpDateRange } from "react-day-picker"
+
+// ============================================
+// TYPES
+// ============================================
+
+// Re-export DateRange from react-day-picker for convenience
+export type { DateRange as WakaDateRange } from "react-day-picker"
+
+export interface WakaDateRangePickerProps {
+  /** Plage de dates sélectionnée */
+  value?: RdpDateRange
+  /** Callback lors du changement */
+  onChange?: (range: RdpDateRange | undefined) => void
+  /** Placeholder */
+  placeholder?: string
+  /** Format d'affichage */
+  dateFormat?: string
+  /** Date minimum */
+  minDate?: Date
+  /** Date maximum */
+  maxDate?: Date
+  /** Désactivé */
+  disabled?: boolean
+  /** Erreur */
+  error?: boolean
+  /** Afficher les presets */
+  showPresets?: boolean
+  /** Presets personnalisés */
+  presets?: DateRangePreset[]
+  /** Nombre de mois affichés */
+  numberOfMonths?: number
+  /** Locale */
+  locale?: Locale
+  /** Taille */
+  size?: "sm" | "md" | "lg"
+  /** Classes CSS additionnelles */
+  className?: string
+  /** ID pour l'accessibilité */
+  id?: string
+  /** Nom du champ */
+  name?: string
+  /** Permettre de vider la sélection */
+  clearable?: boolean
+}
+
+export interface DateRangePreset {
+  label: string
+  getValue: () => RdpDateRange
+}
+
+// ============================================
+// DEFAULT PRESETS
+// ============================================
+
+const defaultPresets: DateRangePreset[] = [
+  {
+    label: "Aujourd'hui",
+    getValue: () => ({
+      from: startOfDay(new Date()),
+      to: endOfDay(new Date()),
+    }),
+  },
+  {
+    label: "Hier",
+    getValue: () => ({
+      from: startOfDay(subDays(new Date(), 1)),
+      to: endOfDay(subDays(new Date(), 1)),
+    }),
+  },
+  {
+    label: "7 derniers jours",
+    getValue: () => ({
+      from: startOfDay(subDays(new Date(), 6)),
+      to: endOfDay(new Date()),
+    }),
+  },
+  {
+    label: "30 derniers jours",
+    getValue: () => ({
+      from: startOfDay(subDays(new Date(), 29)),
+      to: endOfDay(new Date()),
+    }),
+  },
+  {
+    label: "Ce mois",
+    getValue: () => ({
+      from: startOfMonth(new Date()),
+      to: endOfMonth(new Date()),
+    }),
+  },
+  {
+    label: "Mois dernier",
+    getValue: () => ({
+      from: startOfMonth(subMonths(new Date(), 1)),
+      to: endOfMonth(subMonths(new Date(), 1)),
+    }),
+  },
+  {
+    label: "Cette année",
+    getValue: () => ({
+      from: startOfYear(new Date()),
+      to: endOfDay(new Date()),
+    }),
+  },
+]
+
+// ============================================
+// MAIN COMPONENT
+// ============================================
+
+export function WakaDateRangePicker({
+  value,
+  onChange,
+  placeholder = "Sélectionner une période",
+  dateFormat = "dd/MM/yyyy",
+  minDate,
+  maxDate,
+  disabled = false,
+  error = false,
+  showPresets = true,
+  presets = defaultPresets,
+  numberOfMonths = 2,
+  locale = fr,
+  size = "md",
+  className,
+  id,
+  name,
+  clearable = true,
+}: WakaDateRangePickerProps) {
+  const [open, setOpen] = React.useState(false)
+  const [internalValue, setInternalValue] = React.useState<RdpDateRange | undefined>(value)
+
+  // Sync internal value with prop
+  React.useEffect(() => {
+    setInternalValue(value)
+  }, [value])
+
+  const handleSelect = (range: RdpDateRange | undefined) => {
+    setInternalValue(range)
+    onChange?.(range)
+  }
+
+  const handlePresetClick = (preset: DateRangePreset) => {
+    const range = preset.getValue()
+    handleSelect(range)
+    setOpen(false)
+  }
+
+  const handleClear = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    handleSelect(undefined)
+  }
+
+  const displayValue = React.useMemo(() => {
+    if (!internalValue?.from) return ""
+
+    const fromStr = format(internalValue.from, dateFormat, { locale })
+    if (!internalValue.to) return fromStr
+
+    const toStr = format(internalValue.to, dateFormat, { locale })
+    return `${fromStr} - ${toStr}`
+  }, [internalValue, dateFormat, locale])
+
+  const sizeClasses = {
+    sm: "h-8 text-xs px-2",
+    md: "h-9 text-sm px-3",
+    lg: "h-10 text-base px-4",
+  }
+
+  const iconSizes = {
+    sm: "h-3 w-3",
+    md: "h-4 w-4",
+    lg: "h-5 w-5",
+  }
+
+  // Disable dates outside range
+  const disabledMatcher = React.useMemo(() => {
+    const matchers: ((date: Date) => boolean)[] = []
+
+    if (minDate) {
+      matchers.push((date) => isBefore(date, startOfDay(minDate)))
+    }
+    if (maxDate) {
+      matchers.push((date) => isAfter(date, endOfDay(maxDate)))
+    }
+
+    return matchers.length > 0
+      ? (date: Date) => matchers.some((m) => m(date))
+      : undefined
+  }, [minDate, maxDate])
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          id={id}
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          disabled={disabled}
+          className={cn(
+            "w-full justify-start font-normal",
+            sizeClasses[size],
+            !displayValue && "text-muted-foreground",
+            error && "border-destructive focus-visible:ring-destructive",
+            className
+          )}
+        >
+          <CalendarIcon className={cn(iconSizes[size], "mr-2")} />
+          <span className="flex-1 text-left truncate">
+            {displayValue || placeholder}
+          </span>
+          {clearable && displayValue && !disabled && (
+            <X
+              className={cn(iconSizes[size], "ml-2 opacity-50 hover:opacity-100")}
+              onClick={handleClear}
+            />
+          )}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0" align="start">
+        <div className="flex">
+          {/* Presets sidebar */}
+          {showPresets && presets.length > 0 && (
+            <div className="border-r p-2 space-y-1">
+              {presets.map((preset, index) => (
+                <Button
+                  key={index}
+                  variant="ghost"
+                  size="sm"
+                  className="w-full justify-start text-xs"
+                  onClick={() => handlePresetClick(preset)}
+                >
+                  {preset.label}
+                </Button>
+              ))}
+            </div>
+          )}
+
+          {/* Calendar */}
+          <div className="p-3">
+            <Calendar
+              mode="range"
+              selected={internalValue}
+              onSelect={handleSelect}
+              numberOfMonths={numberOfMonths}
+              locale={locale}
+              disabled={disabledMatcher}
+              initialFocus
+            />
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className="border-t p-3 flex justify-between items-center">
+          <div className="text-xs text-muted-foreground">
+            {internalValue?.from && internalValue?.to && (
+              <>
+                {Math.ceil(
+                  (internalValue.to.getTime() - internalValue.from.getTime()) /
+                    (1000 * 60 * 60 * 24)
+                ) + 1}{" "}
+                jours sélectionnés
+              </>
+            )}
+          </div>
+          <div className="flex gap-2">
+            {clearable && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => handleSelect(undefined)}
+              >
+                Effacer
+              </Button>
+            )}
+            <Button
+              size="sm"
+              onClick={() => setOpen(false)}
+            >
+              Appliquer
+            </Button>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+// ============================================
+// HOOK
+// ============================================
+
+export interface UseDateRangePickerOptions {
+  /** Valeur initiale */
+  initialValue?: RdpDateRange
+  /** Date minimum */
+  minDate?: Date
+  /** Date maximum */
+  maxDate?: Date
+}
+
+export function useDateRangePicker(options: UseDateRangePickerOptions = {}) {
+  const { initialValue, minDate, maxDate } = options
+  const [value, setValue] = React.useState<RdpDateRange | undefined>(initialValue)
+
+  const clear = () => setValue(undefined)
+
+  const setToday = () => {
+    setValue({
+      from: startOfDay(new Date()),
+      to: endOfDay(new Date()),
+    })
+  }
+
+  const setThisWeek = () => {
+    setValue({
+      from: startOfDay(subDays(new Date(), 6)),
+      to: endOfDay(new Date()),
+    })
+  }
+
+  const setThisMonth = () => {
+    setValue({
+      from: startOfMonth(new Date()),
+      to: endOfMonth(new Date()),
+    })
+  }
+
+  const isValidRange = (range: RdpDateRange | undefined): boolean => {
+    if (!range?.from || !range?.to) return false
+    if (!isValid(range.from) || !isValid(range.to)) return false
+    if (isAfter(range.from, range.to)) return false
+    if (minDate && isBefore(range.from, startOfDay(minDate))) return false
+    if (maxDate && isAfter(range.to, endOfDay(maxDate))) return false
+    return true
+  }
+
+  const getDayCount = (): number | null => {
+    if (!value?.from || !value?.to) return null
+    return Math.ceil(
+      (value.to.getTime() - value.from.getTime()) / (1000 * 60 * 60 * 24)
+    ) + 1
+  }
+
+  return {
+    value,
+    onChange: setValue,
+    clear,
+    setToday,
+    setThisWeek,
+    setThisMonth,
+    isValidRange: () => isValidRange(value),
+    dayCount: getDayCount(),
+    minDate,
+    maxDate,
+  }
+}
+
+// Re-export presets for customization
+export { defaultPresets }
+
+export default WakaDateRangePicker