@povio/ui 0.0.2 → 0.0.4

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

@@ -0,0 +1,83 @@
+import { type CalendarDate, createCalendar } from "@internationalized/date";
+import type { DateFieldStateOptions } from "@react-stately/datepicker";
+import { type FocusEvent, type Ref, useEffect, useImperativeHandle, useRef } from "react";
+import { useDateField, useLocale } from "react-aria";
+import { useDateFieldState } from "react-stately";
+
+import { DateSegmentItem } from "#ui/components/inputs/DateTime/shared/DateSegmentItem";
+
+export interface DateFieldHandle {
+  clearField: () => void;
+}
+
+interface DateFieldProps extends Omit<DateFieldStateOptions, "locale" | "createCalendar"> {
+  ref?: Ref<DateFieldHandle>;
+  onClearChange?: (canClear: boolean) => void;
+  hidePlaceholder?: boolean;
+}
+
+export const DateField = ({ ref, onClearChange, hidePlaceholder, ...props }: DateFieldProps) => {
+  const { locale } = useLocale();
+  const state = useDateFieldState({
+    ...props,
+    locale,
+    createCalendar,
+  });
+
+  const dataFieldRef = useRef<HTMLDivElement>(null);
+  const { fieldProps } = useDateField(props, state, dataFieldRef);
+
+  const handleBlur = (e: FocusEvent<HTMLDivElement>) => {
+    fieldProps.onBlur?.(e);
+
+    if (!state.value) {
+      return;
+    }
+
+    const currentValue = state.value as CalendarDate;
+    const { year } = currentValue;
+
+    if (year >= 0 && year <= 99) {
+      const correctedYear = year <= 50 ? 2000 + year : 1900 + year;
+
+      const correctedDate = currentValue.set({ year: correctedYear });
+
+      if (correctedDate) {
+        state.setValue(correctedDate);
+        props.onChange?.(correctedDate);
+      }
+    }
+  };
+
+  useImperativeHandle(ref, () => ({
+    clearField: () => {
+      state.setValue(null);
+    },
+  }));
+
+  useEffect(() => {
+    onClearChange?.(state.segments.some((segment) => segment.type !== "literal" && segment.isPlaceholder === false));
+  }, [state.segments, onClearChange]);
+
+  return (
+    <div
+      {...fieldProps}
+      ref={dataFieldRef}
+      onBlur={handleBlur}
+      className="relative w-full"
+    >
+      <div className="flex">
+        {state.segments.map((segment, i) => (
+          <DateSegmentItem
+            // oxlint-disable-next-line react/no-array-index-key
+            key={i}
+            segment={segment}
+            state={state}
+            isDisabled={props.isDisabled}
+            hidePlaceholder={hidePlaceholder}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,170 @@
+import { getLocalTimeZone, now, today } from "@internationalized/date";
+import { clsx } from "clsx";
+import { type Ref, useCallback, useMemo, useRef, useState } from "react";
+import { type DatePickerAria, useFocusVisible, useFocusWithin, useHover } from "react-aria";
+import useMeasure from "react-use-measure";
+
+import { CalendarIcon } from "#ui/assets/icons/Calendar";
+import { DateTimeIcon } from "#ui/assets/icons/DateTime";
+import { TodayIcon } from "#ui/assets/icons/Today";
+import { IconButton } from "#ui/components/buttons/IconButton/IconButton";
+import { InlineIconButton } from "#ui/components/buttons/InlineIconButton/InlineIconButton";
+import { DateField, type DateFieldHandle } from "#ui/components/inputs/DateTime/shared/DateField";
+import type { FormFieldHeaderProps } from "#ui/components/inputs/FormField/FormFieldHeader";
+import { FormFieldLabel } from "#ui/components/inputs/FormField/FormFieldLabel";
+import { InputClear } from "#ui/components/inputs/shared/InputClear";
+import { type InputVariantProps, useInputCva } from "#ui/components/inputs/shared/input.cva";
+
+interface DatePickerInputProps extends InputVariantProps {
+  ref?: Ref<HTMLDivElement>;
+  groupProps: DatePickerAria["groupProps"];
+  fieldProps: DatePickerAria["fieldProps"];
+  endFieldProps?: DatePickerAria["fieldProps"];
+  buttonProps: DatePickerAria["buttonProps"];
+  isDisabled?: boolean;
+  isInvalid?: boolean;
+  disableDropdown?: boolean;
+  isDateTime?: boolean;
+  isClearable?: boolean;
+  headerProps?: FormFieldHeaderProps;
+  todayIcon?: boolean;
+}
+
+export const DatePickerInput = ({
+  ref,
+  as,
+  groupProps,
+  fieldProps,
+  endFieldProps,
+  buttonProps,
+  isDisabled,
+  isInvalid,
+  disableDropdown,
+  variant,
+  size,
+  isDateTime,
+  isClearable,
+  headerProps,
+  todayIcon,
+  ...props
+}: DatePickerInputProps) => {
+  const inputCva = useInputCva();
+  const [canClear, setCanClear] = useState(false);
+  const { hoverProps, isHovered } = useHover({ isDisabled });
+  const [isFocused, setIsFocused] = useState(false);
+  const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setIsFocused });
+  const { isFocusVisible } = useFocusVisible();
+  const dateFieldRef = useRef<DateFieldHandle>(null);
+  const endDateFieldRef = useRef<DateFieldHandle>(null);
+  const [labelContentRef, { width: labelWidth }] = useMeasure();
+
+  const onClearChange = useCallback((canClearInput: boolean) => {
+    setCanClear(canClearInput);
+  }, []);
+
+  const onClear = () => {
+    dateFieldRef.current?.clearField();
+    fieldProps.onChange?.(null);
+    const timeout = setTimeout(() => {
+      endDateFieldRef.current?.clearField();
+      clearTimeout(timeout);
+    }, 0);
+    setCanClear(false);
+  };
+
+  const onToday = () => {
+    if (isDateTime) {
+      fieldProps.onChange?.(now(getLocalTimeZone()));
+    } else {
+      fieldProps.onChange?.(today(getLocalTimeZone()));
+    }
+  };
+
+  const hidePlaceholder = as === "floating" && !fieldProps.value && !isFocused;
+
+  const style = useMemo(() => {
+    const leftPadding = as === "filter" ? `var(--spacing-input-side-default) + ${labelWidth}` : "0";
+    return {
+      paddingLeft: `calc(${leftPadding}px)`,
+    };
+  }, [labelWidth, as]);
+
+  return (
+    <div
+      ref={ref}
+      className={inputCva({
+        variant,
+        as,
+        size,
+        ...props,
+        className: clsx("group/date-picker-content relative flex items-center justify-between gap-2"),
+      })}
+      data-rac=""
+      data-hovered={isHovered || undefined}
+      data-disabled={isDisabled || undefined}
+      data-invalid={isInvalid || undefined}
+      data-focus-within={isFocused || undefined}
+      data-focus-visible={(isFocused && isFocusVisible) || undefined}
+      data-has-selection={fieldProps.value !== null || undefined}
+      {...groupProps}
+      {...focusWithinProps}
+      {...hoverProps}
+    >
+      <div>
+        {as && ["filter", "floating"].includes(as) && headerProps && (
+          <FormFieldLabel
+            ref={labelContentRef}
+            as={as}
+            {...headerProps}
+          />
+        )}
+        <div
+          className="flex items-center gap-2"
+          style={style}
+        >
+          {todayIcon && (
+            <IconButton
+              label=""
+              icon={TodayIcon}
+              size="xxs"
+              onPress={onToday}
+            />
+          )}
+          <DateField
+            ref={dateFieldRef}
+            {...fieldProps}
+            isDisabled={isDisabled}
+            isInvalid={isInvalid}
+            onClearChange={onClearChange}
+            hidePlaceholder={hidePlaceholder}
+          />
+          {endFieldProps && (
+            <>
+              {!((as === "floating" || as === "filter") && hidePlaceholder) && <span className="select-none">–</span>}
+              <DateField
+                ref={endDateFieldRef}
+                {...endFieldProps}
+                isDisabled={isDisabled}
+                isInvalid={isInvalid}
+                onClearChange={onClearChange}
+                hidePlaceholder={hidePlaceholder}
+              />
+            </>
+          )}
+        </div>
+      </div>
+      <div className={clsx("flex items-center gap-2", as === "floating" && "-mt-4")}>
+        {isClearable && canClear && <InputClear onClear={onClear} />}
+        {!disableDropdown && (
+          <InlineIconButton
+            label=""
+            color="secondary"
+            {...buttonProps}
+            icon={isDateTime ? DateTimeIcon : CalendarIcon}
+            isDisabled={isDisabled}
+          />
+        )}
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,65 @@
+import type { DateFieldState, DateSegment } from "@react-stately/datepicker";
+import { clsx } from "clsx";
+import { useRef } from "react";
+import { useDateSegment } from "react-aria";
+
+interface DateSegmentProps {
+  state: DateFieldState;
+  segment: DateSegment;
+  isDisabled?: boolean;
+  timePickerOnly?: boolean;
+  hidePlaceholder?: boolean;
+}
+
+export const getPlaceholder = (segment: DateSegment): string | null => {
+  if (!segment.isPlaceholder) {
+    return null;
+  }
+
+  switch (segment.type) {
+    case "hour":
+      return "hh";
+    case "minute":
+      return "mm";
+    case "second":
+      return "ss";
+    default:
+      return segment.placeholder;
+  }
+};
+
+export const DateSegmentItem = ({ segment, state, isDisabled, timePickerOnly, hidePlaceholder }: DateSegmentProps) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const { segmentProps } = useDateSegment(segment, state, ref);
+
+  const isInputEmpty = !state.value;
+
+  return (
+    <div
+      {...segmentProps}
+      ref={ref}
+      className={clsx(
+        "box-content rounded-input-rounding-default",
+        isDisabled && "text-interactive-text-secondary-disabled",
+        !isDisabled && isInputEmpty && "text-text-default-3 group-focus-within:text-text-default-1",
+        !isDisabled && !isInputEmpty && "text-text-default-1",
+        "focus-within:outline-1 focus-within:outline-interactive-contained-primary-idle focus-within:outline-offset-1",
+        ["hour", "dayPeriod"].includes(segment.type) && !timePickerOnly && "ml-1",
+      )}
+    >
+      {!hidePlaceholder && (
+        <>
+          {segment.isPlaceholder && (
+            <span
+              aria-hidden="true"
+              className="pointer-events-none"
+            >
+              {getPlaceholder(segment)}
+            </span>
+          )}
+          {segment.isPlaceholder ? "" : segment.text}
+        </>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,87 @@
+import type { ReactNode, RefObject } from "react";
+import type { AriaDialogProps } from "react-aria";
+import { Dialog as AriaDialog, Popover as AriaPopover } from "react-aria-components";
+
+import { FormFieldHeader } from "#ui/components/inputs/FormField/FormFieldHeader";
+import { FormFieldHeaderClose } from "#ui/components/inputs/FormField/FormFieldHeaderClose";
+import { BottomSheet } from "#ui/components/overlays/BottomSheet/BottomSheet";
+import { useBreakpoint } from "#ui/hooks/useBreakpoint";
+
+interface DateTimeDialogProps {
+  children: ReactNode;
+  footer: ReactNode;
+  sidebar?: ReactNode;
+  hideSidebar?: boolean;
+  label: string;
+  isOpen: boolean;
+  triggerRef?: RefObject<HTMLElement | null>;
+  dialogProps?: AriaDialogProps;
+  onOpenChange: (open: boolean) => void;
+}
+
+export const DateTimeDialog = ({
+  hideSidebar,
+  children,
+  footer,
+  sidebar,
+  label,
+  isOpen,
+  triggerRef,
+  dialogProps,
+  onOpenChange,
+}: DateTimeDialogProps) => {
+  const isDesktop = useBreakpoint("md");
+
+  if (isDesktop) {
+    if (!isOpen) {
+      return null;
+    }
+    return (
+      <AriaPopover
+        triggerRef={triggerRef}
+        isOpen={isOpen}
+        placement="bottom start"
+        onOpenChange={onOpenChange}
+      >
+        <AriaDialog
+          {...dialogProps}
+          className="!outline-none"
+          aria-label={label}
+        >
+          <div className="flex overflow-hidden rounded-input-rounding-default border border-elevation-outline-default-1 border-solid bg-elevation-fill-default-1 shadow-5">
+            {!hideSidebar && sidebar}
+            <div className="flex flex-1 flex-col justify-between">
+              {children}
+              {footer}
+            </div>
+          </div>
+        </AriaDialog>
+      </AriaPopover>
+    );
+  }
+
+  return (
+    <BottomSheet
+      label={label}
+      footer={footer}
+      isOpen={isOpen}
+      onOpenChange={onOpenChange}
+      sheetMarginBottom={0}
+      isScrollable={false}
+      height="auto"
+      isDismissable
+    >
+      {(close) => (
+        <>
+          <FormFieldHeader
+            label={label}
+            className="!mb-8 shrink-0 px-4 pt-3"
+            rightContent={<FormFieldHeaderClose onClose={close} />}
+          />
+          {children}
+          {!hideSidebar && sidebar}
+        </>
+      )}
+    </BottomSheet>
+  );
+};

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

@@ -0,0 +1,42 @@
+import { clsx } from "clsx";
+import { useTranslation } from "react-i18next";
+
+import { TextButton } from "#ui/components/buttons/TextButton/TextButton";
+import { ns } from "#ui/config/i18n";
+
+interface DatePickerFooterProps {
+  isValid?: boolean;
+  onTodayPress?: () => void;
+  onApply: () => void;
+}
+
+export const DateTimeDialogFooter = ({ isValid = true, onTodayPress, onApply }: DatePickerFooterProps) => {
+  const { t } = useTranslation(ns);
+
+  return (
+    <footer
+      className={clsx(
+        "flex shrink-0 items-center gap-2 bg-elevation-fill-default-2 px-4 py-3 md:border-elevation-outline-default-1 md:border-t md:bg-elevation-fill-default-1 md:py-1-5",
+        onTodayPress ? "justify-between" : "justify-end",
+      )}
+    >
+      {onTodayPress && (
+        <TextButton
+          type="button"
+          color="primary"
+          onPress={onTodayPress}
+        >
+          {t(($) => $.ui.datePicker.today)}
+        </TextButton>
+      )}
+      <TextButton
+        type="button"
+        color="secondary"
+        onPress={onApply}
+        isDisabled={!isValid}
+      >
+        {t(($) => $.ui.datePicker.save)}
+      </TextButton>
+    </footer>
+  );
+};

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

@@ -0,0 +1,91 @@
+import { useDateFormatter } from "@react-aria/i18n";
+import type { CalendarState, RangeCalendarState } from "@react-stately/calendar";
+import { clsx } from "clsx";
+import { type Key, ListBox, ListBoxItem } from "react-aria-components";
+
+import { Typography } from "#ui/components/text/Typography/Typography";
+
+export interface MonthPickerProps {
+  state: CalendarState | RangeCalendarState;
+  onSelectionChange: (key: Set<Key>) => void;
+}
+
+export const MonthPicker = ({ state, onSelectionChange }: MonthPickerProps) => {
+  const formatter = useDateFormatter({
+    month: "long",
+    timeZone: state.timeZone,
+  });
+
+  const numMonths = state.focusedDate.calendar.getMonthsInYear(state.focusedDate);
+
+  const getMonths = () => {
+    const months: string[] = [];
+    for (let i = 1; i <= numMonths; i++) {
+      const date = state.focusedDate.set({ month: i });
+      months.push(formatter.format(date.toDate(state.timeZone)));
+    }
+    return months;
+  };
+
+  const isMonthDisabled = (month: number) => {
+    if (state.minValue && state.focusedDate.set({ month }) < state.minValue) {
+      return true;
+    }
+    if (state.maxValue && state.focusedDate.set({ month }) > state.maxValue) {
+      return true;
+    }
+    return false;
+  };
+
+  return (
+    <ListBox
+      autoFocus
+      aria-label="Month"
+      selectionMode="single"
+      layout="grid"
+      selectedKeys={[state.focusedDate.month]}
+      onSelectionChange={(key) => {
+        if (key === "all") {
+          return;
+        }
+
+        const index = [...key][0];
+
+        if (typeof index === "number") {
+          const date = state.focusedDate.set({ month: [...key][0] as number });
+          state.setFocusedDate(date);
+        }
+
+        onSelectionChange(key);
+      }}
+      className="grid size-full min-h-72 grid-cols-3 grid-rows-4 gap-2 p-3 md:w-80"
+    >
+      {getMonths().map((month, index) => {
+        const isDisabled = isMonthDisabled(index + 1);
+        return (
+          <ListBoxItem
+            key={month}
+            id={index + 1}
+            textValue={month}
+            isDisabled={isDisabled}
+            className={clsx(
+              "flex items-center justify-center text-interactive-text-secondary-idle",
+              "rounded-button-rounding-m border border-elevation-outline-default-1 border-solid bg-elevation-fill-default-1",
+              "hover:text-interactive-text-secondary-hover",
+              "selected:border-interactive-contained-primary-idle selected:bg-interactive-contained-primary-idle selected:text-interactive-text-secondary-idle-inverted",
+              "focus:outline-none focus-visible:outline-1 focus-visible:outline-interactive-contained-primary-focus focus-visible:outline-offset-1",
+              isDisabled ? "cursor-default opacity-50" : "cursor-pointer",
+            )}
+          >
+            <Typography
+              as="span"
+              size="label-2"
+            >
+              {month}
+            </Typography>
+          </ListBoxItem>
+        );
+      })}
+    </ListBox>
+  );
+};

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

@@ -0,0 +1,160 @@
+import type { CalendarDate } from "@internationalized/date";
+import { useRangeCalendar } from "@react-aria/calendar";
+import type { RangeCalendarState, RangeCalendarStateOptions } from "@react-stately/calendar";
+import { clsx } from "clsx";
+import { type KeyboardEvent, useMemo, useRef } from "react";
+import type { DateValue } from "react-aria";
+
+import { CalendarGrid } from "#ui/components/inputs/DateTime/shared/CalendarGrid";
+import { CalendarSelectHeader } from "#ui/components/inputs/DateTime/shared/CalendarSelectHeader";
+
+interface DateRange {
+  start: DateValue;
+  end: DateValue;
+}
+
+interface CalendarProps {
+  className?: string;
+  leftCalendarState: RangeCalendarState;
+  rightCalendarState: RangeCalendarState;
+  calendarProps: Omit<RangeCalendarStateOptions, "locale" | "createCalendar">;
+  onApply: () => void;
+  onRangeChange?: (value: DateRange | null) => void;
+  onDateSelection?: (date: DateValue, calendarSide?: "left" | "right") => void;
+  onDateHover?: (date: DateValue | null) => void;
+  rangeSelection?: {
+    start: DateValue | null;
+    end: DateValue | null;
+    isSelecting: boolean;
+  };
+  hoverDate?: DateValue | null;
+  onKeyboardNavigation?: (event: KeyboardEvent, date: DateValue, calendarSide: "left" | "right") => boolean;
+}
+
+export const RangeCalendar = ({
+  className,
+  leftCalendarState,
+  rightCalendarState,
+  calendarProps,
+  onApply,
+  onRangeChange: _onRangeChange,
+  onDateSelection,
+  onDateHover,
+  rangeSelection,
+  hoverDate,
+  onKeyboardNavigation,
+}: CalendarProps) => {
+  const leftRef = useRef<HTMLDivElement | null>(null);
+  const rightRef = useRef<HTMLDivElement | null>(null);
+
+  const { calendarProps: leftCalendarAriaProps } = useRangeCalendar(calendarProps, leftCalendarState, leftRef);
+  const { calendarProps: rightCalendarAriaProps } = useRangeCalendar(calendarProps, rightCalendarState, rightRef);
+
+  const leftDate = leftCalendarState.visibleRange.start;
+  const rightDate = rightCalendarState.visibleRange.start;
+
+  const handleLeftKeyboardNavigation = (event: KeyboardEvent, date: DateValue) => {
+    return onKeyboardNavigation?.(event, date, "left") ?? false;
+  };
+
+  const handleRightKeyboardNavigation = (event: KeyboardEvent, date: DateValue) => {
+    return onKeyboardNavigation?.(event, date, "right") ?? false;
+  };
+
+  const handleLeftNavigate = (newDate: CalendarDate) => {
+    const rightCurrentDate = rightCalendarState.visibleRange.start;
+    if (
+      newDate.year < rightCurrentDate.year ||
+      (newDate.year === rightCurrentDate.year && newDate.month < rightCurrentDate.month)
+    ) {
+      leftCalendarState.setFocusedDate(newDate);
+    } else {
+      const closestValidDate = rightCurrentDate.subtract({ months: 1 });
+      leftCalendarState.setFocusedDate(closestValidDate);
+    }
+  };
+
+  const handleRightNavigate = (newDate: CalendarDate) => {
+    const leftCurrentDate = leftCalendarState.visibleRange.start;
+    if (
+      newDate.year > leftCurrentDate.year ||
+      (newDate.year === leftCurrentDate.year && newDate.month > leftCurrentDate.month)
+    ) {
+      rightCalendarState.setFocusedDate(newDate);
+    } else {
+      const closestValidDate = leftCurrentDate.add({ months: 1 });
+      rightCalendarState.setFocusedDate(closestValidDate);
+    }
+  };
+
+  const isNextDisabled = useMemo(() => {
+    return (
+      leftDate.year > rightDate.year ||
+      (leftDate.year === rightDate.year && leftDate.add({ months: 1 }).month === rightDate.month)
+    );
+  }, [leftDate, rightDate]);
+
+  const isPrevDisabled = useMemo(() => {
+    return (
+      rightDate.year < leftDate.year ||
+      (rightDate.year === leftDate.year && rightDate.subtract({ months: 1 }).month === leftDate.month)
+    );
+  }, [leftDate, rightDate]);
+
+  return (
+    <div className={clsx("flex w-fit flex-col items-center bg-elevation-fill-default-1", className)}>
+      <div className="flex">
+        <div
+          {...leftCalendarAriaProps}
+          ref={leftRef}
+          className="flex flex-col items-center"
+        >
+          <CalendarSelectHeader
+            state={leftCalendarState}
+            isNextMonthDisabled={isNextDisabled}
+            isNextYearDisabled={isNextDisabled}
+            onNavigate={handleLeftNavigate}
+            maxDate={rightDate}
+          />
+          <CalendarGrid
+            state={leftCalendarState}
+            onApply={onApply}
+            shouldCloseOnSelect={false}
+            onDateSelection={onDateSelection}
+            rangeSelection={rangeSelection}
+            onDateHover={onDateHover}
+            hoverDate={hoverDate}
+            onKeyboardNavigation={handleLeftKeyboardNavigation}
+            className="!w-[304px] h-64"
+            calendarSide="left"
+          />
+        </div>
+        <div
+          {...rightCalendarAriaProps}
+          ref={rightRef}
+          className="hidden flex-col items-center md:flex"
+        >
+          <CalendarSelectHeader
+            state={rightCalendarState}
+            isPrevMonthDisabled={isPrevDisabled}
+            isPrevYearDisabled={isPrevDisabled}
+            onNavigate={handleRightNavigate}
+            minDate={leftDate}
+          />
+          <CalendarGrid
+            state={rightCalendarState}
+            onApply={onApply}
+            shouldCloseOnSelect={false}
+            onDateSelection={onDateSelection}
+            rangeSelection={rangeSelection}
+            onDateHover={onDateHover}
+            hoverDate={hoverDate}
+            onKeyboardNavigation={handleRightKeyboardNavigation}
+            className="!w-[304px] h-64"
+            calendarSide="right"
+          />
+        </div>
+      </div>
+    </div>
+  );
+};