gbs-add-block 1.0.31 → 1.2.1

package/README.md

@@ -1,4 +1,4 @@
-# GBS Building Blocks 2.0 (v1.0.30)
+# GBS Building Blocks 2.0 (v1.2.1)
 
 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.1)
 
-- 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.31",
+  "version": "1.2.1",
   "description": "React Component Library",
   "type": "module",
   "files": [

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/datepicker/index.tsx

@@ -146,14 +146,10 @@ export const DatePicker = ({
             elements={calender}
             svgClass={iconClass["grey-common"]}
           />
-          <span className={!selectedDate ? "text-gray-400 text-sm" : ""}>
-            {selectedDate ? (
-              <span className="text-sm">
-                {selectedDate.toLocaleDateString("en-GB")}
-              </span>
-            ) : (
-              placeholder
-            )}
+          <span className={!selectedDate ? "text-gray-400 text-sm" : "text-sm"}>
+            {selectedDate
+              ? selectedDate.toLocaleDateString("en-GB")
+              : placeholder}
           </span>
         </button>
 
@@ -175,8 +171,8 @@ export const DatePicker = ({
       />
 
       {showDatepicker && !disabled && (
-        <div className={popUp["pop-up-style"]}>
-          <div className="flex justify-between items-center p-2">
+        <div className={popUp["pop-up-style-calender"]}>
+          <div className="flex justify-between items-center p-2 text-xs">
             <div className="flex items-center space-x-2">
               <span className="text-md font-semibold">
                 {new Date(currentYear, currentMonth).toLocaleString("default", {
@@ -301,14 +297,17 @@ export const DatePicker = ({
           ) : (
             <div className="grid grid-cols-7 gap-1 p-2">
               {["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => (
-                <div key={day} className="text-center font-bold text-sm p-1">
+                <div key={day} className="text-center font-bold text-xs p-1">
                   {day}
                 </div>
               ))}
               {days.flat().map((day: Date | null, index: number) => {
                 if (!day) {
                   return (
-                    <div key={index} className="text-center p-1 w-8 h-8"></div>
+                    <div
+                      key={index}
+                      className="text-center p-1 w-8 h-8 text-xs"
+                    ></div>
                   );
                 }
                 const isDisabled: boolean | undefined =
@@ -326,7 +325,7 @@ export const DatePicker = ({
                     key={index}
                     onClick={() => !isDisabled && selectDate(day)}
                     disabled={isDisabled}
-                    className={`text-center p-1 w-8 h-8 cursor-pointer rounded-md hover:bg-gray-200 transition duration-150 ease-in-out ${
+                    className={`text-center text-xs p-1 w-8 h-8 cursor-pointer rounded-md hover:bg-gray-200 transition duration-150 ease-in-out ${
                       isSelected
                         ? "bg-black text-white hover:bg-gray-800 dark:bg-zinc-500"
                         : ""
@@ -342,7 +341,7 @@ export const DatePicker = ({
               })}
             </div>
           )}
-          <div className="px-2 py-2 flex justify-between mb-8">
+          <div className="px-2 py-2 flex justify-between mb-8 text-xs">
             <button
               type="button"
               onClick={goToToday}

package/source/globalStyle.ts

@@ -6,6 +6,8 @@ export const primary = {
 export const popUp = {
   "pop-up-style":
     "w-full absolute overflow-y-auto border border-slate-200 rounded-lg mt-[2px] scrollbar bg-white z-90 scrollbar h-40 dark:bg-black dark:text-white animate-fade-down animate-once animate-duration-200",
+  "pop-up-style-calender":
+    "w-full absolute overflow-y-auto border border-slate-200 rounded-lg mt-[2px] scrollbar bg-white z-90 scrollbar h-[370px] dark:bg-black dark:text-white animate-fade-down animate-once animate-duration-200",
 };
 
 export const iconClass = {

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]);
-};