@etus/ui 0.1.0

package/src/components/forms/DatePicker/DatePicker.tsx

@@ -0,0 +1,503 @@
+import type { DatePickerProps } from "./DatePicker.types"
+
+import { format as formatDate, isAfter, isBefore, setHours, setMinutes, startOfDay } from "date-fns"
+import { CalendarIcon, XIcon } from "lucide-react"
+import * as React from "react"
+
+import { cn } from "../../../lib/utils"
+import { Calendar } from "../../advanced/Calendar"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "../../feedback/Popover"
+import { ScrollArea } from "../../layout/ScrollArea"
+import { Button } from "../../primitives/Button"
+import { datePickerTriggerVariants } from "./DatePicker.variants"
+
+/**
+ * Convert 24h hours to 12h format with period
+ */
+function to12Hour(hours: number): { hour12: number; period: "AM" | "PM" } {
+  const period = hours >= 12 ? "PM" : "AM"
+  let hour12 = hours % 12
+  if (hour12 === 0) hour12 = 12
+  return { hour12, period }
+}
+
+/**
+ * Convert 12h format to 24h hours
+ */
+function to24Hour(hour12: number, period: "AM" | "PM"): number {
+  if (period === "AM") {
+    return hour12 === 12 ? 0 : hour12
+  }
+  return hour12 === 12 ? 12 : hour12 + 12
+}
+
+/**
+ * Generate array of hour options
+ */
+function getHourOptions(use12Hour: boolean): number[] {
+  if (use12Hour) {
+    return [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
+  }
+  return Array.from({ length: 24 }, (_, i) => i)
+}
+
+/**
+ * Generate array of minute options based on step
+ */
+function getMinuteOptions(step: number): number[] {
+  const options: number[] = []
+  for (let i = 0; i < 60; i += step) {
+    options.push(i)
+  }
+  return options
+}
+
+function DatePicker({
+  ref,
+  className,
+  value,
+  defaultValue,
+  placeholder = "Select date",
+  disabled = false,
+  disabledDates,
+  readOnly = false,
+  showTimePicker = false,
+  showToday = false,
+  timeLabel = "Time",
+  timeMinuteStep = 1,
+  timeUse12Hour = false,
+  todayLabel = "Today",
+  minDate,
+  maxDate,
+  format = "PPP",
+  locale,
+  onChange,
+  onOpenChange,
+  onClear,
+  size = "md",
+  variant = "default",
+  required = false,
+  invalid = false,
+  clearable = false,
+  calendarProps,
+  id,
+  name,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+  "aria-describedby": ariaDescribedby,
+  ...props
+}: DatePickerProps) {
+  const [open, setOpen] = React.useState(false)
+  const [internalDate, setInternalDate] = React.useState<Date | undefined>(defaultValue)
+
+  // Time state for when showTimePicker is enabled
+  const [internalHours, setInternalHours] = React.useState<number>(
+    defaultValue ? defaultValue.getHours() : 0
+  )
+  const [internalMinutes, setInternalMinutes] = React.useState<number>(
+    defaultValue ? defaultValue.getMinutes() : 0
+  )
+  const [internalPeriod, setInternalPeriod] = React.useState<"AM" | "PM">(() =>
+    defaultValue ? to12Hour(defaultValue.getHours()).period : "AM"
+  )
+
+  // Refs for auto-scrolling time columns
+  const hourListRef = React.useRef<HTMLDivElement>(null)
+  const minuteListRef = React.useRef<HTMLDivElement>(null)
+
+  // Use controlled value if provided, otherwise use internal state
+  const selectedDate = value ?? internalDate
+
+  // Get time from selected date or internal state
+  const currentHours = selectedDate ? selectedDate.getHours() : internalHours
+  const currentMinutes = selectedDate ? selectedDate.getMinutes() : internalMinutes
+  const currentPeriod = selectedDate
+    ? to12Hour(selectedDate.getHours()).period
+    : internalPeriod
+
+  // Compute defaultMonth once for clarity
+  const defaultMonth = selectedDate ?? minDate
+
+  // Scroll to selected time items when popover opens
+  React.useEffect(() => {
+    if (!open || !showTimePicker) return
+
+    const timeoutId = setTimeout(() => {
+      const selectedHour = hourListRef.current?.querySelector('[data-selected="true"]')
+      selectedHour?.scrollIntoView({ block: "center", behavior: "instant" })
+
+      const selectedMinute = minuteListRef.current?.querySelector('[data-selected="true"]')
+      selectedMinute?.scrollIntoView({ block: "center", behavior: "instant" })
+    }, 0)
+
+    return () => { clearTimeout(timeoutId) }
+  }, [open, showTimePicker, currentHours, currentMinutes])
+
+  const applyTimeToDate = (date: Date | undefined, hours: number, minutes: number): Date | undefined => {
+    if (!date) return undefined
+    return setMinutes(setHours(date, hours), minutes)
+  }
+
+  const handleSelect = (date: Date | undefined) => {
+    let finalDate = date
+    if (showTimePicker && date) {
+      // Apply current time to the selected date
+      finalDate = applyTimeToDate(date, currentHours, currentMinutes)
+    }
+
+    if (value === undefined) {
+      setInternalDate(finalDate)
+    }
+    onChange?.(finalDate)
+
+    // Only close if not showing time picker, or close after date selection
+    if (!showTimePicker) {
+      setOpen(false)
+    }
+  }
+
+  const handleTimeChange = (hours: number, minutes: number) => {
+    if (value === undefined) {
+      setInternalHours(hours)
+      setInternalMinutes(minutes)
+    }
+
+    if (selectedDate) {
+      const newDate = applyTimeToDate(selectedDate, hours, minutes)
+      if (value === undefined) {
+        setInternalDate(newDate)
+      }
+      onChange?.(newDate)
+    }
+  }
+
+  const handleHourSelect = (hour: number) => {
+    let newHours = hour
+    if (timeUse12Hour) {
+      newHours = to24Hour(hour, currentPeriod)
+    }
+    if (value === undefined) {
+      setInternalHours(newHours)
+    }
+    handleTimeChange(newHours, currentMinutes)
+  }
+
+  const handleMinuteSelect = (minute: number) => {
+    if (value === undefined) {
+      setInternalMinutes(minute)
+    }
+    handleTimeChange(currentHours, minute)
+  }
+
+  const handlePeriodSelect = (period: "AM" | "PM") => {
+    if (value === undefined) {
+      setInternalPeriod(period)
+    }
+    const hour12 = timeUse12Hour
+      ? currentHours % 12 || 12
+      : to12Hour(currentHours).hour12
+    const newHours = to24Hour(hour12, period)
+    if (value === undefined) {
+      setInternalHours(newHours)
+    }
+    handleTimeChange(newHours, currentMinutes)
+  }
+
+  const handleOpenChange = (isOpen: boolean) => {
+    // Don't open if readOnly
+    if (readOnly && isOpen) return
+
+    setOpen(isOpen)
+    onOpenChange?.(isOpen)
+  }
+
+  const handleClear = (event: React.MouseEvent) => {
+    event.stopPropagation()
+    if (value === undefined) {
+      setInternalDate(undefined)
+    }
+    onChange?.()
+    onClear?.()
+  }
+
+  // Format display value with time if showTimePicker is enabled
+  const displayValue = React.useMemo(() => {
+    if (!selectedDate) return null
+
+    const dateStr = formatDate(selectedDate, format, locale ? { locale } : undefined)
+
+    if (showTimePicker) {
+      const timeStr = timeUse12Hour
+        ? `${to12Hour(currentHours).hour12}:${currentMinutes.toString().padStart(2, "0")} ${currentPeriod}`
+        : `${currentHours.toString().padStart(2, "0")}:${currentMinutes.toString().padStart(2, "0")}`
+      return `${dateStr} ${timeStr}`
+    }
+
+    return dateStr
+  }, [selectedDate, format, locale, showTimePicker, timeUse12Hour, currentHours, currentMinutes, currentPeriod])
+
+  // Memoize time options
+  const hourOptions = React.useMemo(() => getHourOptions(timeUse12Hour), [timeUse12Hour])
+  const minuteOptions = React.useMemo(() => getMinuteOptions(timeMinuteStep), [timeMinuteStep])
+
+  // Calculate display hour for matching in 12h mode
+  const displayHour = timeUse12Hour
+    ? to12Hour(currentHours).hour12
+    : currentHours
+
+  const showClearButton = clearable && selectedDate && !disabled && !readOnly
+
+  // Combined date disabled check
+  const isDateDisabled = React.useCallback(
+    (date: Date): boolean => {
+      const normalizedDate = startOfDay(date)
+      if (minDate && isBefore(normalizedDate, startOfDay(minDate))) return true
+      if (maxDate && isAfter(normalizedDate, startOfDay(maxDate))) return true
+      if (disabledDates?.(date)) return true
+      return false
+    },
+    [minDate, maxDate, disabledDates]
+  )
+
+  // Check if today is disabled
+  const isTodayDisabled = React.useMemo(() => {
+    return isDateDisabled(new Date())
+  }, [isDateDisabled])
+
+  // Handle selecting today
+  const handleSelectToday = () => {
+    const today = startOfDay(new Date())
+    if (!isDateDisabled(today)) {
+      handleSelect(today)
+    }
+  }
+
+  return (
+    <div className={cn("relative", className)} data-slot="date-picker" {...props}>
+      <Popover open={open} onOpenChange={handleOpenChange}>
+        <PopoverTrigger asChild>
+          <button
+            ref={ref}
+            className={cn(
+              datePickerTriggerVariants({ size, variant }),
+              !displayValue && "text-muted-foreground"
+            )}
+            aria-describedby={ariaDescribedby}
+            aria-expanded={open}
+            aria-haspopup="dialog"
+            aria-invalid={invalid}
+            aria-label={ariaLabel}
+            aria-labelledby={ariaLabelledby}
+            aria-readonly={readOnly}
+            aria-required={required}
+            data-readonly={readOnly || undefined}
+            data-size={size}
+            data-slot="date-picker-trigger"
+            data-state={open ? "open" : "closed"}
+            data-variant={variant}
+            disabled={disabled}
+            id={id}
+            role="combobox"
+            type="button"
+          >
+            <span className="flex-1 truncate">
+              {displayValue ?? placeholder}
+            </span>
+            <span className="flex shrink-0 items-center gap-1">
+              {showClearButton && (
+                <span
+                  aria-label="Clear date"
+                  className="rounded-sm opacity-50 hover:opacity-100 focus:outline-none"
+                  data-slot="date-picker-clear"
+                  role="button"
+                  tabIndex={0}
+                  onClick={handleClear}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      e.preventDefault()
+                      handleClear(e as unknown as React.MouseEvent)
+                    }
+                  }}
+                >
+                  <XIcon className="size-4" />
+                </span>
+              )}
+              <CalendarIcon className="size-4 opacity-50" />
+            </span>
+          </button>
+        </PopoverTrigger>
+        <PopoverContent
+          align="start"
+          className="w-auto p-0"
+          data-slot="date-picker-calendar"
+        >
+          <Calendar
+            autoFocus
+            footer={
+              showToday ? (
+                <div className="border-t border-border p-2" data-slot="date-picker-footer">
+                  <Button
+                    className="w-full"
+                    disabled={isTodayDisabled}
+                    size="sm"
+                    variant="ghost"
+                    onClick={handleSelectToday}
+                  >
+                    {todayLabel}
+                  </Button>
+                </div>
+              ) : undefined
+            }
+            defaultMonth={defaultMonth}
+            disabled={isDateDisabled}
+            locale={locale}
+            mode="single"
+            selected={selectedDate}
+            onSelect={handleSelect}
+            {...calendarProps}
+          />
+
+          {/* Time Picker Section */}
+          {showTimePicker && (
+            <div
+              className="border-t border-border"
+              data-slot="date-picker-time"
+            >
+              <div className="px-3 py-2 text-xs font-medium text-muted-foreground">
+                {timeLabel}
+              </div>
+              <div
+                aria-label="Time selection"
+                className="flex divide-x border-t border-border"
+                role="listbox"
+              >
+                {/* Hours Column */}
+                <div className="flex flex-col">
+                  <div className="px-2 py-1.5 text-xs font-medium text-muted-foreground text-center border-b">
+                    {timeUse12Hour ? "Hour" : "Hours"}
+                  </div>
+                  <ScrollArea className="h-[150px]">
+                    <div
+                      ref={hourListRef}
+                      aria-label="Hours"
+                      className="flex flex-col items-stretch p-1"
+                      role="group"
+                    >
+                      {hourOptions.map((hour) => {
+                        const isSelected = displayHour === hour
+                        return (
+                          <button
+                            key={hour}
+                            aria-selected={isSelected}
+                            className={cn(
+                              "flex h-8 w-12 items-center justify-center rounded-sm text-sm",
+                              "hover:bg-accent hover:text-accent-foreground",
+                              "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                              isSelected && "bg-primary text-primary-foreground"
+                            )}
+                            data-selected={isSelected}
+                            role="option"
+                            type="button"
+                            onClick={() => { handleHourSelect(hour); }}
+                          >
+                            {timeUse12Hour ? hour : hour.toString().padStart(2, "0")}
+                          </button>
+                        )
+                      })}
+                    </div>
+                  </ScrollArea>
+                </div>
+
+                {/* Minutes Column */}
+                <div className="flex flex-col">
+                  <div className="px-2 py-1.5 text-xs font-medium text-muted-foreground text-center border-b">
+                    Min
+                  </div>
+                  <ScrollArea className="h-[150px]">
+                    <div
+                      ref={minuteListRef}
+                      aria-label="Minutes"
+                      className="flex flex-col items-stretch p-1"
+                      role="group"
+                    >
+                      {minuteOptions.map((minute) => {
+                        const isSelected = currentMinutes === minute
+                        return (
+                          <button
+                            key={minute}
+                            aria-selected={isSelected}
+                            className={cn(
+                              "flex h-8 w-12 items-center justify-center rounded-sm text-sm",
+                              "hover:bg-accent hover:text-accent-foreground",
+                              "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                              isSelected && "bg-primary text-primary-foreground"
+                            )}
+                            data-selected={isSelected}
+                            role="option"
+                            type="button"
+                            onClick={() => { handleMinuteSelect(minute); }}
+                          >
+                            {minute.toString().padStart(2, "0")}
+                          </button>
+                        )
+                      })}
+                    </div>
+                  </ScrollArea>
+                </div>
+
+                {/* AM/PM Column (12-hour mode only) */}
+                {timeUse12Hour && (
+                  <div className="flex flex-col">
+                    <div className="px-2 py-1.5 text-xs font-medium text-muted-foreground text-center border-b">
+                      &nbsp;
+                    </div>
+                    <div
+                      aria-label="Period"
+                      className="flex flex-col items-stretch p-1"
+                      role="group"
+                    >
+                      {(["AM", "PM"] as const).map((period) => {
+                        const isSelected = currentPeriod === period
+                        return (
+                          <button
+                            key={period}
+                            aria-selected={isSelected}
+                            className={cn(
+                              "flex h-8 w-12 items-center justify-center rounded-sm text-sm",
+                              "hover:bg-accent hover:text-accent-foreground",
+                              "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                              isSelected && "bg-primary text-primary-foreground"
+                            )}
+                            data-selected={isSelected}
+                            role="option"
+                            type="button"
+                            onClick={() => { handlePeriodSelect(period); }}
+                          >
+                            {period}
+                          </button>
+                        )
+                      })}
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+        </PopoverContent>
+      </Popover>
+      {name && (
+        <input
+          name={name}
+          type="hidden"
+          value={selectedDate?.toISOString() ?? ""}
+        />
+      )}
+    </div>
+  )
+}
+
+export { DatePicker }

package/src/components/forms/DatePicker/DatePicker.types.ts

@@ -0,0 +1,196 @@
+import type { Locale } from "date-fns"
+import type { ComponentProps, Ref } from "react"
+import type { DayPicker } from "react-day-picker"
+
+/**
+ * DatePicker size variants
+ */
+export type DatePickerSize = "lg" | "md" | "sm"
+
+/**
+ * DatePicker visual variants
+ */
+export type DatePickerVariant = "default" | "filled" | "flushed"
+
+/**
+ * Props that can be passed through to the Calendar component
+ */
+export type CalendarPassthroughProps = Omit<
+  ComponentProps<typeof DayPicker>,
+  | "autoFocus"
+  | "defaultMonth"
+  | "disabled"
+  | "mode"
+  | "onSelect"
+  | "selected"
+>
+
+/**
+ * DatePicker component props
+ */
+export interface DatePickerProps extends Omit<ComponentProps<"div">, "defaultValue" | "onChange" | "ref" | "value"> {
+  /**
+   * ID of element(s) that describe the input (for error messages, help text)
+   */
+  "aria-describedby"?: string
+
+  /**
+   * Additional props to pass to the Calendar component
+   */
+  calendarProps?: CalendarPassthroughProps
+
+  /**
+   * Whether to show a clear button when a date is selected
+   * @default false
+   */
+  clearable?: boolean
+
+  /**
+   * The default date value (uncontrolled)
+   */
+  defaultValue?: Date
+
+  /**
+   * Whether the date picker is disabled
+   * @default false
+   */
+  disabled?: boolean
+
+  /**
+   * Function to determine if a specific date should be disabled
+   * Return true to disable the date
+   * @example (date) => date.getDay() === 0 || date.getDay() === 6 // Disable weekends
+   */
+  disabledDates?: (date: Date) => boolean
+
+  /**
+   * Date format string for display
+   * @default "PPP" (e.g., "January 1, 2024")
+   */
+  format?: string
+
+  /**
+   * ID for the input (used for label association)
+   */
+  id?: string
+
+  /**
+   * Whether the field has an invalid value
+   * @default false
+   */
+  invalid?: boolean
+
+  /**
+   * Locale for date formatting and calendar
+   * @default undefined (uses browser locale)
+   */
+  locale?: Locale
+
+  /**
+   * Maximum selectable date
+   */
+  maxDate?: Date
+
+  /**
+   * Minimum selectable date
+   */
+  minDate?: Date
+
+  /**
+   * Name attribute for form submission
+   */
+  name?: string
+
+  /**
+   * Callback when the date changes
+   */
+  onChange?: (date?: Date) => void
+
+  /**
+   * Callback when the clear button is clicked
+   */
+  onClear?: () => void
+
+  /**
+   * Callback when the popover open state changes
+   */
+  onOpenChange?: (open: boolean) => void
+
+  /**
+   * Placeholder text shown when no date is selected
+   * @default "Select date"
+   */
+  placeholder?: string
+
+  /**
+   * Whether the field is read-only (focusable but not editable)
+   * @default false
+   */
+  readOnly?: boolean
+
+  /**
+   * Ref to the trigger button element
+   */
+  ref?: Ref<HTMLButtonElement>
+
+  /**
+   * Whether the field is required
+   * @default false
+   */
+  required?: boolean
+
+  /**
+   * Whether to show time selection alongside the date picker
+   * @default false
+   */
+  showTimePicker?: boolean
+
+  /**
+   * Whether to show a "Today" button in the calendar footer
+   * @default false
+   */
+  showToday?: boolean
+
+  /**
+   * Label for the time section header
+   * @default "Time"
+   */
+  timeLabel?: string
+
+  /**
+   * Step interval for minutes in time picker (e.g., 15 for 00, 15, 30, 45)
+   * Only used when showTimePicker is true
+   * @default 1
+   */
+  timeMinuteStep?: number
+
+  /**
+   * Use 12-hour format with AM/PM selector in time picker
+   * Only used when showTimePicker is true
+   * @default false
+   */
+  timeUse12Hour?: boolean
+
+  /**
+   * Visual size of the trigger
+   * @default "md"
+   */
+  size?: DatePickerSize
+
+  /**
+   * Label for the "Today" button
+   * @default "Today"
+   */
+  todayLabel?: string
+
+  /**
+   * The controlled selected date value
+   */
+  value?: Date
+
+  /**
+   * Visual variant of the trigger
+   * @default "default"
+   */
+  variant?: DatePickerVariant
+}