@povio/ui 0.0.4 → 0.0.6

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

@@ -1,291 +0,0 @@
-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

@@ -1,255 +0,0 @@
-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

@@ -1,104 +0,0 @@
-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>
-  );
-};