@noraent/nora-datagrid 0.0.1

package/lib/esm/hooks/internal/useInternalPrivateApi.js

@@ -0,0 +1,127 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import { useGridApiMethod } from "../useGridApiMethod";
+import { defaultProps } from "../../common/constants";
+import { classes } from "../../types/classes";
+export default function useInternalPrivateApi(apiRef) {
+    const setText = React.useCallback(() => { }, []);
+    const setGridContainer = React.useCallback((ref) => {
+        apiRef.current = Object.assign(Object.assign({}, apiRef.current), { store: Object.assign(Object.assign({}, apiRef.current.store), { gridContainer: ref }) });
+    }, []);
+    const setInitialStore = React.useCallback((props) => {
+        const basicStore = setBasicStore(props);
+        const columns = basicStore.columns.map((column, index) => (Object.assign(Object.assign({}, column), { __uuid: window.crypto.randomUUID(), __dataColindex: index, __ariaColindex: index + 1 })));
+        apiRef.current = Object.assign(Object.assign({}, apiRef.current), { store: Object.assign(Object.assign({}, apiRef.current.store), { original: basicStore, state: Object.assign(Object.assign({}, basicStore), { columns }), 
+                // 현재 내부에서 사용되는 속성은 수동으로 초기화 해야함.
+                __cellRange: [], __cellRangeTemp: {} }) });
+        return apiRef.current;
+    }, []);
+    const setBasicStore = React.useCallback((props) => {
+        const myFilterTypeKeys = ["columns", "dataSource", "cellFocus"];
+        return myFilterTypeKeys.reduce((acc, key) => {
+            if (key in props) {
+                if (key === "dataSource") {
+                    const dataSource = props[key];
+                    acc[key] = dataSource.map((_a, index) => {
+                        var { height = defaultProps.height } = _a, data = __rest(_a, ["height"]);
+                        return (Object.assign(Object.assign({ height }, data), { __dataRowindex: index, __ariaRowindex: index + 1 }));
+                    });
+                }
+                else if (key === "columns") {
+                    const columns = props[key];
+                    acc[key] = columns.map((_a) => {
+                        var { width = defaultProps.width } = _a, data = __rest(_a, ["width"]);
+                        return (Object.assign({ width }, data));
+                    });
+                }
+                else {
+                    acc[key] = props[key];
+                }
+            }
+            else {
+                acc[key] = createInstance(key);
+            }
+            return acc;
+        }, {});
+    }, []);
+    function createInstance(key) {
+        const defaultValues = {
+            cellFocus: [],
+            columns: undefined,
+            dataSource: undefined,
+            gridRef: undefined,
+            renderedRowStartEnd: undefined,
+            editStatus: undefined,
+        };
+        return defaultValues[key];
+    }
+    const scrollToRowIndex = React.useCallback((rowIndex) => {
+        const top = rowIndex * 32 - 32;
+        if (apiRef.current.store.gridContainer.current) {
+            const body = apiRef.current.store.gridContainer.current.querySelector(`.${classes.TableClasses.body.scroll.root}`);
+            if (body) {
+                body.scrollTop = top;
+            }
+        }
+    }, []);
+    const addCellRangeTemp = React.useCallback((cellRange) => {
+        const updatedCellRangeTemp = Object.assign(apiRef.current.store.__cellRangeTemp, cellRange);
+        apiRef.current = Object.assign(Object.assign({}, apiRef.current), { store: Object.assign(Object.assign({}, apiRef.current.store), { __cellRangeTemp: updatedCellRangeTemp }) });
+    }, []);
+    const setCellFocus = React.useCallback((rowIndex, colIndex) => __awaiter(this, void 0, void 0, function* () {
+        const { store } = apiRef.current;
+        const { dataSource, columns } = store.state;
+        const newCellFocus = [
+            rowIndex ? Math.max(1, Math.min(rowIndex, dataSource.length)) : undefined,
+            colIndex ? Math.max(1, Math.min(colIndex, columns.length)) : undefined,
+        ];
+        store.state.cellFocus = newCellFocus;
+        return newCellFocus;
+    }), []);
+    const getCellFocus = React.useCallback(() => {
+        const { store } = apiRef.current;
+        return store.state.cellFocus;
+    }, []);
+    const setEditStatus = React.useCallback((editStatus) => __awaiter(this, void 0, void 0, function* () {
+        const { store } = apiRef.current;
+        store.state.editStatus = editStatus;
+        return store.state.editStatus;
+    }), []);
+    const cellByRowIndex = React.useCallback((rowIndex, fieldId, value) => __awaiter(this, void 0, void 0, function* () {
+        const { store } = apiRef.current;
+        store.state.dataSource[rowIndex] = Object.assign(Object.assign({}, store.state.dataSource[rowIndex]), { [fieldId]: value });
+        return store.state.dataSource;
+    }), []);
+    const apiMethods = {
+        setText,
+        setGridContainer,
+        setInitialStore,
+        scrollToRowIndex,
+        addCellRangeTemp,
+        setCellFocus,
+        getCellFocus,
+        setEditStatus,
+        cellByRowIndex,
+    };
+    useGridApiMethod(apiRef, apiMethods, "private");
+    return {};
+}

