@povio/ui 0.0.2 → 0.0.3

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

@@ -0,0 +1,247 @@
+/* oxlint-disable jsx-a11y/no-static-element-interactions */
+
+import { isSameDay } from "@internationalized/date";
+import { type AriaCalendarCellProps, useCalendarCell } from "@react-aria/calendar";
+import { useFocusRing } from "@react-aria/focus";
+import { mergeProps } from "@react-aria/utils";
+import type { CalendarState, RangeCalendarState } from "@react-stately/calendar";
+import { clsx } from "clsx";
+import {
+  type EventHandler,
+  type KeyboardEvent,
+  type MouseEvent,
+  type SyntheticEvent,
+  useCallback,
+  useMemo,
+  useRef,
+} from "react";
+import type { DateValue } from "react-aria";
+
+import { Typography } from "#ui/components/text/Typography/Typography";
+
+const isRange = (state: CalendarState | RangeCalendarState): state is RangeCalendarState => {
+  return "highlightedRange" in state;
+};
+
+interface CalendarCellProps extends AriaCalendarCellProps {
+  state: CalendarState | RangeCalendarState;
+  onApply?: () => void;
+  shouldCloseOnSelect?: boolean;
+  onDateSelection?: (date: DateValue) => void;
+  onDateHover?: (date: DateValue | null) => void;
+  rangeSelection?: {
+    start: DateValue | null;
+    end: DateValue | null;
+    isSelecting: boolean;
+  };
+  hoverDate?: DateValue | null;
+  onKeyboardNavigation?: (event: KeyboardEvent, date: DateValue) => boolean;
+}
+
+export const CalendarCell = ({
+  state,
+  onApply,
+  shouldCloseOnSelect = true,
+  onDateSelection,
+  onDateHover,
+  rangeSelection,
+  hoverDate,
+  onKeyboardNavigation,
+  ...props
+}: CalendarCellProps) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const { cellProps, buttonProps, formattedDate, isSelected, isDisabled, isOutsideVisibleRange } = useCalendarCell(
+    props,
+    state,
+    ref,
+  );
+
+  const { focusProps } = useFocusRing();
+
+  const onClick = useCallback(
+    (event: MouseEvent<HTMLDivElement>) => {
+      buttonProps.onClick?.(event);
+
+      if (onDateSelection) {
+        onDateSelection(props.date);
+      }
+
+      if (isSelected && shouldCloseOnSelect) {
+        onApply?.();
+      }
+    },
+    [buttonProps, onDateSelection, props.date, isSelected, shouldCloseOnSelect, onApply],
+  );
+
+  const selectionState = useMemo(() => {
+    let isSelectionStart = false;
+    let isSelectionEnd = false;
+    let isSelectedCell = false;
+    let isInRange = false;
+    let isHoverRange = false;
+    let isSelectingMode = false;
+
+    if (rangeSelection?.start) {
+      isSelectionStart = isSameDay(props.date, rangeSelection.start);
+      isSelectionEnd = rangeSelection.end ? isSameDay(props.date, rangeSelection.end) : false;
+      isSelectedCell = isSelectionStart || isSelectionEnd;
+      isSelectingMode = rangeSelection.isSelecting && !rangeSelection.end;
+
+      // Check if date is in completed range (between start and end, exclusive of endpoints)
+      if (rangeSelection.start && rangeSelection.end) {
+        const dateValue = props.date;
+        const isAfterStart = dateValue.compare(rangeSelection.start) > 0;
+        const isBeforeEnd = dateValue.compare(rangeSelection.end) < 0;
+        isInRange = isAfterStart && isBeforeEnd;
+      }
+
+      // Check for hover range preview during selection
+      if (rangeSelection.isSelecting && rangeSelection.start && hoverDate && !rangeSelection.end) {
+        const dateValue = props.date;
+        const { start } = rangeSelection;
+        const end = hoverDate;
+
+        // Ensure proper order for comparison
+        const earlierDate = start.compare(end) <= 0 ? start : end;
+        const laterDate = start.compare(end) <= 0 ? end : start;
+
+        const isAfterStart = dateValue.compare(earlierDate) > 0;
+        const isBeforeEnd = dateValue.compare(laterDate) < 0;
+        isHoverRange = isAfterStart && isBeforeEnd;
+      }
+    } else {
+      // Fall back to default state-based selection
+      isSelectionStart =
+        isRange(state) && state.highlightedRange ? isSameDay(props.date, state.highlightedRange.start) : isSelected;
+      isSelectionEnd =
+        isRange(state) && state.highlightedRange ? isSameDay(props.date, state.highlightedRange.end) : isSelected;
+      isSelectedCell = isSelectionStart || isSelectionEnd || (!isRange(state) && isSelected);
+      isInRange = isRange(state) && isSelected && !isSelectionStart && !isSelectionEnd;
+
+      // Check for hover range from the built-in state
+      if (isRange(state) && state.highlightedRange && !isSelected) {
+        const dateValue = props.date;
+        const isAfterStart = dateValue.compare(state.highlightedRange.start) > 0;
+        const isBeforeEnd = dateValue.compare(state.highlightedRange.end) < 0;
+        isHoverRange = isAfterStart && isBeforeEnd;
+      }
+    }
+
+    return { isSelectionStart, isSelectionEnd, isSelectedCell, isInRange, isHoverRange, isSelectingMode };
+  }, [props.date, rangeSelection, state, isSelected, hoverDate]);
+
+  const handleEvent = <T extends MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement>>(
+    event: T,
+    eventHandler?: EventHandler<SyntheticEvent>,
+  ) => {
+    if (isOutsideVisibleRange) {
+      state.selectDate(props.date);
+      state.setFocusedDate(props.date);
+    }
+    eventHandler?.(event);
+    if (isSelected && shouldCloseOnSelect) {
+      onApply?.();
+    }
+  };
+
+  const onMouseEnter = useCallback(() => {
+    if (onDateHover && selectionState.isSelectingMode) {
+      onDateHover(props.date);
+    }
+  }, [onDateHover, selectionState.isSelectingMode, props.date]);
+
+  const onMouseLeave = useCallback(() => {
+    if (onDateHover && selectionState.isSelectingMode) {
+      onDateHover(null);
+    }
+  }, [onDateHover, selectionState.isSelectingMode]);
+
+  const cellClassName = useMemo(() => {
+    const { isSelectedCell, isInRange, isHoverRange, isSelectingMode, isSelectionStart, isSelectionEnd } =
+      selectionState;
+
+    return clsx(
+      "mx-auto flex h-10 w-full max-w-10 items-center justify-center rounded-button-rounding-m p-2",
+      "focus:outline-none focus-visible:outline-1 focus-visible:outline-interactive-contained-primary-focus focus-visible:outline-offset-1",
+      "border border-transparent border-solid",
+      // Base text colors
+      !isSelectedCell && !isOutsideVisibleRange && "bg-elevation-fill-default-1 text-interactive-text-secondary-idle",
+      !isSelectedCell && isOutsideVisibleRange && "bg-elevation-fill-default-1 text-interactive-text-primary-disabled",
+      // Selected cell styling
+      isSelectedCell &&
+        !isOutsideVisibleRange &&
+        "bg-interactive-contained-primary-idle text-interactive-text-primary-idle-inverted",
+      // Selection start cell styling
+      isSelectedCell &&
+        !isOutsideVisibleRange &&
+        rangeSelection &&
+        !rangeSelection.isSelecting &&
+        isSelectionStart &&
+        !isSelectionEnd &&
+        "rounded-r-none",
+      // Selection end cell styling
+      isSelectedCell &&
+        !isOutsideVisibleRange &&
+        rangeSelection &&
+        !rangeSelection.isSelecting &&
+        isSelectionEnd &&
+        !isSelectionStart &&
+        "rounded-l-none",
+      // Disabled state
+      isDisabled && !isOutsideVisibleRange && "cursor-default",
+      // Disabled cell styling
+      isDisabled && "opacity-20",
+      // Regular hover state - only for non-selected, non-disabled, visible cells when not in selecting mode
+      !isSelectedCell &&
+        !isInRange &&
+        !isHoverRange &&
+        !isSelectingMode &&
+        !(isDisabled && !isOutsideVisibleRange) &&
+        "[@media(pointer:fine)]:hover:border-elevation-outline-default-1",
+      // Range styling - for dates between start and end
+      isInRange &&
+        !isOutsideVisibleRange &&
+        "!rounded-none !bg-elevation-fill-default-2 text-interactive-text-secondary-hover",
+      // Hover range styling - for potential range during hover
+      isHoverRange &&
+        !isOutsideVisibleRange &&
+        "!rounded-none !bg-elevation-fill-default-2 text-interactive-text-secondary-hover",
+      // Hover state for selecting mode
+      !isInRange &&
+        !isSelectedCell &&
+        isSelectingMode &&
+        "hover:bg-interactive-contained-primary-idle hover:text-interactive-text-primary-idle-inverted",
+      // css only hover effect during selection mode for better performance
+      isSelectingMode &&
+        !isSelectedCell &&
+        !isInRange &&
+        !isHoverRange &&
+        !isDisabled &&
+        !isOutsideVisibleRange &&
+        "transition-all duration-75 hover:border-elevation-outline-default-1",
+    );
+  }, [selectionState, isOutsideVisibleRange, rangeSelection, isDisabled]);
+
+  return (
+    <td {...cellProps}>
+      <div
+        ref={ref}
+        {...mergeProps(buttonProps, focusProps)}
+        aria-disabled={undefined}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+        className={cellClassName}
+        onClick={(e) => handleEvent(e, onClick)}
+        onKeyDown={(e) => handleEvent(e, () => onKeyboardNavigation?.(e, props.date))}
+      >
+        <Typography
+          as="span"
+          size="label-2"
+          className="block w-6 overflow-hidden text-ellipsis text-center"
+        >
+          {formattedDate}
+        </Typography>
+      </div>
+    </td>
+  );
+};

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

