gbs-add-block 1.0.14 → 1.0.15

package/README.md

@@ -1,4 +1,4 @@
-# GBS Building Blocks 2.0 (v1.0.14)
+# GBS Building Blocks 2.0 (v1.0.15)
 
 Latest and upgraded version of GBS building blocks with headless UI and removed dependencies.
 
@@ -6,11 +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://blackmax-designs.gitbook.io/building-block-v2.0)
 
-## What's New 🎉 (Ver 1.0.14)
+## What's New 🎉 (Ver 1.0.15)
 
 - Data Grid Enhancement
 - End of Support for Grid Component
 - Select Enhancement
+- Interactive mode
 
 ## Authors
 

package/index.cjs

@@ -4,6 +4,7 @@ const fs = require("fs-extra");
 const path = require("path");
 const yargs = require("yargs/yargs");
 const { hideBin } = require("yargs/helpers");
+const readline = require("readline");
 
 // Configuration
 const CONFIG = {
@@ -31,7 +32,8 @@ const CONFIG = {
     "BreadCrumb",
     "Bargraph",
     "UsePaginatedData",
-    "UseUploader"
+    "UseUploader",
+    "DataGridBeta"
   ],
   // Define component dependencies
   dependencies: {
@@ -118,18 +120,182 @@ const installComponentWithDependencies = async (component, destPath) => {
   console.log(`\nFor documentation visit: ${CONFIG.docs}`);
 };
 
+const installMultipleComponents = async (components, destPath) => {
+  const allComponentsToInstall = new Set();
+
+  // Collect all components and their dependencies
+  components.forEach((component) => {
+    const dependencies = CONFIG.dependencies[component] || [];
+    allComponentsToInstall.add(component);
+    dependencies.forEach((dep) => allComponentsToInstall.add(dep));
+  });
+
+  // Filter out already installed components
+  const pendingInstalls = Array.from(allComponentsToInstall).filter(
+    (comp) => !checkComponentExists(comp, destPath)
+  );
+
+  if (pendingInstalls.length === 0) {
+    console.log(
+      "✓ All selected components and their dependencies are already installed."
+    );
+    return;
+  }
+
+  console.log(`\nInstalling ${pendingInstalls.length} components...`);
+
+  // Install all pending components
+  for (const comp of pendingInstalls) {
+    await copyComponent(comp, destPath);
+  }
+
+  // Show dependency information
+  const allDependencies = new Set();
+  components.forEach((component) => {
+    const dependencies = CONFIG.dependencies[component] || [];
+    dependencies.forEach((dep) => allDependencies.add(dep));
+  });
+
+  if (allDependencies.size > 0) {
+    console.log(`\nDependencies installed:`);
+    Array.from(allDependencies).forEach((dep) => {
+      console.log(`- ${dep}`);
+    });
+  }
+
+  console.log(`\nFor documentation visit: ${CONFIG.docs}`);
+};
+
+const interactiveComponentSelector = async () => {
+  return new Promise((resolve) => {
+    const rl = readline.createInterface({
+      input: process.stdin,
+      output: process.stdout,
+    });
+
+    let selectedComponents = new Set();
+    let currentIndex = 0;
+
+    const renderMenu = () => {
+      console.clear();
+      console.log("🚀 Component Installer - Interactive Mode");
+      console.log(
+        "Use ↑/↓ arrow keys to navigate, SPACE to select/deselect, ENTER to install\n"
+      );
+
+      CONFIG.components.forEach((component, index) => {
+        const isSelected = selectedComponents.has(component);
+        const isCurrentIndex = index === currentIndex;
+        const deps = CONFIG.dependencies[component]
+          ? ` (requires: ${CONFIG.dependencies[component].join(", ")})`
+          : "";
+
+        const prefix = isCurrentIndex ? ">" : " ";
+        const checkbox = isSelected ? "☑" : "☐";
+        const line = `${prefix} ${checkbox} ${component}${deps}`;
+
+        if (isCurrentIndex) {
+          console.log(`\x1b[36m${line}\x1b[0m`); // Cyan highlight
+        } else {
+          console.log(line);
+        }
+      });
+
+      console.log(`\nSelected: ${selectedComponents.size} components`);
+      console.log("Press ENTER to install selected components, or 'q' to quit");
+    };
+
+    const handleKeyPress = (key) => {
+      switch (key) {
+        case "\u001b[A": // Up arrow
+          currentIndex = Math.max(0, currentIndex - 1);
+          renderMenu();
+          break;
+        case "\u001b[B": // Down arrow
+          currentIndex = Math.min(
+            CONFIG.components.length - 1,
+            currentIndex + 1
+          );
+          renderMenu();
+          break;
+        case " ": // Space bar
+          const component = CONFIG.components[currentIndex];
+          if (selectedComponents.has(component)) {
+            selectedComponents.delete(component);
+          } else {
+            selectedComponents.add(component);
+          }
+          renderMenu();
+          break;
+        case "\r": // Enter
+          if (selectedComponents.size > 0) {
+            rl.close();
+            resolve(Array.from(selectedComponents));
+          }
+          break;
+        case "q":
+          rl.close();
+          resolve([]);
+          break;
+      }
+    };
+
+    // Enable raw mode to capture arrow keys
+    process.stdin.setRawMode(true);
+    process.stdin.resume();
+    process.stdin.setEncoding("utf8");
+    process.stdin.on("data", handleKeyPress);
+
+    renderMenu();
+
+    rl.on("close", () => {
+      process.stdin.setRawMode(false);
+      process.stdin.pause();
+    });
+  });
+};
+
+const parseMultipleComponents = (componentString) => {
+  return componentString
+    .split(",")
+    .map((comp) => comp.trim())
+    .filter((comp) => comp.length > 0);
+};
+
+const validateComponents = (components) => {
+  const invalidComponents = components.filter(
+    (comp) => !CONFIG.components.includes(comp)
+  );
+  if (invalidComponents.length > 0) {
+    console.error(`Invalid components: ${invalidComponents.join(", ")}`);
+    console.log("\nAvailable components:");
+    CONFIG.components.forEach((comp) => console.log(`- ${comp}`));
+    return false;
+  }
+  return true;
+};
+
 const main = async () => {
   const argv = yargs(hideBin(process.argv))
     .option("add", {
       alias: "a",
-      describe: "Component to install",
+      describe:
+        "Component to install (single component or comma-separated list)",
       type: "string",
     })
+    .option("interactive", {
+      alias: "i",
+      describe: "Interactive component selection mode",
+      type: "boolean",
+    })
     .option("list", {
       alias: "l",
       describe: "List available components",
       type: "boolean",
     })
+    .example("$0 -a Button", "Install a single component")
+    .example("$0 -a Button,Card,Modal", "Install multiple components")
+    .example("$0 -i", "Interactive selection mode")
     .help().argv;
 
   // List components if requested
@@ -144,17 +310,43 @@ const main = async () => {
     return;
   }
 
+  // Interactive mode
+  if (argv.interactive) {
+    console.log("Starting interactive component selector...\n");
+    const selectedComponents = await interactiveComponentSelector();
+
+    if (selectedComponents.length === 0) {
+      console.log("No components selected. Exiting...");
+      return;
+    }
+
+    // Create destination directory in project root
+    const destPath = DEFAULT_DEST_PATH;
+    await fs.ensureDir(destPath);
+
+    // Copy common files if they don't exist
+    if (!fs.existsSync(path.join(destPath, "utils.ts"))) {
+      await copyCommonFiles(destPath);
+    }
+
+    // Install selected components
+    await installMultipleComponents(selectedComponents, destPath);
+    return;
+  }
+
   if (!argv.add) {
-    console.error("Please specify a component to install using -a or --add");
+    console.error(
+      "Please specify a component to install using -a/--add, use -i/--interactive for interactive mode, or -l/--list to see available components"
+    );
     process.exit(1);
   }
 
-  // Validate component name
-  const component = argv.add;
-  if (!CONFIG.components.includes(component)) {
-    console.error(`Invalid component: ${component}`);
-    console.log("\nAvailable components:");
-    CONFIG.components.forEach((comp) => console.log(`- ${comp}`));
+  // Parse components (single or multiple)
+  const componentInput = argv.add;
+  const components = parseMultipleComponents(componentInput);
+
+  // Validate all components
+  if (!validateComponents(components)) {
     process.exit(1);
   }
 
@@ -167,8 +359,14 @@ const main = async () => {
     await copyCommonFiles(destPath);
   }
 
-  // Install component and its dependencies
-  await installComponentWithDependencies(component, destPath);
+  // Install components
+  if (components.length === 1) {
+    // Single component installation (existing behavior)
+    await installComponentWithDependencies(components[0], destPath);
+  } else {
+    // Multiple components installation
+    await installMultipleComponents(components, destPath);
+  }
 };
 
 main().catch((error) => {

package/package.json

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

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

@@ -0,0 +1,187 @@
+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

@@ -0,0 +1,7 @@
+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

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

package/source/components/datagridbeta/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,
+  };
+};