@grampro/kit 0.0.0-stage → 2.4.1

package/source/legacy-components/datagrid/context/GridContext.tsx

@@ -0,0 +1,215 @@
+import React, { createContext, useContext } from "react";
+import type { GridContextType, GridProps } from "../type";
+import { gridStyles } from "../../globalStyle";
+import {
+  useDataSource,
+  useColumns,
+  usePagination,
+  useSearch,
+  useFiltering,
+  useRowSelection,
+} from "../hooks";
+
+const GridContext = createContext<GridContextType | undefined>(undefined);
+
+export const GridProvider: React.FC<{
+  children: React.ReactNode;
+  props: GridProps;
+}> = ({ children, props }) => {
+  const {
+    dataSource,
+    columns = [],
+    enableSearch = false,
+    lazy = false,
+    enableExcelExport = false,
+    excelName = "data",
+    enablePdfExport = false,
+    pdfName = "data",
+    pdfOptions = {},
+    selectAll = false,
+    onSelectRow,
+    isFetching,
+    gridColumnStyleSelectAll = "px-4 text-xs",
+    gridColumnStyle = "p-2 text-xs",
+    showTotalPages = false,
+    onSearch = () => {},
+    onToolbarButtonClick = () => {},
+    initialFilters = [],
+    initialSearchParam = "",
+  } = props;
+
+  // Resolve pageSize with fallbacks
+  const resolvedPageSize = props.pageSize || props.pageSettings?.pageNumber || 10;
+  const resolvedPageSettings = {
+    pageNumber: resolvedPageSize,
+    totalCount: props.pageSettings?.totalCount,
+  };
+
+  // Resolve callback aliases
+  const resolvedRowChange = props.onRowClick || props.rowChange || (() => {});
+  const resolvedPageStatus = props.onPageChange || props.pageStatus || (() => {});
+  const resolvedActiveFilterArrayValue = props.onFilterChange || props.activeFilterArrayValue;
+  const resolvedSearchParamValue = props.onSearchChange || props.searchParamValue || (() => {});
+
+  // Resolve CSS classes using design tokens from theme presets
+  const gridContainerClass = props.gridContainerClass || gridStyles.container;
+  const gridButtonClass = props.gridButtonClass || gridStyles.button;
+  const tableHeaderStyle = props.tableHeaderStyle || gridStyles.tableHeader;
+  const gridToolbarClass = props.gridToolbarClass || gridStyles.toolbar;
+  const gridPaginationClass = props.gridPaginationClass || gridStyles.pagination;
+  const gridRowEvenClass = props.gridRowEvenClass || gridStyles.rowEven;
+  const gridRowOddClass = props.gridRowOddClass || gridStyles.rowOdd;
+  const gridRowSelectedClass = props.gridRowSelectedClass || gridStyles.rowSelected;
+
+  // Data source management
+  const {
+    workingDataSource,
+    setWorkingDataSource,
+    fallbackSourceData,
+    totalPages,
+    setTotalPages,
+  } = useDataSource(dataSource, resolvedPageSettings, lazy);
+
+  // Column management
+  const { workingColumns, setWorkingColumns } = useColumns(
+    columns,
+    workingDataSource,
+  );
+
+  // Pagination management
+  const {
+    currentPage,
+    pageStart,
+    pageEnd,
+    nextPage,
+    prevPage,
+    goToEndPage,
+    goToFirstPage,
+    goToPage,
+    resetPage,
+  } = usePagination(
+    totalPages,
+    lazy,
+    workingDataSource,
+    resolvedPageStatus,
+  );
+
+  // Search functionality
+  const { searchParam, handleSearchInput, handleSearch } = useSearch({
+    workingDataSource,
+    setWorkingDataSource,
+    fallbackSourceData,
+    dataSource,
+    lazy,
+    pageSettings: resolvedPageSettings,
+    resetPage,
+    setTotalPages,
+    searchParamValue: resolvedSearchParamValue,
+    initialSearchParam,
+  });
+
+  // Filtering functionality
+  const {
+    activeFilterArray,
+    toggleFilterPopup,
+    handleApplyFilter,
+    clearFilter,
+    handleFilterAction,
+  } = useFiltering({
+    columns,
+    workingColumns,
+    setWorkingColumns,
+    workingDataSource,
+    setWorkingDataSource,
+    dataSource,
+    fallbackSourceData,
+    resetPage,
+    setTotalPages,
+    pageSettings: resolvedPageSettings,
+    activeFilterArrayValue: resolvedActiveFilterArrayValue,
+    lazy,
+    initialFilters,
+  });
+
+  // Row selection functionality
+  const { selectedRows, handleSelectAll, handleSelect, isRowSelected } =
+    useRowSelection(workingDataSource, onSelectRow);
+
+  // Context value
+  const contextValue: GridContextType = {
+    // State
+    workingDataSource,
+    fallbackSourceData,
+    workingColumns,
+    currentPage,
+    pageStart,
+    pageEnd,
+    totalPages,
+    searchParam,
+    activeFilterArray,
+    selectedRows,
+    isFetching,
+
+    // Navigation methods
+    nextPage,
+    prevPage,
+    goToEndPage,
+    goToFirstPage,
+    goToPage,
+    lazy,
+
+    // Search methods
+    handleSearchInput,
+    handleSearch,
+
+    // Filter methods
+    toggleFilterPopup,
+    handleApplyFilter,
+    clearFilter,
+    handleFilterAction,
+
+    // Row selection methods
+    handleSelectAll,
+    handleSelect,
+    isRowSelected,
+
+    // Grid settings
+    columns,
+    pageSettings: resolvedPageSettings,
+    pageSize: resolvedPageSize,
+    enableSearch,
+    enableExcelExport,
+    enablePdfExport,
+    excelName,
+    pdfName,
+    pdfOptions,
+    gridButtonClass,
+    selectAll,
+    tableHeaderStyle,
+    gridContainerClass,
+    gridToolbarClass,
+    gridPaginationClass,
+    gridRowEvenClass,
+    gridRowOddClass,
+    gridRowSelectedClass,
+    gridColumnStyleSelectAll,
+    gridColumnStyle,
+    rowChange: resolvedRowChange,
+    showTotalPages,
+    onSearch,
+    onToolbarButtonClick,
+  };
+
+  return (
+    <GridContext.Provider value={contextValue}>{children}</GridContext.Provider>
+  );
+};
+
+// Base context hook
+export const useGridContext = () => {
+  const context = useContext(GridContext);
+  if (context === undefined) {
+    throw new Error("useGridContext must be used within a GridProvider");
+  }
+  return context;
+};

