gbs-add-block 0.0.26 → 0.0.28

package/index.js

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

package/package.json

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

package/source/components/formrenderer/InputHandles.tsx

@@ -1,11 +1,33 @@
-import React from "react";
+import React, { useState } from "react";
+import { validateEmail, validatePhoneNumber } from "./helperFunctions";
 import { Input } from "../input";
 
-export default function InputHandles({
-  item,
-  requirementError,
-  setRequirementError,
-}: any) {
+const InputHandles = ({ item, requirementError, setRequirementError }: any) => {
+  const [inputError, setInputError] = useState<string | null>(null);
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { value } = event.target;
+
+    setRequirementError((prevErrors: string[]) =>
+      prevErrors.filter((error) => error !== item.name)
+    );
+
+    // Validation based on input type
+    if (item.type === "email") {
+      if (!validateEmail(value)) {
+        setInputError("Invalid email format");
+      } else {
+        setInputError(null);
+      }
+    } else if (item.type === "tel") {
+      if (!validatePhoneNumber(value)) {
+        setInputError("Invalid phone number. Must be 10 digits.");
+      } else {
+        setInputError(null);
+      }
+    }
+  };
+
   return (
     <div className="w-full">
       {item.label && (
@@ -17,17 +39,19 @@ export default function InputHandles({
         type={item.type}
         name={item.name}
         placeholder={item.placeholder || ""}
-        error={
-          requirementError.includes(item.name)
-            ? `${item.name} is required`
-            : undefined
-        }
-        onChange={() =>
-          setRequirementError((prevErrors: any) =>
-            prevErrors.filter((errorName: any) => errorName !== item.name)
-          )
-        }
+        onChange={handleChange}
+        className={`border rounded p-2 w-full ${
+          inputError || requirementError.includes(item.name)
+            ? "border-red-500"
+            : "border-gray-300"
+        }`}
       />
+      {requirementError.includes(item.name) && (
+        <p className="text-red-500 text-xs">{`${item.name} is required`}</p>
+      )}
+      {inputError && <p className="text-red-500 text-xs">{inputError}</p>}
     </div>
   );
-}
+};
+
+export default InputHandles;

package/source/components/formrenderer/helperFunctions.ts

@@ -0,0 +1,9 @@
+export const validateEmail = (email: string) => {
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  return emailRegex.test(email);
+};
+
+export const validatePhoneNumber = (phone: string) => {
+  const phoneRegex = /^[0-9]{10}$/;
+  return phoneRegex.test(phone);
+};

package/source/components/formrenderer/index.tsx

@@ -62,12 +62,12 @@ const FormRenderer = ({ onSubmit, sourceData }: any) => {
               case "button":
                 return (
                   <div key={index} className="w-full mt-2">
-                    <Button
+                    <button
                       type={item.type}
                       className="w-full bg-black text-white py-2 rounded-xl hover:bg-gray-800"
                     >
                       {item.value}
-                    </Button>
+                    </button>
                   </div>
                 );