@thangnqdev/ui 0.1.0

package/src/forms/DatePicker.tsx

@@ -0,0 +1,480 @@
+import React, { forwardRef, useState, useRef, useEffect } from 'react';
+import { Calendar as CalendarIcon, Clock, ChevronLeft, ChevronRight, X } from 'lucide-react';
+import { cn } from '../utils/cn';
+import { Button } from '../buttons/Button';
+import { Popover } from '../overlays/Popover';
+
+// Utility helper to format date as YYYY-MM-DD
+export function formatDate(d: Date | null | undefined): string {
+  if (!d) return '';
+  const year = d.getFullYear();
+  const month = String(d.getMonth() + 1).padStart(2, '0');
+  const day = String(d.getDate()).padStart(2, '0');
+  return `${year}-${month}-${day}`;
+}
+
+export function formatDisplayDate(d: Date | null | undefined): string {
+  if (!d) return '';
+  return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
+}
+
+export interface DatePickerProps {
+  value?: Date | null;
+  defaultValue?: Date | null;
+  onChange?: (date: Date | null) => void;
+  placeholder?: string;
+  minDate?: Date;
+  maxDate?: Date;
+  disabled?: boolean;
+  clearable?: boolean;
+  className?: string;
+  presets?: { label: string; date: Date }[];
+}
+
+export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
+  (
+    {
+      value: controlledValue,
+      defaultValue,
+      onChange,
+      placeholder = 'Select date...',
+      minDate,
+      maxDate,
+      disabled = false,
+      clearable = true,
+      className,
+      presets,
+    },
+    ref
+  ) => {
+    const [internalDate, setInternalDate] = useState<Date | null>(
+      defaultValue !== undefined ? defaultValue : null
+    );
+    const selectedDate = controlledValue !== undefined ? controlledValue : internalDate;
+
+    const [viewDate, setViewDate] = useState<Date>(selectedDate || new Date());
+    const [isOpen, setIsOpen] = useState(false);
+
+    useEffect(() => {
+      if (selectedDate) {
+        setViewDate(selectedDate);
+      }
+    }, [selectedDate]);
+
+    const handleSelectDate = (d: Date) => {
+      setInternalDate(d);
+      onChange?.(d);
+      setIsOpen(false);
+    };
+
+    const handleClear = (e: React.MouseEvent) => {
+      e.stopPropagation();
+      setInternalDate(null);
+      onChange?.(null);
+    };
+
+    const prevMonth = () => {
+      setViewDate(new Date(viewDate.getFullYear(), viewDate.getMonth() - 1, 1));
+    };
+
+    const nextMonth = () => {
+      setViewDate(new Date(viewDate.getFullYear(), viewDate.getMonth() + 1, 1));
+    };
+
+    // Calendar generation logic
+    const year = viewDate.getFullYear();
+    const month = viewDate.getMonth();
+    const firstDayIndex = new Date(year, month, 1).getDay();
+    const daysInMonth = new Date(year, month + 1, 0).getDate();
+    const daysInPrevMonth = new Date(year, month, 0).getDate();
+
+    const days: { date: Date; currentMonth: boolean; disabled: boolean }[] = [];
+
+    // Prev month padding days
+    for (let i = firstDayIndex - 1; i >= 0; i--) {
+      const d = new Date(year, month - 1, daysInPrevMonth - i);
+      const isDis = (minDate && d < minDate) || (maxDate && d > maxDate);
+      days.push({ date: d, currentMonth: false, disabled: Boolean(isDis) });
+    }
+
+    // Current month days
+    for (let i = 1; i <= daysInMonth; i++) {
+      const d = new Date(year, month, i);
+      const isDis = (minDate && d < minDate) || (maxDate && d > maxDate);
+      days.push({ date: d, currentMonth: true, disabled: Boolean(isDis) });
+    }
+
+    // Next month padding days to complete grid of 35 or 42
+    const totalSlots = days.length > 35 ? 42 : 35;
+    const remainingSlots = totalSlots - days.length;
+    for (let i = 1; i <= remainingSlots; i++) {
+      const d = new Date(year, month + 1, i);
+      const isDis = (minDate && d < minDate) || (maxDate && d > maxDate);
+      days.push({ date: d, currentMonth: false, disabled: Boolean(isDis) });
+    }
+
+    const todayStr = formatDate(new Date());
+    const selectedStr = selectedDate ? formatDate(selectedDate) : '';
+
+    return (
+      <div ref={ref} className={cn('relative inline-block w-full', className)}>
+        <Popover
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
+          trigger={
+            <button
+              type="button"
+              disabled={disabled}
+              onClick={() => !disabled && setIsOpen(!isOpen)}
+              className={cn(
+                'w-full h-10 px-3.5 rounded-[var(--ui-radius-md)] border bg-[var(--ui-bg-surface)] text-left flex items-center justify-between text-sm transition-all shadow-inner cursor-pointer',
+                disabled
+                  ? 'opacity-50 cursor-not-allowed border-[var(--ui-border-subtle)]'
+                  : 'border-[var(--ui-border-default)] hover:border-[var(--ui-border-strong)] focus:ring-2 focus:ring-[var(--ui-primary)]/50'
+              )}
+            >
+              <div className="flex items-center gap-2.5 truncate">
+                <CalendarIcon className="w-4 h-4 text-[var(--ui-text-muted)] shrink-0" />
+                <span className={selectedDate ? 'text-[var(--ui-text-primary)] font-medium' : 'text-[var(--ui-text-muted)]'}>
+                  {selectedDate ? formatDisplayDate(selectedDate) : placeholder}
+                </span>
+              </div>
+
+              <div className="flex items-center gap-1 text-[var(--ui-text-muted)]">
+                {clearable && selectedDate && !disabled && (
+                  <span
+                    onClick={handleClear}
+                    className="p-1 rounded-full hover:bg-[var(--ui-bg-tertiary)] hover:text-[var(--ui-text-primary)] transition-colors"
+                  >
+                    <X className="w-3.5 h-3.5" />
+                  </span>
+                )}
+              </div>
+            </button>
+          }
+        >
+          <div className="p-4 w-72 rounded-2xl bg-[var(--ui-bg-surface)] backdrop-blur-2xl border border-[var(--ui-border-default)] shadow-2xl space-y-3">
+            {/* Header: Month Year + Prev/Next */}
+            <div className="flex items-center justify-between">
+              <span className="text-xs font-bold text-[var(--ui-text-primary)] font-mono uppercase tracking-wider">
+                {viewDate.toLocaleString('default', { month: 'long', year: 'numeric' })}
+              </span>
+              <div className="flex items-center gap-1">
+                <button
+                  type="button"
+                  onClick={prevMonth}
+                  className="p-1 rounded-lg hover:bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] transition-colors"
+                >
+                  <ChevronLeft className="w-4 h-4" />
+                </button>
+                <button
+                  type="button"
+                  onClick={nextMonth}
+                  className="p-1 rounded-lg hover:bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] transition-colors"
+                >
+                  <ChevronRight className="w-4 h-4" />
+                </button>
+              </div>
+            </div>
+
+            {/* Presets if provided */}
+            {presets && presets.length > 0 && (
+              <div className="flex flex-wrap gap-1 pb-2 border-b border-[var(--ui-border-subtle)]">
+                {presets.map((preset, idx) => (
+                  <button
+                    key={idx}
+                    type="button"
+                    onClick={() => handleSelectDate(preset.date)}
+                    className="px-2 py-0.5 rounded-md text-[10px] font-semibold bg-[var(--ui-bg-secondary)] hover:bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-secondary)] transition-colors"
+                  >
+                    {preset.label}
+                  </button>
+                ))}
+              </div>
+            )}
+
+            {/* Weekday headers */}
+            <div className="grid grid-cols-7 text-center text-[10px] font-bold text-[var(--ui-text-muted)] font-mono">
+              {['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'].map((d) => (
+                <div key={d} className="py-1">
+                  {d}
+                </div>
+              ))}
+            </div>
+
+            {/* Day grid */}
+            <div className="grid grid-cols-7 gap-1">
+              {days.map((item, idx) => {
+                const itemStr = formatDate(item.date);
+                const isSelected = itemStr === selectedStr;
+                const isToday = itemStr === todayStr;
+
+                return (
+                  <button
+                    key={idx}
+                    type="button"
+                    disabled={item.disabled}
+                    onClick={() => handleSelectDate(item.date)}
+                    className={cn(
+                      'h-8 w-8 rounded-full text-xs font-semibold flex items-center justify-center transition-all cursor-pointer',
+                      item.disabled && 'opacity-25 cursor-not-allowed pointer-events-none',
+                      !item.currentMonth && 'text-[var(--ui-text-muted)] opacity-50',
+                      isSelected
+                        ? 'bg-[var(--ui-primary)] text-white font-bold shadow-md shadow-blue-500/30'
+                        : isToday
+                        ? 'border border-[var(--ui-primary)] text-[var(--ui-primary)]'
+                        : 'hover:bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-primary)]'
+                    )}
+                  >
+                    {item.date.getDate()}
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        </Popover>
+      </div>
+    );
+  }
+);
+DatePicker.displayName = 'DatePicker';
+
+/* -------------------------------------------------------------------------------------------------
+ * DateRangePicker Component
+ * -----------------------------------------------------------------------------------------------*/
+export interface DateRange {
+  from: Date | null;
+  to: Date | null;
+}
+
+export interface DateRangePickerProps {
+  value?: DateRange;
+  defaultValue?: DateRange;
+  onChange?: (range: DateRange) => void;
+  placeholder?: string;
+  className?: string;
+  disabled?: boolean;
+}
+
+export const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>(
+  ({ value: controlledVal, defaultValue, onChange, placeholder = 'Select date range...', className, disabled = false }, ref) => {
+    const [internalRange, setInternalRange] = useState<DateRange>(
+      defaultValue || { from: null, to: null }
+    );
+    const range = controlledVal || internalRange;
+    const [viewDate, setViewDate] = useState<Date>(range.from || new Date());
+    const [isOpen, setIsOpen] = useState(false);
+
+    const handleDayClick = (d: Date) => {
+      let next: DateRange;
+      if (!range.from || (range.from && range.to)) {
+        next = { from: d, to: null };
+      } else {
+        if (d < range.from) {
+          next = { from: d, to: range.from };
+        } else {
+          next = { from: range.from, to: d };
+          setIsOpen(false);
+        }
+      }
+      setInternalRange(next);
+      onChange?.(next);
+    };
+
+    const displayText =
+      range.from && range.to
+        ? `${formatDisplayDate(range.from)} – ${formatDisplayDate(range.to)}`
+        : range.from
+        ? `${formatDisplayDate(range.from)} – ...`
+        : placeholder;
+
+    // Calendar generation
+    const year = viewDate.getFullYear();
+    const month = viewDate.getMonth();
+    const firstDayIndex = new Date(year, month, 1).getDay();
+    const daysInMonth = new Date(year, month + 1, 0).getDate();
+
+    const days: Date[] = [];
+    for (let i = 1; i <= daysInMonth; i++) {
+      days.push(new Date(year, month, i));
+    }
+
+    return (
+      <div ref={ref} className={cn('relative inline-block w-full', className)}>
+        <Popover
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
+          trigger={
+            <button
+              type="button"
+              disabled={disabled}
+              onClick={() => !disabled && setIsOpen(!isOpen)}
+              className="w-full h-10 px-3.5 rounded-[var(--ui-radius-md)] border border-[var(--ui-border-default)] hover:border-[var(--ui-border-strong)] bg-[var(--ui-bg-surface)] text-left flex items-center justify-between text-sm shadow-inner cursor-pointer"
+            >
+              <div className="flex items-center gap-2.5 truncate">
+                <CalendarIcon className="w-4 h-4 text-[var(--ui-text-muted)] shrink-0" />
+                <span className={range.from ? 'text-[var(--ui-text-primary)] font-medium' : 'text-[var(--ui-text-muted)]'}>
+                  {displayText}
+                </span>
+              </div>
+            </button>
+          }
+        >
+          <div className="p-4 w-76 rounded-2xl bg-[var(--ui-bg-surface)] backdrop-blur-2xl border border-[var(--ui-border-default)] shadow-2xl space-y-3">
+            <div className="flex items-center justify-between">
+              <span className="text-xs font-bold text-[var(--ui-text-primary)] font-mono uppercase tracking-wider">
+                {viewDate.toLocaleString('default', { month: 'long', year: 'numeric' })}
+              </span>
+              <div className="flex items-center gap-1">
+                <button
+                  type="button"
+                  onClick={() => setViewDate(new Date(year, month - 1, 1))}
+                  className="p-1 rounded-lg hover:bg-[var(--ui-bg-tertiary)]"
+                >
+                  <ChevronLeft className="w-4 h-4" />
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setViewDate(new Date(year, month + 1, 1))}
+                  className="p-1 rounded-lg hover:bg-[var(--ui-bg-tertiary)]"
+                >
+                  <ChevronRight className="w-4 h-4" />
+                </button>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-7 gap-1 text-center">
+              {Array.from({ length: firstDayIndex }).map((_, i) => (
+                <div key={`empty-${i}`} />
+              ))}
+              {days.map((d, idx) => {
+                const dStr = formatDate(d);
+                const fromStr = range.from ? formatDate(range.from) : '';
+                const toStr = range.to ? formatDate(range.to) : '';
+                const isFrom = dStr === fromStr;
+                const isTo = dStr === toStr;
+                const isInRange =
+                  range.from && range.to && d > range.from && d < range.to;
+
+                return (
+                  <button
+                    key={idx}
+                    type="button"
+                    onClick={() => handleDayClick(d)}
+                    className={cn(
+                      'h-8 w-8 rounded-full text-xs font-semibold flex items-center justify-center transition-all cursor-pointer',
+                      (isFrom || isTo) && 'bg-[var(--ui-primary)] text-white shadow-md',
+                      isInRange && 'bg-[var(--ui-primary)]/20 text-[var(--ui-primary)] rounded-none',
+                      !isFrom && !isTo && !isInRange && 'hover:bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-primary)]'
+                    )}
+                  >
+                    {d.getDate()}
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        </Popover>
+      </div>
+    );
+  }
+);
+DateRangePicker.displayName = 'DateRangePicker';
+
+/* -------------------------------------------------------------------------------------------------
+ * TimePicker Component
+ * -----------------------------------------------------------------------------------------------*/
+export interface TimePickerProps {
+  value?: string;
+  defaultValue?: string;
+  onChange?: (time: string) => void;
+  format?: '12h' | '24h';
+  className?: string;
+  disabled?: boolean;
+}
+
+export const TimePicker = forwardRef<HTMLDivElement, TimePickerProps>(
+  ({ value: controlledVal, defaultValue = '12:00', onChange, format = '24h', className, disabled = false }, ref) => {
+    const [internalTime, setInternalTime] = useState(defaultValue);
+    const time = controlledVal !== undefined ? controlledVal : internalTime;
+
+    const [hours, setHours] = useState(time.split(':')[0] || '12');
+    const [minutes, setMinutes] = useState(time.split(':')[1] || '00');
+    const [isOpen, setIsOpen] = useState(false);
+
+    const updateTime = (newH: string, newM: string) => {
+      const full = `${newH.padStart(2, '0')}:${newM.padStart(2, '0')}`;
+      setHours(newH);
+      setMinutes(newM);
+      setInternalTime(full);
+      onChange?.(full);
+    };
+
+    return (
+      <div ref={ref} className={cn('relative inline-block w-full', className)}>
+        <Popover
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
+          trigger={
+            <button
+              type="button"
+              disabled={disabled}
+              onClick={() => !disabled && setIsOpen(!isOpen)}
+              className="w-full h-10 px-3.5 rounded-[var(--ui-radius-md)] border border-[var(--ui-border-default)] hover:border-[var(--ui-border-strong)] bg-[var(--ui-bg-surface)] text-left flex items-center justify-between text-sm shadow-inner cursor-pointer"
+            >
+              <div className="flex items-center gap-2.5">
+                <Clock className="w-4 h-4 text-[var(--ui-text-muted)]" />
+                <span className="font-mono text-sm font-semibold text-[var(--ui-text-primary)]">{time}</span>
+              </div>
+            </button>
+          }
+        >
+          <div className="p-4 w-52 rounded-2xl bg-[var(--ui-bg-surface)] backdrop-blur-2xl border border-[var(--ui-border-default)] shadow-2xl space-y-3">
+            <span className="text-xs font-bold text-[var(--ui-text-muted)] uppercase tracking-wider font-mono">
+              Select Time ({format})
+            </span>
+            <div className="flex items-center justify-center gap-2">
+              <div className="h-36 overflow-y-auto border border-[var(--ui-border-subtle)] rounded-xl p-1 w-16 text-center space-y-1">
+                {Array.from({ length: 24 }).map((_, i) => {
+                  const h = String(i).padStart(2, '0');
+                  return (
+                    <div
+                      key={h}
+                      onClick={() => updateTime(h, minutes)}
+                      className={cn(
+                        'text-xs py-1 rounded-lg font-mono font-semibold cursor-pointer transition-colors',
+                        hours === h
+                          ? 'bg-[var(--ui-primary)] text-white'
+                          : 'hover:bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-primary)]'
+                      )}
+                    >
+                      {h}
+                    </div>
+                  );
+                })}
+              </div>
+              <span className="text-sm font-bold">:</span>
+              <div className="h-36 overflow-y-auto border border-[var(--ui-border-subtle)] rounded-xl p-1 w-16 text-center space-y-1">
+                {['00', '05', '10', '15', '20', '25', '30', '35', '40', '41', '45', '50', '55'].map((m) => (
+                  <div
+                    key={m}
+                    onClick={() => updateTime(hours, m)}
+                    className={cn(
+                      'text-xs py-1 rounded-lg font-mono font-semibold cursor-pointer transition-colors',
+                      minutes === m
+                        ? 'bg-[var(--ui-primary)] text-white'
+                        : 'hover:bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-primary)]'
+                    )}
+                  >
+                    {m}
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </Popover>
+      </div>
+    );
+  }
+);
+TimePicker.displayName = 'TimePicker';