@evoke-platform/ui-components 1.0.0-dev.1.10.6 → 1.0.0-dev.1.10.8

package/README.md

@@ -1,15 +1,4 @@
 # Evoke's Component Library
-## Installation:
-    npm i @sa-platform/ui-components
-
-## View Documentation:
-Go to: https://cedardevdocs.z2.web.core.usgovcloudapi.net/components
 
-## Experimental features that do not yet have Storybook stories (refer MUI page for documentation):
- * DatePicker
- * TimePicker
- * DayPicker
- * MonthPicker
- * YearPicker
- * CalendarPicker
- * LocalizationProvider
+## Installation:
+    npm i @evoke-platform/ui-components

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

@@ -15,11 +15,13 @@ export declare type ObjectProperty = {
 declare type CustomValueEditorProps = ValueEditorProps & {
     values?: AutocompleteOption[] | any[];
 };
+declare type Operator = ('=' | '=!' | '<' | '>' | '<=' | '>=' | 'contains' | 'beginsWith' | 'endsWith' | 'doesNotContain' | 'doesNotBeginWith' | 'doesNotEndWith' | 'null' | 'notNull' | 'in' | 'notIn' | 'between' | 'notBetween');
 declare type CriteriaInputProps = {
     properties: ObjectProperty[];
     setCriteria: Function;
     criteria?: Record<string, any>;
     enablePresetValues?: boolean;
+    operators?: Operator[];
 };
 export declare const customValueEditorWithPresets: (props: CustomValueEditorProps) => JSX.Element;
 export declare const customValueEditor: (props: CustomValueEditorProps) => JSX.Element;

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

@@ -5,6 +5,26 @@ import 'react-querybuilder/dist/query-builder.css';
 import { RemoveCircleOutline } from '../../../icons';
 import { Autocomplete, Button, DatePicker, IconButton, LocalizationProvider, MenuItem, TextField, Typography, } from '../../core';
 import { Box } from '../../layout';
+const ALL_OPERATORS = [
+    { name: '=', label: '=' },
+    { name: '!=', label: '!=' },
+    { name: '<', label: '<' },
+    { name: '>', label: '>' },
+    { name: '<=', label: '<=' },
+    { name: '>=', label: '>=' },
+    { name: 'contains', label: 'contains' },
+    { name: 'beginsWith', label: 'begins with' },
+    { name: 'endsWith', label: 'ends with' },
+    { name: 'doesNotContain', label: 'does not contain' },
+    { name: 'doesNotBeginWith', label: 'does not begin with' },
+    { name: 'doesNotEndWith', label: 'does not end with' },
+    { name: 'null', label: 'is null' },
+    { name: 'notNull', label: 'is not null' },
+    { name: 'in', label: 'in' },
+    { name: 'notIn', label: 'not in' },
+    { name: 'between', label: 'between' },
+    { name: 'notBetween', label: 'not between' },
+];
 const customSelector = (props) => {
     var _a, _b;
     const { options, value, handleOnChange, title } = props;
@@ -150,7 +170,7 @@ const determineValueEditor = (baseValueEditor, props) => {
     return valueEditor;
 };
 const CriteriaBuilder = (props) => {
-    const { properties, criteria, setCriteria, enablePresetValues } = props;
+    const { properties, criteria, setCriteria, enablePresetValues, operators } = props;
     const [query, setQuery] = useState(undefined);
     useEffect(() => {
         if (criteria) {
@@ -225,7 +245,7 @@ const CriteriaBuilder = (props) => {
                     }, controlClassnames: {
                         queryBuilder: 'queryBuilder-branches',
                         ruleGroup: 'container',
-                    } }))));
+                    }, operators: operators ? ALL_OPERATORS.filter((o) => operators.includes(o.name)) : ALL_OPERATORS }))));
     }
     return React.createElement(React.Fragment, null);
 };