package/source/legacy-components/datagrid/createTemplate.tsx

@@ -0,0 +1,82 @@
+export const createTemplate = (
+  type: string,
+  config: any = {},
+  CustomTemplate?: any
+) => {
+  return ({ rowData }: { rowData: any }) => {
+    const field = config.field || "unknown";
+
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const value =
+        config.type === "number" ? Number(e.target.value) : e.target.value;
+      rowData[field] = value;
+      config.onDataChange?.(rowData.id, field, value);
+    };
+
+    const handleSelectChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+      rowData[field] = e.target.value;
+      config.onDataChange?.(rowData.id, field, e.target.value);
+    };
+
+    switch (type) {
+      case "input":
+        return (
+          <input
+            key={`${field}-${rowData.id}`}
+            type={config.type || "text"}
+            className={
+              config.className ||
+              "p-1 text-xs outline-none w-full rounded focus:border-b-2 border-black dark:border-white dark:bg-zinc-900"
+            }
+            placeholder={config.placeholder || `Enter ${field}`}
+            defaultValue={rowData[field]}
+            onChange={handleInputChange}
+            onBlur={handleInputChange}
+          />
+        );
+
+      case "select":
+        return (
+          <select
+            key={`${field}-${rowData.id}`}
+            className={
+              config.className ||
+              "p-1 w-full text-xs rounded outline-none focus:border-b-2 border-black dark:border-white dark:bg-zinc-900"
+            }
+            defaultValue={rowData[field]}
+            onChange={handleSelectChange}
+          >
+            {config.options?.map((option: any, i: number) => (
+              <option key={i} value={option.value || option}>
+                {option.label || option}
+              </option>
+            ))}
+          </select>
+        );
+
+      case "button":
+        return (
+          <button
+            key={`${field}-${rowData.id}`}
+            className={config.className || "border rounded-2xl p-1"}
+            onClick={() => config.onClick?.(rowData)}
+          >
+            {config.text || "Action"}
+          </button>
+        );
+
+      case "custom":
+        return (
+          <CustomTemplate
+            rowData={rowData}
+            field={field}
+            config={config}
+            {...config}
+          />
+        );
+
+      default:
+        return <span>{rowData[field]}</span>;
+    }
+  };
+};

