@weing-dev/ui-kit-primitive 0.0.0

package/src/components/WisywygEditor/Quill/Editor.tsx

@@ -0,0 +1,148 @@
+import React from "react";
+import ReactQuill, { Quill } from "react-quill-new";
+import "react-quill-new/dist/quill.snow.css";
+import ImageResize from "quill-image-resize-module-react";
+import { v1 as uuid } from "uuid";
+import { AWSUtil } from "@/utils/aws.util";
+
+Quill.register("modules/imageResize", ImageResize);
+
+type QuillEditorProps = {
+  onChange?: (content: string) => void;
+  value?: string;
+  name?: string;
+  awsConfig?: {
+    region: string;
+    accessKeyId: string;
+    secretAccessKey: string;
+    bucketName: string;
+    secretId?: string;
+    filePrefix?: string;
+  };
+};
+
+const quillFormats = [
+  "font",
+  "size",
+  "bold",
+  "italic",
+  "underline",
+  "strike",
+  "color",
+  "background",
+  "script",
+  "header",
+  "blockquote",
+  "code-block",
+  "indent",
+  "list",
+  "direction",
+  "align",
+  "link",
+  "image",
+  "video",
+  "formula",
+];
+
+const QuillEditor = (props: QuillEditorProps) => {
+  const { onChange, value, name } = props;
+
+  const handleEditorChange = React.useCallback(
+    (content: string) => {
+      onChange?.(content);
+    },
+    [onChange]
+  );
+  const _editor = React.useRef<ReactQuill>(null);
+
+  const isConfig = !!props.awsConfig;
+
+  const uploadUtil = React.useMemo(() => {
+    return new AWSUtil({
+      region: import.meta.env.NEXT_PUBLIC_AWS_REGION_NAME || "",
+      accessKeyId: import.meta.env.NEXT_PUBLIC_AWS_ACCESS_KEY_ID || "",
+      secretAccessKey: import.meta.env.NEXT_PUBLIC_AWS_SECRET_ACCESS_KEY || "",
+      bucketName: import.meta.env.NEXT_PUBLIC_AWS_BUCKET_NAME || "",
+      secretId: import.meta.env.NEXT_PUBLIC_AWS_SECRET_ID,
+    });
+  }, []);
+
+  const imageHandler = () => {
+    const input = document.createElement("input");
+
+    input.setAttribute("type", "file");
+    input.setAttribute("accept", "image/*");
+    input.click();
+
+    input.onchange = async () => {
+      for (const file of Array.from(input?.files || [])) {
+        const fileItem: FileItem = {
+          uri: URL.createObjectURL(file),
+          name: file.name,
+          file,
+          id: uuid(),
+        } as const;
+
+        if (/^image\//.test(file.type)) {
+          const editor = _editor.current?.getEditor();
+          const selection = editor?.getSelection();
+          const cursorPosition = selection?.index ?? 0;
+
+          const fileURL = await uploadUtil.handleUpload(fileItem, "editor");
+
+          const reader = new FileReader();
+          reader.readAsDataURL(file);
+
+          reader.onload = () => {
+            editor?.insertEmbed(
+              cursorPosition,
+              "image",
+              isConfig ? fileURL : (reader.result as string)
+            );
+          };
+        } else {
+          alert("You could only upload images.");
+        }
+      }
+    };
+  };
+
+  const modules = React.useMemo(() => {
+    return {
+      toolbar: {
+        container: [
+          [{ header: [1, 2, 3, false] }],
+          ["bold", "italic", "underline", "strike", "blockquote"],
+          [{ list: "ordered" }, { list: "bullet" }],
+          ["link", "image", "video"],
+          [{ align: [false, "center", "right", "justify"] }],
+          [{ color: [] }],
+          ["code-block"],
+          ["clean"],
+        ],
+        handlers: {
+          image: imageHandler,
+        },
+      },
+      imageResize: {
+        parchment: Quill.import("parchment"),
+        modules: ["Resize", "DisplaySize", "Toolbar"],
+      },
+    };
+  }, []);
+
+  return (
+    <ReactQuill
+      theme={"snow"}
+      style={{ height: 350, margin: 4 }}
+      onChange={handleEditorChange}
+      value={value}
+      ref={_editor}
+      formats={quillFormats}
+      modules={modules}
+      id={name}
+    />
+  );
+};
+
+export default QuillEditor;

package/src/constant/locale.constant.ts

