@opencorestack/opengridx 0.1.6 → 0.1.8

package/lib/hooks/useTreeData.ts

@@ -0,0 +1,323 @@
+import { useMemo, useState, useCallback, useEffect } from 'react';
+import { GridRowModel, GridRowId, GridTreeNode, GridFilterModel, GridSortItem } from '../types';
+import { isRowMatchingFilter } from '../utils/filtering';
+import { compareValues } from '../utils/sorting';
+
+interface UseTreeDataProps<R extends GridRowModel> {
+    rows: R[];
+    getRowId: (row: R) => GridRowId;
+    getTreeDataPath?: (row: R) => string[];
+    treeData?: boolean;
+    defaultGroupingExpansionDepth?: number;
+    filterModel?: GridFilterModel;
+    sortModel?: GridSortItem[];
+    onRowExpansionChange?: (node: GridTreeNode) => void;
+}
+
+export function useTreeData<R extends GridRowModel>(props: UseTreeDataProps<R>) {
+    const { 
+        rows, 
+        getRowId,
+        getTreeDataPath, 
+        treeData = false, 
+        defaultGroupingExpansionDepth = 0, 
+        filterModel,
+        sortModel,
+        onRowExpansionChange
+    } = props;
+
+    const { treeNodes, rootIds, groupingRows } = useMemo(() => {
+        if (!treeData || !getTreeDataPath) {
+            return { 
+                treeNodes: new Map<GridRowId, GridTreeNode>(), 
+                rootIds: [], 
+                groupingRows: [] 
+            };
+        }
+
+        const nodes = new Map<GridRowId, GridTreeNode>();
+        const roots: GridRowId[] = [];
+        const groupRows: GridRowModel[] = [];
+        const pathLookup = new Map<string, GridRowId>();
+
+        const getPathKey = (path: string[]) => path.join('/');
+
+        rows.forEach(row => {
+            const id = getRowId(row);
+            const path = getTreeDataPath(row);
+            const pathKey = getPathKey(path);
+
+            pathLookup.set(pathKey, id);
+
+            nodes.set(id, {
+                id,
+                parentId: null,
+                depth: path.length - 1,
+                groupingKey: path[path.length - 1],
+                isExpanded: false,
+                children: [],
+                serverChildrenCount: row.serverChildrenCount
+            });
+        });
+
+        rows.forEach(row => {
+            const id = getRowId(row);
+            const path = getTreeDataPath(row);
+
+            if (path.length === 1) {
+                roots.push(id);
+                return;
+            }
+
+            const ensureAncestors = (childPath: string[]) => {
+                if (childPath.length <= 1) return;
+
+                const parentPath = childPath.slice(0, -1);
+                const parentPathKey = getPathKey(parentPath);
+                let parentId = pathLookup.get(parentPathKey);
+
+                if (parentId === undefined) {
+                    parentId = `auto-group-${parentPathKey}`;
+
+                    if (!nodes.has(parentId)) {
+                        const groupLabel = parentPath[parentPath.length - 1];
+                        nodes.set(parentId, {
+                            id: parentId,
+                            parentId: null, 
+                            depth: parentPath.length - 1,
+                            groupingKey: groupLabel,
+                            isExpanded: false,
+                            children: [],
+                            label: groupLabel
+                        });
+                        pathLookup.set(parentPathKey, parentId);
+
+                        const groupRow = { 
+                            id: parentId,
+                            name: groupLabel, 
+                            _isGroupRow: true
+                        } as unknown as GridRowModel; 
+                        groupRows.push(groupRow);
+
+                        if (parentPath.length === 1) {
+                            roots.push(parentId);
+                        }
+
+                        ensureAncestors(parentPath);
+                    }
+                }
+
+                return parentId;
+            };
+
+            const parentId = ensureAncestors(path);
+
+            if (parentId !== undefined) {
+                const parentNode = nodes.get(parentId);
+                const childNode = nodes.get(id);
+
+                if (parentNode && childNode) {
+                    childNode.parentId = parentId;
+                    parentNode.children = parentNode.children || [];
+                    if (!parentNode.children.includes(id)) {
+                        parentNode.children.push(id);
+                    }
+                }
+            }
+        });
+
+        groupRows.forEach(groupRow => {
+            const groupId = groupRow.id;
+            const node = nodes.get(groupId);
+            if (!node) return;
+
+            const nodePathKey = (groupId as string).replace('auto-group-', '');
+            const nodePath = nodePathKey.split('/');
+
+            if (nodePath.length > 1) {
+                const parentPath = nodePath.slice(0, -1);
+                const parentPathKey = getPathKey(parentPath);
+                const parentId = pathLookup.get(parentPathKey);
+
+                if (parentId && nodes.has(parentId)) {
+                    node.parentId = parentId;
+                    const parentNode = nodes.get(parentId);
+                    if (parentNode) {
+                        parentNode.children = parentNode.children || [];
+                        if (!parentNode.children.includes(groupId)) {
+                            parentNode.children.push(groupId);
+                        }
+                    }
+                }
+            }
+        });
+
+        return { treeNodes: nodes, rootIds: roots, groupingRows: groupRows };
+
+    }, [rows, getTreeDataPath, treeData, getRowId]);
+
+    const initialExpandedIds = useMemo(() => {
+        if (!treeData) return new Set<GridRowId>();
+
+        const initialExpanded = new Set<GridRowId>();
+        treeNodes.forEach(node => {
+            if (node.children && node.children.length > 0) {
+                 if (defaultGroupingExpansionDepth === -1 || node.depth < defaultGroupingExpansionDepth) {
+                     initialExpanded.add(node.id);
+                 }
+            }
+        });
+        return initialExpanded;
+    }, [treeNodes, treeData, defaultGroupingExpansionDepth]);
+
+    const [expandedGroupIds, setExpandedGroupIds] = useState<Set<GridRowId>>(new Set());
+
+    useEffect(() => {
+        if (initialExpandedIds.size > 0) {
+            setExpandedGroupIds(initialExpandedIds);
+        }
+    }, [initialExpandedIds]);
+
+    const toggleExpansion = useCallback((id: GridRowId) => {
+        setExpandedGroupIds(prev => {
+            const next = new Set(prev);
+            const isExpanding = !next.has(id);
+
+            if (next.has(id)) {
+                next.delete(id);
+            } else {
+                next.add(id);
+            }
+
+            if (isExpanding && onRowExpansionChange) {
+                 const node = treeNodes.get(id);
+                 if (node) {
+                     onRowExpansionChange(node);
+                 }
+            }
+
+            return next;
+        });
+    }, [treeNodes, onRowExpansionChange]);
+
+    const getVisibleRows = useCallback(() => {
+
+        if (!treeData) return null; 
+
+        const rowLookup = new Map<GridRowId, GridRowModel>();
+        rows.forEach(r => rowLookup.set(getRowId(r), r));
+        groupingRows.forEach(r => rowLookup.set(r.id, r));
+
+        const matchesFilter = (row: GridRowModel) => {
+             return isRowMatchingFilter(row, filterModel!);
+        };
+
+        const filterCache = new Map<GridRowId, boolean>();
+
+        const isNodeVisible = (id: GridRowId): boolean => {
+            if (filterCache.has(id)) return filterCache.get(id)!;
+
+            const row = rowLookup.get(id);
+            if (!row) return false;
+
+            const selfMatch = matchesFilter(row);
+            if (selfMatch) {
+                filterCache.set(id, true);
+                return true;
+            }
+
+            const node = treeNodes.get(id);
+            if (node && node.children) {
+                const childMatch = node.children.some(childId => isNodeVisible(childId));
+                if (childMatch) {
+                     filterCache.set(id, true);
+                     return true;
+                }
+            }
+
+            filterCache.set(id, false);
+            return false;
+        };
+
+        const sortNodes = (aId: GridRowId, bId: GridRowId) => {
+            if (!sortModel || sortModel.length === 0) return 0;
+            const rowA = rowLookup.get(aId);
+            const rowB = rowLookup.get(bId);
+            if (!rowA || !rowB) return 0;
+
+            for (const sortItem of sortModel) {
+                 const valA = rowA[sortItem.field];
+                 const valB = rowB[sortItem.field];
+                 const comp = compareValues(valA, valB, sortItem.sort);
+                 if (comp !== 0) return comp;
+            }
+            return 0;
+        };
+
+        const result: GridRowModel[] = [];
+
+        const seenIds = new Set<GridRowId>();
+
+        const traverse = (ids: GridRowId[]) => {
+
+            const visibleIds = ids.filter(id => isNodeVisible(id));
+
+            visibleIds.sort(sortNodes);
+
+            visibleIds.forEach(id => {
+                if (seenIds.has(id)) return; 
+
+                const row = rowLookup.get(id);
+                const node = treeNodes.get(id);
+
+                if (row && node) {
+                    seenIds.add(id); 
+
+                    const enhancedRow = {
+                        ...row,
+                        _treeDepth: node.depth,
+                        _isExpanded: expandedGroupIds.has(id),
+                        _hasChildren: (node.children && node.children.length > 0) || (node.serverChildrenCount && node.serverChildrenCount > 0),
+                        _descendantCount: node.children ? node.children.length : 0
+                    };
+                    result.push(enhancedRow);
+
+                    if (expandedGroupIds.has(id) && node.children && node.children.length > 0) {
+                        traverse(node.children);
+                    }
+                }
+            });
+        };
+
+        traverse(rootIds);
+        return result;
+
+    }, [treeData, rows, groupingRows, rootIds, treeNodes, expandedGroupIds, filterModel, sortModel, getRowId]);
+
+    const isGroupExpanded = useCallback((id: GridRowId) => expandedGroupIds.has(id), [expandedGroupIds]);
+    const getNode = useCallback((id: GridRowId) => treeNodes.get(id), [treeNodes]);
+
+    const getNodePath = useCallback((id: GridRowId): string[] => {
+        const path: string[] = [];
+        let currentId: GridRowId | null = id;
+
+        while (currentId !== null) {
+            const node = treeNodes.get(currentId);
+            if (!node) break;
+
+            path.unshift(node.groupingKey);
+            currentId = node.parentId;
+        }
+        return path;
+    }, [treeNodes]);
+
+    return useMemo(() => ({
+        treeNodes,
+        groupingRows,
+        toggleExpansion,
+        isGroupExpanded,
+        getVisibleRows,
+        getNode,
+        getNodePath
+    }), [treeNodes, groupingRows, toggleExpansion, isGroupExpanded, getVisibleRows, getNode, getNodePath]);
+}

