@grampro/kit 0.0.0-stage → 2.4.1

package/source/legacy-components/formrenderer/componentHandles/CheckBoxHandles.tsx

@@ -0,0 +1,80 @@
+import React, { useEffect, useState } from "react";
+import type { CheckboxHandlesProps } from "../types";
+
+const CheckboxHandles = ({
+  item,
+  formRef,
+  requirementError,
+  setRequirementError,
+  onChangeEvent,
+  updateContext,
+}: CheckboxHandlesProps) => {
+  const [checked, setChecked] = useState<boolean>(!!item?.value);
+
+  // We Need this to set the value of the checkbox in the form
+  // if the value is not set in the form
+  useEffect(() => {
+    if (item?.name) {
+      handleSelect(checked, item.name);
+    }
+  }, []);
+
+  const handleSelect = (value: boolean, key: string) => {
+    if (formRef && formRef.current) {
+      const hiddenInput = formRef.current.querySelector(
+        `input[name="${key}"]`
+      ) as HTMLInputElement;
+
+      if (hiddenInput) {
+        hiddenInput.value = value.toString();
+      } else {
+        const input = document.createElement("input");
+        input.type = "hidden";
+        input.name = key;
+        input.value = value.toString();
+        formRef.current.appendChild(input);
+      }
+    }
+  };
+
+  return (
+    <div className="w-full flex items-center gap-2">
+      <input
+        type="checkbox"
+        checked={checked}
+        name={item?.name}
+        onChange={(e) => {
+          const newValue = e.target.checked;
+          setChecked(newValue);
+          if (item?.name) {
+            handleSelect(newValue, item.name);
+            setRequirementError?.((prevErrors) =>
+              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)
+            ? "border-red-500"
+            : "border-gray-300"
+        }`}
+      />
+      {item?.label && (
+        <label htmlFor={item.name} className="font-medium text-sm">
+          {item.label}
+          {item.required && <span className="text-red-500">*</span>}
+        </label>
+      )}
+      {item?.name && requirementError.includes(item.name) && (
+        <p className="text-red-500 text-xs">{`${
+          item?.label || item?.name
+        } is required`}</p>
+      )}
+    </div>
+  );
+};
+
+export default CheckboxHandles;

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

@@ -0,0 +1,93 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { DatePicker } from "../../datepicker";
+import type { DatePickerHandlesProps } from "../types";
+import { evaluateExpression } from "@grampro/headless-helpers";
+
+export default function DatePickerHandles({
+  item,
+  requirementError,
+  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(
+        `input[name="${key}"]`
+      ) as HTMLInputElement;
+
+      if (hiddenInput) {
+        hiddenInput.value = Array.isArray(value)
+          ? JSON.stringify(value)
+          : value;
+      } else {
+        const input = document.createElement("input");
+        input.type = "hidden";
+        input.name = key;
+        input.value = Array.isArray(value) ? JSON.stringify(value) : value;
+        formRef.current.appendChild(input);
+      }
+    }
+  };
+
+  return (
+    <div className="w-full">
+      {item?.label && (
+        <label htmlFor={item.name} className="font-medium text-sm">
+          {item.label}
+          {isRequired && <span className="text-red-500">*</span>}
+        </label>
+      )}
+      <DatePicker
+        name={item?.name}
+        onDateChange={(value: any) => {
+          if (item?.name) {
+            handleSelectDate(value, item.name);
+            setRequirementError?.((prevErrors) =>
+              prevErrors.filter((errorName) => errorName !== item.name)
+            );
+          }
+          onChangeEvent?.(value);
+        }}
+        error={
+          item?.name && requirementError.includes(item.name)
+            ? `${item.name} is required`
+            : undefined
+        }
+        selectedDateValue={item?.value ? new Date(item.value) : undefined}
+        disabled={isDisabled}
+      />
+    </div>
+  );
+}

package/source/legacy-components/formrenderer/componentHandles/InputHandles.tsx

@@ -0,0 +1,106 @@
+import React, { useEffect, useState, useCallback } from "react";
+import { validateInput } from "../helperFunctions";
+import { Input } from "../../input";
+import type { InputHandlesProps } from "../types";
+import { evaluateExpression } from "@grampro/headless-helpers";
+import { twMerge } from "tailwind-merge";
+
+const InputHandles: React.FC<InputHandlesProps> = ({
+  item,
+  requirementError,
+  setRequirementError,
+  onChangeEvent,
+  context,
+  updateContext,
+}) => {
+  const [inputError, setInputError] = useState<string | null>(null);
+  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("input", 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 handleChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const { value } = event.target;
+
+      if (item?.name) {
+        updateContext("input", item.name, value);
+        setRequirementError?.((prev) =>
+          prev.filter((error) => error !== item.name)
+        );
+      }
+
+      const validationError = validateInput(value, item?.type);
+      setInputError(validationError);
+
+      onChangeEvent?.(event);
+    },
+    [
+      item?.name,
+      item?.type,
+      updateContext,
+      setRequirementError,
+      onChangeEvent,
+      validateInput,
+    ]
+  );
+
+  // Merge input classes
+  const inputClassName = 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
+  );
+
+  return (
+    <div className="w-full">
+      {item?.label && (
+        <label htmlFor={item.name} className="font-medium text-sm">
+          {item.label}
+          {isRequired && <span className="text-red-500">*</span>}
+        </label>
+      )}
+      <Input
+        type={item?.type}
+        name={item?.name}
+        placeholder={item?.placeholder ?? ""}
+        onChange={handleChange}
+        className={inputClassName}
+        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>
+      )}
+      {inputError && <p className="text-red-500 text-xs">{inputError}</p>}
+    </div>
+  );
+};
+
+export default InputHandles;

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

@@ -0,0 +1,93 @@
+import React, { useCallback, useEffect, useState } from "react";
+import type { MultiSelectHandlesProps } from "../types";
+import { MultiSelect } from "../../multiselect";
+import { evaluateExpression } from "@grampro/headless-helpers";
+
+export default function MultiHandles({
+  item,
+  requirementError,
+  setRequirementError,
+  formRef,
+  onChangeEvent,
+  context,
+  updateContext,
+}: MultiSelectHandlesProps) {
+  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("multi-select", 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 handleSelect = (value: string[], key: string) => {
+    if (formRef && formRef.current) {
+      const hiddenInput = formRef.current.querySelector(
+        `input[name="${key}"]`
+      ) as HTMLInputElement;
+
+      if (hiddenInput) {
+        hiddenInput.value = Array.isArray(value)
+          ? JSON.stringify(value)
+          : value;
+      } else {
+        const input = document.createElement("input");
+        input.type = "hidden";
+        input.name = key;
+        input.value = Array.isArray(value) ? JSON.stringify(value) : value;
+        formRef.current.appendChild(input);
+      }
+    }
+  };
+
+  return (
+    <div className="w-full">
+      {item?.label && (
+        <label htmlFor={item.name} className="font-medium text-sm">
+          {item.label}
+          {isRequired && <span className="text-red-500">*</span>}
+        </label>
+      )}
+      <MultiSelect
+        name={item?.name}
+        items={item?.options}
+        onSelect={(value: string[]) => {
+          if (item?.name) {
+            handleSelect(value, item.name);
+            setRequirementError?.((prevErrors) =>
+              prevErrors.filter((errorName) => errorName !== item.name)
+            );
+          }
+          onChangeEvent?.(value);
+        }}
+        error={
+          item?.name && requirementError.includes(item.name)
+            ? `${item.name} is required`
+            : undefined
+        }
+        disabled={isDisabled}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,95 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { Select } from "../../select";
+import type { Option, SelectHandlesProps } from "../types";
+import { evaluateExpression } from "@grampro/headless-helpers";
+
+export default function SelectHandles({
+  item,
+  requirementError,
+  setRequirementError,
+  formRef,
+  onChangeEvent,
+  context,
+  updateContext,
+}: SelectHandlesProps) {
+  const [options] = useState<Option[]>(item?.options || []);
+  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("select", 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]);
+
+  // Handle select change event
+  const handleSelect = (value: string | undefined, key: string) => {
+    if (!formRef?.current) return;
+
+    let input = formRef.current.querySelector(
+      `input[name="${key}"]`
+    ) as HTMLInputElement | null;
+
+    if (!input) {
+      input = document.createElement("input");
+      input.type = "hidden";
+      input.name = key;
+      formRef.current.appendChild(input);
+    }
+
+    if (value) {
+      input.value = value;
+    }
+    const event = new Event("change", { bubbles: true });
+    input.dispatchEvent(event);
+  };
+
+  return (
+    <div className="w-full">
+      {item?.label && (
+        <label htmlFor={item.name} className="font-medium text-sm">
+          {item.label}
+          {isRequired && <span className="text-red-500">*</span>}
+        </label>
+      )}
+      <Select
+        name={item?.name}
+        items={options}
+        selectedItem={item?.value ?? ""}
+        onSelect={(value: string | undefined) => {
+          item?.name && handleSelect(value, item.name);
+          setRequirementError((prevErrors) =>
+            prevErrors.filter((errorName) => errorName !== item?.name)
+          );
+          onChangeEvent?.(value);
+        }}
+        error={
+          item?.name && requirementError.includes(item.name)
+            ? `${item.name} is required`
+            : undefined
+        }
+        disabled={isDisabled}
+      />
+    </div>
+  );
+}

package/source/legacy-components/formrenderer/helperFunctions.ts

@@ -0,0 +1,72 @@
+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 type { 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);
+};
+
+export const validatePhoneNumber = (phone: string) => {
+  const phoneRegex = /^[0-9]{10}$/;
+  return phoneRegex.test(phone);
+};
+
+export const validateInput = (value: string, type?: string): string | null => {
+  if (!value) return null;
+
+  switch (type) {
+    case "email":
+      return validateEmail(value) ? null : "Invalid email format";
+    case "tel":
+      return validatePhoneNumber(value)
+        ? null
+        : "Invalid phone number. Must be 10 digits.";
+    default:
+      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/legacy-components/formrenderer/index.tsx

@@ -0,0 +1,93 @@
+/**
+ * Copyright (c) Grampro Business Services and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, { useRef, useState, FormEvent } from "react";
+import { useFormContext } from "@grampro/headless-helpers";
+import type { FormItem, FormRendererProps } from "./types";
+import { COMPONENT_MAP, validateField } from "./helperFunctions";
+
+const FormRenderer: React.FC<FormRendererProps> = ({
+  onSubmit,
+  schema = [],
+  formFormationClass = "grid grid-cols-1 gap-2",
+  formParentClass = "w-96",
+}) => {
+  const formRef = useRef<HTMLFormElement>(null);
+  const [requirementError, setRequirementError] = useState<string[]>([]);
+  const { context, updateContext } = useFormContext();
+
+  // Handle form submission
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    const requirementErrorItems = schema
+      .filter((item) => item.required && item.name)
+      .reduce((errors: string[], item) => {
+        const field = formRef.current?.querySelector(
+          `[name="${item.name}"]`
+        ) as HTMLInputElement | null;
+
+        if (!validateField(field, item)) {
+          errors.push(item.name!);
+        }
+        return errors;
+      }, []);
+
+    setRequirementError(requirementErrorItems);
+
+    if (requirementErrorItems.length === 0 && onSubmit && formRef.current) {
+      onSubmit(new FormData(formRef.current));
+    }
+  };
+
+  // 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 schema data is found, return a message
+  if (!schema.length) {
+    return <div>No Source Data Found</div>;
+  }
+
+  return (
+    <form ref={formRef} onSubmit={handleSubmit} className={formParentClass}>
+      <div className={formFormationClass}>
+        {schema.map(renderFormComponent)}
+      </div>
+    </form>
+  );
+};
+
+export default FormRenderer;