gbs-add-block 0.0.43 → 0.0.45

package/README.md

@@ -1,4 +1,4 @@
-# GBS Building Blocks 2.0 (v0.0.43)
+# GBS Building Blocks 2.0 (v0.0.44)
 
 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.43)
+## What's New 🎉 (Ver 0.0.44)
 
 - Refactored Code for Better Readability and removed dependency for Toast
 

package/package.json

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

package/source/components/formrenderer/CheckBoxHandles.tsx

@@ -1,11 +1,13 @@
 import React, { useEffect, useState } from "react";
-import { CheckboxHandlesProps, FormItem } from "./types";
+import { CheckboxHandlesProps } from "./types";
 
 const CheckboxHandles = ({
   item,
   formRef,
   requirementError,
   setRequirementError,
+  onChangeEvent,
+  updateContext,
 }: CheckboxHandlesProps) => {
   const [checked, setChecked] = useState<boolean>(!!item?.value);
 
@@ -47,6 +49,9 @@ const CheckboxHandles = ({
               prevErrors.filter((error) => error !== item.name)
             );
           }
+          onChangeEvent?.(e);
+
+          item?.name && updateContext("checkbox", item.name, newValue);
         }}
         className={`w-5 h-5 cursor-pointer rounded-md border-2 transition-colors duration-200 ${
           item?.name && requirementError.includes(item?.name)

package/source/components/formrenderer/DatePickerHandles.tsx

@@ -7,6 +7,7 @@ interface DatePickerHandlesProps {
   requirementError: string[];
   setRequirementError?: React.Dispatch<React.SetStateAction<string[]>>;
   formRef?: React.RefObject<HTMLFormElement | null>;
+  onChangeEvent?: (event: any) => void;
 }
 
 export default function DatePickerHandles({
@@ -14,6 +15,7 @@ export default function DatePickerHandles({
   requirementError,
   setRequirementError,
   formRef,
+  onChangeEvent,
 }: DatePickerHandlesProps) {
   const handleSelectDate = (value: string[], key: string) => {
     if (formRef && formRef.current) {
@@ -52,6 +54,7 @@ export default function DatePickerHandles({
               prevErrors.filter((errorName) => errorName !== item.name)
             );
           }
+          onChangeEvent?.(value);
         }}
         error={
           item?.name && requirementError.includes(item.name)

package/source/components/formrenderer/InputHandles.tsx

@@ -1,43 +1,80 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { validateEmail, validatePhoneNumber } from "./helperFunctions";
 import { Input } from "../input";
-import { FormItem } from "./types";
+import { FieldValue, FormContext, FormItem } from "./types";
+import { evaluateExpression } from "@grampro/expression-evaluator";
+import { twMerge } from "tailwind-merge";
 
 interface InputHandlesProps {
   item?: FormItem;
   requirementError: string[];
   setRequirementError?: React.Dispatch<React.SetStateAction<string[]>>;
+  onChangeEvent?: (event: any) => void;
+  formRef: React.RefObject<HTMLFormElement | null>;
+  context: FormContext;
+  updateContext: (
+    componentName: string,
+    fieldName: string,
+    value: FieldValue
+  ) => void;
 }
 
 const InputHandles = ({
   item,
   requirementError,
   setRequirementError,
+  onChangeEvent,
+  context,
+  updateContext,
 }: InputHandlesProps) => {
   const [inputError, setInputError] = useState<string | null>(null);
+  const [isDisabled, setIsDisabled] = useState<boolean>(false);
+  const [isRequired, setIsRequired] = useState<boolean>(false);
+
+  // Initialize context with default values
+  useEffect(() => {
+    if (item?.name && item?.value !== undefined) {
+      updateContext("input", item.name, item.value);
+    }
+  }, [item?.name, item?.value, updateContext]);
+
+  // Handle dynamic disabled/required states expressions
+  useEffect(() => {
+    if (typeof item?.disabled === "string") {
+      setIsDisabled(evaluateExpression(item.disabled, context));
+    } else if (typeof item?.disabled === "boolean") {
+      setIsDisabled(item.disabled);
+    }
+
+    if (typeof item?.required === "string") {
+      setIsRequired(evaluateExpression(item.required, context));
+    } else if (typeof item?.required === "boolean") {
+      setIsRequired(item.required);
+    }
+  }, [item, context]);
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const { value } = event.target;
 
-    setRequirementError &&
-      setRequirementError((prevErrors: string[]) =>
-        prevErrors.filter((error) => error !== item?.name)
+    if (item?.name) {
+      updateContext("input", item.name, value);
+
+      setRequirementError?.((prevErrors) =>
+        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);
-      }
+    if (item?.type === "email" && !validateEmail(value)) {
+      setInputError("Invalid email format");
+    } else if (item?.type === "tel" && !validatePhoneNumber(value)) {
+      setInputError("Invalid phone number. Must be 10 digits.");
+    } else {
+      setInputError(null);
     }
+
+    // Trigger onChange event
+    onChangeEvent?.(event);
   };
 
   return (
@@ -45,7 +82,7 @@ const InputHandles = ({
       {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>
       )}
       <Input
@@ -53,12 +90,17 @@ const InputHandles = ({
         name={item?.name}
         placeholder={item?.placeholder || ""}
         onChange={handleChange}
-        className={`border rounded-md px-4 py-[6px] w-full text-black ${
-          inputError || (item?.name && requirementError.includes(item?.name))
-            ? "border-red-500"
-            : "border-gray-300"
-        }`}
+        className={twMerge(
+          `border rounded-md px-4 py-[6px] w-full text-black ${
+            inputError || (item?.name && requirementError.includes(item?.name))
+              ? "border-red-500"
+              : "border-gray-300"
+          }`,
+          item?.stepProperty?.customClass?.inputClass
+        )}
         defaultValue={item?.value ?? ""}
+        disabled={isDisabled}
+        required={isRequired}
       />
       {item?.name && requirementError.includes(item.name) && (
         <p className="text-red-500 text-xs">{`${item?.name} is required`}</p>

package/source/components/formrenderer/MultiHandles.tsx

@@ -7,6 +7,7 @@ interface MultiSelectHandlesProps {
   requirementError: string[];
   setRequirementError?: React.Dispatch<React.SetStateAction<string[]>>;
   formRef?: React.RefObject<HTMLFormElement | null>;
+  onChangeEvent?: (event: any) => void;
 }
 
 export default function MultiHandles({
@@ -14,6 +15,7 @@ export default function MultiHandles({
   requirementError,
   setRequirementError,
   formRef,
+  onChangeEvent,
 }: MultiSelectHandlesProps) {
   const handleSelect = (value: string[], key: string) => {
     if (formRef && formRef.current) {
@@ -53,6 +55,7 @@ export default function MultiHandles({
               prevErrors.filter((errorName) => errorName !== item.name)
             );
           }
+          onChangeEvent?.(value);
         }}
         error={
           item?.name && requirementError.includes(item.name)

package/source/components/formrenderer/SelectHandles.tsx

@@ -1,103 +1,40 @@
-import React, { useEffect, useState } from "react";
-import { Select } from "../select";
-import { Option, SelectHandlesProps } from "./types";
+import React, { useState } from "react";
+import { Select } from "../refactoredSelect/Select";
+
+interface Option {
+  value: string;
+  label: string;
+}
+
+interface SelectHandlesProps {
+  item?: {
+    name?: string;
+    label?: string;
+    options?: Option[];
+    value?: string;
+    required?: boolean;
+  };
+  requirementError: string[];
+  setRequirementError: React.Dispatch<React.SetStateAction<string[]>>;
+  formRef: React.RefObject<HTMLFormElement | null>;
+  onChangeEvent?: (event: any) => void;
+}
 
 export default function SelectHandles({
   item,
   requirementError,
   setRequirementError,
   formRef,
-  dependencyMap = {},
+  onChangeEvent,
 }: SelectHandlesProps) {
-  const [options, setOptions] = useState<Option[]>(item?.options || []);
-
-  const getFieldValue = (fieldName: string): string => {
-    if (!formRef?.current) return "";
-    const field = formRef.current.querySelector(
-      `input[name="${fieldName}"]`
-    ) as HTMLInputElement;
-    return field?.value || "";
-  };
-
-  const getDependentOptions = (fieldName: string): Option[] => {
-    const fieldConfig = dependencyMap[fieldName];
-    if (!fieldConfig) return [];
-
-    let currentData = fieldConfig.dataStructure;
-
-    if (fieldConfig.parent) {
-      const parentValue = getFieldValue(fieldConfig.parent);
-      if (!parentValue) return [];
-
-      const getNestedValue = (data: any, path: string[]): any => {
-        return path.reduce((acc, key) => acc?.[key], data);
-      };
-
-      const parentChain: string[] = [];
-      let currentField = fieldName;
-      while (dependencyMap[currentField]?.parent) {
-        const parent = dependencyMap[currentField].parent!;
-        parentChain.unshift(getFieldValue(parent));
-        currentField = parent;
-      }
-
-      currentData = getNestedValue(currentData, parentChain);
-    }
-
-    if (Array.isArray(currentData)) {
-      return currentData.map((value) => ({ value, label: value }));
-    } else if (typeof currentData === "object" && currentData !== null) {
-      return Object.keys(currentData).map((key) => ({
-        value: key,
-        label: key,
-      }));
-    }
-
-    return [];
-  };
-
-  useEffect(() => {
-    if (!item?.name || !dependencyMap[item.name]) {
-      return;
-    }
-
-    const updateOptions = () => {
-      const newOptions = getDependentOptions(item.name!);
-      setOptions(newOptions);
-    };
-
-    updateOptions();
-
-    const parentField = dependencyMap[item.name]?.parent;
-    if (parentField && formRef?.current) {
-      const parentInput = formRef.current.querySelector(
-        `input[name="${parentField}"]`
-      );
-
-      const handleParentChange = () => {
-        if (formRef.current) {
-          const currentField = formRef.current.querySelector(
-            `input[name="${item.name}"]`
-          ) as HTMLInputElement;
-          if (currentField) {
-            currentField.value = "";
-          }
-        }
-        updateOptions();
-      };
-
-      parentInput?.addEventListener("change", handleParentChange);
-      return () =>
-        parentInput?.removeEventListener("change", handleParentChange);
-    }
-  }, [item?.name, dependencyMap, formRef]);
+  const [options] = useState<Option[]>(item?.options || []);
 
   const handleSelect = (value: string | undefined, key: string) => {
     if (!formRef?.current) return;
 
     let input = formRef.current.querySelector(
       `input[name="${key}"]`
-    ) as HTMLInputElement;
+    ) as HTMLInputElement | null;
 
     if (!input) {
       input = document.createElement("input");
@@ -127,10 +64,10 @@ export default function SelectHandles({
         selectedItem={item?.value ?? ""}
         onSelect={(value: string | undefined) => {
           item?.name && handleSelect(value, item.name);
-          setRequirementError &&
-            setRequirementError((prevErrors) =>
-              prevErrors.filter((errorName) => errorName !== item?.name)
-            );
+          setRequirementError((prevErrors) =>
+            prevErrors.filter((errorName) => errorName !== item?.name)
+          );
+          onChangeEvent?.(value);
         }}
         error={
           item?.name && requirementError.includes(item.name)

package/source/components/formrenderer/index.tsx

@@ -12,17 +12,19 @@ import { FormElement, FormItem, FormRendererProps } from "./types";
 import MultiHandles from "./MultiHandles";
 import DatePickerHandles from "./DatePickerHandles";
 import CheckboxHandles from "./CheckBoxHandles";
+import { useFormContext } from "@grampro/expression-evaluator";
 
 const FormRenderer = ({
   onSubmit,
   sourceData,
   formFormationClass = "grid grid-cols-1 text-left gap-4",
   formParentClass = "w-96",
-  dependencyConfig,
 }: FormRendererProps) => {
   const formRef = useRef<FormElement>(null);
   const [requirementError, setRequirementError] = useState<string[]>([]);
 
+  const { context, updateContext } = useFormContext();
+
   const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     const requirementErrorItems: string[] = [];
@@ -60,6 +62,10 @@ const FormRenderer = ({
                     item={item}
                     requirementError={requirementError}
                     setRequirementError={setRequirementError}
+                    onChangeEvent={item.onChangeEvent}
+                    formRef={formRef}
+                    context={context}
+                    updateContext={updateContext}
                   />
                 );
 
@@ -67,11 +73,17 @@ const FormRenderer = ({
                 return (
                   <SelectHandles
                     key={index}
-                    item={item}
+                    item={{
+                      name: item.name,
+                      label: item.label,
+                      options: item.options,
+                      value: item.value,
+                      required: Boolean(item.required),
+                    }}
                     requirementError={requirementError}
                     setRequirementError={setRequirementError}
                     formRef={formRef}
-                    dependencyMap={dependencyConfig}
+                    onChangeEvent={item.onChangeEvent}
                   />
                 );
 
@@ -83,6 +95,7 @@ const FormRenderer = ({
                     requirementError={requirementError}
                     setRequirementError={setRequirementError}
                     formRef={formRef}
+                    onChangeEvent={item.onChangeEvent}
                   />
                 );
 
@@ -94,6 +107,7 @@ const FormRenderer = ({
                     requirementError={requirementError}
                     setRequirementError={setRequirementError}
                     formRef={formRef}
+                    onChangeEvent={item.onChangeEvent}
                   />
                 );
 
@@ -105,6 +119,10 @@ const FormRenderer = ({
                     requirementError={requirementError}
                     setRequirementError={setRequirementError}
                     formRef={formRef}
+                    onChangeEvent={item.onChangeEvent}
+                    sourceData={sourceData}
+                    context={context}
+                    updateContext={updateContext}
                   />
                 );
 

package/source/components/formrenderer/types.ts

@@ -7,7 +7,7 @@ export type FormItem = {
   name?: string;
   component?: string;
   type?: string;
-  required?: boolean;
+  required?: boolean | string;
   placeholder?: string;
   options?: { value: string; label: string }[];
   value?: string;
@@ -17,6 +17,13 @@ export type FormItem = {
   dependency?: string;
   hasDependents?: boolean;
   isReady?: boolean;
+  disabled?: string | boolean;
+  onChangeEvent?: (event: any) => void;
+  stepProperty?: {
+    customClass?: {
+      inputClass?: string;
+    };
+  };
 };
 
 interface DependencyConfig {
@@ -58,4 +65,22 @@ export type CheckboxHandlesProps = {
   requirementError: string[];
   setRequirementError?: React.Dispatch<React.SetStateAction<string[]>>;
   formRef?: React.RefObject<HTMLFormElement | null>;
+  onChangeEvent?: (event: any) => void;
+  changeTrigger?: number;
+  setChangeTrigger?: React.Dispatch<React.SetStateAction<number>>;
+  sourceData?: FormItem[];
+  context: FormContext;
+  updateContext: (
+    componentName: string,
+    fieldName: string,
+    value: FieldValue
+  ) => void;
 };
+
+export type FieldValue = string | boolean | number | null;
+
+export interface FormContext {
+  [componentName: string]: {
+    [fieldName: string]: FieldValue;
+  };
+}

package/source/components/toast/ToastComponent.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect } from "react";
 import { Toast } from "./types";
 import { useToastStore } from "./toastStore";
+import ToastIcon from "./ToastIcon";
 
 interface ToastProps {
   toast: Toast;
@@ -13,11 +14,11 @@ const bgColors = {
   warning: "bg-yellow-50 hover:bg-yellow-100",
 } as const;
 
-const iconColors = {
-  default: "text-gray-800",
-  success: "text-green-600",
-  error: "text-red-600",
-  warning: "text-yellow-600",
+const toastAnimation = {
+  default: "",
+  error: "animate-shake animate-once animate-duration-200",
+  success: "animate-jump-in animate-once animate-duration-200",
+  warning: "animate-jump-in animate-once animate-duration-200",
 } as const;
 
 const CloseButton = ({ onDismiss }: { onDismiss: () => void }) => (
@@ -41,57 +42,6 @@ const CloseButton = ({ onDismiss }: { onDismiss: () => void }) => (
   </button>
 );
 
-const ToastIcon = ({ type }: { type: Toast["type"] }) => {
-  if (!type) return null;
-
-  return (
-    <div className={`h-5 w-5 ${iconColors[type]}`}>
-      {type === "success" && (
-        <svg
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            d="M5 13l4 4L19 7"
-          />
-        </svg>
-      )}
-      {type === "error" && (
-        <svg
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            d="M6 18L18 6M6 6l12 12"
-          />
-        </svg>
-      )}
-      {type === "warning" && (
-        <svg
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-          />
-        </svg>
-      )}
-    </div>
-  );
-};
-
 export function ToastComponent({ toast }: ToastProps) {
   const { dismiss } = useToastStore();
   const handleDismiss = () => dismiss(toast.id);
@@ -121,9 +71,10 @@ export function ToastComponent({ toast }: ToastProps) {
     <div
       className={`
         ${bgColors[toast.type || "default"]}
+        ${toastAnimation[toast.type || "default"]}
         transform transition-all duration-300 ease-in-out
         pointer-events-auto relative flex w-full items-center justify-between
-        overflow-hidden rounded-lg border p-4 shadow-lg
+        overflow-hidden rounded-full border px-4 py-3 shadow-lg
       `}
       role="alert"
     >

package/source/components/toast/ToastIcon.tsx

@@ -0,0 +1,61 @@
+import { Toast } from "./types";
+
+const ToastIcon = ({ type }: { type: Toast["type"] }) => {
+  if (!type) return null;
+
+  const iconColors = {
+    default: "text-gray-800",
+    success: "text-green-600",
+    error: "text-red-600",
+    warning: "text-yellow-600",
+  } as const;
+
+  return (
+    <div className={`h-5 w-5 ${iconColors[type]}`}>
+      {type === "success" && (
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M5 13l4 4L19 7"
+          />
+        </svg>
+      )}
+      {type === "error" && (
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M6 18L18 6M6 6l12 12"
+          />
+        </svg>
+      )}
+      {type === "warning" && (
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+          />
+        </svg>
+      )}
+    </div>
+  );
+};
+
+export default ToastIcon;