@campxdev/react-blueprint 3.0.0-alpha.4 → 3.0.0-alpha.6

package/src/components/Input/DateTimePicker/DateTimePicker.tsx

@@ -1,17 +1,5 @@
-import { cn } from '@/lib/utils';
-import { Calendar } from '@/shadcn-components/Input/Calendar/Calendar';
-import { Input } from '@/shadcn-components/Input/Input/Input';
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/shadcn-components/Input/Popover/Popover';
-import { format as DateFnsFormat } from 'date-fns';
-import { CalendarDays } from 'lucide-react';
-import { cloneElement, useEffect, useMemo, useRef, useState } from 'react';
-import { Typography } from '../../DataDisplay/Typography/Typography';
-import { Button } from '../Button/Button';
-import { LabelWrapper } from '../LabelWrapper/LabelWrapper';
+import { DateTimePickerFilter } from './components/DateTimePickerFilter';
+import { DateTimePickerInput } from './components/DateTimePickerInput';
 
 type DateTimePickerViews =
   | 'year'
@@ -69,291 +57,59 @@ export type DateTimePickerProps = {
   onClose?: () => void;
   onBlur?: React.FocusEventHandler;
   fullWidth?: boolean;
+  type?: 'input' | 'filter';
   [key: string]: any;
 };
 
