@uniai-fe/uds-primitives 0.1.13 → 0.2.0

package/src/components/input/markup/calendar/Base.tsx

@@ -0,0 +1,329 @@
+"use client";
+
+import {
+  DatePicker,
+  type DatePickerStylesNames,
+  type DatePickerType,
+} from "@mantine/dates";
+import { useUncontrolled } from "@mantine/hooks";
+import type { ChangeEvent, FocusEvent } from "react";
+import { forwardRef, useCallback, useMemo } from "react";
+import { Button } from "../../../button";
+import ChevronLeftIcon from "../../img/calendar/chevron-left.svg";
+import ChevronRightIcon from "../../img/calendar/chevron-right.svg";
+import type {
+  InputCalendarActionButtonProps,
+  InputCalendarProps,
+  InputCalendarValue,
+} from "../../types";
+import { dayjs } from "../../../../init/dayjs";
+
+const DATE_FORMAT = "YYYY-MM-DD";
+type CalendarValue = InputCalendarValue<DatePickerType>;
+
+const DATE_PICKER_CLASS_NAMES = {
+  calendar: "input-calendar-panel",
+  datePickerRoot: "input-calendar-root",
+  calendarHeader: "input-calendar-header",
+  calendarHeaderControl: "input-calendar-header-control",
+  calendarHeaderLevel: "input-calendar-header-level",
+  day: "input-calendar-day",
+  weekday: "input-calendar-weekday",
+  weekdaysRow: "input-calendar-weekdays",
+  monthRow: "input-calendar-month-row",
+  monthCell: "input-calendar-month-cell",
+  month: "input-calendar-month",
+  monthThead: "input-calendar-month-thead",
+  monthTbody: "input-calendar-month-tbody",
+} as Partial<Record<DatePickerStylesNames, string>>;
+
+const DEFAULT_ACTION_LABELS: Record<"clear" | "today" | "apply", string> = {
+  clear: "삭제",
+  today: "오늘",
+  apply: "적용하기",
+};
+
+const createEmptyValue = (type: DatePickerType): CalendarValue => {
+  if (type === "range") {
+    return [null, null];
+  }
+  if (type === "multiple") {
+    return [];
+  }
+  return null;
+};
+
+const serializeValue = (value: CalendarValue, type: DatePickerType) => {
+  if (type === "range" || type === "multiple") {
+    return JSON.stringify(value ?? createEmptyValue(type));
+  }
+  return (value as string) ?? "";
+};
+
+const formatDate = (date: Date | string | null) =>
+  date ? dayjs(date).format(DATE_FORMAT) : null;
+
+const mapValueToPicker = (value: CalendarValue, type: DatePickerType) => {
+  if (type === "range") {
+    const [start, end] = (value ?? [null, null]) as InputCalendarValue<"range">;
+    return [
+      start ? dayjs(start).toDate() : null,
+      end ? dayjs(end).toDate() : null,
+    ];
+  }
+  if (type === "multiple") {
+    return ((value ?? []) as InputCalendarValue<"multiple">).map(entry =>
+      entry ? dayjs(entry).toDate() : null,
+    );
+  }
+  if (typeof value === "string" && value) {
+    return dayjs(value).toDate();
+  }
+  return null;
+};
+
+const parseValueFromPicker = (
+  value: unknown,
+  type: DatePickerType,
+): CalendarValue => {
+  if (type === "range") {
+    const [start, end] = (value as [Date | null, Date | null]) ?? [null, null];
+    return [formatDate(start), formatDate(end)] as CalendarValue;
+  }
+  if (type === "multiple") {
+    return ((value as (Date | null)[]) || []).map(entry =>
+      formatDate(entry),
+    ) as CalendarValue;
+  }
+  return formatDate((value as Date | null) ?? null);
+};
+
+const getTodayValue = (type: DatePickerType): CalendarValue => {
+  const today = dayjs().format(DATE_FORMAT);
+  if (type === "range") {
+    return [today, today];
+  }
+  if (type === "multiple") {
+    return [today];
+  }
+  return today;
+};
+
+const resolveAction = (
+  action: InputCalendarActionButtonProps | undefined,
+  key: keyof typeof DEFAULT_ACTION_LABELS,
+) => {
+  const visible = action?.visible ?? true;
+  if (!visible) return null;
+  return {
+    label: action?.label ?? DEFAULT_ACTION_LABELS[key],
+    disabled: action?.disabled ?? false,
+  };
+};
+
+const InputCalendarBase = forwardRef<
+  HTMLDivElement,
+  InputCalendarProps<DatePickerType>
+>(
+  // DatePickerType 유니언을 명시해 range/multiple 비교 로직 타입 오류를 방지한다.
+  (props, ref) => {
+    const {
+      mode = "date",
+      type = "default",
+      columns = 1,
+      value,
+      defaultValue,
+      onChange,
+      onValueChange,
+      onClear,
+      onToday,
+      onApply,
+      readOnly,
+      disabled,
+      datePickerProps,
+      actions,
+      name,
+      register,
+    } = props;
+
+    const [calendarValue, setCalendarValue] = useUncontrolled<CalendarValue>({
+      value,
+      defaultValue,
+      finalValue: createEmptyValue(type),
+      onChange: changedValue => {
+        onChange?.(changedValue as InputCalendarValue<typeof type>);
+        onValueChange?.(changedValue as InputCalendarValue<typeof type>);
+      },
+    });
+
+    const serializedValue = useMemo(
+      () => serializeValue(calendarValue, type),
+      [calendarValue, type],
+    );
+
+    const emitRegisterChange = useCallback(
+      (nextValue: CalendarValue) => {
+        if (!register?.onChange) {
+          return;
+        }
+
+        const syntheticEvent = {
+          target: {
+            name: register.name,
+            value: serializeValue(nextValue, type),
+          },
+          currentTarget: {
+            name: register.name,
+            value: serializeValue(nextValue, type),
+          },
+        } as unknown as ChangeEvent<HTMLInputElement>;
+
+        register.onChange(syntheticEvent);
+      },
+      [register, type],
+    );
+
+    const updateValue = useCallback(
+      (nextValue: CalendarValue) => {
+        setCalendarValue(nextValue as InputCalendarValue<typeof type>);
+        emitRegisterChange(nextValue);
+      },
+      [emitRegisterChange, setCalendarValue],
+    );
+
+    const handleDateChange = useCallback(
+      (next: unknown) => {
+        const normalized = parseValueFromPicker(next, type);
+        updateValue(normalized);
+      },
+      [type, updateValue],
+    );
+
+    const handleClear = () => {
+      updateValue(createEmptyValue(type));
+      onClear?.();
+    };
+
+    const handleToday = () => {
+      updateValue(getTodayValue(type));
+      onToday?.();
+    };
+
+    const handleApply = () => {
+      onApply?.(calendarValue as InputCalendarValue<typeof type>);
+    };
+
+    const resolvedClear = resolveAction(actions?.clear, "clear");
+    const resolvedToday = resolveAction(actions?.today, "today");
+    const resolvedApply = resolveAction(actions?.apply, "apply");
+
+    const isInteractive = !(readOnly || disabled);
+    const hiddenName = register?.name ?? name;
+
+    const handleHiddenRef = useCallback(
+      (node: HTMLInputElement | null) => {
+        if (register?.ref) {
+          register.ref(node);
+        }
+      },
+      [register],
+    );
+
+    const handleHiddenBlur = (event: FocusEvent<HTMLInputElement>) => {
+      register?.onBlur?.(event);
+    };
+
+    if (mode !== "date" && process.env.NODE_ENV !== "production") {
+      console.warn("InputCalendarBase: 현재 date 모드만 지원합니다.");
+    }
+
+    const singleRangeProps =
+      type === "range"
+        ? {
+            allowSingleDateInRange: true,
+          }
+        : {};
+
+    return (
+      <div
+        ref={ref}
+        className="input-calendar"
+        data-mode={mode}
+        data-type={type}
+        data-columns={columns}
+        data-disabled={disabled ? "true" : undefined}
+      >
+        {hiddenName ? (
+          <input
+            type="hidden"
+            name={hiddenName}
+            value={serializedValue}
+            readOnly
+            ref={handleHiddenRef}
+            onBlur={handleHiddenBlur}
+          />
+        ) : null}
+        <div className="input-calendar-container">
+          <DatePicker
+            classNames={DATE_PICKER_CLASS_NAMES}
+            value={mapValueToPicker(calendarValue, type) as never}
+            onChange={handleDateChange as never}
+            type={type}
+            numberOfColumns={columns}
+            nextIcon={<ChevronRightIcon />}
+            previousIcon={<ChevronLeftIcon />}
+            // Mantine DatePicker에는 disabled prop이 없어 data-disabled로 상단에서 제어한다.
+            {...(datePickerProps ?? {})}
+            {...singleRangeProps}
+          />
+          <div className="input-calendar-footer">
+            <div className="input-calendar-footer-actions">
+              {resolvedClear ? (
+                <Button.Default
+                  fill="outlined"
+                  size="small"
+                  priority="tertiary"
+                  disabled={!isInteractive || resolvedClear.disabled}
+                  onClick={handleClear}
+                  className="input-calendar-action-button"
+                >
+                  {resolvedClear.label}
+                </Button.Default>
+              ) : (
+                <span />
+              )}
+              {resolvedToday ? (
+                <Button.Default
+                  fill="outlined"
+                  size="small"
+                  priority="secondary"
+                  disabled={!isInteractive || resolvedToday.disabled}
+                  onClick={handleToday}
+                  className="input-calendar-action-button"
+                >
+                  {resolvedToday.label}
+                </Button.Default>
+              ) : null}
+            </div>
+            {resolvedApply ? (
+              <Button.Default
+                fill="solid"
+                size="large"
+                priority="primary"
+                disabled={!isInteractive || resolvedApply.disabled}
+                onClick={handleApply}
+                className="input-calendar-apply"
+              >
+                {resolvedApply.label}
+              </Button.Default>
+            ) : null}
+          </div>
+        </div>
+      </div>
+    );
+  },
+);
+
+InputCalendarBase.displayName = "InputCalendarBase";
+
+export { InputCalendarBase };

