@weing-dev/ui-kit-primitive 0.0.0

package/src/components/Comment/Comment.tsx

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

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

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

package/src/components/Divider/Divider.tsx

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

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

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

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

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

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