gbs-add-block 0.0.50 → 0.0.52-beta

package/README.md

@@ -1,4 +1,4 @@
-# GBS Building Blocks 2.0 (v0.0.50)
+# GBS Building Blocks 2.0 (v0.0.51)
 
 Latest and upgraded version of GBS building blocks with headless UI and removed dependencies.
 
@@ -6,7 +6,7 @@ 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.50)
+## What's New 🎉 (Ver 0.0.51)
 
 - Update on form renderer
 - Refactored Code for Better Readability

package/index.js

@@ -2,7 +2,8 @@
 
 const fs = require("fs-extra");
 const path = require("path");
-const { createInterface } = require("readline");
+const yargs = require("yargs/yargs");
+const { hideBin } = require("yargs/helpers");
 
 // Configuration
 const CONFIG = {
@@ -21,7 +22,8 @@ const CONFIG = {
     "Toast",
     "Uploader",
     "FormRenderer",
-    "materialInput",
+    "MaterialInput",
+    "ContextMenu",
   ],
   frameworks: {
     next: {
@@ -37,23 +39,6 @@ const CONFIG = {
 };
 
 const SOURCE_PATH = path.join(__dirname, "source", "components");
-let isFirstCopy = true;
-
-const rl = createInterface({
-  input: process.stdin,
-  output: process.stdout,
-});
-
-const prompt = (question) =>
-  new Promise((resolve) => {
-    rl.question(question, resolve);
-  });
-
-const displayOptions = (options, title) => {
-  console.log(`\n${title}:\n`);
-  options.forEach((option, index) => console.log(`${index + 1}. ${option}`));
-  console.log("");
-};
 
 const copyCommonFiles = async (destPath) => {
   const commonFiles = [
@@ -66,7 +51,7 @@ const copyCommonFiles = async (destPath) => {
     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 to ${dest}`);
+    console.log(`✓ ${file.dest} copied successfully`);
   }
 };
 
@@ -80,80 +65,103 @@ const copyComponent = async (component, destPath) => {
     }
 
     await fs.copy(componentSrc, componentDest, { overwrite: true });
-    console.log(
-      `\nComponent ${component} copied successfully to ${componentDest}`
-    );
-
-    if (isFirstCopy) {
-      await copyCommonFiles(destPath);
-      isFirstCopy = false;
-    }
-
-    console.log(`\nFor Props and Usage Guides Visit: ${CONFIG.docs}\n`);
+    console.log(`✓ Component ${component} installed successfully`);
+    console.log(`\nFor documentation visit: ${CONFIG.docs}`);
   } catch (error) {
-    console.error(`Error copying component ${component}:`, error.message);
+    console.error(`Error installing component ${component}:`, error.message);
+    process.exit(1);
   }
 };
 
-const selectFramework = async () => {
-  displayOptions(
-    Object.values(CONFIG.frameworks).map((f) => f.name),
-    "Available frameworks"
-  );
-
-  const answer = await prompt("Select your framework (enter the number): ");
-  const index = parseInt(answer) - 1;
-  const frameworks = Object.keys(CONFIG.frameworks);
-
-  if (isNaN(index) || index < 0 || index >= frameworks.length) {
-    throw new Error("Invalid framework selection");
+const detectFramework = () => {
+  // Check for Next.js
+  if (fs.existsSync(path.join(process.cwd(), "next.config.js"))) {
+    return "next";
   }
-
-  return frameworks[index];
+  // Check for Vite
+  if (
+    fs.existsSync(path.join(process.cwd(), "vite.config.js")) ||
+    fs.existsSync(path.join(process.cwd(), "vite.config.ts"))
+  ) {
+    return "vite";
+  }
+  return null;
 };
 
-const handleComponentSelection = async (destPath) => {
-  while (true) {
-    displayOptions(CONFIG.components, "Available components");
+const main = async () => {
+  const argv = yargs(hideBin(process.argv))
+    .option("add", {
+      alias: "a",
+      describe: "Component to install",
+      type: "string",
+    })
+    .option("framework", {
+      alias: "f",
+      describe: "Framework to use (next or vite)",
+      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) => console.log(`- ${comp}`));
+    return;
+  }
 
-    const answer = await prompt(
-      'Enter the number of the component to copy (or "q" to quit): '
-    );
+  if (!argv.add) {
+    console.error("Please specify a component to install using -a or --add");
+    process.exit(1);
+  }
 
-    if (answer.toLowerCase() === "q") break;
+  // 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);
+  }
 
-    const index = parseInt(answer) - 1;
-    if (isNaN(index) || index < 0 || index >= CONFIG.components.length) {
-      console.log("Invalid selection. Please try again.");
-      continue;
+  // Detect or get framework
+  let framework = argv.framework;
+  if (!framework) {
+    framework = detectFramework();
+    if (!framework) {
+      console.error(
+        "Could not detect framework. Please specify using -f or --framework"
+      );
+      process.exit(1);
     }
-
-    await copyComponent(CONFIG.components[index], destPath);
-
-    const continueAnswer = await prompt(
-      "Do you want to copy another component? (y/n): "
-    );
-    if (continueAnswer.toLowerCase() !== "y") break;
   }
-};
 
-const main = async () => {
-  try {
-    const framework = await selectFramework();
-    const destPath = path.join(
-      process.cwd(),
-      ...CONFIG.frameworks[framework].path
-    );
-
-    await fs.ensureDir(destPath);
-    await handleComponentSelection(destPath);
-  } catch (error) {
-    console.error("Error:", error.message);
+  if (!CONFIG.frameworks[framework]) {
+    console.error(`Unsupported framework: ${framework}`);
     process.exit(1);
-  } finally {
-    rl.close();
   }
+
+  // Create destination directory
+  const destPath = path.join(
+    process.cwd(),
+    ...CONFIG.frameworks[framework].path
+  );
+  await fs.ensureDir(destPath);
+
+  // Copy common files if they don't exist
+  if (!fs.existsSync(path.join(destPath, "utils.ts"))) {
+    await copyCommonFiles(destPath);
+  }
+
+  // Copy the requested component
+  await copyComponent(component, destPath);
 };
 
-// Run the script
-main();
+main().catch((error) => {
+  console.error("Error:", error.message);
+  process.exit(1);
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gbs-add-block",
-  "version": "0.0.50",
+  "version": "0.0.52-beta",
   "description": "React Component Library",
   "files": [
     "index.js",
@@ -20,7 +20,8 @@
   "license": "ISC",
   "dependencies": {
     "fs-extra": "^11.2.0",
-    "path": "^0.12.7"
+    "path": "^0.12.7",
+    "yargs": "^17.7.2"
   },
   "devDependencies": {
     "@types/fs-extra": "^11.0.4"

package/source/components/contextmenu/ContextMenuItem.tsx

@@ -0,0 +1,30 @@
+import { ContextMenuItemProps } from "./types";
+
+export const ContextMenuItem: React.FC<ContextMenuItemProps> = ({
+  onClick,
+  icon,
+  children,
+  disabled = false,
+}) => (
+  <button
+    onClick={(e: React.MouseEvent) => {
+      e.stopPropagation();
+      if (!disabled) {
+        onClick?.();
+      }
+    }}
+    disabled={disabled}
+    className={`w-full px-4 py-2 text-left flex items-center gap-2 ${
+      disabled
+        ? "text-gray-400 cursor-not-allowed"
+        : "hover:bg-gray-100 cursor-pointer"
+    }`}
+  >
+    {icon && <span className="w-4 h-4">{icon}</span>}
+    {children}
+  </button>
+);
+
+export const ContextMenuDivider: React.FC = () => (
+  <div className="my-1 border-t border-gray-200" />
+);

package/source/components/contextmenu/index.tsx

@@ -0,0 +1,63 @@
+import React, { useState, useEffect, useCallback, MouseEvent } from "react";
+import { ContextMenuProps, Position } from "./types";
+
+export const ContextMenu: React.FC<ContextMenuProps> = ({ children }) => {
+  const [isVisible, setIsVisible] = useState<boolean>(false);
+  const [position, setPosition] = useState<Position>({ x: 0, y: 0 });
+
+  const handleContextMenu = useCallback(
+    (event: MouseEvent | globalThis.MouseEvent) => {
+      event.preventDefault();
+      setIsVisible(true);
+      setPosition({
+        x: event.pageX,
+        y: event.pageY,
+      });
+    },
+    []
+  );
+
+  const handleClick = useCallback(() => {
+    if (isVisible) setIsVisible(false);
+  }, [isVisible]);
+
+  useEffect(() => {
+    document.addEventListener("click", handleClick);
+    document.addEventListener("contextmenu", handleContextMenu);
+
+    return () => {
+      document.removeEventListener("click", handleClick);
+      document.removeEventListener("contextmenu", handleContextMenu);
+    };
+  }, [handleClick, handleContextMenu]);
+
+  // Ensure menu stays within viewport bounds
+  const adjustedPosition = useCallback((position: Position): Position => {
+    const menuWidth = 160; // min-width from CSS
+    const menuHeight = 200; // approximate max height
+
+    return {
+      x: Math.min(position.x, window.innerWidth - menuWidth),
+      y: Math.min(position.y, window.innerHeight - menuHeight),
+    };
+  }, []);
+
+  const finalPosition = adjustedPosition(position);
+
+  return (
+    <>
+      {isVisible && (
+        <div
+          className="fixed bg-white rounded-lg shadow-lg border border-gray-200 py-2 min-w-[160px]"
+          style={{
+            top: finalPosition.y,
+            left: finalPosition.x,
+            zIndex: 1000,
+          }}
+        >
+          {children}
+        </div>
+      )}
+    </>
+  );
+};

package/source/components/contextmenu/types.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from "react";
+
+interface Position {
+  x: number;
+  y: number;
+}
+
+interface ContextMenuProps {
+  children: ReactNode;
+}
+
+interface ContextMenuItemProps {
+  onClick?: () => void;
+  icon?: ReactNode;
+  children: ReactNode;
+  disabled?: boolean;
+}
+
+export type { Position, ContextMenuProps, ContextMenuItemProps };

package/source/components/datepicker/index.tsx

@@ -29,6 +29,7 @@ export const DatePicker = ({
   name,
   error,
   placeholder = "Select a date",
+  disabled = false,
 }: DatePickerProps) => {
   applyScrollbarStyles();
 
@@ -61,6 +62,7 @@ export const DatePicker = ({
     setCurrentMonth,
     setCurrentYear
   );
+
   useClickOutside(
     dateRef as React.RefObject<HTMLElement>,
     () => {
@@ -124,7 +126,10 @@ export const DatePicker = ({
         onClick={toggleDatepicker}
         className={`${
           error ? primary["error-border"] : "border"
-        } p-2 rounded-lg w-full flex items-center gap-2 dark:text-white`}
+        } p-2 rounded-lg w-full flex items-center gap-2 dark:text-white ${
+          disabled ? "opacity-50 cursor-not-allowed" : ""
+        }`}
+        disabled={disabled}
       >
         <Icon
           dimensions={{ width: "20", height: "20" }}
@@ -144,7 +149,7 @@ export const DatePicker = ({
         readOnly
       />
 
-      {showDatepicker && (
+      {showDatepicker && !disabled && (
         <div className="absolute z-10 bg-white border border-gray-300 shadow-lg mt-1 w-full rounded dark:bg-black dark:text-white px-2">
           <div className="flex justify-between items-center p-2">
             <button

package/source/components/datepicker/types.ts

@@ -8,4 +8,5 @@ export type DatePickerProps = {
   onDateChange?: (date: Date) => void;
   name?: string;
   error?: string;
+  disabled?: boolean;
 };

package/source/components/formrenderer/componentHandles/DatePickerHandles.tsx

@@ -1,6 +1,7 @@
-import React from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { DatePicker } from "../../datepicker";
 import { DatePickerHandlesProps } from "../types";
+import { evaluateExpression } from "@grampro/headless-helpers";
 
 export default function DatePickerHandles({
   item,
@@ -8,7 +9,38 @@ export default function DatePickerHandles({
   setRequirementError,
   formRef,
   onChangeEvent,
+  context,
+  updateContext,
 }: DatePickerHandlesProps) {
+  const [isDisabled, setIsDisabled] = useState<boolean>(false);
+  const [isRequired, setIsRequired] = useState<boolean>(false);
+
+  // Evaluate expression with memoization
+  const evaluateCondition = useCallback(
+    (expression: string | boolean | undefined): boolean => {
+      if (typeof expression === "string") {
+        return evaluateExpression(expression, context);
+      }
+      return !!expression;
+    },
+    [context]
+  );
+
+  // Initialize context and handle dynamic states
+  useEffect(() => {
+    if (item?.name && item?.value !== undefined) {
+      updateContext("datepicker", item.name, item.value);
+    }
+
+    const disabled = evaluateCondition(item?.disabled);
+
+    setIsDisabled(disabled);
+
+    // Only set required if not disabled
+    const required = disabled ? false : evaluateCondition(item?.required);
+    setIsRequired(required);
+  }, [item, context, evaluateCondition, updateContext]);
+
   const handleSelectDate = (value: string[], key: string) => {
     if (formRef && formRef.current) {
       const hiddenInput = formRef.current.querySelector(
@@ -34,7 +66,7 @@ export default function DatePickerHandles({
       {item?.label && (
         <label htmlFor={item.name} className="font-medium text-sm">
           {item.label}
-          {item.required && <span className="text-red-500">*</span>}
+          {isRequired && <span className="text-red-500">*</span>}
         </label>
       )}
       <DatePicker

package/source/components/formrenderer/componentHandles/MultiHandles.tsx

@@ -29,11 +29,10 @@ export default function MultiHandles({
   // Initialize context and handle dynamic states
   useEffect(() => {
     if (item?.name && item?.value !== undefined) {
-      updateContext("select", item.name, item.value);
+      updateContext("multi-select", item.name, item.value);
     }
 
     const disabled = evaluateCondition(item?.disabled);
-    console.log("disabled", disabled);
 
     setIsDisabled(disabled);
 

package/source/components/formrenderer/componentHandles/SelectHandles.tsx

@@ -34,7 +34,6 @@ export default function SelectHandles({
     }
 
     const disabled = evaluateCondition(item?.disabled);
-    console.log("disabled", disabled);
 
     setIsDisabled(disabled);
 

package/source/components/formrenderer/helperFunctions.ts

@@ -1,3 +1,37 @@
+import InputHandles from "./componentHandles/InputHandles";
+import SelectHandles from "./componentHandles/SelectHandles";
+import MultiHandles from "./componentHandles/MultiHandles";
+import DatePickerHandles from "./componentHandles/DatePickerHandles";
+import CheckboxHandles from "./componentHandles/CheckBoxHandles";
+import { FormItem } from "./types";
+
+// Component Map
+export const COMPONENT_MAP = {
+  input: InputHandles,
+  select: SelectHandles,
+  "multi-select": MultiHandles,
+  datepicker: DatePickerHandles,
+  checkbox: CheckboxHandles,
+} as const;
+
+// Field Validation Helper
+export const validateField = (
+  field: HTMLInputElement | null,
+  item: FormItem
+): boolean => {
+  if (!item.required || !item.name || field?.disabled) {
+    return true;
+  }
+  // Explicitly check for null and empty value
+  if (!field) {
+    return false;
+  }
+  return field.value.trim() !== "";
+};
+
+// Input Validation functions starts here
+// You can add more validation functions here or
+// use zod for more complex validation
 export const validateEmail = (email: string) => {
   const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
   return emailRegex.test(email);
@@ -8,19 +42,6 @@ export const validatePhoneNumber = (phone: string) => {
   return phoneRegex.test(phone);
 };
 
-// In case of return as objects
-export const formDataToObject = (formData: FormData) => {
-  const obj: Record<string, any> = {};
-  formData.forEach((value, key) => {
-    try {
-      obj[key] = JSON.parse(value as string);
-    } catch {
-      obj[key] = value;
-    }
-  });
-  return obj;
-};
-
 export const validateInput = (value: string, type?: string): string | null => {
   if (!value) return null;
 
@@ -35,3 +56,17 @@ export const validateInput = (value: string, type?: string): string | null => {
       return null;
   }
 };
+// Input Validation functions ends here
+
+// In case of return as objects
+export const formDataToObject = (formData: FormData) => {
+  const obj: Record<string, any> = {};
+  formData.forEach((value, key) => {
+    try {
+      obj[key] = JSON.parse(value as string);
+    } catch {
+      obj[key] = value;
+    }
+  });
+  return obj;
+};

package/source/components/formrenderer/index.tsx

@@ -1,39 +1,19 @@
+/**
+ * Copyright (c) Grampro Business Services and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 import React, { useRef, useState, FormEvent } from "react";
 import { useFormContext } from "@grampro/headless-helpers";
-import InputHandles from "./componentHandles/InputHandles";
-import SelectHandles from "./componentHandles/SelectHandles";
-import MultiHandles from "./componentHandles/MultiHandles";
-import DatePickerHandles from "./componentHandles/DatePickerHandles";
-import CheckboxHandles from "./componentHandles/CheckBoxHandles";
 import { FormItem, FormRendererProps } from "./types";
-
-// Component mapping
-const COMPONENT_MAP = {
-  input: InputHandles,
-  select: SelectHandles,
-  "multi-select": MultiHandles,
-  datepicker: DatePickerHandles,
-  checkbox: CheckboxHandles,
-} as const;
-
-const validateField = (
-  field: HTMLInputElement | null,
-  item: FormItem
-): boolean => {
-  if (!item.required || !item.name || field?.disabled) {
-    return true;
-  }
-  // Explicitly check for null and empty value
-  if (!field) {
-    return false;
-  }
-  return field.value.trim() !== "";
-};
+import { COMPONENT_MAP, validateField } from "./helperFunctions";
 
 const FormRenderer: React.FC<FormRendererProps> = ({
   onSubmit,
   sourceData = [],
-  formFormationClass = "grid grid-cols-1 text-left gap-4",
+  formFormationClass = "grid grid-cols-1 gap-2",
   formParentClass = "w-96",
 }) => {
   const formRef = useRef<HTMLFormElement>(null);

package/source/components/formrenderer/types.ts

@@ -89,6 +89,12 @@ export type DatePickerHandlesProps = {
   setRequirementError?: React.Dispatch<React.SetStateAction<string[]>>;
   formRef?: React.RefObject<HTMLFormElement | null>;
   onChangeEvent?: (event: any) => void;
+  context: FormContext;
+  updateContext: (
+    componentName: string,
+    fieldName: string,
+    value: FieldValue
+  ) => void;
 };
 
 export type SelectHandlesProps = {

package/source/components/multiselect/index.tsx

@@ -154,6 +154,7 @@ const MultiSelect = forwardRef<MultiSelectHandle, MultiSelectProps>(
           name={name}
           value={JSON.stringify(selected) || ""}
           readOnly
+          disabled={disabled}
         />
 
         {showPopover && !disabled && (

package/source/components/select/index.tsx

@@ -139,7 +139,13 @@ const Select = forwardRef<SelectHandle, SelectProps>((props, ref) => {
         {error && <p className={primary["error-primary"]}>{error}</p>}
       </div>
 
-      <input type="hidden" name={name} value={selectedItem || ""} readOnly />
+      <input
+        type="hidden"
+        name={name}
+        value={selectedItem || ""}
+        readOnly
+        disabled={disabled}
+      />
 
       {showPopover && !disabled && (
         <div className={popUp["pop-up-style"]}>