package/lib/index.ts

@@ -0,0 +1,106 @@
+
+// Auto-import styles — this ensures consumers do NOT need a manual CSS import
+import './styles/opengridx.css';
+
+export { DataGrid } from './components/DataGrid/DataGrid';
+export { Cell } from './components/Cell/Cell';
+export { Row } from './components/Row/Row';
+export { Header } from './components/Header/Header';
+export { Skeleton } from './components/Skeleton/Skeleton';
+export { FilterPanel } from './components/FilterPanel';
+export { GridToolbar } from './components/Toolbar/GridToolbar';
+export type { GridToolbarProps } from './components/Toolbar/GridToolbar';
+export { GridTooltip } from './components/Tooltip/Tooltip';
+
+export { useGridApiRef } from './hooks/core/useGridApiRef';
+export { Button, Input, Checkbox } from './components/ui';
+
+export {
+    exportToCsv,
+    exportToExcel,
+    exportToJson,
+    printGrid
+} from './utils/export/index';
+
+export { exportToExcelAdvanced } from './utils/export/exportToExcelAdvanced';
+export type {
+    ExcelAdvancedExportOptions,
+    ExcelSheetDefinition,
+    ExcelColumnStyle
+} from './utils/export/exportToExcelAdvanced';
+
+export { useAggregation, formatAggregationValue } from './hooks/features/useAggregation';
+export type { UseAggregationParams, UseAggregationReturn, BuiltInAggFn } from './hooks/features/useAggregation';
+export { usePivot } from './hooks/features/usePivot';
+export type { UsePivotReturn } from './hooks/features/usePivot';
+
+export { DataGridThemeProvider } from './theme';
+export type { DataGridThemeProviderProps, GridTheme, GridThemeColors, GridThemeTypography, GridThemeSpacing, GridThemeBorders, GridThemeShadows, GridThemeGrid, GridThemeTransitions } from './theme';
+export { darkTheme, roseTheme, emeraldTheme, amberTheme, compactTheme } from './theme';
+
+export { useGridStateStorage } from './state';
+export type {
+    GridState,
+    GridInitialState,
+    GridSortingState,
+    GridFilterState,
+    GridPaginationState,
+    GridColumnsState,
+    GridDensityState,
+    UseGridStateStorageOptions,
+    UseGridStateStorageReturn,
+} from './state';
+
+export type {
+    CsvExportOptions,
+    ExcelExportOptions,
+    JsonExportOptions,
+    PrintOptions
+} from './utils/export/index';
+
+export type {
+    GridRowModel,
+    GridRowId,
+    GridColDef,
+    GridAlignment,
+    GridSortDirection,
+    GridSortModel,
+    GridSortItem,
+    GridFilterModel,
+    GridFilterItem,
+    GridFilterOperator,
+    GridFilterGroup,
+    GridPaginationModel,
+    GridRenderCellParams,
+    GridRenderHeaderParams,
+    GridValueGetterParams,
+    GridValueFormatterParams,
+    GridRowParams,
+    GridCellParams,
+    GridColumnPinning,
+    GridRowPinning,
+    GridPinnedPosition,
+    GridColumnVisibilityModel,
+    GridRowSelectionModel,
+    GridColumnOrderChangeParams,
+    GridRowOrderChangeParams,
+    GridRowGroupingModel,
+    GridAggregationModel,
+    GridAggregationResult,
+    DataGridProps,
+    GridDataSource,
+    GridGetRowsParams,
+    GridGetRowsResponse,
+
+    GridPivotModel,
+    GridPivotValueField,
+    GridPivotAggFn,
+
+    GridListViewColDef,
+    GridColumnGroup,
+    GridColumnGroupingModel,
+
+    GridApi,
+    GridTreeNode,
+    GridDetailPanelParams,
+} from './types';

