@evoke-platform/ui-components 1.6.0-dev.14 → 1.6.0-dev.15

package/dist/published/components/custom/FormV2/components/ValidationFiles/Validation.d.ts

@@ -0,0 +1,3 @@
+import { FormEntry, InputParameter } from '@evoke-platform/context';
+import { FieldValues, UseFormRegister } from 'react-hook-form';
+export declare const handleValidation: (entries: FormEntry[], register: UseFormRegister<FieldValues>, formValues: FieldValues, parameters?: InputParameter[], instance?: FieldValues) => void;

package/dist/published/components/custom/FormV2/components/ValidationFiles/Validation.js

@@ -0,0 +1,164 @@
+import { isArray } from 'lodash';
+import { DateTime } from 'luxon';
+import Handlebars from 'no-eval-handlebars';
+export const handleValidation = (entries, register, formValues, parameters, instance) => {
+    entries?.forEach((entry) => {
+        if (entry.type === 'sections' || entry.type === 'columns') {
+            const subEntries = entry.type === 'sections' ? entry.sections : entry.columns;
+            subEntries.forEach((subEntry) => {
+                if (subEntry.entries) {
+                    handleValidation(subEntry.entries, register, formValues, parameters, instance);
+                }
+            });
+            return;
+        }
+        else if (entry.type !== 'input' && entry.type !== 'inputField') {
+            return;
+        }
+        const display = entry?.display;
+        const parameter = entry.type === 'input'
+            ? parameters?.find((param) => param.id === entry.parameterId)
+            : entry.type === 'inputField'
+                ? entry.input
+                : undefined;
+        const validation = parameter?.validation || {};
+        const fieldName = display?.label;
+        const errorMsg = validation?.errorMessage;
+        const validationRules = {};
+        // Required fields
+        if (entry.type !== 'inputField' && parameter?.required) {
+            validationRules.required = `${fieldName} is required`;
+        }
+        if (parameter?.type === 'boolean' && parameter?.strictlyTrue) {
+            validationRules.required = {
+                value: true,
+                message: display?.booleanDisplay === 'switch'
+                    ? `${fieldName} must be toggled on`
+                    : `${fieldName} must be checked`,
+            };
+        }
+        // Min/max char string fields
+        if (typeof validation.minLength === 'number') {
+            validationRules.minLength = {
+                value: validation.minLength,
+                message: `${fieldName} must have at least ${validation.minLength} characters`,
+            };
+        }
+        if (typeof validation.maxLength === 'number') {
+            validationRules.maxLength = {
+                value: validation.maxLength,
+                message: `${fieldName} must have no more than ${validation.maxLength} characters`,
+            };
+        }
+        // Min/max number fields
+        if (typeof validation.maximum === 'number') {
+            validationRules.max = {
+                value: validation.maximum,
+                message: errorMsg || `${fieldName} must have a value under ${validation.maximum}`,
+            };
+        }
+        if (typeof validation.minimum === 'number') {
+            validationRules.min = {
+                value: validation.minimum,
+                message: errorMsg || `${fieldName} must have a value over ${validation.minimum}`,
+            };
+        }
+        validationRules.validate = (value) => {
+            if (!value)
+                return true;
+            // Document validation
+            if (validation.maxDocuments || validation.minDocuments) {
+                const amountOfDocuments = isArray(value) ? value.length : 0;
+                const min = validation.minDocuments;
+                const max = validation.maxDocuments;
+                if (max && min && (amountOfDocuments > max || amountOfDocuments < min)) {
+                    return (errorMsg ||
+                        `Please select between ${validation.minDocuments} and ${validation.maxDocuments} document${max > 1 ? 's' : ''}`);
+                }
+                else if (min && amountOfDocuments < min) {
+                    return errorMsg || `Please select at least ${min} document${min > 1 ? 's' : ''}`;
+                }
+                else if (max && amountOfDocuments > max) {
+                    return errorMsg || `Please select no more than ${max} document${max > 1 ? 's' : ''}`;
+                }
+            }
+            // Date and Time validation
+            if (validation.from || validation.to) {
+                const data = {
+                    __today__: DateTime.now().toISODate(),
+                    input: { ...instance, ...formValues },
+                };
+                if (validation.from) {
+                    let earliestAllowed = validation.from;
+                    if (/{{[\w.]+(?:\s+[\w.]+)*(?:\s+\d+)?}}/.test(earliestAllowed)) {
+                        earliestAllowed = Handlebars.compileAST(earliestAllowed)(data);
+                    }
+                    if (earliestAllowed && value < earliestAllowed) {
+                        return (errorMsg ||
+                            `${fieldName} must be ${parameter?.type === 'time' ? 'at' : 'on'} or later than ${earliestAllowed || 'a field with no value'}`);
+                    }
+                }
+                if (validation.to) {
+                    let latestAllowed = validation.to;
+                    if (/{{[\w.]+(?:\s+[\w.]+)*(?:\s+\d+)?}}/.test(latestAllowed)) {
+                        latestAllowed = Handlebars.compileAST(latestAllowed)(data);
+                    }
+                    if (latestAllowed && value > latestAllowed) {
+                        return (errorMsg ||
+                            `${fieldName} must be ${parameter?.type === 'time' ? 'at' : 'on'} or before ${latestAllowed || 'a field with no value'}`);
+                    }
+                }
+            }
+            // Regex validation
+            if (validation.rules) {
+                const rules = validation.rules;
+                const failedRules = rules.filter((rule) => {
+                    const regex = new RegExp(rule.regex);
+                    return !regex.test(value);
+                });
+                const operator = validation.operator;
+                if (failedRules.length > 0) {
+                    if (operator === 'all') {
+                        const messages = failedRules
+                            .map((rule) => rule.errorMessage || 'Property is not in a valid format')
+                            .join(' and ');
+                        return `${fieldName}: ${messages}`;
+                    }
+                    if (operator === 'any' && failedRules.length < rules.length) {
+                        return true; // passes if at least one rule passed
+                    }
+                    const messages = failedRules
+                        .map((rule) => rule.errorMessage || 'Property is not in a valid format')
+                        .join(' or ');
+                    return `${fieldName}: ${messages}`;
+                }
+            }
+            // Integer check
+            if (parameter?.type === 'integer') {
+                if (value && !Number.isInteger(value)) {
+                    return `${fieldName} must be an integer`;
+                }
+            }
+            // Invalid date check
+            if (value?.invalid && value?.dateText) {
+                return `Invalid Date`;
+            }
+            return true;
+        };
+        register(entry.parameterId || entry.input?.id, validationRules);
+    });
+};
+Handlebars.registerHelper('addDays', function (addend1, addend2) {
+    const dateAddend1 = DateTime.fromISO(addend1);
+    if (dateAddend1.isValid) {
+        return dateAddend1.plus({ days: addend2 }).toISODate();
+    }
+    return undefined;
+});
+Handlebars.registerHelper('subDays', function (minuend, subtrahend) {
+    const dateMinuend = DateTime.fromISO(minuend);
+    if (dateMinuend.isValid) {
+        return dateMinuend.minus({ days: subtrahend }).toISODate();
+    }
+    return undefined;
+});