package/source/legacy-components/datagrid/hooks/index.ts

@@ -0,0 +1,6 @@
+export { useDataSource } from "./useDataSource";
+export { useColumns } from "./useColumns";
+export { usePagination } from "./usePagination";
+export { useSearch } from "./useSearch";
+export { useFiltering } from "./useFiltering";
+export { useRowSelection } from "./useRowSelection";

package/source/legacy-components/datagrid/hooks/useColumns.ts

@@ -0,0 +1,33 @@
+import { useState, useEffect } from "react";
+
+export const useColumns = (columns: any[], workingDataSource: any[]) => {
+  const [workingColumns, setWorkingColumns] = useState<any>([]);
+
+  useEffect(() => {
+    if (columns && columns.length > 0) {
+      const filteredColumns = columns.map((column) => ({
+        ...column,
+        showFilterPopup: false,
+        isFilterActive: false,
+      }));
+      setWorkingColumns(filteredColumns);
+    } else if (
+      workingDataSource.length > 0 &&
+      Object.keys(workingDataSource[0]).length > 0
+    ) {
+      const inferredColumns = Object.keys(workingDataSource[0]).map((key) => ({
+        field: key,
+        headerText: key.charAt(0).toUpperCase() + key.slice(1),
+        width: 150,
+      }));
+      setWorkingColumns((prevColumns: any) => {
+        if (JSON.stringify(prevColumns) !== JSON.stringify(inferredColumns)) {
+          return inferredColumns;
+        }
+        return prevColumns;
+      });
+    }
+  }, [columns]); // Remove workingDataSource from dependencies to prevent reset on data fetch
+
+  return { workingColumns, setWorkingColumns };
+};

package/source/legacy-components/datagrid/hooks/useDataSource.ts

@@ -0,0 +1,54 @@
+import { useState, useCallback, useEffect } from "react";
+import { getSourceData } from "../../utils";
+
+export const useDataSource = (
+  dataSource: any,
+  pageSettings: any,
+  lazy: boolean
+) => {
+  const [workingDataSource, setWorkingDataSource] = useState<any>([]);
+  const [fallbackSourceData, setFallbackSourceData] = useState([]);
+  const [totalPages, setTotalPages] = useState(0);
+
+  const getGridData = useCallback(async () => {
+    try {
+      const sourceData = await getSourceData(dataSource);
+      const gridData = sourceData.sourcedata;
+      setFallbackSourceData(gridData);
+      setWorkingDataSource(gridData);
+      const totalPages = Math.ceil(gridData.length / pageSettings.pageNumber);
+      setTotalPages(totalPages);
+      return totalPages;
+    } catch (error) {
+      console.error("Error fetching grid source data:", error);
+      return 0;
+    }
+  }, [dataSource, pageSettings.pageNumber]);
+
+  useEffect(() => {
+    const handleDataSource = async () => {
+      if (Array.isArray(dataSource)) {
+        setWorkingDataSource(dataSource);
+
+        const totalPages =
+          lazy && pageSettings.totalCount
+            ? Math.ceil(pageSettings.totalCount / pageSettings.pageNumber)
+            : Math.ceil(dataSource.length / pageSettings.pageNumber);
+
+        setTotalPages(totalPages);
+      } else if (typeof dataSource === "string") {
+        await getGridData();
+      }
+    };
+
+    handleDataSource();
+  }, [dataSource, pageSettings, lazy, getGridData]);
+
+  return {
+    workingDataSource,
+    setWorkingDataSource,
+    fallbackSourceData,
+    totalPages,
+    setTotalPages,
+  };
+};

package/source/legacy-components/datagrid/hooks/useFiltering.ts

