@fabio.caffarello/react-design-system 1.7.0 → 1.8.0

package/src/ui/molecules/DatePicker/DatePicker.tsx

@@ -0,0 +1,231 @@
+'use client';
+
+import React, { useState, useRef, useEffect, type ReactNode, type RefObject } from 'react';
+import { createPortal } from 'react-dom';
+import { DatePickerProvider } from './DatePickerProvider';
+import { DatePickerInput } from './DatePickerInput';
+import { DatePickerCalendar } from './DatePickerCalendar';
+import { getRadiusClass, getShadowClass } from '../../tokens';
+
+export interface DatePickerProps {
+  children?: ReactNode;
+  mode?: 'single' | 'range';
+  value?: Date | { start: Date | null; end: Date | null };
+  defaultValue?: Date | { start: Date | null; end: Date | null };
+  onValueChange?: (value: Date | { start: Date | null; end: Date | null } | null) => void;
+  minDate?: Date;
+  maxDate?: Date;
+  disabledDates?: Date[];
+  placeholder?: string;
+  format?: string;
+  showCalendarButton?: boolean;
+  'aria-label'?: string;
+  className?: string;
+}
+
+/**
+ * DatePicker Component
+ * 
+ * A flexible date picker component with single date and range selection.
+ * Supports keyboard navigation and basic localization.
+ * 
+ * @example
+ * ```tsx
+ * // Single date
+ * <DatePicker
+ *   value={selectedDate}
+ *   onValueChange={setSelectedDate}
+ * />
+ * 
+ * // Date range
+ * <DatePicker
+ *   mode="range"
+ *   value={{ start: rangeStart, end: rangeEnd }}
+ *   onValueChange={setRange}
+ * />
+ * 
+ * // Compound components
+ * <DatePicker>
+ *   <DatePicker.Input />
+ *   <DatePicker.Calendar />
+ * </DatePicker>
+ * ```
+ */
+function DatePickerComponent({
+  children,
+  mode = 'single',
+  value,
+  defaultValue,
+  onValueChange,
+  minDate,
+  maxDate,
+  disabledDates,
+  placeholder,
+  format,
+  showCalendarButton = true,
+  'aria-label': ariaLabel,
+  className = '',
+}: DatePickerProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const popupRef = useRef<HTMLDivElement>(null);
+
+  // Close calendar when clicking outside
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleClickOutside = (event: MouseEvent) => {
+      const target = event.target as Node;
+      
+      // Check if click is outside both container and popup
+      const clickedInsideContainer = containerRef.current?.contains(target) ?? false;
+      const clickedInsidePopup = popupRef.current?.contains(target) ?? false;
+      
+      // Close if clicked outside both container and popup
+      if (!clickedInsideContainer && !clickedInsidePopup) {
+        setIsOpen(false);
+      }
+    };
+
+    // Use mousedown instead of click to catch the event before it bubbles
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [isOpen]);
+
+  // Close on Escape key
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('keydown', handleEscape);
+    return () => document.removeEventListener('keydown', handleEscape);
+  }, [isOpen]);
+
+  // If children provided, use compound component API
+  if (children) {
+    return (
+      <DatePickerProvider
+        mode={mode}
+        value={value}
+        defaultValue={defaultValue}
+        onValueChange={onValueChange}
+        minDate={minDate}
+        maxDate={maxDate}
+        disabledDates={disabledDates}
+      >
+        {children}
+      </DatePickerProvider>
+    );
+  }
+
+  // Otherwise, use simplified API
+  return (
+    <div ref={containerRef} className={`relative ${className}`}>
+      <DatePickerProvider
+        mode={mode}
+        value={value}
+        defaultValue={defaultValue}
+        onValueChange={onValueChange}
+        minDate={minDate}
+        maxDate={maxDate}
+        disabledDates={disabledDates}
+      >
+        <DatePickerInput
+          placeholder={placeholder}
+          format={format}
+          showCalendarButton={showCalendarButton}
+          aria-label={ariaLabel}
+          onFocus={() => setIsOpen(true)}
+        />
+        {isOpen && (
+          <DatePickerPopup containerRef={containerRef} popupRef={popupRef}>
+            <DatePickerCalendar />
+          </DatePickerPopup>
+        )}
+      </DatePickerProvider>
+    </div>
+  );
+}
+
+// Popup component for calendar
+function DatePickerPopup({ 
+  children, 
+  containerRef,
+  popupRef: externalPopupRef 
+}: { 
+  children: ReactNode; 
+  containerRef?: RefObject<HTMLDivElement>;
+  popupRef?: RefObject<HTMLDivElement>;
+}) {
+  const internalPopupRef = useRef<HTMLDivElement>(null);
+  const popupRef = externalPopupRef || internalPopupRef;
+  const [position, setPosition] = useState<{ top: number; left: number } | null>(null);
+
+  // Calculate position relative to container
+  useEffect(() => {
+    if (containerRef?.current) {
+      const containerRect = containerRef.current.getBoundingClientRect();
+      
+      setPosition({
+        top: containerRect.bottom + window.scrollY + 8,
+        left: containerRect.left + window.scrollX,
+      });
+    }
+  }, [containerRef]);
+
+  if (!position) {
+    return null; // Wait for position calculation
+  }
+
+  const popup = (
+    <div
+      ref={popupRef}
+      className={`
+        fixed z-50
+        bg-white
+        ${getRadiusClass('lg')}
+        ${getShadowClass('xl')}
+        border border-gray-200
+      `}
+      role="dialog"
+      aria-modal="false"
+      aria-label="Date picker calendar"
+      style={{
+        top: `${position.top}px`,
+        left: `${position.left}px`,
+      }}
+    >
+      {children}
+    </div>
+  );
+
+  // Portal rendering for better z-index handling
+  if (typeof window !== 'undefined') {
+    return createPortal(popup, document.body);
+  }
+
+  return popup;
+}
+
+// Compound components
+DatePickerComponent.Input = DatePickerInput;
+DatePickerComponent.Calendar = DatePickerCalendar;
+DatePickerComponent.Popup = DatePickerPopup;
+
+// Type declaration for compound components
+export interface DatePickerComponentType extends React.FC<DatePickerProps> {
+  Input: typeof DatePickerInput;
+  Calendar: typeof DatePickerCalendar;
+  Popup: typeof DatePickerPopup;
+}
+
+// Cast to include compound components and export as DatePicker
+const DatePicker: DatePickerComponentType = DatePickerComponent as DatePickerComponentType;
+
+export { DatePickerComponent };
+export default DatePicker;

