gbs-add-block 0.0.49 → 0.0.51

package/README.md

@@ -1,4 +1,4 @@
-# GBS Building Blocks 2.0 (v0.0.49)
+# GBS Building Blocks 2.0 (v0.0.51)
 
 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.49)
+## What's New 🎉 (Ver 0.0.51)
 
 - Update on form renderer
 - Refactored Code for Better Readability

package/package.json

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

package/source/components/datepicker/index.tsx

@@ -29,6 +29,7 @@ export const DatePicker = ({
   name,
   error,
   placeholder = "Select a date",
+  disabled = false,
 }: DatePickerProps) => {
   applyScrollbarStyles();
 
@@ -61,6 +62,7 @@ export const DatePicker = ({
     setCurrentMonth,
     setCurrentYear
   );
+
   useClickOutside(
     dateRef as React.RefObject<HTMLElement>,
     () => {
@@ -124,7 +126,10 @@ export const DatePicker = ({
         onClick={toggleDatepicker}
         className={`${
           error ? primary["error-border"] : "border"
-        } p-2 rounded-lg w-full flex items-center gap-2 dark:text-white`}
+        } p-2 rounded-lg w-full flex items-center gap-2 dark:text-white ${
+          disabled ? "opacity-50 cursor-not-allowed" : ""
+        }`}
+        disabled={disabled}
       >
         <Icon
           dimensions={{ width: "20", height: "20" }}
@@ -144,7 +149,7 @@ export const DatePicker = ({
         readOnly
       />
 
-      {showDatepicker && (
+      {showDatepicker && !disabled && (
         <div className="absolute z-10 bg-white border border-gray-300 shadow-lg mt-1 w-full rounded dark:bg-black dark:text-white px-2">
           <div className="flex justify-between items-center p-2">
             <button

package/source/components/datepicker/types.ts

@@ -8,4 +8,5 @@ export type DatePickerProps = {
   onDateChange?: (date: Date) => void;
   name?: string;
   error?: string;
+  disabled?: boolean;
 };

package/source/components/formrenderer/componentHandles/DatePickerHandles.tsx

@@ -1,6 +1,7 @@
-import React from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { DatePicker } from "../../datepicker";
 import { DatePickerHandlesProps } from "../types";
+import { evaluateExpression } from "@grampro/headless-helpers";
 
 export default function DatePickerHandles({
   item,
@@ -8,7 +9,38 @@ export default function DatePickerHandles({
   setRequirementError,
   formRef,
   onChangeEvent,
+  context,
+  updateContext,
 }: DatePickerHandlesProps) {
+  const [isDisabled, setIsDisabled] = useState<boolean>(false);
+  const [isRequired, setIsRequired] = useState<boolean>(false);
+
+  // Evaluate expression with memoization
+  const evaluateCondition = useCallback(
+    (expression: string | boolean | undefined): boolean => {
+      if (typeof expression === "string") {
+        return evaluateExpression(expression, context);
+      }
+      return !!expression;
+    },
+    [context]
+  );
+
+  // Initialize context and handle dynamic states
+  useEffect(() => {
+    if (item?.name && item?.value !== undefined) {
+      updateContext("datepicker", item.name, item.value);
+    }
+
+    const disabled = evaluateCondition(item?.disabled);
+
+    setIsDisabled(disabled);
+
+    // Only set required if not disabled
+    const required = disabled ? false : evaluateCondition(item?.required);
+    setIsRequired(required);
+  }, [item, context, evaluateCondition, updateContext]);
+
   const handleSelectDate = (value: string[], key: string) => {
     if (formRef && formRef.current) {
       const hiddenInput = formRef.current.querySelector(
@@ -34,7 +66,7 @@ export default function DatePickerHandles({
       {item?.label && (
         <label htmlFor={item.name} className="font-medium text-sm">
           {item.label}
-          {item.required && <span className="text-red-500">*</span>}
+          {isRequired && <span className="text-red-500">*</span>}
         </label>
       )}
       <DatePicker

package/source/components/formrenderer/componentHandles/MultiHandles.tsx

@@ -29,11 +29,10 @@ export default function MultiHandles({
   // Initialize context and handle dynamic states
   useEffect(() => {
     if (item?.name && item?.value !== undefined) {
-      updateContext("select", item.name, item.value);
+      updateContext("multi-select", item.name, item.value);
     }
 
     const disabled = evaluateCondition(item?.disabled);
-    console.log("disabled", disabled);
 
     setIsDisabled(disabled);
 

package/source/components/formrenderer/componentHandles/SelectHandles.tsx

@@ -34,7 +34,6 @@ export default function SelectHandles({
     }
 
     const disabled = evaluateCondition(item?.disabled);
-    console.log("disabled", disabled);
 
     setIsDisabled(disabled);
 

package/source/components/formrenderer/helperFunctions.ts

@@ -1,3 +1,37 @@
+import InputHandles from "./componentHandles/InputHandles";
+import SelectHandles from "./componentHandles/SelectHandles";
+import MultiHandles from "./componentHandles/MultiHandles";
+import DatePickerHandles from "./componentHandles/DatePickerHandles";
+import CheckboxHandles from "./componentHandles/CheckBoxHandles";
+import { FormItem } from "./types";
+
+// Component Map
+export const COMPONENT_MAP = {
+  input: InputHandles,
+  select: SelectHandles,
+  "multi-select": MultiHandles,
+  datepicker: DatePickerHandles,
+  checkbox: CheckboxHandles,
+} as const;
+
+// Field Validation Helper
+export const validateField = (
+  field: HTMLInputElement | null,
+  item: FormItem
+): boolean => {
+  if (!item.required || !item.name || field?.disabled) {
+    return true;
+  }
+  // Explicitly check for null and empty value
+  if (!field) {
+    return false;
+  }
+  return field.value.trim() !== "";
+};
+
+// Input Validation functions starts here
+// You can add more validation functions here or
+// use zod for more complex validation
 export const validateEmail = (email: string) => {
   const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
   return emailRegex.test(email);
@@ -8,19 +42,6 @@ export const validatePhoneNumber = (phone: string) => {
   return phoneRegex.test(phone);
 };
 
-// In case of return as objects
-export const formDataToObject = (formData: FormData) => {
-  const obj: Record<string, any> = {};
-  formData.forEach((value, key) => {
-    try {
-      obj[key] = JSON.parse(value as string);
-    } catch {
-      obj[key] = value;
-    }
-  });
-  return obj;
-};
-
 export const validateInput = (value: string, type?: string): string | null => {
   if (!value) return null;
 
@@ -35,3 +56,17 @@ export const validateInput = (value: string, type?: string): string | null => {
       return null;
   }
 };
+// Input Validation functions ends here
+
+// In case of return as objects
+export const formDataToObject = (formData: FormData) => {
+  const obj: Record<string, any> = {};
+  formData.forEach((value, key) => {
+    try {
+      obj[key] = JSON.parse(value as string);
+    } catch {
+      obj[key] = value;
+    }
+  });
+  return obj;
+};

package/source/components/formrenderer/index.tsx

@@ -5,145 +5,87 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { useEffect, useRef, useState } from "react";
+import React, { useRef, useState, FormEvent } from "react";
 import { useFormContext } from "@grampro/headless-helpers";
-import { FormElement, FormItem, FormRendererProps } from "./types";
-import InputHandles from "./componentHandles/InputHandles";
-import SelectHandles from "./componentHandles/SelectHandles";
-import MultiHandles from "./componentHandles/MultiHandles";
-import DatePickerHandles from "./componentHandles/DatePickerHandles";
-import CheckboxHandles from "./componentHandles/CheckBoxHandles";
+import { FormItem, FormRendererProps } from "./types";
+import { COMPONENT_MAP, validateField } from "./helperFunctions";
 
-const FormRenderer = ({
+const FormRenderer: React.FC<FormRendererProps> = ({
   onSubmit,
-  sourceData,
-  formFormationClass = "grid grid-cols-1 text-left gap-4",
+  sourceData = [],
+  formFormationClass = "grid grid-cols-1 gap-2",
   formParentClass = "w-96",
-}: FormRendererProps) => {
-  const formRef = useRef<FormElement>(null);
+}) => {
+  const formRef = useRef<HTMLFormElement>(null);
   const [requirementError, setRequirementError] = useState<string[]>([]);
-
   const { context, updateContext } = useFormContext();
 
-  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+  // Handle form submission
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
-    const requirementErrorItems: string[] = [];
 
-    sourceData?.forEach((item: FormItem) => {
-      if (item.required && item.name) {
+    const requirementErrorItems = sourceData
+      .filter((item) => item.required && item.name)
+      .reduce((errors: string[], item) => {
         const field = formRef.current?.querySelector(
           `[name="${item.name}"]`
         ) as HTMLInputElement | null;
 
-        if (!field || !field.value.trim()) {
-          requirementErrorItems.push(item.name);
+        if (!validateField(field, item)) {
+          errors.push(item.name!);
         }
-      }
-    });
+        return errors;
+      }, []);
 
     setRequirementError(requirementErrorItems);
 
-    if (requirementErrorItems.length > 0) return;
+    if (requirementErrorItems.length === 0 && onSubmit && formRef.current) {
+      onSubmit(new FormData(formRef.current));
+    }
+  };
 
-    const formData = new FormData(formRef.current as HTMLFormElement);
-    if (onSubmit) onSubmit(formData);
+  // Render form component based on the type
+  const renderFormComponent = (item: FormItem, index: number) => {
+    if (item.component === "button") {
+      return (
+        <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"
+          >
+            {item.value}
+          </button>
+        </div>
+      );
+    }
+
+    const Component = item.component && COMPONENT_MAP[item.component];
+    if (!Component) return null;
+
+    return (
+      <Component
+        key={index}
+        item={item}
+        requirementError={requirementError}
+        setRequirementError={setRequirementError}
+        formRef={formRef}
+        onChangeEvent={item.onChangeEvent}
+        context={context}
+        updateContext={updateContext}
+      />
+    );
   };
 
+  // If no source data is found, return a message
+  if (!sourceData.length) {
+    return <div>No Source Data Found</div>;
+  }
+
   return (
     <form ref={formRef} onSubmit={handleSubmit} className={formParentClass}>
-      {sourceData && sourceData?.length > 0 ? (
-        <div className={formFormationClass}>
-          {sourceData.map((item: FormItem, index: number) => {
-            switch (item.component) {
-              case "input":
-                return (
-                  <InputHandles
-                    key={index}
-                    item={item}
-                    requirementError={requirementError}
-                    setRequirementError={setRequirementError}
-                    onChangeEvent={item.onChangeEvent}
-                    formRef={formRef}
-                    context={context}
-                    updateContext={updateContext}
-                  />
-                );
-
-              case "select":
-                return (
-                  <SelectHandles
-                    key={index}
-                    item={item}
-                    requirementError={requirementError}
-                    setRequirementError={setRequirementError}
-                    formRef={formRef}
-                    onChangeEvent={item.onChangeEvent}
-                    context={context}
-                    updateContext={updateContext}
-                  />
-                );
-
-              case "multi-select":
-                return (
-                  <MultiHandles
-                    key={index}
-                    item={item}
-                    requirementError={requirementError}
-                    setRequirementError={setRequirementError}
-                    formRef={formRef}
-                    onChangeEvent={item.onChangeEvent}
-                    context={context}
-                    updateContext={updateContext}
-                  />
-                );
-
-              case "datepicker":
-                return (
-                  <DatePickerHandles
-                    key={index}
-                    item={item}
-                    requirementError={requirementError}
-                    setRequirementError={setRequirementError}
-                    formRef={formRef}
-                    onChangeEvent={item.onChangeEvent}
-                  />
-                );
-
-              case "checkbox":
-                return (
-                  <CheckboxHandles
-                    key={index}
-                    item={item}
-                    requirementError={requirementError}
-                    setRequirementError={setRequirementError}
-                    formRef={formRef}
-                    onChangeEvent={item.onChangeEvent}
-                    sourceData={sourceData}
-                    context={context}
-                    updateContext={updateContext}
-                  />
-                );
-
-              case "button":
-                return (
-                  <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"
-                    >
-                      {item.value}
-                    </button>
-                  </div>
-                );
-
-              default:
-                return null;
-            }
-          })}
-        </div>
-      ) : (
-        <div>No Source Data Found</div>
-      )}
+      <div className={formFormationClass}>
+        {sourceData.map(renderFormComponent)}
+      </div>
     </form>
   );
 };

package/source/components/formrenderer/types.ts

@@ -9,7 +9,13 @@ export interface FormElement extends HTMLFormElement {
 export type FormItem = {
   id?: string;
   name?: string;
-  component?: string;
+  component?:
+    | "input"
+    | "select"
+    | "multi-select"
+    | "datepicker"
+    | "checkbox"
+    | "button";
   type?: string;
   required?: boolean | string;
   placeholder?: string;
@@ -83,6 +89,12 @@ export type DatePickerHandlesProps = {
   setRequirementError?: React.Dispatch<React.SetStateAction<string[]>>;
   formRef?: React.RefObject<HTMLFormElement | null>;
   onChangeEvent?: (event: any) => void;
+  context: FormContext;
+  updateContext: (
+    componentName: string,
+    fieldName: string,
+    value: FieldValue
+  ) => void;
 };
 
 export type SelectHandlesProps = {

package/source/components/multiselect/index.tsx

@@ -154,6 +154,7 @@ const MultiSelect = forwardRef<MultiSelectHandle, MultiSelectProps>(
           name={name}
           value={JSON.stringify(selected) || ""}
           readOnly
+          disabled={disabled}
         />
 
         {showPopover && !disabled && (

package/source/components/select/index.tsx

@@ -139,7 +139,13 @@ const Select = forwardRef<SelectHandle, SelectProps>((props, ref) => {
         {error && <p className={primary["error-primary"]}>{error}</p>}
       </div>
 
-      <input type="hidden" name={name} value={selectedItem || ""} readOnly />
+      <input
+        type="hidden"
+        name={name}
+        value={selectedItem || ""}
+        readOnly
+        disabled={disabled}
+      />
 
       {showPopover && !disabled && (
         <div className={popUp["pop-up-style"]}>