@weing-dev/ui-kit-primitive 0.0.1 → 0.0.3

package/src/components/Comment/Comment.tsx

@@ -1,105 +0,0 @@
-import React from "react";
-import styles from "./Comment.module.scss";
-import cn from "classnames/bind";
-import { Icon } from "../Icon/Icon";
-
-const cx = cn.bind(styles);
-
-export const Status = [
-  "error",
-  "warning",
-  "success",
-  "info",
-  "default",
-] as const;
-
-type CommentProps = React.PropsWithChildren<{
-  className?: string;
-  /** 상태 */
-  status?: (typeof Status)[number];
-  /** 경고 색상 */
-  warningColor?: string;
-  /** 에러 색상 */
-  errorColor?: string;
-  /** 성공 색상 */
-  successColor?: string;
-  /** 기본 색상 */
-  defaultColor?: string;
-  /** 정보 색상 */
-  infoColor?: string;
-  /** 아이콘 크기 */
-  size?: number;
-}>;
-
-const Comment = (props: CommentProps) => {
-  const {
-    children,
-    status,
-    errorColor = "var(--Simentic-Error, #B3261E)",
-    successColor = "var(--Simentic-Success, #00B54A)",
-    warningColor = "var(--Simentic-Warning, #E9A802)",
-    defaultColor = "var(--Simentic-On-Surface-Variant, #505254)",
-    infoColor = "var(--Simentic-Info, #0076FF)",
-    size = 14,
-  } = props;
-
-  const IconComponent = React.useMemo(() => {
-    return ((status) => {
-      switch (status) {
-        case "error":
-          return <Icon name={"ErrorFilled"} size={size} color={errorColor} />;
-        case "warning":
-          return <Icon name={"Warning"} size={size} color={warningColor} />;
-        case "success":
-          return <Icon name={"Check"} size={size} color={successColor} />;
-        case "info":
-          return <Icon name={"ErrorFilled"} size={size} color={infoColor} />;
-        case "default":
-          return <Icon name={"Error"} size={size} color={defaultColor} />;
-        default:
-          return null;
-      }
-    })(status);
-  }, [
-    status,
-    size,
-    errorColor,
-    warningColor,
-    successColor,
-    infoColor,
-    defaultColor,
-  ]);
-
-  const color = React.useMemo(() => {
-    switch (status) {
-      case "error":
-        return errorColor;
-      case "warning":
-        return warningColor;
-      case "success":
-        return successColor;
-      case "info":
-        return infoColor;
-      case "default":
-        return defaultColor;
-      default:
-        return undefined;
-    }
-  }, [defaultColor, errorColor, infoColor, status, successColor, warningColor]);
-
-  return (
-    <div className={cx("CommentWrapper", status)}>
-      {IconComponent}
-      <span
-        className={cx("Caption")}
-        style={{
-          color,
-        }}
-      >
-        {children}
-      </span>
-    </div>
-  );
-};
-
-export default Comment;

package/src/components/Dialog/Dialog.tsx

@@ -1,12 +0,0 @@
-// import styles from "./Dialog.module.scss";
-// import cn from "classnames/bind";
-
-// const cx = cn.bind(styles);
-
-// const Root = () => {
-//   return <div className={cx("root")}>Dialog</div>;
-// };
-
-// interface IDialog {}
-
-export default {};

package/src/components/Divider/Divider.module.scss

