@uniai-fe/uds-primitives 0.1.13 → 0.2.1

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

@@ -1,454 +0,0 @@
-import clsx from "clsx";
-import type { ForwardedRef, PointerEvent as ReactPointerEvent } from "react";
-import {
-  ChangeEvent,
-  FocusEvent,
-  MouseEvent,
-  forwardRef,
-  useCallback,
-  useEffect,
-  useId,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import type { InputProps } from "../../types";
-import {
-  INPUT_AFFIX_CLASSNAME,
-  INPUT_ELEMENT_CLASSNAME,
-  INPUT_FIELD_CLASSNAME,
-  composeInputBoxClassName,
-  composeInputClassName,
-} from "../../utils";
-import ErrorIcon from "../../img/error.svg";
-import ResetIcon from "../../img/reset.svg";
-import SuccessIcon from "../../img/success.svg";
-
-const setForwardedRef = <T,>(ref: ForwardedRef<T>, value: T | null): void => {
-  if (!ref) {
-    return;
-  }
-  if (typeof ref === "function") {
-    ref(value);
-    return;
-  }
-  ref.current = value;
-};
-
-/**
- * Native `<input>` 기반 텍스트 필드.
- * priority/size/state 축과 left/right/clear/status 슬롯, label/helper 피드백 슬롯을 모두 제공하며
- * 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 {React.ReactNode} [props.label] 상단 또는 inline label 콘텐츠
- * @param {React.ReactNode} [props.helper] helper 텍스트 콘텐츠
- * @param {boolean} [props.hideHelper] true면 helper 영역 숨김
- * @param {string} [props.inputClassName] 실제 `<input>` 요소 className
- * @param {string} [props.boxClassName] `.input-box` className
- * @param {ComponentPropsWithoutRef<"label">} [props.labelProps] label 추가 속성
- * @param {ComponentPropsWithoutRef<"div">} [props.helperProps] helper container 속성
- * @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 Text = forwardRef<HTMLInputElement, InputProps>(
-  (
-    {
-      priority = "primary",
-      size = "medium",
-      state: stateProp = "default",
-      block = false,
-      left,
-      right,
-      clear,
-      success,
-      error,
-      label,
-      helper,
-      hideHelper,
-      inputClassName,
-      boxClassName,
-      helperProps,
-      labelProps,
-      disabled,
-      id,
-      className,
-      register,
-      "data-simulated-state": simulatedState,
-      value,
-      defaultValue,
-      name,
-      onChange,
-      onFocus,
-      onBlur,
-      type = "text",
-      ...restProps
-    },
-    forwardedRef,
-  ) => {
-    const generatedId = useId();
-    const registerRef = register?.ref;
-    const registerOnChange = register?.onChange;
-    const registerOnBlur = register?.onBlur;
-    const inputRef = 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;
-    });
-    const [isClearInteracting, setIsClearInteracting] = useState(false);
-
-    useEffect(() => {
-      if (stateProp === "disabled" || disabled) {
-        setIsFocused(false);
-      }
-    }, [disabled, stateProp]);
-
-    useEffect(() => {
-      if (value !== undefined && value !== null) {
-        setHasValue(String(value).length > 0);
-      }
-    }, [value]);
-
-    const resolvedState = useMemo(
-      () => (disabled ? "disabled" : stateProp),
-      [disabled, stateProp],
-    );
-    const visualState = useMemo(() => {
-      if (resolvedState === "disabled") {
-        return "disabled";
-      }
-      if (resolvedState === "loading") {
-        return "loading";
-      }
-      if (resolvedState === "error") {
-        return "error";
-      }
-      return isFocused ? "active" : resolvedState;
-    }, [isFocused, resolvedState]);
-
-    const fieldId = useMemo(
-      () => id ?? labelProps?.htmlFor ?? generatedId,
-      [generatedId, id, labelProps?.htmlFor],
-    );
-    const helperElementId = useMemo(() => {
-      if (!helper || hideHelper) {
-        return undefined;
-      }
-      return helperProps?.id ?? `${fieldId}-helper-text`;
-    }, [fieldId, helperProps?.id, helper, hideHelper]);
-
-    const defaultStatusIcon = useMemo(() => {
-      if (resolvedState === "success") {
-        return <SuccessIcon aria-hidden="true" />;
-      }
-      if (resolvedState === "error") {
-        return <ErrorIcon aria-hidden="true" />;
-      }
-      return null;
-    }, [resolvedState]);
-
-    const statusSlot = useMemo(() => {
-      if (resolvedState === "success") {
-        return success ?? defaultStatusIcon;
-      }
-      if (resolvedState === "error") {
-        return error ?? defaultStatusIcon;
-      }
-      return null;
-    }, [defaultStatusIcon, error, resolvedState, success]);
-
-    const defaultClearIcon = useMemo(() => {
-      // 기존에는 focus 상태에서만 clear 아이콘을 보여줬지만
-      // 값이 있는 모든 상황에서 초기화할 수 있도록 제한을 해제한다.
-      return <ResetIcon aria-hidden="true" />;
-    }, []);
-
-    const effectiveClearIcon = clear ?? defaultClearIcon;
-    const shouldBlockClear =
-      resolvedState === "disabled" ||
-      resolvedState === "loading" ||
-      restProps.readOnly;
-    const showClearIcon = Boolean(
-      effectiveClearIcon &&
-      hasValue &&
-      !shouldBlockClear &&
-      (isFocused || isClearInteracting),
-    );
-    const isDisabled = resolvedState === "disabled";
-    const labelFor = labelProps?.htmlFor ?? fieldId;
-    const containerClassName = useMemo(
-      () =>
-        composeInputClassName({
-          priority,
-          size,
-          state: visualState,
-          block,
-          className,
-        }),
-      [priority, block, className, size, visualState],
-    );
-    const fieldBoxClassName = useMemo(
-      () =>
-        composeInputBoxClassName({
-          priority,
-          size,
-          state: visualState,
-          block,
-          className: boxClassName,
-        }),
-      [priority, block, size, visualState, boxClassName],
-    );
-    const helperClassName = useMemo(
-      () => clsx("input-helper-text", helperProps?.className),
-      [helperProps?.className],
-    );
-    const shouldRenderInlineLabel = priority === "tertiary" && Boolean(label);
-    const labelClassName = useMemo(
-      () =>
-        clsx(
-          "input-label",
-          shouldRenderInlineLabel && "input-label--visually-hidden",
-          labelProps?.className,
-        ),
-      [labelProps?.className, shouldRenderInlineLabel],
-    );
-    const inputElementClassName = useMemo(
-      () => clsx(INPUT_ELEMENT_CLASSNAME, inputClassName),
-      [inputClassName],
-    );
-
-    const mergedRef = useCallback(
-      (node: HTMLInputElement | null) => {
-        inputRef.current = node;
-        setForwardedRef(forwardedRef, node);
-        registerRef?.(node);
-      },
-      [forwardedRef, registerRef],
-    );
-
-    const handleFocus = useCallback(
-      (event: FocusEvent<HTMLInputElement>) => {
-        setIsFocused(true);
-        onFocus?.(event);
-      },
-      [onFocus],
-    );
-
-    const handleBlur = useCallback(
-      (event: FocusEvent<HTMLInputElement>) => {
-        setIsFocused(false);
-        registerOnBlur?.(event);
-        onBlur?.(event);
-      },
-      [onBlur, registerOnBlur],
-    );
-
-    const handleChange = useCallback(
-      (event: ChangeEvent<HTMLInputElement>) => {
-        setHasValue(event.currentTarget.value.length > 0);
-        registerOnChange?.(event);
-        onChange?.(event);
-      },
-      [onChange, registerOnChange],
-    );
-
-    const dispatchNativeInputEvent = useCallback(() => {
-      const inputEl = inputRef.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 = useCallback(
-      (
-        event:
-          | MouseEvent<HTMLButtonElement>
-          | ReactPointerEvent<HTMLButtonElement>,
-      ) => {
-        event.preventDefault();
-        dispatchNativeInputEvent();
-        setHasValue(false);
-        setIsClearInteracting(false);
-        const inputEl = inputRef.current;
-        inputEl?.focus();
-        // 일부 브라우저(특히 로그인 필드)가 focus 직후 자동완성을 재삽입하는 경우가 있어
-        // 다음 프레임에서 한 번 더 초기화해 값을 비워 둔다.
-        requestAnimationFrame(() => {
-          dispatchNativeInputEvent();
-        });
-      },
-      [dispatchNativeInputEvent],
-    );
-
-    const handleClearPointerDown = useCallback(() => {
-      setIsClearInteracting(true);
-    }, []);
-
-    const handleClearPointerLeave = useCallback(() => {
-      setIsClearInteracting(false);
-    }, []);
-
-    const handleClearPointerUp = useCallback(
-      (event: ReactPointerEvent<HTMLButtonElement>) => {
-        setIsClearInteracting(false);
-        // pointerup 이벤트에서 onClick이 호출되지 않는 환경(모바일) 대응
-        handleClear(event);
-      },
-      [handleClear],
-    );
-
-    const inputName = register?.name ?? name;
-
-    return (
-      <div
-        className={containerClassName}
-        data-priority={priority}
-        data-size={size}
-        data-state={visualState}
-        data-block={block ? "true" : undefined}
-        data-simulated-state={simulatedState}
-      >
-        {label ? (
-          <label
-            {...labelProps}
-            className={labelClassName}
-            htmlFor={labelFor}
-            data-slot="label"
-            data-priority={priority}
-            data-state={visualState}
-          >
-            {label}
-          </label>
-        ) : null}
-        <div className={fieldBoxClassName} data-slot="box">
-          <div
-            className={INPUT_FIELD_CLASSNAME}
-            data-state={visualState}
-            data-priority={priority}
-            data-size={size}
-            data-block={block ? "true" : undefined}
-          >
-            <div className="input-field__control">
-              {shouldRenderInlineLabel ? (
-                <div
-                  className="input-inline-label"
-                  aria-hidden="true"
-                  data-slot="inline-label"
-                >
-                  {label}
-                </div>
-              ) : null}
-              {left ? (
-                <div
-                  className={`${INPUT_AFFIX_CLASSNAME} ${INPUT_AFFIX_CLASSNAME}--left`}
-                  data-slot="left"
-                >
-                  {left}
-                </div>
-              ) : null}
-              <input
-                {...restProps}
-                id={fieldId}
-                ref={mergedRef}
-                className={inputElementClassName}
-                disabled={isDisabled}
-                aria-invalid={resolvedState === "error" ? true : undefined}
-                aria-describedby={helperElementId}
-                type={type}
-                value={value}
-                defaultValue={defaultValue}
-                name={inputName}
-                onChange={handleChange}
-                onFocus={handleFocus}
-                onBlur={handleBlur}
-              />
-            </div>
-            {right || showClearIcon || statusSlot ? (
-              <div className="input-field__utilities">
-                {right ? (
-                  <div
-                    className={`${INPUT_AFFIX_CLASSNAME} ${INPUT_AFFIX_CLASSNAME}--right`}
-                    data-slot="right"
-                  >
-                    {right}
-                  </div>
-                ) : null}
-                {showClearIcon ? (
-                  <button
-                    type="button"
-                    className={`${INPUT_AFFIX_CLASSNAME} ${INPUT_AFFIX_CLASSNAME}--clear`}
-                    data-slot="clear"
-                    data-visible="true"
-                    onClick={handleClear}
-                    onPointerDown={handleClearPointerDown}
-                    onPointerLeave={handleClearPointerLeave}
-                    onPointerUp={handleClearPointerUp}
-                    onPointerCancel={handleClearPointerLeave}
-                    aria-label="입력 내용 지우기"
-                  >
-                    {effectiveClearIcon}
-                  </button>
-                ) : null}
-                {statusSlot ? (
-                  <div
-                    className={`${INPUT_AFFIX_CLASSNAME} ${INPUT_AFFIX_CLASSNAME}--status`}
-                    data-slot="status"
-                    data-state={resolvedState}
-                  >
-                    {statusSlot}
-                  </div>
-                ) : null}
-              </div>
-            ) : null}
-          </div>
-        </div>
-        {helper && !hideHelper ? (
-          <div
-            {...helperProps}
-            className={helperClassName}
-            id={helperElementId}
-            data-slot="helper"
-            data-priority={priority}
-            data-state={visualState}
-          >
-            {helper}
-          </div>
-        ) : null}
-      </div>
-    );
-  },
-);
-
-Text.displayName = "TextInput";
-
-export { Text };

package/src/components/input/utils/index.ts

@@ -1,60 +0,0 @@
-import clsx from "clsx";
-import type { InputClassNameOptions } from "../types";
-
-const INPUT_CLASSNAME = "input";
-const INPUT_BOX_CLASSNAME = "input-box";
-const INPUT_FIELD_CLASSNAME = "input-field";
-const INPUT_ELEMENT_CLASSNAME = "input-element";
-const INPUT_AFFIX_CLASSNAME = "input-affix";
-
-/**
- * container `.input` element className을 조립한다.
- */
-const composeInputClassName = ({
-  priority,
-  size,
-  state,
-  block,
-  className,
-}: InputClassNameOptions) =>
-  clsx(
-    INPUT_CLASSNAME,
-    `${INPUT_CLASSNAME}--priority-${priority}`,
-    `${INPUT_CLASSNAME}--size-${size}`,
-    {
-      [`${INPUT_CLASSNAME}--state-${state}`]: state !== "default",
-      [`${INPUT_CLASSNAME}--block`]: block,
-    },
-    className,
-  );
-
-/**
- * 박스(wrapper) `.input-box` className을 조립한다.
- */
-const composeInputBoxClassName = ({
-  priority,
-  size,
-  state,
-  block,
-  className,
-}: InputClassNameOptions) =>
-  clsx(
-    INPUT_BOX_CLASSNAME,
-    `${INPUT_BOX_CLASSNAME}--priority-${priority}`,
-    `${INPUT_BOX_CLASSNAME}--size-${size}`,
-    {
-      [`${INPUT_BOX_CLASSNAME}--state-${state}`]: state !== "default",
-      [`${INPUT_BOX_CLASSNAME}--block`]: block,
-    },
-    className,
-  );
-
-export {
-  INPUT_AFFIX_CLASSNAME,
-  INPUT_BOX_CLASSNAME,
-  INPUT_CLASSNAME,
-  INPUT_ELEMENT_CLASSNAME,
-  INPUT_FIELD_CLASSNAME,
-  composeInputBoxClassName,
-  composeInputClassName,
-};