@uniai-fe/ui-legacy 0.1.5 → 0.1.7

package/README.md

@@ -1,3 +1,5 @@
-# client / ui
+# client / ui-legacy
 
+`deprecated`
 스타일링 도구와 토큰, 디자인 시스템, 컴포넌트 등 관리
+-> `design/*`로 이동

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/ui-legacy",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "description": "Legacy UI Toolkit for UNIAI FE Projects",
   "type": "module",
   "private": false,
@@ -10,9 +10,9 @@
   "publishConfig": {
     "access": "public"
   },
-  "packageManager": "pnpm@10.22.0",
+  "packageManager": "pnpm@10.23.0",
   "engines": {
-    "node": ">=22",
+    "node": ">=24",
     "pnpm": ">=10"
   },
   "author": {
@@ -42,15 +42,11 @@
     "./types": "./src/types/index.d.ts",
     "./components": "./src/components.tsx",
     "./components/styled": "./src/styled.components.tsx",
-    "./template": "./src/template.tsx",
-    "./template/styled": "./src/styled.template.tsx",
     "./frame": "./src/frame/index.tsx",
     "./frame/styled": "./src/frame/styled.tsx",
     "./modal": "./src/modal/index.tsx",
     "./icon": "./src/icon/index.tsx",
     "./icon/styled": "./src/icon/styled.tsx",
-    "./chart": "./src/chart/index.tsx",
-    "./chart/styled": "./src/chart/styled.tsx",
     "./table": "./src/table/index.tsx",
     "./table/styled": "./src/table/styled.tsx",
     "./scss": "./src/index.scss",
@@ -58,6 +54,10 @@
     "./mantine_style": "./src/style-base/mantine.css"
   },
   "peerDependencies": {
+    "@mantine/core": ">= 8",
+    "@mantine/dates": ">= 8",
+    "@mantine/hooks": ">= 8",
+    "@mantine/tiptap": ">= 8",
     "@tanstack/react-query": ">= 5",
     "airtable": ">= 0.12",
     "jotai": ">= 2",
@@ -67,41 +67,41 @@
     "styled-components": ">= 6"
   },
   "peerDependenciesMeta": {
-    "optional": {
-      "next": true
+    "next": {
+      "optional": true
     }
   },
   "devDependencies": {
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@mantine/core": "^8.3.7",
-    "@mantine/dates": "^8.3.7",
-    "@mantine/hooks": "^8.3.7",
-    "@mantine/tiptap": "^8.3.7",
-    "@tanstack/react-query": "^5.90.8",
-    "@tiptap/extension-blockquote": "^3.10.7",
-    "@tiptap/extension-bold": "^3.10.7",
-    "@tiptap/extension-code": "^3.10.7",
-    "@tiptap/extension-code-block": "^3.10.7",
-    "@tiptap/extension-document": "^3.10.7",
-    "@tiptap/extension-hard-break": "^3.10.7",
-    "@tiptap/extension-heading": "^3.10.7",
-    "@tiptap/extension-horizontal-rule": "^3.10.7",
-    "@tiptap/extension-italic": "^3.10.7",
-    "@tiptap/extension-link": "^3.10.7",
-    "@tiptap/extension-list": "^3.10.7",
-    "@tiptap/extension-paragraph": "^3.10.7",
-    "@tiptap/extension-placeholder": "^3.10.7",
-    "@tiptap/extension-strike": "^3.10.7",
-    "@tiptap/extension-text": "^3.10.7",
-    "@tiptap/extension-text-align": "^3.10.7",
-    "@tiptap/extension-underline": "^3.10.7",
-    "@tiptap/pm": "^3.10.7",
-    "@tiptap/react": "^3.10.7",
-    "@tiptap/starter-kit": "^3.10.7",
+    "@mantine/core": "^8.3.9",
+    "@mantine/dates": "^8.3.9",
+    "@mantine/hooks": "^8.3.9",
+    "@mantine/tiptap": "^8.3.9",
+    "@tanstack/react-query": "^5.90.10",
+    "@tiptap/extension-blockquote": "^3.11.0",
+    "@tiptap/extension-bold": "^3.11.0",
+    "@tiptap/extension-code": "^3.11.0",
+    "@tiptap/extension-code-block": "^3.11.0",
+    "@tiptap/extension-document": "^3.11.0",
+    "@tiptap/extension-hard-break": "^3.11.0",
+    "@tiptap/extension-heading": "^3.11.0",
+    "@tiptap/extension-horizontal-rule": "^3.11.0",
+    "@tiptap/extension-italic": "^3.11.0",
+    "@tiptap/extension-link": "^3.11.0",
+    "@tiptap/extension-list": "^3.11.0",
+    "@tiptap/extension-paragraph": "^3.11.0",
+    "@tiptap/extension-placeholder": "^3.11.0",
+    "@tiptap/extension-strike": "^3.11.0",
+    "@tiptap/extension-text": "^3.11.0",
+    "@tiptap/extension-text-align": "^3.11.0",
+    "@tiptap/extension-underline": "^3.11.0",
+    "@tiptap/pm": "^3.11.0",
+    "@tiptap/react": "^3.11.0",
+    "@tiptap/starter-kit": "^3.11.0",
     "@types/node": "^24.10.1",
-    "@types/react": "^19.2.4",
+    "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "@types/react-flatpickr": "^3.8.11",
     "@uniai-fe/eslint-config": "workspace:*",
@@ -130,9 +130,8 @@
     "react-daum-postcode": "^3.2.0",
     "react-dom": "^19.2.0",
     "react-flatpickr": "3.10.13",
-    "react-hook-form": "^7.66.0",
-    "recharts": "^3.4.1",
-    "sass": "^1.94.0",
+    "react-hook-form": "^7.66.1",
+    "sass": "^1.94.2",
     "simplebar-core": "^1.3.2",
     "simplebar-react": "3.3.2",
     "styled-components": "^6.1.19",

package/src/button/index.tsx

@@ -12,18 +12,18 @@ import ButtonMultipleContainer from "./components/multiple/Container";
 import ButtonResetSelected from "./components/base/ResetSelected";
 
 const Button = {
-  Default: ButtonDefault,
-  Expand: ButtonExpand,
-  Link: ButtonLink,
-  Text: ButtonText,
-  Tooltip: ButtonTooltip,
-  ArrayAdd: ButtonAddArray,
-  ArrayRemove: ButtonRemoveArray,
-  SelectBox: ButtonSelectBox,
-  Refresh: ButtonRefresh,
-  Reset: ButtonReset,
-  ResetSelected: ButtonResetSelected,
-  Multiple: ButtonMultipleContainer,
+  Default: ButtonDefault as typeof ButtonDefault,
+  Expand: ButtonExpand as typeof ButtonExpand,
+  Link: ButtonLink as typeof ButtonLink,
+  Text: ButtonText as typeof ButtonText,
+  Tooltip: ButtonTooltip as typeof ButtonTooltip,
+  ArrayAdd: ButtonAddArray as typeof ButtonAddArray,
+  ArrayRemove: ButtonRemoveArray as typeof ButtonRemoveArray,
+  SelectBox: ButtonSelectBox as typeof ButtonSelectBox,
+  Refresh: ButtonRefresh as typeof ButtonRefresh,
+  Reset: ButtonReset as typeof ButtonReset,
+  ResetSelected: ButtonResetSelected as typeof ButtonResetSelected,
+  Multiple: ButtonMultipleContainer as typeof ButtonMultipleContainer,
 };
 
 export default Button;

package/src/components.tsx

@@ -11,7 +11,7 @@ import Icon from "./icon";
 import Alternate from "./alternate";
 import Delta from "./delta";
 import Dot from "./dot";
-import Chart from "./chart";
+// import Chart from "./chart"; // recharts 버전 충돌로 분리, 그리고 recharts는 deprecated. Apache ECharts로 대체 예정
 import Table from "./table";
 import Form from "./form";
 import Modal from "./modal";
@@ -32,7 +32,7 @@ export {
   Alternate,
   Delta,
   Dot,
-  Chart,
+  // Chart,
   Table,
   Modal,
   Form,

package/src/icon/icon.scss

@@ -1,5 +1,5 @@
 @use "./styles/scss/arrow.scss";
 @use "./styles/scss/input.scss";
 @use "./styles/scss/table.scss";
-@use "./styles/scss/chart.scss";
+// @use "./styles/scss/chart.scss";
 @use "./styles/scss/page-header.scss";

package/src/icon/index.tsx

@@ -1,7 +1,7 @@
 import IconArrow from "./components/arrow";
 import IconDelta from "./components/delta";
 import IconNav from "./components/nav";
-import IconHealthScore from "./components/health-score";
+// import IconHealthScore from "./components/health-score";
 import IconCage from "./components/cage";
 import IconPageHeader from "./components/page-header";
 import IconTooltip from "./components/tooltip";
@@ -10,13 +10,13 @@ import IconButton from "./components/button";
 import IconTable from "./components/table";
 import IconInput from "./components/input";
 import IconTabMenu from "./components/tab-menu";
-import IconChart from "./components/chart";
+// import IconChart from "./components/chart";
 
 const Icon = {
   Arrow: IconArrow,
   Delta: IconDelta,
   Nav: IconNav,
-  HealthScore: IconHealthScore,
+  // HealthScore: IconHealthScore,
   Cage: IconCage,
   PageHeader: IconPageHeader,
   Tooltip: IconTooltip,
@@ -25,7 +25,7 @@ const Icon = {
   Table: IconTable,
   Input: IconInput,
   TabMenu: IconTabMenu,
-  Chart: IconChart,
+  // Chart: IconChart,
 };
 
 export default Icon;

package/src/icon/styled.tsx

@@ -1,4 +1,4 @@
-import StyledIconChart from "./styles/styled/chart";
+// import StyledIconChart from "./styles/styled/chart";
 import StyledIconCommon from "./styles/styled/common";
 import StyledIconDelta from "./styles/styled/delta";
 import StyledIconInput from "./styles/styled/input";
@@ -11,7 +11,7 @@ const StyledIcon = {
   pageHeader: StyledIconPageHeader,
   table: StyledIconTable,
   input: StyledIconInput,
-  chart: StyledIconChart,
+  // chart: StyledIconChart,
 };
 
 export default StyledIcon;

package/src/index.scss

@@ -11,10 +11,10 @@
 @use "./form-field/input/input.scss";
 @use "./form-field/select/select.scss";
 @use "./frame/frame.scss";
-@use "./chart/chart.scss";
+// @use "./chart/chart.scss";
 @use "./table/table.scss";
 @use "./modal/modal.scss";
 @use "./text-editor/text-editor.scss";
 
 // templates
-@use "./template/compare/compare.scss";
+// @use "./template/compare/compare.scss";

package/src/index.tsx

@@ -1,9 +1,7 @@
 import "./index.scss";
 
 export * from "./components";
-export * from "./template";
 export * from "./styled.components";
-export * from "./styled.template";
 
 export * from "./modal/util";
 export * from "./table/util";

package/src/types/index.d.ts

@@ -6,9 +6,9 @@ export type * from "./chip";
 export type * from "./icon";
 export type * from "./delta";
 export type * from "./modal";
-export type * from "./chart";
+// export type * from "./chart"; // recharts 버전 충돌로 분리, 그리고 recharts는 deprecated. Apache ECharts로 대체 예정
 export type * from "./table";
 export type * from "./tab-menu";
-export type * from "./template";
+// export type * from "./template"; // ui-legacy-template 과 관련된 타입
 export type * from "./weather";
 export type * from "./style-option";

package/src/chart/chart.scss

@@ -1,11 +0,0 @@
-@use "./styles/scss/level.color.scss";
-
-@use "./styles/scss/tick.scss";
-@use "./styles/scss/graph.scss";
-@use "./styles/scss/legend.scss";
-@use "./styles/scss/tooltip.scss";
-@use "./styles/scss/control.scss";
-@use "./styles/scss/filter.scss";
-
-@use "./styles/scss/arc-gauge.scss";
-@use "./styles/scss/arc-meter.scss";

package/src/chart/components/Contents.tsx

@@ -1,17 +0,0 @@
-"use client";
-
-import StyledChartCommon from "../styles/styled/common";
-
-export default function ChartContents({
-  className,
-  children,
-}: {
-  className?: string;
-  children: React.ReactNode;
-}) {
-  return (
-    <StyledChartCommon.container className={className}>
-      {children}
-    </StyledChartCommon.container>
-  );
-}

package/src/chart/components/control/Button.tsx

@@ -1,39 +0,0 @@
-"use client";
-
-import { clsx } from "clsx";
-import StyledChartControl from "../../styles/styled/control";
-import Icon from "../../../icon";
-
-/**
- * 차트 인터렉션 컨트롤 버튼
- * @component
- * @property {"zoom-in" | "zoom-out" | "pan-left" | "pan-right"} role - 버튼 역할
- * @property {Function} clickEvent - 클릭 이벤트 핸들러
- * @property {string} [className] - 추가 클래스 이름
- * @property {React.ReactNode} [children] - 버튼 내부에 렌더링
- */
-export default function ChartControlButton({
-  className,
-  role,
-  clickEvent,
-  children,
-  disabled,
-}: {
-  role: "zoom-in" | "zoom-out" | "pan-left" | "pan-right";
-  clickEvent: () => void;
-} & Partial<{
-  className: string;
-  children: React.ReactNode;
-  disabled: boolean;
-}>) {
-  return (
-    <StyledChartControl.button
-      type="button"
-      className={clsx("chart-control-button", className)}
-      disabled={disabled}
-      onClick={!disabled ? clickEvent : undefined}
-    >
-      {children || <Icon.Chart.Control {...{ role, width: 20, height: 20 }} />}
-    </StyledChartControl.button>
-  );
-}

package/src/chart/components/control/Container.tsx

@@ -1,27 +0,0 @@
-"use client";
-
-import { clsx } from "clsx";
-import StyledChartControl from "../../styles/styled/control";
-
-/**
- * 차트 인터렉션 컨트롤 컨테이너
- * @component
- * @property {string} [className] - 추가 클래스 이름
- * @property {React.ReactNode} children - 자식 컴포넌트
- */
-export default function ChartControlContainer({
-  className,
-  children,
-}: {
-  children: React.ReactNode;
-} & Partial<{
-  className: string;
-}>) {
-  return (
-    <StyledChartControl.container
-      className={clsx("chart-control-container", className)}
-    >
-      {children}
-    </StyledChartControl.container>
-  );
-}

package/src/chart/components/control/Provider.tsx

@@ -1,117 +0,0 @@
-"use client";
-
-import {
-  createContext,
-  useContext,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from "react";
-import type { ChartControlContext, ChartControlRange } from "../../../types";
-
-/**
- * 차트 컨트롤을 위한 데이터 컨텍스트
- * @context
- * @desc
- * - {object[]} originData 원본 차트 데이터
- * - {{ start: number; end: number; }} indexRange 현재 X축 인덱스 범위
- * - {function} setRange X축 범위 업데이트 함수
- */
-const ChartControlContext = createContext<ChartControlContext>({
-  originData: [],
-  indexRange: { start: 0, end: 0 },
-  setIndexRange: () => {},
-});
-
-/**
- * 차트 컨트롤을 위한 데이터 컨텍스트 공급자
- * @component
- * @param {object} props
- * @param {object[]} props.originData 원본 차트 데이터
- * @param {React.ReactNode} props.children
- */
-export default function ChartControlProvider<
-  ChartData extends object = object,
->({
-  originData,
-  children,
-}: {
-  /**
-   * 원본 차트 데이터
-   * @type {object[]}
-   */
-  originData: ChartData[];
-  children: React.ReactNode;
-}) {
-  const [indexRange, setIndexRange] = useState<ChartControlRange>({
-    start: 0,
-    end: originData.length > 1 ? originData.length - 1 : 0,
-  });
-
-  // 초기 데이터 로딩 시(0 -> N) 전체 범위로 동기 업데이트하여 깜빡임 방지
-  const prevLenRef = useRef<number>(originData.length);
-  useLayoutEffect(() => {
-    const prev = prevLenRef.current;
-    const next = originData.length;
-    if (prev === 0 && next > 0) {
-      setIndexRange({ start: 0, end: Math.max(0, next - 1) });
-    }
-    prevLenRef.current = next;
-  }, [originData.length]);
-
-  // 데이터 길이가 변할 때 현재 indexRange를 데이터 범위에 맞춰 정돈
-  useLayoutEffect(() => {
-    const total = originData.length;
-    if (total < 0) return;
-    const maxEnd = Math.max(0, total - 1);
-
-    // 비어있는 경우 0,0 고정
-    if (total === 0) {
-      if (indexRange.start !== 0 || indexRange.end !== 0)
-        setIndexRange({ start: 0, end: 0 });
-      return;
-    }
-
-    // 현재 윈도우 길이 보존 시도
-    const length = Math.max(1, indexRange.end - indexRange.start + 1);
-
-    // 범위를 넘어가면 오른쪽 끝에 맞춰 재정렬
-    if (indexRange.end > maxEnd || indexRange.start > maxEnd) {
-      const newEnd = maxEnd;
-      const newStart = Math.max(0, newEnd - Math.min(length, total) + 1);
-      if (newStart !== indexRange.start || newEnd !== indexRange.end)
-        setIndexRange({ start: newStart, end: newEnd });
-    }
-  }, [originData.length, indexRange.start, indexRange.end]);
-
-  return (
-    <ChartControlContext.Provider
-      value={{
-        originData,
-        indexRange,
-        setIndexRange,
-      }}
-    >
-      {children}
-    </ChartControlContext.Provider>
-  );
-}
-
-/**
- * 차트 컨트롤 데이터 컨텍스트를 사용하기 위한 커스텀 훅
- * @hook
- * @desc
- * - {object[]} originData 원본 차트 데이터
- * - {{ start: number; end: number; }} indexRange 현재 X축 인덱스 범위
- * - {function} setIndexRange X축 범위 업데이트 함수
- * @return {ChartControlContext} { originData, indexRange, setIndexRange }
- */
-export function useChartContext<
-  ChartData extends object,
->(): ChartControlContext<ChartData> {
-  const context = useContext(ChartControlContext);
-  if (!context) {
-    throw new Error("차트 데이터에 대한 컨텍스트를 찾을 수 없습니다.");
-  }
-  return context as ChartControlContext<ChartData>;
-}

package/src/chart/components/control/index.tsx

@@ -1,12 +0,0 @@
-import ChartControlButton from "./Button";
-import ChartControlContainer from "./Container";
-import ChartControlProvider, { useChartContext } from "./Provider";
-
-const ChartControl = {
-  Provider: ChartControlProvider,
-  useContext: useChartContext,
-  Container: ChartControlContainer,
-  Button: ChartControlButton,
-};
-
-export default ChartControl;

package/src/chart/components/custom/ActivePieSector.tsx

@@ -1,29 +0,0 @@
-"use client";
-
-import { Sector } from "recharts";
-import type { Props } from "recharts/types/shape/Sector";
-
-export default function ChartActivePieSector({
-  cx,
-  cy,
-  innerRadius,
-  outerRadius,
-  startAngle,
-  endAngle,
-  fill,
-}: Props) {
-  return (
-    <Sector
-      cx={cx}
-      cy={cy}
-      innerRadius={innerRadius}
-      outerRadius={
-        typeof outerRadius === "number" ? outerRadius + 2 : outerRadius
-      }
-      startAngle={startAngle}
-      endAngle={endAngle}
-      fill={fill}
-      cornerRadius={0}
-    />
-  );
-}

package/src/chart/components/graphs/ArcGauge.tsx

@@ -1,58 +0,0 @@
-"use client";
-
-import { useMemo } from "react";
-import { lengthFormat } from "@uniai-fe/util-functions";
-import StyledArcGauge from "../../styles/styled/arc-gauge";
-import ArcGaugeTrack from "../../svg/gauge-track.min.svg";
-
-/**
- * 차트 템플릿; 반원 게이지
- * - 체중균일도 차트 등에 사용
- */
-export default function ChartArcGauge({
-  className,
-  value,
-  unit,
-}: {
-  className?: string;
-  value: number | "";
-  unit: string;
-}) {
-  const v = useMemo((): string => {
-    if (typeof value !== "number") return "-";
-    return lengthFormat(value, 0);
-  }, [value]);
-
-  const level = useMemo((): number => {
-    if (typeof value !== "number") return 0;
-
-    if (value <= 25) return 1;
-    else if (25 < value && value <= 50) return 2;
-    else if (50 < value && value <= 75) return 3;
-    else if (75 < value) return 4;
-    return 0;
-  }, [value]);
-
-  const degree = useMemo((): number => {
-    if (typeof value !== "number") return 0;
-
-    if (value <= 0) return 0;
-    else if (value > 100) return 180;
-    return ((value * Math.PI) / 180) * 100;
-  }, [value]);
-
-  return (
-    <StyledArcGauge.container className={className}>
-      <StyledArcGauge.track>
-        <ArcGaugeTrack />
-        {value !== "" && (
-          <StyledArcGauge.point $level={level} $degree={degree} />
-        )}
-      </StyledArcGauge.track>
-      <StyledArcGauge.value>
-        <strong>{v}</strong>
-        <span>{unit}</span>
-      </StyledArcGauge.value>
-    </StyledArcGauge.container>
-  );
-}