gbs-add-block 0.0.68 → 0.0.70

package/README.md

@@ -1,4 +1,4 @@
-# GBS Building Blocks 2.0 (v0.0.68)
+# GBS Building Blocks 2.0 (v0.0.70)
 
 Latest and upgraded version of GBS building blocks with headless UI and removed dependencies.
 
@@ -6,11 +6,9 @@ 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 0.0.68)
+## What's New 🎉 (Ver 0.0.70)
 
 - Updated for bug fixes.
-- New component "Skeleton", "Breadcrumb" & "Navbar" Added.
-- Planned Deprecation of Current Grid Component and Adding Beta version for the New Data Grid.
 
 ## Authors
 

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "gbs-add-block",
-  "version": "0.0.68",
+  "version": "0.0.70",
   "description": "React Component Library",
+  "type": "module",
   "files": [
     "index.js",
     "source"
@@ -19,7 +20,6 @@
   "author": "Anandhu Remanan",
   "license": "ISC",
   "dependencies": {
-    "fs-extra": "^11.2.0",
     "path": "^0.12.7",
     "yargs": "^17.7.2"
   },

package/source/components/datagrid/index.tsx

@@ -11,7 +11,7 @@
 import { GridMemoised as GridComponent } from "./layout";
 import { memo } from "react";
 
-const Grid = memo(GridComponent, (prevProps, nextProps) => {
+const DataGrid = memo(GridComponent, (prevProps, nextProps) => {
   // Custom comparison function
   return (
     prevProps.dataSource === nextProps.dataSource &&
@@ -23,4 +23,4 @@ const Grid = memo(GridComponent, (prevProps, nextProps) => {
   );
 });
 
-export { Grid };
+export { DataGrid };

package/source/components/select/index.tsx

@@ -15,7 +15,7 @@ import React, {
 } from "react";
 import Icon from "../icon/Icon";
 import { check, search, upDown, x } from "../icon/iconPaths";
-import type { SelectHandle, SelectProps } from "./types";
+import type { ItemsProps, SelectHandle, SelectProps } from "./types";
 import { selectStyle } from "./style";
 import { iconClass, popUp, primary } from "../globalStyle";
 import {
@@ -23,6 +23,7 @@ import {
   useSelectData,
   useClickOutside,
   applyScrollbarStyles,
+  useKeyboardNavigation,
 } from "@grampro/headless-helpers";
 
 const Select = forwardRef<SelectHandle, SelectProps>((props, ref) => {
@@ -71,6 +72,26 @@ const Select = forwardRef<SelectHandle, SelectProps>((props, ref) => {
     setShowPopover(false)
   );
 
+  // Update the handleSelect to accept a SelectItem
+  const handleSelect = useCallback(
+    (item: ItemsProps) => {
+      setSelectedItem(item.value);
+      setShowPopover(false);
+      setSearchTerm("");
+      if (onSelect) onSelect(item.value);
+    },
+    [onSelect, setSelectedItem, setShowPopover, setSearchTerm]
+  );
+
+  // Set up keyboard navigation with the correct item type
+  const { focusedIndex, setFocusedIndex, itemRefs, handleKeyDown } =
+    useKeyboardNavigation<ItemsProps>({
+      items: filteredItems,
+      isOpen: showPopover,
+      onSelect: handleSelect,
+      onClose: () => setShowPopover(false),
+    });
+
   useEffect(() => {
     if (showPopover) {
       inputRef.current?.focus();
@@ -83,16 +104,6 @@ const Select = forwardRef<SelectHandle, SelectProps>((props, ref) => {
     }
   }, [initialSelectedItem, setSelectedItem]);
 
-  const handleSelect = useCallback(
-    (value: string) => {
-      setSelectedItem(value);
-      setShowPopover(false);
-      setSearchTerm("");
-      if (onSelect) onSelect(value);
-    },
-    [onSelect, setSelectedItem, setShowPopover, setSearchTerm]
-  );
-
   const handleClear = () => {
     if (disabled) return;
     clearSelected();
@@ -110,7 +121,12 @@ const Select = forwardRef<SelectHandle, SelectProps>((props, ref) => {
   }));
 
   return (
-    <div className="relative w-full" ref={selectRef} id={id}>
+    <div
+      className="relative w-full mt-2"
+      ref={selectRef}
+      id={id}
+      onKeyDown={handleKeyDown}
+    >
       <div className="w-full relative">
         <button
           className={`${error ? primary["error-border"] : "border"} ${
@@ -164,16 +180,21 @@ const Select = forwardRef<SelectHandle, SelectProps>((props, ref) => {
                 onChange={(e) => {
                   setSearchTerm(e.target.value);
                   if (onFiltering) onFiltering(e.target.value);
+                  setFocusedIndex(-1);
                 }}
               />
             </div>
           )}
           {filteredItems.length > 0 ? (
-            filteredItems.map(({ value, label }) => (
+            filteredItems.map(({ value, label }, index) => (
               <button
                 key={value}
-                className={selectStyle["filter-button"]}
-                onClick={() => handleSelect(value)}
+                ref={(el: any) => (itemRefs.current[index] = el)}
+                className={`${selectStyle["filter-button"]} ${
+                  focusedIndex === index ? "bg-gray-100" : ""
+                }`}
+                onClick={() => handleSelect({ value, label })}
+                onMouseEnter={() => setFocusedIndex(index)}
               >
                 <Icon
                   elements={check}

package/index.js

@@ -1,173 +0,0 @@
-#!/usr/bin/env node
-
-const fs = require("fs-extra");
-const path = require("path");
-const yargs = require("yargs/yargs");
-const { hideBin } = require("yargs/helpers");
-
-// Configuration
-const CONFIG = {
-  components: [
-    "Select",
-    "Grid",
-    "MultiSelect",
-    "Button",
-    "DatePicker",
-    "Checkbox",
-    "DarkMode",
-    "Dialog",
-    "Input",
-    "Modal",
-    "Spinner",
-    "Toast",
-    "Uploader",
-    "FormRenderer",
-    "MaterialInput",
-    "ContextMenu",
-    "Skeleton",
-    "Navbar",
-    "DataGrid",
-    "BreadCrumb",
-  ],
-  // Define component dependencies
-  dependencies: {
-    FormRenderer: ["Select", "MultiSelect", "Input", "DatePicker"],
-  },
-  docs: "https://blackmax-designs.gitbook.io/building-block-v2.0",
-};
-
-const SOURCE_PATH = path.join(__dirname, "source", "components");
-const DEFAULT_DEST_PATH = path.join(process.cwd(), "component-lib");
-
-const copyCommonFiles = async (destPath) => {
-  const commonFiles = [
-    { src: ["..", "utils.ts"], dest: "utils.ts" },
-    { src: ["..", "globalStyle.ts"], dest: "globalStyle.ts" },
-    { src: ["..", "icon"], dest: "icon" },
-  ];
-
-  for (const file of commonFiles) {
-    const src = path.join(SOURCE_PATH, ...file.src);
-    const dest = path.join(destPath, file.dest);
-    await fs.copy(src, dest, { overwrite: true });
-    console.log(`✓ ${file.dest} copied successfully`);
-  }
-};
-
-const checkComponentExists = (component, destPath) => {
-  const componentPath = path.join(destPath, component.toLowerCase());
-  return fs.existsSync(componentPath);
-};
-
-const copyComponent = async (component, destPath) => {
-  try {
-    const componentSrc = path.join(SOURCE_PATH, component.toLowerCase());
-    const componentDest = path.join(destPath, component.toLowerCase());
-
-    if (!fs.existsSync(componentSrc)) {
-      throw new Error(`Component ${component} not found in source directory.`);
-    }
-
-    await fs.copy(componentSrc, componentDest, { overwrite: true });
-    console.log(
-      `✓ Component ${component} installed successfully ${
-        component === "Grid"
-          ? "This Version of Grid will be deprecated soon. Please Install The New Data Grid Component"
-          : ""
-      }`
-    );
-  } catch (error) {
-    console.error(`Error installing component ${component}:`, error.message);
-    process.exit(1);
-  }
-};
-
-const installComponentWithDependencies = async (component, destPath) => {
-  // Get dependencies for the component
-  const dependencies = CONFIG.dependencies[component] || [];
-  const componentsToInstall = new Set([component, ...dependencies]);
-
-  // Check which components need to be installed
-  const pendingInstalls = Array.from(componentsToInstall).filter(
-    (comp) => !checkComponentExists(comp, destPath)
-  );
-
-  if (pendingInstalls.length === 0) {
-    console.log(
-      `✓ ${component} and all its dependencies are already installed.`
-    );
-    return;
-  }
-
-  // Install all pending components
-  for (const comp of pendingInstalls) {
-    await copyComponent(comp, destPath);
-  }
-
-  if (dependencies.length > 0) {
-    console.log(`\nInstalled dependencies for ${component}:`);
-    dependencies.forEach((dep) => {
-      console.log(`- ${dep}`);
-    });
-  }
-
-  console.log(`\nFor documentation visit: ${CONFIG.docs}`);
-};
-
-const main = async () => {
-  const argv = yargs(hideBin(process.argv))
-    .option("add", {
-      alias: "a",
-      describe: "Component to install",
-      type: "string",
-    })
-    .option("list", {
-      alias: "l",
-      describe: "List available components",
-      type: "boolean",
-    })
-    .help().argv;
-
-  // List components if requested
-  if (argv.list) {
-    console.log("\nAvailable components:");
-    CONFIG.components.forEach((comp) => {
-      const deps = CONFIG.dependencies[comp]
-        ? ` (requires: ${CONFIG.dependencies[comp].join(", ")})`
-        : "";
-      console.log(`- ${comp}${deps}`);
-    });
-    return;
-  }
-
-  if (!argv.add) {
-    console.error("Please specify a component to install using -a or --add");
-    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}`));
-    process.exit(1);
-  }
-
-  // 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 component and its dependencies
-  await installComponentWithDependencies(component, destPath);
-};
-
-main().catch((error) => {
-  console.error("Error:", error.message);
-  process.exit(1);
-});