package/lib/esm/hooks/useGridApiContext.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import { DataGridPrivateApi, GirdApiCommon } from "../types/dataGridProps";
+declare function useGridApiContext(): React.MutableRefObject<GirdApiCommon<DataGridPrivateApi>>;
+export default useGridApiContext;

package/lib/esm/hooks/useGridApiContext.js

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { GridApiContext } from "../provider/GridApiContext";
+function useGridApiContext() {
+    const gridRef = React.useContext(GridApiContext);
+    if (gridRef === undefined) {
+        throw new Error(`🧑‍💻API 컨텍스트를 찾을 수 없습니다.`);
+    }
+    return gridRef;
+}
+export default useGridApiContext;

package/lib/esm/hooks/useGridApiMethod.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { DataGridPrivateApi, DataGridPublicApi, GirdApiCommon, Visibility } from "../types/dataGridProps";
+/**
+ * 객체나 함수를 등록하고 나중에 호출하거나 참조할 때 사용합니다.
+ * @private
+ * @namespace NoraDataGrid.init.useGridApiMethod
+ */
+export declare function useGridApiMethod(apiRef: React.MutableRefObject<GirdApiCommon<DataGridPrivateApi>>, apiMethods: Partial<DataGridPublicApi | DataGridPrivateApi>, visibility: Visibility): void;

package/lib/esm/hooks/useGridApiMethod.js

@@ -0,0 +1,18 @@
+import React from "react";
+/**
+ * 객체나 함수를 등록하고 나중에 호출하거나 참조할 때 사용합니다.
+ * @private
+ * @namespace NoraDataGrid.init.useGridApiMethod
+ */
+export function useGridApiMethod(apiRef, apiMethods, visibility) {
+    const apiMethodsRef = React.useRef(apiRef.current);
+    const initMethods = React.useCallback(() => {
+        if (!apiMethodsRef.current) {
+            return;
+        }
+        apiRef.current.register(visibility, apiMethods);
+    }, [visibility]);
+    React.useEffect(() => {
+        initMethods();
+    }, []);
+}

package/lib/esm/hooks/useGridInitialization.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import DataGridBasicProps, { GirdApiCommon } from "../types/dataGridProps";
+export declare function useGridInitialization(apiRef: DataGridBasicProps["gridRef"], props: DataGridBasicProps): React.MutableRefObject<GirdApiCommon<import("../types/dataGridProps").DataGridPrivateApiModel>>;

package/lib/esm/hooks/useGridInitialization.js

