@povio/ui 0.0.2 → 0.0.4

package/src/components/inputs/DateTime/DateTimePicker/DateTimePicker.tsx

@@ -0,0 +1,291 @@
+import {
+  type CalendarDate,
+  CalendarDateTime,
+  Time,
+  createCalendar,
+  getLocalTimeZone,
+  now,
+  today,
+} from "@internationalized/date";
+import { mergeRefs } from "@react-aria/utils";
+import { type FocusEvent, type Ref, useEffect, useRef } from "react";
+import { type DateValue, useDatePicker, useLocale } from "react-aria";
+import { Controller, type FieldValues } from "react-hook-form";
+import { type DatePickerStateOptions, useCalendarState, useDatePickerState } from "react-stately";
+
+import { Calendar } from "#ui/components/inputs/DateTime/shared/Calendar";
+import { DatePickerInput } from "#ui/components/inputs/DateTime/shared/DatePickerInput";
+import { DateTimeDialog } from "#ui/components/inputs/DateTime/shared/DateTimeDialog";
+import { DateTimeDialogFooter } from "#ui/components/inputs/DateTime/shared/DateTimeDialogFooter";
+import { FormField, type FormFieldProps } from "#ui/components/inputs/FormField/FormField";
+import type { FormFieldHeaderProps } from "#ui/components/inputs/FormField/FormFieldHeader";
+import type { ControlProps } from "#ui/components/inputs/shared/form.types";
+import type { InputVariantProps } from "#ui/components/inputs/shared/input.cva";
+import { UIConfig } from "#ui/config/uiConfig.context";
+import { DateTimeUtils } from "#ui/utils/date-time.utils";
+
+// Workaround for bug in React Aria (https://github.com/adobe/react-spectrum/issues/3256#issuecomment-1825942096)
+const PLACEHOLDER_VALUE = new CalendarDateTime(2024, 1, 1);
+
+interface DateTimePickerBaseProps
+  extends FormFieldProps,
+    InputVariantProps,
+    Omit<DatePickerStateOptions<DateValue>, "granularity" | "shouldCloseOnSelect" | "label"> {
+  ref?: Ref<HTMLDivElement>;
+  disableDropdown?: boolean;
+  isTimeOptional?: boolean;
+  isClearable?: boolean;
+  todayIcon?: boolean;
+}
+
+const DateTimePickerBase = (props: DateTimePickerBaseProps) => {
+  const ui = UIConfig.useConfig();
+
+  const {
+    ref,
+    label,
+    tooltipText,
+    helperText,
+    isRequired,
+    rightContent,
+    isDisabled,
+    headerClassName,
+    errorClassName,
+    isHeaderHidden,
+    error,
+    onChange,
+    value,
+    disableDropdown,
+    isTimeOptional,
+    todayIcon,
+    hideLabel = ui.input.hideLabel,
+    variant = ui.input.variant,
+    as = ui.input.as,
+    size = ui.input.size,
+    isClearable = ui.input.isClearable,
+    ...rest
+  } = props;
+
+  const formFieldProps: FormFieldProps = {
+    error,
+    label,
+    tooltipText,
+    helperText,
+    isRequired,
+    rightContent,
+    isHeaderHidden: isHeaderHidden || as === "inline" || as === "filter" || as === "floating",
+    hideLabel,
+    isDisabled,
+    headerClassName,
+    errorClassName,
+  };
+
+  const dialogState = useDatePickerState({
+    ...rest,
+    defaultValue: value || rest.defaultValue,
+    shouldCloseOnSelect: false,
+    granularity: "minute",
+    hideTimeZone: true,
+  });
+
+  useEffect(() => {
+    if (isTimeOptional && !dialogState.timeValue) {
+      dialogState.setTimeValue(new Time(0, 0));
+    }
+  }, [isTimeOptional, dialogState]);
+
+  const state = useDatePickerState({
+    ...rest,
+    value,
+    onChange: (val) => {
+      onChange?.(val);
+      dialogState.setValue(val);
+      calendarState.setFocusedDate((val as CalendarDate) || today(getLocalTimeZone()));
+    },
+    shouldCloseOnSelect: false,
+    granularity: "minute",
+    hideTimeZone: true,
+  });
+
+  const datePickerRef = useRef<HTMLDivElement>(null);
+
+  const { groupProps, labelProps, fieldProps, buttonProps, dialogProps } = useDatePicker(
+    { ...rest, label, granularity: "minute", hideTimeZone: true },
+    state,
+    datePickerRef,
+  );
+  const { calendarProps } = useDatePicker({ ...rest, label }, dialogState, datePickerRef);
+
+  const { locale } = useLocale();
+  const calendarState = useCalendarState({
+    ...calendarProps,
+    locale,
+    createCalendar,
+  });
+
+  const headerProps: FormFieldHeaderProps = {
+    label,
+    tooltipText,
+    helperText,
+    isRequired,
+    rightContent,
+    isHeaderHidden: hideLabel || isHeaderHidden,
+    isDisabled,
+    className: headerClassName,
+    labelProps,
+  };
+
+  const onApply = () => {
+    state.setValue(dialogState.value);
+    state.toggle();
+  };
+
+  const onTodayPress = () => {
+    dialogState.setValue(now(getLocalTimeZone()));
+    calendarState.setFocusedDate(today(getLocalTimeZone()));
+  };
+
+  const onOpenChange = (isOpen: boolean) => {
+    state.toggle();
+    calendarState.setFocusedDate((state.value as CalendarDate) || today(getLocalTimeZone()));
+    if (!isOpen) {
+      dialogState.setValue(state.value);
+    }
+  };
+
+  const onInputBlur = (e: FocusEvent) => {
+    if (!isTimeOptional) {
+      return;
+    }
+    const textValue = e.currentTarget.textContent;
+
+    const dateTimeValue = DateTimeUtils.formatTextDateToCalendarDateTime(textValue);
+    if (dateTimeValue) {
+      state.setValue(dateTimeValue);
+      dialogState.setValue(dateTimeValue);
+      dialogState.setTimeValue(new Time(0, 0));
+    }
+  };
+
+  return (
+    <FormField
+      {...formFieldProps}
+      as={as}
+      labelProps={labelProps}
+      className="relative inline-flex w-full flex-col text-left"
+    >
+      <DatePickerInput
+        ref={mergeRefs(ref, datePickerRef)}
+        as={as}
+        groupProps={groupProps}
+        fieldProps={{
+          ...fieldProps,
+          placeholderValue: PLACEHOLDER_VALUE,
+          onBlur: (e) => {
+            fieldProps.onBlur?.(e);
+            onInputBlur(e);
+          },
+        }}
+        buttonProps={buttonProps}
+        isDisabled={isDisabled}
+        isInvalid={!!error}
+        disableDropdown={disableDropdown}
+        variant={variant}
+        size={size}
+        isDateTime
+        isClearable={isClearable}
+        headerProps={headerProps}
+        todayIcon={todayIcon}
+      />
+      {!disableDropdown && (
+        <DateTimeDialog
+          footer={
+            <DateTimeDialogFooter
+              isValid={!dialogState.isInvalid && !!dialogState.value}
+              onTodayPress={onTodayPress}
+              onApply={onApply}
+            />
+          }
+          label={label}
+          triggerRef={datePickerRef}
+          dialogProps={dialogProps}
+          isOpen={state.isOpen}
+          onOpenChange={onOpenChange}
+        >
+          <Calendar
+            state={calendarState}
+            calendarProps={calendarProps}
+            includesTime
+            datePickerState={dialogState}
+            onApply={onApply}
+          />
+        </DateTimeDialog>
+      )}
+    </FormField>
+  );
+};
+
+export interface DateTimePickerProps extends Omit<DateTimePickerBaseProps, "value" | "onChange"> {
+  value?: string | null;
+  onChange?: (value: string | null) => void;
+  fullIso?: boolean;
+}
+
+export type ControlledDateTimePickerProps<TFieldValues extends FieldValues> = ControlProps<
+  DateTimePickerProps,
+  TFieldValues
+>;
+
+export const DateTimePicker = <TFieldValues extends FieldValues>({
+  fullIso = true,
+  ...props
+}: ControlledDateTimePickerProps<TFieldValues>) => {
+  const formatDateValue = (dateValue: DateValue | null): string | null => {
+    if (dateValue === null) {
+      return null;
+    }
+
+    if (fullIso) {
+      return DateTimeUtils.fromCalendarDateTimeToUTCISO(dateValue as CalendarDateTime);
+    }
+
+    return DateTimeUtils.fromDateValueToISO(dateValue);
+  };
+
+  const parseDateValue = (isoString?: string | null): DateValue | null | undefined => {
+    if (isoString == null) {
+      return isoString;
+    }
+    return DateTimeUtils.fromISOtoZonedDateTime(isoString);
+  };
+
+  if ("formControl" in props && props.formControl) {
+    const { formControl, ref, ...innerProps } = props;
+
+    return (
+      <Controller
+        control={formControl.control}
+        name={formControl.name}
+        render={({ field, fieldState: { error } }) => (
+          <DateTimePickerBase
+            {...innerProps}
+            ref={mergeRefs(ref, field.ref)}
+            value={parseDateValue(field.value)}
+            onChange={(value) => field.onChange(formatDateValue(value))}
+            onBlur={field.onBlur}
+            isDisabled={field.disabled || props.isDisabled}
+            error={props.error ?? error?.message}
+          />
+        )}
+      />
+    );
+  }
+
+  return (
+    <DateTimePickerBase
+      {...props}
+      value={parseDateValue(props.value)}
+      onChange={(value) => props.onChange?.(formatDateValue(value))}
+    />
+  );
+};

