@multiplatform.one/forms 6.0.0

package/src/fields/DatePicker/DateRangePicker.tsx

@@ -0,0 +1,602 @@
+import type { DeepKeys, DeepValue } from "@tanstack/form-core";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { type ComponentProps, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { AnimatePresence, type Popover, Separator, View, useMedia, useProps } from "tamagui";
+
+import { Button } from "../../Button";
+import { Field, FieldLayout } from "../../fieldLayout";
+import { formCommonColors, formInputColors } 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,
+  isSameDay,
+  toWeeks,
+  useCalendarData,
+  useDateAnimation,
+  useDateNavigation,
+  yearPageSize,
+} from "./parts";
+
+import type { ViewMode } from "./parts";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface DateRange {
+  start: Date | null;
+  end: Date | null;
+}
+
+export type DateRangePickerProps<
+  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"
+    >
+  > & {
+    placeholder?: string;
+    minDate?: Date;
+    maxDate?: Date;
+    disabled?: boolean;
+    readOnly?: boolean;
+    inputProps?: Omit<ComponentProps<typeof InputParts.Area>, "value" | "onChangeText" | "ref">;
+    /** When true, renders a skeleton placeholder instead of the date range picker */
+    skeleton?: boolean;
+    /** When true, uses compact sizing */
+    compact?: boolean;
+  };
+
+// ---------------------------------------------------------------------------
+// Range day status helpers
+// ---------------------------------------------------------------------------
+
+type RangeStatus = "none" | "range-start" | "range-end" | "in-range" | "selected-single";
+
+function getRangeStatus(day: Date, start: Date | null, end: Date | null): RangeStatus {
+  if (!start) return "none";
+  if (isSameDay(day, start) && !end) return "selected-single";
+  if (isSameDay(day, start)) return "range-start";
+  if (end && isSameDay(day, end)) return "range-end";
+  if (end && day > start && day < end) return "in-range";
+  return "none";
+}
+
+// ---------------------------------------------------------------------------
+// RangeDayGrid — day cells with range highlighting
+// ---------------------------------------------------------------------------
+
+interface RangeDayGridProps {
+  calendarData: ReturnType<typeof useCalendarData>;
+  rangeStart: Date | null;
+  rangeEnd: Date | null;
+  onSelectDate: (date: Date) => void;
+  minDate?: Date;
+  maxDate?: Date;
+}
+
+function RangeDayGrid({
+  calendarData,
+  rangeStart,
+  rangeEnd,
+  onSelectDate,
+  minDate,
+  maxDate,
+}: RangeDayGridProps) {
+  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) => {
+            const hasCurrentMonthDay = week.some((d) => d.getMonth() === calendarData.month);
+            if (!hasCurrentMonthDay) {
+              return <View key={week[0].toISOString()} height="$3" />;
+            }
+
+            return (
+              <View
+                key={week[0].toISOString()}
+                flexDirection="row"
+                justifyContent="space-between"
+                width="100%"
+              >
+                {week.map((day) => {
+                  const isCurrentMonth = day.getMonth() === calendarData.month;
+                  const isToday = isSameDay(calendarData.today, day);
+                  const isOutOfRange =
+                    (minDate != null && day < minDate) || (maxDate != null && day > maxDate);
+                  const isDisabled = !isCurrentMonth || isOutOfRange;
+                  const rangeStatus = isCurrentMonth
+                    ? getRangeStatus(day, rangeStart, rangeEnd)
+                    : "none";
+                  const isSelected =
+                    rangeStatus === "range-start" ||
+                    rangeStatus === "range-end" ||
+                    rangeStatus === "selected-single";
+                  const isInRange = rangeStatus === "in-range";
+
+                  if (!isCurrentMonth) {
+                    return <View key={day.toISOString()} flex={1} />;
+                  }
+
+                  return (
+                    <View
+                      key={day.toISOString()}
+                      flex={1}
+                      justifyContent="center"
+                      alignItems="center"
+                      position="relative"
+                    >
+                      {(isInRange ||
+                        rangeStatus === "range-start" ||
+                        rangeStatus === "range-end") && (
+                        <View
+                          transition="quick"
+                          position="absolute"
+                          height="100%"
+                          zIndex={0}
+                          backgroundColor={formInputColors.background.focus}
+                          enterStyle={{ opacity: 0 }}
+                          exitStyle={{ opacity: 0 }}
+                          opacity={1}
+                          {...(rangeStatus === "range-start"
+                            ? { left: "50%", right: 0, width: "50%" }
+                            : rangeStatus === "range-end"
+                              ? { left: 0, right: "50%", width: "50%" }
+                              : { left: 0, right: 0, width: "100%" })}
+                        />
+                      )}
+
+                      <Button
+                        chromeless
+                        circular
+                        size={knobProps.sizeToken}
+                        disabled={isDisabled}
+                        onPress={() => !isDisabled && onSelectDate(day)}
+                        backgroundColor={
+                          isSelected ? formInputColors.background.focus : "transparent"
+                        }
+                        theme={isSelected ? ("accent" as any) : undefined}
+                        borderWidth={knobProps.borderRadius.borderWidth || 1}
+                        borderColor={isSelected ? "$backgroundStrong" : "transparent"}
+                        zIndex={1}
+                      >
+                        {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" : formCommonColors.text}
+                          >
+                            {day.getDate()}
+                          </Button.Text>
+                        )}
+                      </Button>
+                    </View>
+                  );
+                })}
+              </View>
+            );
+          })}
+        </View>
+      </View>
+    </AnimatePresence>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// SingleCalendar — one month panel for range picker
+// ---------------------------------------------------------------------------
+
+interface SingleCalendarProps {
+  displayDate: Date;
+  rangeStart: Date | null;
+  rangeEnd: Date | null;
+  onSelectDate: (date: Date) => void;
+  onNavigateMonth: (months: number) => void;
+  onSetDisplayDate: (date: Date) => void;
+  minDate?: Date;
+  maxDate?: Date;
+  showPrev?: boolean;
+  showNext?: boolean;
+}
+
+function SingleCalendar({
+  displayDate,
+  rangeStart,
+  rangeEnd,
+  onSelectDate,
+  onNavigateMonth,
+  onSetDisplayDate,
+  minDate,
+  maxDate,
+  showPrev = true,
+  showNext = true,
+}: SingleCalendarProps) {
+  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%">
+        <CalendarHeader
+          year={calendarData.year}
+          monthName={calendarData.monthName}
+          onPrevMonth={() => onNavigateMonth(-1)}
+          onNextMonth={() => onNavigateMonth(1)}
+          showPrev={showPrev}
+          showNext={showNext}
+          onYearPress={() => {
+            setYearPageStart(calendarData.year - (calendarData.year % yearPageSize));
+            setViewMode("year");
+          }}
+          onMonthPress={() => setViewMode("month")}
+        />
+        <RangeDayGrid
+          calendarData={calendarData}
+          rangeStart={rangeStart}
+          rangeEnd={rangeEnd}
+          onSelectDate={onSelectDate}
+          minDate={minDate}
+          maxDate={maxDate}
+        />
+      </View>
+    </ViewSwitcher>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// DualCalendarBody — two panels side-by-side on wide screens
+// ---------------------------------------------------------------------------
+
+interface DualCalendarBodyProps {
+  rangeStart: Date | null;
+  rangeEnd: Date | null;
+  onSelectDate: (date: Date) => void;
+  displayDate: Date;
+  setDisplayDate: (date: Date) => void;
+  navigateMonth: (direction: "prev" | "next") => void;
+  minDate?: Date;
+  maxDate?: Date;
+}
+
+function DualCalendarBody({
+  rangeStart,
+  rangeEnd,
+  onSelectDate,
+  displayDate,
+  setDisplayDate,
+  navigateMonth,
+  minDate,
+  maxDate,
+}: DualCalendarBodyProps) {
+  const { knobProps } = useResolvedKnobs();
+  const { gtSm: fullWidthMode } = useMedia();
+
+  const prevMonthDate = useMemo(() => {
+    const date = new Date(displayDate);
+    date.setMonth(date.getMonth() - 1);
+    return date;
+  }, [displayDate]);
+
+  const handleNavigate = useCallback(
+    (months: number) => navigateMonth(months < 0 ? "prev" : "next"),
+    [navigateMonth],
+  );
+
+  const handleSetDisplayForPrev = useCallback(
+    (date: Date) => {
+      const next = new Date(date);
+      next.setMonth(next.getMonth() + 1);
+      setDisplayDate(next);
+    },
+    [setDisplayDate],
+  );
+
+  if (!fullWidthMode) {
+    return (
+      <View {...knobProps.panelPadding}>
+        <SingleCalendar
+          displayDate={displayDate}
+          rangeStart={rangeStart}
+          rangeEnd={rangeEnd}
+          onSelectDate={onSelectDate}
+          onNavigateMonth={handleNavigate}
+          onSetDisplayDate={setDisplayDate}
+          minDate={minDate}
+          maxDate={maxDate}
+        />
+      </View>
+    );
+  }
+
+  return (
+    <View flexDirection="row" {...knobProps.gap} {...knobProps.panelPadding}>
+      <SingleCalendar
+        displayDate={prevMonthDate}
+        rangeStart={rangeStart}
+        rangeEnd={rangeEnd}
+        onSelectDate={onSelectDate}
+        onNavigateMonth={handleNavigate}
+        onSetDisplayDate={handleSetDisplayForPrev}
+        minDate={minDate}
+        maxDate={maxDate}
+        showNext={false}
+      />
+      <Separator vertical />
+      <SingleCalendar
+        displayDate={displayDate}
+        rangeStart={rangeStart}
+        rangeEnd={rangeEnd}
+        onSelectDate={onSelectDate}
+        onNavigateMonth={handleNavigate}
+        onSetDisplayDate={setDisplayDate}
+        minDate={minDate}
+        maxDate={maxDate}
+        showPrev={false}
+      />
+    </View>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// formatRange — display value for date range
+// ---------------------------------------------------------------------------
+
+function formatRange(start: Date | null, end: Date | null): string {
+  if (!start) return "";
+  const formatDate = (date: Date) => date.toDateString();
+  if (!end) return `${formatDate(start)} – end date`;
+  return `${formatDate(start)} – ${formatDate(end)}`;
+}
+
+// ---------------------------------------------------------------------------
+// DateRangePicker — main component
+// ---------------------------------------------------------------------------
+
+export function DateRangePicker<
+  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: DateRangePickerProps<TParentData, TName, TFieldValidator, TFormValidator, TData>) {
+  const {
+    defaultValue,
+    form,
+    inputProps: _inputProps,
+    placeholder = "Start date – End date",
+    minDate,
+    maxDate,
+    disabled,
+    readOnly,
+    mode,
+    name,
+    preserveValue,
+    validators,
+    label,
+    labelProps,
+    error: errorProp,
+    helperText,
+    required,
+    size,
+    onBlur: _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 [rangeStart, setRangeStart] = useState<Date | null>(null);
+  const [rangeEnd, setRangeEnd] = useState<Date | null>(null);
+  const { displayDate, setDisplayDate, navigateMonth } = useDateNavigation();
+  const popoverRef = useRef<Popover>(null);
+
+  const closePopover = useCallback(() => {
+    setOpen(false);
+    popoverRef.current?.close();
+  }, []);
+
+  useEffect(() => {
+    if (rangeStart && rangeEnd) closePopover();
+  }, [rangeStart, rangeEnd, closePopover]);
+
+  const handleSelectDate = useCallback(
+    (date: Date) => {
+      if (minDate && date < minDate) return;
+      if (maxDate && date > maxDate) return;
+
+      if (!rangeStart || (rangeStart && rangeEnd)) {
+        setRangeStart(date);
+        setRangeEnd(null);
+        return;
+      }
+
+      if (date < rangeStart) {
+        setRangeEnd(rangeStart);
+        setRangeStart(date);
+        closePopover();
+      } else if (isSameDay(date, rangeStart)) {
+        setRangeStart(null);
+        setRangeEnd(null);
+      } else {
+        setRangeEnd(date);
+        closePopover();
+      }
+    },
+    [rangeStart, rangeEnd, minDate, maxDate, closePopover],
+  );
+
+  const handleClear = useCallback(() => {
+    setRangeStart(null);
+    setRangeEnd(null);
+  }, []);
+
+  const calendarContent = (
+    <DualCalendarBody
+      rangeStart={rangeStart}
+      rangeEnd={rangeEnd}
+      onSelectDate={handleSelectDate}
+      displayDate={displayDate}
+      setDisplayDate={setDisplayDate}
+      navigateMonth={navigateMonth}
+      minDate={minDate}
+      maxDate={maxDate}
+    />
+  );
+
+  const renderPopover = (hasError?: boolean, blurHandler?: (...args: any[]) => void) => {
+    if (readOnly) {
+      return (
+        <InputParts.Box>
+          <InputParts.Area
+            value={formatRange(rangeStart, rangeEnd)}
+            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={formatRange(rangeStart, rangeEnd)}
+            placeholder={placeholder}
+            disabled={disabled}
+            onReset={handleClear}
+            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}
+      >
+        <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);
+
+        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, mergeFieldHandler(field, "handleBlur", _onBlur))}
+            </InputParts>
+          </FieldLayout>
+        );
+      }}
+    </Field>
+  );
+}