@@ -0,0 +1,169 @@
+import { useState, useCallback } from "react";
+import {
+  clearFilterHelper,
+  handleApplyFilterHelper,
+} from "@grampro/headless-helpers";
+import type { ActiveFilterArrayValue } from "../type";
+
+interface UseFilteringProps {
+  columns: any[];
+  workingColumns: any[];
+  setWorkingColumns: (columns: any[]) => void;
+  workingDataSource: any[];
+  setWorkingDataSource: (data: any[]) => void;
+  dataSource: any;
+  fallbackSourceData: any[];
+  resetPage: (data: any[], settings: any) => number;
+  setTotalPages: (pages: number) => void;
+  pageSettings: any;
+  activeFilterArrayValue?: (filters: ActiveFilterArrayValue[]) => void;
+  lazy: boolean;
+  initialFilters?: any[];
+}
+
+export const useFiltering = ({
+  columns,
+  workingColumns,
+  setWorkingColumns,
+  workingDataSource,
+  setWorkingDataSource,
+  dataSource,
+  fallbackSourceData,
+  resetPage,
+  setTotalPages,
+  pageSettings,
+  activeFilterArrayValue,
+  lazy,
+  initialFilters = [],
+}: UseFilteringProps) => {
+  const [activeFilterArray, setActiveFilterArray] = useState<any>(initialFilters);
+
+  const toggleFilterPopup = useCallback(
+    (index: number) => {
+      setWorkingColumns(
+        workingColumns.map((column: any, i: any) =>
+          i === index
+            ? { ...column, showFilterPopup: !column.showFilterPopup }
+            : column
+        )
+      );
+    },
+    [workingColumns, setWorkingColumns]
+  );
+
+  const handleApplyFilter = useCallback(
+    (event: any) => {
+      const {
+        columns: updatedColumns,
+        workingDataSource: updatedFullDataSource,
+        activeFilterArray: updatedActiveFilterArray,
+      } = handleApplyFilterHelper(event, columns, workingDataSource);
+
+      setWorkingColumns(updatedColumns);
+      
+      const newActiveFilters = updatedActiveFilterArray;
+      setActiveFilterArray(newActiveFilters);
+
+      if (!lazy) {
+        setWorkingDataSource(updatedFullDataSource);
+        const totalPages = resetPage(updatedFullDataSource, pageSettings);
+        setTotalPages(totalPages);
+      } else {
+        // In lazy mode, we reset page to 0 but keep totalPages from pageSettings
+        resetPage(workingDataSource, pageSettings);
+      }
+      
+      if (activeFilterArrayValue)
+        activeFilterArrayValue?.(newActiveFilters);
+    },
+    [
+      columns,
+      workingDataSource,
+      setWorkingColumns,
+      setWorkingDataSource,
+      activeFilterArrayValue,
+      resetPage,
+      pageSettings,
+      setTotalPages,
+      lazy,
+      activeFilterArray,
+    ]
+  );
+
+  const clearFilter = useCallback(
+    (event: any) => {
+      const clearDataSource = Array.isArray(dataSource)
+        ? dataSource
+        : fallbackSourceData;
+      const {
+        columns: updatedColumns,
+        workingDataSource: updatedDataSource,
+        activeFilterArray: updatedActiveFilterArray,
+      } = clearFilterHelper(event, workingColumns, clearDataSource);
+
+      setWorkingColumns(updatedColumns);
+
+      // Manual fallback: ensure the filter is removed from the active array
+      let newActiveFilters = updatedActiveFilterArray;
+      if (event.type === "clearFilter" && event.columnHeader) {
+        newActiveFilters = activeFilterArray.filter(
+          (f: any) => f.filterColumn !== event.columnHeader
+        );
+      }
+      
+      setActiveFilterArray(newActiveFilters);
+
+      if (!lazy) {
+        setWorkingDataSource(updatedDataSource);
+        const totalPages = resetPage(updatedDataSource, pageSettings);
+        setTotalPages(totalPages);
+      } else {
+        // In lazy mode, we reset page to 0 but keep totalPages from pageSettings
+        resetPage(workingDataSource, pageSettings);
+      }
+
+      if (activeFilterArrayValue)
+        activeFilterArrayValue?.(newActiveFilters);
+    },
+    [
+      dataSource,
+      fallbackSourceData,
+      workingColumns,
+      setWorkingColumns,
+      setWorkingDataSource,
+      activeFilterArrayValue,
+      resetPage,
+      pageSettings,
+      setTotalPages,
+      lazy,
+      activeFilterArray,
+    ]
+  );
+
+  const handleFilterAction = useCallback(
+    (action: any, colIndex: number) => {
+      switch (action.type) {
+        case "cancel":
+          toggleFilterPopup(colIndex);
+          break;
+        case "applyFilter":
+          handleApplyFilter(action);
+          break;
+        case "clearFilter":
+          clearFilter(action);
+          break;
+        default:
+          break;
+      }
+    },
+    [toggleFilterPopup, handleApplyFilter, clearFilter]
+  );
+
+  return {
+    activeFilterArray,
+    toggleFilterPopup,
+    handleApplyFilter,
+    clearFilter,
+    handleFilterAction,
+  };
+};