package/dist/published/components/custom/FormField/BooleanSelect/BooleanSelect.js

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { Autocomplete, TextField } from '../../../core';
 import InputFieldComponent from '../InputFieldComponent/InputFieldComponent';
 const BooleanSelect = (props) => {
-    const { property, defaultValue, error, readOnly, size, placeholder } = props;
+    const { property, defaultValue, error, errorMessage, readOnly, size, placeholder } = props;
     const [value, setValue] = useState(defaultValue);
     const id = property.id;
     useEffect(() => {
@@ -22,6 +22,6 @@ const BooleanSelect = (props) => {
             value: false,
         },
     ];
-    return readOnly ? (React.createElement(InputFieldComponent, Object.assign({}, props))) : (React.createElement(Autocomplete, { id: id, renderInput: (params) => (React.createElement(TextField, Object.assign({}, params, { value: value, error: error, fullWidth: true, style: { background: 'white' }, size: size !== null && size !== void 0 ? size : 'medium', placeholder: placeholder }))), value: value, onChange: handleChange, inputValue: value, options: booleanOptions, disableClearable: true, style: { background: 'white', borderRadius: '8px' } }));
+    return readOnly ? (React.createElement(InputFieldComponent, Object.assign({}, props))) : (React.createElement(Autocomplete, { id: id, renderInput: (params) => (React.createElement(TextField, Object.assign({}, params, { value: value, error: error, errorMessage: errorMessage, fullWidth: true, style: { background: 'white' }, size: size !== null && size !== void 0 ? size : 'medium', placeholder: placeholder }))), value: value, onChange: handleChange, inputValue: value, options: booleanOptions, disableClearable: true, style: { background: 'white', borderRadius: '8px' } }));
 };
 export default BooleanSelect;

package/dist/published/components/custom/FormField/DatePickerSelect/DatePickerSelect.js

@@ -26,7 +26,7 @@ const asMonthDayYearFormat = (date) => {
     }
 };
 const DatePickerSelect = (props) => {
-    const { property, defaultValue, error, readOnly, required, size } = props;
+    const { property, defaultValue, error, errorMessage, readOnly, required, size } = props;
     const [value, setValue] = useState(asCalendarDate(defaultValue));
     const id = property.id;
     useEffect(() => {
@@ -37,6 +37,6 @@ const DatePickerSelect = (props) => {
         props.onChange(id, date, property);
     };
     return readOnly ? (React.createElement(InputFieldComponent, Object.assign({}, Object.assign(Object.assign({}, props), { defaultValue: asMonthDayYearFormat(value) })))) : (React.createElement(LocalizationProvider, null,
-        React.createElement(DatePicker, { value: value, onChange: handleChange, inputFormat: "MM/dd/yyyy", renderInput: (params) => (React.createElement(TextField, Object.assign({}, params, { id: id, error: error, fullWidth: true, required: required, style: { background: 'white', borderRadius: '8px' }, size: size !== null && size !== void 0 ? size : 'medium' }))) })));
+        React.createElement(DatePicker, { value: value, onChange: handleChange, inputFormat: "MM/dd/yyyy", renderInput: (params) => (React.createElement(TextField, Object.assign({}, params, { id: id, error: error, errorMessage: errorMessage, fullWidth: true, required: required, style: { background: 'white', borderRadius: '8px' }, size: size !== null && size !== void 0 ? size : 'medium' }))) })));
 };
 export default DatePickerSelect;

package/dist/published/components/custom/FormField/FileUpload/FileUpload.js

@@ -5,7 +5,7 @@ import { Button, TextField } from '../../../core';
 const FileUploadControl = (props) => {
     var _a;
     const [uploadedFile, setUploadedFile] = useState(undefined);
-    const { property, required, error } = props;
+    const { property, required, error, errorMessage } = props;
     const id = property.id;
     const styles = {
         button: {
@@ -58,7 +58,7 @@ const FileUploadControl = (props) => {
     })),
         React.createElement(Grid, { item: true, flexGrow: 1 },
             React.createElement("input", Object.assign({ disabled: true }, getInputProps())),
-            React.createElement(TextField, { sx: { '& fieldset': { border: 'none' } }, fullWidth: true, value: (_a = uploadedFile === null || uploadedFile === void 0 ? void 0 : uploadedFile.name) !== null && _a !== void 0 ? _a : (isDragActive ? 'Drop your file here' : 'File'), error: error, required: required })),
+            React.createElement(TextField, { sx: { '& fieldset': { border: 'none' } }, fullWidth: true, value: (_a = uploadedFile === null || uploadedFile === void 0 ? void 0 : uploadedFile.name) !== null && _a !== void 0 ? _a : (isDragActive ? 'Drop your file here' : 'File'), error: error, errorMessage: errorMessage, required: required })),
         React.createElement(Grid, { item: true },
             React.createElement(Button, { sx: Object.assign(Object.assign({}, styles.button), styles.selectFileBtn), onClick: () => handleSelectFile() }, uploadedFile ? 'Remove' : 'Select File'))));
 };

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

