gbs-add-block 0.0.30 → 0.0.32

package/README.md

@@ -1,4 +1,4 @@
-# GBS Building Blocks 2.0 (v0.0.25)
+# GBS Building Blocks 2.0 (v0.0.31)
 
 Latest and upgraded version of GBS building blocks with headless UI and removed dependencies.
 
@@ -9,6 +9,8 @@ For detailed documentation on usage and props, Please visit: [Building Block Doc
 ## What's New 🎉 (Ver 0.0.23)
 
 - Updated Grid
+- Updated Modal
+- New Components (Material Input (Material Design Inspired Input), Form Renderer(Dynamic Form Rendering))
 
 ## Authors
 

package/index.js

@@ -19,6 +19,7 @@ const COMPONENTS = [
   "Toast",
   "Uploader",
   "FormRenderer",
+  "materialInput",
 ];
 
 const FRAMEWORKS = {

package/package.json

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

package/source/components/formrenderer/InputHandles.tsx

@@ -57,6 +57,7 @@ const InputHandles = ({
             ? "border-red-500"
             : "border-gray-300"
         }`}
+        defaultValue={item?.value ?? ""}
       />
       {item?.name && requirementError.includes(item.name) && (
         <p className="text-red-500 text-xs">{`${item?.name} is required`}</p>

package/source/components/formrenderer/SelectHandles.tsx

@@ -43,6 +43,7 @@ export default function SelectHandles({
       <Select
         name={item?.name}
         items={item?.options}
+        selectedItem={item?.value ?? ""}
         onSelect={(value: string) => {
           item?.key && handleSelect(value, item.key);
           setRequirementError &&

package/source/components/formrenderer/index.tsx

@@ -10,7 +10,12 @@ import InputHandles from "./InputHandles";
 import SelectHandles from "./SelectHandles";
 import { FormItem, FormRendererProps } from "./types";
 
-const FormRenderer = ({ onSubmit, sourceData }: FormRendererProps) => {
+const FormRenderer = ({
+  onSubmit,
+  sourceData,
+  formFormationClass = "grid grid-cols-1 text-left gap-4",
+  formParentClass = "w-96",
+}: FormRendererProps) => {
   const formRef = useRef<HTMLFormElement>(null);
   const [requirementError, setRequirementError] = useState<string[]>([]);
 
@@ -40,9 +45,9 @@ const FormRenderer = ({ onSubmit, sourceData }: FormRendererProps) => {
   };
 
   return (
-    <form ref={formRef} onSubmit={handleSubmit} className="w-96">
+    <form ref={formRef} onSubmit={handleSubmit} className={formParentClass}>
       {sourceData && sourceData?.length > 0 ? (
-        <div className="flex flex-col items-start text-left gap-4">
+        <div className={formFormationClass}>
           {sourceData.map((item: FormItem, index: number) => {
             switch (item.component) {
               case "input":
@@ -68,7 +73,7 @@ const FormRenderer = ({ onSubmit, sourceData }: FormRendererProps) => {
 
               case "button":
                 return (
-                  <div key={index} className="w-full mt-2">
+                  <div key={index} className="w-full mt-1">
                     <button
                       type={item.button_type}
                       className="w-full bg-black text-white py-2 rounded-xl hover:bg-gray-800 dark:hover:bg-gray-300 dark:bg-white dark:text-black"

package/source/components/formrenderer/types.ts

@@ -14,4 +14,6 @@ export type FormItem = {
 export type FormRendererProps = {
   onSubmit?: (formData: FormData) => void;
   sourceData?: FormItem[] | undefined;
+  formFormationClass?: string;
+  formParentClass?: string;
 };

package/source/components/materialInput/index.tsx

@@ -0,0 +1,92 @@
+import React, { useState, useRef } from "react";
+import { MaterialInputProps } from "./types";
+
+const MaterialInput = ({
+  label,
+  type = "text",
+  value,
+  onChange,
+  error,
+  helperText,
+  required = false,
+  disabled = false,
+  className = "",
+}: MaterialInputProps) => {
+  const [isFocused, setIsFocused] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleFocus = () => setIsFocused(true);
+  const handleBlur = () => {
+    if (!value) {
+      setIsFocused(false);
+    }
+  };
+
+  const isFloating = isFocused || value;
+
+  return (
+    <div className={`relative w-full ${className}`}>
+      <div className="relative">
+        <input
+          ref={inputRef}
+          type={type}
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          disabled={disabled}
+          required={required}
+          className={`
+            peer w-full px-3 py-3
+            bg-transparent
+            border rounded-md
+            outline-none
+            transition-all duration-200 ease-in-out
+            placeholder-transparent
+            ${
+              error
+                ? "border-red-500 focus:border-red-500"
+                : "border-gray-300 focus:border-blue-500"
+            }
+            ${disabled ? "text-gray-400 cursor-not-allowed" : "text-gray-900"}
+          `}
+        />
+        <label
+          onClick={() => inputRef.current?.focus()}
+          className={`
+            absolute left-3 
+            pointer-events-none
+            transition-all duration-200 ease-in-out
+            cursor-text
+            ${isFloating ? "-top-2 text-xs bg-white px-1" : "top-3 text-base"}
+            ${
+              error
+                ? "text-red-500"
+                : isFocused
+                ? "text-blue-500"
+                : "text-gray-500"
+            }
+            ${disabled ? "text-gray-400 cursor-not-allowed" : ""}
+          `}
+        >
+          {label}
+          {required && " *"}
+        </label>
+      </div>
+
+      {/* Helper text or error message */}
+      {(helperText || error) && (
+        <div
+          className={`
+            mt-1 text-xs
+            ${error ? "text-red-500" : "text-gray-500"}
+          `}
+        >
+          {error || helperText}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default MaterialInput;

package/source/components/materialInput/types.ts

@@ -0,0 +1,11 @@
+export type MaterialInputProps = {
+  label: string;
+  type?: string;
+  value: string;
+  onChange: (value: string) => void;
+  error?: string;
+  helperText?: string;
+  required?: boolean;
+  disabled?: boolean;
+  className?: string;
+};

package/source/components/modal/index.tsx

@@ -5,20 +5,49 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from "react";
+import React, { useEffect } from "react";
 import { twMerge } from "tailwind-merge";
 import type { ModalProps } from "./types";
+import Icon from "../icon/Icon";
+import { x } from "../icon/iconPaths";
 
 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",
+  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",
+  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();
+      }
+    };
+
+    if (showModal) {
+      document.addEventListener("keydown", handleEscKey);
+    }
+
+    return () => {
+      document.removeEventListener("keydown", handleEscKey);
+    };
+  }, [showModal, onClose]);
+
+  // Handle click outside modal to close
+  const handleOutsideClick = (e: React.MouseEvent) => {
+    if (onClose && e.target === e.currentTarget && dissmissible) {
+      onClose();
+    }
+  };
+
   return (
     <>
       {showModal && (
@@ -27,18 +56,33 @@ export const Modal = ({
           aria-labelledby="modal-title"
           role="dialog"
           aria-modal="true"
+          onClick={handleOutsideClick}
         >
           <div
             className={twMerge(modalContentClass, classModalContent)}
-            onClick={(e: any) => {
+            onClick={(e: React.MouseEvent) => {
               e.stopPropagation();
             }}
             role="dialog"
           >
             <div className={twMerge(modalTitleClass, classModalTitle)}>
-              {modalTitle}
+              <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 />
+            <hr className="border-gray-200" />
             <div className="p-4">{children}</div>
           </div>
         </div>

package/source/components/modal/types.ts

@@ -8,4 +8,7 @@ export type ModalProps = {
   modalTitleClass?: string;
   classModalTitle?: string;
   children?: React.ReactNode;
+  showCloseButton?: boolean;
+  onClose?: () => void;
+  dissmissible?: boolean;
 };