@@ -0,0 +1,6 @@
+export const LOCALE_MAP = new Map([
+  ["ko", "한국어"],
+  ["en", "English"],
+  ["ja", "日本語"],
+  ["zh-CN", "简体中文"],
+]);

package/src/globals.scss

@@ -0,0 +1,80 @@
+@layer Global {
+  html,
+  body {
+    width: 100%;
+    height: 100%;
+  }
+
+  body {
+    background-color: var(--backgroundDefault, #fff);
+  }
+
+  * {
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+  }
+
+  button,
+  [role="button"] {
+    outline: none;
+    border: none;
+    background: none;
+    cursor: pointer;
+  }
+
+  ul,
+  li {
+    list-style: none;
+  }
+
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  input {
+    outline: none;
+    background-color: transparent;
+    border: none;
+  }
+
+  input::-ms-clear,
+  input::-ms-reveal {
+    opacity: 0;
+  }
+  /* chrome */
+  input::-webkit-search-decoration,
+  input::-webkit-search-cancel-button,
+  input::-webkit-search-results-button,
+  input::-webkit-search-results-decoration {
+    opacity: 0;
+  }
+
+  .button-desc {
+    text-indent: -9999px;
+    font-size: 0;
+  }
+
+  /* Chrome, Safari, Edge, Opera */
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  /* Firefox */
+  input[type="number"] {
+    -moz-appearance: textfield;
+  }
+
+  em {
+    font-style: normal;
+  }
+
+  // @media (prefers-color-scheme: dark) {
+  //   html {
+  //     color-scheme: dark;
+  //   }
+  // }
+}

package/src/hooks/useColorScheme.tsx

@@ -0,0 +1,48 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import React from "react";
+import { variableLight } from "../styles/color";
+
+const grayScaleColorGroupNames = [
+  "gray",
+  "steelBlue",
+  "beige",
+  "royalOrange",
+  "lubyRed",
+  "cyan",
+  "mint",
+  "mustardYellow",
+  "red",
+  "green",
+] as const;
+
+type ColorScheme = (typeof grayScaleColorGroupNames)[number];
+
+export default function useColorScheme(colorScheme?: string) {
+  const scheme = colorScheme as ColorScheme;
+
+  const palleteSet = React.useMemo(() => {
+    const colorSet = variableLight[scheme];
+
+    switch (scheme) {
+      case "gray":
+      case "lubyRed":
+      case "beige":
+      case "steelBlue":
+      case "royalOrange":
+      case "cyan":
+      case "mint":
+      case "mustardYellow":
+      case "red":
+      case "green":
+        return {
+          backgroundColor: colorSet[`${scheme}50` as keyof typeof colorSet],
+          tintColor: "#fff",
+        };
+
+      default:
+        return undefined;
+    }
+  }, [scheme]);
+
+  return palleteSet;
+}

package/src/hooks/useElementRect.tsx

@@ -0,0 +1,128 @@
+import React from "react";
+
+interface ElementPosition {
+  // 절대 위치 (viewport 기준)
+  absolute: {
+    top: number;
+    left: number;
+    bottom: number;
+    right: number;
+  };
+  // 상대 위치 (부모 요소 기준)
+  relative: {
+    top: number;
+    left: number;
+    bottom: number;
+    right: number;
+  };
+  // 요소의 크기
+  width: number;
+  height: number;
+}
+
+function useElementRect(elementRef: React.RefObject<HTMLElement | null>) {
+  const [position, setPosition] = React.useState<ElementPosition>({
+    absolute: { top: 0, left: 0, bottom: 0, right: 0 },
+    relative: { top: 0, left: 0, bottom: 0, right: 0 },
+    width: 0,
+    height: 0,
+  });
+
+  const observerRef = React.useRef<ResizeObserver>(null);
+
+  React.useEffect(() => {
+    const element = elementRef.current;
+    if (!element) return;
+
+    // 부모 요소 찾기 함수 추가
+    const getScrollableParent = (node: HTMLElement): HTMLElement | null => {
+      const regex = /(auto|scroll)/;
+      const style = (el: Element) => window.getComputedStyle(el);
+
+      const isScrollable = (el: Element) =>
+        regex.test(
+          style(el).overflow + style(el).overflowY + style(el).overflowX
+        );
+
+      let parent = node.parentElement;
+      while (parent) {
+        if (isScrollable(parent)) return parent;
+        parent = parent.parentElement;
+      }
+      return null;
+    };
+
+    const updatePosition = () => {
+      // 절대 위치 계산 (viewport 기준)
+      const absoluteRect = element.getBoundingClientRect();
+
+      // 상대 위치 계산 (부모 요소 기준)
+      const parentElement = element.offsetParent || element.parentElement;
+      const parentRect = parentElement?.getBoundingClientRect() || {
+        top: 0,
+        left: 0,
+        bottom: 0,
+        right: 0,
+        width: 0,
+        height: 0,
+      };
+
+      // 스크롤 위치 고려
+      const scrollableParent = getScrollableParent(element);
+      const parentScrollTop = scrollableParent?.scrollTop || 0;
+      const parentScrollLeft = scrollableParent?.scrollLeft || 0;
+
+      setPosition({
+        absolute: {
+          top: absoluteRect.top + window.scrollY,
+          left: absoluteRect.left + window.scrollX,
+          bottom: absoluteRect.bottom + window.scrollY,
+          right: absoluteRect.right + window.scrollX,
+        },
+        relative: {
+          top: element.offsetTop - parentScrollTop,
+          left: element.offsetLeft - parentScrollLeft,
+          bottom:
+            parentRect.height -
+            (element.offsetTop + element.offsetHeight - parentScrollTop),
+          right:
+            parentRect.width -
+            (element.offsetLeft + element.offsetWidth - parentScrollLeft),
+        },
+        width: absoluteRect.width,
+        height: absoluteRect.height,
+      });
+    };
+
+    observerRef.current = new ResizeObserver(updatePosition);
+    observerRef.current.observe(element);
+
+    // 스크롤 가능한 부모 요소 찾기
+    const scrollableParent = getScrollableParent(element);
+
+    // 스크롤이나 리사이즈 시에도 위치 업데이트
+    window.addEventListener("scroll", updatePosition);
+    window.addEventListener("resize", updatePosition);
+    if (scrollableParent) {
+      scrollableParent.addEventListener("scroll", updatePosition);
+    }
+
+    // 초기 위치 설정
+    updatePosition();
+
+    return () => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+      }
+      window.removeEventListener("scroll", updatePosition);
+      window.removeEventListener("resize", updatePosition);
+      if (scrollableParent) {
+        scrollableParent.removeEventListener("scroll", updatePosition);
+      }
+    };
+  }, [elementRef]);
+
+  return position;
+}
+
+export default useElementRect;