+/**
+ * DateTimePicker component for date and time selection
+ *
+ * A comprehensive date and time picker component supporting both input and filter modes,
+ * with flexible date/time formats, time unit selection, and date restrictions.
+ *
+ * @component
+ * @param {DateTimePickerProps} props - The date time picker properties
+ * @param {React.ReactNode | string} [props.label] - Label for the picker
+ * @param {string} [props.name] - Name attribute for the input
+ * @param {Date} [props.value] - Currently selected date and time
+ * @param {(date: Date | undefined) => void} [props.onChange] - Callback fired when date/time changes
+ * @param {DateTimeFormat} [props.format] - Date and time format for display
+ * @param {DateTimePickerViews[]} [props.views] - Which time units to display (year, month, day, hours, minutes, seconds)
+ * @param {string} [props.placeholder] - Placeholder text
+ * @param {string} [props.helperText] - Helper text below the input
+ * @param {boolean} [props.required] - Whether the field is required
+ * @param {boolean} [props.disabled] - Whether the picker is disabled
+ * @param {Date} [props.minDate] - Minimum selectable date/time
+ * @param {Date} [props.maxDate] - Maximum selectable date/time
+ * @param {boolean} [props.disablePast] - Whether past dates/times are disabled
+ * @param {boolean} [props.disableFuture] - Whether future dates/times are disabled
+ * @param {(date: Date) => boolean} [props.shouldDisableDate] - Custom date disable logic
+ * @param {(date: Date) => boolean} [props.shouldDisableMonth] - Custom month disable logic
+ * @param {(date: Date) => boolean} [props.shouldDisableYear] - Custom year disable logic
+ * @param {boolean} [props.fullWidth] - Whether the picker takes full width
+ * @param {'input' | 'filter'} [props.type='input'] - Display type of the picker
+ * @param {() => void} [props.onOpen] - Callback when picker opens
+ * @param {() => void} [props.onClose] - Callback when picker closes
+ * @returns {React.ReactElement} The rendered date time picker component
+ *
+ * @example
+ * ```tsx
+ * <DateTimePicker
+ *   label="Select Date & Time"
+ *   value={dateTime}
+ *   onChange={setDateTime}
+ *   format="dd/MM/yyyy hh:mm a"
+ *   views={['year', 'month', 'day', 'hours', 'minutes']}
+ * />
+ * ```
+ */
 export const DateTimePicker = ({
-  label,
-  name,
-  value,
-  onChange,
-  required = false,
-  format = 'dd MMM yyyy hh:mm a',
-  views = ['year', 'month', 'day', 'hours', 'minutes', 'seconds'],
-  helperText,
-  placeholder = 'Pick a date and time',
-  shortcutsItems = [],
-  openPickerIcon: Icon = <CalendarDays />,
-  containerProps,
-  error,
-  disabled = false,
-  minDate,
-  maxDate,
-  disablePast = false,
-  disableFuture = false,
-  shouldDisableDate,
-  shouldDisableMonth,
-  shouldDisableYear,
-  className,
-  onOpen,
-  onClose,
-  fullWidth,
-  ...rest
+  type = 'input',
+  ...props
 }: DateTimePickerProps) => {
-  const [open, setOpen] = useState(false);
-  const [dateTime, setDateTime] = useState<Date | undefined>(value);
-  const [timeValue, setTimeValue] = useState<string>('');
-  const wrapperRef = useRef<HTMLSpanElement>(null);
-
-  // Determine view configurations based on views prop
-  const viewConfig = useMemo(() => {
-    const hasTime =
-      views.includes('hours') ||
-      views.includes('minutes') ||
-      views.includes('seconds');
-    const hasDate =
-      views.includes('day') ||
-      views.includes('month') ||
-      views.includes('year');
-
-    return {
-      showTime: hasTime,
-      showDate: hasDate,
-    };
-  }, [views]);
-
-  // Update time value when dateTime changes
-  useEffect(() => {
-    if (dateTime && viewConfig.showTime) {
-      const hours = dateTime.getHours(),
-        minutes = dateTime.getMinutes(),
-        seconds = dateTime.getSeconds(),
-        timeStr = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(
-          2,
-          '0',
-        )}:${String(seconds).padStart(2, '0')}`;
-      setTimeValue(timeStr);
-    }
-  }, [dateTime, viewConfig.showTime]);
-
-  const formatDateTimeString = (date: Date | undefined) => {
-    if (!date) return '';
-
-    try {
-      return DateFnsFormat(date, format);
-    } catch {
-      return DateFnsFormat(date, 'dd/MM/yyyy hh:mm a');
-    }
-  };
-
-  const handleOpenChange = (newOpen: boolean) => {
-    setOpen(newOpen);
-    if (newOpen && onOpen) {
-      onOpen();
-    } else if (!newOpen && onClose) {
-      onClose();
-    }
-  };
-
-  const handleDateSelect = (date: Date | undefined) => {
-    if (date) {
-      const newDateTime = new Date(date);
-      // Preserve existing time if we have one
-      if (dateTime) {
-        newDateTime.setHours(
-          dateTime.getHours(),
-          dateTime.getMinutes(),
-          dateTime.getSeconds(),
-        );
-      }
-      setDateTime(newDateTime);
-      onChange?.(newDateTime);
-    } else {
-      setDateTime(undefined);
-      onChange?.(undefined);
-    }
-  };
-
-  const handleTimeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const timeStr = e.target.value;
-    setTimeValue(timeStr);
-
-    if (timeStr) {
-      const [hours, minutes, seconds] = timeStr.split(':').map(Number);
-      const newDateTime = dateTime ? new Date(dateTime) : new Date();
-      newDateTime.setHours(hours || 0, minutes || 0, seconds || 0);
-      setDateTime(newDateTime);
-      onChange?.(newDateTime);
-    }
-  };
-
-  const [, forceUpdate] = useState({});
-  useEffect(() => {
-    forceUpdate({});
-  }, []);
-
-  // If only time selection (no date), render native time input directly
-  if (viewConfig.showTime && !viewConfig.showDate) {
-    return (
-      <LabelWrapper
-        label={label}
-        required={required}
-        name={name}
-        containerProps={containerProps}
-      >
-        <Input
-          type="time"
-          step="1"
-          value={timeValue}
-          onChange={handleTimeChange}
-          disabled={disabled}
-          placeholder={placeholder}
-          className={cn(
-            'bg-input-background border-none text-muted-foreground',
-            error && 'border-destructive',
-            className,
-          )}
-          {...rest}
-        />
-
-        {/* Helper Text / Error */}
-        {(helperText || error) && (
-          <Typography
-            variant="small"
-            className={cn('ml-1 mt-1', error && 'text-destructive')}
-          >
-            {typeof error === 'string' ? error : error?.message || helperText}
-          </Typography>
-        )}
-      </LabelWrapper>
-    );
+  if (type === 'filter') {
+    return <DateTimePickerFilter {...props} />;
   }
 
-  return (
-    <LabelWrapper
-      label={label}
-      required={required}
-      name={name}
-      containerProps={{
-        ...(fullWidth && { style: { width: '100%' } }),
-        ...containerProps,
-      }}
-    >
-      <Popover open={open} onOpenChange={handleOpenChange}>
-        <PopoverTrigger asChild>
-          <span
-            ref={wrapperRef}
-            style={{ display: fullWidth ? 'block' : 'inline-block' }}
-          >
-            <Button
-              variant="input"
-              className={cn(
-                'w-full justify-between text-left font-normal',
-                !dateTime && 'text-muted-foreground',
-                error && 'border-destructive',
-                fullWidth ? 'w-full' : 'w-auto',
-                className,
-              )}
-              disabled={disabled}
-              {...rest}
-            >
-              <span>
-                {dateTime ? formatDateTimeString(dateTime) : placeholder}
-              </span>
-              {Icon &&
-                cloneElement(Icon as React.ReactElement, {
-                  className: 'ml-2 h-4 w-4 ',
-                })}
-            </Button>
-          </span>
-        </PopoverTrigger>
-        <PopoverContent className="w-auto p-0" align="start">
-          <div className="flex flex-col">
-            {/* Shortcuts */}
-            {shortcutsItems.length > 0 && (
-              <div className="border-b p-2">
-                <div className="flex flex-wrap gap-1">
-                  {shortcutsItems.map((shortcut, index) => (
-                    <Button
-                      key={index}
-                      variant="outline"
-                      size="sm"
-                      onClick={() => {
-                        const newDate = shortcut.getValue();
-                        onChange?.(newDate);
-                        setDateTime(newDate);
-                        setOpen(false);
-                      }}
-                    >
-                      {shortcut.label}
-                    </Button>
-                  ))}
-                </div>
-              </div>
-            )}
-
-            {/* Calendar */}
-            {viewConfig.showDate && (
-              <Calendar
-                mode="single"
-                selected={dateTime}
-                onSelect={handleDateSelect}
-                disabled={(date) => {
-                  const today = new Date();
-                  today.setHours(0, 0, 0, 0);
-                  const compareDate = new Date(date);
-                  compareDate.setHours(0, 0, 0, 0);
-
-                  if (minDate) {
-                    const min = new Date(minDate);
-                    min.setHours(0, 0, 0, 0);
-                    if (compareDate < min) return true;
-                  }
-                  if (maxDate) {
-                    const max = new Date(maxDate);
-                    max.setHours(0, 0, 0, 0);
-                    if (compareDate > max) return true;
-                  }
-
-                  if (disablePast && compareDate < today) return true;
-                  if (disableFuture && compareDate > today) return true;
-                  if (shouldDisableDate && shouldDisableDate(date)) return true;
-                  if (shouldDisableMonth && shouldDisableMonth(date))
-                    return true;
-                  if (shouldDisableYear && shouldDisableYear(date)) return true;
-
-                  return false;
-                }}
-                captionLayout={'dropdown'}
-                defaultMonth={dateTime}
-              />
-            )}
-
-            {/* Time Picker */}
-            {viewConfig.showTime && (
-              <div className={cn('p-3', viewConfig.showDate && 'border-t')}>
-                <Input
-                  type="time"
-                  step="1"
-                  value={timeValue}
-                  onChange={handleTimeChange}
-                  className="bg-input-background border-none text-muted-foreground appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
-                />
-              </div>
-            )}
-          </div>
-        </PopoverContent>
-      </Popover>
-
-      {/* Helper Text / Error */}
-      {(helperText || error) && (
-        <Typography
-          variant="small"
-          className={cn('ml-1 mt-1', error && 'text-destructive')}
-        >
-          {typeof error === 'string' ? error : error?.message || helperText}
-        </Typography>
-      )}
-    </LabelWrapper>
-  );
+  return <DateTimePickerInput {...props} />;
 };

package/src/components/Input/DateTimePicker/components/DateTimePickerFilter.tsx

@@ -0,0 +1,292 @@
+import { Separator } from '@/components/DataDisplay/Separator/Separator';
+import { cn } from '@/lib/utils';
+import { Calendar } from '@/shadcn-components/Input/Calendar/Calendar';
+import { Input } from '@/shadcn-components/Input/Input/Input';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/shadcn-components/Input/Popover/Popover';
+import { format as DateFnsFormat } from 'date-fns';
+import { CalendarDays } from 'lucide-react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Button } from '../../Button/Button';
+import { DateTimePickerProps } from '../DateTimePicker';
+
+export const DateTimePickerFilter = ({
+  label,
+  value,
+  onChange,
+  format = 'dd MMM yyyy hh:mm a',
+  views = ['year', 'month', 'day', 'hours', 'minutes', 'seconds'],
+  placeholder = 'Pick a date and time',
+  shortcutsItems = [],
+  disabled = false,
+  minDate,
+  maxDate,
+  disablePast = false,
+  disableFuture = false,
+  shouldDisableDate,
+  shouldDisableMonth,
+  shouldDisableYear,
+  className,
+  onOpen,
+  onClose,
+  fullWidth,
+  type,
+  ...rest
+}: DateTimePickerProps) => {
+  const [open, setOpen] = useState(false);
+  const [timeValue, setTimeValue] = useState<string>('');
+  const wrapperRef = useRef<HTMLSpanElement>(null);
+
+  // Determine view configurations based on views prop
+  const viewConfig = useMemo(() => {
+    const hasTime =
+      views.includes('hours') ||
+      views.includes('minutes') ||
+      views.includes('seconds');
+    const hasDate =
+      views.includes('day') ||
+      views.includes('month') ||
+      views.includes('year');
+
+    return {
+      showTime: hasTime,
+      showDate: hasDate,
+    };
+  }, [views]);
+
+  // Update time value when value changes
+  useEffect(() => {
+    if (value && viewConfig.showTime) {
+      const hours = value.getHours(),
+        minutes = value.getMinutes(),
+        seconds = value.getSeconds(),
+        timeStr = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(
+          2,
+          '0',
+        )}:${String(seconds).padStart(2, '0')}`;
+      setTimeValue(timeStr);
+    }
+  }, [value, viewConfig.showTime]);
+
+  const formatDateTimeString = (date: Date | undefined) => {
+    if (!date) return '';
+
+    try {
+      return DateFnsFormat(date, format);
+    } catch {
+      return DateFnsFormat(date, 'dd/MM/yyyy hh:mm a');
+    }
+  };
+
+  const handleOpenChange = (newOpen: boolean) => {
+    setOpen(newOpen);
+    if (newOpen && onOpen) {
+      onOpen();
+    } else if (!newOpen && onClose) {
+      onClose();
+    }
+  };
+
+  const handleDateSelect = (date: Date | undefined) => {
+    if (date) {
+      const newDateTime = new Date(date);
+      // Preserve existing time if we have one
+      if (value) {
+        newDateTime.setHours(
+          value.getHours(),
+          value.getMinutes(),
+          value.getSeconds(),
+        );
+      }
+      onChange?.(newDateTime);
+    } else {
+      onChange?.(undefined);
+    }
+  };
+
+  const handleTimeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const timeStr = e.target.value;
+    setTimeValue(timeStr);
+
+    if (timeStr) {
+      const [hours, minutes, seconds] = timeStr.split(':').map(Number);
+      const newDateTime = value ? new Date(value) : new Date();
+      newDateTime.setHours(hours || 0, minutes || 0, seconds || 0);
+      onChange?.(newDateTime);
+    }
+  };
+
+  const handleClear = () => {
+    setTimeValue('');
+    onChange?.(undefined);
+    setOpen(false);
+  };
+
+  // Force re-render on mount to ensure positioning works
+  const [, forceUpdate] = useState({});
+  useEffect(() => {
+    forceUpdate({});
+  }, []);
+
+  const hasValue = !!value;
+  const displayText = hasValue
+    ? `${label} = ${formatDateTimeString(value)}`
+    : label;
+
+  // If only time selection (no date), render simplified filter for time only
+  if (viewConfig.showTime && !viewConfig.showDate) {
+    return (
+      <Popover open={open} onOpenChange={handleOpenChange}>
+        <PopoverTrigger asChild>
+          <span
+            ref={wrapperRef}
+            style={{ display: fullWidth ? 'block' : 'inline-block' }}
+          >
+            <Button
+              variant={hasValue ? 'default' : 'input'}
+              className={cn(
+                'justify-between',
+                fullWidth ? 'w-full' : '',
+                className,
+              )}
+              disabled={disabled}
+              {...rest}
+            >
+              {displayText || placeholder}
+              <CalendarDays className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+            </Button>
+          </span>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto p-0" align="start">
+          <div className="flex flex-col">
+            <div className="p-3">
+              <Input
+                type="time"
+                step="1"
+                value={timeValue}
+                onChange={handleTimeChange}
+                className="bg-input-background border-none text-muted-foreground appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+              />
+            </div>
+            <Separator />
+            <div className="flex flex-row items-center justify-left">
+              <Button variant="link" onClick={handleClear} className="min-w-0">
+                Clear
+              </Button>
+            </div>
+          </div>
+        </PopoverContent>
+      </Popover>
+    );
+  }
+
+  return (
+    <Popover open={open} onOpenChange={handleOpenChange}>
+      <PopoverTrigger asChild>
+        <span
+          ref={wrapperRef}
+          style={{ display: fullWidth ? 'block' : 'inline-block' }}
+        >
+          <Button
+            variant={hasValue ? 'default' : 'input'}
+            className={cn(
+              'justify-between',
+              fullWidth ? 'w-full' : '',
+              className,
+            )}
+            disabled={disabled}
+            {...rest}
+          >
+            {displayText || placeholder}
+            <CalendarDays className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          </Button>
+        </span>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0" align="start">
+        <div className="flex flex-col">
+          {/* Shortcuts */}
+          {shortcutsItems.length > 0 && (
+            <div className="border-b p-2">
+              <div className="flex flex-wrap gap-1">
+                {shortcutsItems.map((shortcut, index) => (
+                  <Button
+                    key={index}
+                    variant="outline"
+                    size="sm"
+                    onClick={() => {
+                      const newDate = shortcut.getValue();
+                      onChange?.(newDate);
+                      setOpen(false);
+                    }}
+                  >
+                    {shortcut.label}
+                  </Button>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Calendar */}
+          {viewConfig.showDate && (
+            <Calendar
+              mode="single"
+              selected={value}
+              onSelect={handleDateSelect}
+              disabled={(date) => {
+                const today = new Date();
+                today.setHours(0, 0, 0, 0);
+                const compareDate = new Date(date);
+                compareDate.setHours(0, 0, 0, 0);
+
+                if (minDate) {
+                  const min = new Date(minDate);
+                  min.setHours(0, 0, 0, 0);
+                  if (compareDate < min) return true;
+                }
+                if (maxDate) {
+                  const max = new Date(maxDate);
+                  max.setHours(0, 0, 0, 0);
+                  if (compareDate > max) return true;
+                }
+
+                if (disablePast && compareDate < today) return true;
+                if (disableFuture && compareDate > today) return true;
+                if (shouldDisableDate && shouldDisableDate(date)) return true;
+                if (shouldDisableMonth && shouldDisableMonth(date)) return true;
+                if (shouldDisableYear && shouldDisableYear(date)) return true;
+
+                return false;
+              }}
+              captionLayout={'dropdown'}
+              defaultMonth={value}
+            />
+          )}
+
+          {/* Time Picker */}
+          {viewConfig.showTime && (
+            <div className={cn('p-3', viewConfig.showDate && 'border-t')}>
+              <Input
+                type="time"
+                step="1"
+                value={timeValue}
+                onChange={handleTimeChange}
+                className="bg-input-background border-none text-muted-foreground appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+              />
+            </div>
+          )}
+
+          {/* Clear Button */}
+          <Separator />
+          <div className="flex flex-row items-center justify-left">
+            <Button variant="link" onClick={handleClear} className="min-w-0">
+              Clear
+            </Button>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+};