package/src/fields/DatePicker/DatetimePicker.spec.tsx

@@ -0,0 +1,57 @@
+import { describe, expect, it } from "vitest";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Form } from "../../Form";
+import { DatetimePicker } from "./DatetimePicker";
+
+describe("DatetimePicker", () => {
+  describe("without form context", () => {
+    it("renders with label", () => {
+      const result = renderWithProviders(<DatetimePicker label="Appointment" name="appt" />);
+      expect(result.findTextElement("Appointment")).toBeDefined();
+    });
+
+    it("renders required label with asterisk", () => {
+      const result = renderWithProviders(<DatetimePicker label="Required" name="req" required />);
+      const label = result.container.querySelector("label");
+      expect(label?.textContent).toContain("*");
+    });
+
+    it("renders with helper text", () => {
+      const result = renderWithProviders(
+        <DatetimePicker label="Appointment" name="appt" helperText="Select date and time" />,
+      );
+      expect(result.findTextElement("Select date and time")).toBeDefined();
+    });
+
+    it("renders skeleton placeholder", () => {
+      const result = renderWithProviders(<DatetimePicker label="Loading" name="l" skeleton />);
+      const input = result.container.querySelector("input");
+      expect(input).toBeNull();
+    });
+
+    it("renders with placeholder", () => {
+      const result = renderWithProviders(
+        <DatetimePicker label="Appointment" name="appt" placeholder="Pick date & time" />,
+      );
+      const input = result.container.querySelector('input[placeholder="Pick date & time"]');
+      expect(input).not.toBeNull();
+    });
+
+    it("renders with default placeholder when no date selected", () => {
+      const result = renderWithProviders(<DatetimePicker label="Appointment" name="appt" />);
+      const input = result.container.querySelector("input");
+      expect(input).not.toBeNull();
+    });
+  });
+
+  describe("with form context", () => {
+    it("renders inside form", () => {
+      const result = renderWithProviders(
+        <Form formOptions={{ defaultValues: { appt: null } }} submitText="Submit">
+          <DatetimePicker name="appt" label="Appointment" />
+        </Form>,
+      );
+      expect(result.findTextElement("Appointment")).toBeDefined();
+    });
+  });
+});