package/src/hooks/useIntersectionObserver.tsx

@@ -0,0 +1,33 @@
+import React, { RefObject } from "react";
+
+type Elem = Element | null;
+
+export default function useIntersectionObserver(
+  elemRef: RefObject<Elem | Elem[]>,
+  options: IntersectionObserverInit = { threshold: 0 }
+) {
+  const observerRef = React.useRef<IntersectionObserver>(null);
+  const [entries, setEntries] = React.useState<IntersectionObserverEntry[]>([]);
+
+  React.useEffect(() => {
+    const node = elemRef.current;
+    if (!node) return;
+
+    observerRef.current = new IntersectionObserver(setEntries, options);
+
+    if (Array.isArray(node)) {
+      node.forEach((n) => n && observerRef.current?.observe(n));
+    } else {
+      observerRef.current.observe(node);
+    }
+
+    return () => {
+      observerRef.current?.disconnect();
+    };
+  }, [elemRef, options]);
+
+  return {
+    entries,
+    observerRef,
+  };
+}

package/src/index.css

@@ -0,0 +1,17 @@
+/* html,
+body {
+  width: 100%;
+  height: 100%;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+#root {
+  width: 100%;
+  min-height: 100dvh;
+  height: 100%;
+} */

package/src/index.ts

@@ -0,0 +1,187 @@
+import "@/globals.scss";
+
+/** Button */
+import Button from "./components/Button/Button";
+
+/** Comment */
+import Comment from "./components/Comment/Comment";
+
+/** Icon */
+import { Icon } from "./components/Icon/Icon";
+
+/** HelperText */
+import HelperText from "./components/HelperText/HelperText";
+
+/** Divider */
+import Divider from "./components/Divider/Divider";
+
+/** Accordion */
+import Accordion from "./components/Accordion/Accordion";
+
+/** Breadcrumb */
+import Breadcrumb from "./components/Breadcrumb/Breadcrumb";
+
+/** Slider */
+import Slider from "./components/Slider/Slider";
+
+/** Stepper */
+import Stepper, { StepperProviderProps } from "./components/Stepper/Stepper";
+
+/** Badge */
+import Badge, {
+  BadgeRootProps,
+  BadgeRenderProps,
+} from "./components/Badge/Badge";
+
+/** Avatar */
+import Avatar from "./components/Avatar/Avatar";
+
+/** ScrollSpy */
+import ScrollSpy from "./components/ScrollSpy/ScrollSpy";
+
+/** Cascader */
+import Cascader from "./components/Cascader/Cascader";
+
+/** CheckBox */
+import CheckBox from "./components/Form/CheckBox/CheckBox";
+
+/** Tab */
+import Tab from "./components/Tab/Tab";
+
+/** Dropdown */
+import Dropdown from "./components/Form/Dropdown/Dropdown";
+
+/** OTPInput */
+import OTPInput from "./components/Form/OTPInput/OTPInput";
+
+/** Switch */
+import Switch from "./components/Form/Switch/Switch";
+
+/** Radio */
+import Radio from "./components/Form/Radio/Radio";
+
+/** TextInput */
+import TextInput from "./components/Form/TextInput/TextInput";
+
+/** TextArea */
+import TextArea from "./components/Form/TextArea/TextArea";
+
+/** LazyImage */
+import LazyImage from "./components/LazyImage/LazyImage";
+
+/** Calendar */
+import Calendar from "./components/Calendar/Calendar";
+
+/** Chart */
+import Chart from "./components/Chart/Chart";
+
+/** Quill Editor */
+import QuillEditor from "./components/WisywygEditor/Quill/Editor";
+
+/** Table */
+import Table, { TableRootProps } from "./components/Table/Table";
+
+/** Weekly Calendar */
+import WeeklyCalendar from "./components/WeeklyCalendar/WeeklyCalendar";
+
+/** MobilePicker */
+import MobilePicker from "./components/MobilePicker/MobilePicker";
+/** LNB */
+import LNB, { Navigation } from "./components/LNB/LNB";
+import { makeNavigation } from "./components/LNB/makeNavigation";
+
+/** Pagination */
+import Pagination from "./components/Pagination/Pagination";
+
+/** BarCode */
+import BarCode, { BarcodeActions } from "./components/BarCode/BarCode";
+
+/** QRCode */
+import QRCode, { QRCodeRef } from "./components/QRCode/QRCode";
+
+/** Chips */
+import Chips from "./components/Chips/Chips";
+
+/** Label */
+import Label from "./components/Label/Label";
+
+/** ScrollCalendar */
+import ScrollCalendar from "./components/ScrollCalendar/ScrollCalendar";
+
+/** Sheet */
+import Sheet, { SheetRootProps } from "./components/Sheet/Sheet";
+
+/** Modal */
+import Modal from "./components/Modal/Modal";
+
+/** Popup */
+import Popup, { PopupRootProps } from "./components/Popup/Popup";
+
+/** TimeInput */
+import TimeInput from "./components/TimeInput/TimeInput";
+
+/** List */
+import List from "./components/List/List";
+
+/** Thumbnail */
+import Thumbnail, {
+  ThumbnailRootProps,
+} from "./components/Thumbnail/Thumbnail";
+
+
+export {
+  Button,
+  HelperText,
+  Icon,
+  Divider,
+  CheckBox,
+  Comment,
+  Tab,
+  Dropdown,
+  OTPInput,
+  Switch,
+  Radio,
+  TextInput,
+  TextArea,
+  LazyImage,
+  Calendar,
+  Chart,
+  Accordion,
+  Breadcrumb,
+  Slider,
+  Stepper,
+  Badge,
+  Avatar,
+  ScrollSpy,
+  QuillEditor,
+  Cascader,
+  Table,
+  WeeklyCalendar,
+  MobilePicker,
+  LNB,
+  makeNavigation,
+  Pagination,
+  BarCode,
+  QRCode,
+  Chips,
+  Label,
+  ScrollCalendar,
+  Sheet,
+  Modal,
+  Popup,
+  TimeInput,
+  List,
+  Thumbnail,
+};
+export type {
+  TableRootProps,
+  Navigation,
+  BadgeRootProps,
+  BadgeRenderProps,
+  QRCodeRef,
+  BarcodeActions,
+  StepperProviderProps,
+  SheetRootProps,
+  PopupRootProps,
+  ThumbnailRootProps,
+};

package/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App.tsx";
+import "./index.css";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);