@engagebay/engagebay-form-module 1.0.10 → 1.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@engagebay/engagebay-form-module",
-    "version": "1.0.10",
+    "version": "1.0.11",
     "description": "Provide base form components to engagebay",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1"

package/src/form/formfields/CheckboxField.tsx

@@ -1,32 +1,46 @@
 import { RegisterOptions } from "react-hook-form";
 import { useContext, useEffect, useState } from "react";
 import { FormContext } from "../context/FormContext";
-import { FormFieldComponentPropSchema } from "../schema/FormFieldSchema";
+import {
+  FormFieldComponentPropSchema,
+  OutputFormatType,
+} from "../schema/FormFieldSchema";
 import { Checkbox, Field, Input, Label } from "@headlessui/react";
 import React from "react";
 import RenderFormField from "../util/RenderFormField";
 import { handleChange, registerFormField } from "../util";
+import { normalizeCheckboxBooleanValue, normalizeMultiSelectValue } from "../util/normalizeCustomFieldValues";
 const CheckboxField: React.FC<FormFieldComponentPropSchema> = (
   props: FormFieldComponentPropSchema
 ) => {
   const formContext = useContext(FormContext);
   const [selectedOption, setSelectedOption] = useState<string[]>(
-    formContext.getValues(props.fieldConfig.name)
-      ? formContext.getValues(props.fieldConfig.name)
-      : []
+    normalizeMultiSelectValue(formContext.getValues(props.fieldConfig.name))
   );
   const [isChecked, setIsChecked] = useState<boolean>(
-    formContext.getValues(props.fieldConfig.name)
-      ? formContext.getValues(props.fieldConfig.name)
-      : props.fieldConfig.defaultValue
+    normalizeCheckboxBooleanValue(
+      formContext.getValues(props.fieldConfig.name) ?? props.fieldConfig.defaultValue
+    )
   );
   useEffect(() => {
-    if (formContext.getValues(props.fieldConfig.name)) {
-      setSelectedOption(formContext.getValues(props.fieldConfig.name));
+    const current = formContext.getValues(props.fieldConfig.name);
+    if (props.fieldConfig.options) {
+      setSelectedOption(normalizeMultiSelectValue(current));
+    } else {
+      setIsChecked(
+        normalizeCheckboxBooleanValue(current ?? props.fieldConfig.defaultValue)
+      );
     }
   }, []);
   let registerOptions: RegisterOptions = registerFormField(props.fieldConfig);
   let hookProps = formContext.register(props.fieldConfig.name, registerOptions);
+  const getOutputValue = (value: any) => {
+    if (props.fieldConfig.outputFormat === OutputFormatType.STRING) {
+      if (Array.isArray(value)) return JSON.stringify(value);
+      if (typeof value === "boolean") return String(value);
+    }
+    return value;
+  };
   const handleInput = (option: string) => {
     let tempData: string[] = selectedOption;
     if (selectedOption.includes(option)) {
@@ -36,7 +50,12 @@ const CheckboxField: React.FC<FormFieldComponentPropSchema> = (
       tempData.push(option);
       setSelectedOption([...tempData]);
     }
-    handleChange(tempData, formContext, props.fieldConfig, props.onChange);
+    handleChange(
+      getOutputValue(tempData),
+      formContext,
+      props.fieldConfig,
+      props.onChange
+    );
   };
   function getInput() {
     return props.fieldConfig.options ? (
@@ -87,7 +106,7 @@ const CheckboxField: React.FC<FormFieldComponentPropSchema> = (
           checked={isChecked}
           onChange={(checked) => {
             handleChange(
-              checked,
+              getOutputValue(checked),
               formContext,
               props.fieldConfig,
               props.onChange

package/src/form/formfields/DatePickerField.tsx

@@ -1,12 +1,15 @@
 import { RegisterOptions } from "react-hook-form";
-import React, { useContext, useEffect, useRef, useState } from "react";
+import React, { useContext, useEffect } from "react";
 import Datepicker from "react-tailwindcss-datepicker";
 import { FormContext } from "../context/FormContext";
 import { FormFieldComponentPropSchema } from "../schema/FormFieldSchema";
 import RenderFormField from "../util/RenderFormField";
 import { handleChange, registerFormField } from "../util";
+import { normalizeDateFormat, normalizeDateInputValue } from "../util/normalizeCustomFieldValues";
 import moment from "moment";
 
+
+
 const DatePicker: React.FC<FormFieldComponentPropSchema> = (
   props: FormFieldComponentPropSchema
 ) => {
@@ -35,6 +38,7 @@ const DatePicker: React.FC<FormFieldComponentPropSchema> = (
   let hookProps = formContext.register(props.fieldConfig.name, registerOptions);
 
   function getInput() {
+    const displayFormat = normalizeDateFormat(props.fieldConfig.dateDisplayFormat);
     const rawStart =
       initialDate?.startDate ||
       props.fieldConfig.defaultValue ||
@@ -43,13 +47,9 @@ const DatePicker: React.FC<FormFieldComponentPropSchema> = (
       initialDate?.endDate ||
       props.fieldConfig.defaultValue ||
       "";
-    const toDate = (v: string | Date | null | undefined): Date | null => {
-      if (v == null || v === "") return null;
-      return moment(v).isValid() ? moment(v).toDate() : null;
-    };
     const value = {
-      startDate: toDate(rawStart),
-      endDate: toDate(rawEnd),
+      startDate: normalizeDateInputValue(rawStart, displayFormat),
+      endDate: normalizeDateInputValue(rawEnd, displayFormat),
     };
     // Calendar opens on selected date's month/year (must be a Date instance)
     const startFrom = value.startDate instanceof Date ? value.startDate : new Date();
@@ -58,10 +58,11 @@ const DatePicker: React.FC<FormFieldComponentPropSchema> = (
         value={value}
         startFrom={startFrom}
         {...hookProps}
+        displayFormat={displayFormat}
         placeholder={
           props.fieldConfig.placeholder
             ? props.fieldConfig.placeholder
-            : "YYYY-MM-DD"
+            : displayFormat
         }
         asSingle={true}
         popoverDirection="down"
@@ -79,7 +80,7 @@ const DatePicker: React.FC<FormFieldComponentPropSchema> = (
         onChange={(dates) => {
           let date = null;
           if (dates?.startDate != null)
-            date = moment(dates?.startDate).format("YYYY-MM-DD");
+            date = moment(dates?.startDate).format(displayFormat);
 
           handleChange(date, formContext, props.fieldConfig, props.onChange);
         }}

package/src/form/formfields/FileUploadField.tsx

@@ -9,6 +9,8 @@ import { Description } from "@headlessui/react";
 import React from "react";
 import RenderFormField from "../util/RenderFormField";
 import clsx from "clsx";
+import { XMarkIcon } from "@heroicons/react/20/solid";
+import { normalizeFileFieldUrls } from "../util/normalizeCustomFieldValues";
 const FileUploadField: React.FC<FormFieldComponentPropSchema> = (
     props: FormFieldComponentPropSchema
 ) => {
@@ -103,7 +105,7 @@ const FileUploadField: React.FC<FormFieldComponentPropSchema> = (
                     <Description>Loading...</Description>
                 ) : (
                     props.fieldConfig.fieldContainer ? <props.fieldConfig.fieldContainer /> :
-                        <div className={"flex flex-col items-center justify-center pt-5 pb-6"}>
+                        <div className={"flex flex-col items-center justify-center pt-5 pb-6 px-2"}>
                             {file ? (
                                 <>
                                     {isImageFile(file) ? (
@@ -125,19 +127,19 @@ const FileUploadField: React.FC<FormFieldComponentPropSchema> = (
                                         </div>
                                     ) : (
                                         <div className="flex">
-                                            <span className="m-2">
-                                                {file?.name}
+                                            <span className="m-2 max-w-xs truncate">
+                                            {normalizeFileFieldUrls(file?.name || file?.toString?.() || '')}
                                             </span>{" "}
                                             <button
                                                 onClick={(e) => {
                                                     e.preventDefault();
                                                     formContext.setValue(
-                                                        props.fieldConfig.name,cnull
+                                                        props.fieldConfig.name,null
                                                     );
                                                     setFile(null);
                                                 }}
-                                                className="btn btn-outline-dark btn-sm ">
-                                                X
+                                                className="btn btn-sm ">
+                                                <XMarkIcon className="w-3.5 h-3.5 text-gray-800"/>
                                             </button>
                                         </div>
                                     )}

package/src/form/formfields/MultipleSelectField.tsx

@@ -13,6 +13,7 @@ import {
   FieldOptionsSchema,
   FormFieldComponentPropSchema,
   FormFieldType,
+  OutputFormatType,
 } from "../schema/FormFieldSchema";
 import { FormContext } from "../context/FormContext";
 import RenderFormField from "../util/RenderFormField";
@@ -20,6 +21,7 @@ import RenderListOptions, {
   renderListBoxValue,
 } from "../util/RenderListOptions";
 import { handleChange, registerFormField } from "../util";
+import { normalizeMultiSelectValue } from "../util/normalizeCustomFieldValues";
 
 const MultipleSelectField: React.FC<FormFieldComponentPropSchema> = ({
   fieldConfig,
@@ -34,9 +36,11 @@ const MultipleSelectField: React.FC<FormFieldComponentPropSchema> = ({
     fieldConfig.options ? fieldConfig.options : []
   );
 
-  const validSelectedValues = (
-    formContext.getValues(fieldConfig.name) || []
-  ).filter(
+  const normalizedSelectedValues = normalizeMultiSelectValue(
+    formContext.getValues(fieldConfig.name)
+  );
+
+  const validSelectedValues = normalizedSelectedValues.filter(
     (selectedValue: any) =>
       fieldConfig.options &&
       fieldConfig.options.some((option) => option.value === selectedValue)
@@ -53,14 +57,22 @@ const MultipleSelectField: React.FC<FormFieldComponentPropSchema> = ({
   }, [fieldConfig.options]);
 
   function getInput() {
+    const getOutputValue = (val: any) => {
+      if (fieldConfig.outputFormat === OutputFormatType.STRING) {
+        const normalized = normalizeMultiSelectValue(val);
+        return JSON.stringify(normalized);
+      }
+      return val;
+    };
+
     return (
       <Listbox
         as={"div"}
         {...hookProps}
         value={validSelectedValues}
         defaultValue={fieldConfig.defaultValue}
-        onChange={(val) =>
-          handleChange(val, formContext, fieldConfig, onChange)
+        onChange={(val: any) =>
+          handleChange(getOutputValue(val), formContext, fieldConfig, onChange)
         }
         disabled={fieldConfig.disabled}
         multiple

package/src/form/schema/FormFieldSchema.ts

@@ -111,6 +111,8 @@ export type FormFieldSchema = {
     options?: FieldOptionsSchema[];
     minDate?: Date | null | undefined;
     maxDate?: Date | null | undefined;
+    /** Input display format for date pickers (e.g. 'MMMM D, YYYY'). */
+    dateDisplayFormat?: string;
     // ref?:any
 
     /**
@@ -240,7 +242,7 @@ export class FormFieldPatternsImpl implements FormFieldPatterns {
     static readonly EMAIL = new FormFieldPatternsImpl(
         "EMAIL",
         "Please enter a valid email address",
-        /^([A-Za-z0-9\._%+\-]+@[A-Za-z0-9\.\-]+\.[A-Za-z]{2,})$/
+        /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i
     );
     // static readonly PASSWORD = new FormFieldPatternsImpl(
     //     "PASSWORD",

package/src/form/util/RenderListOptions.tsx

@@ -18,7 +18,7 @@ import {
   FormFieldType,
   OutputFormatType,
 } from "../schema/FormFieldSchema";
-
+import { normalizeMultiSelectValue, normalizeMultiSelectValueForStringArrayValues } from "./normalizeCustomFieldValues";
 type RenderListOptionsProps = {
   formContext: FormContextType;
   fieldConfig: FormFieldSchema;
@@ -154,12 +154,17 @@ const RenderListOptions = forwardRef<HTMLUListElement, RenderListOptionsProps>(
 
     const renderOption = (option: FieldOptionsSchema) => {
       let selected = false;
-      if (Array.isArray(formContext.getValues(fieldConfig.name))) {
-        selected = formContext
-          .getValues(fieldConfig.name)
-          .includes(option.value);
+      const formValue = formContext.getValues(fieldConfig.name);
+      if (formField === FormFieldType.MULTI_SELECT) {
+        const normalizedValues = normalizeMultiSelectValue(formValue);
+        const normalizedOptionValue =
+          typeof option.value === "string"
+            ? option.value.trim()
+            : String(option.value).trim();
+        selected = normalizedValues.includes(normalizedOptionValue);
+      } else if (Array.isArray(formValue)) {
+        selected = formValue.includes(option.value);
       } else {
-        const formValue = formContext.getValues(fieldConfig.name);
         // const defaultValue = fieldConfig.defaultValue;
         // selected = formValue ? option.value == formValue : defaultValue == option.value;
         selected = option.value == formValue;
@@ -335,7 +340,7 @@ export function renderListBoxValue(
   listOptions: FieldOptionsSchema[],
   onChange?: (value: any) => void,
 ): JSX.Element {
-  let value = formContext.getValues(fieldConfig.name);
+  let value = normalizeMultiSelectValueForStringArrayValues(fieldConfig, formContext.getValues(fieldConfig.name));
   const renderAsString = () => {
     // if (!listOptions) {
     //     return value;
@@ -437,7 +442,7 @@ export function renderListBoxValue(
     if (!value && !listOptions) {
       return getPlaceholder();
     }
-    if (!outputFormat && Array.isArray(value)) {
+    if (Array.isArray(value)) {
       return renderAsArray();
     }
     return renderAsString();

package/src/form/util/normalizeCustomFieldValues.ts

@@ -0,0 +1,149 @@
+import moment from "moment";
+import { FormFieldSchema, OutputFormatType } from "../schema/FormFieldSchema";
+
+const normalizeStringToken = (value: unknown): string => {
+  return typeof value === "string" ? value.trim() : String(value).trim();
+};
+
+const normalizeStringArray = (values: unknown[]): string[] => {
+  return values.map(normalizeStringToken).filter(Boolean);
+};
+
+const parseJsonArrayString = (value: string): string[] | null => {
+  if (!value.startsWith("[")) return null;
+  try {
+    const parsed = JSON.parse(value);
+    return Array.isArray(parsed) ? normalizeStringArray(parsed) : null;
+  } catch {
+    return null;
+  }
+};
+
+export const normalizeCheckboxBooleanValue = (value: any): boolean => {
+  if (value === true || value === 1) return true;
+  if (value === false || value === 0 || value == null || value === "") {
+    return false;
+  }
+
+  if (typeof value === "string") {
+    const s = value.trim().toLowerCase();
+    if (s === "true" || s === "1" || s === "yes") return true;
+    if (s === "false" || s === "0" || s === "no" || s === "") return false;
+  }
+
+  return Boolean(value);
+};
+
+export const normalizeMultiSelectValue = (value: any): string[] => {
+  if (value == null) return [];
+
+  if (Array.isArray(value)) return normalizeStringArray(value);
+
+  if (typeof value === "string") {
+    const s = value.trim();
+    if (!s) return [];
+
+    const jsonArray = parseJsonArrayString(s);
+    if (jsonArray) return jsonArray;
+
+    return normalizeStringArray(s.split(","));
+  }
+
+  return normalizeStringArray([value]);
+};
+
+export const normalizeDateFormat = (format?: string): string => {
+  if (!format) return "YYYY-MM-DD";
+  return format
+    .replace(/yyyy/g, "YYYY")
+    .replace(/yy/g, "YY")
+    .replace(/dd/g, "DD")
+    .replace(/d/g, "D")
+    .replace(/mm/g, "MM");
+};
+
+export const normalizeDateInputValue = (
+  value: any,
+  preferredFormat?: string
+): Date | null => {
+  if (value == null || value === "") return null;
+
+  if (value instanceof Date) {
+    return Number.isNaN(value.getTime()) ? null : value;
+  }
+
+  if (typeof value === "number" && Number.isFinite(value)) {
+    const ms = value < 1_000_000_000_000 ? value * 1000 : value;
+    const date = new Date(ms);
+    return Number.isNaN(date.getTime()) ? null : date;
+  }
+
+  if (typeof value === "string") {
+    const s = value.trim();
+    if (!s) return null;
+
+    const numeric = Number(s);
+    if (Number.isFinite(numeric)) {
+      const ms = numeric < 1_000_000_000_000 ? numeric * 1000 : numeric;
+      const date = new Date(ms);
+      return Number.isNaN(date.getTime()) ? null : date;
+    }
+
+    const preferred = normalizeDateFormat(preferredFormat);
+    const formats = Array.from(
+      new Set([
+        preferred,
+        "YYYY-MM-DD",
+        "DD/MM/YYYY",
+        "MM/DD/YYYY",
+        "DD-MM-YYYY",
+        "MM-DD-YYYY",
+      ])
+    );
+    const parsedWithKnownFormats = moment(s, formats, true);
+    if (parsedWithKnownFormats.isValid()) {
+      return parsedWithKnownFormats.toDate();
+    }
+
+    const date = new Date(s);
+    return Number.isNaN(date.getTime()) ? null : date;
+  }
+
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? null : date;
+};
+
+
+export const normalizeMultiSelectValueForStringArrayValues = (fieldConfig: FormFieldSchema, value: any): string[] => {
+  if (fieldConfig.outputFormat === OutputFormatType.STRING) {
+    return normalizeMultiSelectValue(value);  
+  }
+  return value; 
+};
+
+
+export const normalizeFileFieldUrls = (value: any): string[] => {
+  if (value == null) return [];
+
+  if (Array.isArray(value)) {
+      return value.map((v) => String(v).trim()).filter(Boolean);
+  }
+
+  if (typeof value === 'string') {
+      const s = value.trim();
+      if (!s || s === '[]') return [];
+      if (s.startsWith('[')) {
+          try {
+              const parsed = JSON.parse(s);
+              if (Array.isArray(parsed)) {
+                  return parsed.map((v) => String(v).trim()).filter(Boolean);
+              }
+          } catch {
+              // fall through — treat as single URL
+          }
+      }
+      return [s];
+  }
+
+  return [];
+};