@povio/ui 0.0.4 → 0.0.6

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

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

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

@@ -1,42 +0,0 @@
-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/RangeCalendar.tsx

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

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

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

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