@uniai-fe/uds-primitives 0.11.0 → 0.12.1

package/src/components/time-picker/utils/time.ts

@@ -0,0 +1,110 @@
+import type {
+  TimePickerFormat,
+  TimePickerParts,
+  TimePickerPeriod,
+  TimePickerUnit,
+} from "../types";
+
+const padTimePart = (value: number) => String(value).padStart(2, "0");
+
+const wrapTimePart = (value: number, limit: number) =>
+  ((value % limit) + limit) % limit;
+
+/**
+ * TimePicker Utility; 24시간 문자열을 시간 값으로 파싱한다.
+ * @param {string} value HH:mm 또는 HH:mm:ss 값
+ * @returns {TimePickerParts | null} 파싱 결과
+ */
+export const parseTimeValue = (value: string): TimePickerParts | null => {
+  const match = /^(\d{2}):(\d{2})(?::(\d{2}))?$/.exec(value);
+  if (!match) {
+    return null;
+  }
+
+  const hours = Number(match[1]);
+  const minutes = Number(match[2]);
+  const seconds = Number(match[3] ?? 0);
+  if (hours > 23 || minutes > 59 || seconds > 59) {
+    return null;
+  }
+
+  return { hours, minutes, seconds };
+};
+
+/**
+ * TimePicker Utility; 시간 값을 24시간 문자열로 직렬화한다.
+ * @param {TimePickerParts} parts 시간 값
+ * @param {boolean} withSeconds 초 포함 여부
+ * @returns {string} HH:mm 또는 HH:mm:ss 값
+ */
+export const serializeTimeValue = (
+  parts: TimePickerParts,
+  withSeconds: boolean,
+) =>
+  [parts.hours, parts.minutes, ...(withSeconds ? [parts.seconds] : [])]
+    .map(padTimePart)
+    .join(":");
+
+/**
+ * TimePicker Utility; 지정 단위만 순환 증감한다.
+ * @param {string} value 시간 값
+ * @param {TimePickerUnit} unit 증감 단위
+ * @param {number} amount 증감량
+ * @param {boolean} withSeconds 초 포함 여부
+ * @returns {string} 증감한 시간 값
+ */
+export const stepTimeValue = (
+  value: string,
+  unit: TimePickerUnit,
+  amount: number,
+  withSeconds: boolean,
+) => {
+  const parts = parseTimeValue(value) ?? {
+    hours: 0,
+    minutes: 0,
+    seconds: 0,
+  };
+  const limit = unit === "hours" ? 24 : 60;
+  return serializeTimeValue(
+    { ...parts, [unit]: wrapTimePart(parts[unit] + amount, limit) },
+    withSeconds,
+  );
+};
+
+/**
+ * TimePicker Utility; 저장 시를 표시 시로 변환한다.
+ * @param {number} hours 24시간 시 값
+ * @param {TimePickerFormat} format 표시 형식
+ * @returns {number} 표시 시 값
+ */
+export const toDisplayHour = (hours: number, format: TimePickerFormat) =>
+  format === "12h" ? hours % 12 || 12 : hours;
+
+/**
+ * TimePicker Utility; 24시간 시 값의 오전·오후를 반환한다.
+ * @param {number} hours 24시간 시 값
+ * @returns {TimePickerPeriod} 오전·오후
+ */
+export const getTimePeriod = (hours: number): TimePickerPeriod =>
+  hours >= 12 ? "pm" : "am";
+
+/**
+ * TimePicker Utility; 오전·오후를 24시간 저장값에 반영한다.
+ * @param {string} value 시간 값
+ * @param {TimePickerPeriod} period 오전·오후
+ * @param {boolean} withSeconds 초 포함 여부
+ * @returns {string} 변경한 시간 값
+ */
+export const setTimePeriod = (
+  value: string,
+  period: TimePickerPeriod,
+  withSeconds: boolean,
+) => {
+  const parts = parseTimeValue(value) ?? {
+    hours: 0,
+    minutes: 0,
+    seconds: 0,
+  };
+  const hours = (parts.hours % 12) + (period === "pm" ? 12 : 0);
+  return serializeTimeValue({ ...parts, hours }, withSeconds);
+};

package/src/index.scss

@@ -22,5 +22,6 @@
 @use "./components/switch";
 @use "./components/tab";
 @use "./components/table";