@@ -0,0 +1,62 @@
+import React from "react";
+import useTest from "./internal/useInternalPrivateApi";
+import usePublicTest from "./external/usePublicTest";
+import { useGridApiMethod } from "./useGridApiMethod";
+export function useGridInitialization(apiRef, props) {
+    // const memoizedProps = React.useMemo(() => _.cloneDeep(props), [props]); // props를 메모이제이션
+    const privateAipRef = useGridApiInitialization(apiRef, Object.assign({}, props));
+    usePublicTest(privateAipRef);
+    useTest(privateAipRef);
+    //test
+    const [, rawForceUpdate] = React.useState();
+    // React.useState<GirdApiCommon<DataGridPublicApi>["store"]>();
+    const forceUpdate = React.useCallback(() => rawForceUpdate(() => privateAipRef.current.store.state), 
+    // () => rawForceUpdate(() => privateAipRef.current.store),
+    [privateAipRef]);
+    useGridApiMethod(privateAipRef, { forceUpdate }, "public");
+    return privateAipRef;
+}
+/**
+ * 내부 또는 외부에서 사용하는 API를 등록 합니다.
+ * @private
+ * @namespace NoraDataGrid.init.useGridApiInitialization
+ */
+function useGridApiInitialization(apiRef, _props) {
+    const publicApiRef = React.useRef(null);
+    const privateApiRef = React.useRef(null);
+    if (!publicApiRef.current) {
+        publicApiRef.current = {};
+    }
+    if (!privateApiRef.current) {
+        privateApiRef.current = wrapApi(publicApiRef.current);
+    }
+    React.useImperativeHandle(apiRef, () => publicApiRef.current, []);
+    return privateApiRef;
+}
+function wrapApi(apiRef) {
+    const privateOnlyApi = {};
+    privateOnlyApi.getPublicApi = () => apiRef;
+    privateOnlyApi.register = (visibility, methods) => {
+        Object.keys(methods).forEach((methodName) => {
+            if (visibility === "public") {
+                apiRef[methodName] = methods[methodName];
+            }
+            else {
+                privateOnlyApi[methodName] = methods[methodName];
+            }
+        });
+    };
+    const handler = {
+        get: (obj, prop) => {
+            if (prop in obj) {
+                return obj[prop];
+            }
+            return privateOnlyApi[prop];
+        },
+        set: (obj, prop, value) => {
+            obj[prop] = value;
+            return true;
+        },
+    };
+    return new Proxy(privateOnlyApi, handler);
+}

package/lib/esm/index.d.ts

@@ -0,0 +1 @@
+export { DataGrid } from "./DataGrid";

package/lib/esm/index.js

@@ -0,0 +1 @@
+export { DataGrid } from "./DataGrid";

package/lib/esm/main.js

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

package/lib/esm/provider/GridApiContext.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const GridApiContext: React.Context<unknown>;

package/lib/esm/provider/GridApiContext.js

@@ -0,0 +1,5 @@
+import React from "react";
+export const GridApiContext = React.createContext(undefined);
+if (process.env.NODE_ENV !== "production") {
+    GridApiContext.displayName = "NoraDataGridGridApiContext";
+}

package/lib/esm/provider/GridStoreContent.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { DataGridPrivateApi, DataGridStoreDef, GirdApiCommon, Store } from "../types/dataGridProps";
+export declare const GridStoreContentProvider: React.FC<GridStoreContentProviderProps>;
+export declare const useStore: () => Store<DataGridStoreDef>;
+export declare const useSelector: <T, Selected>(selector: (state: T) => Selected) => Selected;
+interface GridStoreContentProviderProps {
+    children: React.ReactNode;
+    value: React.MutableRefObject<GirdApiCommon<DataGridPrivateApi>>;
+}
+export {};

package/lib/esm/provider/GridStoreContent.js

