gbs-add-block 0.0.39 → 0.0.41

package/README.md

@@ -1,4 +1,4 @@
-# GBS Building Blocks 2.0 (v0.0.39)
+# GBS Building Blocks 2.0 (v0.0.41)
 
 Latest and upgraded version of GBS building blocks with headless UI and removed dependencies.
 
@@ -6,9 +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.39)
+## What's New 🎉 (Ver 0.0.41)
 
-- Form Renderer Now Supports Date Picker and CheckBox
+- Refactored Code Better Readability
 
 ## Authors
 

package/index.js

@@ -2,164 +2,176 @@
 
 const fs = require("fs-extra");
 const path = require("path");
-const readline = require("readline");
-
-const COMPONENTS = [
-  "Select",
-  "Grid",
-  "MultiSelect",
-  "Button",
-  "DatePicker",
-  "Checkbox",
-  "DarkMode",
-  "Dialog",
-  "Input",
-  "Modal",
-  "Spinner",
-  "Toast",
-  "Uploader",
-  "FormRenderer",
-  "materialInput",
-];
-
-const FRAMEWORKS = {
-  next: "Next.js",
-  vite: "Vite",
+const { createInterface } = require("readline");
+
+// Configuration
+const CONFIG = {
+  components: [
+    "Select",
+    "Grid",
+    "MultiSelect",
+    "Button",
+    "DatePicker",
+    "Checkbox",
+    "DarkMode",
+    "Dialog",
+    "Input",
+    "Modal",
+    "Spinner",
+    "Toast",
+    "Uploader",
+    "FormRenderer",
+    "materialInput",
+  ],
+  frameworks: {
+    next: {
+      name: "Next.js",
+      path: ["app", "component-lib"],
+    },
+    vite: {
+      name: "Vite",
+      path: ["src", "component-lib"],
+    },
+  },
+  docs: "https://blackmax-designs.gitbook.io/building-block-v2.0",
 };
 
 const SOURCE_PATH = path.join(__dirname, "source", "components");
-let DEST_PATH;
+let isFirstCopy = true;
 
-const rl = readline.createInterface({
+const rl = createInterface({
   input: process.stdin,
   output: process.stdout,
 });
 
-let isFirstCopy = true;
+const prompt = (question) =>
+  new Promise((resolve) => {
+    rl.question(question, resolve);
+  });
 
-function listFrameworks() {
-  console.log("Available frameworks:");
+const displayOptions = (options, title) => {
+  console.log(`\n${title}:\n`);
+  options.forEach((option, index) => console.log(`${index + 1}. ${option}`));
   console.log("");
-  Object.entries(FRAMEWORKS).forEach(([key, name], index) => {
-    console.log(`${index + 1}. ${name}`);
-  });
-}
-
-function listComponents() {
-  console.log(" ");
-  console.log("Available components:");
-  console.log(" ");
-  COMPONENTS.forEach((component, index) => {
-    console.log(`${index + 1}. ${component}`);
-  });
-}
-
-function copyCommonFiles() {
-  // Copy utils.ts
-  const utilsSrc = path.join(SOURCE_PATH, "..", "utils.ts");
-  const utilsDest = path.join(DEST_PATH, "utils.ts");
-  fs.copySync(utilsSrc, utilsDest, { overwrite: true });
-  console.log(`utils.ts copied successfully to ${utilsDest}`);
-
-  // Copy GlobalStyles
-  const globalStyleSrc = path.join(SOURCE_PATH, "..", "globalStyle.ts");
-  const globalStyleDest = path.join(DEST_PATH, "globalStyle.ts");
-  fs.copySync(globalStyleSrc, globalStyleDest, { overwrite: true });
-  console.log(`globalStyle.ts copied successfully to ${globalStyleDest}`);
-
-  // Copy icon folder
-  const iconSrc = path.join(SOURCE_PATH, "..", "icon");
-  const iconDest = path.join(DEST_PATH, "icon");
-  fs.copySync(iconSrc, iconDest, { overwrite: true });
-  console.log(`icon folder copied successfully to ${iconDest}`);
-}
-
-function copyComponent(component) {
-  const componentSrc = path.join(SOURCE_PATH, component.toLowerCase());
-  const componentDest = path.join(DEST_PATH, component.toLowerCase());
-
-  if (!fs.existsSync(componentSrc)) {
-    console.error(`Component ${component} not found in source directory.`);
-    return;
+};
+
+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 to ${dest}`);
   }
+};
 
-  fs.copySync(componentSrc, componentDest, { overwrite: true });
-  console.log("");
-  console.log(`Component ${component} copied successfully to ${componentDest}`);
-  console.log("");
-  console.log(
-    "For Props and Usage Guides Visit : https://blackmax-designs.gitbook.io/building-block-v2.0"
-  );
-  console.log("");
+const copySelectionHooks = async (destPath) => {
+  const hooksSrc = path.join(SOURCE_PATH, "..", "hooks", "SelectionHooks");
+  const hooksDest = path.join(destPath, "hooks", "SelectionHooks");
+
+  await fs.ensureDir(path.dirname(hooksDest));
 
-  if (isFirstCopy) {
-    copyCommonFiles();
-    isFirstCopy = false;
+  if (!fs.existsSync(hooksSrc)) {
+    throw new Error(`SelectionHooks not found at ${hooksSrc}`);
   }
-}
 
-function promptForFramework() {
-  listFrameworks();
-  rl.question("Select your framework (enter the number): ", (answer) => {
-    const index = parseInt(answer) - 1;
-    const frameworks = Object.keys(FRAMEWORKS);
+  await fs.copy(hooksSrc, hooksDest, { overwrite: true });
+  console.log(`SelectionHooks copied successfully to ${hooksDest}`);
+};
 
-    if (isNaN(index) || index < 0 || index >= frameworks.length) {
-      console.log("Invalid selection. Please try again.");
-      promptForFramework();
-      return;
+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.`);
     }
 
-    const selectedFramework = frameworks[index];
+    await fs.copy(componentSrc, componentDest, { overwrite: true });
+    console.log(
+      `\nComponent ${component} copied successfully to ${componentDest}`
+    );
 
-    // Set destination path based on framework
-    if (selectedFramework === "next") {
-      DEST_PATH = path.join(process.cwd(), "app", "component-lib");
-    } else {
-      DEST_PATH = path.join(process.cwd(), "src", "component-lib");
+    if (isFirstCopy) {
+      await copyCommonFiles(destPath);
+      isFirstCopy = false;
     }
 
-    // Ensure the destination directory exists
-    fs.ensureDirSync(DEST_PATH);
-
-    // Continue with component selection
-    promptForComponent();
-  });
-}
-
-function promptForComponent() {
-  listComponents();
-  rl.question(
-    'Enter the number of the component you want to copy (or "q" to quit): ',
-    (answer) => {
-      if (answer.toLowerCase() === "q") {
-        rl.close();
-        return;
-      }
-
-      const index = parseInt(answer) - 1;
-      if (isNaN(index) || index < 0 || index >= COMPONENTS.length) {
-        console.log("Invalid selection. Please try again.");
-        promptForComponent();
-        return;
-      }
-
-      const selectedComponent = COMPONENTS[index];
-      copyComponent(selectedComponent);
-
-      rl.question(
-        "Do you want to copy another component? (y/n): ",
-        (answer) => {
-          if (answer.toLowerCase() === "y") {
-            promptForComponent();
-          } else {
-            rl.close();
-          }
-        }
-      );
+    if (["Select", "MultiSelect"].includes(component)) {
+      await copySelectionHooks(destPath);
     }
+
+    console.log(`\nFor Props and Usage Guides Visit: ${CONFIG.docs}\n`);
+  } catch (error) {
+    console.error(`Error copying component ${component}:`, error.message);
+  }
+};
+
+const selectFramework = async () => {
+  displayOptions(
+    Object.values(CONFIG.frameworks).map((f) => f.name),
+    "Available frameworks"
   );
-}
 
-// Start with framework selection
-promptForFramework();
+  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");
+  }
+
+  return frameworks[index];
+};
+
+const handleComponentSelection = async (destPath) => {
+  while (true) {
+    displayOptions(CONFIG.components, "Available components");
+
+    const answer = await prompt(
+      'Enter the number of the component to copy (or "q" to quit): '
+    );
+
+    if (answer.toLowerCase() === "q") break;
+
+    const index = parseInt(answer) - 1;
+    if (isNaN(index) || index < 0 || index >= CONFIG.components.length) {
+      console.log("Invalid selection. Please try again.");
+      continue;
+    }
+
+    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);
+    process.exit(1);
+  } finally {
+    rl.close();
+  }
+};
+
+// Run the script
+main();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gbs-add-block",
-  "version": "0.0.39",
+  "version": "0.0.41",
   "description": "React Component Library",
   "files": [
     "index.js",

package/source/components/datepicker/index.tsx

@@ -155,7 +155,7 @@ export const DatePicker = ({
           {selectedDate ? selectedDate.toLocaleDateString() : placeholder}
         </span>
       </button>
-      <p className={primary["error-primary"]}>{error && error}</p>
+      {error && <p className={primary["error-primary"]}>{error}</p>}
 
       {/* Hidden input to integrate with the form */}
       <input

package/source/components/input/index.tsx

@@ -93,7 +93,7 @@ export const Input = ({
               />
             </button>
           )}
-          <div className="text-xs text-red-500">{error && error}</div>
+          {error && <div className="text-xs text-red-500">{error}</div>}
         </div>
       ) : (
         <div className="otp-container">

package/source/components/materialInput/index.tsx

@@ -62,7 +62,7 @@ const MaterialInput = ({
             ${
               error
                 ? "border-red-500 focus:border-red-500"
-                : "border-gray-300 focus:border-blue-500"
+                : "border-gray-300 focus:border-black"
             }
             ${disabled ? "text-gray-400 cursor-not-allowed" : "text-gray-900"}
           `}
@@ -91,7 +91,7 @@ const MaterialInput = ({
             ${
               error
                 ? "border-red-500 focus:border-red-500"
-                : "border-gray-300 focus:border-blue-500"
+                : "border-gray-300 focus:border-black"
             }
             ${disabled ? "text-gray-400 cursor-not-allowed" : "text-gray-900"}
           `}
@@ -109,7 +109,7 @@ const MaterialInput = ({
               error
                 ? "text-red-500"
                 : isFocused
-                ? "text-blue-500"
+                ? "text-black"
                 : "text-gray-500"
             }
             ${disabled ? "text-gray-400 cursor-not-allowed" : ""}

package/source/components/modal/index.tsx

@@ -5,88 +5,132 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { useEffect } from "react";
+import React, { useEffect, useCallback, memo, useRef } from "react";
 import { twMerge } from "tailwind-merge";
-import type { ModalProps } from "./types";
 import Icon from "../icon/Icon";
 import { x } from "../icon/iconPaths";
+import { ModalProps } from "./types";
 
-export const Modal = ({
-  showModal = false,
-  modalTitle = "Modal Title",
-  modalClass = "fixed z-10 overflow-y-auto inset-0 flex items-center justify-center bg-gray-500 bg-opacity-75 transition-opacity",
-  modalContentClass = "bg-white m-10 md:w-[80vh] rounded-xl relative",
-  classModalContent = "",
-  modalTitleClass = "p-4 text-lg leading-6 font-medium text-gray-900 flex justify-between items-center",
-  classModalTitle = "",
-  children,
-  showCloseButton = false,
-  onClose,
-  dissmissible = false,
-}: ModalProps) => {
-  // Handle ESC key press to close modal
-  useEffect(() => {
-    const handleEscKey = (event: KeyboardEvent) => {
-      if (event.key === "Escape" && showModal && onClose) {
-        onClose();
+const defaultClasses = {
+  modal:
+    "fixed z-10 overflow-y-auto inset-0 flex items-center justify-center bg-gray-500 bg-opacity-75 transition-opacity",
+  modalContent: "bg-white m-10 md:w-[80vh] rounded-xl relative",
+  modalTitle:
+    "p-4 text-lg leading-6 font-medium text-gray-900 flex justify-between items-center",
+  closeButton:
+    "p-2 hover:bg-gray-100 rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-gray-300",
+  closeIcon: "h-5 w-5 stroke-gray-500 fill-none dark:stroke-white",
+};
+
+export const Modal = memo(
+  ({
+    showModal = false,
+    modalTitle = "Modal Title",
+    modalClass = defaultClasses.modal,
+    modalContentClass = defaultClasses.modalContent,
+    classModalContent = "",
+    modalTitleClass = defaultClasses.modalTitle,
+    classModalTitle = "",
+    children,
+    showCloseButton = false,
+    onClose,
+    dismissible = false,
+    titleId = "modal-title",
+    closeButtonContent,
+    animationDuration = 200,
+  }: ModalProps) => {
+    const modalRef = useRef<HTMLDivElement>(null);
+    const previousActiveElement = useRef<HTMLElement | null>(null);
+
+    // Handle ESC key press to close modal
+    const handleEscKey = useCallback(
+      (event: KeyboardEvent) => {
+        if (event.key === "Escape" && showModal && onClose) {
+          onClose();
+        }
+      },
+      [showModal, onClose]
+    );
+
+    // Handle click outside modal to close
+    const handleOutsideClick = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (onClose && e.target === e.currentTarget && dismissible) {
+          onClose();
+        }
+      },
+      [onClose, dismissible]
+    );
+
+    // Manage focus trap and keyboard events
+    useEffect(() => {
+      if (showModal) {
+        previousActiveElement.current = document.activeElement as HTMLElement;
+        document.addEventListener("keydown", handleEscKey);
+        document.body.style.overflow = "hidden";
+        modalRef.current?.focus();
+      } else {
+        document.removeEventListener("keydown", handleEscKey);
+        document.body.style.overflow = "";
+        previousActiveElement.current?.focus();
       }
-    };
 
-    if (showModal) {
-      document.addEventListener("keydown", handleEscKey);
-    }
+      return () => {
+        document.removeEventListener("keydown", handleEscKey);
+        document.body.style.overflow = "";
+      };
+    }, [showModal, handleEscKey]);
 
-    return () => {
-      document.removeEventListener("keydown", handleEscKey);
+    // Animation styles
+    const modalStyles: React.CSSProperties = {
+      transition: `opacity ${animationDuration}ms ease-in-out`,
+      opacity: showModal ? 1 : 0,
+      visibility: showModal ? "visible" : "hidden",
     };
-  }, [showModal, onClose]);
 
-  // Handle click outside modal to close
-  const handleOutsideClick = (e: React.MouseEvent) => {
-    if (onClose && e.target === e.currentTarget && dissmissible) {
-      onClose();
+    if (!showModal) {
+      return null;
     }
-  };
 
-  return (
-    <>
-      {showModal && (
+    return (
+      <div
+        className={modalClass}
+        aria-labelledby={titleId}
+        role="dialog"
+        aria-modal="true"
+        onClick={handleOutsideClick}
+        style={modalStyles}
+      >
         <div
-          className={modalClass}
-          aria-labelledby="modal-title"
-          role="dialog"
-          aria-modal="true"
-          onClick={handleOutsideClick}
+          ref={modalRef}
+          className={twMerge(modalContentClass, classModalContent)}
+          onClick={(e: React.MouseEvent) => e.stopPropagation()}
+          role="document"
+          tabIndex={-1}
         >
-          <div
-            className={twMerge(modalContentClass, classModalContent)}
-            onClick={(e: React.MouseEvent) => {
-              e.stopPropagation();
-            }}
-            role="dialog"
-          >
-            <div className={twMerge(modalTitleClass, classModalTitle)}>
-              <span>{modalTitle}</span>
-              {showCloseButton && onClose && (
-                <button
-                  onClick={onClose}
-                  className="p-2 hover:bg-gray-100 rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-gray-300"
-                  aria-label="Close modal"
-                >
-                  <Icon
-                    elements={x}
-                    svgClass={
-                      "h-5 w-5 stroke-gray-500 fill-none dark:stroke-white"
-                    }
-                  />
-                </button>
-              )}
-            </div>
-            <hr className="border-gray-200" />
-            <div className="p-4">{children}</div>
+          <div className={twMerge(modalTitleClass, classModalTitle)}>
+            <h2 id={titleId}>{modalTitle}</h2>
+            {showCloseButton && onClose && (
+              <button
+                onClick={onClose}
+                className={defaultClasses.closeButton}
+                aria-label="Close modal"
+                type="button"
+              >
+                {closeButtonContent || (
+                  <Icon elements={x} svgClass={defaultClasses.closeIcon} />
+                )}
+              </button>
+            )}
           </div>
+          <hr className="border-gray-200" />
+          <div className="p-4">{children}</div>
         </div>
-      )}
-    </>
-  );
-};
+      </div>
+    );
+  }
+);
+
+Modal.displayName = "Modal";
+
+export default Modal;

package/source/components/modal/types.ts

@@ -1,14 +1,16 @@
 export type ModalProps = {
   showModal?: boolean;
   modalTitle?: string;
-  autoclose?: boolean;
   modalClass?: string;
   modalContentClass?: string;
   classModalContent?: string;
   modalTitleClass?: string;
   classModalTitle?: string;
-  children?: React.ReactNode;
+  children: React.ReactNode;
   showCloseButton?: boolean;
   onClose?: () => void;
-  dissmissible?: boolean;
+  dismissible?: boolean;
+  titleId?: string;
+  closeButtonContent?: React.ReactNode;
+  animationDuration?: number;
 };