@weing-dev/ui-kit-primitive 0.0.0

package/src/components/Form/Dropdown/Dropdown.tsx

@@ -0,0 +1,404 @@
+/* eslint-disable react-refresh/only-export-components */
+"use client";
+import React from "react";
+import cn from "classnames/bind";
+import {
+  DropdownContext,
+  DropdownProviderProps,
+  initialState,
+} from "./Dropdown.context";
+import styles from "./Dropdown.module.scss";
+import { Icon } from "../../../components/Icon/Icon";
+import useDropdownColors from "./Dropdown.colors";
+import { usePopper } from "react-popper";
+
+const cx = cn.bind(styles);
+
+type AsProps = {
+  isEmpty: boolean;
+  placeholder?: string;
+  selectedValue: string;
+  open?: boolean;
+  options?: { value: string; label: string }[];
+  variant?: "outlined" | "contained" | "text";
+  size?: "small" | "medium" | "large";
+  colorStyle: React.CSSProperties;
+  iconColorStyle: (position: "left" | "right") => React.CSSProperties;
+  handleTriggerClick?: () => void;
+};
+
+type TriggerProps = React.PropsWithChildren<{
+  as?: (props: AsProps) => React.ReactNode;
+  className?: string;
+  variant?: "outlined" | "contained" | "text";
+  size?: "small" | "medium" | "large";
+  leftIcon?: React.ComponentProps<typeof Icon> | null;
+  rightIcon?: React.ComponentProps<typeof Icon> | null;
+}>;
+
+const Trigger = (props: TriggerProps) => {
+  const {
+    as,
+    className,
+    variant = "outlined",
+    size = "medium",
+    leftIcon = { name: "SwapVert", size: 20 },
+    rightIcon = { name: "ExpandMore", size: 20 },
+  } = props;
+  const {
+    value,
+    placeholder,
+    open,
+    options,
+    id,
+    disabled,
+    error,
+    accentType,
+    handleTriggerClick,
+  } = React.use(DropdownContext);
+
+  const colors = useDropdownColors();
+
+  const isEmpty = Array.isArray(value) ? value.length === 0 : !value;
+
+  const colorStatus = React.useMemo(() => {
+    if (disabled) return "disabled";
+    if (error) return "error";
+    if (open) return "focused";
+    if (!isEmpty) return "selected";
+    return "inactive";
+  }, [disabled, error, open, isEmpty]);
+
+  const colorStyle = React.useMemo(() => {
+    const result = {
+      "--background-color": colors[variant][colorStatus].backgroundColor,
+      "--color": colors[variant][colorStatus].color,
+      "--border-color": colors[variant][colorStatus].borderColor,
+    };
+
+    const textColorControl = () => {
+      if (!isEmpty) {
+        result["--color"] = colors[variant].selected.color;
+      } else {
+        result["--color"] = colors[variant].inactive.color;
+      }
+
+      if (open) {
+        result["--color"] = colors[variant].focused.color;
+      }
+
+      if (disabled) {
+        result["--color"] = colors[variant].disabled.color;
+      }
+    };
+
+    const borderColorControl = () => {
+      if (!isEmpty) {
+        result["--border-color"] = colors[variant].selected.borderColor;
+      }
+
+      if (open) {
+        result["--border-color"] = colors[variant].focused.borderColor;
+      }
+
+      if (disabled) {
+        result["--border-color"] = colors[variant].disabled.borderColor;
+      }
+    };
+
+    if (colorStatus === "error") {
+      switch (accentType) {
+        case "in":
+          result["--color"] = colors[variant].error.color;
+          borderColorControl();
+          break;
+        case "out":
+          result["--border-color"] = colors[variant].error.color;
+          textColorControl();
+          break;
+        case "all":
+          result["--color"] = colors[variant].error.color;
+          result["--border-color"] = colors[variant].error.color;
+          break;
+      }
+    }
+
+    return result;
+  }, [colors, variant, colorStatus, open, isEmpty, disabled, accentType]);
+
+  const iconColorStyle = React.useCallback(
+    (position: "left" | "right") => {
+      const iconProps = position === "left" ? leftIcon : rightIcon;
+      const result = {
+        "--icon-color":
+          iconProps?.color ?? colors[variant][colorStatus].iconColor,
+        ...iconProps?.style,
+      };
+
+      if (!isEmpty) {
+        result["--icon-color"] =
+          iconProps?.color ?? colors[variant].selected.iconColor;
+      }
+
+      if (open) {
+        result["--icon-color"] =
+          iconProps?.color ?? colors[variant].focused.iconColor;
+      }
+
+      if (disabled) {
+        result["--icon-color"] =
+          iconProps?.color ?? colors[variant].disabled.iconColor;
+      }
+
+      return result;
+    },
+    [colors, variant, colorStatus, open, isEmpty, disabled, leftIcon, rightIcon]
+  );
+
+  const selectedValue = Array.isArray(value)
+    ? options
+      ? options
+          .filter((option) => value.includes(option.value))
+          .map((option) => option.label)
+          .join(", ")
+      : value.join(", ")
+    : options
+    ? options.find((option) => option.value === value)?.label ?? ""
+    : value;
+
+  return as ? (
+    as({
+      isEmpty,
+      placeholder,
+      selectedValue,
+      open,
+      options,
+      variant,
+      size,
+      colorStyle,
+      iconColorStyle,
+      handleTriggerClick,
+    })
+  ) : (
+    <div
+      className={cx("DropdownTrigger", className, variant, size)}
+      onClick={handleTriggerClick}
+      data-name={"trigger"}
+      id={id}
+      style={colorStyle}
+    >
+      {leftIcon && (
+        <Icon
+          {...leftIcon}
+          className={cx("LeftIcon", leftIcon.className)}
+          style={iconColorStyle("left")}
+        />
+      )}
+      <span className={cx("DropdownTriggerText")}>
+        {isEmpty ? placeholder : selectedValue}
+      </span>
+      {rightIcon && (
+        <Icon
+          {...rightIcon}
+          className={cx("RightIcon", rightIcon.className, {
+            open,
+          })}
+          style={iconColorStyle("right")}
+        />
+      )}
+    </div>
+  );
+};
+
+type MenuRenderProps = {
+  open: boolean;
+  id?: string;
+  variant?: "shadow" | "line";
+  size?: "small" | "medium";
+  handleTriggerClick?: () => void;
+};
+
+type MenuProps = {
+  className?: string;
+  variant?: "shadow" | "line";
+  size?: "small" | "medium";
+  children?: React.ReactNode | ((props: MenuRenderProps) => React.ReactNode);
+  boundaryPadding?: number;
+};
+
+const Menu = (props: MenuProps) => {
+  const {
+    className,
+    children,
+    variant = "shadow",
+    size = "medium",
+    boundaryPadding = 8,
+  } = props;
+  const { open, id, referenceState, popperState, handleTriggerClick } =
+    React.use(DropdownContext);
+
+  const [referenceElement] = referenceState ?? [];
+  const [popperElement, setPopperElement] = popperState ?? [];
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: "bottom",
+    modifiers: [
+      { name: "offset", options: { offset: [0, 4] } },
+      {
+        name: "preventOverflow",
+        options: {
+          padding: boundaryPadding,
+        },
+      },
+    ],
+  });
+
+  React.useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      const target = e.target;
+      const _menu = popperElement;
+      if (target instanceof Element) {
+        if (_menu && !_menu.contains(target)) {
+          if (target.closest("[data-name='trigger']")?.id === id) return;
+          handleTriggerClick?.();
+        }
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [handleTriggerClick, popperElement, id]);
+  if (!open) return null;
+
+  return (
+    <ul
+      {...attributes.popper}
+      ref={setPopperElement}
+      className={cx("DropdownMenu", variant, className)}
+      style={styles.popper}
+    >
+      {typeof children === "function"
+        ? children({ open, id, variant, size, handleTriggerClick })
+        : React.Children.map(children, (child) => {
+            if (React.isValidElement(child)) {
+              return React.cloneElement(child, {
+                ...(child.props instanceof Object
+                  ? { ...child.props, variant, size }
+                  : {}),
+              });
+            }
+            return child;
+          })}
+    </ul>
+  );
+};
+
+type ItemProps = React.PropsWithChildren<{
+  className?: string;
+  value: string;
+  label?: string;
+  variant?: "shadow" | "line";
+  size?: "small" | "medium";
+}>;
+
+const Item = (props: ItemProps) => {
+  const {
+    children,
+    className,
+    value,
+    label,
+    variant = "shadow",
+    size = "medium",
+  } = props;
+  const context = React.use(DropdownContext);
+  const { onChange } = context;
+
+  const isArray = Array.isArray(context.value);
+
+  const handleClick = React.useCallback(() => {
+    const selected = Array.isArray(context.value)
+      ? context.value.includes(value)
+        ? context.value.filter((v) => v !== value)
+        : [...context.value, value]
+      : value;
+
+    onChange(selected);
+    if (!isArray) {
+      context.handleTriggerClick?.();
+    }
+  }, [context, isArray, onChange, value]);
+
+  const selected = Array.isArray(context.value)
+    ? context.value.includes(value)
+    : context.value === value;
+
+  const disabled = Array.isArray(context.value)
+    ? false
+    : context.value === value;
+
+  return (
+    <li
+      className={cx("DropdownItem", variant, size, className, {
+        selected,
+        disabled,
+      })}
+      onClick={handleClick}
+    >
+      {children ?? label}
+    </li>
+  );
+};
+
+const Root = (props: DropdownProviderProps) => {
+  const { children, className } = props;
+
+  const id = React.useId();
+
+  const [open, setOpen] = React.useState(false);
+
+  const referenceState = React.useState<HTMLElement | null>(null);
+  const [, referenceElement] = referenceState;
+  const popperState = React.useState<HTMLUListElement | null>(null);
+
+  const handleTriggerClick = React.useCallback(() => {
+    if (props.disabled) return;
+    setOpen((prev) => !prev);
+  }, [props.disabled]);
+
+  const contextValue = React.useMemo(
+    () => ({
+      ...initialState,
+      ...props,
+      id,
+      open,
+      referenceState,
+      popperState,
+      handleTriggerClick,
+    }),
+    [open, props, referenceState, popperState, id, handleTriggerClick]
+  );
+
+  return (
+    <DropdownContext value={contextValue}>
+      <div ref={referenceElement} className={cx("DropdownRoot", className)}>
+        {children}
+      </div>
+    </DropdownContext>
+  );
+};
+
+interface IDropdown {
+  Trigger: typeof Trigger;
+  Menu: typeof Menu;
+  Item: typeof Item;
+  Root: typeof Root;
+}
+
+export default {
+  Trigger,
+  Menu,
+  Item,
+  Root,
+} as IDropdown;

