@noraent/nora-datagrid 0.0.1

package/README.md

@@ -0,0 +1,80 @@
+![Generic badge](https://img.shields.io/badge/version-1.0.0-yellow.svg?style=flat-square&logo=Java&logoColor=white) ![Generic badge](https://img.shields.io/badge/pnpm@latest-v9.10.0-blue.svg?style=flat-square&logo=Java&logoColor=whitewhite) ![Generic badge](https://img.shields.io/badge/node-v20.17.0-red.svg?style=flat-square&logo=Java&logoColor=white)
+
+## ✨ nora-data-grid v3 개요
+
+## 🚀 Build Setup
+
+### install
+
+```
+pnpm install
+```
+
+### start
+
+```
+// http://localhost:5001
+pnpm run start
+```
+
+### build
+
+```
+pnpm build:local
+pnpm build:dev
+pnpm build:production
+```
+
+### build clean
+
+```
+pnpm clean:build
+```
+
+### Clean build and node_modules
+
+```
+pnpm clean
+```
+
+<br/>
+<br/>
+
+## 👨‍💻 스팩
+
+### 📦 @emotion/styled 설치 (채택)
+
+가볍고 성능 최적화가 잘 되어있다.
+대규모 프로젝트에 적합하고 MUI와 같은 라이브러리와 통합이 필요한 경우, 또는 복잡한 스타이링과 테마 시스템을 다루는 경우 적합함.
+
+```
+pnpm add @emotion/react @emotion/styled @emotion/css
+```
+
+### 📦 rimraf
+
+운영체제에 제약없이 설치되게 폴더를 삭제할 수 있다.
+
+```
+pnpm add rimraf
+```
+
+참고 레퍼런스
+nora-data-grid은 @leokim97제공하는 ConveGrid 코어를 기반으로 개발 되었습니다.
+일부 nameSpace 구조등 ConveGrid 기반이므로 중복될 수 있습니다.
+
+## 🚀 배포
+
+```
+ # build
+ npm run tsc-build
+ npm run publish:npm
+
+ # 배포
+ npm publish
+ or
+ npm private
+
+```
+
+npm publish --access=public

package/lib/cjs/App.d.ts

@@ -0,0 +1,10 @@
+declare function App(): import("react/jsx-runtime").JSX.Element;
+export declare const initialItemsData: () => {
+    id: number;
+    columns: {
+        id: string;
+        width: number;
+        content: string;
+    }[];
+}[];
+export default App;

package/lib/cjs/App.js

@@ -0,0 +1,142 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { DataGrid } from "./DataGrid";
+function App() {
+    const ref = React.useRef(null);
+    return (_jsxs("div", { style: { width: "1200px", height: "500px" }, children: [_jsx("button", { children: "dd" }), _jsx("button", { children: "dd" }), _jsx(DataGrid, { gridRef: ref, columns: [
+                    {
+                        fieldId: "firstName",
+                        fieldName: "코드",
+                    },
+                    {
+                        fieldId: "lastName",
+                        fieldName: "이름",
+                        width: "120",
+                    },
+                    {
+                        fieldId: "currency",
+                        fieldName: "성명",
+                        width: "120",
+                    },
+                    {
+                        fieldId: "currency4",
+                        fieldName: "국가",
+                        width: "140",
+                    },
+                    {
+                        fieldId: "currency5",
+                        fieldName: "구매링크",
+                        width: "120",
+                    },
+                    {
+                        fieldId: "currency6",
+                        fieldName: "카드",
+                        width: "130",
+                    },
+                    {
+                        fieldId: "currency7",
+                        fieldName: "카드번호",
+                        width: "120",
+                    },
+                    {
+                        fieldId: "currency8",
+                        fieldName: "currency8",
+                        width: "140",
+                    },
+                    {
+                        fieldId: "currency9",
+                        fieldName: "currency9",
+                        width: "120",
+                    },
+                    {
+                        fieldId: "currency10",
+                        fieldName: "currency10",
+                        width: "130",
+                    },
+                    {
+                        fieldId: "currency11",
+                        fieldName: "currency11",
+                        width: "120",
+                    },
+                    {
+                        fieldId: "currency12",
+                        fieldName: "currency12",
+                        width: "120",
+                    },
+                    {
+                        fieldId: "currency13",
+                        fieldName: "Currency13",
+                        width: "120",
+                    },
+                    {
+                        fieldId: "currency14",
+                        fieldName: "currency14",
+                        width: "120",
+                    },
+                    {
+                        fieldId: "currency15",
+                        fieldName: "currency15",
+                        width: "120",
+                    },
+                    {
+                        fieldId: "currency16",
+                        fieldName: "Currency16",
+                        width: "120",
+                    },
+                    {
+                        fieldId: "currency17",
+                        fieldName: "currency17",
+                        width: "120",
+                    },
+                    {
+                        fieldId: "currency18",
+                        fieldName: "currency18",
+                        width: "120",
+                    },
+                    {
+                        fieldId: "currency19",
+                        fieldName: "currency19",
+                        width: "120",
+                    },
+                    {
+                        fieldId: "currency19",
+                        fieldName: "Currency19",
+                        width: "120",
+                    },
+                    {
+                        fieldId: "currency20",
+                        fieldName: "currency20",
+                        width: "120",
+                    },
+                    {
+                        fieldId: "currency21",
+                        fieldName: "currency21",
+                        width: "120",
+                    },
+                ], dataSource: Array.from({ length: 100 }, (_, i) => {
+                    return {
+                        id: i,
+                        firstName: `test-${i}`,
+                        lastName: `lastName-${i}`,
+                        currency: `currency-${i}`,
+                        currency14: `currency14-${i}`,
+                        currency15: `currency15-${i}`,
+                        __uuid: "",
+                        // height: 30,
+                        // height: Math.floor(Math.random() * 20) + 20,
+                    };
+                }) }), _jsx("button", { children: "dd" })] }));
+}
+export const initialItemsData = () => Array.from({ length: 10 }, (_, i) => {
+    return {
+        id: i,
+        // height: 36,
+        // height: Math.floor(Math.random() * 20) + 20,
+        columns: Array.from({ length: 20 }, (_, j) => ({
+            id: `${i}-${j}`,
+            width: 150,
+            content: `Cell ${i}-${j}-`,
+        })),
+    };
+});
+export default App;

package/lib/cjs/DataGrid.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+import "./app.scss";
+export declare const DataGrid: React.MemoExoticComponent<React.ForwardRefExoticComponent<import("./types/dataGridCoreProps").DeepOmitStartsWith<Pick<import("./types/dataGridProps").DataGridBasicPropsModel, "columns" | "dataSource">, "__"> & Partial<import("./types/dataGridProps").DataGridOptionPropsModel> & React.RefAttributes<HTMLDivElement>>>;

package/lib/cjs/DataGrid.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { useGridInitialization } from "./hooks/useGridInitialization";
+import { GridApiContext } from "./provider/GridApiContext";
+import { NoraDataGrid } from "./components/NoraDataGrid";
+import "./app.scss";
+import { TwoDimensionalVirtualizedList } from "./components/TwoDimensionalVirtualizedList";
+import { GridStoreContentProvider } from "./provider/GridStoreContent";
+const DataGridMaster = React.forwardRef((props, _ref) => {
+    const { gridRef } = props;
+    const apiRef = useGridInitialization(gridRef, props);
+    const containerRef = React.useRef(null);
+    const [isPending, startTransition] = React.useTransition();
+    React.useEffect(() => {
+        startTransition(() => {
+            apiRef.current.setGridContainer(containerRef);
+            apiRef.current.setInitialStore(props);
+            // setTimeout(() => {
+            //   setIsClient(true);
+            // }, 2200);
+        });
+    }, []);
+    // const [count, setCount] = React.useState(1);
+    // React.useEffect(() => {
+    //   const id = setInterval(() => {
+    //     // 타이머 숫자가 하나씩 줄어들도록
+    //     setCount((count) => count - 1);
+    //   }, 1000);
+    //   // 0이 되면 카운트가 멈춤
+    //   if (count === 0) {
+    //     clearInterval(id);
+    //   }
+    //   return () => clearInterval(id);
+    // }, [count]);
+    return (_jsx(_Fragment, { children: _jsx(GridApiContext.Provider, { value: apiRef, children: _jsxs(GridStoreContentProvider, { value: apiRef, children: [_jsx("button", { onClick: () => { }, children: "!!" }), _jsxs(NoraDataGrid, { ref: containerRef, children: [_jsx(NoraDataGrid.Title, { children: "\uC624\uBC84\uB77C\uC774\uB4DC \uD588\uC5B4\uC6A9" }), _jsx(NoraDataGrid.Body, { children: !isPending && apiRef.current.store && _jsx(TwoDimensionalVirtualizedList, {}) })] })] }) }) }));
+});
+export const DataGrid = React.memo(DataGridMaster);

package/lib/cjs/buildPackage.json

@@ -0,0 +1,59 @@
+{
+  "name": "@noraent/nora-datagrid",
+  "version": "0.0.1",
+  "module": "./lib/esm/index.js",
+  "main": "./lib/cjs/index.js",
+  "private": false,
+  "files": [
+    "lib/"
+  ],
+  "type": "module",
+  "scripts": {
+    "start": "vite --mode on-local",
+    "build:local": "tsc -b && vite build --mode on-local",
+    "build:dev": "tsc -b && vite build --mode dev",
+    "build:production": "tsc -b && vite build --mode production",
+    "clean": "pnpm run clean:build && rimraf ./node_modules",
+    "clean:build": "rimraf ./dist",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "test": "jest",
+    "tsc-build": "tsc -p tsconfig-esm.json && tsc -p tsconfig-cjs.json",
+    "publish:npm": "rm -rf dist && mkdir dist && babel src -d dist --copy-files && npm run copy-package",
+    "copy-package": "cp package.json dist/buildPackage.json && cp package.json lib/cjs/buildPackage.json&& cp package.json lib/esm/buildPackage.json"
+  },
+  "dependencies": {
+    "@emotion/css": "^11.13.4",
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@noraent/nora-datagrid": "file:",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "rimraf": "^6.0.1",
+    "sass-embedded": "^1.79.4",
+    "vite-plugin-svgr": "^4.2.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.26.4",
+    "@babel/preset-react": "^7.26.3",
+    "@eslint/js": "^9.9.0",
+    "@types/lodash": "^4.17.16",
+    "@types/node": "^22.5.4",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "eslint": "^9.9.0",
+    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+    "eslint-plugin-react-refresh": "^0.4.9",
+    "globals": "^15.9.0",
+    "typescript": "^5.5.3",
+    "typescript-eslint": "^8.0.1",
+    "vite": "^5.4.1"
+  },
+  "babel": {
+    "presets": [
+      "@babel/preset-env",
+      "@babel/preset-react"
+    ]
+  }
+}

package/lib/cjs/common/constants/defaultProps.d.ts

@@ -0,0 +1,4 @@
+export declare const defaultProps: {
+    height: number;
+    width: number;
+};

package/lib/cjs/common/constants/defaultProps.js

@@ -0,0 +1,4 @@
+export const defaultProps = {
+    height: 32,
+    width: 20,
+};

package/lib/cjs/common/constants/index.d.ts

@@ -0,0 +1 @@
+export * from "./defaultProps";

package/lib/cjs/common/constants/index.js

@@ -0,0 +1 @@
+export * from "./defaultProps";

package/lib/cjs/common/constants/path.d.ts

@@ -0,0 +1,31 @@
+export declare const GUIDE_PATH: {
+    path: string;
+    GUIDE: {
+        path: string;
+        GETTING_STARTED: {
+            pathname: string;
+            path: string;
+        };
+        VALIDATION: {
+            pathname: string;
+            path: string;
+            icon: string;
+            REACT_HOOK_FORM_VALIDATION: {
+                pathname: string;
+                path: string;
+            };
+            REACT_HOOK_FORM_AND_ZOD_VALIDATION: {
+                pathname: string;
+                path: string;
+            };
+        };
+    };
+};
+export declare const buildGuidePath: (...paths: string[]) => string;
+export declare const buildFullPath: (path: string) => string;
+export interface PathNode {
+    path: string;
+    pathname?: string;
+    icon?: string;
+    [key: string]: PathNode | string | undefined;
+}

package/lib/cjs/common/constants/path.js

@@ -0,0 +1,45 @@
+export const GUIDE_PATH = {
+    path: "/",
+    GUIDE: {
+        path: "guide",
+        GETTING_STARTED: {
+            pathname: "시작하기",
+            path: "getting-started",
+        },
+        VALIDATION: {
+            pathname: "유요성 검증 가이드",
+            path: "validation",
+            icon: "🚀",
+            REACT_HOOK_FORM_VALIDATION: {
+                pathname: "react-hook-form을 통한 유효성 검증",
+                path: "react-hook-form",
+            },
+            REACT_HOOK_FORM_AND_ZOD_VALIDATION: {
+                pathname: "ZOD를 통한 유효성 검증",
+                path: "zod",
+            },
+        },
+    },
+};
+export const buildGuidePath = (...paths) => `/${paths.join("/")}`;
+export const buildFullPath = (path) => {
+    const tracePath = (target, currentPath = "") => {
+        // 현재 객체에서 path가 있는 경우
+        for (const key in target) {
+            if (target[key] && typeof target[key] === "object") {
+                const newPath = currentPath ? `${currentPath}/${target[key].path}` : target[key].path;
+                // 하위 객체 탐색
+                if (target[key].path === path) {
+                    return newPath;
+                }
+                // 재귀적으로 하위 경로를 추적
+                const nestedPath = tracePath(target[key], newPath);
+                if (nestedPath)
+                    return nestedPath;
+            }
+        }
+        return "";
+    };
+    // 전체 경로를 반환
+    return "/" + tracePath(GUIDE_PATH);
+};

package/lib/cjs/common/constants/utils.js

@@ -0,0 +1 @@
+"use strict";

package/lib/cjs/common/foundation/index.d.ts

@@ -0,0 +1,4 @@
+import * as $scale from "./scale";
+export declare const foundation: {
+    $scale: typeof $scale;
+};

package/lib/cjs/common/foundation/index.js

@@ -0,0 +1,4 @@
+import * as $scale from "./scale";
+export const foundation = {
+    $scale,
+};

package/lib/cjs/common/foundation/scale/color/color.d.ts

@@ -0,0 +1,44 @@
+export declare const white = "#FFFFFF";
+export declare const black = "#000000";
+export declare const primary0 = "#1F0757";
+export declare const primary5 = "#250868";
+export declare const primary10 = "#2B0A7A";
+export declare const primary15 = "#310B8B";
+export declare const primary20 = "#370D9D";
+export declare const primary25 = "#3E0EAE";
+export declare const primary30 = "#4410C0";
+export declare const primary35 = "#4A11D1";
+export declare const primary40 = "#5013E3";
+export declare const primary45 = "#5715F5";
+export declare const primary50 = "#6528F5";
+export declare const primary55 = "#733CF6";
+export declare const primary60 = "#8150F7";
+export declare const primary65 = "#8F63F8";
+export declare const primary70 = "#9D77F9";
+export declare const primary75 = "#BA9FFB";
+export declare const primary80 = "#D6C6FD";
+export declare const primary85 = "#E4DAFE";
+export declare const primary90 = "#F3EEFF";
+export declare const primary95 = "#F6F2FF";
+export declare const primary100 = "#F9F7FF";
+export declare const gray0 = "#000000";
+export declare const gray5 = "#0C0C0C";
+export declare const gray10 = "#191919";
+export declare const gray15 = "#252626";
+export declare const gray20 = "#323233";
+export declare const gray25 = "#3F3F40";
+export declare const gray30 = "#555353";
+export declare const gray35 = "#58595A";
+export declare const gray40 = "#646567";
+export declare const gray45 = "#717274";
+export declare const gray50 = "#7E7F80";
+export declare const gray55 = "#8A8B8D";
+export declare const gray60 = "#8b99a6";
+export declare const gray65 = "#A3A5A7";
+export declare const gray70 = "#B0B2B4";
+export declare const gray75 = "#BDBEC1";
+export declare const gray80 = "#C9CBCE";
+export declare const gray85 = "#D7DBE0";
+export declare const gray90 = "#DBE1EA";
+export declare const gray95 = "#eef3fa";
+export declare const gray100 = "#FAFBFD";

package/lib/cjs/common/foundation/scale/color/color.js

@@ -0,0 +1,46 @@
+// 디자이너와 협의 후 수정해주세요.
+export const white = "#FFFFFF";
+export const black = "#000000";
+/* Colors= */
+export const primary0 = "#1F0757";
+export const primary5 = "#250868";
+export const primary10 = "#2B0A7A";
+export const primary15 = "#310B8B";
+export const primary20 = "#370D9D";
+export const primary25 = "#3E0EAE";
+export const primary30 = "#4410C0";
+export const primary35 = "#4A11D1";
+export const primary40 = "#5013E3";
+export const primary45 = "#5715F5";
+export const primary50 = "#6528F5";
+export const primary55 = "#733CF6";
+export const primary60 = "#8150F7";
+export const primary65 = "#8F63F8";
+export const primary70 = "#9D77F9";
+export const primary75 = "#BA9FFB";
+export const primary80 = "#D6C6FD";
+export const primary85 = "#E4DAFE";
+export const primary90 = "#F3EEFF";
+export const primary95 = "#F6F2FF";
+export const primary100 = "#F9F7FF";
+export const gray0 = "#000000";
+export const gray5 = "#0C0C0C";
+export const gray10 = "#191919";
+export const gray15 = "#252626";
+export const gray20 = "#323233";
+export const gray25 = "#3F3F40";
+export const gray30 = "#555353"; // nora (@Leokim 기반컬러... 나머지 컬럴값 정의 필요)
+export const gray35 = "#58595A";
+export const gray40 = "#646567";
+export const gray45 = "#717274";
+export const gray50 = "#7E7F80";
+export const gray55 = "#8A8B8D";
+export const gray60 = "#8b99a6"; // nora (@Leokim 기반컬러... 나머지 컬럴값 정의 필요)
+export const gray65 = "#A3A5A7";
+export const gray70 = "#B0B2B4";
+export const gray75 = "#BDBEC1";
+export const gray80 = "#C9CBCE";
+export const gray85 = "#D7DBE0"; // nora (@Leokim 기반컬러... 나머지 컬럴값 정의 필요)
+export const gray90 = "#DBE1EA"; // nora (@Leokim 기반컬러... 나머지 컬럴값 정의 필요)
+export const gray95 = "#eef3fa"; // nora (@Leokim 기반컬러... 나머지 컬럴값 정의 필요)
+export const gray100 = "#FAFBFD"; // nora (@Leokim 기반컬러... 나머지 컬럴값 정의 필요)

package/lib/cjs/common/foundation/scale/color/index.d.ts

@@ -0,0 +1 @@
+export * from "./color";

package/lib/cjs/common/foundation/scale/color/index.js

@@ -0,0 +1 @@
+export * from "./color";

package/lib/cjs/common/foundation/scale/index.d.ts

@@ -0,0 +1,2 @@
+export * as layout from "./layout";
+export * as color from "./color";

package/lib/cjs/common/foundation/scale/index.js

@@ -0,0 +1,2 @@
+export * as layout from "./layout";
+export * as color from "./color";

package/lib/cjs/common/foundation/scale/layout/breakpoints.d.ts

@@ -0,0 +1,4 @@
+export declare const xl = "1536px";
+export declare const lg = "1200px";
+export declare const md = "900px";
+export declare const sm = "600px";

package/lib/cjs/common/foundation/scale/layout/breakpoints.js

@@ -0,0 +1,6 @@
+// Reference https://gs.statcounter.com/screen-resolution-stats/desktop/worldwide
+// Reference https://mui.com/material-ui/customization/breakpoints/
+export const xl = "1536px";
+export const lg = "1200px";
+export const md = "900px";
+export const sm = "600px";

package/lib/cjs/common/foundation/scale/layout/index.d.ts

@@ -0,0 +1 @@
+export * from "./size";

package/lib/cjs/common/foundation/scale/layout/index.js

@@ -0,0 +1 @@
+export * from "./size";

package/lib/cjs/common/foundation/scale/layout/size.d.ts

@@ -0,0 +1,6 @@
+export declare const tabletContentMaxWidth = "900px";
+export declare const tabletContentMinWidth = "600px";
+export declare const tabletContentPadding = "12px";
+export declare const pcContentMaxWidth = "1536px";
+export declare const pcContentMinWidth = "1200px";
+export declare const pcContentPadding = "24px";

package/lib/cjs/common/foundation/scale/layout/size.js

@@ -0,0 +1,7 @@
+import { lg, md, sm, xl } from "./breakpoints";
+export const tabletContentMaxWidth = md;
+export const tabletContentMinWidth = sm;
+export const tabletContentPadding = "12px";
+export const pcContentMaxWidth = xl;
+export const pcContentMinWidth = lg;
+export const pcContentPadding = "24px";

package/lib/cjs/common/styled/assets/components/index.d.ts

@@ -0,0 +1 @@
+export * from "./loading/Loading";

package/lib/cjs/common/styled/assets/components/index.js

@@ -0,0 +1 @@
+export * from "./loading/Loading";

package/lib/cjs/common/styled/assets/components/loading/Loading.d.ts

@@ -0,0 +1,2 @@
+import Loading from "../../svg/loading/Loading.svg?react";
+export { Loading as LoadingSvg };

package/lib/cjs/common/styled/assets/components/loading/Loading.js

@@ -0,0 +1,2 @@
+import Loading from "../../svg/loading/Loading.svg?react";
+export { Loading as LoadingSvg };

package/lib/cjs/common/styled/assets/index.d.ts

@@ -0,0 +1 @@
+export * from "./components";

package/lib/cjs/common/styled/assets/index.js

@@ -0,0 +1 @@
+export * from "./components";