@uniai-fe/uds-primitives 0.11.0 → 0.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-primitives",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "UNIAI Design System; Primitives Components Package",
   "type": "module",
   "private": false,
@@ -87,10 +87,10 @@
     "react-hook-form": "^7.82.0",
     "sass": "^1.101.3",
     "typescript": "6.0.3",
-    "@uniai-fe/next-devkit": "0.4.0",
     "@uniai-fe/eslint-config": "0.4.2",
-    "@uniai-fe/tsconfig": "0.2.0",
+    "@uniai-fe/next-devkit": "0.4.0",
     "@uniai-fe/util-functions": "0.4.3",
+    "@uniai-fe/tsconfig": "0.2.0",
     "@uniai-fe/uds-foundation": "0.5.0"
   },
   "scripts": {

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;