package/src/components/input/markup/calendar/index.tsx

@@ -0,0 +1,8 @@
+"use client";
+
+import "../../styles/calendar.scss";
+import { InputCalendarBase } from "./Base";
+
+export const InputCalendar = {
+  Base: InputCalendarBase,
+};

package/src/components/input/markup/{text/InputUtilityButton.tsx → foundation/Button.tsx}

@@ -1,17 +1,8 @@
-import type { MouseEvent, ReactNode } from "react";
-import { Button } from "../../../button";
-import type { ButtonPriority, ButtonProps } from "../../../button/types";
-
-export type InputUtilityButtonClickHandler = (
-  event?: MouseEvent<HTMLButtonElement> | MouseEvent<HTMLAnchorElement>,
-) => void;
+"use client";
 
-interface InputUtilityButtonProps {
-  children: ReactNode;
-  priority?: ButtonPriority;
-  disabled?: boolean;
-  onClick?: InputUtilityButtonClickHandler;
-}
+import { Button } from "../../../button";
+import type { ButtonProps } from "../../../button/types";
+import type { InputUtilityButtonProps } from "../../types";
 
 /**
  * 입력 필드 우측에 배치되는 유틸리티 버튼; outlined-small scale을 공통으로 사용한다.
@@ -22,7 +13,7 @@ interface InputUtilityButtonProps {
  * @param {boolean} [props.disabled] disabled 여부
  * @param {InputUtilityButtonClickHandler} [props.onClick] onClick 핸들러
  */
