gbs-add-block 0.0.65 → 0.0.67

package/README.md

@@ -1,4 +1,4 @@
-# GBS Building Blocks 2.0 (v0.0.65)
+# GBS Building Blocks 2.0 (v0.0.66)
 
 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.65)
+## What's New 🎉 (Ver 0.0.66)
 
 - Updated for bug fixes.
 - New component "Skeleton", "Breadcrumb" & "Navbar" Added.

package/index.js

@@ -33,20 +33,11 @@ const CONFIG = {
   dependencies: {
     FormRenderer: ["Select", "MultiSelect", "Input", "DatePicker"],
   },
-  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");
+const DEFAULT_DEST_PATH = path.join(process.cwd(), "component-lib");
 
 const copyCommonFiles = async (destPath) => {
   const commonFiles = [
@@ -80,8 +71,9 @@ const copyComponent = async (component, destPath) => {
     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"
+        component === "Grid"
+          ? "This Version of Grid will be deprecated soon. Please Install The New Data Grid Component"
+          : ""
       }`
     );
   } catch (error) {
@@ -122,24 +114,6 @@ const installComponentWithDependencies = async (component, destPath) => {
   console.log(`\nFor documentation visit: ${CONFIG.docs}`);
 };
 
-const detectFramework = () => {
-  // Check for Next.js
-  if (
-    fs.existsSync(path.join(process.cwd(), "next.config.ts")) ||
-    fs.existsSync(path.join(process.cwd(), "next.config.js"))
-  ) {
-    return "next";
-  }
-  // 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 main = async () => {
   const argv = yargs(hideBin(process.argv))
     .option("add", {
@@ -147,11 +121,6 @@ const main = async () => {
       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",
@@ -185,28 +154,8 @@ const main = async () => {
     process.exit(1);
   }
 
-  // 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);
-    }
-  }
-
-  if (!CONFIG.frameworks[framework]) {
-    console.error(`Unsupported framework: ${framework}`);
-    process.exit(1);
-  }
-
-  // Create destination directory
-  const destPath = path.join(
-    process.cwd(),
-    ...CONFIG.frameworks[framework].path
-  );
+  // Create destination directory in project root
+  const destPath = DEFAULT_DEST_PATH;
   await fs.ensureDir(destPath);
 
   // Copy common files if they don't exist

package/package.json

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

package/source/components/modal/index.tsx

@@ -12,19 +12,19 @@ import { x } from "../icon/iconPaths";
 import { ModalProps } from "./types";
 
 const defaultClasses = {
-  modal:
-    "fixed z-10 overflow-y-auto inset-0 flex items-center justify-center bg-gray-500 bg-opacity-75 transition-opacity",
+  modal: "fixed z-10 overflow-y-auto inset-0 flex items-center justify-center",
   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",
+  closeIcon: "h-5 w-5 stroke-gray-500 fill-none",
 };
 
 export const Modal = memo(
   ({
     showModal = false,
+    setShowModal,
     modalTitle = "Modal Title",
     modalClass = defaultClasses.modal,
     modalContentClass = defaultClasses.modalContent,
@@ -33,7 +33,6 @@ export const Modal = memo(
     classModalTitle = "",
     children,
     showCloseButton = false,
-    onClose,
     dismissible = false,
     titleId = "modal-title",
     closeButtonContent,
@@ -45,23 +44,28 @@ export const Modal = memo(
     // Handle ESC key press to close modal
     const handleEscKey = useCallback(
       (event: KeyboardEvent) => {
-        if (event.key === "Escape" && showModal && onClose) {
-          onClose();
+        if (event.key === "Escape" && showModal && dismissible) {
+          setShowModal(false);
         }
       },
-      [showModal, onClose]
+      [showModal, dismissible, setShowModal]
     );
 
     // Handle click outside modal to close
     const handleOutsideClick = useCallback(
       (e: React.MouseEvent<HTMLDivElement>) => {
-        if (onClose && e.target === e.currentTarget && dismissible) {
-          onClose();
+        if (e.target === e.currentTarget && dismissible) {
+          setShowModal(false);
         }
       },
-      [onClose, dismissible]
+      [dismissible, setShowModal]
     );
 
+    // Handle close button click
+    const handleClose = useCallback(() => {
+      setShowModal(false);
+    }, [setShowModal]);
+
     // Manage focus trap and keyboard events
     useEffect(() => {
       if (showModal) {
@@ -110,9 +114,9 @@ export const Modal = memo(
         >
           <div className={twMerge(modalTitleClass, classModalTitle)}>
             <h2 id={titleId}>{modalTitle}</h2>
-            {showCloseButton && onClose && (
+            {showCloseButton && (
               <button
-                onClick={onClose}
+                onClick={handleClose}
                 className={defaultClasses.closeButton}
                 aria-label="Close modal"
                 type="button"

package/source/components/modal/types.ts

@@ -1,5 +1,6 @@
 export type ModalProps = {
   showModal?: boolean;
+  setShowModal: (show: boolean) => void;
   modalTitle?: string;
   modalClass?: string;
   modalContentClass?: string;
@@ -8,7 +9,6 @@ export type ModalProps = {
   classModalTitle?: string;
   children: React.ReactNode;
   showCloseButton?: boolean;
-  onClose?: () => void;
   dismissible?: boolean;
   titleId?: string;
   closeButtonContent?: React.ReactNode;