@multiplatform.one/forms 6.0.0

package/src/fields/DatePicker/index.tsx

@@ -0,0 +1,450 @@
+import type { DeepKeys, DeepValue } from "@tanstack/form-core";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { type ComponentProps, useCallback, useEffect, useRef, useState } from "react";
+import { coerceToDate } from "./utils";
+import { AnimatePresence, type Popover, View, useProps } from "tamagui";
+
+import { Button } from "../../Button";
+import { Field, FieldLayout } from "../../fieldLayout";
+import { formCommonColors } from "../../shared/colorRamps";
+import {
+  getFieldError,
+  mergeFieldHandler,
+  useFormField,
+  useResolvedValidators,
+} from "../../shared/utils";
+import type { FormFieldProps } from "../../fieldLayout";
+import { Input as InputParts } from "../../InputParts";
+import { Skeleton } from "../../Skeleton";
+import type { FieldComponentProps, Validator } from "../../types";
+
+import {
+  CalendarHeader,
+  DatePickerInputTrigger,
+  DatePickerPopoverShell,
+  ViewSwitcher,
+  WeekView,
+  formatDateDisplay,
+  isSameDay,
+  toWeeks,
+  useCalendarData,
+  useDateAnimation,
+  useDateNavigation,
+  yearPageSize,
+} from "./parts";
+
+import type { ViewMode } from "./parts";
+
+export type { ViewMode } from "./parts";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export type DatePickerProps<
+  TParentData = any,
+  TName extends DeepKeys<TParentData> = any,
+  TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined,
+  TFormValidator extends Validator<TParentData, unknown> | undefined = undefined,
+  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
+> = Omit<
+  FormFieldProps<TParentData, TName, TFieldValidator, TFormValidator, TData>,
+  "children" | "field"
+> &
+  Partial<
+    Omit<
+      FieldComponentProps<TParentData, TName, TFieldValidator, TFormValidator, TData>,
+      "children"
+    >
+  > & {
+    readOnly?: boolean;
+    placeholder?: string;
+    format?: string;
+    minDate?: Date;
+    maxDate?: Date;
+    disabled?: boolean;
+    inputProps?: Omit<ComponentProps<typeof InputParts.Area>, "value" | "onChangeText" | "ref">;
+    /** When true, renders a skeleton placeholder instead of the date picker */
+    skeleton?: boolean;
+    /** When true, uses compact sizing */
+    compact?: boolean;
+    /** Standalone controlled value (Date or ISO string). Ignored when used inside a form. */
+    value?: Date | string | null;
+    /** Standalone change callback. Ignored when used inside a form. */
+    onValueChange?: (value: Date | null) => void;
+  };
+
+// ---------------------------------------------------------------------------
+// DayGrid — animated day cells (single-select)
+// ---------------------------------------------------------------------------
+
+interface DayGridProps {
+  calendarData: ReturnType<typeof useCalendarData>;
+  selectedDate: Date | null;
+  onSelectDate: (date: Date) => void;
+  minDate?: Date;
+  maxDate?: Date;
+}
+
+function DayGrid({ calendarData, selectedDate, onSelectDate, minDate, maxDate }: DayGridProps) {
+  const { knobProps } = useResolvedKnobs();
+  const { animation, animationKey } = useDateAnimation(
+    `${calendarData.year}-${calendarData.month}`,
+  );
+  const weeks = toWeeks(calendarData.days);
+
+  return (
+    <AnimatePresence key={animationKey}>
+      <View width="100%" {...knobProps.gap} transition="medium" {...animation}>
+        <WeekView />
+        <View flexDirection="column" gap="$1" width="100%">
+          {weeks.map((week) => (
+            <View
+              key={week[0].toISOString()}
+              flexDirection="row"
+              gap="$1"
+              justifyContent="space-between"
+              width="100%"
+            >
+              {week.map((day) => {
+                const isCurrentMonth = day.getMonth() === calendarData.month;
+                const isSelected = isSameDay(selectedDate, day);
+                const isToday = isSameDay(calendarData.today, day);
+                const isOutOfRange =
+                  (minDate != null && day < minDate) || (maxDate != null && day > maxDate);
+                const isDisabled = !isCurrentMonth || isOutOfRange;
+
+                return (
+                  <Button
+                    key={day.toISOString()}
+                    chromeless
+                    circular
+                    flex={1}
+                    size={knobProps.sizeToken}
+                    disabled={isDisabled}
+                    onPress={() => !isDisabled && onSelectDate(day)}
+                    backgroundColor={isSelected ? "$background" : "transparent"}
+                    theme={isSelected ? ("accent" as any) : undefined}
+                    opacity={isCurrentMonth ? 1 : 0}
+                    pointerEvents={isCurrentMonth ? "auto" : "none"}
+                    borderWidth={knobProps.borderRadius.borderWidth || 1}
+                    borderColor={isSelected ? "$backgroundStrong" : "transparent"}
+                  >
+                    {isSelected ? (
+                      <Button.Text
+                        key="text-selected"
+                        transition="quicker"
+                        enterStyle={{ opacity: 0, y: 20 }}
+                        exitStyle={{ opacity: 0, y: 20 }}
+                        opacity={1}
+                        fontWeight="bold"
+                      >
+                        {day.getDate()}
+                      </Button.Text>
+                    ) : (
+                      <Button.Text
+                        key="text-normal"
+                        color={
+                          isToday
+                            ? "$accentColor"
+                            : isCurrentMonth
+                              ? formCommonColors.text
+                              : formCommonColors.muted
+                        }
+                      >
+                        {day.getDate()}
+                      </Button.Text>
+                    )}
+                  </Button>
+                );
+              })}
+            </View>
+          ))}
+        </View>
+      </View>
+    </AnimatePresence>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// CalendarBody — orchestrates day/month/year views
+// ---------------------------------------------------------------------------
+
+interface CalendarBodyProps {
+  displayDate: Date;
+  selectedDate: Date | null;
+  onSelectDate: (date: Date) => void;
+  onNavigateMonth: (direction: "prev" | "next") => void;
+  onSetDisplayDate: (date: Date) => void;
+  minDate?: Date;
+  maxDate?: Date;
+}
+
+function CalendarBody({
+  displayDate,
+  selectedDate,
+  onSelectDate,
+  onNavigateMonth,
+  onSetDisplayDate,
+  minDate,
+  maxDate,
+}: CalendarBodyProps) {
+  const { knobProps } = useResolvedKnobs();
+  const [viewMode, setViewMode] = useState<ViewMode>("day");
+  const calendarData = useCalendarData(displayDate);
+  const [yearPageStart, setYearPageStart] = useState(
+    () => calendarData.year - (calendarData.year % yearPageSize),
+  );
+
+  return (
+    <ViewSwitcher
+      calendarData={calendarData}
+      displayDate={displayDate}
+      onSetDisplayDate={onSetDisplayDate}
+      viewMode={viewMode}
+      setViewMode={setViewMode}
+      yearPageStart={yearPageStart}
+      setYearPageStart={setYearPageStart}
+    >
+      <View
+        flexDirection="column"
+        alignItems="center"
+        {...knobProps.gapLg}
+        width="100%"
+        {...knobProps.panelPadding}
+      >
+        <CalendarHeader
+          year={calendarData.year}
+          monthName={calendarData.monthName}
+          onPrevMonth={() => onNavigateMonth("prev")}
+          onNextMonth={() => onNavigateMonth("next")}
+          onYearPress={() => {
+            setYearPageStart(calendarData.year - (calendarData.year % yearPageSize));
+            setViewMode("year");
+          }}
+          onMonthPress={() => setViewMode("month")}
+        />
+        <DayGrid
+          calendarData={calendarData}
+          selectedDate={selectedDate}
+          onSelectDate={onSelectDate}
+          minDate={minDate}
+          maxDate={maxDate}
+        />
+      </View>
+    </ViewSwitcher>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// DatePicker — main exported component
+// ---------------------------------------------------------------------------
+
+export function DatePicker<
+  TParentData,
+  TName extends DeepKeys<TParentData>,
+  TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined,
+  TFormValidator extends Validator<TParentData, unknown> | undefined = undefined,
+  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
+>(props: DatePickerProps<TParentData, TName, TFieldValidator, TFormValidator, TData>) {
+  const {
+    defaultValue,
+    value: controlledValue,
+    onValueChange,
+    form,
+    inputProps: _inputProps,
+    placeholder = "Select date",
+    format: _format = "MM/DD/YYYY",
+    minDate,
+    maxDate,
+    disabled,
+    mode,
+    name,
+    preserveValue,
+    validators,
+    label,
+    labelProps,
+    error: errorProp,
+    helperText,
+    required,
+    size,
+    readOnly,
+    onBlur,
+    skeleton,
+    compact,
+    id: idProp,
+    ..._restProps
+  } = useProps(props);
+
+  const { resolvedForm, knobProps, id } = useFormField({ form, id: idProp, compact });
+  const resolvedValidators = useResolvedValidators(required, validators, label, name);
+
+  const [open, setOpen] = useState(false);
+  const [selectedDate, setSelectedDate] = useState<Date | null>(() =>
+    coerceToDate(controlledValue ?? defaultValue),
+  );
+  // Sync external `value` changes (controlled standalone mode).
+  useEffect(() => {
+    if (controlledValue === undefined) return;
+    setSelectedDate(coerceToDate(controlledValue));
+  }, [controlledValue]);
+  const { displayDate, setDisplayDate, navigateMonth } = useDateNavigation();
+  const popoverRef = useRef<Popover>(null);
+
+  const closePopover = useCallback(() => {
+    setOpen(false);
+    popoverRef.current?.close();
+  }, []);
+
+  useEffect(() => {
+    if (selectedDate) closePopover();
+  }, [selectedDate, closePopover]);
+
+  const handleDateSelect = useCallback(
+    (date: Date) => {
+      if (minDate && date < minDate) return;
+      if (maxDate && date > maxDate) return;
+      setSelectedDate(date);
+      setDisplayDate(date);
+      onValueChange?.(date);
+      closePopover();
+    },
+    [minDate, maxDate, setDisplayDate, closePopover, onValueChange],
+  );
+
+  const handleClearDate = useCallback(() => {
+    setSelectedDate(null);
+    setDisplayDate(new Date());
+    onValueChange?.(null);
+  }, [setDisplayDate, onValueChange]);
+
+  const calendarContent = (
+    <CalendarBody
+      displayDate={displayDate}
+      selectedDate={selectedDate}
+      onSelectDate={handleDateSelect}
+      onNavigateMonth={navigateMonth}
+      onSetDisplayDate={setDisplayDate}
+      minDate={minDate}
+      maxDate={maxDate}
+    />
+  );
+
+  const renderPopover = (hasError?: boolean, blurHandler?: (...args: any[]) => void) => {
+    if (readOnly) {
+      return (
+        <InputParts.Box>
+          <InputParts.Area
+            value={formatDateDisplay(selectedDate)}
+            readOnly
+            aria-readonly="true"
+            aria-required={required || undefined}
+            aria-invalid={hasError || undefined}
+            placeholder={placeholder}
+          />
+        </InputParts.Box>
+      );
+    }
+
+    const handleOpenChange = (isOpen: boolean) => {
+      setOpen(isOpen);
+      if (!isOpen) {
+        blurHandler?.();
+      }
+    };
+
+    return (
+      <DatePickerPopoverShell
+        open={open}
+        onOpenChange={handleOpenChange}
+        popoverRef={popoverRef}
+        trigger={
+          <DatePickerInputTrigger
+            value={formatDateDisplay(selectedDate)}
+            placeholder={placeholder}
+            disabled={disabled}
+            onReset={handleClearDate}
+            onButtonPress={() => setOpen(true)}
+            error={!!hasError}
+            aria-required={required || undefined}
+            aria-invalid={hasError || undefined}
+          />
+        }
+      >
+        {calendarContent}
+      </DatePickerPopoverShell>
+    );
+  };
+
+  // Render skeleton placeholder (after all hooks)
+  if (skeleton) {
+    return (
+      <FieldLayout id={id} label={label} size={size} knobProps={knobProps}>
+        <Skeleton variant="rounded" width="100%" height={knobProps.sizeToken} />
+      </FieldLayout>
+    );
+  }
+
+  if (!resolvedForm || !name) {
+    return (
+      <FieldLayout
+        id={id}
+        label={label}
+        labelProps={labelProps}
+        error={errorProp}
+        helperText={helperText}
+        required={required}
+        size={size}
+        knobProps={knobProps}
+        onBlur={onBlur}
+      >
+        <InputParts size={size || knobProps.sizeToken}>{renderPopover(!!errorProp)}</InputParts>
+      </FieldLayout>
+    );
+  }
+
+  return (
+    <Field
+      defaultValue={defaultValue}
+      form={resolvedForm}
+      mode={mode}
+      name={name}
+      preserveValue={preserveValue}
+      validators={resolvedValidators}
+    >
+      {(field) => {
+        const resolvedError = getFieldError(field, errorProp);
+        const blurHandler = mergeFieldHandler(field, "handleBlur", onBlur);
+
+        return (
+          <FieldLayout
+            id={id}
+            label={label}
+            labelProps={labelProps}
+            error={resolvedError}
+            helperText={helperText}
+            required={required}
+            size={size}
+            knobProps={knobProps}
+          >
+            <InputParts size={size || knobProps.sizeToken}>
+              {renderPopover(!!resolvedError, blurHandler)}
+            </InputParts>
+          </FieldLayout>
+        );
+      }}
+    </Field>
+  );
+}
+
+// Re-export new picker variants
+export { MultiDatePicker } from "./MultiDatePicker";
+export type { MultiDatePickerProps } from "./MultiDatePicker";
+export { DateRangePicker } from "./DateRangePicker";
+export type { DateRange, DateRangePickerProps } from "./DateRangePicker";
+export { Calendar } from "./Calendar";
+export type { CalendarProps, CalendarMode } from "./Calendar";
+export { MonthPicker } from "./MonthPicker";
+export type { MonthPickerProps, MonthPickerValue } from "./MonthPicker";
+export { DatetimePicker } from "./DatetimePicker";
+export type { DatetimePickerProps } from "./DatetimePicker";