@@ -0,0 +1,140 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import React, { createContext, useContext, useEffect } from "react";
+import { Store, } from "../types/dataGridProps";
+const StoreContext = createContext(null);
+export const GridStoreContentProvider = ({ children, value }) => {
+    // const gridRef = useGridApiContext();
+    // const [columns, setColumns] = React.useState(
+    //   gridRef.current.store?.state?.columns ?? []
+    // );
+    // const [dataSource, setDataSource] = React.useState(
+    //   gridRef.current.store?.state?.dataSource ?? []
+    // );
+    if (!value.current.store)
+        return _jsx(_Fragment, {});
+    const storeRef = React.useRef(null);
+    if (!storeRef.current) {
+        storeRef.current = new Store(value.current.store);
+        return _jsx(_Fragment, {});
+    }
+    // useEffect(() => {
+    //   storeRef.current?.setState(["state"], value.current.store);
+    // }, []);
+    // useEffect(() => {
+    //   const handleColumnsChange = () => {
+    //     setColumns([...gridRef.current.store.state.columns]);
+    //   };
+    //   const handleDataSourceChange = () => {
+    //     setDataSource([...gridRef.current.store.state.dataSource]);
+    //   };
+    //   if (!storeRef.current) return;
+    //   storeRef.current.setState(
+    //     ["state", "columns"],
+    //     gridRef.current.store?.state?.columns ?? []
+    //   );
+    //   const unsubscribeColumns = storeRef.current.subscribe(handleColumnsChange);
+    //   const unsubscribeDataSource = storeRef.current.subscribe(
+    //     handleDataSourceChange
+    //   );
+    //   return () => {
+    //     unsubscribeColumns();
+    //     unsubscribeDataSource();
+    //   };
+    // }, [gridRef]);
+    return (_jsx(StoreContext.Provider, { value: new Store(value.current.store), children: children }));
+};
+export const useStore = () => {
+    const store = useContext(StoreContext);
+    if (!store) {
+        // throw new Error("useStore must be used within a StoreProvider");
+        return false;
+    }
+    return store;
+};
+function areArraysEqual(arr1, arr2) {
+    if (arr1.length !== arr2.length) {
+        return false;
+    }
+    // 각 요소를 순서대로 비교
+    for (let i = 0; i < arr1.length; i++) {
+        if (arr1[i] !== arr2[i]) {
+            return false;
+        }
+    }
+    return true;
+}
+function isArrayInSet(set, arr) {
+    for (const item of set) {
+        if (areArraysEqual(item, arr)) {
+            return true;
+        }
+    }
+    return false;
+}
+export const useSelector = (selector) => {
+    const store = useContext(StoreContext);
+    if (!store) {
+        throw new Error("useSelector must be used within a StoreProvider");
+    }
+    const [selectedState, setSelectedState] = React.useState(() => selector(store.getState()));
+    const accessedPaths = React.useRef(new Set());
+    const previousValue = React.useRef(selectedState);
+    useEffect(() => {
+        const createPathProxy = (target, currentPath = []) => {
+            return new Proxy(target, {
+                get(obj, prop) {
+                    if (typeof prop === "symbol" ||
+                        prop === "toJSON" ||
+                        prop === "toString") {
+                        return obj[prop];
+                    }
+                    const newPath = [...currentPath, prop];
+                    const value = obj[prop];
+                    // 정확한 경로 저장
+                    if (currentPath.length > 0 || prop === "state") {
+                        if (!isArrayInSet(accessedPaths.current, newPath)) {
+                            accessedPaths.current.add(newPath);
+                        }
+                    }
+                    if (value && typeof value === "object" && !Array.isArray(value)) {
+                        return createPathProxy(value, newPath);
+                    }
+                    return value;
+                },
+            });
+        };
+        accessedPaths.current.clear();
+        const proxiedState = createPathProxy(store.getState());
+        selector(proxiedState);
+        const subscriptions = Array.from(accessedPaths.current).map((path) => {
+            return store.subscribe(path, () => {
+                const newState = selector(store.getState());
+                // 값이 실제로 변경되었을 때만 상태 업데이트
+                if (!isEqual(previousValue.current, newState)) {
+                    previousValue.current = newState;
+                    setSelectedState(newState);
+                }
+            });
+        });
+        return () => {
+            subscriptions.forEach((unsubscribe) => unsubscribe());
+        };
+    }, [store, selector]);
+    return selectedState;
+};
+// 간단한 깊은 비교 함수
+const isEqual = (a, b) => {
+    if (a === b)
+        return true;
+    if (typeof a !== "object" ||
+        a === null ||
+        typeof b !== "object" ||
+        b === null) {
+        return false;
+    }
+    const keysA = Object.keys(a);
+    const keysB = Object.keys(b);
+    if (keysA.length !== keysB.length)
+        return false;
+    return keysA.every((key) => isEqual(a[key], b[key]));
+};

