@pattern-stack/frontend-patterns 0.1.0 → 0.1.2

package/src/atoms/composed/DateTimePicker/DateTimePicker.tsx

@@ -0,0 +1,611 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { Calendar, Clock, ChevronLeft, ChevronRight, X } from 'lucide-react';
+import { cn } from '../../utils/utils';
+import { Input } from '../../ui/input';
+import { Button } from '../../ui/button';
+
+export interface DateTimePickerProps {
+  /** Current selected date/time value */
+  value?: Date;
+  /** Callback when date/time changes */
+  onChange?: (date: Date | null) => void;
+  /** Picker mode */
+  mode?: 'date' | 'time' | 'datetime';
+  /** Visual variant */
+  variant?: 'default' | 'compact' | 'inline';
+  /** Date format for display */
+  dateFormat?: 'MM/dd/yyyy' | 'dd/MM/yyyy' | 'yyyy-MM-dd';
+  /** Time format */
+  timeFormat?: '12h' | '24h';
+  /** Minimum selectable date */
+  minDate?: Date;
+  /** Maximum selectable date */
+  maxDate?: Date;
+  /** Enable date range selection */
+  isRange?: boolean;
+  /** Range values for range mode */
+  rangeValue?: { start: Date | null; end: Date | null };
+  /** Callback for range changes */
+  onRangeChange?: (range: { start: Date | null; end: Date | null }) => void;
+  /** Placeholder text */
+  placeholder?: string;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Error state */
+  error?: boolean;
+  /** Clear button */
+  clearable?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+  /** ARIA label */
+  'aria-label'?: string;
+}
+
+const MONTHS = [
+  'January', 'February', 'March', 'April', 'May', 'June',
+  'July', 'August', 'September', 'October', 'November', 'December'
+];
+
+const WEEKDAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+
+export const DateTimePicker: React.FC<DateTimePickerProps> = ({
+  value,
+  onChange,
+  mode = 'datetime',
+  variant = 'default',
+  dateFormat = 'MM/dd/yyyy',
+  timeFormat = '12h',
+  minDate,
+  maxDate,
+  isRange = false,
+  rangeValue,
+  onRangeChange,
+  placeholder,
+  disabled = false,
+  error = false,
+  clearable = true,
+  className,
+  'aria-label': ariaLabel,
+  ...props
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [viewDate, setViewDate] = useState(value || new Date());
+  const [, setActiveInput] = useState<'start' | 'end' | null>(null);
+  const [tempTime, setTempTime] = useState({
+    hours: value?.getHours() || 0,
+    minutes: value?.getMinutes() || 0
+  });
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Close picker when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+        setActiveInput(null);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  // Format date for display
+  const formatDate = (date: Date | null): string => {
+    if (!date) return '';
+    
+    const day = date.getDate().toString().padStart(2, '0');
+    const month = (date.getMonth() + 1).toString().padStart(2, '0');
+    const year = date.getFullYear();
+    
+    switch (dateFormat) {
+      case 'dd/MM/yyyy':
+        return `${day}/${month}/${year}`;
+      case 'yyyy-MM-dd':
+        return `${year}-${month}-${day}`;
+      default:
+        return `${month}/${day}/${year}`;
+    }
+  };
+
+  // Format time for display
+  const formatTime = (date: Date | null): string => {
+    if (!date) return '';
+    
+    const hours = date.getHours();
+    const minutes = date.getMinutes().toString().padStart(2, '0');
+    
+    if (timeFormat === '12h') {
+      const displayHours = hours === 0 ? 12 : hours > 12 ? hours - 12 : hours;
+      const ampm = hours >= 12 ? 'PM' : 'AM';
+      return `${displayHours}:${minutes} ${ampm}`;
+    }
+    
+    return `${hours.toString().padStart(2, '0')}:${minutes}`;
+  };
+
+  // Format complete datetime
+  const formatDateTime = (date: Date | null): string => {
+    if (!date) return '';
+    
+    const datePart = mode === 'time' ? '' : formatDate(date);
+    const timePart = mode === 'date' ? '' : formatTime(date);
+    
+    if (mode === 'datetime') {
+      return `${datePart} ${timePart}`;
+    }
+    
+    return datePart || timePart;
+  };
+
+  // Get display value for input
+  const getDisplayValue = (): string => {
+    if (isRange && rangeValue) {
+      const start = rangeValue.start ? formatDateTime(rangeValue.start) : '';
+      const end = rangeValue.end ? formatDateTime(rangeValue.end) : '';
+      return start && end ? `${start} - ${end}` : start || end || '';
+    }
+    
+    return formatDateTime(value || null);
+  };
+
+  // Generate calendar days
+  const getCalendarDays = () => {
+    const year = viewDate.getFullYear();
+    const month = viewDate.getMonth();
+    
+    const firstDay = new Date(year, month, 1);
+    const startDate = new Date(firstDay);
+    startDate.setDate(startDate.getDate() - firstDay.getDay());
+    
+    const days: Date[] = [];
+    
+    for (let i = 0; i < 42; i++) {
+      const currentDate = new Date(startDate);
+      currentDate.setDate(startDate.getDate() + i);
+      days.push(currentDate);
+    }
+    
+    return days;
+  };
+
+  // Handle date selection
+  const handleDateSelect = (date: Date) => {
+    if (disabled) return;
+    
+    // Check date constraints
+    if (minDate && date < minDate) return;
+    if (maxDate && date > maxDate) return;
+    
+    if (isRange && onRangeChange) {
+      if (!rangeValue?.start || (rangeValue.start && rangeValue.end)) {
+        // Start new range
+        onRangeChange({ start: date, end: null });
+        setActiveInput('end');
+      } else if (rangeValue.start && !rangeValue.end) {
+        // Complete range
+        if (date >= rangeValue.start) {
+          onRangeChange({ start: rangeValue.start, end: date });
+        } else {
+          onRangeChange({ start: date, end: rangeValue.start });
+        }
+        setActiveInput(null);
+        if (mode === 'date') setIsOpen(false);
+      }
+    } else {
+      // Single date selection
+      const newDate = new Date(date);
+      if (value && (mode === 'datetime' || mode === 'time')) {
+        // Preserve time when selecting date
+        newDate.setHours(value.getHours());
+        newDate.setMinutes(value.getMinutes());
+      }
+      
+      onChange?.(newDate);
+      if (mode === 'date') setIsOpen(false);
+    }
+  };
+
+  // Handle time change
+  const handleTimeChange = (hours: number, minutes: number) => {
+    if (disabled) return;
+    
+    const newDate = value ? new Date(value) : new Date();
+    newDate.setHours(hours);
+    newDate.setMinutes(minutes);
+    
+    setTempTime({ hours, minutes });
+    onChange?.(newDate);
+  };
+
+  // Handle input click
+  const handleInputClick = () => {
+    if (!disabled) {
+      setIsOpen(true);
+      if (isRange) setActiveInput('start');
+    }
+  };
+
+  // Handle clear
+  const handleClear = () => {
+    if (isRange && onRangeChange) {
+      onRangeChange({ start: null, end: null });
+    } else {
+      onChange?.(null);
+    }
+    setIsOpen(false);
+  };
+
+  // Navigate calendar
+  const navigateMonth = (direction: 'prev' | 'next') => {
+    const newDate = new Date(viewDate);
+    newDate.setMonth(viewDate.getMonth() + (direction === 'prev' ? -1 : 1));
+    setViewDate(newDate);
+  };
+
+  // Check if date is selected
+  const isDateSelected = (date: Date): boolean => {
+    if (isRange && rangeValue) {
+      return (rangeValue.start ? isSameDay(date, rangeValue.start) : false) ||
+             (rangeValue.end ? isSameDay(date, rangeValue.end) : false);
+    }
+    return value ? isSameDay(date, value) : false;
+  };
+
+  // Check if date is in range
+  const isDateInRange = (date: Date): boolean => {
+    if (isRange && rangeValue?.start && rangeValue?.end) {
+      return date >= rangeValue.start && date <= rangeValue.end;
+    }
+    return false;
+  };
+
+  // Utility function to check if dates are same day
+  const isSameDay = (date1: Date, date2: Date): boolean => {
+    return date1.getDate() === date2.getDate() &&
+           date1.getMonth() === date2.getMonth() &&
+           date1.getFullYear() === date2.getFullYear();
+  };
+
+  // Check if date is today
+  const isToday = (date: Date): boolean => {
+    return isSameDay(date, new Date());
+  };
+
+  // Check if date is disabled
+  const isDateDisabled = (date: Date): boolean => {
+    if (minDate && date < minDate) return true;
+    if (maxDate && date > maxDate) return true;
+    return false;
+  };
+
+  const variantClasses = {
+    default: 'h-10',
+    compact: 'h-8 text-sm',
+    inline: 'border-0 bg-transparent p-0'
+  };
+
+  const calendarDays = getCalendarDays();
+
+  if (variant === 'inline') {
+    return (
+      <div 
+        className={cn('inline-block', className)}
+        data-component-name="DateTimePicker"
+        ref={containerRef}
+      >
+        {/* Inline Calendar */}
+        <div className="bg-card border border-border rounded p-4 shadow-category-1">
+          {(mode === 'date' || mode === 'datetime') && (
+            <div className="space-y-4">
+              {/* Calendar Header */}
+              <div className="flex items-center justify-between">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => navigateMonth('prev')}
+                  disabled={disabled}
+                  className="h-8 w-8 p-0"
+                >
+                  <ChevronLeft className="w-4 h-4" />
+                </Button>
+                <h3 className="text-sm font-semibold text-foreground">
+                  {MONTHS[viewDate.getMonth()]} {viewDate.getFullYear()}
+                </h3>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => navigateMonth('next')}
+                  disabled={disabled}
+                  className="h-8 w-8 p-0"
+                >
+                  <ChevronRight className="w-4 h-4" />
+                </Button>
+              </div>
+
+              {/* Calendar Grid */}
+              <div className="grid grid-cols-7 gap-1">
+                {/* Weekday headers */}
+                {WEEKDAYS.map(day => (
+                  <div key={day} className="text-xs font-medium text-muted-foreground text-center p-2">
+                    {day}
+                  </div>
+                ))}
+                
+                {/* Calendar days */}
+                {calendarDays.map((date, index) => {
+                  const isCurrentMonth = date.getMonth() === viewDate.getMonth();
+                  const isSelected = isDateSelected(date);
+                  const isInRange = isDateInRange(date);
+                  const isTodayDate = isToday(date);
+                  const isDisabled = isDateDisabled(date);
+                  
+                  return (
+                    <button
+                      key={index}
+                      onClick={() => handleDateSelect(date)}
+                      disabled={disabled || isDisabled}
+                      className={cn(
+                        'h-8 w-8 text-xs rounded transition-colors',
+                        'hover:bg-accent hover:text-accent-foreground',
+                        'focus:outline-none focus:ring-2 focus:ring-primary/20',
+                        'disabled:opacity-50 disabled:cursor-not-allowed',
+                        !isCurrentMonth && 'text-muted-foreground/50',
+                        isSelected && 'bg-primary text-primary-foreground hover:bg-primary-hover',
+                        isInRange && !isSelected && 'bg-primary/20',
+                        isTodayDate && !isSelected && 'bg-accent text-accent-foreground font-semibold'
+                      )}
+                    >
+                      {date.getDate()}
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+          )}
+
+          {/* Time Picker for inline datetime/time mode */}
+          {(mode === 'time' || mode === 'datetime') && (
+            <div className={cn('space-y-3', mode === 'datetime' && 'border-t border-border pt-4 mt-4')}>
+              <div className="flex items-center gap-2">
+                <Clock className="w-4 h-4 text-muted-foreground" />
+                <span className="text-sm font-medium text-foreground">Time</span>
+              </div>
+              
+              <div className="flex items-center gap-2">
+                <select
+                  value={tempTime.hours}
+                  onChange={(e) => handleTimeChange(parseInt(e.target.value), tempTime.minutes)}
+                  disabled={disabled}
+                  className="px-2 py-1 text-sm border border-border rounded bg-background text-foreground"
+                >
+                  {Array.from({ length: 24 }, (_, i) => (
+                    <option key={i} value={i}>
+                      {timeFormat === '12h' 
+                        ? (i === 0 ? '12' : i > 12 ? i - 12 : i)
+                        : i.toString().padStart(2, '0')
+                      }
+                    </option>
+                  ))}
+                </select>
+                <span className="text-foreground">:</span>
+                <select
+                  value={tempTime.minutes}
+                  onChange={(e) => handleTimeChange(tempTime.hours, parseInt(e.target.value))}
+                  disabled={disabled}
+                  className="px-2 py-1 text-sm border border-border rounded bg-background text-foreground"
+                >
+                  {Array.from({ length: 60 }, (_, i) => (
+                    <option key={i} value={i}>
+                      {i.toString().padStart(2, '0')}
+                    </option>
+                  ))}
+                </select>
+                {timeFormat === '12h' && (
+                  <select
+                    value={tempTime.hours >= 12 ? 'PM' : 'AM'}
+                    onChange={(e) => {
+                      const isPM = e.target.value === 'PM';
+                      const newHours = isPM 
+                        ? (tempTime.hours % 12) + 12 
+                        : tempTime.hours % 12;
+                      handleTimeChange(newHours, tempTime.minutes);
+                    }}
+                    disabled={disabled}
+                    className="px-2 py-1 text-sm border border-border rounded bg-background text-foreground"
+                  >
+                    <option value="AM">AM</option>
+                    <option value="PM">PM</option>
+                  </select>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div 
+      className={cn('relative', className)}
+      data-component-name="DateTimePicker"
+      ref={containerRef}
+    >
+      {/* Input Field */}
+      <div className="relative">
+        <Input
+          ref={inputRef}
+          value={getDisplayValue()}
+          onClick={handleInputClick}
+          placeholder={placeholder || `Select ${mode}...`}
+          readOnly
+          disabled={disabled}
+          aria-label={ariaLabel}
+          className={cn(
+            variantClasses[variant],
+            'pr-20 cursor-pointer',
+            error && 'border-status-error focus:border-status-error focus:ring-status-error/20',
+            disabled && 'cursor-not-allowed'
+          )}
+          {...props}
+        />
+        
+        {/* Input Icons */}
+        <div className="absolute inset-y-0 right-0 flex items-center pr-3 gap-1">
+          {clearable && getDisplayValue() && !disabled && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleClear}
+              className="h-6 w-6 p-0 hover:bg-muted"
+            >
+              <X className="w-4 h-4" />
+            </Button>
+          )}
+          
+          <div className="text-muted-foreground">
+            {mode === 'time' ? (
+              <Clock className="w-4 h-4" />
+            ) : (
+              <Calendar className="w-4 h-4" />
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Dropdown Picker */}
+      {isOpen && (
+        <div className="absolute top-full left-0 z-50 mt-1 bg-card border border-border rounded shadow-category-1 p-4 min-w-[300px]">
+          {(mode === 'date' || mode === 'datetime') && (
+            <div className="space-y-4">
+              {/* Calendar Header */}
+              <div className="flex items-center justify-between">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => navigateMonth('prev')}
+                  disabled={disabled}
+                  className="h-8 w-8 p-0"
+                >
+                  <ChevronLeft className="w-4 h-4" />
+                </Button>
+                <h3 className="text-sm font-semibold text-foreground">
+                  {MONTHS[viewDate.getMonth()]} {viewDate.getFullYear()}
+                </h3>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => navigateMonth('next')}
+                  disabled={disabled}
+                  className="h-8 w-8 p-0"
+                >
+                  <ChevronRight className="w-4 h-4" />
+                </Button>
+              </div>
+
+              {/* Calendar Grid */}
+              <div className="grid grid-cols-7 gap-1">
+                {/* Weekday headers */}
+                {WEEKDAYS.map(day => (
+                  <div key={day} className="text-xs font-medium text-muted-foreground text-center p-2">
+                    {day}
+                  </div>
+                ))}
+                
+                {/* Calendar days */}
+                {calendarDays.map((date, index) => {
+                  const isCurrentMonth = date.getMonth() === viewDate.getMonth();
+                  const isSelected = isDateSelected(date);
+                  const isInRange = isDateInRange(date);
+                  const isTodayDate = isToday(date);
+                  const isDisabled = isDateDisabled(date);
+                  
+                  return (
+                    <button
+                      key={index}
+                      onClick={() => handleDateSelect(date)}
+                      disabled={disabled || isDisabled}
+                      className={cn(
+                        'h-8 w-8 text-xs rounded transition-colors',
+                        'hover:bg-accent hover:text-accent-foreground',
+                        'focus:outline-none focus:ring-2 focus:ring-primary/20',
+                        'disabled:opacity-50 disabled:cursor-not-allowed',
+                        !isCurrentMonth && 'text-muted-foreground/50',
+                        isSelected && 'bg-primary text-primary-foreground hover:bg-primary-hover',
+                        isInRange && !isSelected && 'bg-primary/20',
+                        isTodayDate && !isSelected && 'bg-accent text-accent-foreground font-semibold'
+                      )}
+                    >
+                      {date.getDate()}
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+          )}
+
+          {/* Time Picker */}
+          {(mode === 'time' || mode === 'datetime') && (
+            <div className={cn('space-y-3', mode === 'datetime' && 'border-t border-border pt-4 mt-4')}>
+              <div className="flex items-center gap-2">
+                <Clock className="w-4 h-4 text-muted-foreground" />
+                <span className="text-sm font-medium text-foreground">Time</span>
+              </div>
+              
+              <div className="flex items-center gap-2">
+                <select
+                  value={tempTime.hours}
+                  onChange={(e) => handleTimeChange(parseInt(e.target.value), tempTime.minutes)}
+                  disabled={disabled}
+                  className="px-2 py-1 text-sm border border-border rounded bg-background text-foreground"
+                >
+                  {Array.from({ length: 24 }, (_, i) => (
+                    <option key={i} value={i}>
+                      {timeFormat === '12h' 
+                        ? (i === 0 ? '12' : i > 12 ? i - 12 : i)
+                        : i.toString().padStart(2, '0')
+                      }
+                    </option>
+                  ))}
+                </select>
+                <span className="text-foreground">:</span>
+                <select
+                  value={tempTime.minutes}
+                  onChange={(e) => handleTimeChange(tempTime.hours, parseInt(e.target.value))}
+                  disabled={disabled}
+                  className="px-2 py-1 text-sm border border-border rounded bg-background text-foreground"
+                >
+                  {Array.from({ length: 60 }, (_, i) => (
+                    <option key={i} value={i}>
+                      {i.toString().padStart(2, '0')}
+                    </option>
+                  ))}
+                </select>
+                {timeFormat === '12h' && (
+                  <select
+                    value={tempTime.hours >= 12 ? 'PM' : 'AM'}
+                    onChange={(e) => {
+                      const isPM = e.target.value === 'PM';
+                      const newHours = isPM 
+                        ? (tempTime.hours % 12) + 12 
+                        : tempTime.hours % 12;
+                      handleTimeChange(newHours, tempTime.minutes);
+                    }}
+                    disabled={disabled}
+                    className="px-2 py-1 text-sm border border-border rounded bg-background text-foreground"
+                  >
+                    <option value="AM">AM</option>
+                    <option value="PM">PM</option>
+                  </select>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/atoms/composed/DateTimePicker/index.ts

@@ -0,0 +1,2 @@
+export { DateTimePicker } from './DateTimePicker';
+export type { DateTimePickerProps } from './DateTimePicker';