@povio/ui 0.0.2 → 0.0.4

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

@@ -0,0 +1,36 @@
+import type { GroupDOMAttributes } from "@react-types/shared";
+import type { Ref } from "react";
+import type { TimeFieldState } from "react-stately";
+
+import { DateSegmentItem } from "#ui/components/inputs/DateTime/shared/DateSegmentItem";
+
+interface TimeFieldProps {
+  ref?: Ref<HTMLDivElement>;
+  fieldProps: GroupDOMAttributes;
+  state: TimeFieldState;
+  isDisabled?: boolean;
+  hidePlaceholder?: boolean;
+}
+
+export const TimeField = ({ ref, fieldProps, state, isDisabled, hidePlaceholder }: TimeFieldProps) => {
+  return (
+    <div>
+      <div
+        {...fieldProps}
+        ref={ref}
+        className="flex"
+      >
+        {state.segments.map((segment, i) => (
+          <DateSegmentItem
+            key={i} // oxlint-disable-line react/no-array-index-key
+            segment={segment}
+            state={state}
+            isDisabled={isDisabled}
+            timePickerOnly
+            hidePlaceholder={hidePlaceholder}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,222 @@
+import { Time } from "@internationalized/date";
+import {
+  type DatePickerState,
+  type DateSegment,
+  type TimeFieldState,
+  useTimeFieldState,
+} from "@react-stately/datepicker";
+import { clsx } from "clsx";
+import { useEffect, useRef } from "react";
+import { useDateSegment, useLocale, useTimeField } from "react-aria";
+
+import { ChevronDownIcon } from "#ui/assets/icons/ChevronDown";
+import { ChevronUpIcon } from "#ui/assets/icons/ChevronUp";
+import { InlineIconButton } from "#ui/components/buttons/InlineIconButton/InlineIconButton";
+import { getPlaceholder } from "#ui/components/inputs/DateTime/shared/DateSegmentItem";
+import { Typography } from "#ui/components/text/Typography/Typography";
+import { useBreakpoint } from "#ui/hooks/useBreakpoint";
+import { useLongPressRepeat } from "#ui/hooks/useLongPressRepeat";
+
+const INCREMENT_STEP_SIZE = 5;
+
+type TimePickerFormProps =
+  | { state: TimeFieldState; datePickerState?: never }
+  | { state?: never; datePickerState: DatePickerState };
+
+export const TimePickerForm = ({ state, datePickerState }: TimePickerFormProps) => {
+  const isDesktop = useBreakpoint("md");
+  const { locale } = useLocale();
+  const fieldState = useTimeFieldState({
+    locale,
+    defaultValue: datePickerState?.timeValue,
+    onChange: (value) => {
+      datePickerState?.setTimeValue(value ?? new Time(0, 0));
+    },
+    hideTimeZone: true,
+  });
+  const ref = useRef<HTMLDivElement | null>(null);
+  const innerState = state ?? fieldState;
+  const { fieldProps } = useTimeField({ "aria-label": "Time Picker" }, innerState, ref);
+
+  const getAutoFocus = (index: number) => {
+    if (!isDesktop) {
+      return false;
+    }
+    return index === innerState.segments.findIndex(({ type }) => ["hour", "minute", "dayPeriod"].includes(type));
+  };
+
+  return (
+    <div className="w-full p-8">
+      <div className="flex items-center justify-center gap-4">
+        {innerState.segments.map((segment, i) => (
+          <TimeSegmentButton
+            // oxlint-disable-next-line react/no-array-index-key
+            key={i}
+            segment={segment}
+            state={innerState}
+            type="increment"
+          />
+        ))}
+      </div>
+      <div
+        ref={ref}
+        {...fieldProps}
+        className="flex items-center justify-center gap-4 py-2"
+      >
+        {innerState.segments.map((segment, i) => (
+          <TimeSegmentInput
+            // oxlint-disable-next-line react/no-array-index-key
+            key={i}
+            segment={segment}
+            state={innerState}
+            autoFocus={getAutoFocus(i)}
+          />
+        ))}
+      </div>
+      <div className="flex items-center justify-center gap-4">
+        {innerState.segments.map((segment, i) => (
+          <TimeSegmentButton
+            // oxlint-disable-next-line react/no-array-index-key
+            key={i}
+            segment={segment}
+            state={innerState}
+            type="decrement"
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+interface TimeSegmentProps {
+  segment: DateSegment;
+  state: TimeFieldState;
+}
+
+const TimeSegmentInput = ({ segment, state, autoFocus }: TimeSegmentProps & { autoFocus?: boolean }) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const { segmentProps } = useDateSegment(segment, state, ref);
+  const isDesktop = useBreakpoint("md");
+
+  useEffect(() => {
+    if (autoFocus) {
+      ref.current?.focus();
+    }
+  }, [autoFocus]);
+
+  if (!["literal", "hour", "minute", "dayPeriod"].includes(segment.type)) {
+    return null;
+  }
+
+  if (segment.type === "literal") {
+    if (!showSegmentText(segment.text)) {
+      return null;
+    }
+
+    return (
+      <div
+        className="flex flex-col text-center"
+        ref={ref}
+      >
+        <Typography
+          as="span"
+          variant="prominent-1"
+          size="label-2"
+          className="text-text-default-2"
+        >
+          {segment.text}
+        </Typography>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col items-center justify-center gap-2">
+      <div
+        ref={ref}
+        {...(isDesktop && segmentProps)}
+        className={clsx(
+          "w-11 rounded-input-rounding-default bg-input-filled-idle py-input-height-extra-small text-center",
+          "font-labels-default text-text-default-3",
+          "border border-input-filled-idle border-solid",
+          "hover:border-interactive-contained-primary-hover",
+          "focus-within:border-interactive-contained-primary-idle focus-within:outline-none",
+        )}
+      >
+        {getPlaceholder(segment) ?? segment.text}
+      </div>
+    </div>
+  );
+};
+
+const TimeSegmentButton = ({ segment, state, type }: TimeSegmentProps & { type: "increment" | "decrement" }) => {
+  const stateRef = useRef(state);
+
+  useEffect(() => {
+    stateRef.current = state;
+  }, [state]);
+
+  const onPress = (isLongPress?: boolean) => {
+    if (isLongPress && segment.type === "minute") {
+      const currentValue = stateRef.current.segments.find((item) => item.type === "minute")?.value ?? 0;
+
+      const diff = type === "increment" ? INCREMENT_STEP_SIZE : -INCREMENT_STEP_SIZE;
+      const newValue = Math.round((currentValue + diff) / INCREMENT_STEP_SIZE) * INCREMENT_STEP_SIZE;
+      const normalizedValue = ((newValue % 60) + 60) % 60;
+
+      stateRef.current.setSegment(segment.type, normalizedValue);
+    } else {
+      stateRef.current[type](segment.type);
+    }
+  };
+
+  const { onPressStart, onPressEnd } = useLongPressRepeat({
+    onPress,
+    enabled: segment.type !== "dayPeriod",
+    timeout: 300,
+    interval: 300,
+  });
+
+  if (!["literal", "hour", "minute", "dayPeriod"].includes(segment.type)) {
+    return null;
+  }
+
+  if (segment.type === "literal") {
+    if (!showSegmentText(segment.text)) {
+      return null;
+    }
+
+    return (
+      <div className="flex shrink-0">
+        <Typography
+          as="span"
+          variant="prominent-1"
+          size="label-2"
+          className="invisible text-text-default-2"
+          aria-hidden
+        >
+          {segment.text}
+        </Typography>
+      </div>
+    );
+  }
+
+  const Icon = type === "increment" ? ChevronUpIcon : ChevronDownIcon;
+
+  return (
+    <div
+      className="flex w-11 select-none items-center justify-center"
+      onContextMenu={(e) => e.preventDefault()}
+    >
+      <InlineIconButton
+        label=""
+        color="secondary"
+        onPressStart={onPressStart}
+        onPressEnd={onPressEnd}
+        icon={Icon}
+      />
+    </div>
+  );
+};
+
+const showSegmentText = (text: string) => !/[\u2066\u2069]/.test(text);

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

@@ -0,0 +1,114 @@
+import { clsx } from "clsx";
+import { type Ref, useMemo, useState } from "react";
+import { type DateFieldAria, useFocusVisible, useFocusWithin, useHover } from "react-aria";
+import type { TimeFieldState } from "react-stately";
+import useMeasure from "react-use-measure";
+
+import { ClockIcon } from "#ui/assets/icons/Clock";
+import { InlineIconButton } from "#ui/components/buttons/InlineIconButton/InlineIconButton";
+import { TimeField } from "#ui/components/inputs/DateTime/shared/TimeField";
+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>;
+  fieldProps: DateFieldAria["fieldProps"];
+  state: TimeFieldState;
+  isDisabled?: boolean;
+  isInvalid?: boolean;
+  disableDropdown?: boolean;
+  headerProps?: FormFieldHeaderProps;
+  isClearable?: boolean;
+  onPress: () => void;
+}
+
+export const TimePickerInput = ({
+  ref,
+  as,
+  fieldProps,
+  state,
+  isDisabled,
+  isInvalid,
+  disableDropdown,
+  variant,
+  size,
+  isClearable,
+  headerProps,
+  onPress,
+  ...props
+}: DatePickerInputProps) => {
+  const inputCva = useInputCva();
+  const { hoverProps, isHovered } = useHover({ isDisabled });
+  const [isFocused, setIsFocused] = useState(false);
+  const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setIsFocused });
+  const { isFocusVisible } = useFocusVisible();
+  const [labelContentRef, { width: labelWidth }] = useMeasure();
+
+  const hidePlaceholder = (as === "floating" || as === "filter") && !state.value && !isFocused;
+
+  const style = useMemo(() => {
+    const leftPadding = as === "filter" ? `var(--spacing-input-side-default) + ${labelWidth}` : "0";
+    return {
+      paddingLeft: `calc(${leftPadding}px)`,
+    };
+  }, [labelWidth, as]);
+
+  const canClear = state.segments.some((segment) => segment.type !== "literal" && segment.isPlaceholder === false);
+
+  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={state.value !== null || undefined}
+      {...fieldProps}
+      {...focusWithinProps}
+      {...hoverProps}
+    >
+      {as && ["filter", "floating"].includes(as) && headerProps && (
+        <FormFieldLabel
+          ref={labelContentRef}
+          as={as}
+          {...headerProps}
+        />
+      )}
+      <div style={style}>
+        <TimeField
+          fieldProps={fieldProps}
+          state={state}
+          isDisabled={isDisabled}
+          hidePlaceholder={hidePlaceholder}
+        />
+      </div>
+      <div
+        className={clsx("flex items-center gap-2", {
+          "-mt-4": as === "floating",
+        })}
+      >
+        {isClearable && canClear && <InputClear onClear={() => state.setValue(null)} />}
+        {!disableDropdown && (
+          <InlineIconButton
+            label=""
+            color="secondary"
+            onPress={onPress}
+            icon={ClockIcon}
+            isDisabled={isDisabled}
+          />
+        )}
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,100 @@
+import { today } from "@internationalized/date";
+import { useDateFormatter } from "@react-aria/i18n";
+import type { CalendarState, RangeCalendarState } from "@react-stately/calendar";
+import { clsx } from "clsx";
+import { useMemo } from "react";
+import { type Key, ListBox, ListBoxItem } from "react-aria-components";
+
+import { Typography } from "#ui/components/text/Typography/Typography";
+import { useScrollableListBox } from "#ui/hooks/useScrollableListBox";
+
+interface YearPickerProps {
+  state: CalendarState | RangeCalendarState;
+  onSelectionChange: (key: Set<Key>) => void;
+}
+
+export const YearPicker = ({ state, onSelectionChange }: YearPickerProps) => {
+  const formatter = useDateFormatter({
+    year: "numeric",
+    timeZone: state.timeZone,
+  });
+
+  const years = useMemo(() => {
+    const arr: { value: number; formatted: string }[] = [];
+    for (let i = -100; i <= 100; i++) {
+      const date = today(state.timeZone).add({ years: i });
+      arr.push({
+        value: date.year,
+        formatted: formatter.format(date.toDate(state.timeZone)),
+      });
+    }
+
+    return arr;
+  }, [state.timeZone, formatter]);
+
+  const isYearDisabled = (year: number) => {
+    if (state.minValue && year < state.minValue.year) {
+      return true;
+    }
+    if (state.maxValue && year > state.maxValue.year) {
+      return true;
+    }
+    return false;
+  };
+
+  const selectedYear = years.findIndex((year) => year.value === state.focusedDate.year);
+
+  const { ref } = useScrollableListBox();
+
+  return (
+    <ListBox
+      ref={ref}
+      autoFocus
+      aria-label="Year"
+      selectionMode="single"
+      selectedKeys={[selectedYear]}
+      onSelectionChange={(key) => {
+        if (key === "all") {
+          return;
+        }
+
+        const index = [...key][0];
+
+        if (typeof index === "number") {
+          const date = state.focusedDate.set({ year: years[index].value });
+          state.setFocusedDate(date);
+        }
+
+        onSelectionChange(key);
+      }}
+      className="h-80 max-h-full min-h-0 w-full shrink-0 overflow-y-auto md:h-72 md:w-80"
+    >
+      {years.map((year, index) => {
+        const isDisabled = isYearDisabled(year.value);
+        return (
+          <ListBoxItem
+            key={index} // oxlint-disable-line react/no-array-index-key
+            id={index}
+            textValue={year.formatted}
+            isDisabled={isDisabled}
+            className={clsx(
+              "flex px-4 py-2 text-interactive-text-secondary-idle outline-none",
+              "border-elevation-outline-default-1 border-b border-solid bg-elevation-fill-default-1 last:border-b-0",
+              "hover:text-interactive-text-secondary-hover",
+              "selected:bg-interactive-contained-primary-idle selected:text-interactive-text-secondary-idle-inverted",
+              "focus-visible:bg-interactive-contained-primary-focus focus-visible:text-interactive-text-secondary-idle-inverted",
+              isDisabled ? "cursor-default opacity-50" : "cursor-pointer",
+            )}
+          >
+            <Typography
+              as="span"
+              size="label-2"
+            >
+              {year.formatted}
+            </Typography>
+          </ListBoxItem>
+        );
+      })}
+    </ListBox>
+  );
+};