@evoke-platform/ui-components 1.0.0-dev.243 → 1.0.0-dev.245

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

@@ -10,6 +10,7 @@ import { Autocomplete, Button, IconButton, TextField } from '../../core';
 import { Box } from '../../layout';
 import { difference } from '../util';
 import PropertyTree from './PropertyTree';
+import { traversePropertyPath } from './utils';
 import ValueEditor from './ValueEditor';
 const ALL_OPERATORS = [
     { name: '=', label: 'Is' },
@@ -107,7 +108,11 @@ const customSelector = (props) => {
     let width = '90px';
     let val = value;
     let opts = options;
-    const inputType = props.fieldData?.inputType;
+    let inputType = props.fieldData?.inputType;
+    // for tree view / related object properties, the properties are stored in the propertyTreeMap upon selection
+    if (!!context.treeViewOpts && !!context.propertyTreeMap[rule.field]) {
+        inputType = context.propertyTreeMap[rule.field].type;
+    }
     let readOnly = false;
     const isTreeViewEnabled = context.treeViewOpts && title === 'Fields';
     const fetchObject = context.treeViewOpts?.fetchObject;
@@ -120,9 +125,11 @@ const customSelector = (props) => {
             opts = opts.filter((o) => readOnly || !keys.includes(o.name));
         }
     }
+    let placeholder = '';
     switch (title) {
         case 'Operators':
             width = '25%';
+            placeholder = 'Select Operator';
             if (inputType === 'array') {
                 opts = options
                     .filter((option) => ['null', 'notNull', 'in', 'notIn'].includes(option.name))
@@ -161,11 +168,19 @@ const customSelector = (props) => {
             }
             break;
         case 'Fields':
+            placeholder = 'Select Property';
             width = '33%';
             val = options.find((option) => option.name === val)?.name;
             break;
     }
-    return (React.createElement(React.Fragment, null, isTreeViewEnabled ? (React.createElement(PropertyTree, { value: val ?? value, rootObject: object, fetchObject: fetchObject, handleOnChange: handleOnChange })) : (React.createElement(Autocomplete, { options: opts, value: val ?? null, getOptionLabel: (option) => {
+    const handleTreePropertySelect = async (propertyId) => {
+        const propertyInfo = await traversePropertyPath(propertyId, object, fetchObject);
+        context.setPropertyTreeMap((prev) => {
+            return { ...prev, [propertyId]: propertyInfo };
+        });
+        handleOnChange(propertyId);
+    };
+    return (React.createElement(React.Fragment, null, isTreeViewEnabled ? (React.createElement(PropertyTree, { value: val ?? value, rootObject: object, fetchObject: fetchObject, handleTreePropertySelect: handleTreePropertySelect })) : (React.createElement(Autocomplete, { options: opts, value: val ?? null, getOptionLabel: (option) => {
             if (typeof option === 'string') {
                 return opts.find((o) => option === o.name)?.label || '';
             }
@@ -176,7 +191,7 @@ const customSelector = (props) => {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         onChange: (event, newValue) => {
             handleOnChange(newValue?.value.name);
-        }, renderInput: (params) => React.createElement(TextField, { ...params, size: "small" }), sx: { width: width, background: '#fff' }, disableClearable: true, readOnly: readOnly }))));
+        }, renderInput: (params) => React.createElement(TextField, { ...params, placeholder: placeholder, size: "small" }), sx: { width: width, background: '#fff' }, disableClearable: true, readOnly: readOnly }))));
 };
 const customCombinator = (props) => {
     const { value, handleOnChange, context, level, path } = props;
@@ -243,10 +258,12 @@ export const valueEditor = (props) => {
 const CriteriaBuilder = (props) => {
     const { properties, criteria, setCriteria, originalCriteria, enablePresetValues, presetValues, operators, dynamicContentInput, disabled, disabledCriteria, hideBorder, presetGroupLabel, treeViewOpts, } = props;
     const [query, setQuery] = useState(undefined);
+    const [propertyTreeMap, setPropertyTreeMap] = useState({});
     useEffect(() => {
         if (criteria || originalCriteria) {
             const criteriaToParse = criteria || originalCriteria || {};
             const updatedQuery = parseMongoDB(criteriaToParse);
+            !isEmpty(treeViewOpts) && updatePropertyTreeMap(updatedQuery);
             setQuery({
                 ...updatedQuery,
                 rules: processRules(updatedQuery.rules),
@@ -276,10 +293,40 @@ const CriteriaBuilder = (props) => {
             }
         });
     }
+    // this retrieves the properties from a treeview for each property in the query
+    // they are then used in the custom query builder components to determine the input type etc
+    const updatePropertyTreeMap = (q) => {
+        const ids = [];
+        const traverseRulesForIds = (rules) => {
+            rules.forEach((rule) => {
+                if ('rules' in rule) {
+                    traverseRulesForIds(rule.rules);
+                }
+                else {
+                    ids.push(rule.field);
+                }
+            });
+        };
+        traverseRulesForIds(q.rules);
+        const tempPropertyMap = { ...propertyTreeMap };
+        ids.forEach(async (id) => {
+            if (!propertyTreeMap[id] && treeViewOpts?.object && treeViewOpts?.fetchObject) {
+                const prop = await traversePropertyPath(id, treeViewOpts?.object, treeViewOpts?.fetchObject);
+                if (prop)
+                    tempPropertyMap[id] = prop;
+            }
+            setPropertyTreeMap(tempPropertyMap);
+        });
+    };
     const handleQueryChange = (q) => {
         setQuery(q);
         const newCriteria = JSON.parse(formatQuery(q, 'mongodb'));
-        if (isEmpty(difference(newCriteria, { $and: [{ $expr: true }] }))) {
+        //when q has no rules, it formats and parses to { $and: [{ $expr: true }] }
+        const allRulesDeleted = isEmpty(difference(newCriteria, { $and: [{ $expr: true }] }));
+        // since the Add Condition / Add Group buttons add rules with all the fields empty,
+        // we need to check if the first rule was added because q will still parse to { $and: [{ $expr: true }] }
+        const firstRuleAdded = isEmpty(criteria) && q.rules.length > 0;
+        if (allRulesDeleted && !firstRuleAdded) {
             setCriteria(undefined);
         }
         else {
@@ -346,6 +393,32 @@ const CriteriaBuilder = (props) => {
             React.createElement(QueryBuilderMaterial, null,
                 React.createElement(QueryBuilder, { query: !criteria && !originalCriteria ? { combinator: 'and', rules: [] } : query, fields: fields, onQueryChange: (q) => {
                         handleQueryChange(q);
+                    }, onAddRule: (rule) => {
+                        // overrides new rule and sets up an empty rule with all three fields empty
+                        return {
+                            ...rule,
+                            field: '',
+                            operator: '',
+                        };
+                    }, onAddGroup: (group) => {
+                        // overrides new group and sets up a new group with an empty rule with all three fields showing
+                        const emptyRules = group.rules.map((rule) => ({
+                            ...rule,
+                            field: '',
+                            operator: '',
+                        }));
+                        return {
+                            ...group,
+                            rules: emptyRules,
+                            combinator: 'and',
+                        };
+                    }, translations: {
+                        fields: {
+                            placeholderLabel: '',
+                        },
+                        operators: {
+                            placeholderLabel: '',
+                        },
                     }, showCombinatorsBetweenRules: true, listsAsArrays: true, disabled: disabled, addRuleToNewGroups: true, controlElements: {
                         combinatorSelector: customCombinator,
                         fieldSelector: customSelector,
@@ -363,6 +436,8 @@ const CriteriaBuilder = (props) => {
                         presetGroupLabel,
                         disabledCriteria,
                         treeViewOpts,
+                        propertyTreeMap,
+                        setPropertyTreeMap,
                     }, controlClassnames: {
                         ruleGroup: 'container',
                     }, operators: operators

package/dist/published/components/custom/CriteriaBuilder/PropertyTree.d.ts

@@ -3,8 +3,8 @@ import { EvokeObject } from '../../../types';
 type PropertyTreeProps = {
     fetchObject: (id: string) => Promise<EvokeObject | undefined>;
     rootObject: EvokeObject;
-    handleOnChange: (property: string) => void;
+    handleTreePropertySelect: (propertyId: string) => void;
     value: string | undefined;
 };
-declare const PropertyTree: ({ fetchObject, handleOnChange, rootObject, value }: PropertyTreeProps) => JSX.Element;
+declare const PropertyTree: ({ fetchObject, handleTreePropertySelect, rootObject, value }: PropertyTreeProps) => JSX.Element;
 export default PropertyTree;

package/dist/published/components/custom/CriteriaBuilder/PropertyTree.js

@@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react';
 import { Autocomplete, MenuItem, TextField, Tooltip, TreeView } from '../../core';
 import PropertyTreeItem from './PropertyTreeItem';
 import { fetchDisplayNamePath, findPropertyById, setIdPaths, truncateNamePath, updateTreeNode } from './utils';
-const PropertyTree = ({ fetchObject, handleOnChange, rootObject, value }) => {
+const PropertyTree = ({ fetchObject, handleTreePropertySelect, rootObject, value }) => {
     const [expandedNodes, setExpandedNodes] = useState([]);
     const [objectPropertyNamePathMap, setObjectPropertyNamePathMap] = useState({});
     const [objectProperties, setObjectProperties] = useState(rootObject.properties ?? []);
@@ -99,7 +99,7 @@ const PropertyTree = ({ fetchObject, handleOnChange, rootObject, value }) => {
         const property = findPropertyById(objectProperties, propertyId);
         // this prevents the selection of a parent node
         if (property && !property.children) {
-            handleOnChange(property.id);
+            handleTreePropertySelect(property.id);
         }
     };
     return (React.createElement(Autocomplete, { "aria-label": "Property Selector", value: value, fullWidth: true, sx: {

package/dist/published/components/custom/CriteriaBuilder/ValueEditor.js

@@ -17,7 +17,20 @@ const GroupHeader = styled('div')(({ theme }) => ({
 }));
 const GroupItems = styled('ul')({ padding: 0 });
 const ValueEditor = (props) => {
-    const { handleOnChange, value, values, operator, inputType, context, level, rule } = props;
+    const { handleOnChange, value, operator, context, level, rule } = props;
+    let inputType = props.inputType;
+    let values = props.values;
+    const property = context.propertyTreeMap[rule.field];
+    // for tree view / related object properties, the properties are stored in the propertyTreeMap upon selection
+    if (!!context.treeViewOpts && !!property) {
+        inputType = property.type;
+        if (property.enum) {
+            values = property.enum.map((item) => ({
+                name: item,
+                label: item,
+            }));
+        }
+    }
     const inputRef = useRef(null);
     const [openPresetValues, setOpenPresetValues] = useState(false);
     const disabled = ['null', 'notNull'].includes(operator);
@@ -79,7 +92,7 @@ const ValueEditor = (props) => {
                         handleOnChange(uniqueSelections.length ? uniqueSelections : '');
                     }, 
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    isOptionEqualToValue: (option, value) => option === value, renderInput: (params) => (React.createElement(TextField, { label: params.label, ...params, size: "small" })), groupBy: (option) => isPresetValue(option.value?.name) ? context.presetGroupLabel || 'Preset Values' : 'Options', renderGroup: groupRenderGroup, sx: { width: '33%', background: '#fff' }, readOnly: readOnly }));
+                    isOptionEqualToValue: (option, value) => option === value, renderInput: (params) => (React.createElement(TextField, { label: params.label, ...params, size: "small", sx: { backgroundColor: '#fff' } })), groupBy: (option) => isPresetValue(option.value?.name) ? context.presetGroupLabel || 'Preset Values' : 'Options', renderGroup: groupRenderGroup, sx: { width: '33%', background: '#fff' }, readOnly: readOnly }));
             }
             else {
                 return (React.createElement(TextField, { inputRef: inputRef, value: ['null', 'notNull'].includes(operator) ? '' : value, disabled: ['null', 'notNull'].includes(operator), onChange: (e) => {
@@ -114,7 +127,7 @@ const ValueEditor = (props) => {
                             value = newValue?.name ?? newValue?.value?.name ?? '';
                         }
                         handleOnChange(value);
-                    }, renderInput: (params) => (React.createElement(TextField, { inputRef: inputRef, label: params?.label, ...params, size: "small" })), 
+                    }, renderInput: (params) => (React.createElement(TextField, { inputRef: inputRef, label: params?.label, ...params, size: "small", sx: { backgroundColor: '#fff' } })), 
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     getOptionLabel: (option) => {
                         if (typeof option === 'string') {

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

@@ -39,7 +39,7 @@ export declare const setIdPaths: (properties: ObjectProperty[], parentPath: stri
  *
  * @param {string} propertyPath - The dot-separated path of the property to traverse.
  * @param {Obj} rootObject - The root object from which to start the traversal.
- * @param {(objectId: string) => Promise<Obj | undefined>} fetchObject - A function to fetch an object by its ID.
+ * @param {FetchObjectFunction} fetchObject - A function to fetch an object by its ID.
  * @returns {Promise<ObjectProperty | null>} A promise that resolves to an ObjectProperty if found, or null otherwise.
  */
 export declare const traversePropertyPath: (propertyPath: string, rootObject: Obj, fetchObject: (objectId: string) => Promise<Obj | undefined>) => Promise<ObjectProperty | null>;

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

@@ -72,7 +72,7 @@ export const setIdPaths = (properties, parentPath) => {
  *
  * @param {string} propertyPath - The dot-separated path of the property to traverse.
  * @param {Obj} rootObject - The root object from which to start the traversal.
- * @param {(objectId: string) => Promise<Obj | undefined>} fetchObject - A function to fetch an object by its ID.
+ * @param {FetchObjectFunction} fetchObject - A function to fetch an object by its ID.
  * @returns {Promise<ObjectProperty | null>} A promise that resolves to an ObjectProperty if found, or null otherwise.
  */
 export const traversePropertyPath = async (propertyPath, rootObject, fetchObject) => {

package/dist/published/components/custom/Form/FormComponents/FormFieldComponent.js

@@ -1,4 +1,5 @@
 import { ReactComponent } from '@formio/react';
+import Handlebars from 'handlebars';
 import { isArray, isEmpty, isNil, uniq } from 'lodash';
 import { DateTime } from 'luxon';
 import React from 'react';
@@ -9,20 +10,20 @@ import { isPropertyVisible } from '../utils';
 function isAddressProperties(key) {
     return /\.line1|\.line2|\.city|\.county|\.state|\.zipCode$/.test(key);
 }
-function addDays(addend1, addend2) {
+Handlebars.registerHelper('addDays', function (addend1, addend2) {
     const dateAddend1 = DateTime.fromISO(addend1);
     if (dateAddend1.isValid) {
         return dateAddend1.plus({ days: addend2 }).toISODate();
     }
     return undefined;
-}
-function subDays(minuend, subtrahend) {
+});
+Handlebars.registerHelper('subDays', function (minuend, subtrahend) {
     const dateMinuend = DateTime.fromISO(minuend);
     if (dateMinuend.isValid) {
         return dateMinuend.minus({ days: subtrahend }).toISODate();
     }
     return undefined;
-}
+});
 export class FormFieldComponent extends ReactComponent {
     /**
      * Called when the component has been instantiated. This is useful to define
@@ -344,63 +345,29 @@ export class FormFieldComponent extends ReactComponent {
         else {
             delete this.errorDetails['regexes'];
         }
-        const evaluateDateValidation = (dateValidation) => {
+        if (this.component.validate.minDate || this.component.validate.maxDate) {
             const dateRegex = /^\d{4}-\d{2}-\d{2}$/;
-            const exactDateRegex = /^{{(?<inputProperty>input\.[a-zA-Z][a-zA-Z0-9_]*|__today__)}}$/;
-            const relativeDateRegex = /^{{(?<operation>addDays|subDays) (?<operand1>input\.[a-zA-Z][a-zA-Z0-9_]*|__today__) (?<operand2>[0-9]+)}}$/;
-            // If the date validation isn't a literal date, evaluate it
-            if (dateValidation && !dateRegex.test(dateValidation)) {
+            const data = {
+                input: { ...this.root.data },
+                __today__: DateTime.now().toISODate(),
+            };
+            let { minDate, maxDate } = validate;
+            if (minDate && !dateRegex.test(minDate)) {
                 try {
-                    const today = DateTime.now().toISODate();
-                    if (exactDateRegex.test(dateValidation)) {
-                        const { groups = {} } = exactDateRegex.exec(dateValidation) ?? {};
-                        const { inputProperty } = groups;
-                        if (inputProperty === '__today__') {
-                            return today;
-                        }
-                        else if (inputProperty.split('.').length > 1) {
-                            const propertyId = inputProperty.split('.')[1];
-                            if (propertyId in this.root.data) {
-                                return this.root.data[propertyId];
-                            }
-                        }
-                    }
-                    else if (relativeDateRegex.test(dateValidation)) {
-                        const { groups = {} } = relativeDateRegex.exec(dateValidation) ?? {};
-                        // eslint-disable-next-line prefer-const
-                        let { operation, operand1, operand2 } = groups;
-                        if (operation && operand1 && operand2) {
-                            if (operand1 === '__today__') {
-                                operand1 = today;
-                            }
-                            else if (operand1.split('.').length > 1) {
-                                const propertyId = operand1.split('.')[1];
-                                if (propertyId in this.root.data) {
-                                    operand1 = this.root.data[propertyId];
-                                }
-                            }
-                            else {
-                                throw `Invalid operand: ${operand1}`;
-                            }
-                            if (operation === 'addDays') {
-                                return addDays(operand1, parseInt(operand2));
-                            }
-                            else {
-                                return subDays(operand1, parseInt(operand2));
-                            }
-                        }
-                    }
-                    throw `Invalid date validation: ${dateValidation}`;
+                    minDate = Handlebars.compile(minDate)(data);
+                }
+                catch (err) {
+                    console.log(err);
+                }
+            }
+            if (maxDate && !dateRegex.test(maxDate)) {
+                try {
+                    maxDate = Handlebars.compile(maxDate)(data);
                 }
                 catch (err) {
                     console.log(err);
-                    return undefined;
                 }
             }
-        };
-        if (this.component.validate.minDate || this.component.validate.maxDate) {
-            const minDate = validate.minDate ? evaluateDateValidation(validate.minDate) : undefined;
-            const maxDate = validate.maxDate ? evaluateDateValidation(validate.maxDate) : undefined;
             if ((minDate && value < minDate) || (maxDate && value > maxDate)) {
                 this.errorDetails['date'] = validate.customMessage;
             }
@@ -456,11 +423,7 @@ export class FormFieldComponent extends ReactComponent {
                 !this.root.customErrors.some((err) => err.message === error)) {
                 this.root.customErrors = [
                     ...this.root.customErrors,
-                    {
-                        component: this.component,
-                        message: error,
-                        formattedKeyOrPath: this.component.key,
-                    },
+                    { component: this.component, message: error, formattedKeyOrPath: this.component.key },
                 ];
             }
         });

package/dist/published/components/custom/Form/FormComponents/ObjectComponent/ObjectPropertyInput.js

@@ -1,5 +1,5 @@
 import cleanDeep from 'clean-deep';
-import Handlebars from 'kbn-handlebars';
+import Handlebars from 'handlebars';
 import { cloneDeep, debounce, isEmpty, isNil } from 'lodash';
 import React, { useCallback, useEffect, useState } from 'react';
 import { Close } from '../../../../../icons';
@@ -132,7 +132,7 @@ export const ObjectPropertyInput = (props) => {
         setOpenCreateDialog(false);
     };
     const compileExpression = (expression, instance) => {
-        const template = Handlebars.compileAST(expression);
+        const template = Handlebars.compile(expression);
         return instance ? template(instance) : undefined;
     };
     const navigationSlug = defaultPages && property.objectId && defaultPages[property.objectId];

package/dist/published/components/custom/Form/FormComponents/RepeatableFieldComponent/ManyToMany/DropdownRepeatableFieldInput.js

@@ -1,4 +1,4 @@
-import Handlebars from 'kbn-handlebars';
+import Handlebars from 'handlebars';
 import { difference, isEmpty, isObject } from 'lodash';
 import React, { useEffect, useState } from 'react';
 import { FormField } from '../../../..';
@@ -60,7 +60,7 @@ export const DropdownRepeatableFieldInput = (props) => {
         }
     };
     const compileExpression = (instance, expression) => {
-        const template = Handlebars.compileAST(expression);
+        const template = Handlebars.compile(expression);
         return template(instance);
     };
     return (React.createElement(React.Fragment, null, !readOnly ? (property && (React.createElement(React.Fragment, null,
@@ -87,8 +87,5 @@ export const DropdownRepeatableFieldInput = (props) => {
                     } })),
                 loading: loading,
             } }),
-        React.createElement(Snackbar, { open: snackbarError.showAlert, handleClose: () => setSnackbarError({
-                isError: snackbarError.isError,
-                showAlert: false,
-            }), message: snackbarError.message, error: snackbarError.isError })))) : (React.createElement(Typography, null, selectedOptions && selectedOptions.map((option) => option.label).join(', ')))));
+        React.createElement(Snackbar, { open: snackbarError.showAlert, handleClose: () => setSnackbarError({ isError: snackbarError.isError, showAlert: false }), message: snackbarError.message, error: snackbarError.isError })))) : (React.createElement(Typography, null, selectedOptions && selectedOptions.map((option) => option.label).join(', ')))));
 };

package/dist/published/stories/CriteriaBuilder.stories.d.ts

@@ -3,6 +3,7 @@ import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { CriteriaInputProps } from '../components/custom/CriteriaBuilder/CriteriaBuilder';
 declare const _default: ComponentMeta<(props: CriteriaInputProps) => JSX.Element>;
 export default _default;
+export declare const CriteriaBuilderEmpty: ComponentStory<(props: CriteriaInputProps) => JSX.Element>;
 export declare const CriteriaBuilder: ComponentStory<(props: CriteriaInputProps) => JSX.Element>;
 export declare const CriteriaBuilderPresetUserID: ComponentStory<(props: CriteriaInputProps) => JSX.Element>;
 export declare const CriteriaBuilderGroupedPresetValues: ComponentStory<(props: CriteriaInputProps) => JSX.Element>;

package/dist/published/stories/CriteriaBuilder.stories.js

@@ -4,7 +4,101 @@ export default {
     title: 'Input/CriteriaBuilder',
     component: BuildCriteria,
 };
-const CriteriaBuilderTemplate = (args) => (React.createElement(BuildCriteria, { ...args }));
+const CriteriaBuilderTemplate = (args) => {
+    const [criteria, setCriteria] = React.useState(args.criteria);
+    args.setCriteria = setCriteria;
+    args.criteria = criteria;
+    console.log('reset criteria= ', criteria);
+    return React.createElement(BuildCriteria, { ...args });
+};
+export const CriteriaBuilderEmpty = CriteriaBuilderTemplate.bind({});
+CriteriaBuilderEmpty.args = {
+    properties: [
+        {
+            id: 'name',
+            name: 'name',
+            type: 'string',
+            required: true,
+        },
+        {
+            id: 'licenseNumber',
+            name: 'license number',
+            type: 'string',
+            required: true,
+        },
+        {
+            id: 'issueDate',
+            name: 'issue date',
+            type: 'date',
+            required: false,
+            objectId: '',
+        },
+        {
+            id: 'status',
+            name: 'status',
+            type: 'string',
+            enum: ['active', 'expired', 'pending approval'],
+            required: false,
+            objectId: '',
+        },
+        {
+            id: 'licenseeName',
+            name: 'Licensee Name',
+            type: 'string',
+            required: false,
+            formula: '{{person.firstName}} {{person.middleName}} {{person.lastName}}',
+        },
+        {
+            id: 'calculated',
+            name: 'calculated',
+            type: 'string',
+            required: false,
+            objectId: '',
+            formula: '{{status}} - {{licensee.firstName}}',
+        },
+        {
+            id: 'application',
+            name: 'applicant',
+            type: 'object',
+            required: false,
+            objectId: 'application',
+        },
+        {
+            id: 'applicantName',
+            name: 'Application Info',
+            type: 'string',
+            required: false,
+            formula: '{{application.name}} - {{status}}',
+        },
+        {
+            id: 'licensedFor',
+            name: 'licensed for',
+            type: 'array',
+            enum: [
+                'amusements',
+                'food and beverage',
+                'entertainment',
+                'transportation',
+                'hot dogs',
+                'swimming pools',
+                'ferris wheels',
+                'bungee jumping',
+            ],
+            required: true,
+            searchable: false,
+        },
+        {
+            id: 'inState',
+            name: 'In State',
+            type: 'string',
+            enum: ['Yes', 'No'],
+            required: false,
+            searchable: false,
+        },
+    ],
+    criteria: {},
+    setCriteria: (criteria) => console.log('criteria= ', criteria),
+};
 export const CriteriaBuilder = CriteriaBuilderTemplate.bind({});
 CriteriaBuilder.args = {
     properties: [
@@ -418,6 +512,13 @@ CriteriaBuilderRelatedObject.args = {
                             type: 'date',
                             required: false,
                         },
+                        {
+                            id: 'approvalStatus',
+                            name: 'Approval Status',
+                            type: 'string',
+                            enum: ['Approved', 'Denied', 'InProgress', 'Received'],
+                            required: false,
+                        },
                         {
                             id: 'licenseNumber',
                             name: 'LicenseNumber',
@@ -464,6 +565,13 @@ CriteriaBuilderRelatedObject.args = {
                             type: 'string',
                             required: true,
                         },
+                        {
+                            id: 'status',
+                            name: 'Status',
+                            type: 'string',
+                            enum: ['RN', 'NP', 'DNP', 'MA'],
+                            required: false,
+                        },
                         {
                             id: 'description',
                             name: 'Description',
@@ -703,10 +811,38 @@ CriteriaBuilderRelatedObject.args = {
     criteria: {
         $and: [
             {
-                name: 'bert',
+                'applicant.vehicleCount': {
+                    $gt: 2,
+                },
+            },
+            {
+                'applicant.license.expirationDate': {
+                    $gt: '2025-01-16',
+                },
+            },
+            {
+                'applicant.license.person.phone': {
+                    $regex: '410',
+                },
+            },
+            {
+                $or: [
+                    {
+                        'applicant.license.approvalStatus': 'InProgress',
+                    },
+                    {
+                        'applicant.license.approvalStatus': 'Approved',
+                    },
+                    {
+                        'applicant.license.issueDate': '2025-01-09',
+                    },
+                    {
+                        'applicant.avgVehicleRating': 1,
+                    },
+                ],
             },
             {
-                'applicant.lastName': '',
+                'applicationType.status': 'DNP',
             },
         ],
     },

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.0.0-dev.243",
+    "version": "1.0.0-dev.245",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",
@@ -114,8 +114,8 @@
         "eslint-plugin-no-inline-styles": "^1.0.5",
         "flat": "^6.0.1",
         "formiojs": "^4.15.0-rc.23",
+        "handlebars": "^4.7.8",
         "html-react-parser": "^5.1.18",
-        "kbn-handlebars": "^1.0.0",
         "luxon": "^2.5.2",
         "nanoid": "^5.0.8",
         "nanoid-dictionary": "^4.3.0",