package/src/ui/molecules/DatePicker/DatePickerCalendar.tsx

@@ -0,0 +1,277 @@
+'use client';
+
+import { useState, useEffect, useRef, type HTMLAttributes, type KeyboardEvent } from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { useDatePickerContext } from './DatePickerContext';
+import Button from '../../atoms/Button/Button';
+import { getColorClass, getRadiusClass } from '../../tokens';
+
+export interface DatePickerCalendarProps extends HTMLAttributes<HTMLDivElement> {
+  month?: Date; // Current month to display
+  onMonthChange?: (month: Date) => void;
+}
+
+// Helper functions for date manipulation (without date-fns dependency)
+function getDaysInMonth(date: Date): number {
+  return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
+}
+
+function getFirstDayOfMonth(date: Date): number {
+  return new Date(date.getFullYear(), date.getMonth(), 1).getDay();
+}
+
+function isSameDay(date1: Date | null, date2: Date | null): boolean {
+  if (!date1 || !date2) return false;
+  return (
+    date1.getFullYear() === date2.getFullYear() &&
+    date1.getMonth() === date2.getMonth() &&
+    date1.getDate() === date2.getDate()
+  );
+}
+
+function isSameMonth(date1: Date, date2: Date): boolean {
+  return date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth();
+}
+
+function isDateInRange(date: Date, start: Date | null, end: Date | null): boolean {
+  if (!start || !end) return false;
+  const time = date.getTime();
+  return time >= start.getTime() && time <= end.getTime();
+}
+
+function isDateDisabled(date: Date, minDate?: Date, maxDate?: Date, disabledDates?: Date[]): boolean {
+  if (minDate && date < minDate) return true;
+  if (maxDate && date > maxDate) return true;
+  if (disabledDates?.some(d => isSameDay(date, d))) return true;
+  return false;
+}
+
+const WEEKDAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+const MONTHS = [
+  'January', 'February', 'March', 'April', 'May', 'June',
+  'July', 'August', 'September', 'October', 'November', 'December'
+];
+
+export function DatePickerCalendar({
+  month: controlledMonth,
+  onMonthChange,
+  className = '',
+  ...props
+}: DatePickerCalendarProps) {
+  const {
+    selectedDate,
+    selectedRange,
+    mode,
+    onDateChange,
+    onRangeChange,
+    minDate,
+    maxDate,
+    disabledDates,
+  } = useDatePickerContext();
+
+  const [currentMonth, setCurrentMonth] = useState<Date>(
+    controlledMonth || selectedDate || selectedRange?.start || new Date()
+  );
+  const calendarRef = useRef<HTMLDivElement>(null);
+  const [focusedDate, setFocusedDate] = useState<Date | null>(null);
+
+  // Update current month if controlled
+  useEffect(() => {
+    if (controlledMonth) {
+      setCurrentMonth(controlledMonth);
+    }
+  }, [controlledMonth]);
+
+  const daysInMonth = getDaysInMonth(currentMonth);
+  const firstDay = getFirstDayOfMonth(currentMonth);
+  const days: (Date | null)[] = [];
+
+  // Add empty cells for days before the first day of the month
+  for (let i = 0; i < firstDay; i++) {
+    days.push(null);
+  }
+
+  // Add all days of the month
+  for (let day = 1; day <= daysInMonth; day++) {
+    days.push(new Date(currentMonth.getFullYear(), currentMonth.getMonth(), day));
+  }
+
+  const handleDateClick = (date: Date) => {
+    if (isDateDisabled(date, minDate, maxDate, disabledDates)) return;
+
+    if (mode === 'single') {
+      onDateChange(date);
+    } else if (mode === 'range') {
+      const currentRange = selectedRange || { start: null, end: null };
+      if (!currentRange.start || (currentRange.start && currentRange.end)) {
+        // Start new range
+        onRangeChange({ start: date, end: null });
+      } else if (currentRange.start && !currentRange.end) {
+        // Complete range
+        if (date < currentRange.start) {
+          onRangeChange({ start: date, end: currentRange.start });
+        } else {
+          onRangeChange({ start: currentRange.start, end: date });
+        }
+      }
+    }
+  };
+
+  const handlePreviousMonth = () => {
+    const newMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1, 1);
+    setCurrentMonth(newMonth);
+    onMonthChange?.(newMonth);
+  };
+
+  const handleNextMonth = () => {
+    const newMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 1);
+    setCurrentMonth(newMonth);
+    onMonthChange?.(newMonth);
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>, date: Date) => {
+    let newDate: Date | null = null;
+
+    switch (e.key) {
+      case 'ArrowLeft':
+        e.preventDefault();
+        newDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - 1);
+        break;
+      case 'ArrowRight':
+        e.preventDefault();
+        newDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1);
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        newDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - 7);
+        break;
+      case 'ArrowDown':
+        e.preventDefault();
+        newDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() + 7);
+        break;
+      case 'Home':
+        e.preventDefault();
+        newDate = new Date(date.getFullYear(), date.getMonth(), 1);
+        break;
+      case 'End':
+        e.preventDefault();
+        newDate = new Date(date.getFullYear(), date.getMonth() + 1, 0);
+        break;
+      case 'Enter':
+      case ' ':
+        e.preventDefault();
+        handleDateClick(date);
+        return;
+    }
+
+    if (newDate) {
+      // Adjust month if needed
+      if (!isSameMonth(newDate, currentMonth)) {
+        setCurrentMonth(new Date(newDate.getFullYear(), newDate.getMonth(), 1));
+      }
+      setFocusedDate(newDate);
+    }
+  };
+
+  return (
+    <div
+      ref={calendarRef}
+      className={`p-4 ${className}`}
+      role="grid"
+      aria-label="Calendar"
+      {...props}
+    >
+      {/* Header with month navigation */}
+      <div className="flex items-center justify-between mb-4">
+        <Button
+          variant="iconOnly"
+          size="sm"
+          onClick={handlePreviousMonth}
+          aria-label="Previous month"
+        >
+          <ChevronLeft className="h-4 w-4" />
+        </Button>
+        <div className="text-sm font-semibold">
+          {MONTHS[currentMonth.getMonth()]} {currentMonth.getFullYear()}
+        </div>
+        <Button
+          variant="iconOnly"
+          size="sm"
+          onClick={handleNextMonth}
+          aria-label="Next month"
+        >
+          <ChevronRight className="h-4 w-4" />
+        </Button>
+      </div>
+
+      {/* Weekday headers */}
+      <div className="grid grid-cols-7 gap-1 mb-2">
+        {WEEKDAYS.map((day) => (
+          <div
+            key={day}
+            className="text-center text-xs font-medium text-gray-500 py-1"
+          >
+            {day}
+          </div>
+        ))}
+      </div>
+
+      {/* Calendar grid */}
+      <div className="grid grid-cols-7 gap-1">
+        {days.map((date, index) => {
+          if (!date) {
+            return <div key={`empty-${index}`} className="aspect-square" />;
+          }
+
+          const isSelected = mode === 'single'
+            ? isSameDay(date, selectedDate)
+            : (isSameDay(date, selectedRange?.start || null) || isSameDay(date, selectedRange?.end || null));
+
+          const isInRange = mode === 'range' && selectedRange
+            ? isDateInRange(date, selectedRange.start, selectedRange.end)
+            : false;
+
+          const isDisabled = isDateDisabled(date, minDate, maxDate, disabledDates);
+          const isToday = isSameDay(date, new Date());
+          const isFocused = focusedDate && isSameDay(date, focusedDate);
+
+          return (
+            <button
+              key={date.toISOString()}
+              type="button"
+              onClick={() => handleDateClick(date)}
+              onKeyDown={(e) => handleKeyDown(e, date)}
+              disabled={isDisabled}
+              className={`
+                aspect-square
+                text-sm
+                ${getRadiusClass('md')}
+                transition-colors
+                focus:outline-none
+                focus:ring-2
+                focus:ring-offset-1
+                ${isDisabled
+                  ? 'text-gray-300 cursor-not-allowed'
+                  : isSelected
+                  ? `${getColorClass('primary', 'DEFAULT', 'bg')} text-white font-semibold`
+                  : isInRange
+                  ? `${getColorClass('primary', 'light', 'bg')} ${getColorClass('primary', 'DEFAULT', 'text')}`
+                  : isToday
+                  ? 'border-2 border-indigo-500 font-semibold'
+                  : isFocused
+                  ? `${getColorClass('primary', 'light', 'bg')}`
+                  : 'hover:bg-gray-100'
+                }
+              `}
+              aria-label={date.toDateString()}
+              aria-selected={isSelected}
+              aria-disabled={isDisabled}
+            >
+              {date.getDate()}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/src/ui/molecules/DatePicker/DatePickerContext.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { createContext, useContext } from 'react';
+
+export interface DatePickerContextValue {
+  selectedDate: Date | null;
+  selectedRange: { start: Date | null; end: Date | null } | null;
+  mode: 'single' | 'range';
+  onDateChange: (date: Date | null) => void;
+  onRangeChange: (range: { start: Date | null; end: Date | null }) => void;
+  minDate?: Date;
+  maxDate?: Date;
+  disabledDates?: Date[];
+  locale?: Locale;
+}
+
+export const DatePickerContext = createContext<DatePickerContextValue | undefined>(undefined);
+
+export function useDatePickerContext(): DatePickerContextValue {
+  const context = useContext(DatePickerContext);
+  if (!context) {
+    throw new Error('DatePicker components must be used within a DatePicker component');
+  }
+  return context;
+}
+
+export function useDatePickerContextOptional(): DatePickerContextValue | undefined {
+  return useContext(DatePickerContext);
+}
+
+// Locale type - will be provided by date-fns
+export interface Locale {
+  code?: string;
+  localize?: unknown;
+  formatLong?: unknown;
+  format?: unknown;
+  match?: unknown;
+  options?: unknown;
+}

package/src/ui/molecules/DatePicker/DatePickerInput.tsx

@@ -0,0 +1,147 @@
+'use client';
+
+import { useState, useRef, useEffect, type HTMLAttributes } from 'react';
+import { Calendar } from 'lucide-react';
+import { useDatePickerContext } from './DatePickerContext';
+import Input from '../../atoms/Input/Input';
+import Button from '../../atoms/Button/Button';
+
+export interface DatePickerInputProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'onFocus'> {
+  placeholder?: string;
+  format?: string; // Date format string (e.g., 'MM/dd/yyyy')
+  showCalendarButton?: boolean;
+  'aria-label'?: string;
+  onFocus?: () => void;
+}
+
+// Simple date formatting without date-fns dependency
+function formatDate(date: Date, format: string = 'yyyy-MM-dd'): string {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  
+  return format
+    .replace('yyyy', String(year))
+    .replace('MM', month)
+    .replace('dd', day)
+    .replace('MM/dd/yyyy', `${month}/${day}/${year}`)
+    .replace('dd/MM/yyyy', `${day}/${month}/${year}`);
+}
+
+function parseDate(value: string): Date | null {
+  if (!value) return null;
+  
+  // Try ISO format first (yyyy-MM-dd)
+  const isoMatch = value.match(/^(\d{4})-(\d{2})-(\d{2})$/);
+  if (isoMatch) {
+    const [, year, month, day] = isoMatch;
+    const date = new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
+    if (!isNaN(date.getTime())) return date;
+  }
+  
+  // Try MM/dd/yyyy
+  const usMatch = value.match(/^(\d{2})\/(\d{2})\/(\d{4})$/);
+  if (usMatch) {
+    const [, month, day, year] = usMatch;
+    const date = new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
+    if (!isNaN(date.getTime())) return date;
+  }
+  
+  // Try dd/MM/yyyy
+  const euMatch = value.match(/^(\d{2})\/(\d{2})\/(\d{4})$/);
+  if (euMatch) {
+    const [, day, month, year] = euMatch;
+    const date = new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
+    if (!isNaN(date.getTime())) return date;
+  }
+  
+  return null;
+}
+
+export function DatePickerInput({
+  placeholder = 'Select date',
+  format = 'yyyy-MM-dd',
+  showCalendarButton = true,
+  'aria-label': ariaLabel,
+  onFocus,
+  className = '',
+  ...props
+}: DatePickerInputProps) {
+  const { selectedDate, selectedRange, mode, onDateChange } = useDatePickerContext();
+  const [inputValue, setInputValue] = useState('');
+  const [_isFocused, setIsFocused] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Update input value when selected date changes
+  useEffect(() => {
+    if (mode === 'single' && selectedDate) {
+      setInputValue(formatDate(selectedDate, format));
+    } else if (mode === 'range' && selectedRange) {
+      if (selectedRange.start && selectedRange.end) {
+        setInputValue(`${formatDate(selectedRange.start, format)} - ${formatDate(selectedRange.end, format)}`);
+      } else if (selectedRange.start) {
+        setInputValue(formatDate(selectedRange.start, format));
+      } else {
+        setInputValue('');
+      }
+    } else {
+      setInputValue('');
+    }
+  }, [selectedDate, selectedRange, mode, format]);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setInputValue(value);
+    
+    if (mode === 'single') {
+      const date = parseDate(value);
+      onDateChange(date);
+    }
+    // Range mode parsing would be more complex, handled by calendar
+  };
+
+  const handleInputBlur = () => {
+    setIsFocused(false);
+    // Validate and format on blur
+    if (inputValue && mode === 'single') {
+      const date = parseDate(inputValue);
+      if (date) {
+        setInputValue(formatDate(date, format));
+      }
+    }
+  };
+
+  const handleCalendarClick = () => {
+    inputRef.current?.focus();
+    // Calendar popup would be triggered by parent component
+  };
+
+  return (
+    <div className={`relative ${className}`} {...props}>
+      <Input
+        ref={inputRef}
+        type="text"
+        value={inputValue}
+        onChange={handleInputChange}
+        onFocus={() => {
+          setIsFocused(true);
+          onFocus?.();
+        }}
+        onBlur={handleInputBlur}
+        placeholder={placeholder}
+        aria-label={ariaLabel || placeholder}
+        rightIcon={showCalendarButton ? (
+          <Button
+            variant="iconOnly"
+            size="sm"
+            onClick={handleCalendarClick}
+            aria-label="Open calendar"
+            type="button"
+          >
+            <Calendar className="h-4 w-4" />
+          </Button>
+        ) : undefined}
+      />
+    </div>
+  );
+}