package/src/components/inputs/DateTime/TimePicker/TimePicker.tsx

@@ -0,0 +1,255 @@
+import { getLocalTimeZone, now, toTime } from "@internationalized/date";
+import { mergeRefs } from "@react-aria/utils";
+import { DateTime } from "luxon";
+import { type Ref, useEffect, useRef, useState } from "react";
+import { type AriaTimeFieldProps, type TimeValue, useLocale, useTimeField } from "react-aria";
+import { Controller, type FieldValues } from "react-hook-form";
+import { useTimeFieldState } from "react-stately";
+
+import { DateTimeDialog } from "#ui/components/inputs/DateTime/shared/DateTimeDialog";
+import { DateTimeDialogFooter } from "#ui/components/inputs/DateTime/shared/DateTimeDialogFooter";
+import { TimePickerForm } from "#ui/components/inputs/DateTime/shared/TimePickerForm";
+import { TimePickerInput } from "#ui/components/inputs/DateTime/shared/TimePickerInput";
+import { FormField, type FormFieldProps } from "#ui/components/inputs/FormField/FormField";
+import type { FormFieldHeaderProps } from "#ui/components/inputs/FormField/FormFieldHeader";
+import type { ControlProps } from "#ui/components/inputs/shared/form.types";
+import type { InputVariantProps } from "#ui/components/inputs/shared/input.cva";
+import { UIConfig } from "#ui/config/uiConfig.context";
+import { DateTimeUtils } from "#ui/utils/date-time.utils";
+
+interface TimePickerBaseProps extends FormFieldProps, InputVariantProps, Omit<AriaTimeFieldProps<TimeValue>, "label"> {
+  ref?: Ref<HTMLDivElement>;
+  disableDropdown?: boolean;
+  date?: string | null;
+  isClearable?: boolean;
+}
+
+const TimePickerBase = (props: TimePickerBaseProps) => {
+  const ui = UIConfig.useConfig();
+
+  const {
+    ref,
+    label,
+    tooltipText,
+    helperText,
+    isRequired,
+    rightContent,
+    isDisabled,
+    headerClassName,
+    errorClassName,
+    isHeaderHidden,
+    error,
+    onChange,
+    value,
+    disableDropdown,
+    variant = ui.input.variant,
+    as = ui.input.as,
+    size = ui.input.size,
+    hideLabel = ui.input.hideLabel,
+    isClearable = ui.input.isClearable,
+    ...rest
+  } = props;
+
+  const formFieldProps: FormFieldProps = {
+    error,
+    label,
+    tooltipText,
+    helperText,
+    isRequired,
+    rightContent,
+    isHeaderHidden: isHeaderHidden || as === "inline" || as === "filter" || as === "floating",
+    hideLabel,
+    isDisabled,
+    headerClassName,
+    errorClassName,
+  };
+
+  const [isOpen, setIsOpen] = useState(false);
+  const skipOnChangeRef = useRef(false);
+  const initialDateEmitRef = useRef(true);
+
+  const { locale } = useLocale();
+
+  const dialogState = useTimeFieldState({
+    ...rest,
+    defaultValue: value || rest.defaultValue,
+    locale,
+  });
+  const state = useTimeFieldState({
+    ...rest,
+    isDisabled,
+    value,
+    onChange: (val) => {
+      // First change value is 00:00 due to the below mentioned bug so we should ignore it
+      if (!skipOnChangeRef.current) {
+        onChange?.(val);
+      }
+    },
+    locale,
+  });
+
+  useEffect(() => {
+    if (initialDateEmitRef.current) {
+      initialDateEmitRef.current = false;
+      return;
+    }
+
+    if (state.timeValue) {
+      onChange?.(state.timeValue);
+    }
+  }, [rest.date]);
+
+  useEffect(() => {
+    if (dialogState.timeValue || !state.value) {
+      return;
+    }
+    // Similar logic as onApply
+    state.segments.forEach((segment) => {
+      if (segment.isEditable && segment.value != null) {
+        dialogState.setSegment(segment.type, segment.value);
+      }
+    });
+  }, [state.value]);
+
+  const timeFieldRef = useRef<HTMLDivElement | null>(null);
+  const { labelProps, fieldProps } = useTimeField({ ...rest, label }, state, timeFieldRef);
+  const headerProps: FormFieldHeaderProps = {
+    label,
+    tooltipText,
+    helperText,
+    isRequired,
+    rightContent,
+    isHeaderHidden: hideLabel || isHeaderHidden,
+    isDisabled,
+    className: headerClassName,
+    labelProps,
+  };
+
+  const onApply = () => {
+    // Due to a bug in react stately, if the timeValue is not set, setting value on state doesn't properly update it (https://github.com/adobe/react-spectrum/issues/4791)
+    // To work around this we manually set each segment and skip the first on change event
+    if (!state.timeValue) {
+      skipOnChangeRef.current = true;
+      dialogState.segments.forEach((segment) => {
+        if (segment.isEditable && segment.value != null) {
+          state.setSegment(segment.type, segment.value);
+        }
+      });
+      skipOnChangeRef.current = false;
+    }
+
+    state.setValue(dialogState.value);
+
+    setIsOpen(false);
+  };
+
+  const onOpenChange = (open: boolean) => {
+    setIsOpen(open);
+    if (!isOpen) {
+      dialogState.setValue(state.value);
+    }
+  };
+
+  const onOpen = () => {
+    dialogState.setValue(state.value);
+    setIsOpen(true);
+  };
+
+  return (
+    <FormField
+      {...formFieldProps}
+      as={as}
+      labelProps={labelProps}
+      className="relative inline-flex w-full flex-col text-left"
+    >
+      <TimePickerInput
+        ref={mergeRefs(ref, timeFieldRef)}
+        as={as}
+        fieldProps={fieldProps}
+        state={state}
+        onPress={onOpen}
+        isDisabled={isDisabled}
+        isInvalid={!!error}
+        disableDropdown={disableDropdown}
+        variant={variant}
+        size={size}
+        isClearable={isClearable}
+        headerProps={headerProps}
+      />
+      {!disableDropdown && (
+        <DateTimeDialog
+          footer={
+            <DateTimeDialogFooter
+              onApply={onApply}
+              isValid={!dialogState.isInvalid && !!dialogState.value}
+            />
+          }
+          label={label}
+          triggerRef={timeFieldRef}
+          isOpen={isOpen}
+          onOpenChange={onOpenChange}
+        >
+          <TimePickerForm state={dialogState} />
+        </DateTimeDialog>
+      )}
+    </FormField>
+  );
+};
+
+export interface TimePickerProps extends Omit<TimePickerBaseProps, "value" | "onChange"> {
+  value?: string | null;
+  onChange?: (value: string | null) => void;
+  fullIso?: boolean;
+}
+
+export type ControlledTimePickerProps<TFieldValues extends FieldValues> = ControlProps<TimePickerProps, TFieldValues>;
+
+export const TimePicker = <TFieldValues extends FieldValues>(props: ControlledTimePickerProps<TFieldValues>) => {
+  const formatTimeValue = (timeValue: TimeValue | null): string | null => {
+    if (timeValue === null) {
+      return null;
+    }
+    const parsedDate = props.date ? DateTime.fromISO(props.date).toJSDate() : undefined;
+    const dateValue = parsedDate ? DateTimeUtils.fromLocalToZonedDateTime(parsedDate) : now(getLocalTimeZone());
+    const dateTimeValue = dateValue.set(timeValue);
+    return DateTimeUtils.fromDateValueToISO(dateTimeValue);
+  };
+
+  const parseTimeValue = (isoString?: string | null): TimeValue | null | undefined => {
+    if (isoString == null) {
+      return isoString;
+    }
+    const zonedDateTime = DateTimeUtils.fromISOtoZonedDateTime(isoString);
+    return toTime(zonedDateTime);
+  };
+
+  if ("formControl" in props && props.formControl) {
+    const { formControl, ref, ...innerProps } = props;
+
+    return (
+      <Controller
+        control={formControl.control}
+        name={formControl.name}
+        render={({ field, fieldState: { error } }) => (
+          <TimePickerBase
+            {...innerProps}
+            ref={mergeRefs(ref, field.ref)}
+            value={parseTimeValue(field.value)}
+            onChange={(value) => field.onChange(formatTimeValue(value))}
+            onBlur={field.onBlur}
+            isDisabled={field.disabled || props.isDisabled}
+            error={props.error ?? error?.message}
+          />
+        )}
+      />
+    );
+  }
+
+  return (
+    <TimePickerBase
+      {...props}
+      value={parseTimeValue(props.value)}
+      onChange={(value) => props.onChange?.(formatTimeValue(value))}
+    />
+  );
+};

