@uniai-fe/uds-primitives 0.10.4 → 0.12.0

package/src/components/input/markup/time/Template.tsx

@@ -0,0 +1,423 @@
+"use client";
+
+import { useUncontrolled } from "@mantine/hooks";
+import type { CSSProperties, FocusEvent, KeyboardEvent } from "react";
+import { forwardRef, useCallback, useEffect, useState } from "react";
+import { PopOver } from "../../../pop-over";
+import {
+  getFormFieldWidthAttr,
+  getFormFieldWidthValue,
+} from "../../../form/utils/form-field";
+import { TimePicker } from "../../../time-picker";
+import type {
+  TimePickerParts,
+  TimePickerPeriod,
+  TimePickerUnit,
+} from "../../../time-picker/types";
+import {
+  getTimePeriod,
+  parseTimeValue,
+  serializeTimeValue,
+  setTimePeriod,
+  stepTimeValue,
+  toDisplayHour,
+} from "../../../time-picker/utils";
+import ClockIcon from "../../img/clock.svg";
+import type { InputTimeTemplateProps } from "../../types";
+import InputTimeTrigger from "./Trigger";
+
+interface InputTimeDraftFields {
+  hours: string;
+  minutes: string;
+  seconds: string;
+}
+
+interface InputTimeDraft {
+  fields: InputTimeDraftFields;
+  period: TimePickerPeriod;
+}
+
+const getInputTimeDraft = (
+  value: string,
+  format: "12h" | "24h",
+): InputTimeDraft => {
+  const parts = parseTimeValue(value);
+  if (!parts) {
+    return {
+      fields: { hours: "", minutes: "", seconds: "" },
+      period: "am",
+    };
+  }
+
+  return {
+    fields: {
+      hours: String(toDisplayHour(parts.hours, format)).padStart(2, "0"),
+      minutes: String(parts.minutes).padStart(2, "0"),
+      seconds: String(parts.seconds).padStart(2, "0"),
+    },
+    period: getTimePeriod(parts.hours),
+  };
+};
+
+/**
+ * Input Time Template; native trigger와 PopOver·TimePicker 선택 panel 조합.
+ * 저장값은 24시간 `HH:mm` 또는 `HH:mm:ss` 문자열로 유지한다.
+ * @component
+ * @param {InputTimeTemplateProps} props
+ * @param {"primary" | "secondary" | "tertiary" | "table"} [props.priority="primary"] input priority
+ * @param {"small" | "medium" | "large"} [props.size="medium"] input size
+ * @param {"12h" | "24h"} [props.format="24h"] 표시 형식
+ * @param {boolean} [props.withSeconds=false] 초 field 노출 여부
+ * @returns {ReactNode} 시간 입력과 선택 panel
+ */
+const InputTimeTemplate = forwardRef<HTMLDivElement, InputTimeTemplateProps>(
+  (
+    {
+      value,
+      defaultValue,
+      onChange,
+      onValueChange,
+      name,
+      form,
+      register,
+      priority = "primary",
+      size = "medium",
+      state: stateProp = "default",
+      block = false,
+      width,
+      className,
+      disabled,
+      readOnly = false,
+      required,
+      id,
+      format = "24h",
+      withSeconds = false,
+      clearable = true,
+      hoursStep = 1,
+      minutesStep = 5,
+      secondsStep = 1,
+      icon,
+      iconPosition,
+      iconLabel = "시간 선택",
+      hiddenInputProps,
+      hoursInputLabel = "시",
+      minutesInputLabel = "분",
+      secondsInputLabel = "초",
+      amPmInputLabel = "오전 또는 오후",
+      hoursPlaceholder = "HH",
+      minutesPlaceholder = "MM",
+      secondsPlaceholder = "SS",
+      onFocus,
+      onBlur,
+    },
+    ref,
+  ) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [activeUnit, setActiveUnit] = useState<TimePickerUnit | null>(null);
+    const [timeValue, setTimeValue] = useUncontrolled<string>({
+      value,
+      defaultValue,
+      finalValue: "",
+      onChange: nextValue => {
+        onChange?.(nextValue);
+        onValueChange?.(nextValue);
+      },
+    });
+    const [draft, setDraft] = useState<InputTimeDraft>(() =>
+      getInputTimeDraft(value ?? defaultValue ?? "", format),
+    );
+
+    useEffect(() => {
+      setDraft(getInputTimeDraft(timeValue, format));
+    }, [format, timeValue]);
+
+    const isDisabled =
+      disabled || stateProp === "disabled" || stateProp === "loading";
+    const visualState =
+      priority === "tertiary"
+        ? isDisabled
+          ? "disabled"
+          : "default"
+        : !isDisabled && activeUnit
+          ? "active"
+          : stateProp;
+    const resolvedIconPosition =
+      iconPosition ?? (priority === "table" ? "left" : "right");
+    const resolvedBlock =
+      block || (priority === "table" && width === undefined);
+    const widthAttr =
+      width !== undefined
+        ? getFormFieldWidthAttr(width)
+        : resolvedBlock
+          ? "full"
+          : undefined;
+    const widthValue =
+      width !== undefined ? getFormFieldWidthValue(width) : undefined;
+    const triggerStyle: CSSProperties | undefined = widthValue
+      ? { width: widthValue }
+      : undefined;
+
+    const emitRegisterChange = useCallback(
+      (nextValue: string) => {
+        register?.onChange({
+          target: { name: register.name, value: nextValue },
+          type: "change",
+        });
+      },
+      [register],
+    );
+
+    const updateValue = useCallback(
+      (nextValue: string) => {
+        setDraft(getInputTimeDraft(nextValue, format));
+        setTimeValue(nextValue);
+        emitRegisterChange(nextValue);
+      },
+      [emitRegisterChange, format, setTimeValue],
+    );
+
+    const commitDraft = useCallback(
+      (nextDraft: InputTimeDraft) => {
+        const { hours, minutes, seconds } = nextDraft.fields;
+        if (
+          hours.length !== 2 ||
+          minutes.length !== 2 ||
+          (withSeconds && seconds.length !== 2)
+        ) {
+          return;
+        }
+
+        const displayHours = Number(hours);
+        const nextMinutes = Number(minutes);
+        const nextSeconds = withSeconds ? Number(seconds) : 0;
+        const validHours =
+          format === "12h"
+            ? displayHours >= 1 && displayHours <= 12
+            : displayHours >= 0 && displayHours <= 23;
+        if (!validHours || nextMinutes > 59 || nextSeconds > 59) {
+          return;
+        }
+
+        const storedHours =
+          format === "12h"
+            ? (displayHours % 12) + (nextDraft.period === "pm" ? 12 : 0)
+            : displayHours;
+        updateValue(
+          serializeTimeValue(
+            {
+              hours: storedHours,
+              minutes: nextMinutes,
+              seconds: nextSeconds,
+            },
+            withSeconds,
+          ),
+        );
+      },
+      [format, updateValue, withSeconds],
+    );
+
+    const handleFieldChange = (unit: TimePickerUnit, rawValue: string) => {
+      const nextValue = rawValue.replace(/\D/g, "").slice(0, 2);
+      const nextDraft = {
+        ...draft,
+        fields: { ...draft.fields, [unit]: nextValue },
+      };
+      setDraft(nextDraft);
+      commitDraft(nextDraft);
+    };
+
+    const handleFieldFocus = (
+      unit: TimePickerUnit,
+      event: FocusEvent<HTMLInputElement>,
+    ) => {
+      setActiveUnit(unit);
+      event.currentTarget.select();
+      onFocus?.(event);
+    };
+
+    const handleFieldBlur = (unit: TimePickerUnit) => {
+      const currentValue = draft.fields[unit];
+      if (!currentValue) {
+        return;
+      }
+
+      const max = unit === "hours" ? (format === "12h" ? 12 : 23) : 59;
+      const min = unit === "hours" && format === "12h" ? 1 : 0;
+      const normalized = String(
+        Math.min(max, Math.max(min, Number(currentValue))),
+      ).padStart(2, "0");
+      const nextDraft = {
+        ...draft,
+        fields: { ...draft.fields, [unit]: normalized },
+      };
+      setDraft(nextDraft);
+      commitDraft(nextDraft);
+    };
+
+    const handleFieldKeyDown = (
+      unit: TimePickerUnit,
+      event: KeyboardEvent<HTMLInputElement>,
+    ) => {
+      if (event.key !== "ArrowUp" && event.key !== "ArrowDown") {
+        return;
+      }
+      event.preventDefault();
+      const amount = event.key === "ArrowUp" ? 1 : -1;
+      const step =
+        unit === "hours"
+          ? hoursStep
+          : unit === "minutes"
+            ? minutesStep
+            : secondsStep;
+      updateValue(stepTimeValue(timeValue, unit, amount * step, withSeconds));
+    };
+
+    const handleStep = (amount: 1 | -1) => {
+      if (!activeUnit) {
+        return;
+      }
+      const step =
+        activeUnit === "hours"
+          ? hoursStep
+          : activeUnit === "minutes"
+            ? minutesStep
+            : secondsStep;
+      updateValue(
+        stepTimeValue(timeValue, activeUnit, amount * step, withSeconds),
+      );
+    };
+
+    const handlePeriodChange = (period: TimePickerPeriod) => {
+      const nextValue = setTimePeriod(timeValue, period, withSeconds);
+      updateValue(nextValue);
+    };
+
+    const handleHourSelect = (hours: number) => {
+      const parts = parseTimeValue(timeValue) ?? {
+        hours: 0,
+        minutes: 0,
+        seconds: 0,
+      };
+      const storedHours =
+        format === "12h"
+          ? (hours % 12) + (draft.period === "pm" ? 12 : 0)
+          : hours;
+      updateValue(
+        serializeTimeValue({ ...parts, hours: storedHours }, withSeconds),
+      );
+    };
+
+    const handleMinuteSelect = (minutes: number) => {
+      const parts: TimePickerParts = parseTimeValue(timeValue) ?? {
+        hours: 0,
+        minutes: 0,
+        seconds: 0,
+      };
+      updateValue(serializeTimeValue({ ...parts, minutes }, withSeconds));
+    };
+
+    const handleRootBlur = (event: FocusEvent<HTMLDivElement>) => {
+      if (
+        event.relatedTarget instanceof Node &&
+        event.currentTarget.contains(event.relatedTarget)
+      ) {
+        return;
+      }
+      setActiveUnit(null);
+      register?.onBlur({
+        target: { name: register.name, value: timeValue },
+        type: "blur",
+      });
+      onBlur?.(event);
+    };
+
+    const handleOpenChange = (nextOpen: boolean) => {
+      setIsOpen(nextOpen && !isDisabled && !readOnly);
+    };
+
+    return (
+      <>
+        <PopOver.Root open={isOpen} onOpenChange={handleOpenChange}>
+          <PopOver.Trigger asChild>
+            <InputTimeTrigger
+              ref={ref}
+              id={id}
+              className={className}
+              style={triggerStyle}
+              fields={draft.fields}
+              period={draft.period}
+              activeUnit={activeUnit}
+              priority={priority}
+              size={size}
+              state={visualState}
+              format={format}
+              withSeconds={withSeconds}
+              disabled={Boolean(isDisabled)}
+              readOnly={readOnly}
+              icon={
+                icon === undefined ? <ClockIcon aria-hidden="true" /> : icon
+              }
+              iconPosition={resolvedIconPosition}
+              iconLabel={iconLabel}
+              hoursInputLabel={hoursInputLabel}
+              minutesInputLabel={minutesInputLabel}
+              secondsInputLabel={secondsInputLabel}
+              amPmInputLabel={amPmInputLabel}
+              hoursPlaceholder={hoursPlaceholder}
+              minutesPlaceholder={minutesPlaceholder}
+              secondsPlaceholder={secondsPlaceholder}
+              data-block={resolvedBlock ? "true" : undefined}
+              data-width={widthAttr}
+              onFieldChange={handleFieldChange}
+              onFieldFocus={handleFieldFocus}
+              onFieldBlur={handleFieldBlur}
+              onFieldKeyDown={handleFieldKeyDown}
+              onPeriodChange={handlePeriodChange}
+              onStep={handleStep}
+              onRootBlur={handleRootBlur}
+            />
+          </PopOver.Trigger>
+          <PopOver.Content
+            className="input-time-pop-over"
+            width={336}
+            align="start"
+            sideOffset={8}
+            onOpenAutoFocus={event => event.preventDefault()}
+          >
+            <TimePicker.Template
+              value={timeValue}
+              format={format}
+              clearable={clearable}
+              disabled={Boolean(isDisabled || readOnly)}
+              onHourSelect={handleHourSelect}
+              onMinuteSelect={handleMinuteSelect}
+              onPeriodChange={handlePeriodChange}
+              onMinuteStep={amount =>
+                updateValue(
+                  stepTimeValue(timeValue, "minutes", amount, withSeconds),
+                )
+              }
+              onClear={() => updateValue("")}
+              onApply={() => setIsOpen(false)}
+            />
+          </PopOver.Content>
+        </PopOver.Root>
+        {register || name ? (
+          <input
+            {...hiddenInputProps}
+            {...register}
+            type="hidden"
+            name={register?.name ?? name}
+            form={form ?? hiddenInputProps?.form}
+            required={required}
+            value={timeValue}
+          />
+        ) : null}
+      </>
+    );
+  },
+);
+
+InputTimeTemplate.displayName = "InputTimeTemplate";
+
+export default InputTimeTemplate;