package/lib/esm/types/classes/index.d.ts

@@ -0,0 +1 @@
+export * as classes from "./styled";

package/lib/esm/types/classes/index.js

@@ -0,0 +1 @@
+export * as classes from "./styled";

package/lib/esm/types/classes/styled.d.ts

@@ -0,0 +1,55 @@
+/**
+ * test
+ */
+export declare const TableClasses: {
+    common: {
+        "--nora-data-grid-primary-main": string;
+    };
+    container: {
+        root: string;
+        classes: string[];
+    };
+    title: {
+        root: string;
+        classes: string[];
+        header: {
+            root: string;
+            row: {
+                root: string;
+                cell: {
+                    root: string;
+                    classes: string[];
+                    con: {
+                        root: string;
+                        classes: string[];
+                    };
+                };
+            };
+            resize: {
+                root: string;
+                classes: never[];
+            };
+        };
+    };
+    body: {
+        root: string;
+        classes: string[];
+        scroll: {
+            root: string;
+        };
+        row: {
+            root: string;
+            hover: string;
+            focus: string;
+            cell: {
+                root: string;
+                classes: string[];
+                con: {
+                    root: string;
+                    classes: string[];
+                };
+            };
+        };
+    };
+    footer: string;
+};

package/lib/esm/types/classes/styled.js

@@ -0,0 +1,56 @@
+import { foundation } from "../../common/foundation";
+/**
+ * test
+ */
+export const TableClasses = {
+    common: {
+        "--nora-data-grid-primary-main": foundation.$scale.color.black,
+    },
+    container: {
+        root: "nora-data-grid-container-root",
+        classes: ["nora-data-grid-container"],
+    },
+    title: {
+        root: "nora-data-grid__title-root",
+        classes: ["nora-data-grid__title"],
+        header: {
+            root: "CuiDataGridHeader-root",
+            row: {
+                root: "CuiDataGridRow-root",
+                cell: {
+                    root: "nora-data-grid__header_cell-root",
+                    classes: ["nora-data-grid__header_cell"],
+                    con: {
+                        root: "nora-data-grid__con-root",
+                        classes: ["nora-data-grid__con"],
+                    },
+                },
+            },
+            resize: {
+                root: "CuiDataGrid-resize-root",
+                classes: [],
+            },
+        },
+    },
+    body: {
+        root: "nora-data-grid__body-root",
+        classes: ["nora-data-grid__body"],
+        scroll: {
+            root: "nora-data-grid__scroll-root",
+        },
+        row: {
+            root: "CuiDataGridRow-root",
+            hover: "",
+            focus: "",
+            cell: {
+                root: "nora-data-grid__body_cell-root",
+                classes: ["nora-data-grid__body_cell"],
+                con: {
+                    root: "nora-data-grid__con-root",
+                    classes: ["nora-data-grid__con"],
+                },
+            },
+        },
+    },
+    footer: "nora-data-grid__footer",
+};

package/lib/esm/types/dataGridCoreEnum.d.ts

