@engagebay/engagebay-form-module 1.0.0-beta.0

package/src/form/util/index.ts

@@ -0,0 +1,185 @@
+import {RegisterOptions} from "react-hook-form";
+import {FormFieldPatternsImpl, FormFieldSchema, OutputFormatType,} from "../schema/FormFieldSchema";
+import {FormContextType} from "../context/FormContext";
+
+/**
+ * Registers form field options based on the provided configuration.
+ *
+ * This function takes a form field configuration object (`FormFieldSchema`)
+ * and returns `RegisterOptions` to be used with form validation libraries
+ * (such as React Hook Form).
+ *
+ * @param {FormFieldSchema} fieldConfig - The configuration object for the form field.
+ *
+ * @returns {RegisterOptions} An object containing validation options for the form field.
+ *
+ * @property {boolean|string} required - Indicates if the field is required.
+ * The value is a string with a validation message if required, otherwise `false`.
+ *
+ * @property {RegExp} [pattern] - A regular expression pattern to validate the field value.
+ *
+ * @property {Function} [validate] - A custom validation function.
+ *
+ * @property {number} [maxLength] - Specifies the maximum length of the field value.
+ *
+ * @property {number} [minLength] - Specifies the minimum length of the field value.
+ *
+ * @property {number} [min] - Specifies the minimum value for numeric fields.
+ *
+ * @property {number} [max] - Specifies the maximum value for numeric fields.
+ *
+ * @example
+ * const fieldConfig = {
+ *   required: true,
+ *   formFieldPattern: [
+ *     FormFieldPatternImpl.URL
+ *   ],
+ *   maxLength: 10,
+ *   minLength: 3,
+ *   min: 1,
+ *   max: 100,
+ * };
+ *
+ * USE CASE:
+ * const registerOptions = registerFormField(fieldConfig);
+ *
+ */
+export const registerFormField = (
+    fieldConfig: FormFieldSchema,
+    ignoreAsArray?: boolean
+): RegisterOptions => {
+    let registerOptions: RegisterOptions = {
+        required: fieldConfig.required
+            ? FormFieldPatternsImpl.REQUIRED.getMessage()
+            : false,
+    };
+
+    if (fieldConfig?.validateSpaces) {
+        registerOptions.validate = {
+            notEmpty: (value: string) => value.trim() !== '' || 'This field cannot be empty or contain only spaces',
+            notSpaces: (value: string) => value.trim() !== '' || 'This field cannot be empty or contain only spaces',
+        };
+    }
+    if (fieldConfig?.formFieldPattern) {
+        if (fieldConfig.formFieldPattern[0].getValidate()) {
+            registerOptions.validate =
+                fieldConfig.formFieldPattern[0].getValidate();
+        } else {
+            registerOptions.pattern =
+                fieldConfig?.formFieldPattern[0].getPattern();
+        }
+    }
+
+    if (fieldConfig?.maxLength) {
+        registerOptions.maxLength = fieldConfig?.maxLength;
+    }
+
+    if (fieldConfig?.minLength) {
+        registerOptions.minLength = fieldConfig?.minLength;
+    }
+
+    if (fieldConfig?.min) {
+        registerOptions.min = fieldConfig?.min;
+    }
+
+    if (fieldConfig?.max) {
+        registerOptions.max = fieldConfig?.max;
+    }
+
+    if (
+        fieldConfig?.outputFormat === OutputFormatType.ARRAY &&
+        !ignoreAsArray
+    ) {
+        registerOptions.setValueAs = (value) =>
+            Array.isArray(value) ? [...value] : [value];
+    }
+
+    return registerOptions;
+};
+
+/**
+ * Handles changes to a form field, updating the form context and triggering
+ * any additional callbacks specified in the field configuration.
+ *
+ * @param {string} value - The new value of the form field.
+ * @param {FormContextType} formContext - The form context object, which includes methods
+ * and properties for managing form state (e.g., `setValue`, `getFieldState`).
+ * @param {FormFieldSchema} fieldConfig - The configuration object for the form field, which
+ * may include properties such as `name`, `onChange`, and `submitOnChange`.
+ * @param {Function} onChange - An optional callback function to be called after the form field value
+ * has been updated.
+ *
+ * @returns {void}
+ *
+ * @example
+ * const value = "example";
+ * const formContext = {
+ *   setValue: (name, value, options) => { ... },
+ *   getFieldState: (name) => ({ isDirty: false, isTouched: true }),
+ *   onSubmit: () => { ... }
+ * };
+ *
+ * const fieldConfig = {
+ *   name: "exampleField",
+ *   onChange: (value) => { console.log("Field changed:", value); },
+ *   submitOnChange: true,
+ * };
+ *
+ * const onChange = (value) => { console.log("External onChange:", value); };
+ *
+ * handleChange(value, formContext, fieldConfig, onChange);
+ *
+ * // This will:
+ * // - Update the form context with the new value.
+ * // - Call `fieldConfig.onChange` if it exists.
+ * // - Call `onChange` if it exists.
+ * // - Submit the form if `submitOnChange` is true.
+ */
+export const handleChange = (
+    value: any,
+    formContext: FormContextType,
+    fieldConfig: FormFieldSchema,
+    onChange?: (value: any) => void
+): void => {
+    // if (fieldConfig.outputFormat === OutputFormatType.ARRAY) {
+    //     value = [value];
+    // }
+    // Update the form context with the new value
+    formContext.setValue(fieldConfig.name, value, {
+        shouldValidate: true,
+        shouldDirty: formContext.getFieldState(fieldConfig.name).isDirty,
+        shouldTouch: formContext.getFieldState(fieldConfig.name).isTouched,
+    });
+
+    // Call the onChange method from fieldConfig if it exists
+    if (fieldConfig.onChange) {
+        fieldConfig.onChange(value);
+    }
+
+    // Call the external onChange callback if provided
+    if (onChange) onChange(value);
+
+    // Submit the form if submitOnChange is true and onSubmit exists in formContext
+    if (fieldConfig.submitOnChange && formContext.onSubmit) {
+        formContext.onSubmit();
+    }
+};
+
+export const resetFormField = (formContext: FormContextType, name: string) => {
+    formContext.resetField(name);
+};
+
+
+export const convertToTitleCase = (str: string): string => {
+    if (!str) return '-';
+    // Split the string by underscores
+    let words: string[] = str.split('_');
+
+    // Capitalize the first letter of each word
+    let capitalizedWords: string[] = words.map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase());
+
+    // Join the words with a space
+    let result: string = capitalizedWords.join(' ');
+
+    return result;
+};