package/lib/state/index.ts

@@ -0,0 +1,17 @@
+export type {
+  GridState,
+  GridInitialState,
+  GridSortingState,
+  GridFilterState,
+  GridPaginationState,
+  GridColumnsState,
+  GridDensityState,
+} from './types';
+
+export {
+  useGridStateStorage,
+} from './useGridStateStorage';
+export type {
+  UseGridStateStorageOptions,
+  UseGridStateStorageReturn,
+} from './useGridStateStorage';

package/lib/state/types.ts

@@ -0,0 +1,48 @@
+
+import type {
+  GridSortItem,
+  GridFilterModel,
+  GridPaginationModel,
+  GridColumnPinning,
+  GridColumnOrder,
+} from '../types';
+
+export interface GridSortingState {
+  sortModel: GridSortItem[];
+}
+
+export interface GridFilterState {
+  filterModel: GridFilterModel;
+}
+
+export interface GridPaginationState {
+  paginationModel: GridPaginationModel;
+  rowCount?: number;
+}
+
+export interface GridDataSourceState {
+  loading: boolean;
+  error?: any;
+}
+
+export interface GridColumnsState {
+    columnWidths: Record<string, number>;
+    columnOrder: GridColumnOrder;
+    pinnedColumns?: GridColumnPinning;
+    columnVisibilityModel?: Record<string, boolean>;
+}
+
+export interface GridDensityState {
+  density: 'compact' | 'standard' | 'comfortable';
+}
+
+export interface GridState {
+  sorting?: GridSortingState;
+  filter?: GridFilterState;
+  pagination?: GridPaginationState;
+  columns?: GridColumnsState;
+  density?: GridDensityState;
+  dataSource?: GridDataSourceState;
+}
+
+export type GridInitialState = GridState;