@@ -0,0 +1,6 @@
+export declare enum EditStatus {
+    EDITING = "\uC218\uC815\uC911",
+    EDITABLE = "\uC218\uC815\uAC00\uB2A5",
+    NON_EDITABLE = "\uC218\uC815\uBD88\uAC00\uB2A5",
+    IME_EDITING = "IME\uC785\uB825\uC911"
+}

package/lib/esm/types/dataGridCoreEnum.js

@@ -0,0 +1,7 @@
+export var EditStatus;
+(function (EditStatus) {
+    EditStatus["EDITING"] = "\uC218\uC815\uC911";
+    EditStatus["EDITABLE"] = "\uC218\uC815\uAC00\uB2A5";
+    EditStatus["NON_EDITABLE"] = "\uC218\uC815\uBD88\uAC00\uB2A5";
+    EditStatus["IME_EDITING"] = "IME\uC785\uB825\uC911";
+})(EditStatus || (EditStatus = {}));

package/lib/esm/types/dataGridCoreProps.d.ts

@@ -0,0 +1,71 @@
+export type DataGridColumn = DataGridColumnModel;
+export type DataGridColumns = Array<DataGridPrivateColumnModel>;
+export type DataGridDataSource = Array<DataGridPrivateDataSourceModel>;
+/**
+ * Grid Column을 구성하는 기본 구조 입니다.
+ * @public
+ * @namespace NoraDataGrid.DataGridColumnModel
+ */
+interface DataGridColumnModel {
+    fieldId: string;
+    fieldName: string;
+    width?: string;
+}
+/**
+ * Grid Column을 구성하는 내부적 구조 입니다.
+ * @private
+ * @namespace NoraDataGrid.DataGridPrivateColumnModel
+ */
+export interface DataGridPrivateColumnModel extends DataGridColumnModel {
+    __uuid: string;
+    __ariaColindex: number;
+    __dataColindex: number;
+}
+/**
+ * Grid DataSource를 구성하는 기본 구조 입니다.
+ * @private
+ * @namespace NoraDataGrid.DataGridDataSourceModel
+ */
+export type DataGridDataSourceModel = Record<string, any> & {
+    height?: number;
+};
+/**
+ * Grid DataSource를 구성하는 내부적 구조 입니다.
+ * @private
+ * @namespace NoraDataGrid.DataGridPrivateDataSourceModel
+ */
+export interface DataGridPrivateDataSourceModel extends DataGridDataSourceModel {
+    __ariaRowindex: number;
+    __dataRowindex: number;
+}
+/**
+ * 특정 문자로 시작하는 타입 제거
+ * OmitStartsWith Object 경우
+ */
+export type OmitStartsWith<T, S extends string> = {
+    [K in keyof T as K extends string ? (K extends `${S}${string}` ? never : K) : K]: T[K];
+};
+/**
+ * 특정 문자로 시작하는 타입 제거
+ * OmitStartsWithArray Array<Object> 경우
+ */
+export type OmitStartsWithArray<T, S extends string> = Array<OmitStartsWith<T extends Array<infer U> ? U : never, S>>;
+/**
+ * 특정 문자로 시작하는 타입 제거
+ * DeepOmitStartsWith 재귀적으로 모든 depth를 처리하는 유틸리티 타입
+ */
+export type DeepOmitStartsWith<T, S extends string> = {
+    [K in keyof T as K extends string ? (K extends `${S}${string}` ? never : K) : K]: T[K] extends object ? DeepOmitStartsWith<T[K], S> : T[K];
+};
+/**
+ *
+ * startRowIndex
+ */
+export type CellRangeDef = {
+    startRowIndex: number;
+    endRowIndex: number;
+    columns: Array<string>;
+};
+export interface CellRangeTempDef extends Partial<CellRangeDef> {
+}
+export {};

package/lib/esm/types/dataGridCoreProps.js

@@ -0,0 +1 @@
+export {};