gbs-add-block 0.0.25 → 0.0.27

package/index.js

@@ -18,6 +18,7 @@ const COMPONENTS = [
   "Spinner",
   "Toast",
   "Uploader",
+  "FormRenderer",
 ];
 
 const FRAMEWORKS = {
@@ -63,7 +64,7 @@ function copyCommonFiles() {
   const globalStyleSrc = path.join(SOURCE_PATH, "..", "globalStyle.ts");
   const globalStyleDest = path.join(DEST_PATH, "globalStyle.ts");
   fs.copySync(globalStyleSrc, globalStyleDest, { overwrite: true });
-  console.log(`utils.ts copied successfully to ${globalStyleDest}`);
+  console.log(`globalStyle.ts copied successfully to ${globalStyleDest}`);
 
   // Copy icon folder
   const iconSrc = path.join(SOURCE_PATH, "..", "icon");

package/package.json

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

package/source/components/formrenderer/InputHandles.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { Input } from "../input";
+
+export default function InputHandles({
+  item,
+  requirementError,
+  setRequirementError,
+}: any) {
+  return (
+    <div className="w-full">
+      {item.label && (
+        <label htmlFor={item.name} className="font-medium text-sm">
+          {item.label}
+        </label>
+      )}
+      <Input
+        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)
+          )
+        }
+      />
+    </div>
+  );
+}

package/source/components/formrenderer/SelectHandles.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { Select } from "../select";
+
+export default function SelectHandles({
+  item,
+  requirementError,
+  setRequirementError,
+  formRef,
+}: any) {
+  const handleSelect = (value: string, key: string) => {
+    if (formRef.current) {
+      const hiddenInput = formRef.current.querySelector(
+        `input[name="${key}"]`
+      ) as HTMLInputElement;
+
+      if (hiddenInput) {
+        hiddenInput.value = value;
+      } else {
+        const input = document.createElement("input");
+        input.type = "hidden";
+        input.name = key;
+        input.value = value;
+        formRef.current.appendChild(input);
+      }
+    }
+  };
+
+  return (
+    <div className="w-full">
+      {item.label && (
+        <label htmlFor={item.name} className="font-medium text-sm">
+          {item.label}
+        </label>
+      )}
+      <Select
+        name={item.name}
+        items={item.options}
+        onSelect={(value: string) => {
+          handleSelect(value, item.key);
+          setRequirementError((prevErrors: any) =>
+            prevErrors.filter((errorName: any) => errorName !== item.name)
+          );
+        }}
+        error={
+          requirementError.includes(item.name)
+            ? `${item.name} is required`
+            : undefined
+        }
+      ></Select>
+    </div>
+  );
+}

package/source/components/formrenderer/index.tsx

@@ -0,0 +1,86 @@
+import React, { useRef, useState } from "react";
+import { Button } from "../button";
+import InputHandles from "./InputHandles";
+import SelectHandles from "./SelectHandles";
+
+const FormRenderer = ({ onSubmit, sourceData }: any) => {
+  const formRef = useRef<HTMLFormElement>(null);
+  const [requirementError, setRequirementError] = useState<string[]>([]);
+
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    const requirementErrorItems: string[] = [];
+
+    sourceData.forEach((item: any) => {
+      if (item.required) {
+        const field = formRef.current?.querySelector(
+          `[name="${item.name}"]`
+        ) as HTMLInputElement | null;
+
+        if (!field || !field.value.trim()) {
+          requirementErrorItems.push(item.name);
+        }
+      }
+    });
+
+    setRequirementError(requirementErrorItems);
+
+    if (requirementErrorItems.length > 0) return;
+
+    const formData = new FormData(formRef.current as HTMLFormElement);
+    onSubmit(formData);
+  };
+
+  return (
+    <form ref={formRef} onSubmit={handleSubmit} className="w-96">
+      {sourceData?.length > 0 ? (
+        <div className="flex flex-col items-start text-left gap-4">
+          {sourceData.map((item: any, index: number) => {
+            switch (item.component) {
+              case "input":
+                return (
+                  <InputHandles
+                    key={index}
+                    item={item}
+                    requirementError={requirementError}
+                    setRequirementError={setRequirementError}
+                  />
+                );
+
+              case "select":
+                return (
+                  <SelectHandles
+                    key={index}
+                    item={item}
+                    requirementError={requirementError}
+                    setRequirementError={setRequirementError}
+                    formRef={formRef}
+                  />
+                );
+
+              case "button":
+                return (
+                  <div key={index} className="w-full mt-2">
+                    <Button
+                      type={item.type}
+                      className="w-full bg-black text-white py-2 rounded-xl hover:bg-gray-800"
+                    >
+                      {item.value}
+                    </Button>
+                  </div>
+                );
+
+              default:
+                return null;
+            }
+          })}
+        </div>
+      ) : (
+        <div>No Source Data Found</div>
+      )}
+    </form>
+  );
+};
+
+export default FormRenderer;

package/source/components/input/types.ts

@@ -6,4 +6,5 @@ export type InputProps = {
   OTPLength?: number;
   OTPClass?: string;
   onOTPValueChange?: (value: string) => void;
+  error?: undefined | string;
 } & InputHTMLAttributes<HTMLInputElement>;

package/source/components/select/index.tsx

@@ -175,6 +175,9 @@ const Select = forwardRef<any, SelectProps>((props, ref) => {
         <p className={primary["error-primary"]}>{error && error}</p>
       </div>
 
+      {/* Hidden input to integrate with the form */}
+      <input type="hidden" name={name} value={selectedItem || ""} readOnly />
+
       {showPopover && (
         <div className={popUp["pop-up-style"]}>
           {showSearch && (
@@ -225,4 +228,4 @@ const Select = forwardRef<any, SelectProps>((props, ref) => {
 });
 
 const MemoizedSelect = memo(Select);
-export { MemoizedSelect as Select };
+export { MemoizedSelect as Select };