@evoke-platform/ui-components 1.0.2-testing.3 → 1.1.0-testing.1

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

@@ -3,7 +3,7 @@ import { Typography } from '@mui/material';
 import { QueryBuilderMaterial } from '@react-querybuilder/material';
 import { isArray, isEmpty, startCase } from 'lodash';
 import React, { useEffect, useMemo, useState } from 'react';
-import { QueryBuilder, RuleGroupBodyComponents, RuleGroupHeaderComponents, TestID, defaultRuleProcessorMongoDB, formatQuery, useRuleGroup, } from 'react-querybuilder';
+import { QueryBuilder, RuleGroupBodyComponents, RuleGroupHeaderComponents, TestID, add, defaultRuleProcessorMongoDB, formatQuery, useRuleGroup, } from 'react-querybuilder';
 import 'react-querybuilder/dist/query-builder.css';
 import escape from 'string-escape-regex';
 import { TrashCan } from '../../../icons/custom';
@@ -28,6 +28,14 @@ const ALL_OPERATORS = [
     { name: 'in', label: 'In' },
     { name: 'notIn', label: 'Not in' },
 ];
+const styles = {
+    buttons: {
+        padding: '6px 16px',
+        fontSize: '0.875rem',
+        marginRight: '0px',
+        boxShadow: 'none',
+    },
+};
 const CustomRuleGroup = (props) => {
     const rg = { ...props, ...useRuleGroup(props) };
     const [addRule, addGroup, cloneGroup, toggleLockGroup, removeGroup] = [
@@ -73,11 +81,8 @@ const customButton = (props) => {
         case 'Add rule':
             buttonLabel = 'Add Condition';
             break;
-        case 'Remove group':
-            buttonLabel = 'Clear All';
-            break;
     }
-    return (React.createElement(React.Fragment, null, (path.length < nestedConditionLimit || title === 'Add rule') && (React.createElement(Button, { onClick: handleOnClick, startIcon: React.createElement(AddRounded, null), sx: {
+    return (React.createElement(React.Fragment, null, !!path.length && (path.length < nestedConditionLimit || title === 'Add rule') && (React.createElement(Button, { onClick: handleOnClick, startIcon: React.createElement(AddRounded, null), sx: {
             padding: '6px 16px',
             fontSize: '0.875rem',
             marginRight: path.length === 0 ? '.5rem' : '0px',
@@ -334,6 +339,24 @@ const CriteriaBuilder = (props) => {
             setPropertyTreeMap(tempPropertyMap);
         });
     };
+    const handleClearAll = () => {
+        handleQueryChange({ combinator: 'and', rules: [] });
+    };
+    const handleAddRule = () => {
+        if (query) {
+            const newQuery = add(query, { field: '', operator: '', value: '' }, []);
+            setQuery(newQuery);
+        }
+    };
+    const handleAddGroup = () => {
+        if (query) {
+            const newQuery = add(query, {
+                combinator: 'and',
+                rules: [{ field: '', operator: '', value: '' }],
+            }, []);
+            setQuery(newQuery);
+        }
+    };
     const handleQueryChange = (q) => {
         setQuery(q);
         const newCriteria = JSON.parse(formatQuery(q, {
@@ -405,6 +428,7 @@ const CriteriaBuilder = (props) => {
                     borderStyle: 'hidden',
                     background: '#fff',
                     maxWidth: '70vw',
+                    margin: 'auto',
                 },
                 '.ruleGroup-header': {
                     display: 'block',
@@ -424,7 +448,9 @@ const CriteriaBuilder = (props) => {
                 '.ruleGroup .ruleGroup': { borderStyle: 'solid' },
             } },
             React.createElement(QueryBuilderMaterial, null,
-                React.createElement(QueryBuilder, { query: !criteria && !originalCriteria ? { combinator: 'and', rules: [] } : query, fields: fields, onQueryChange: (q) => {
+                React.createElement(QueryBuilder, { query: !criteria && !originalCriteria && query.rules.length === 0
+                        ? { 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
@@ -483,7 +509,45 @@ const CriteriaBuilder = (props) => {
                         ruleGroup: 'container',
                     }, operators: operators
                         ? ALL_OPERATORS.filter((o) => operators.includes(o.name))
-                        : ALL_OPERATORS }))));
+                        : ALL_OPERATORS })),
+            React.createElement(Box, { sx: {
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    marginBottom: '10px',
+                    maxWidth: '71vw',
+                    marginLeft: 'auto',
+                    marginRight: 'auto',
+                } },
+                React.createElement(Box, null,
+                    React.createElement(Button, { sx: {
+                            backgroundColor: 'rgba(0, 117, 167, 0.08)',
+                            color: '#0075A7',
+                            marginLeft: '10px',
+                            '&:hover': {
+                                backgroundColor: 'rgba(0, 117, 167, 0.08)',
+                            },
+                            ...styles.buttons,
+                        }, startIcon: React.createElement(AddRounded, null), onClick: handleAddRule }, "Add Condition"),
+                    React.createElement(Button, { sx: {
+                            backgroundColor: '#f6f7f8',
+                            color: '#000',
+                            marginLeft: '8px',
+                            '&:hover': {
+                                backgroundColor: '#f6f7f8',
+                            },
+                            ...styles.buttons,
+                        }, startIcon: React.createElement(AddRounded, null), onClick: handleAddGroup, title: "Add a rule at the bottom of the group" }, "Add Condition Group")),
+                React.createElement(Button, { variant: 'text', sx: {
+                        justifyContent: 'flex-end',
+                        color: '#000',
+                        fontWeight: 500,
+                        paddingLeft: '0px',
+                        '&:hover': {
+                            backgroundColor: 'transparent',
+                        },
+                        ...styles.buttons,
+                    }, onClick: handleClearAll, title: "Clear all conditions", disabled: isEmpty(query.rules) }, "Clear All"))));
     }
     return React.createElement(React.Fragment, null);
 };

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

@@ -1,6 +1,7 @@
+import { Instant, LocalDate, LocalDateTime, LocalTime, ZoneId } from '@js-joda/core';
 import { ClearRounded } from '@mui/icons-material';
 import { Box, darken, lighten, styled } from '@mui/material';
-import { TimePicker } from '@mui/x-date-pickers';
+import { DateTimePicker, TimePicker } from '@mui/x-date-pickers';
 import React, { useRef, useState } from 'react';
 import { Autocomplete, Chip, DatePicker, LocalizationProvider, Menu, MenuItem, TextField, Typography, } from '../../core';
 import { NumericFormat } from '../FormField/InputFieldComponent';
@@ -31,6 +32,7 @@ const ValueEditor = (props) => {
             }));
         }
     }
+    const [anchorEl, setAnchorEl] = useState(null);
     const inputRef = useRef(null);
     const [openPresetValues, setOpenPresetValues] = useState(false);
     // Manages input value for Autocomplete when using 'in/not in' operators, ensuring correct handling on blur.
@@ -48,7 +50,7 @@ const ValueEditor = (props) => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const onClick = (e) => {
         // if property is date and date picker is open, don't open preset values
-        if (inputType && ['date', 'time'].includes(inputType) && e.target?.tagName !== 'INPUT') {
+        if (inputType && ['date', 'time', 'date-time'].includes(inputType) && e.target?.tagName !== 'INPUT') {
             return;
         }
         setOpenPresetValues(true);
@@ -66,6 +68,13 @@ const ValueEditor = (props) => {
     const groupRenderGroup = (params) => (React.createElement("li", { key: params.key },
         React.createElement(GroupHeader, null, params.group),
         React.createElement(GroupItems, null, params.children)));
+    function parseISOStringToLocalDateTime(value) {
+        if (!value) {
+            return null;
+        }
+        const d = new Date(value);
+        return LocalDateTime.ofInstant(Instant.ofEpochMilli(d.getTime()), ZoneId.systemDefault());
+    }
     const getEditor = () => {
         if (isPresetValueSelected) {
             return;
@@ -82,6 +91,28 @@ const ValueEditor = (props) => {
             return (React.createElement(LocalizationProvider, null,
                 React.createElement(TimePicker, { inputRef: inputRef, disabled: disabled, value: disabled || !value ? null : value, onChange: handleOnChange, renderInput: (params) => (React.createElement(TextField, { ...params, onClick: onClick, placeholder: "Value", size: "small", sx: { width: '33%', background: '#fff' } })), readOnly: readOnly })));
         }
+        else if (inputType === 'date-time') {
+            const dateTimeValue = parseISOStringToLocalDateTime(value);
+            return (React.createElement(LocalizationProvider, null,
+                React.createElement(DateTimePicker, { inputRef: inputRef, value: dateTimeValue, onChange: (date) => {
+                        if (!date) {
+                            handleOnChange('');
+                            return;
+                        }
+                        let localDateTime;
+                        if (date instanceof LocalDate && !(date instanceof LocalDateTime)) {
+                            // onChange initially returns a LocalDate after date is selected
+                            localDateTime = LocalDateTime.of(date, LocalTime.of(0));
+                        }
+                        else {
+                            localDateTime = date;
+                        }
+                        handleOnChange(new Date(localDateTime.toString()).toISOString());
+                    }, onClose: onClose, PopperProps: {
+                        anchorEl,
+                    }, renderInput: (params) => (React.createElement(Box, { sx: { width: '33%', background: '#fff' }, ref: setAnchorEl },
+                        React.createElement(TextField, { ...params, disabled: disabled, onClick: onClick, placeholder: "Value", size: "small", inputRef: inputRef }))), readOnly: readOnly })));
+        }
         else if (inputType === 'number' || inputType === 'integer') {
             const isMultiple = ['in', 'notIn'].includes(operator);
             const options = presetValues;

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

@@ -4,6 +4,98 @@ export default {
     title: 'Input/CriteriaBuilder',
     component: BuildCriteria,
 };
+const defaultProperties = [
+    {
+        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,
+    },
+    {
+        id: 'applicationDate',
+        name: 'Application Date',
+        type: 'date-time',
+        required: false,
+    },
+    {
+        id: 'status',
+        name: 'status',
+        type: 'string',
+        enum: ['active', 'expired', 'pending approval'],
+        required: false,
+    },
+    {
+        id: 'licenseeName',
+        name: 'Licensee Name',
+        type: 'string',
+        required: false,
+        formula: '{{person.firstName}} {{person.middleName}} {{person.lastName}}',
+    },
+    {
+        id: 'calculated',
+        name: 'calculated',
+        type: 'string',
+        required: false,
+        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,
+    },
+    {
+        id: 'amountOfInspections',
+        name: 'Inspection Count',
+        type: 'integer',
+        required: false,
+    },
+];
 const CriteriaBuilderTemplate = (args) => {
     const [criteria, setCriteria] = React.useState(args.criteria);
     args.setCriteria = setCriteria;
@@ -13,182 +105,12 @@ const CriteriaBuilderTemplate = (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,
-        },
-    ],
+    properties: [...defaultProperties],
     criteria: {},
 };
 export const CriteriaBuilder = CriteriaBuilderTemplate.bind({});
 CriteriaBuilder.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,
-        },
-        {
-            id: 'amountOfInspections',
-            name: 'Inspection Count',
-            type: 'integer',
-            required: false,
-        },
-    ],
+    properties: [...defaultProperties],
     criteria: {
         $or: [
             {
@@ -202,6 +124,9 @@ CriteriaBuilder.args = {
                     $lt: 3,
                 },
             },
+            {
+                applicationDate: '2025-02-18T20:15:00.000Z',
+            },
             {
                 licensedFor: { $in: ['hot dogs', 'amusements', 'entertainment'] },
             },
@@ -222,95 +147,7 @@ CriteriaBuilder.args = {
 };
 export const CriteriaBuilderPresetUserID = CriteriaBuilderTemplate.bind({});
 CriteriaBuilderPresetUserID.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,
-        },
-        {
-            id: 'amountOfInspections',
-            name: 'Inspection Count',
-            type: 'integer',
-            required: false,
-        },
-    ],
+    properties: [...defaultProperties],
     criteria: {
         $or: [
             {
@@ -325,60 +162,7 @@ CriteriaBuilderPresetUserID.args = {
 };
 export const CriteriaBuilderGroupedPresetValues = CriteriaBuilderTemplate.bind({});
 CriteriaBuilderGroupedPresetValues.args = {
-    properties: [
-        {
-            id: 'name',
-            name: 'name',
-            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: 'amountOfInspections',
-            name: 'Inspection Count',
-            type: 'integer',
-            required: false,
-        },
-        {
-            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,
-        },
-    ],
+    properties: [...defaultProperties],
     criteria: {
         $or: [
             {

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

@@ -8,6 +8,7 @@ export declare const NumberField: ComponentStory<(props: FormFieldProps) => JSX.
 export declare const MaskedInput: ComponentStory<(props: FormFieldProps) => JSX.Element>;
 export declare const ChoicesSelectField: ComponentStory<(props: FormFieldProps) => JSX.Element>;
 export declare const DatePickerField: ComponentStory<(props: FormFieldProps) => JSX.Element>;
+export declare const DateTimePickerField: ComponentStory<(props: FormFieldProps) => JSX.Element>;
 export declare const BooleanField: ComponentStory<(props: FormFieldProps) => JSX.Element>;
 export declare const FileUploadField: ComponentStory<(props: FormFieldProps) => JSX.Element>;
 export declare const ArraySelectField: ComponentStory<(props: FormFieldProps) => JSX.Element>;

package/dist/published/stories/FormField.stories.js

@@ -101,6 +101,21 @@ DatePickerField.args = {
     readOnly: false,
     size: 'small',
 };
+export const DateTimePickerField = FormFieldTemplate.bind({});
+DateTimePickerField.args = {
+    property: {
+        id: 'date-time',
+        name: 'Date Time',
+        type: 'date-time',
+        required: true,
+    },
+    onChange: (id, value) => console.log('id= ', id, 'Value= ', value),
+    defaultValue: '2025-02-19T18:05:00.000Z',
+    error: false,
+    required: true,
+    readOnly: false,
+    size: 'small',
+};
 export const BooleanField = FormFieldTemplate.bind({});
 BooleanField.args = {
     property: {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.0.2-testing.3",
+    "version": "1.1.0-testing.1",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",