package/dist/published/components/custom/FormV2/components/ValidationFiles/ValidationErrorDisplay.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { FieldErrors } from 'react-hook-form';
+export type ValidationErrorDisplayProps = {
+    errors: FieldErrors;
+    show: boolean;
+    formId: string;
+    title?: string;
+};
+declare function ValidationErrorDisplay(props: ValidationErrorDisplayProps): React.JSX.Element | null;
+export default ValidationErrorDisplay;

package/dist/published/components/custom/FormV2/components/ValidationFiles/ValidationErrorDisplay.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { useResponsive } from '../../../../../theme';
+import { List, ListItem, Typography } from '../../../../core';
+import { Box } from '../../../../layout';
+function ValidationErrorDisplay(props) {
+    const { errors, show, formId, title } = props;
+    const { isSm, isXs } = useResponsive();
+    function extractErrorMessages(errors) {
+        const messages = [];
+        for (const key in errors) {
+            const error = errors[key];
+            if (error?.message) {
+                messages.push(error.message);
+            }
+            else if (error) {
+                for (const nestedKey in error) {
+                    const nestedError = error[nestedKey];
+                    if (nestedError?.message) {
+                        messages.push(nestedError.message);
+                    }
+                }
+            }
+        }
+        return messages;
+    }
+    const errorMessages = extractErrorMessages(errors);
+    return show && errorMessages.length > 0 ? (React.createElement(Box, { id: `validation-error-display-${formId}`, sx: {
+            backgroundColor: '#f8d7da',
+            borderColor: '#f5c6cb',
+            color: '#721c24',
+            border: '1px solid #721c24',
+            padding: '8px 24px',
+            borderRadius: '4px',
+            marginBottom: isSm || isXs ? 2 : 3,
+            marginTop: !title ? (isSm || isXs ? -2 : -3) : undefined,
+        } },
+        React.createElement(Typography, { sx: { color: '#721c24', mt: '16px', mb: '8px' } }, "Please fix the following errors before submitting:"),
+        React.createElement(List, { sx: {
+                listStyleType: 'disc',
+                paddingLeft: '40px',
+                mb: '8px',
+                fontFamily: 'Arial, Helvetica, sans-serif',
+            } }, errorMessages.map((msg, index) => (React.createElement(ListItem, { key: index, sx: { display: 'list-item', p: 0 } }, msg)))))) : null;
+}
+export default ValidationErrorDisplay;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.6.0-dev.14",
+    "version": "1.6.0-dev.15",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",