package/src/components/input/markup/time/Trigger.tsx

@@ -0,0 +1,289 @@
+"use client";
+
+import clsx from "clsx";
+import type {
+  ChangeEvent,
+  ComponentPropsWithoutRef,
+  FocusEvent,
+  KeyboardEvent,
+  MouseEvent,
+  ReactNode,
+} from "react";
+import { forwardRef, useRef } from "react";
+import { Calendar } from "../../../calendar";
+import type {
+  TimePickerFormat,
+  TimePickerPeriod,
+  TimePickerUnit,
+} from "../../../time-picker/types";
+import type { InputPriority, InputSize, InputState } from "../../types";
+
+interface InputTimeTriggerFields {
+  hours: string;
+  minutes: string;
+  seconds: string;
+}
+
+interface InputTimeTriggerProps extends Omit<
+  ComponentPropsWithoutRef<"div">,
+  "onBlur" | "onFocus"
+> {
+  fields: InputTimeTriggerFields;
+  period: TimePickerPeriod;
+  activeUnit: TimePickerUnit | null;
+  priority: InputPriority;
+  size: InputSize;
+  state: InputState;
+  format: TimePickerFormat;
+  withSeconds: boolean;
+  disabled: boolean;
+  readOnly: boolean;
+  icon: ReactNode;
+  iconPosition: "left" | "right";
+  iconLabel: string;
+  hoursInputLabel: string;
+  minutesInputLabel: string;
+  secondsInputLabel: string;
+  amPmInputLabel: string;
+  hoursPlaceholder: string;
+  minutesPlaceholder: string;
+  secondsPlaceholder: string;
+  onFieldChange: (unit: TimePickerUnit, value: string) => void;
+  onFieldFocus: (
+    unit: TimePickerUnit,
+    event: FocusEvent<HTMLInputElement>,
+  ) => void;
+  onFieldBlur: (unit: TimePickerUnit) => void;
+  onFieldKeyDown: (
+    unit: TimePickerUnit,
+    event: KeyboardEvent<HTMLInputElement>,
+  ) => void;
+  onPeriodChange: (period: TimePickerPeriod) => void;
+  onStep: (amount: 1 | -1) => void;
+  onRootBlur: (event: FocusEvent<HTMLDivElement>) => void;
+}
+
+/**
+ * Input Time trigger; 시·분·초 field와 focus 단위 stepper를 렌더한다.
+ * @component
+ * @param {InputTimeTriggerProps} props
+ * @returns {ReactNode} 시간 입력 trigger
+ */
+const InputTimeTrigger = forwardRef<HTMLDivElement, InputTimeTriggerProps>(
+  (
+    {
+      fields,
+      period,
+      activeUnit,
+      priority,
+      size,
+      state,
+      format,
+      withSeconds,
+      disabled,
+      readOnly,
+      icon,
+      iconPosition,
+      iconLabel,
+      hoursInputLabel,
+      minutesInputLabel,
+      secondsInputLabel,
+      amPmInputLabel,
+      hoursPlaceholder,
+      minutesPlaceholder,
+      secondsPlaceholder,
+      onFieldChange,
+      onFieldFocus,
+      onFieldBlur,
+      onFieldKeyDown,
+      onPeriodChange,
+      onStep,
+      onRootBlur,
+      className,
+      ...restProps
+    },
+    ref,
+  ) => {
+    const hoursRef = useRef<HTMLInputElement | null>(null);
+    const onChange =
+      (unit: TimePickerUnit) => (event: ChangeEvent<HTMLInputElement>) => {
+        onFieldChange(unit, event.currentTarget.value);
+      };
+    const onFocus =
+      (unit: TimePickerUnit) => (event: FocusEvent<HTMLInputElement>) => {
+        onFieldFocus(unit, event);
+      };
+    const onBlur = (unit: TimePickerUnit) => () => onFieldBlur(unit);
+    const onKeyDown =
+      (unit: TimePickerUnit) => (event: KeyboardEvent<HTMLInputElement>) => {
+        onFieldKeyDown(unit, event);
+      };
+    const onStepperMouseDown = (event: MouseEvent<HTMLButtonElement>) => {
+      event.preventDefault();
+    };
+    const onInteractiveClick = (event: MouseEvent<HTMLElement>) => {
+      event.stopPropagation();
+    };
+    const onClockClick = () => {
+      hoursRef.current?.focus();
+    };
+
+    return (
+      <div
+        {...restProps}
+        ref={ref}
+        className={clsx("input-time input-time-picker", className)}
+        data-priority={priority}
+        data-size={size}
+        data-state={state}
+        data-readonly={readOnly ? "true" : undefined}
+        data-active-unit={activeUnit ?? undefined}
+        data-icon-position={iconPosition}
+        onBlur={onRootBlur}
+      >
+        <div className="input-time-trigger-input">
+          {iconPosition === "left" ? (
+            <button
+              type="button"
+              className="input-time-icon-button"
+              tabIndex={-1}
+              aria-label={iconLabel}
+              disabled={disabled}
+              onMouseDown={onStepperMouseDown}
+              onClick={onClockClick}
+            >
+              {icon}
+            </button>
+          ) : null}
+          <div className="input-time-fields-group">
+            <input
+              ref={hoursRef}
+              className="input-time-field"
+              type="text"
+              inputMode="numeric"
+              autoComplete="off"
+              maxLength={2}
+              value={fields.hours}
+              placeholder={hoursPlaceholder}
+              aria-label={hoursInputLabel}
+              aria-invalid={state === "error" ? true : undefined}
+              disabled={disabled}
+              readOnly={readOnly}
+              onChange={onChange("hours")}
+              onClick={onInteractiveClick}
+              onFocus={onFocus("hours")}
+              onBlur={onBlur("hours")}
+              onKeyDown={onKeyDown("hours")}
+            />
+            <span aria-hidden="true">:</span>
+            <input
+              className="input-time-field"
+              type="text"
+              inputMode="numeric"
+              autoComplete="off"
+              maxLength={2}
+              value={fields.minutes}
+              placeholder={minutesPlaceholder}
+              aria-label={minutesInputLabel}
+              aria-invalid={state === "error" ? true : undefined}
+              disabled={disabled}
+              readOnly={readOnly}
+              onChange={onChange("minutes")}
+              onClick={onInteractiveClick}
+              onFocus={onFocus("minutes")}
+              onBlur={onBlur("minutes")}
+              onKeyDown={onKeyDown("minutes")}
+            />
+            {withSeconds ? (
+              <>
+                <span aria-hidden="true">:</span>
+                <input
+                  className="input-time-field"
+                  type="text"
+                  inputMode="numeric"
+                  autoComplete="off"
+                  maxLength={2}
+                  value={fields.seconds}
+                  placeholder={secondsPlaceholder}
+                  aria-label={secondsInputLabel}
+                  aria-invalid={state === "error" ? true : undefined}
+                  disabled={disabled}
+                  readOnly={readOnly}
+                  onChange={onChange("seconds")}
+                  onClick={onInteractiveClick}
+                  onFocus={onFocus("seconds")}
+                  onBlur={onBlur("seconds")}
+                  onKeyDown={onKeyDown("seconds")}
+                />
+              </>
+            ) : null}
+            {format === "12h" ? (
+              <select
+                className="input-time-period-field"
+                value={period}
+                aria-label={amPmInputLabel}
+                disabled={disabled}
+                onClick={onInteractiveClick}
+                onChange={event =>
+                  onPeriodChange(
+                    event.currentTarget.value === "pm" ? "pm" : "am",
+                  )
+                }
+              >
+                <option value="am">오전</option>
+                <option value="pm">오후</option>
+              </select>
+            ) : null}
+          </div>
+          {iconPosition === "right" ? (
+            <button
+              type="button"
+              className="input-time-icon-button"
+              tabIndex={-1}
+              aria-label={iconLabel}
+              disabled={disabled}
+              onMouseDown={onStepperMouseDown}
+              onClick={onClockClick}
+            >
+              {icon}
+            </button>
+          ) : null}
+        </div>
+        {activeUnit && !disabled && !readOnly ? (
+          <div className="input-time-stepper" aria-label="시간 값 조절">
+            <button
+              type="button"
+              className="input-time-stepper-button"
+              tabIndex={-1}
+              aria-label={`${activeUnit} 증가`}
+              onMouseDown={onStepperMouseDown}
+              onClick={event => {
+                onInteractiveClick(event);
+                onStep(1);
+              }}
+            >
+              <Calendar.Icon.Chevron.up aria-hidden="true" />
+            </button>
+            <button
+              type="button"
+              className="input-time-stepper-button"
+              tabIndex={-1}
+              aria-label={`${activeUnit} 감소`}
+              onMouseDown={onStepperMouseDown}
+              onClick={event => {
+                onInteractiveClick(event);
+                onStep(-1);
+              }}
+            >
+              <Calendar.Icon.Chevron.down aria-hidden="true" />
+            </button>
+          </div>
+        ) : null}
+      </div>
+    );
+  },
+);
+
+InputTimeTrigger.displayName = "InputTimeTrigger";
+
+export default InputTimeTrigger;