-export function InputUtilityButton({
+export default function InputBaseUtilityButton({
   children,
   priority = "primary",
   disabled,
@@ -34,7 +25,6 @@ export function InputUtilityButton({
 
   return (
     <Button.Default
-      scale="outlined-small"
       fill="outlined"
       size="small"
       priority={priority}

package/src/components/input/markup/foundation/Input.tsx

@@ -0,0 +1,245 @@
+"use client";
+
+import clsx from "clsx";
+import type { PointerEvent as ReactPointerEvent } from "react";
+import {
+  ChangeEvent,
+  FocusEvent,
+  MouseEvent,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+} from "react";
+import type { InputProps } from "../../types";
+
+import InputBaseSideSlot from "./SideSlot";
+import InputBaseUtil from "./Utility";
+
+/**
+ * Native `<input>` 기반 텍스트 필드.
+ * priority/size/state 축과 left/right/clear/status 슬롯을 제공하며
+ * react-hook-form `register` 결과를 그대로 전달받아 내부 ref/onChange/onBlur에 병합한다.
+ *
+ * @component
+ * @param {InputProps} props Input 컴포넌트 공통 props
+ * @param {"primary" | "secondary" | "tertiary"} [props.priority="primary"] 디자인 토큰 우선순위
+ * @param {"small" | "medium" | "large"} [props.size="medium"] 높이/타이포 세트
+ * @param {"default" | "active" | "focused" | "success" | "error" | "disabled"} [props.state="default"] 시각 상태
+ * @param {boolean} [props.block=false] true면 width 100%
+ * @param {React.ReactNode} [props.left] 입력 왼쪽 슬롯(아이콘/텍스트)
+ * @param {React.ReactNode} [props.right] 입력 오른쪽 슬롯
+ * @param {React.ReactNode} [props.clearIcon] 입력값 초기화 아이콘. 지정하지 않으면 기본 Reset 아이콘
+ * @param {React.ReactNode} [props.successIcon] success 상태 아이콘 override
+ * @param {React.ReactNode} [props.errorIcon] error 상태 아이콘 override
+ * @param {string} [props.inputClassName] 실제 `<input>` 요소 className
+ * @param {string} [props.boxClassName] `.input-box` className
+ * @param {boolean} [props.disabled] native disabled
+ * @param {string} [props.id] 외부 id. label htmlFor와 공유된다
+ * @param {string} [props.className] root `.input` className
+ * @param {UseFormRegisterReturn} [props.register] react-hook-form register 반환값
+ * @param {string} [props.name] native name. register 사용 시 자동으로 병합
+ * @param {InputState} [props.data-simulated-state] Storybook 등에서 시각 상태 강제용
+ * @param {(event: ChangeEvent<HTMLInputElement>) => void} [props.onChange] change 핸들러
+ * @param {(event: FocusEvent<HTMLInputElement>) => void} [props.onFocus] focus 핸들러
+ * @param {(event: FocusEvent<HTMLInputElement>) => void} [props.onBlur] blur 핸들러
+ * @param {string | number | readonly string[]} [props.value] 제어형 값
+ * @param {string | number | readonly string[]} [props.defaultValue] 비제어 초기값
+ * @param {string} [props.type="text"] native input type
+ */
+const InputBase = forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      priority = "primary",
+      size = "medium",
+      state: stateProp = "default",
+      block = false,
+      left,
+      right,
+      clear,
+      success,
+      error,
+      inputClassName,
+      boxClassName: boxClassNameProp,
+      disabled,
+      id,
+      className,
+      register,
+      "data-simulated-state": simulatedState,
+      value,
+      defaultValue,
+      name,
+      onChange,
+      onFocus,
+      onBlur,
+      type = "text",
+      ...restProps
+    },
+    ref,
+  ) => {
+    const generatedId = useId();
+    const registerRef = register?.ref;
+    const registerOnChange = register?.onChange;
+    const registerOnBlur = register?.onBlur;
+    const registerName = register?.name;
+    const inputNativeRef = useRef<HTMLInputElement | null>(null);
+    const [isFocused, setIsFocused] = useState(false);
+    const [hasValue, setHasValue] = useState(() => {
+      const initial = value ?? defaultValue;
+      return initial !== undefined && initial !== null
+        ? String(initial).length > 0
+        : false;
+    });
+    useEffect(() => {
+      if (disabled || stateProp === "disabled") setIsFocused(false);
+    }, [disabled, stateProp]);
+
+    useEffect(() => {
+      if (value !== undefined && value !== null)
+        setHasValue(String(value).length > 0);
+    }, [value]);
+
+    const currentState = disabled ? "disabled" : stateProp;
+    const isDisabled =
+      currentState === "disabled" || currentState === "loading";
+    const visualState = !isDisabled && isFocused ? "active" : currentState;
+
+    const setInputRef = useCallback(
+      (node: HTMLInputElement | null) => {
+        inputNativeRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+
+        registerRef?.(node);
+      },
+      [ref, registerRef],
+    );
+
+    const handleFocus = (event: FocusEvent<HTMLInputElement>) => {
+      setIsFocused(true);
+      onFocus?.(event);
+    };
+
+    const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
+      setIsFocused(false);
+      registerOnBlur?.(event);
+      onBlur?.(event);
+    };
+
+    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+      setHasValue(event.currentTarget.value.length > 0);
+      registerOnChange?.(event);
+      onChange?.(event);
+    };
+
+    const dispatchNativeInputEvent = () => {
+      const inputEl = inputNativeRef.current;
+      if (!inputEl) {
+        return;
+      }
+      const nativeSetter = Object.getOwnPropertyDescriptor(
+        HTMLInputElement.prototype,
+        "value",
+      )?.set;
+      nativeSetter?.call(inputEl, "");
+      const changeEvent = new Event("input", { bubbles: true });
+      inputEl.dispatchEvent(changeEvent);
+    };
+
+    const handleClear = (
+      event:
+        | MouseEvent<HTMLButtonElement>
+        | ReactPointerEvent<HTMLButtonElement>,
+    ) => {
+      event.preventDefault();
+      dispatchNativeInputEvent();
+      setHasValue(false);
+      const inputEl = inputNativeRef.current;
+      inputEl?.focus();
+      // 일부 브라우저(특히 로그인 필드)가 focus 직후 자동완성을 재삽입하는 경우가 있어
+      // 다음 프레임에서 한 번 더 초기화해 값을 비워 둔다.
+      requestAnimationFrame(() => {
+        dispatchNativeInputEvent();
+      });
+    };
+
+    const inputName = registerName ?? name;
+
+    return (
+      <div
+        className={clsx(
+          "input",
+          `input-priority-${priority}`,
+          `input-size-${size}`,
+          `input-state-${visualState}`,
+          block && "input-block",
+          className,
+        )}
+        data-priority={priority}
+        data-size={size}
+        data-state={visualState}
+        data-block={block ? "true" : undefined}
+        {...(simulatedState ? { "data-simulated-state": simulatedState } : {})}
+      >
+        <div
+          className={clsx(
+            "input-box",
+            `input-box-priority-${priority}`,
+            `input-box-size-${size}`,
+            `input-box-state-${visualState}`,
+            block && "input-box-block",
+            boxClassNameProp,
+          )}
+          data-slot="box"
+        >
+          <div
+            className="input-field"
+            data-state={visualState}
+            data-priority={priority}
+            data-size={size}
+            data-block={block ? "true" : undefined}
+          >
+            {/* 필드 컨트롤 wrapper; 슬롯과 input 정렬 */}
+            <div className="input-field-control">
+              {left && (
+                <InputBaseSideSlot type="left">{left}</InputBaseSideSlot>
+              )}
+              <input
+                {...restProps}
+                id={id ?? generatedId}
+                ref={setInputRef}
+                className={clsx("input-element", inputClassName)}
+                disabled={isDisabled}
+                aria-invalid={currentState === "error" ? true : undefined}
+                type={type}
+                value={value}
+                defaultValue={defaultValue}
+                name={inputName}
+                onChange={handleChange}
+                onFocus={handleFocus}
+                onBlur={handleBlur}
+              />
+            </div>
+            <InputBaseUtil
+              state={currentState}
+              isDisabled={isDisabled}
+              isFocused={isFocused}
+              hasValue={hasValue}
+              readOnly={restProps.readOnly}
+              onClear={handleClear}
+              {...{ clear, success, error }}
+            >
+              {right}
+            </InputBaseUtil>
+          </div>
+        </div>
+      </div>
+    );
+  },
+);
+
+InputBase.displayName = "TextInput";
+
+export default InputBase;

package/src/components/input/markup/foundation/SideSlot.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import clsx from "clsx";
+
+/**
+ * input; 좌우 슬롯 컴포넌트
+ * @component
+ * @param {Object} props
+ * @param {string} [props.className] 추가 className
+ * @param {React.ReactNode} props.children 슬롯 콘텐츠
+ * @param {"left" | "right"} props.type 슬롯 타입
+ */
+export default function InputBaseSideSlot({
+  className,
+  children,
+  type,
+}: {
+  className?: string;
+  children: React.ReactNode;
+  type: "left" | "right";
+}) {
+  return (
+    <div
+      className={clsx("input-side", `input-side-${type}`, className)}
+      data-slot={type}
+    >
+      {children}
+    </div>
+  );
+}

package/src/components/input/markup/foundation/StatusIcon.tsx

@@ -0,0 +1,21 @@
+import ErrorIcon from "../../img/error.svg";
+import ResetIcon from "../../img/reset.svg";
+import SuccessIcon from "../../img/success.svg";
+
+const DEFAULT_ATTRS: React.SVGAttributes<SVGElement> = {
+  width: 24,
+  height: 24,
+  "aria-hidden": "true",
+};
+
+/**
+ * input; 상태 아이콘
+ * - error: 에러 상태 아이콘
+ * - reset: 리셋 상태 아이콘
+ * - success: 성공 상태 아이콘
+ */
+export const InputStatusIcon: Record<string, React.ReactNode> = {
+  error: <ErrorIcon {...DEFAULT_ATTRS} />,
+  reset: <ResetIcon {...DEFAULT_ATTRS} />,
+  success: <SuccessIcon {...DEFAULT_ATTRS} />,
+};