@pattern-stack/frontend-patterns 0.0.5 → 0.1.0

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

@@ -1,611 +0,0 @@
-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

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