@@ -1,12 +0,0 @@
-.Divider {
-  width: 100%;
-  background: var(--Gray-Gray95, #e8e8e9);
-
-  &.small {
-    height: 1px;
-  }
-
-  &.large {
-    height: 8px;
-  }
-}

package/src/components/Divider/Divider.tsx

@@ -1,33 +0,0 @@
-import cn from "classnames/bind";
-import styles from "./Divider.module.scss";
-
-const cx = cn.bind(styles);
-
-type DividerProps = {
-  /** className */
-  className?: string;
-  /** divider color */
-  color?: string;
-  /** size */
-  size?: "small" | "large" | number;
-  /** 위 아래 간격 */
-  verticalGap?: number;
-};
-
-/** Divider Component */
-const Divider = (props: DividerProps) => {
-  const { className, color, size, verticalGap } = props;
-  return (
-    <div
-      className={cx("Divider", size, className)}
-      style={{
-        backgroundColor: color,
-        height: typeof size === "number" ? size : undefined,
-        marginTop: verticalGap,
-        marginBottom: verticalGap,
-      }}
-    />
-  );
-};
-
-export default Divider;

package/src/components/Editor/Editor.context.tsx

@@ -1,12 +0,0 @@
-import React from "react";
-import type Quill from "quill";
-
-export interface EditorContextValue {
-  quill: Quill | null;
-  isLoading: boolean;
-  editorRef: React.RefObject<HTMLDivElement | null>;
-}
-
-export const EditorContext = React.createContext<EditorContextValue | null>(
-  null
-);

package/src/components/Editor/Editor.module.scss

@@ -1,40 +0,0 @@
-@layer Editor {
-  @mixin skeletonBase {
-    background: linear-gradient(60deg, #f1f3f5 25%, #e5e7eb 50%, #f1f3f5 75%);
-    background-size: 800% 800%;
-    animation: skeletonGradient 32s infinite linear;
-  }
-
-  @keyframes skeletonGradient {
-    0% {
-      background-position: -800% 0;
-    }
-    100% {
-      background-position: 800% 0;
-    }
-  }
-
-  .EditorContainer {
-    display: flex;
-    flex-direction: column;
-    position: relative;
-    flex: 1;
-  }
-
-  .SkeletonWrapper {
-    position: absolute;
-    inset: 0;
-    flex: 1;
-
-    @include skeletonBase;
-  }
-
-  .Wrapper {
-    flex: 1;
-    visibility: visible;
-
-    &.isLoading {
-      visibility: hidden;
-    }
-  }
-}

package/src/components/Editor/Editor.tsx

@@ -1,174 +0,0 @@
-import React from "react";
-import type QuillType from "quill"; // 타입으로만 Quill을 가져옵니다.
-import "quill/dist/quill.snow.css";
-import styles from "./Editor.module.scss";
-import cn from "classnames/bind";
-import { EditorContext, EditorContextValue } from "./Editor.context"; // useEditorContext는 각 컴파운드 컴포넌트에서 직접 사용
-
-const cx = cn.bind(styles);
-
-// 타입 정의 (QuillType 사용)
-type QuillDelta = Parameters<InstanceType<typeof QuillType>["on"]>[1] extends (
-  delta: infer D,
-  ...args: any[]
-) => any
-  ? D
-  : any;
-type QuillSources = Parameters<
-  InstanceType<typeof QuillType>["on"]
->[1] extends (delta: any, oldDelta: any, source: infer S, ...args: any[]) => any
-  ? S
-  : any;
-
-interface QuillModule {
-  default: typeof QuillType;
-}
-
-const EditorSkeleton = () => {
-  const { isLoading } = React.useContext(EditorContext)!;
-
-  return isLoading ? <div className={cx("SkeletonWrapper")} /> : null;
-};
-
-const EditorInput = () => {
-  const { editorRef, isLoading } = React.useContext(EditorContext)!;
-
-  return (
-    <div
-      ref={editorRef}
-      className={cx("Wrapper")}
-      style={{ visibility: isLoading ? "hidden" : "visible" }}
-    />
-  );
-};
-
-type EditorRootProps = React.PropsWithChildren<{
-  initialValue?: string;
-  onChange?: (content: string) => void;
-}>;
-
-const EditorRoot = (props: EditorRootProps) => {
-  const { children, initialValue, onChange } = props;
-
-  const editorRef = React.useRef<HTMLDivElement>(null); // 이 ref는 EditorInput에서 사용
-  const quillInstanceRef = React.useRef<QuillType | null>(null);
-  const [isLoading, setIsLoading] = React.useState<boolean>(true); // 전체 에디터 준비 상태
-  const [quillModule, setQuillModule] = React.useState<QuillModule | null>(
-    null
-  );
-  const initialValueAppliedRef = React.useRef<boolean>(false);
-
-  // 1. Quill 모듈 동적 로드
-  React.useEffect(() => {
-    import("quill")
-      .then((module) => {
-        setQuillModule(module as unknown as QuillModule);
-      })
-      .catch((error) => {
-        console.error("[EditorRoot] Failed to load Quill module:", error);
-        setIsLoading(false);
-      });
-  }, []);
-
-  const onChangeRef = React.useRef(onChange);
-  React.useEffect(() => {
-    onChangeRef.current = onChange;
-  }, [onChange]);
-
-  // 2. Quill 인스턴스 생성 및 이벤트 핸들러 설정
-  React.useEffect(() => {
-    if (quillModule && editorRef.current && !quillInstanceRef.current) {
-      const QuillConstructor = quillModule.default;
-      const quill = new QuillConstructor(editorRef.current, {
-        theme: "snow",
-        modules: {
-          toolbar: [
-            [{ header: [1, 2, 3, 4, 5, 6, false] }],
-            ["bold", "italic", "underline", "strike"],
-            [{ list: "ordered" }, { list: "bullet" }],
-            [{ script: "sub" }, { script: "super" }],
-            [{ indent: "-1" }, { indent: "+1" }],
-            [{ direction: "rtl" }],
-            [{ color: [] }, { background: [] }],
-            [{ font: [] }],
-            [{ align: [] }],
-            ["clean"],
-          ],
-        },
-        placeholder: "내용을 입력하세요...",
-      });
-      quillInstanceRef.current = quill;
-
-      const handleChange = (
-        _delta: QuillDelta,
-        _oldDelta: QuillDelta,
-        source: QuillSources
-      ) => {
-        if (
-          source === "user" &&
-          onChangeRef.current &&
-          quillInstanceRef.current
-        ) {
-          onChangeRef.current(quillInstanceRef.current.root.innerHTML);
-        }
-      };
-      quill.on("text-change", handleChange);
-      setIsLoading(false);
-
-      return () => {
-        if (quillInstanceRef.current) {
-          quillInstanceRef.current.off("text-change", handleChange);
-        }
-      };
-    }
-  }, [quillModule]); // editorRef는 ref이므로 의존성 배열에 불필요
-
-  // 3. initialValue 처리
-  React.useEffect(() => {
-    const quill = quillInstanceRef.current;
-    if (!quill || isLoading) {
-      return;
-    }
-    if (typeof initialValue === "string" && !initialValueAppliedRef.current) {
-      try {
-        const delta = quill.clipboard.convert({ html: initialValue } as any);
-        quill.setContents(delta, "silent");
-        initialValueAppliedRef.current = true;
-      } catch (error) {
-        console.warn("[EditorRoot] Initial HTML to Delta failed:", error);
-        quill.root.innerHTML = initialValue;
-        initialValueAppliedRef.current = true;
-      }
-    } else if (initialValue === undefined && !initialValueAppliedRef.current) {
-      initialValueAppliedRef.current = true;
-    }
-  }, [initialValue, isLoading, quillInstanceRef]); // Using quillInstanceRef (object) is fine
-
-  const contextValue: EditorContextValue = {
-    quill: quillInstanceRef.current,
-    isLoading,
-    editorRef, // editorRef를 context를 통해 EditorInput으로 전달
-  };
-
-  return (
-    <EditorContext.Provider value={contextValue}>
-      <div className={cx("EditorContainer")}>{children}</div>
-    </EditorContext.Provider>
-  );
-};
-
-interface EditorComposition {
-  Root: typeof EditorRoot;
-  Input: typeof EditorInput;
-  Skeleton: typeof EditorSkeleton;
-}
-
-export type { EditorRootProps as EditorProps };
-
-const Editor: EditorComposition = {
-  Root: EditorRoot,
-  Input: EditorInput,
-  Skeleton: EditorSkeleton,
-};
-
-export default Editor;

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

@@ -1,56 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import React from "react";
-
-type InputStatus = "error" | "warning" | "success" | undefined;
-
-type CheckBoxContextType = {
-  /** input value */
-  value: string | string[];
-  /** checked */
-  checked?: boolean;
-  /** onChange */
-  onChange?: (...args: any) => void;
-  /** name */
-  name?: string;
-  /** isIndeterminate (보통 여러개 선택해야하는 경우) */
-  indeterminated?: boolean;
-  /** Disabled */
-  disabled?: boolean;
-  /** readOnly */
-  readOnly?: boolean;
-  /** status */
-  status?: InputStatus;
-  /** ID */
-  id: string;
-};
-
-const initialState: CheckBoxContextType = {
-  value: "",
-  checked: false,
-  onChange: () => {},
-  name: "",
-  indeterminated: false,
-  disabled: false,
-  readOnly: false,
-  id: "",
-};
-
-export const CheckBoxContext =
-  React.createContext<CheckBoxContextType>(initialState);
-
-export type CheckBoxProviderProps = React.PropsWithChildren<
-  Partial<Omit<CheckBoxContextType, "">>
-> & {
-  className?: string;
-};
-
-export const CheckBoxProvider: React.FC<CheckBoxProviderProps> = ({
-  children,
-  ...props
-}) => {
-  return (
-    <CheckBoxContext.Provider value={{ ...initialState, ...props }}>
-      {children}
-    </CheckBoxContext.Provider>
-  );
-};

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

@@ -1,81 +0,0 @@
-@layer CheckBox {
-  .CheckBoxRoot {
-    display: flex;
-    flex-direction: row;
-    gap: 4px;
-    align-items: center;
-
-    &.checked {
-      .CheckBoxTrigger {
-        .CheckBoxIcon {
-          border: none;
-        }
-      }
-    }
-
-    &:hover {
-      .CheckBoxTrigger {
-        .CheckBoxIcon {
-          border: 2px solid var(--textSecondary, #637381);
-
-          &.checked {
-            border: none;
-          }
-
-          &.disabled {
-            &:hover {
-              border: 2px solid var(--border-color);
-            }
-          }
-        }
-      }
-
-      .CheckBoxRound {
-        & path {
-          fill: var(--pDark, #007867);
-        }
-
-        &.disabled {
-          & path {
-            fill: var(--actionDisabled, #919eab66);
-          }
-        }
-      }
-    }
-
-    &.disabled {
-      .CheckBoxTrigger {
-        .CheckBoxIcon {
-          border: 2px solid var(--border-color);
-        }
-      }
-    }
-  }
-
-  .CheckBoxTrigger {
-    width: 24px;
-    height: 24px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    .CheckBoxIcon {
-      width: 18px;
-      height: 18px;
-      border: 2px solid var(--textTertiary, #919eab);
-      border-radius: 2px;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: center;
-      border-color: var(--border-color, transparent);
-      background-color: var(--default-bg-color, #b1916b);
-      flex-shrink: 0;
-    }
-  }
-
-  .CheckBoxLabel {
-    @include labelMedium;
-    color: var(--color, #8a8c8f);
-  }
-}