package/src/components/inputs/DateTime/shared/Calendar.tsx

@@ -0,0 +1,104 @@
+import { useCalendar } from "@react-aria/calendar";
+import type { CalendarState, CalendarStateOptions } from "@react-stately/calendar";
+import { clsx } from "clsx";
+import { useState } from "react";
+import type { DatePickerState } from "react-stately";
+
+import { CalendarGrid } from "#ui/components/inputs/DateTime/shared/CalendarGrid";
+import { CalendarHeader } from "#ui/components/inputs/DateTime/shared/CalendarHeader";
+import { MonthPicker } from "#ui/components/inputs/DateTime/shared/MonthPicker";
+import { TimePickerForm } from "#ui/components/inputs/DateTime/shared/TimePickerForm";
+import { YearPicker } from "#ui/components/inputs/DateTime/shared/YearPicker";
+
+type DateTimeCalendarProps =
+  | { includesTime?: false; datePickerState?: never; hourCycle?: never }
+  | {
+      includesTime: true;
+      datePickerState: DatePickerState;
+      hourCycle?: 12 | 24;
+    };
+
+type CalendarProps = DateTimeCalendarProps & {
+  className?: string;
+  state: CalendarState;
+  calendarProps: Omit<CalendarStateOptions, "locale" | "createCalendar">;
+  onApply: () => void;
+};
+
+export type ToggleState = "month" | "year" | "time";
+
+export const Calendar = ({ className, includesTime, datePickerState, hourCycle, onApply, ...props }: CalendarProps) => {
+  const [toggleState, setToggleState] = useState<ToggleState | null>(null);
+
+  const { calendarProps, prevButtonProps, nextButtonProps } = useCalendar(props.calendarProps, props.state);
+
+  const handleDateChange = () => {
+    if (includesTime && !datePickerState.value) {
+      setToggleState("time");
+    } else {
+      onApply();
+    }
+  };
+
+  const getContent = () => {
+    if (!toggleState) {
+      return (
+        <CalendarGrid
+          state={props.state}
+          onApply={handleDateChange}
+        />
+      );
+    }
+
+    if (toggleState === "month") {
+      return (
+        <MonthPicker
+          state={props.state}
+          onSelectionChange={() => setToggleState(null)}
+        />
+      );
+    }
+
+    if (toggleState === "year") {
+      return (
+        <YearPicker
+          state={props.state}
+          onSelectionChange={() => setToggleState(null)}
+        />
+      );
+    }
+
+    if (toggleState === "time" && includesTime) {
+      return (
+        <div className="flex h-72 w-80 items-center justify-center">
+          <TimePickerForm datePickerState={datePickerState} />
+        </div>
+      );
+    }
+
+    return null;
+  };
+
+  return (
+    <div
+      {...calendarProps}
+      className={clsx("flex min-h-0 w-full flex-col items-center", className)}
+    >
+      <CalendarHeader
+        calendarState={props.state}
+        datePickerState={datePickerState}
+        prevButtonProps={prevButtonProps}
+        nextButtonProps={nextButtonProps}
+        includesTime={includesTime}
+        hourCycle={hourCycle}
+        toggleState={toggleState}
+        setToggleState={setToggleState}
+      />
+      <div
+        className={clsx("flex min-h-0 w-full flex-1 flex-col items-center", toggleState !== "year" && "pb-8 md:pb-0")}
+      >
+        {getContent()}
+      </div>
+    </div>
+  );
+};