package/src/util/LoaderWithText.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+export function LoaderWithText() {
+  return (
+    <div
+      id="loader-with-text"
+      className="flex items-center justify-center space-x-2"
+    >
+      <div aria-label="Loading..." role="status">
+        <svg
+          width="24"
+          height="24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          viewBox="0 0 24 24"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          xmlns="http://www.w3.org/2000/svg"
+          className="animate-spin w-4 h-4 stroke-slate-500"
+        >
+          <path d="M12 3v3m6.366-.366-2.12 2.12M21 12h-3m.366 6.366-2.12-2.12M12 21v-3m-6.366.366 2.12-2.12M3 12h3m-.366-6.366 2.12 2.12"></path>
+        </svg>
+      </div>
+      <span className="text-xs font-medium text-slate-500">Loading...</span>
+    </div>
+  );
+}

package/src/util/svg/HELPER_ICONS.ts

@@ -0,0 +1,16 @@
+export const HELPER_ICONS: {
+  [key in string]: string;
+} = {
+  starIcon: `<path
+        fill-rule="evenodd"
+        d="M8 1.75a.75.75 0 0 1 .692.462l1.41 3.393 3.664.293a.75.75 0 0 1 .428 1.317l-2.791 2.39.853 3.575a.75.75 0 0 1-1.12.814L7.998 12.08l-3.135 1.915a.75.75 0 0 1-1.12-.814l.852-3.574-2.79-2.39a.75.75 0 0 1 .427-1.318l3.663-.293 1.41-3.393A.75.75 0 0 1 8 1.75Z"
+        clip-rule="evenodd"
+      ></path>`,
+  chevronDown: `<path fill-rule="evenodd"
+        d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z"
+        clip-rule="evenodd"
+      ></path>`,
+  checkIcon: `<path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0"/>`,
+// <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd"></path>`,
+  search: `<path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"></path>`,
+};

package/src/util/svg/SVGIcon.tsx

@@ -0,0 +1,23 @@
+import React, { SVGAttributes } from "react";
+import { HELPER_ICONS } from "./HELPER_ICONS";
+
+const SVGIcon = (props: SVGAttributes<{}>) => {
+  if (!props.name) {
+    return <p>No name is specified</p>;
+  }
+  const icon = HELPER_ICONS[props.name];
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      aria-hidden="true"
+      data-slot="icon"
+      {...props}
+      dangerouslySetInnerHTML={{ __html: icon }}
+    ></svg>
+    
+  );
+};
+
+export default SVGIcon;

package/tsconfig.json

@@ -0,0 +1,25 @@
+{
+    "compilerOptions": {
+        "target": "ES6", // Target ECMAScript 6
+        "module": "ESNext", // Use the latest module system
+        "lib": ["DOM", "DOM.Iterable", "ESNext"], // Include DOM and ESNext libraries
+        "jsx": "react-jsx", // JSX support for React 17+
+        "strict": true, // Enable all strict type-checking options
+        "esModuleInterop": true, // Enable interoperability between CommonJS and ES Modules
+        "allowSyntheticDefaultImports": true, // Allow default imports from modules with no default export
+        "skipLibCheck": true, // Skip type checking of declaration files
+        "forceConsistentCasingInFileNames": true, // Ensure consistent casing in file names
+        "moduleResolution": "node", // Use Node.js module resolution strategy
+        "isolatedModules": true, // Treat each file as a module
+        "resolveJsonModule": true, // Allow importing JSON files
+        "noEmit": true, // Prevent TypeScript from emitting compiled output
+        "baseUrl": ".", // Set the base URL for module resolution
+        "paths": {
+            // Define path aliases
+            "@components/*": ["src/components/*"],
+            "@utils/*": ["src/utils/*"]
+        }
+    },
+    "include": ["src"], // Include files in the 'src' directory
+    "exclude": ["node_modules", "build", "dist"] // Exclude files and directories from the compilation
+}