@@ -0,0 +1,102 @@
+import { type AriaCalendarGridProps, useCalendarGrid } from "@react-aria/calendar";
+import type { CalendarState, RangeCalendarState } from "@react-stately/calendar";
+import { clsx } from "clsx";
+import type { KeyboardEvent } from "react";
+import type { DateValue } from "react-aria";
+
+import { CalendarCell } from "#ui/components/inputs/DateTime/shared/CalendarCell";
+import { Typography } from "#ui/components/text/Typography/Typography";
+
+const WEEK_INDICES = [0, 1, 2, 3, 4, 5];
+
+interface CalendarGridProps extends AriaCalendarGridProps {
+  state: CalendarState | RangeCalendarState;
+  onApply?: () => void;
+  offset?: { months?: number };
+  shouldCloseOnSelect?: boolean;
+  onDateSelection?: (date: DateValue, calendarSide?: "left" | "right") => void;
+  onDateHover?: (date: DateValue | null) => void;
+  rangeSelection?: {
+    start: DateValue | null;
+    end: DateValue | null;
+    isSelecting: boolean;
+  };
+  hoverDate?: DateValue | null;
+  className?: string;
+  onKeyboardNavigation?: (event: KeyboardEvent, date: DateValue) => boolean;
+  calendarSide?: "left" | "right";
+}
+
+export const CalendarGrid = ({
+  state,
+  onApply,
+  shouldCloseOnSelect,
+  offset = {},
+  onDateSelection,
+  onDateHover,
+  rangeSelection,
+  hoverDate,
+  onKeyboardNavigation,
+  className,
+  calendarSide,
+  ...props
+}: CalendarGridProps) => {
+  const { gridProps, headerProps, weekDays } = useCalendarGrid({ ...props, weekdayStyle: "short" }, state);
+
+  const startDate = state.visibleRange.start.add(offset);
+
+  const handleDateSelection = (date: DateValue) => {
+    onDateSelection?.(date, calendarSide);
+  };
+
+  return (
+    <div className={clsx("h-72 w-full px-3 py-1 md:w-80", className)}>
+      <table
+        {...gridProps}
+        cellPadding="0"
+        className="w-full"
+      >
+        <thead {...headerProps}>
+          <tr>
+            {weekDays.map((day) => (
+              <th key={day}>
+                <Typography
+                  size="label-2"
+                  className="bg-elevation-fill-default-1 py-2 text-interactive-text-secondary-idle"
+                >
+                  {day.substring(0, 2)}
+                </Typography>
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {WEEK_INDICES.map((weekIndex) => (
+            <tr key={weekIndex}>
+              {state.getDatesInWeek(weekIndex, startDate).map((date, i) =>
+                date ? (
+                  <CalendarCell
+                    // oxlint-disable-next-line react/no-array-index-key
+                    key={i}
+                    state={state}
+                    date={date}
+                    onApply={onApply}
+                    shouldCloseOnSelect={shouldCloseOnSelect}
+                    onDateSelection={handleDateSelection}
+                    onDateHover={onDateHover}
+                    rangeSelection={rangeSelection}
+                    hoverDate={hoverDate}
+                    onKeyboardNavigation={onKeyboardNavigation}
+                  />
+                ) : (
+                  // oxlint-disable-next-line react/no-array-index-key
+                  <td key={i} />
+                ),
+              )}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};

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

@@ -0,0 +1,110 @@
+import { Time } from "@internationalized/date";
+import type { AriaButtonProps } from "@react-aria/button";
+import { useDateFormatter } from "@react-aria/i18n";
+import type { CalendarState } from "@react-stately/calendar";
+import { Button as AriaButton, ToggleButtonGroup as AriaToggleButtonGroup } from "react-aria-components";
+import type { DatePickerState } from "react-stately";
+
+import { ChevronLeftIcon } from "#ui/assets/icons/ChevronLeft";
+import { ChevronRightIcon } from "#ui/assets/icons/ChevronRight";
+import { PillButton } from "#ui/components/buttons/PillButton/PillButton";
+import type { ToggleState } from "#ui/components/inputs/DateTime/shared/Calendar";
+
+const HourCycle = {
+  12: "h12",
+  24: "h23",
+} as const;
+
+interface CalendarProps {
+  calendarState: CalendarState;
+  datePickerState?: DatePickerState;
+  prevButtonProps: AriaButtonProps;
+  nextButtonProps: AriaButtonProps;
+  includesTime?: boolean;
+  hourCycle?: 12 | 24;
+  toggleState: ToggleState | null;
+  setToggleState: (state: ToggleState | null) => void;
+}
+
+export const CalendarHeader = ({
+  calendarState,
+  datePickerState,
+  prevButtonProps,
+  nextButtonProps,
+  includesTime,
+  hourCycle,
+  toggleState,
+  setToggleState,
+}: CalendarProps) => {
+  const formatter = useDateFormatter({
+    month: "long",
+    timeZone: calendarState.timeZone,
+  });
+  const timeFormatter = useDateFormatter({
+    timeStyle: "short",
+    timeZone: calendarState.timeZone,
+    hourCycle: hourCycle ? HourCycle[hourCycle] : undefined,
+  });
+
+  const year = calendarState.focusedDate.year.toString();
+  const month = formatter.format(calendarState.focusedDate.toDate(calendarState.timeZone));
+
+  const timeValue = datePickerState?.timeValue || new Time();
+  const date = new Date();
+  date.setHours(timeValue.hour, timeValue.minute);
+
+  return (
+    <div className="inline-flex w-full items-center justify-between border-elevation-outline-default-1 border-b border-solid px-1">
+      <div className="inline-flex h-12 items-center p-3">
+        {!toggleState && (
+          <AriaButton
+            {...prevButtonProps}
+            className="shrink-0 focus-visible:outline-interactive-contained-secondary-focus"
+          >
+            <ChevronLeftIcon className="size-6 text-interactive-text-secondary-idle" />
+          </AriaButton>
+        )}
+      </div>
+
+      <AriaToggleButtonGroup className="flex gap-2">
+        <PillButton
+          color="secondary"
+          toggle
+          isSelected={toggleState === "month"}
+          onChange={(isSelected) => setToggleState(isSelected ? "month" : null)}
+        >
+          {month}
+        </PillButton>
+        <PillButton
+          color="secondary"
+          toggle
+          isSelected={toggleState === "year"}
+          onChange={(isSelected) => setToggleState(isSelected ? "year" : null)}
+        >
+          {year}
+        </PillButton>
+        {includesTime && (
+          <PillButton
+            color="secondary"
+            toggle
+            isSelected={toggleState === "time"}
+            onChange={(isSelected) => setToggleState(isSelected ? "time" : null)}
+          >
+            {timeFormatter.format(date)}
+          </PillButton>
+        )}
+      </AriaToggleButtonGroup>
+
+      <div className="inline-flex h-12 items-center p-3">
+        {!toggleState && (
+          <AriaButton
+            {...nextButtonProps}
+            className="shrink-0 focus-visible:outline-interactive-contained-secondary-focus"
+          >
+            <ChevronRightIcon className="size-6 text-interactive-text-secondary-idle" />
+          </AriaButton>
+        )}
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,228 @@
+import type { CalendarDate } from "@internationalized/date";
+import { useDateFormatter } from "@react-aria/i18n";
+import type { CalendarState, RangeCalendarState } from "@react-stately/calendar";
+import { type MouseEvent, useMemo } from "react";
+
+import { ArrowDropDownIcon } from "#ui/assets/icons/ArrowDropDown";
+import { ChevronLeftIcon } from "#ui/assets/icons/ChevronLeft";
+import { ChevronRightIcon } from "#ui/assets/icons/ChevronRight";
+import { ChevronsLeftIcon } from "#ui/assets/icons/ChevronsLeft";
+import { ChevronsRightIcon } from "#ui/assets/icons/ChevronsRight";
+import { InlineIconButton } from "#ui/components/buttons/InlineIconButton/InlineIconButton";
+import { PillButton } from "#ui/components/buttons/PillButton/PillButton";
+import { Select } from "#ui/components/inputs/Selection/Select/Select";
+
+interface CalendarSelectHeaderProps {
+  state: CalendarState | RangeCalendarState;
+  isPrevMonthDisabled?: boolean;
+  isPrevYearDisabled?: boolean;
+  isNextMonthDisabled?: boolean;
+  isNextYearDisabled?: boolean;
+  offset?: { months: number };
+  onNavigate?: (newDate: CalendarDate) => void;
+  maxDate?: CalendarDate;
+  minDate?: CalendarDate;
+}
+
+export const CalendarSelectHeader = ({
+  state,
+  isPrevMonthDisabled,
+  isPrevYearDisabled,
+  isNextMonthDisabled,
+  isNextYearDisabled,
+  offset = { months: 0 },
+  onNavigate,
+  maxDate,
+  minDate,
+}: CalendarSelectHeaderProps) => {
+  const displayDate = state.visibleRange.start.add(offset);
+  const currentMonth = displayDate.month - 1;
+  const currentYear = displayDate.year;
+
+  const formatter = useDateFormatter({
+    month: "long",
+    timeZone: state.timeZone,
+  });
+
+  const numMonths = state.focusedDate.calendar.getMonthsInYear(state.focusedDate);
+
+  const MONTHS = useMemo(() => {
+    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;
+  }, [formatter, numMonths, state.focusedDate, state.timeZone]);
+
+  const years = Array.from({ length: 201 }, (_, i) => currentYear - 100 + i);
+
+  const getAvailableMonths = () => {
+    return MONTHS.map((month, i) => {
+      const monthDate = displayDate.set({ month: i + 1 });
+      let isDisabled = false;
+
+      if (maxDate) {
+        isDisabled =
+          monthDate.year > maxDate.year || (monthDate.year === maxDate.year && monthDate.month >= maxDate.month);
+      }
+
+      if (minDate) {
+        isDisabled =
+          monthDate.year < minDate.year || (monthDate.year === minDate.year && monthDate.month <= minDate.month);
+      }
+
+      return { month, value: i, isDisabled };
+    });
+  };
+
+  const getAvailableYears = () => {
+    return years.map((year) => {
+      let isDisabled = false;
+
+      if (maxDate) {
+        isDisabled = year > maxDate.year || (year === maxDate.year && displayDate.month >= maxDate.month);
+      }
+
+      if (minDate && !isDisabled) {
+        isDisabled = year < minDate.year || (year === minDate.year && displayDate.month <= minDate.month);
+      }
+
+      return { year, isDisabled };
+    });
+  };
+
+  const availableMonths = getAvailableMonths();
+  const availableYears = getAvailableYears();
+
+  const handleMonthChange = (value: number | null) => {
+    if (value === null) {
+      return;
+    }
+    const newDate = displayDate.set({ month: value + 1 });
+    onNavigate?.(newDate);
+  };
+
+  const handleYearChange = (value: number | null) => {
+    if (value === null) {
+      return;
+    }
+
+    const newDate = displayDate.set({ year: value });
+    onNavigate?.(newDate);
+  };
+
+  const handlePrevMonth = (e: MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const newDate = displayDate.subtract({ months: 1 });
+    onNavigate?.(newDate);
+  };
+
+  const handleNextMonth = (e: MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const newDate = displayDate.add({ months: 1 });
+    onNavigate?.(newDate);
+  };
+
+  const handlePrevYear = (e: MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const newDate = displayDate.subtract({ years: 1 });
+    onNavigate?.(newDate);
+  };
+
+  const handleNextYear = (e: MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const newDate = displayDate.add({ years: 1 });
+    onNavigate?.(newDate);
+  };
+
+  return (
+    <div className="flex w-full items-center justify-between gap-3 border-elevation-outline-default-1 border-b border-solid px-3 py-2-5">
+      <div className="flex items-center">
+        <InlineIconButton
+          color="secondary"
+          isDisabled={isPrevYearDisabled}
+          onClick={handlePrevYear}
+          icon={ChevronsLeftIcon}
+          label="Previous year"
+        />
+        <InlineIconButton
+          color="secondary"
+          isDisabled={isPrevMonthDisabled}
+          onClick={handlePrevMonth}
+          icon={ChevronLeftIcon}
+          label="Previous month"
+        />
+      </div>
+
+      <div className="flex gap-2">
+        <Select
+          label="Month"
+          hideLabel
+          customTrigger={
+            <PillButton
+              color="secondary"
+              iconPosition="right"
+              icon={ArrowDropDownIcon}
+            >
+              {MONTHS[currentMonth]}
+            </PillButton>
+          }
+          ignoreTriggerWidth
+          items={availableMonths
+            .map(({ month, value, isDisabled }) => ({
+              label: month,
+              id: value,
+              isDisabled,
+            }))
+            .filter(({ isDisabled }) => !isDisabled)}
+          value={currentMonth}
+          onChange={handleMonthChange}
+        />
+        <Select
+          label="Year"
+          hideLabel
+          customTrigger={
+            <PillButton
+              color="secondary"
+              iconPosition="right"
+              icon={ArrowDropDownIcon}
+            >
+              {currentYear.toString()}
+            </PillButton>
+          }
+          items={availableYears
+            .map(({ year, isDisabled }) => ({
+              label: year.toString(),
+              id: year,
+              isDisabled,
+            }))
+            .filter(({ isDisabled }) => !isDisabled)}
+          value={currentYear}
+          onChange={handleYearChange}
+        />
+      </div>
+
+      <div className="flex items-center">
+        <InlineIconButton
+          color="secondary"
+          isDisabled={isNextMonthDisabled}
+          onClick={handleNextMonth}
+          icon={ChevronRightIcon}
+          label="Next month"
+        />
+        <InlineIconButton
+          color="secondary"
+          isDisabled={isNextYearDisabled}
+          onClick={handleNextYear}
+          icon={ChevronsRightIcon}
+          label="Next year"
+        />
+      </div>
+    </div>
+  );
+};