package/src/components/Form/OTPInput/OTPInput.context.tsx

@@ -0,0 +1,104 @@
+import React from "react";
+
+type OTPInputContextType = {
+  otp: string[];
+  inputRefs?: React.RefObject<HTMLInputElement[]>;
+  handleChange: (
+    index: number,
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => void;
+  handleKeyDown: (
+    index: number,
+    event: React.KeyboardEvent<HTMLInputElement>
+  ) => void;
+};
+
+const initialState: OTPInputContextType = {
+  /** 값 */
+  otp: [],
+  handleChange: () => {},
+  handleKeyDown: () => {},
+};
+
+export const OTPInputContext =
+  React.createContext<OTPInputContextType>(initialState);
+
+export type OTPInputProviderProps = React.PropsWithChildren<{
+  length: number;
+  onChange: (otp: string) => void;
+  value?: string;
+  name?: string;
+}>;
+
+export const OTPInputProvider = (props: OTPInputProviderProps) => {
+  const { length, onChange, children, value } = props;
+
+  const emptyLength = length - (value?.length || 0);
+
+  const [otp, setOtp] = React.useState<string[]>(
+    (value?.split("") || []).concat(
+      Array(emptyLength > 0 ? emptyLength : 0).fill("")
+    )
+  );
+  const inputRefs = React.useRef<HTMLInputElement[]>([]);
+
+  const setOtpValue = (index: number, value: string) => {
+    const newOtp = [...otp];
+    newOtp[index] = value;
+    setOtp(newOtp);
+    onChange(newOtp.join(""));
+  };
+
+  const handleKeyDown = (
+    index: number,
+    event: React.KeyboardEvent<HTMLInputElement>
+  ) => {
+    if (event.key === "Backspace") {
+      // 현재 필드가 비어 있으면 이전 필드로 이동
+      if (otp[index] === "") {
+        if (index > 0) {
+          inputRefs.current[index - 1].focus();
+          setOtpValue(index - 1, ""); // 이전 필드 값 삭제
+        }
+      } else {
+        // 현재 필드의 값을 삭제
+        setOtpValue(index, "");
+      }
+    }
+  };
+
+  const handleChange = (
+    index: number,
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const value = event.target.value;
+
+    // 숫자가 입력되었을 경우만 처리 (빈값 허용)
+    if (/^\d$/.test(value)) {
+      // 숫자가 들어오면 해당 인덱스의 값을 새로 입력된 값으로 대체
+      setOtpValue(index, value);
+
+      // 입력 후, 다음 필드로 포커스 이동
+      if (index < length - 1) {
+        inputRefs.current[index + 1].focus();
+      }
+    } else {
+      const newVal =
+        value.split(otp[index]).filter((v) => !!v)[0] || otp[index];
+      event.target.value = newVal;
+      setOtpValue(index, newVal);
+
+      if (index < length - 1) {
+        inputRefs.current[index + 1].focus();
+      }
+    }
+  };
+
+  return (
+    <OTPInputContext.Provider
+      value={{ otp, inputRefs, handleChange, handleKeyDown }}
+    >
+      {children}
+    </OTPInputContext.Provider>
+  );
+};

package/src/components/Form/OTPInput/OTPInput.module.scss

@@ -0,0 +1,22 @@
+.OTPInputWrapper {
+  border-bottom: 1px solid #cccccc;
+
+  input {
+    @include bodyRegularLarge;
+    text-align: center;
+    border: none;
+    outline: none;
+    background: none;
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+  }
+}
+
+.OTPInputList {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+}

package/src/components/Form/OTPInput/OTPInput.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import {
+  OTPInputContext,
+  OTPInputProvider,
+  OTPInputProviderProps,
+} from "./OTPInput.context";
+import styles from "./OTPInput.module.scss";
+import cn from "classnames/bind";
+
+const cx = cn.bind(styles);
+
+// OTPInput Field 컴포넌트 타입 정의
+interface InputProps {
+  index?: number;
+  className?: string;
+}
+
+// OTPInput Field 컴포넌트
+const Input = ({ index = 0, className }: InputProps) => {
+  const { otp, inputRefs, handleChange, handleKeyDown } =
+    React.useContext(OTPInputContext);
+
+  return (
+    <div className={cx("OTPInputWrapper", className)}>
+      <input
+        ref={(el) => {
+          if (el && inputRefs?.current) inputRefs.current[index] = el;
+        }}
+        type="number" // 숫자 키패드를 띄우기 위해 number 타입 사용
+        inputMode="numeric" // 모바일에서 숫자 키패드 보장
+        min={0} // 0 이상
+        max={9} // 9 이하
+        step={1} // 소수점 방지
+        value={otp[index]} // 제어된 컴포넌트로 상태를 반영
+        onKeyDown={(e) => handleKeyDown(index, e)}
+        onChange={(e) => handleChange(index, e)}
+      />
+    </div>
+  );
+};
+
+type RootProps = OTPInputProviderProps & {
+  className?: string;
+  input?: React.ReactNode;
+};
+
+const Root = (props: RootProps) => {
+  const { length, onChange, input = Input, value, className } = props;
+
+  return (
+    <OTPInputProvider length={length} onChange={onChange} value={value}>
+      <div className={cx("OTPInputList", className)}>
+        {Array.from({ length }, (_, index) =>
+          React.cloneElement(input as React.ReactElement<any>, {
+            index,
+            key: index,
+          })
+        )}
+      </div>
+    </OTPInputProvider>
+  );
+};
+
+export default {
+  Root,
+  Input,
+};

package/src/components/Form/Radio/Radio.colors.tsx

@@ -0,0 +1,42 @@
+import { colorThemes as colorSet } from "@/styles/color2";
+
+const useRadioColors = () => {
+  const selected = {
+    backgroundColor: "transparent",
+    color: `var(--textPrimary, ${colorSet.light.textPrimary})`,
+    borderColor: colorSet.primary.pMain,
+    hover: {
+      backgroundColor: "transparent",
+      color: `var(--textPrimary, ${colorSet.light.textPrimary})`,
+      borderColor: colorSet.primary.pDark,
+    },
+    disabled: {
+      backgroundColor: "transparent",
+      color: `var(--textDisabled, ${colorSet.light.textDisabled})`,
+      borderColor: `var(--actionDisabled, ${colorSet.light.actionDisabled})`,
+    },
+  };
+
+  const unselected = {
+    backgroundColor: "transparent",
+    color: `var(--textSecondary, ${colorSet.light.textSecondary})`,
+    borderColor: `var(--textTertiary, ${colorSet.light.textTertiary})`,
+    hover: {
+      backgroundColor: "transparent",
+      color: `var(--textSecondary, ${colorSet.light.textSecondary})`,
+      borderColor: `var(--textSecondary, ${colorSet.light.textSecondary})`,
+    },
+    disabled: {
+      backgroundColor: "transparent",
+      color: `var(--textDisabled, ${colorSet.light.textDisabled})`,
+      borderColor: `var(--actionDisabled, ${colorSet.light.actionDisabled})`,
+    },
+  };
+
+  return {
+    selected,
+    unselected,
+  };
+};
+
+export default useRadioColors;

package/src/components/Form/Radio/Radio.context.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+
+type InputStatus = "error" | "warning" | "success" | undefined;
+
+type RadioContextType = {
+  /** input value */
+  value?: string;
+  /** checked */
+  checked: boolean;
+  /** onChange */
+  onChange?: (...args: any) => void;
+  /** name */
+  name?: string;
+  /** Disabled */
+  disabled?: boolean;
+  /** readOnly */
+  readOnly?: boolean;
+  /** status */
+  status?: InputStatus;
+  /** ID */
+  id: string;
+};
+
+export const initialState: RadioContextType = {
+  value: "",
+  checked: false,
+  onChange: () => {},
+  name: "",
+  disabled: false,
+  readOnly: false,
+  id: "",
+};
+
+export const RadioContext = React.createContext<RadioContextType>(initialState);
+
+export type RadioProviderProps = React.PropsWithChildren<
+  Partial<Omit<RadioContextType, "">>
+> & {
+  className?: string;
+};