@evoke-platform/ui-components 1.6.0-testing.13 → 1.6.0-testing.14

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

@@ -0,0 +1,434 @@
+import { LocalDateTime } from '@js-joda/core';
+import jsonLogic from 'json-logic-js';
+import { get, isArray, isObject, omit, startCase, transform } from 'lodash';
+import { DateTime } from 'luxon';
+import Handlebars from 'no-eval-handlebars';
+import { defaultRuleProcessorMongoDB, formatQuery, parseMongoDB } from 'react-querybuilder';
+export const scrollIntoViewWithOffset = (el, offset, container) => {
+    const elementRect = el.getBoundingClientRect();
+    const containerRect = container ? container.getBoundingClientRect() : document.body.getBoundingClientRect();
+    const topPosition = elementRect.top - containerRect.top + (container?.scrollTop || 0) - offset;
+    if (container) {
+        container.scrollTo({
+            behavior: 'smooth',
+            top: topPosition,
+        });
+    }
+    else {
+        window.scrollTo({
+            behavior: 'smooth',
+            top: topPosition,
+        });
+    }
+};
+export const normalizeDateTime = (dateTime) => new Date(dateTime.toString()).toISOString();
+const evaluateCondition = (condition, formValues, instance) => {
+    if (typeof condition !== 'object') {
+        console.error('Invalid condition format: ', condition);
+        return true;
+    }
+    if (isArray(condition)) {
+        const firstCondition = condition[0];
+        const { property, value, operator } = firstCondition;
+        let fieldValue = firstCondition.isInstanceProperty ? get(instance, property) : get(formValues, property);
+        if (typeof fieldValue === 'object' && fieldValue !== null) {
+            if (fieldValue instanceof LocalDateTime) {
+                fieldValue = normalizeDateTime(fieldValue);
+            }
+            else {
+                fieldValue = Object.values(fieldValue).includes(value)
+                    ? value
+                    : Object.values(fieldValue).find((val) => val !== undefined && val !== null);
+            }
+        }
+        switch (operator) {
+            case 'ne':
+                return fieldValue != value;
+            case 'eq':
+                return fieldValue == value;
+            default:
+                console.error(`Unsupported operator: ${operator}`);
+                return false;
+        }
+    }
+    // Handling custom JSON logic
+    else {
+        const data = {
+            data: formValues,
+            instance: instance,
+        };
+        const result = jsonLogic.apply(condition, data);
+        return result === true;
+    }
+};
+export function isAddressProperty(key) {
+    return /\.line1|\.line2|\.city|\.county|\.state|\.zipCode$/.test(key);
+}
+/**
+ * Determine if a form entry is visible or not.
+ */
+export const entryIsVisible = (entry, formValues, instance) => {
+    const display = 'display' in entry ? entry.display : undefined;
+    const { visibility } = display ?? ('visibility' in entry ? entry : {});
+    if (isObject(visibility) && 'conditions' in visibility && isArray(visibility.conditions)) {
+        // visibility is a simple condition
+        const { conditions } = visibility;
+        return evaluateCondition(conditions, formValues, instance);
+    }
+    else if (visibility) {
+        // visibility is a JSONlogic condition
+        return evaluateCondition(visibility, formValues, instance);
+    }
+    return true;
+};
+/**
+ * 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 const getNestedParameterIds = (entry) => {
+    const parameterIds = [];
+    const entries = entry.type === 'columns'
+        ? entry.columns.flatMap((column) => column.entries ?? [])
+        : entry.sections.flatMap((section) => section.entries ?? []);
+    for (const subEntry of entries) {
+        if (subEntry.type === 'columns' || subEntry.type === 'sections') {
+            parameterIds.push(...getNestedParameterIds(subEntry));
+        }
+        else {
+            const paramId = getEntryId(subEntry);
+            if (paramId && paramId !== 'collection') {
+                parameterIds.push(paramId);
+            }
+        }
+    }
+    return parameterIds;
+};
+export const getEntryId = (entry) => {
+    return entry.type === 'input'
+        ? entry.parameterId
+        : entry.type === 'readonlyField'
+            ? entry.propertyId
+            : entry.type === 'inputField'
+                ? entry.input.id
+                : undefined;
+};
+export function getPrefixedUrl(url) {
+    const wcsMatchers = ['/apps', '/pages', '/widgets'];
+    const dataMatchers = ['/objects', '/correspondenceTemplates', '/documents', '/payments', '/locations'];
+    const signalrMatchers = ['/hubs'];
+    const accessManagementMatchers = ['/users'];
+    const workflowMatchers = ['/workflows'];
+    if (wcsMatchers.some((endpoint) => url.startsWith(endpoint)))
+        return `/webContent${url}`;
+    if (dataMatchers.some((endpoint) => url.startsWith(endpoint)))
+        return `/data${url}`;
+    if (signalrMatchers.some((endpoint) => url.startsWith(endpoint)))
+        return `/signalr${url}`;
+    if (accessManagementMatchers.some((endpoint) => url.startsWith(endpoint)))
+        return `/accessManagement${url}`;
+    if (workflowMatchers.some((endpoint) => url.startsWith(endpoint)))
+        return `/workflow${url}`;
+    console.error('Invalid URL');
+    return url;
+}
+export const isOptionEqualToValue = (option, value) => {
+    if (typeof option === 'string') {
+        return option === value;
+    }
+    return option.value === value;
+};
+export function addressProperties(addressProperty) {
+    return [
+        {
+            id: `${addressProperty.id}.line1`,
+            name: `${addressProperty.name} Line 1`,
+            type: 'string',
+        },
+        {
+            id: `${addressProperty.id}.line2`,
+            name: `${addressProperty.name} Line 2`,
+            type: 'string',
+        },
+        {
+            id: `${addressProperty.id}.city`,
+            name: `${addressProperty.name} City`,
+            type: 'string',
+        },
+        {
+            id: `${addressProperty.id}.county`,
+            name: `${addressProperty.name} County`,
+            type: 'string',
+        },
+        {
+            id: `${addressProperty.id}.state`,
+            name: `${addressProperty.name} State`,
+            type: 'string',
+        },
+        {
+            id: `${addressProperty.id}.zipCode`,
+            name: `${addressProperty.name} Zip Code`,
+            type: 'string',
+        },
+    ];
+}
+export const normalizeDates = (instance, evokeObject) => {
+    const dateProps = ['date', 'date-time', 'time'];
+    const properties = evokeObject?.properties
+        ?.filter((property) => dateProps.includes(property.type))
+        .reduce((agg, property) => Object.assign(agg, { [property.id]: property.type }), {}) ?? {};
+    const propKeys = Object.keys(properties);
+    const updatedInstance = { ...instance };
+    Object.keys(instance).forEach((key) => {
+        // Ignore non-datelike and empty fields.
+        if (!propKeys.includes(key) || !instance[key]) {
+            return;
+        }
+        switch (properties[key]) {
+            case 'date':
+                // Casting here is valid because the value has already been
+                // determined to be a datelike field that is non-empty.
+                updatedInstance[key] = DateTime.fromISO(instance[key]).toLocaleString(DateTime.DATE_SHORT);
+                break;
+            case 'date-time':
+                // Casting here is valid because the value has already been
+                // determined to be a datelike field that is non-empty.
+                updatedInstance[key] = DateTime.fromISO(instance[key]).toLocaleString(DateTime.DATETIME_SHORT);
+                break;
+            case 'time':
+                // Casting here is valid because the value has already been
+                // determined to be a datelike field that is non-empty.
+                updatedInstance[key] = DateTime.fromISO(instance[key]).toLocaleString(DateTime.TIME_SIMPLE);
+                break;
+        }
+    });
+    return updatedInstance;
+};
+const OPERATOR_MAP = {
+    $and: 'and',
+    $or: 'or',
+    $eq: 'eq',
+    $ne: 'neq',
+    $lt: 'lt',
+    $lte: 'lte',
+    $gt: 'gt',
+    $gte: 'gte',
+    $in: 'inq',
+    $nin: 'nin',
+    $regex: 'regexp',
+    $exists: 'exists',
+    $not: 'not',
+};
+export const transformToWhere = (mongoQuery) => {
+    return transform(mongoQuery, (result, value, key) => {
+        const newKey = typeof key === 'string' && key.startsWith('$') ? OPERATOR_MAP[key] : key;
+        if (newKey === undefined) {
+            throw new Error(`Unsupported operator ${key}`);
+        }
+        result[newKey] = isObject(value) ? transformToWhere(value) : value;
+    });
+};
+export const getMiddleObject = (fieldDefinition, endObjectId, endObjectName, instance) => {
+    if (fieldDefinition.relatedPropertyId && fieldDefinition.manyToManyPropertyId) {
+        const middleObject = {
+            [fieldDefinition.relatedPropertyId]: {
+                id: instance?.id,
+                name: instance?.name,
+            },
+            [fieldDefinition.manyToManyPropertyId]: {
+                id: endObjectId,
+                name: endObjectName,
+            },
+        };
+        return middleObject;
+    }
+};
+export const getMiddleObjectFilter = (fieldDefinition, instanceId) => {
+    const filterProperty = `${fieldDefinition.relatedPropertyId}.id`;
+    const filter = { where: { [filterProperty]: instanceId } };
+    return filter;
+};
+export const encodePageSlug = (slug) => {
+    return encodeURIComponent(encodeURIComponent(slug));
+};
+export async function getDefaultPages(parameters, defaultPages, findDefaultPageSlugFor) {
+    let foundDefaultPages = defaultPages;
+    const relatedObjectProperties = parameters?.filter((param) => param.type === 'object');
+    if (relatedObjectProperties) {
+        foundDefaultPages = await relatedObjectProperties.reduce(async (acc, parameter) => {
+            const result = await acc;
+            if (parameter.objectId && defaultPages && defaultPages[parameter.objectId]) {
+                const slug = await findDefaultPageSlugFor(parameter.objectId);
+                if (slug) {
+                    return { ...result, [parameter.objectId]: slug };
+                }
+            }
+            return result;
+        }, Promise.resolve({}));
+    }
+    return { ...defaultPages, ...foundDefaultPages };
+}
+function compileQueryValues(query, data) {
+    if ('rules' in query && Array.isArray(query.rules)) {
+        const updatedRules = query.rules
+            .map((item) => compileQueryValues(item, data))
+            .filter((item) => item !== undefined);
+        if (updatedRules?.length) {
+            return {
+                ...query,
+                rules: updatedRules,
+            };
+        }
+        else {
+            return undefined;
+        }
+    }
+    else {
+        if ('value' in query && typeof query.value === 'string') {
+            const template = Handlebars.compileAST(query.value);
+            const result = template(data);
+            if (result !== '') {
+                return {
+                    ...query,
+                    value: result,
+                };
+            }
+            else {
+                return undefined;
+            }
+        }
+        return query;
+    }
+}
+export function updateCriteriaInputs(criteria, data, user) {
+    const dataSet = {
+        input: {
+            ...data,
+        },
+        user: user,
+    };
+    const compiledQuery = compileQueryValues(parseMongoDB(criteria), dataSet);
+    // The "compiledQueryValues" function filters out rules that have a value of "undefined".
+    // If "compiledQuery" is "undefined", that means that all rules and nested rules have a value of "undefined".
+    // Therefore, the resulting query is empty.
+    return !compiledQuery
+        ? {}
+        : JSON.parse(formatQuery(compiledQuery, {
+            format: 'mongodb',
+            ruleProcessor: (rule, options) => {
+                let updatedRule = rule;
+                if (['contains', 'beginsWith', 'endsWith'].includes(rule.operator)) {
+                    updatedRule = { ...rule, value: escape(rule.value) };
+                }
+                return defaultRuleProcessorMongoDB(updatedRule, options);
+            },
+        }));
+}
+export async function fetchCollectionData(apiServices, fieldDefinition, setFetchedOptions, instanceId, fetchedOptions, initialMiddleObjectInstances) {
+    try {
+        if ((fetchedOptions && !fetchedOptions[`${fieldDefinition.id}MiddleObject`]) || !fetchedOptions) {
+            const fetchedMiddleObject = await apiServices.get(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/effective?sanitizedVersion=true`), {
+                params: {
+                    filter: { fields: ['properties', 'actions', 'rootObjectId'] },
+                },
+            });
+            setFetchedOptions({ [`${fieldDefinition.id}MiddleObject`]: fetchedMiddleObject });
+        }
+        // Fetch the initial middle object instances
+        const filter = instanceId ? getMiddleObjectFilter(fieldDefinition, instanceId) : {};
+        if (!isArray(initialMiddleObjectInstances)) {
+            const fetchedInitialMiddleObjectInstances = await apiServices.get(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/instances`), {
+                params: { filter: JSON.stringify(filter) },
+            });
+            setFetchedOptions({
+                [`${fieldDefinition.id}InitialMiddleObjectInstances`]: fetchedInitialMiddleObjectInstances,
+            });
+        }
+    }
+    catch (error) {
+        console.error('Error fetching collection data:', error);
+    }
+}
+export const getErrorCountForSection = (section, errors) => {
+    const entries = section.entries || [];
+    return isArray(section.entries)
+        ? entries.reduce((count, entry) => {
+            if (get(errors, entry.type === 'input' ? entry.parameterId : entry.type === 'inputField' ? entry.input.id : '')) {
+                count += 1;
+            }
+            else if (entry.type === 'sections') {
+                count += entry.sections.reduce((subCount, subSection) => {
+                    return subCount + getErrorCountForSection(subSection, errors);
+                }, 0);
+            }
+            else if (entry.type === 'columns') {
+                count += entry.columns.reduce((colCount, column) => {
+                    return colCount + getErrorCountForSection(column, errors);
+                }, 0);
+            }
+            return count;
+        }, 0)
+        : 0;
+};
+// to convert the properties of the current instances doc into a mappable object
+export const convertDocToParameters = (obj) => {
+    return Object.entries(obj).flatMap(([key, value]) => {
+        if (key === 'metadata') {
+            return [
+                {
+                    id: 'type',
+                    name: 'Type',
+                    type: 'string',
+                },
+                {
+                    id: 'view_permission',
+                    name: 'View Permission',
+                    type: 'string',
+                    enum: ['Public', 'Private', 'Portal'],
+                },
+            ];
+        }
+        return [
+            {
+                id: key,
+                name: startCase(key),
+                type: 'string',
+            },
+        ];
+    });
+};
+export const propertyToParameter = (property) => {
+    return {
+        ...omit(property, ['searchable', 'formula', 'formulaType', 'mask', 'textTransform']),
+        validation: property.validation ? propertyValidationToParameterValidation(property) : undefined,
+    };
+};
+export const propertyValidationToParameterValidation = (property) => {
+    if (property.validation) {
+        if ('from' in property.validation || 'to' in property.validation) {
+            return undefined;
+        }
+        return { ...property.validation };
+    }
+    return undefined;
+};
+export const convertPropertiesToParams = (object) => {
+    return object.properties
+        ?.reduce((acc, property) => {
+        return property.type === 'address'
+            ? [
+                ...acc,
+                ...['city', 'county', 'state', 'line1', 'line2', 'zipCode'].map((field) => ({
+                    id: `${property.id}.${field}`,
+                    name: `${property.name} ${startCase(field)}`,
+                    type: 'string',
+                })),
+            ]
+            : [...acc, property];
+    }, [])
+        .filter(({ id, type }) => type !== 'collection')
+        .flat()
+        .sort((a, b) => a.name.localeCompare(b.name))
+        .map(propertyToParameter);
+};

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

@@ -0,0 +1 @@
+export { default as FormRenderer } from './FormRenderer';

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

@@ -0,0 +1 @@
+export { default as FormRenderer } from './FormRenderer';

package/dist/published/components/custom/index.d.ts

@@ -5,6 +5,7 @@ export { ErrorComponent } from './ErrorComponent';
 export { Form } from './Form';
 export type { FormRef } from './Form';
 export { FormField } from './FormField';
+export { FormRenderer } from './FormV2';
 export { HistoryLog } from './HistoryLog';
 export { MenuBar } from './Menubar';
 export { MultiSelect } from './MultiSelect';

package/dist/published/components/custom/index.js

@@ -4,6 +4,7 @@ export { DataGrid } from './DataGrid';
 export { ErrorComponent } from './ErrorComponent';
 export { Form } from './Form';
 export { FormField } from './FormField';
+export { FormRenderer } from './FormV2';
 export { HistoryLog } from './HistoryLog';
 export { MenuBar } from './Menubar';
 export { MultiSelect } from './MultiSelect';

package/dist/published/index.d.ts

@@ -1,8 +1,8 @@
-export { ClickAwayListener, createTheme, darken, lighten, styled, Toolbar } from '@mui/material';
+export { ClickAwayListener, createTheme, darken, lighten, styled, Toolbar, useMediaQuery, useTheme, } from '@mui/material';
 export { CalendarPicker, DateTimePicker, MonthPicker, PickersDay, StaticDateTimePicker, StaticTimePicker, TimePicker, YearPicker, } from '@mui/x-date-pickers';
 export * from './colors';
 export * from './components/core';
-export { BuilderGrid, CriteriaBuilder, DataGrid, ErrorComponent, Form, FormField, getReadableQuery, HistoryLog, MenuBar, MultiSelect, RepeatableField, ResponsiveOverflow, RichTextViewer, UserAvatar, } from './components/custom';
+export { BuilderGrid, CriteriaBuilder, DataGrid, ErrorComponent, Form, FormField, FormRenderer, getReadableQuery, HistoryLog, MenuBar, MultiSelect, RepeatableField, ResponsiveOverflow, RichTextViewer, UserAvatar, } from './components/custom';
 export type { FormRef } from './components/custom';
 export { NumericFormat } from './components/custom/FormField/InputFieldComponent';
 export { Box, Container, Grid, Stack } from './components/layout';

package/dist/published/index.js

@@ -1,8 +1,8 @@
-export { ClickAwayListener, createTheme, darken, lighten, styled, Toolbar } from '@mui/material';
+export { ClickAwayListener, createTheme, darken, lighten, styled, Toolbar, useMediaQuery, useTheme, } from '@mui/material';
 export { CalendarPicker, DateTimePicker, MonthPicker, PickersDay, StaticDateTimePicker, StaticTimePicker, TimePicker, YearPicker, } from '@mui/x-date-pickers';
 export * from './colors';
 export * from './components/core';
-export { BuilderGrid, CriteriaBuilder, DataGrid, ErrorComponent, Form, FormField, getReadableQuery, HistoryLog, MenuBar, MultiSelect, RepeatableField, ResponsiveOverflow, RichTextViewer, UserAvatar, } from './components/custom';
+export { BuilderGrid, CriteriaBuilder, DataGrid, ErrorComponent, Form, FormField, FormRenderer, getReadableQuery, HistoryLog, MenuBar, MultiSelect, RepeatableField, ResponsiveOverflow, RichTextViewer, UserAvatar, } from './components/custom';
 export { NumericFormat } from './components/custom/FormField/InputFieldComponent';
 export { Box, Container, Grid, Stack } from './components/layout';
 export * from './theme';

package/dist/published/theme/hooks.d.ts

@@ -107,3 +107,10 @@ export declare const useWidgetSize: (options?: {
     resize?: boolean;
 }) => WidgetSizeInfo;
 export default useWidgetSize;
+export declare function useFormContext(): {
+    fetchedOptions: import("react-hook-form").FieldValues;
+    setFetchedOptions: (newData: import("react-hook-form").FieldValues) => void;
+    getValues: import("react-hook-form").UseFormGetValues<import("react-hook-form").FieldValues>;
+    stickyFooter?: boolean | undefined;
+    object?: import("@evoke-platform/context").Obj | undefined;
+};

package/dist/published/theme/hooks.js

@@ -1,6 +1,8 @@
 import { useTheme } from '@mui/material';
 import useMediaQuery from '@mui/material/useMediaQuery';
+import { useContext } from 'react';
 import useMeasure from 'react-use-measure';
+import { FormContext } from '../components/custom/FormV2/components/FormContext';
 /**
  * Custom hook for responsive design breakpoints using size terminology.
  * Breakpoints based on MUI default theme:
@@ -98,3 +100,10 @@ export const useWidgetSize = (options) => {
     };
 };
 export default useWidgetSize;
+export function useFormContext() {
+    const context = useContext(FormContext);
+    if (!context) {
+        throw new Error('useFormContext must be used within a FormContext.Provider');
+    }
+    return context;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.6.0-testing.13",
+    "version": "1.6.0-testing.14",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",
@@ -54,6 +54,7 @@
         "@testing-library/user-event": "^14.5.2",
         "@types/flat": "^5.0.5",
         "@types/jest": "^28.1.4",
+        "@types/json-logic-js": "^2.0.8",
         "@types/luxon": "^3.4.2",
         "@types/nanoid-dictionary": "^4.2.3",
         "@types/node": "^18.0.0",
@@ -86,7 +87,7 @@
         "yalc": "^1.0.0-pre.53"
     },
     "peerDependencies": {
-        "@evoke-platform/context": "^1.3.0-0",
+        "@evoke-platform/context": "^1.3.0-dev.6",
         "react": "^18.1.0",
         "react-dom": "^18.1.0"
     },
@@ -125,6 +126,7 @@
         "pluralize": "^8.0.0",
         "pretty-bytes": "^6.1.1",
         "react-dropzone": "^14.2.2",
+        "react-hook-form": "^7.60.0",
         "react-input-mask": "^2.0.4",
         "react-number-format": "^4.9.3",
         "react-querybuilder": "^6.0.2",