@evoke-platform/ui-components 1.6.0-testing.9 → 1.6.1-dev.0

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

@@ -0,0 +1,176 @@
+import { isArray } from 'lodash';
+import { DateTime } from 'luxon';
+import Handlebars from 'no-eval-handlebars';
+function isNumericValidation(validation) {
+    return 'minimum' in validation || 'maximum' in validation;
+}
+function isCalendarValidation(validation) {
+    return 'to' in validation || 'from' in validation;
+}
+function isStringValidation(validation) {
+    return 'operator' in validation;
+}
+function isDocumentValidation(validation) {
+    const documentValidationKeys = ['minDocuments', 'maxDocuments', 'errorMessage'];
+    return !validation || Object.keys(validation).every((key) => documentValidationKeys.includes(key));
+}
+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 (display?.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 (isNumericValidation(validation) && validation.maximum) {
+            validationRules.max = {
+                value: validation.maximum,
+                message: errorMsg || `${fieldName} must have a value under ${validation.maximum}`,
+            };
+        }
+        if (isNumericValidation(validation) && validation.minimum) {
+            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 (isDocumentValidation(validation)) {
+                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 ${min} and ${max} 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 (isCalendarValidation(validation)) {
+                const data = {
+                    __today__: DateTime.now().toISODate(),
+                    input: 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 (isStringValidation(validation) && 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/dist/published/components/custom/FormV2/components/types.d.ts

@@ -0,0 +1,122 @@
+import { FormEntry, InputParameter, ObjectInstance, Property, Section, Sections, ViewLayoutEntityReference } from '@evoke-platform/context';
+import { GridSize } from '@mui/material';
+import { ComponentType } from 'react';
+import { FieldErrors, FieldValues } from 'react-hook-form';
+export type FieldAddress = {
+    line1?: string;
+    line2?: string;
+    city?: string;
+    county?: string;
+    state?: string;
+    zipCode?: string;
+};
+export type AccessCheck = {
+    result: boolean;
+};
+export type SavedDocumentReference = {
+    id: string;
+    name: string;
+};
+export type Document = {
+    id: string;
+    name: string;
+    contentType: string;
+    size: number;
+    uploadedDate: string;
+    metadata: {
+        [field: string]: unknown;
+    };
+    versionId?: string;
+};
+export type SimpleEditorProps = {
+    id: string;
+    value: string;
+    handleUpdate?: (value: string) => void;
+    format: 'rtf' | 'plain' | 'openxml';
+    disabled?: boolean;
+    rows?: number;
+    hasError?: boolean;
+    viewHistory?: boolean;
+};
+export type ObjectPropertyInputProps = {
+    id: string;
+    instance?: FieldValues;
+    fieldDefinition: InputParameter;
+    handleChangeObjectProperty: (propertyId: string, instance?: ObjectInstance | null) => void;
+    mode: 'default' | 'existingOnly' | 'newOnly';
+    nestedFieldsView?: boolean;
+    readOnly?: boolean;
+    error?: boolean;
+    displayOption?: 'dropdown' | 'dialogBox';
+    filter?: Record<string, unknown>;
+    defaultValueCriteria?: Record<string, unknown>;
+    sortBy?: string;
+    orderBy?: string;
+    isModal?: boolean;
+    label?: string;
+    initialValue?: ObjectInstance | null;
+    fieldHeight?: 'small' | 'medium';
+    richTextEditor?: ComponentType<SimpleEditorProps>;
+    viewLayout?: ViewLayoutEntityReference;
+    hasDescription?: boolean;
+    parameters?: InputParameter[];
+};
+export type Page = {
+    id: string;
+    name: string;
+    slug?: string;
+    pk?: string;
+    appId?: string;
+    pathParameters?: {
+        id: string;
+    }[];
+    children?: unknown[];
+};
+export type SearchFieldProps = {
+    searchableColumns: Property[];
+    filter: Record<string, unknown> | undefined;
+    setFilter: (filter: Record<string, unknown> | undefined) => void;
+    searchString: string;
+    setSearchString: (searchString: string) => void;
+};
+export type BaseProps = {
+    colspan?: GridSize;
+    baseUrl?: string;
+    getWidgetState?: () => any;
+    saveWidgetState?: (widgetState: unknown) => void;
+};
+export type ExpandedSection = Section & {
+    id: string;
+    expanded?: boolean;
+};
+export type EntryRendererProps = BaseProps & {
+    entry: FormEntry;
+    errors: FieldErrors;
+    handleChange: (name: string, value: unknown) => void;
+    showSubmitError?: boolean;
+    fieldHeight?: 'small' | 'medium';
+    instance?: FieldValues;
+    richTextEditor?: ComponentType<SimpleEditorProps>;
+    expandedSections: ExpandedSection[];
+    setExpandedSections: React.Dispatch<React.SetStateAction<ExpandedSection[]>>;
+    expandAll?: boolean | undefined | null;
+    setExpandAll: React.Dispatch<React.SetStateAction<boolean | undefined | null>>;
+    parameters?: InputParameter[];
+    readOnly?: boolean;
+    triggerFieldReset?: boolean;
+};
+export type SectionsProps = {
+    entry: Sections;
+    handleChange: (propertyId: string, value: unknown) => void;
+    fieldHeight?: 'small' | 'medium';
+    richTextEditor?: ComponentType<SimpleEditorProps>;
+    instance?: FieldValues;
+    expandAll?: boolean | undefined | null;
+    expandedSections: ExpandedSection[];
+    setExpandedSections: React.Dispatch<React.SetStateAction<ExpandedSection[]>>;
+    setExpandAll: React.Dispatch<React.SetStateAction<boolean | undefined | null>>;
+    errors: FieldErrors;
+    parameters?: InputParameter[];
+    triggerFieldReset?: boolean;
+    showSubmitError?: boolean;
+};

package/dist/published/components/custom/FormV2/components/types.js

@@ -0,0 +1 @@
+export {};

package/dist/published/components/custom/FormV2/components/utils.d.ts

@@ -0,0 +1,47 @@
+import { ApiServices, Column, Columns, FormEntry, InputParameter, Obj, ObjectInstance, Property, Section, Sections, UserAccount } from '@evoke-platform/context';
+import { LocalDateTime } from '@js-joda/core';
+import { FieldErrors, FieldValues } from 'react-hook-form';
+import { AutocompleteOption } from '../../../core';
+import { Document } from './types';
+export declare const scrollIntoViewWithOffset: (el: HTMLElement, offset: number, container?: HTMLElement) => void;
+export declare const normalizeDateTime: (dateTime: LocalDateTime) => string;
+export declare function isAddressProperty(key: string): boolean;
+/**
+ * Determine if a form entry is visible or not.
+ */
+export declare const entryIsVisible: (entry: FormEntry, formValues: FieldValues, instance?: FieldValues) => boolean;
+/**
+ * Recursively retrieves all parameter IDs from a given entry of type Sections or Columns.
+ *
+ * @param {Sections | Columns} entry - The entry object, which can be of type Sections or Columns.
+ * @returns {string[]} - An array of parameter IDs found within the entry.
+ */
+export declare const getNestedParameterIds: (entry: Sections | Columns) => string[];
+export declare const getEntryId: (entry: FormEntry) => string | undefined;
+export declare function getPrefixedUrl(url: string): string;
+export declare const isOptionEqualToValue: (option: AutocompleteOption | string, value: unknown) => boolean;
+export declare function addressProperties(addressProperty: Property): Property[];
+export declare const normalizeDates: (instance: ObjectInstance, evokeObject?: Obj) => ObjectInstance;
+export declare const transformToWhere: (mongoQuery: Record<string, unknown>) => Record<string, unknown>;
+export declare const getMiddleObject: (fieldDefinition: InputParameter | Property, endObjectId: string, endObjectName: string, instance?: FieldValues) => {
+    [x: string]: {
+        id: any;
+        name: any;
+    };
+} | undefined;
+export declare const getMiddleObjectFilter: (fieldDefinition: InputParameter | Property, instanceId: string) => {
+    where: {
+        [x: string]: string;
+    };
+};
+export declare const encodePageSlug: (slug: string) => string;
+export declare function getDefaultPages(parameters: InputParameter[], defaultPages: Record<string, string> | undefined, findDefaultPageSlugFor: (objectId: string) => Promise<string | undefined>): Promise<{
+    [x: string]: string;
+}>;
+export declare function updateCriteriaInputs(criteria: Record<string, unknown>, data: Record<string, unknown>, user?: UserAccount): Record<string, unknown>;
+export declare function fetchCollectionData(apiServices: ApiServices, fieldDefinition: InputParameter | Property, setFetchedOptions: (newData: FieldValues) => void, instanceId?: string, fetchedOptions?: Record<string, unknown>, initialMiddleObjectInstances?: ObjectInstance[]): Promise<void>;
+export declare const getErrorCountForSection: (section: Section | Column, errors: FieldErrors) => number;
+export declare const convertDocToParameters: (obj: Document) => InputParameter[];
+export declare const propertyToParameter: (property: Property) => InputParameter;
+export declare const propertyValidationToParameterValidation: (property: Property) => InputParameter['validation'];
+export declare const convertPropertiesToParams: (object: Obj) => InputParameter[] | undefined;