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

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

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

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

package/src/globals.scss

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

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

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

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

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

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

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