package/lib/state/useGridStateStorage.ts

@@ -0,0 +1,113 @@
+
+import { useRef, useCallback, useMemo, useEffect } from 'react';
+import type { GridState } from './types';
+
+export interface UseGridStateStorageOptions {
+    key: string;
+    debounceMs?: number;
+    include?: (keyof GridState)[];
+    storage?: {
+    getItem: (key: string) => string | null;
+    setItem: (key: string, value: string) => void;
+    removeItem: (key: string) => void;
+  };
+}
+
+export interface UseGridStateStorageReturn {
+    initialState: GridState | undefined;
+    onStateChange: (state: GridState) => void;
+    clearState: () => void;
+}
+
+function readFromStorage(
+  key: string,
+  storage: UseGridStateStorageOptions['storage']
+): GridState | undefined {
+  try {
+    const raw = storage!.getItem(key);
+    if (!raw) return undefined;
+    return JSON.parse(raw) as GridState;
+  } catch {
+
+    return undefined;
+  }
+}
+
+function writeToStorage(
+  key: string,
+  state: GridState,
+  include: (keyof GridState)[] | undefined,
+  storage: UseGridStateStorageOptions['storage']
+) {
+  try {
+    const toWrite = include
+      ? Object.fromEntries(
+          Object.entries(state).filter(([k]) => include.includes(k as keyof GridState))
+        )
+      : state;
+    storage!.setItem(key, JSON.stringify(toWrite));
+  } catch {
+
+  }
+}
+
+export function useGridStateStorage(
+  options: UseGridStateStorageOptions | string
+): UseGridStateStorageReturn {
+
+  const opts: UseGridStateStorageOptions = typeof options === 'string'
+    ? { key: options }
+    : options;
+
+  const {
+    key,
+    debounceMs = 300,
+    include,
+    storage = typeof window !== 'undefined' ? window.localStorage : undefined,
+  } = opts;
+
+  const initialState = useMemo(() => {
+    if (!storage) return undefined;
+    return readFromStorage(key, storage);
+
+  }, [key]); 
+
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const latestStateRef = useRef<GridState | null>(null);
+
+  const flush = useCallback(() => {
+    if (latestStateRef.current && storage) {
+      writeToStorage(key, latestStateRef.current, include, storage);
+    }
+  }, [key, include, storage]);
+
+  const onStateChange = useCallback(
+    (state: GridState) => {
+      latestStateRef.current = state;
+
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+
+      timerRef.current = setTimeout(flush, debounceMs);
+    },
+    [flush, debounceMs]
+  );
+
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+        flush();
+      }
+    };
+  }, [flush]);
+
+  const clearState = useCallback(() => {
+    if (storage) {
+      storage.removeItem(key);
+    }
+  }, [key, storage]);
+
+  return { initialState, onStateChange, clearState };
+}

package/lib/styles/base/reset.css

@@ -0,0 +1,21 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+.ogx--dragging {
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
+.ogx *:focus {
+  outline: none;
+}
+.ogx button:not(.ogx-menu-item) {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: inherit;
+}