gbs-add-block 1.0.30 → 1.2.0

package/README.md

@@ -1,4 +1,4 @@
-# GBS Building Blocks 2.0 (v1.0.30)
+# GBS Building Blocks 2.0 (v1.2.0)
 
 Latest and upgraded version of GBS building blocks with headless UI and removed dependencies.
 
@@ -6,9 +6,12 @@ Latest and upgraded version of GBS building blocks with headless UI and removed
 
 For detailed documentation on usage and props, Please visit: [Building Block Documentation v2.0](https://gramprokit.vercel.app)
 
-## What's New 🎉 (Ver 1.0.30)
+## What's New 🎉 (Ver 1.2.0)
 
-- Type Import Update
+- Updated Data Grid
+- Style Updates
+- Bug Fix
+- New Documentation Site
 
 ## Authors
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gbs-add-block",
-  "version": "1.0.30",
+  "version": "1.2.0",
   "description": "React Component Library",
   "type": "module",
   "files": [

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

@@ -7,7 +7,6 @@ import {
   useSearch,
   useFiltering,
   useRowSelection,
-  usePageStatus,
 } from "../hooks";
 
 const GridContext = createContext<GridContextType | undefined>(undefined);
@@ -70,7 +69,13 @@ export const GridProvider: React.FC<{
     goToFirstPage,
     goToPage,
     resetPage,
-  } = usePagination(totalPages, lazy, workingDataSource, pageSettings);
+  } = usePagination(
+    totalPages,
+    lazy,
+    workingDataSource,
+    pageSettings,
+    pageStatus
+  );
 
   // Search functionality
   const { searchParam, handleSearchInput, handleSearch } = useSearch({
@@ -110,9 +115,6 @@ export const GridProvider: React.FC<{
   const { selectedRows, handleSelectAll, handleSelect, isRowSelected } =
     useRowSelection(workingDataSource, onSelectRow);
 
-  // Page status reporting - Bug Report - causes re-rendering when currentPage or totalPages change
-  // usePageStatus(currentPage, totalPages, pageStatus);
-
   // Context value
   const contextValue: GridContextType = {
     // State

package/source/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-blue-600"
+            }
+            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-blue-600 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/components/datagrid/hooks/usePagination.ts

@@ -4,13 +4,15 @@ export const usePagination = (
   totalPages: number,
   lazy: boolean,
   dataSource?: any[],
-  pageSettings?: { pageNumber: number }
+  pageSettings?: { pageNumber: number },
+  pageStatus?: ({ currentPage }: { currentPage: number }) => void
 ) => {
   const [currentPage, setCurrentPage] = useState(0);
   const [pageStart, setPageStart] = useState(0);
   const [pageEnd, setPageEnd] = useState(10);
   const [prevDataLength, setPrevDataLength] = useState(0);
 
+  // Update page range based on current page
   const updatePageRange = useCallback(
     (page: number) => {
       const start = Math.floor(page / 10) * 10;
@@ -20,6 +22,7 @@ export const usePagination = (
     [totalPages]
   );
 
+  // Initialize page range based on total pages
   useEffect(() => {
     if (!lazy) {
       setPageEnd(Math.min(10, totalPages));
@@ -28,6 +31,13 @@ export const usePagination = (
     }
   }, [totalPages, lazy, pageStart]);
 
+  // Update page status if provided
+  useEffect(() => {
+    if (pageStatus) {
+      pageStatus({ currentPage });
+    }
+  }, [currentPage, pageStatus]);
+
   // This will handle the case when dataSource changes
   // and adjust the current page accordingly in managed workflow
   useEffect(() => {

package/source/components/datagrid/type.ts

@@ -35,7 +35,7 @@ export type GridProps = {
   gridColumnStyleSelectAll?: string;
   gridColumnStyle?: string;
   rowChange?: any;
-  pageStatus?: any;
+  pageStatus?: ({ currentPage }: { currentPage: number }) => void;
   activeFilterArrayValue?: ActiveFilterArrayValue[] | any;
   searchParamValue?: (value: string) => void;
   showTotalPages?: boolean;

package/source/components/datagrid/hooks/usePageStatus.ts

@@ -1,13 +0,0 @@
-import { useEffect } from "react";
-
-export const usePageStatus = (
-  currentPage: number,
-  totalPages: number,
-  pageStatus?: (status: any) => void
-) => {
-  useEffect(() => {
-    if (pageStatus) {
-      pageStatus({ currentPage, totalPages });
-    }
-  }, [pageStatus, currentPage, totalPages]);
-};

package/source/components/datagridbeta/context/GridContext.tsx

@@ -1,187 +0,0 @@
-import React, { createContext, useContext } from "react";
-import type { GridContextType, GridProps } from "../type";
-import {
-  useDataSource,
-  useColumns,
-  usePagination,
-  useSearch,
-  useFiltering,
-  useRowSelection,
-  usePageStatus,
-} from "../hooks";
-
-const GridContext = createContext<GridContextType | undefined>(undefined);
-
-export const GridProvider: React.FC<{
-  children: React.ReactNode;
-  props: GridProps;
-}> = ({ children, props }) => {
-  const {
-    dataSource,
-    columns = [],
-    pageSettings,
-    enableSearch = false,
-    lazy = false,
-    enableExcelExport = false,
-    excelName = "data",
-    enablePdfExport = false,
-    pdfName = "data",
-    pdfOptions = {},
-    gridButtonClass = "px-1 py-2 text-xs rounded bg-zinc-200 dark:bg-zinc-700 cursor-pointer",
-    selectAll = false,
-    onSelectRow,
-    isFetching,
-    tableHeaderStyle = "text-left px-2 py-4 bg-zinc-200 dark:bg-zinc-800",
-    gridContainerClass = "flex flex-col rounded-md overflow-hidden",
-    gridColumnStyleSelectAll = "px-4 text-xs",
-    gridColumnStyle = "p-2 text-xs",
-    rowChange = () => {},
-    pageStatus = () => {},
-    activeFilterArrayValue = [],
-    searchParamValue = () => {},
-    showTotalPages = false,
-    onSearch = () => {},
-    onToolbarButtonClick = () => {},
-  } = props;
-
-  // Data source management
-  const {
-    workingDataSource,
-    setWorkingDataSource,
-    fallbackSourceData,
-    totalPages,
-    setTotalPages,
-  } = useDataSource(dataSource, pageSettings, 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, pageSettings);
-
-  // Search functionality
-  const { searchParam, handleSearchInput, handleSearch } = useSearch({
-    workingDataSource,
-    setWorkingDataSource,
-    fallbackSourceData,
-    dataSource,
-    lazy,
-    pageSettings,
-    resetPage,
-    setTotalPages,
-    searchParamValue,
-  });
-
-  // Filtering functionality
-  const {
-    activeFilterArray,
-    toggleFilterPopup,
-    handleApplyFilter,
-    clearFilter,
-    handleFilterAction,
-  } = useFiltering({
-    columns,
-    workingColumns,
-    setWorkingColumns,
-    workingDataSource,
-    setWorkingDataSource,
-    dataSource,
-    fallbackSourceData,
-    resetPage,
-    setTotalPages,
-    pageSettings,
-    activeFilterArrayValue,
-  });
-
-  // Row selection functionality
-  const { selectedRows, handleSelectAll, handleSelect, isRowSelected } =
-    useRowSelection(workingDataSource, onSelectRow);
-
-  // Page status reporting
-  usePageStatus(currentPage, totalPages, pageStatus);
-
-  // 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,
-    enableSearch,
-    enableExcelExport,
-    enablePdfExport,
-    excelName,
-    pdfName,
-    pdfOptions,
-    gridButtonClass,
-    selectAll,
-    tableHeaderStyle,
-    gridContainerClass,
-    gridColumnStyleSelectAll,
-    gridColumnStyle,
-    rowChange,
-    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/components/datagridbeta/hooks/index.ts

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

package/source/components/datagridbeta/hooks/useColumns.ts

@@ -1,33 +0,0 @@
-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, workingDataSource]);
-
-  return { workingColumns, setWorkingColumns };
-};

package/source/components/datagridbeta/hooks/useDataSource.ts

@@ -1,54 +0,0 @@
-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/components/datagridbeta/hooks/useFiltering.ts

@@ -1,135 +0,0 @@
-import { useState, useCallback } from "react";
-import {
-  clearFilterHelper,
-  handleApplyFilterHelper,
-} from "@grampro/headless-helpers";
-
-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: any[]) => void;
-}
-
-export const useFiltering = ({
-  columns,
-  workingColumns,
-  setWorkingColumns,
-  workingDataSource,
-  setWorkingDataSource,
-  dataSource,
-  fallbackSourceData,
-  resetPage,
-  setTotalPages,
-  pageSettings,
-  activeFilterArrayValue,
-}: UseFilteringProps) => {
-  const [activeFilterArray, setActiveFilterArray] = useState<any>([]);
-
-  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);
-      setWorkingDataSource(updatedFullDataSource);
-      setActiveFilterArray(updatedActiveFilterArray);
-      if (activeFilterArrayValue)
-        activeFilterArrayValue(updatedActiveFilterArray);
-      const totalPages = resetPage(updatedFullDataSource, pageSettings);
-      setTotalPages(totalPages);
-    },
-    [
-      columns,
-      workingDataSource,
-      setWorkingColumns,
-      setWorkingDataSource,
-      activeFilterArrayValue,
-      resetPage,
-      pageSettings,
-      setTotalPages,
-    ]
-  );
-
-  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);
-      setWorkingDataSource(updatedDataSource);
-      setActiveFilterArray(updatedActiveFilterArray);
-      if (activeFilterArrayValue)
-        activeFilterArrayValue(updatedActiveFilterArray);
-      const totalPages = resetPage(updatedDataSource, pageSettings);
-      setTotalPages(totalPages);
-    },
-    [
-      dataSource,
-      fallbackSourceData,
-      workingColumns,
-      setWorkingColumns,
-      setWorkingDataSource,
-      activeFilterArrayValue,
-      resetPage,
-      pageSettings,
-      setTotalPages,
-    ]
-  );
-
-  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/components/datagridbeta/hooks/usePageStatus.ts

@@ -1,13 +0,0 @@
-import { useEffect } from "react";
-
-export const usePageStatus = (
-  currentPage: number,
-  totalPages: number,
-  pageStatus?: (status: any) => void
-) => {
-  useEffect(() => {
-    if (pageStatus) {
-      pageStatus({ currentPage, totalPages });
-    }
-  }, [pageStatus, currentPage, totalPages]);
-};