+@use "./components/time-picker";
 @use "./components/toast";
 @use "./components/tooltip";

package/src/index.tsx

@@ -28,6 +28,7 @@ export * from "./components/spinner";
 export * from "./components/switch";
 export * from "./components/tab";
 export * from "./components/table";
+export * from "./components/time-picker";
 export * from "./components/toast";
 export * from "./components/tooltip";
 export type * from "./types";

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

@@ -1,378 +0,0 @@
-"use client";
-
-import { TimePicker as MantineTimePicker } from "@mantine/dates";
-import { useUncontrolled } from "@mantine/hooks";
-import clsx from "clsx";
-import type { CSSProperties, ChangeEvent, FocusEvent, MouseEvent } from "react";
-import { forwardRef, useCallback, useRef, useState } from "react";
-import type { TimePickerStylesNames } from "@mantine/dates";
-import {
-  getFormFieldWidthAttr,
-  getFormFieldWidthValue,
-} from "../../../form/utils/form-field";
-import type { InputTimePickerProps } from "../../types";
-import ClockIcon from "../../img/clock.svg";
-import ResetIcon from "../../img/reset.svg";
-
-const INPUT_TIME_CLASS_NAMES = {
-  input: "input-time-input",
-  wrapper: "input-time-wrapper",
-  section: "input-time-section",
-  fieldsRoot: "input-time-fields-root",
-  fieldsGroup: "input-time-fields-group",
-  field: "input-time-field",
-  dropdown: "input-time-dropdown",
-  controlsListGroup: "input-time-controls-list-group",
-  controlsList: "input-time-controls-list",
-  control: "input-time-option",
-  presetControl: "input-time-preset-option",
-  presetsGroup: "input-time-presets-group",
-  presetsGroupLabel: "input-time-presets-group-label",
-  scrollarea: "input-time-scrollarea",
-} satisfies Partial<Record<TimePickerStylesNames, string>>;
-
-const INPUT_TIME_DROPDOWN_CONTENT_HEIGHT = 200;
-
-/**
- * Input Time Picker; Mantine TimePicker 기반 UDS adapter.
- * `Input.Time.Picker` public namespace에서 사용하며 Calendar/date 하위에 속하지 않는다.
- * @component
- * @param {InputTimePickerProps} props
- * @param {string} [props.value] 제어형 시간 값
- * @param {string} [props.defaultValue] 비제어 초기 시간 값
- * @param {(value:string)=>void} [props.onChange] 값 변경 핸들러
- * @param {(value:string)=>void} [props.onValueChange] 값 변경 별칭
- * @param {UseFormRegisterReturn} [props.register] react-hook-form register 결과
- * @param {"primary" | "secondary" | "tertiary" | "table"} [props.priority="primary"] input priority
- * @param {"small" | "medium" | "large"} [props.size="medium"] input size
- * @param {"default" | "active" | "focused" | "success" | "error" | "disabled" | "loading"} [props.state="default"] input state
- * @param {"12h" | "24h"} [props.format="24h"] 표시/입력 시간 포맷
- * @param {boolean} [props.withSeconds=false] seconds 입력 노출 여부
- * @param {boolean} [props.withDropdown=false] dropdown 노출 여부
- * @param {boolean} [props.clearable=true] clear 버튼 노출 여부
- * @param {"left" | "right"} [props.iconPosition] clock icon 위치
- */
-const InputTimePicker = forwardRef<HTMLDivElement, InputTimePickerProps>(
-  (
-    {
-      value,
-      defaultValue,
-      onChange,
-      onValueChange,
-      name,
-      form,
-      register,
-      priority = "primary",
-      size = "medium",
-      state: stateProp = "default",
-      block = false,
-      width,
-      className,
-      disabled,
-      readOnly,
-      required,
-      id,
-      format = "24h",
-      withSeconds = false,
-      withDropdown = false,
-      clearable = true,
-      min,
-      max,
-      hoursStep,
-      minutesStep,
-      secondsStep,
-      icon,
-      iconPosition,
-      iconLabel = "시간 선택",
-      clearButtonLabel = "시간 지우기",
-      popoverProps,
-      hiddenInputProps,
-      hoursInputLabel,
-      minutesInputLabel,
-      secondsInputLabel,
-      amPmInputLabel,
-      amPmLabels,
-      hoursPlaceholder,
-      minutesPlaceholder,
-      secondsPlaceholder,
-      pasteSplit,
-      presets,
-      maxDropdownContentHeight,
-      scrollAreaProps,
-      reverseTimeControlsList,
-      onFocus,
-      onBlur,
-    },
-    ref,
-  ) => {
-    const hoursInputRef = useRef<HTMLInputElement | null>(null);
-    const [isFocused, setIsFocused] = useState(false);
-    const [timeValue, setTimeValue] = useUncontrolled<string>({
-      value,
-      defaultValue,
-      finalValue: "",
-      onChange: nextValue => {
-        onChange?.(nextValue);
-        onValueChange?.(nextValue);
-      },
-    });
-
-    const emitRegisterChange = useCallback(
-      (nextValue: string) => {
-        if (!register?.onChange) {
-          return;
-        }
-        const syntheticEvent = {
-          target: {
-            name: register.name,
-            value: nextValue,
-          },
-          currentTarget: {
-            name: register.name,
-            value: nextValue,
-          },
-        } as unknown as ChangeEvent<HTMLInputElement>;
-        register.onChange(syntheticEvent);
-      },
-      [register],
-    );
-
-    const emitRegisterBlur = useCallback(
-      (nextValue: string) => {
-        if (!register?.onBlur) {
-          return;
-        }
-        const syntheticEvent = {
-          target: {
-            name: register.name,
-            value: nextValue,
-          },
-          currentTarget: {
-            name: register.name,
-            value: nextValue,
-          },
-        } as unknown as FocusEvent<HTMLInputElement>;
-        register.onBlur(syntheticEvent);
-      },
-      [register],
-    );
-
-    const currentState = disabled ? "disabled" : stateProp;
-    const isDisabled =
-      currentState === "disabled" || currentState === "loading";
-    const visualState =
-      priority === "tertiary"
-        ? isDisabled
-          ? "disabled"
-          : "default"
-        : !isDisabled && isFocused
-          ? "active"
-          : currentState;
-    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 dropdownContentHeight =
-      maxDropdownContentHeight ?? INPUT_TIME_DROPDOWN_CONTENT_HEIGHT;
-    const containerStyle: CSSProperties | undefined =
-      widthValue !== undefined || maxDropdownContentHeight !== undefined
-        ? ({
-            "--input-time-width": widthValue,
-            "--input-time-dropdown-content-height":
-              maxDropdownContentHeight !== undefined
-                ? `${maxDropdownContentHeight}px`
-                : undefined,
-          } as CSSProperties)
-        : undefined;
-    const resolvedIcon = icon === undefined ? <ClockIcon /> : icon;
-    const showClearButton = Boolean(
-      clearable && timeValue && isFocused && !isDisabled && !readOnly,
-    );
-    const reserveClearSpace = Boolean(clearable && !isDisabled && !readOnly);
-    const rightSectionWidth =
-      resolvedIconPosition === "right"
-        ? reserveClearSpace
-          ? "var(--input-time-section-width-with-clear)"
-          : "var(--input-time-section-width)"
-        : showClearButton
-          ? "var(--input-time-section-width)"
-          : undefined;
-
-    const handleChange = (nextValue: string) => {
-      setTimeValue(nextValue);
-      emitRegisterChange(nextValue);
-    };
-
-    const handleFocus = (event: FocusEvent<HTMLInputElement>) => {
-      setIsFocused(true);
-      onFocus?.(event);
-    };
-
-    const handleBlur = (event: FocusEvent<HTMLDivElement>) => {
-      setIsFocused(false);
-      emitRegisterBlur(timeValue);
-      onBlur?.(event);
-    };
-
-    const handleIconClick = (event: MouseEvent<HTMLButtonElement>) => {
-      event.preventDefault();
-      if (isDisabled || readOnly) {
-        return;
-      }
-      hoursInputRef.current?.focus();
-    };
-
-    const handleClearClick = (event: MouseEvent<HTMLButtonElement>) => {
-      event.preventDefault();
-      if (isDisabled || readOnly) {
-        return;
-      }
-      handleChange("");
-      hoursInputRef.current?.focus();
-    };
-
-    const iconButton = resolvedIcon ? (
-      <button
-        type="button"
-        className="input-time-section-button input-time-icon-button"
-        tabIndex={-1}
-        aria-label={iconLabel}
-        aria-disabled={isDisabled || readOnly ? true : undefined}
-        onMouseDown={event => event.preventDefault()}
-        onClick={handleIconClick}
-      >
-        <span className="input-time-icon-graphic" aria-hidden="true">
-          {resolvedIcon}
-        </span>
-      </button>
-    ) : null;
-
-    const clearButton = showClearButton ? (
-      <button
-        type="button"
-        className="input-time-section-button input-time-clear-button"
-        tabIndex={-1}
-        aria-label={clearButtonLabel}
-        onMouseDown={event => event.preventDefault()}
-        onClick={handleClearClick}
-      >
-        <ResetIcon aria-hidden="true" />
-      </button>
-    ) : null;
-
-    const rightSection =
-      resolvedIconPosition === "right" ? (
-        <span className="input-time-section-group">
-          {clearButton}
-          {iconButton}
-        </span>
-      ) : (
-        clearButton
-      );
-    const resolvedScrollAreaProps = {
-      h: "var(--input-time-dropdown-content-height)",
-      mah: "var(--input-time-dropdown-content-height)",
-      ...scrollAreaProps,
-    };
-
-    return (
-      <div
-        id={id}
-        className={clsx("input-time", className)}
-        data-priority={priority}
-        data-size={size}
-        data-state={visualState}
-        data-readonly={readOnly ? "true" : undefined}
-        data-block={resolvedBlock ? "true" : undefined}
-        data-icon-position={resolvedIconPosition}
-        data-has-value={timeValue ? "true" : "false"}
-        data-clearable={reserveClearSpace ? "true" : undefined}
-        data-has-clear={showClearButton ? "true" : undefined}
-        data-width={widthAttr}
-        style={containerStyle}
-      >
-        <MantineTimePicker
-          ref={ref}
-          className="input-time-picker"
-          classNames={INPUT_TIME_CLASS_NAMES}
-          value={timeValue}
-          onChange={handleChange}
-          name={register ? undefined : name}
-          form={register ? undefined : form}
-          required={required}
-          disabled={isDisabled}
-          readOnly={readOnly}
-          format={format}
-          withSeconds={withSeconds}
-          withDropdown={withDropdown}
-          clearable={false}
-          min={min}
-          max={max}
-          hoursStep={hoursStep}
-          minutesStep={minutesStep}
-          secondsStep={secondsStep}
-          hoursInputLabel={hoursInputLabel}
-          minutesInputLabel={minutesInputLabel}
-          secondsInputLabel={secondsInputLabel}
-          amPmInputLabel={amPmInputLabel}
-          amPmLabels={amPmLabels}
-          hoursPlaceholder={hoursPlaceholder}
-          minutesPlaceholder={minutesPlaceholder}
-          secondsPlaceholder={secondsPlaceholder}
-          pasteSplit={pasteSplit}
-          presets={presets}
-          maxDropdownContentHeight={dropdownContentHeight}
-          scrollAreaProps={resolvedScrollAreaProps}
-          reverseTimeControlsList={reverseTimeControlsList}
-          popoverProps={{
-            width: "target",
-            withinPortal: false,
-            ...popoverProps,
-          }}
-          hiddenInputProps={register ? undefined : hiddenInputProps}
-          size="sm"
-          variant="unstyled"
-          withErrorStyles={false}
-          aria-invalid={visualState === "error" ? true : undefined}
-          leftSection={resolvedIconPosition === "left" ? iconButton : undefined}
-          rightSection={rightSection}
-          leftSectionWidth={
-            resolvedIconPosition === "left"
-              ? "var(--input-time-left-section-width)"
-              : undefined
-          }
-          rightSectionWidth={rightSectionWidth}
-          leftSectionPointerEvents={
-            resolvedIconPosition === "left" ? "auto" : undefined
-          }
-          rightSectionPointerEvents={rightSection ? "auto" : undefined}
-          hoursRef={hoursInputRef}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-        />
-        {register ? (
-          <input
-            {...hiddenInputProps}
-            {...register}
-            type="hidden"
-            name={register.name}
-            form={form ?? hiddenInputProps?.form}
-            value={timeValue}
-          />
-        ) : null}
-      </div>
-    );
-  },
-);
-
-InputTimePicker.displayName = "InputTimePicker";
-
-export default InputTimePicker;