package/source/legacy-components/datagrid/hooks/usePagination.ts

@@ -0,0 +1,112 @@
+import { useState, useCallback, useEffect } from "react";
+
+export const usePagination = (
+  totalPages: number,
+  lazy: boolean,
+  dataSource?: any[],
+  pageStatus?: ({ currentPage }: { currentPage: number }) => void
+) => {
+  const [currentPage, setCurrentPage] = useState(0);
+  const [pageStart, setPageStart] = useState(0);
+  const [pageEnd, setPageEnd] = useState(10);
+
+  // Update page range based on current page
+  const updatePageRange = useCallback(
+    (page: number) => {
+      const start = Math.floor(page / 10) * 10;
+      setPageStart(start);
+      setPageEnd(Math.min(start + 10, totalPages));
+    },
+    [totalPages]
+  );
+
+  // Initialize page range based on total pages
+  useEffect(() => {
+    if (!lazy) {
+      setPageEnd(Math.min(10, totalPages));
+    } else {
+      setPageEnd(Math.min(pageStart + 10, totalPages));
+    }
+  }, [totalPages, lazy, pageStart]);
+
+  // Update page status if provided
+  useEffect(() => {
+    if (pageStatus) {
+      pageStatus({ currentPage });
+    }
+  }, [currentPage, pageStatus]);
+
+  // Defensive check: if current page is out of bounds due to totalPages shrinking, reset to 0
+  useEffect(() => {
+    if (totalPages > 0 && currentPage >= totalPages) {
+      setCurrentPage(0);
+      updatePageRange(0);
+    }
+  }, [totalPages, currentPage, updatePageRange]);
+
+  const nextPage = useCallback(() => {
+    setCurrentPage((prevPage) => {
+      if (prevPage < totalPages - 1) {
+        const newPage = prevPage + 1;
+        updatePageRange(newPage);
+        return newPage;
+      }
+      return prevPage;
+    });
+  }, [totalPages, updatePageRange]);
+
+  const prevPage = useCallback(() => {
+    setCurrentPage((prevPage) => {
+      if (prevPage > 0) {
+        const newPage = prevPage - 1;
+        updatePageRange(newPage);
+        return newPage;
+      }
+      return prevPage;
+    });
+  }, [updatePageRange]);
+
+  const goToEndPage = useCallback(() => {
+    const lastPage = totalPages - 1;
+    setCurrentPage(lastPage);
+    updatePageRange(lastPage);
+  }, [totalPages, updatePageRange]);
+
+  const goToFirstPage = useCallback(() => {
+    setCurrentPage(0);
+    updatePageRange(0);
+  }, [updatePageRange]);
+
+  const goToPage = useCallback(
+    (page: number) => {
+      setCurrentPage(page);
+      updatePageRange(page);
+    },
+    [updatePageRange]
+  );
+
+  const resetPage = useCallback((dataSource: any, pageSettings: any) => {
+    const newTotalPages =
+      lazy && pageSettings?.totalCount
+        ? Math.ceil(pageSettings.totalCount / pageSettings.pageNumber)
+        : Math.ceil((dataSource?.length || 0) / (pageSettings?.pageNumber || 10));
+
+    setCurrentPage(0);
+    setPageStart(0);
+    setPageEnd(Math.min(10, newTotalPages));
+    return newTotalPages;
+  }, [lazy]);
+
+  return {
+    currentPage,
+    pageStart,
+    pageEnd,
+    nextPage,
+    prevPage,
+    goToEndPage,
+    goToFirstPage,
+    goToPage,
+    resetPage,
+    updatePageRange,
+  };
+};