@@ -3,6 +3,7 @@ export declare type FormFieldProps = {
     onChange: Function;
     defaultValue?: unknown;
     error?: boolean;
+    errorMessage?: string;
     required?: boolean;
     readOnly?: boolean;
     selectOptions?: Array<string>;

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

@@ -5,7 +5,7 @@ import FileUploadControl from './FileUpload/FileUpload';
 import InputFieldComponent from './InputFieldComponent/InputFieldComponent';
 import Select from './Select/Select';
 const FormField = (props) => {
-    const { defaultValue, error, onChange, property, readOnly, selectOptions, required, size, placeholder } = props;
+    const { defaultValue, error, onChange, property, readOnly, selectOptions, required, size, placeholder, errorMessage } = props;
     const id = property.id;
     let control;
     const commonProps = {
@@ -13,6 +13,7 @@ const FormField = (props) => {
         property,
         onChange,
         error,
+        errorMessage,
         readOnly,
         defaultValue,
         selectOptions,

package/dist/published/components/custom/FormField/InputFieldComponent/InputFieldComponent.js

@@ -26,7 +26,7 @@ const NumericFormat = (props) => {
 };
 const InputFieldComponent = (props) => {
     var _a;
-    const { property, defaultValue, error, readOnly, required, size, placeholder } = props;
+    const { property, defaultValue, error, errorMessage, readOnly, required, size, placeholder } = props;
     const [value, setValue] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : '');
     const [inputValue, setInputValue] = useState('');
     const id = property.id;
@@ -59,7 +59,7 @@ const InputFieldComponent = (props) => {
         //widgets had it like this, as strings w/isOptionEqualToValue
         selectOptions.push(value);
     }
-    return property.enum && !readOnly ? (React.createElement(Autocomplete, { id: id, options: selectOptions, onChange: handleSelectChange, renderInput: (params) => (React.createElement(TextField, Object.assign({}, params, { value: value, error: error, fullWidth: true, size: size !== null && size !== void 0 ? size : 'medium', placeholder: placeholder }))), disableClearable: true, value: value, isOptionEqualToValue: (option, value) => {
+    return property.enum && !readOnly ? (React.createElement(Autocomplete, { id: id, options: selectOptions, onChange: handleSelectChange, renderInput: (params) => (React.createElement(TextField, Object.assign({}, params, { value: value, error: error, errorMessage: errorMessage, fullWidth: true, size: size !== null && size !== void 0 ? size : 'medium', placeholder: placeholder }))), disableClearable: true, value: value, isOptionEqualToValue: (option, value) => {
             return option.value === value;
         }, error: error, required: required, inputValue: inputValue !== null && inputValue !== void 0 ? inputValue : '', onInputChange: handleInputValueChange })) : (React.createElement(TextField, { id: id, sx: readOnly
             ? {
@@ -71,6 +71,6 @@ const InputFieldComponent = (props) => {
                     backgroundColor: '#f4f6f8',
                 },
             }
-            : undefined, error: error, value: value, onChange: !readOnly ? handleChange : undefined, InputProps: Object.assign(Object.assign({}, InputProps), { readOnly: readOnly }), required: required, fullWidth: true, placeholder: placeholder, style: { background: 'white', borderRadius: '8px' }, size: size !== null && size !== void 0 ? size : 'medium', type: property.type === 'integer' ? 'number' : 'text' }));
+            : undefined, error: error, errorMessage: errorMessage, value: value, onChange: !readOnly ? handleChange : undefined, InputProps: Object.assign(Object.assign({}, InputProps), { readOnly: readOnly }), required: required, fullWidth: true, placeholder: placeholder, style: { background: 'white', borderRadius: '8px' }, size: size !== null && size !== void 0 ? size : 'medium', type: property.type === 'integer' ? 'number' : 'text', multiline: property.type === 'string' && !!readOnly }));
 };
 export default InputFieldComponent;

package/dist/published/components/custom/FormField/Select/Select.js

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { Autocomplete, TextField } from '../../../core';
 import InputFieldComponent from '../InputFieldComponent/InputFieldComponent';
 const Select = (props) => {
-    const { property, defaultValue, error, readOnly, selectOptions, required, size } = props;
+    const { property, defaultValue, error, errorMessage, readOnly, selectOptions, required, size } = props;
     const [value, setValue] = useState(defaultValue);
     const [inputValue, setInputValue] = useState('');
     useEffect(() => {
@@ -27,6 +27,6 @@ const Select = (props) => {
             setInputValue(selectValue);
         }
     };
-    return readOnly ? (React.createElement(InputFieldComponent, Object.assign({}, props))) : (React.createElement(Autocomplete, { multiple: (property === null || property === void 0 ? void 0 : property.type) === 'array' ? true : false, id: id, renderInput: (params) => React.createElement(TextField, Object.assign({}, params, { value: value, fullWidth: true })), value: value, onChange: handleChange, options: (property === null || property === void 0 ? void 0 : property.type) === 'array' ? property === null || property === void 0 ? void 0 : property.enum : selectOptions, disableClearable: true, inputValue: inputValue !== null && inputValue !== void 0 ? inputValue : '', error: error, required: required, onInputChange: handleInputValueChange, filterOptions: (option) => { var _a; return (property === null || property === void 0 ? void 0 : property.type) === 'array' ? (_a = property === null || property === void 0 ? void 0 : property.enum) === null || _a === void 0 ? void 0 : _a.filter((item) => item !== option.value) : option; }, size: size }));
+    return readOnly ? (React.createElement(InputFieldComponent, Object.assign({}, props))) : (React.createElement(Autocomplete, { multiple: (property === null || property === void 0 ? void 0 : property.type) === 'array' ? true : false, id: id, renderInput: (params) => React.createElement(TextField, Object.assign({}, params, { value: value, fullWidth: true })), value: value, onChange: handleChange, options: (property === null || property === void 0 ? void 0 : property.type) === 'array' ? property === null || property === void 0 ? void 0 : property.enum : selectOptions, disableClearable: true, inputValue: inputValue !== null && inputValue !== void 0 ? inputValue : '', error: error, errorMessage: errorMessage, required: required, onInputChange: handleInputValueChange, filterOptions: (option) => { var _a; return (property === null || property === void 0 ? void 0 : property.type) === 'array' ? (_a = property === null || property === void 0 ? void 0 : property.enum) === null || _a === void 0 ? void 0 : _a.filter((item) => item !== option.value) : option; }, size: size }));
 };
 export default Select;

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

@@ -12,13 +12,13 @@ const styles = {
             display: 'none',
         },
         '& .Mui-expanded': {
-            borderRadius: '8px 8px 0 0'
-        }
+            borderRadius: '8px 8px 0 0',
+        },
     },
     accordionSummary: {
         background: '#F4F6F8',
         borderRadius: '8px',
-        maxHeight: '30px'
+        maxHeight: '30px',
     },
     accordionDetails: {
         display: 'flex',
@@ -91,20 +91,28 @@ export default function RepeatableField(props) {
     const handleAddSelectedField = () => {
         createInitialStateForFields(selectedField.length);
     };
+    const displayHeaders = (index) => {
+        var _a;
+        if (dynamicHeaders === null || dynamicHeaders === void 0 ? void 0 : dynamicHeaders.displayTitle) {
+            if (dynamicHeaders === null || dynamicHeaders === void 0 ? void 0 : dynamicHeaders.mapping) {
+                return (_a = selectedField[index][dynamicHeaders === null || dynamicHeaders === void 0 ? void 0 : dynamicHeaders.field]) === null || _a === void 0 ? void 0 : _a[`${dynamicHeaders.mapping}`];
+            }
+            else {
+                return selectedField[index][dynamicHeaders === null || dynamicHeaders === void 0 ? void 0 : dynamicHeaders.field] || dynamicHeaders.displayTitle;
+            }
+        }
+        return `Item ${index + 1}`;
+    };
     return (React.createElement(UIThemeProvider, null,
         React.createElement("div", null, selectedField === null || selectedField === void 0 ? void 0 :
-            selectedField.map((field, index) => {
-                var _a;
-                return (React.createElement(Accordion, { key: index, elevation: 0, sx: styles.accordion },
-                    React.createElement(AccordionSummary, { expandIcon: React.createElement(ExpandMoreIcon, null), "aria-controls": "panel1a-content", id: "panel1a-header", sx: styles.accordionSummary, color: '#F4F6F8' },
-                        React.createElement(Typography, { sx: { padding: '4px' } }, (dynamicHeaders === null || dynamicHeaders === void 0 ? void 0 : dynamicHeaders.displayTitle) ? (((_a = selectedField[index][dynamicHeaders === null || dynamicHeaders === void 0 ? void 0 : dynamicHeaders.field]) === null || _a === void 0 ? void 0 : _a['value']) ||
-                            dynamicHeaders.displayTitle) : `Item ${index + 1}`)),
-                    React.createElement(AccordionDetails, { sx: styles.accordionDetails },
-                        React.createElement(React.Fragment, null, children(handler, index, selectedField)),
-                        React.createElement(Button, { variant: "outlined", color: "error", size: "small", sx: { margin: '15px 0 0 0', borderRadius: '8px', width: 'max-content' }, onClick: () => handleRemoveSelectField(index) },
-                            "Delete ",
-                            (dynamicHeaders === null || dynamicHeaders === void 0 ? void 0 : dynamicHeaders.displayTitle) || 'Item'))));
-            }),
+            selectedField.map((field, index) => (React.createElement(Accordion, { key: index, elevation: 0, sx: styles.accordion },
+                React.createElement(AccordionSummary, { expandIcon: React.createElement(ExpandMoreIcon, null), "aria-controls": "panel1a-content", id: "panel1a-header", sx: styles.accordionSummary, color: '#F4F6F8' },
+                    React.createElement(Typography, { sx: { padding: '4px' } }, displayHeaders(index))),
+                React.createElement(AccordionDetails, { sx: styles.accordionDetails },
+                    React.createElement(React.Fragment, null, children(handler, index, selectedField)),
+                    React.createElement(Button, { variant: "outlined", color: "error", size: "small", sx: { margin: '15px 0 0 0', borderRadius: '8px', width: 'max-content' }, onClick: () => handleRemoveSelectField(index) },
+                        "Delete ",
+                        (dynamicHeaders === null || dynamicHeaders === void 0 ? void 0 : dynamicHeaders.displayTitle) || 'Item'))))),
             React.createElement(Button, { variant: "outlined", color: "primary", size: "large", startIcon: React.createElement(AddIcon, null), fullWidth: true, sx: { margin: '15px 0px', borderRadius: '8px' }, onClick: () => handleAddSelectedField() },
                 "Add ",
                 (dynamicHeaders === null || dynamicHeaders === void 0 ? void 0 : dynamicHeaders.displayTitle) || 'Item'))));

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

@@ -5,6 +5,7 @@ declare const _default: ComponentMeta<(props: {
     setCriteria: Function;
     criteria?: Record<string, any> | undefined;
     enablePresetValues?: boolean | undefined;
+    operators?: ("endsWith" | "in" | "=" | "=!" | "<" | ">" | "<=" | ">=" | "contains" | "beginsWith" | "doesNotContain" | "doesNotBeginWith" | "doesNotEndWith" | "null" | "notNull" | "notIn" | "between" | "notBetween")[] | undefined;
 }) => JSX.Element>;
 export default _default;
 export declare const CriteriaBuilder: ComponentStory<(props: {
@@ -12,10 +13,12 @@ export declare const CriteriaBuilder: ComponentStory<(props: {
     setCriteria: Function;
     criteria?: Record<string, any> | undefined;
     enablePresetValues?: boolean | undefined;
+    operators?: ("endsWith" | "in" | "=" | "=!" | "<" | ">" | "<=" | ">=" | "contains" | "beginsWith" | "doesNotContain" | "doesNotBeginWith" | "doesNotEndWith" | "null" | "notNull" | "notIn" | "between" | "notBetween")[] | undefined;
 }) => JSX.Element>;
 export declare const CriteriaBuilderPresetValues: ComponentStory<(props: {
     properties: import("../components/custom/CriteriaBuilder/CriteriaBuilder").ObjectProperty[];
     setCriteria: Function;
     criteria?: Record<string, any> | undefined;
     enablePresetValues?: boolean | undefined;
+    operators?: ("endsWith" | "in" | "=" | "=!" | "<" | ">" | "<=" | ">=" | "contains" | "beginsWith" | "doesNotContain" | "doesNotBeginWith" | "doesNotEndWith" | "null" | "notNull" | "notIn" | "between" | "notBetween")[] | undefined;
 }) => JSX.Element>;

package/dist/published/stories/RepeatableField.stories.js

@@ -8,7 +8,7 @@ const Template = (props) => {
     const dynamicHeaders = {
         field: 'movies',
         displayTitle: 'Condition',
-        mapping: '$.value',
+        mapping: 'value',
     };
     const top100Films = [
         { label: 'The Shawshank Redemption', value: 'The Shawshank Redemption' },
@@ -20,8 +20,8 @@ const Template = (props) => {
         { label: 'Pulp Fiction', value: 'Pulp Fiction' },
     ];
     const defaultValues = {
-        textField: 'Some defaults',
-        checkbox: false
+        textField: 'Default text',
+        checkbox: false,
     };
     return (React.createElement(CustomRepeatableField, Object.assign({}, props, { dynamicHeaders: dynamicHeaders }), (handler, index, selectedField) => {
         var _a, _b, _c;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.0.0-dev.1.10.6",
+    "version": "1.0.0-dev.1.10.8",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",
@@ -20,7 +20,7 @@
         "format": "prettier --write ."
     },
     "author": "",
-    "license": "UNLICENSED",
+    "license": "MIT",
     "devDependencies": {
         "@babel/core": "^7.18.2",
         "@babel/preset-env": "^7.18.6",