@povio/ui 0.0.8 → 0.0.9

package/dist/components/inputs/DateTime/DateTimePicker/DateTimePicker.js

@@ -0,0 +1,251 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Time, today, getLocalTimeZone, createCalendar, CalendarDateTime, now } from "@internationalized/date";
+import { mergeRefs } from "@react-aria/utils";
+import { useEffect, useRef } from "react";
+import { useDatePicker, useLocale } from "react-aria";
+import { Controller } from "react-hook-form";
+import { useDatePickerState, useCalendarState } from "react-stately";
+import { Calendar } from "../shared/Calendar.js";
+import { DatePickerInput } from "../shared/DatePickerInput.js";
+import { DateTimeDialog } from "../shared/DateTimeDialog.js";
+import { DateTimeDialogFooter } from "../shared/DateTimeDialogFooter.js";
+import { FormField } from "../../FormField/FormField.js";
+import { UIConfig } from "../../../../config/uiConfig.context.js";
+import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
+const PLACEHOLDER_VALUE = new CalendarDateTime(2024, 1, 1);
+const DateTimePickerBase = (props) => {
+  const ui = UIConfig.useConfig();
+  const {
+    ref,
+    label,
+    tooltipText,
+    helperText,
+    isRequired,
+    rightContent,
+    isDisabled,
+    headerClassName,
+    errorClassName,
+    isHeaderHidden,
+    error,
+    onChange,
+    value,
+    disableDropdown,
+    isTimeOptional,
+    hideLabel = ui.input.hideLabel,
+    variant = ui.input.variant,
+    as = ui.input.as,
+    size = ui.input.size,
+    isClearable = ui.input.isClearable,
+    todayIcon = ui.dateInput.todayIcon,
+    shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros,
+    ...rest
+  } = props;
+  const 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,
+    shouldForceLeadingZeros
+  });
+  useEffect(() => {
+    if (isTimeOptional && !dialogState.timeValue) {
+      dialogState.setTimeValue(new Time(0, 0));
+    }
+  }, [isTimeOptional, dialogState]);
+  const state = useDatePickerState({
+    ...rest,
+    shouldForceLeadingZeros,
+    value,
+    onChange: (val) => {
+      onChange?.(val);
+      dialogState.setValue(val);
+      calendarState.setFocusedDate(val || today(getLocalTimeZone()));
+    },
+    shouldCloseOnSelect: false,
+    granularity: "minute",
+    hideTimeZone: true
+  });
+  const datePickerRef = useRef(null);
+  const { groupProps, labelProps, fieldProps, buttonProps, dialogProps } = useDatePicker(
+    { ...rest, label, granularity: "minute", hideTimeZone: true, shouldForceLeadingZeros },
+    state,
+    datePickerRef
+  );
+  const { calendarProps } = useDatePicker({ ...rest, label, shouldForceLeadingZeros }, dialogState, datePickerRef);
+  const { locale } = useLocale();
+  const calendarState = useCalendarState({
+    ...calendarProps,
+    locale,
+    createCalendar
+  });
+  const headerProps = {
+    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) => {
+    state.toggle();
+    calendarState.setFocusedDate(state.value || today(getLocalTimeZone()));
+    if (!isOpen) {
+      dialogState.setValue(state.value);
+    }
+  };
+  const onInputBlur = (e) => {
+    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 /* @__PURE__ */ jsxs(
+    FormField,
+    {
+      ...formFieldProps,
+      as,
+      labelProps,
+      className: "relative inline-flex w-full flex-col text-left",
+      children: [
+        /* @__PURE__ */ jsx(
+          DatePickerInput,
+          {
+            ref: mergeRefs(ref, datePickerRef),
+            as,
+            groupProps,
+            fieldProps: {
+              ...fieldProps,
+              placeholderValue: PLACEHOLDER_VALUE,
+              onBlur: (e) => {
+                fieldProps.onBlur?.(e);
+                onInputBlur(e);
+              }
+            },
+            buttonProps,
+            isDisabled,
+            isInvalid: !!error,
+            disableDropdown,
+            variant,
+            size,
+            isDateTime: true,
+            isClearable,
+            headerProps,
+            todayIcon
+          }
+        ),
+        !disableDropdown && /* @__PURE__ */ jsx(
+          DateTimeDialog,
+          {
+            footer: /* @__PURE__ */ jsx(
+              DateTimeDialogFooter,
+              {
+                isValid: !dialogState.isInvalid && !!dialogState.value,
+                onTodayPress,
+                onApply
+              }
+            ),
+            label,
+            triggerRef: datePickerRef,
+            dialogProps,
+            isOpen: state.isOpen,
+            onOpenChange,
+            children: /* @__PURE__ */ jsx(
+              Calendar,
+              {
+                state: calendarState,
+                calendarProps,
+                includesTime: true,
+                datePickerState: dialogState,
+                onApply
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+const DateTimePicker = ({
+  fullIso = true,
+  ...props
+}) => {
+  const formatDateValue = (dateValue) => {
+    if (dateValue === null) {
+      return null;
+    }
+    if (fullIso) {
+      return DateTimeUtils.fromCalendarDateTimeToUTCISO(dateValue);
+    }
+    return DateTimeUtils.fromDateValueToISO(dateValue);
+  };
+  const parseDateValue = (isoString) => {
+    if (isoString == null) {
+      return isoString;
+    }
+    return DateTimeUtils.fromISOtoZonedDateTime(isoString);
+  };
+  if ("formControl" in props && props.formControl) {
+    const { formControl, ref, ...innerProps } = props;
+    return /* @__PURE__ */ jsx(
+      Controller,
+      {
+        control: formControl.control,
+        name: formControl.name,
+        render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsx(
+          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 /* @__PURE__ */ jsx(
+    DateTimePickerBase,
+    {
+      ...props,
+      value: parseDateValue(props.value),
+      onChange: (value) => props.onChange?.(formatDateValue(value))
+    }
+  );
+};
+export {
+  DateTimePicker
+};

package/{src → dist}/components/inputs/DateTime/TimePicker/TimePicker.d.ts

@@ -1,9 +1,9 @@
 import { Ref } from 'react';
 import { AriaTimeFieldProps, TimeValue } from 'react-aria';
 import { FieldValues } from 'react-hook-form';
-import { FormFieldProps } from '#ui/components/inputs/FormField/FormField';
-import { ControlProps } from '#ui/components/inputs/shared/form.types';
-import { InputVariantProps } from '#ui/components/inputs/shared/input.cva';
+import { FormFieldProps } from '../../FormField/FormField';
+import { ControlProps } from '../../shared/form.types';
+import { InputVariantProps } from '../../shared/input.cva';
 interface TimePickerBaseProps extends FormFieldProps, InputVariantProps, Omit<AriaTimeFieldProps<TimeValue>, "label"> {
     ref?: Ref<HTMLDivElement>;
     disableDropdown?: boolean;

package/dist/components/inputs/DateTime/TimePicker/TimePicker.js

@@ -0,0 +1,224 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { toTime, now, getLocalTimeZone } from "@internationalized/date";
+import { mergeRefs } from "@react-aria/utils";
+import { DateTime } from "luxon";
+import { useState, useRef, useEffect } from "react";
+import { useLocale, useTimeField } from "react-aria";
+import { Controller } from "react-hook-form";
+import { useTimeFieldState } from "react-stately";
+import { DateTimeDialog } from "../shared/DateTimeDialog.js";
+import { DateTimeDialogFooter } from "../shared/DateTimeDialogFooter.js";
+import { TimePickerForm } from "../shared/TimePickerForm.js";
+import { TimePickerInput } from "../shared/TimePickerInput.js";
+import { FormField } from "../../FormField/FormField.js";
+import { UIConfig } from "../../../../config/uiConfig.context.js";
+import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
+const TimePickerBase = (props) => {
+  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 = {
+    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) => {
+      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;
+    }
+    state.segments.forEach((segment) => {
+      if (segment.isEditable && segment.value != null) {
+        dialogState.setSegment(segment.type, segment.value);
+      }
+    });
+  }, [state.value]);
+  const timeFieldRef = useRef(null);
+  const { labelProps, fieldProps } = useTimeField({ ...rest, label }, state, timeFieldRef);
+  const headerProps = {
+    label,
+    tooltipText,
+    helperText,
+    isRequired,
+    rightContent,
+    isHeaderHidden: hideLabel || isHeaderHidden,
+    isDisabled,
+    className: headerClassName,
+    labelProps
+  };
+  const onApply = () => {
+    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) => {
+    setIsOpen(open);
+    if (!isOpen) {
+      dialogState.setValue(state.value);
+    }
+  };
+  const onOpen = () => {
+    dialogState.setValue(state.value);
+    setIsOpen(true);
+  };
+  return /* @__PURE__ */ jsxs(
+    FormField,
+    {
+      ...formFieldProps,
+      as,
+      labelProps,
+      className: "relative inline-flex w-full flex-col text-left",
+      children: [
+        /* @__PURE__ */ jsx(
+          TimePickerInput,
+          {
+            ref: mergeRefs(ref, timeFieldRef),
+            as,
+            fieldProps,
+            state,
+            onPress: onOpen,
+            isDisabled,
+            isInvalid: !!error,
+            disableDropdown,
+            variant,
+            size,
+            isClearable,
+            headerProps
+          }
+        ),
+        !disableDropdown && /* @__PURE__ */ jsx(
+          DateTimeDialog,
+          {
+            footer: /* @__PURE__ */ jsx(
+              DateTimeDialogFooter,
+              {
+                onApply,
+                isValid: !dialogState.isInvalid && !!dialogState.value
+              }
+            ),
+            label,
+            triggerRef: timeFieldRef,
+            isOpen,
+            onOpenChange,
+            children: /* @__PURE__ */ jsx(TimePickerForm, { state: dialogState })
+          }
+        )
+      ]
+    }
+  );
+};
+const TimePicker = (props) => {
+  const formatTimeValue = (timeValue) => {
+    if (timeValue === null) {
+      return null;
+    }
+    const parsedDate = props.date ? DateTime.fromISO(props.date).toJSDate() : void 0;
+    const dateValue = parsedDate ? DateTimeUtils.fromLocalToZonedDateTime(parsedDate) : now(getLocalTimeZone());
+    const dateTimeValue = dateValue.set(timeValue);
+    return DateTimeUtils.fromDateValueToISO(dateTimeValue);
+  };
+  const parseTimeValue = (isoString) => {
+    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 /* @__PURE__ */ jsx(
+      Controller,
+      {
+        control: formControl.control,
+        name: formControl.name,
+        render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsx(
+          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 /* @__PURE__ */ jsx(
+    TimePickerBase,
+    {
+      ...props,
+      value: parseTimeValue(props.value),
+      onChange: (value) => props.onChange?.(formatTimeValue(value))
+    }
+  );
+};
+export {
+  TimePicker
+};

package/dist/components/inputs/DateTime/shared/Calendar.js

@@ -0,0 +1,85 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useCalendar } from "@react-aria/calendar";
+import { clsx } from "clsx";
+import { useState } from "react";
+import { CalendarGrid } from "./CalendarGrid.js";
+import { CalendarHeader } from "./CalendarHeader.js";
+import { MonthPicker } from "./MonthPicker.js";
+import { TimePickerForm } from "./TimePickerForm.js";
+import { YearPicker } from "./YearPicker.js";
+const Calendar = ({ className, includesTime, datePickerState, hourCycle, onApply, ...props }) => {
+  const [toggleState, setToggleState] = useState(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 /* @__PURE__ */ jsx(
+        CalendarGrid,
+        {
+          state: props.state,
+          onApply: handleDateChange
+        }
+      );
+    }
+    if (toggleState === "month") {
+      return /* @__PURE__ */ jsx(
+        MonthPicker,
+        {
+          state: props.state,
+          onSelectionChange: () => setToggleState(null)
+        }
+      );
+    }
+    if (toggleState === "year") {
+      return /* @__PURE__ */ jsx(
+        YearPicker,
+        {
+          state: props.state,
+          onSelectionChange: () => setToggleState(null)
+        }
+      );
+    }
+    if (toggleState === "time" && includesTime) {
+      return /* @__PURE__ */ jsx("div", { className: "flex h-72 w-80 items-center justify-center", children: /* @__PURE__ */ jsx(TimePickerForm, { datePickerState }) });
+    }
+    return null;
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...calendarProps,
+      className: clsx("flex min-h-0 w-full flex-col items-center", className),
+      children: [
+        /* @__PURE__ */ jsx(
+          CalendarHeader,
+          {
+            calendarState: props.state,
+            datePickerState,
+            prevButtonProps,
+            nextButtonProps,
+            includesTime,
+            hourCycle,
+            toggleState,
+            setToggleState
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: clsx("flex min-h-0 w-full flex-1 flex-col items-center", toggleState !== "year" && "pb-8 md:pb-0"),
+            children: getContent()
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  Calendar
+};