@weing-dev/ui-kit-primitive 0.0.0 → 0.0.2

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

@@ -1,404 +0,0 @@
-/* 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

@@ -1,104 +0,0 @@
-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

@@ -1,22 +0,0 @@
-.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

@@ -1,67 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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;
-};