@evoke-platform/ui-components 1.0.0-dev.202 → 1.0.0-dev.204

package/dist/published/components/core/Autocomplete/Autocomplete.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { AutocompleteProps as MUIAutocompleteProps } from '@mui/material';
+import * as React from 'react';
 export declare type AutocompleteOption = {
     label: string;
     value: unknown;
@@ -11,9 +11,10 @@ export declare type AutocompleteProps = MUIAutocompleteProps<AutocompleteOption
     label?: string;
     labelPlacement?: string;
     required?: boolean;
-    instructionText?: string;
+    instructionText?: string | React.ReactNode;
     error?: boolean;
     errorMessage?: string;
+    tooltip?: string;
 };
 declare const Autocomplete: (props: AutocompleteProps) => JSX.Element;
 export default Autocomplete;

package/dist/published/components/core/Autocomplete/Autocomplete.js

@@ -1,9 +1,10 @@
-import { ExpandMore } from '@mui/icons-material';
+import { ExpandMore, InfoRounded } from '@mui/icons-material';
 import { InputLabel, Autocomplete as MUIAutocomplete } from '@mui/material';
 import * as React from 'react';
 import UIThemeProvider from '../../../theme';
 import FieldError from '../FieldError';
 import Typography from '../Typography';
+import Tooltip from '../Tooltip';
 const Autocomplete = (props) => {
     var _a, _b, _c, _d;
     const sortedOptions = props.sortBy !== 'NONE'
@@ -26,12 +27,26 @@ const Autocomplete = (props) => {
             sortedOptions === null || sortedOptions === void 0 ? void 0 : sortedOptions.sort((a, b) => a.label.localeCompare(b.label));
             break;
     }
+    const renderInstructionText = () => {
+        if (typeof props.instructionText === 'string') {
+            return (React.createElement(Typography, { fontSize: '12px', lineHeight: '14px' }, props.instructionText));
+        }
+        else {
+            return props.instructionText;
+        }
+    };
     if (!!props.label && props.labelPlacement === 'outside-top') {
         return (React.createElement(UIThemeProvider, null,
-            React.createElement(InputLabel, { htmlFor: (_a = props.id) !== null && _a !== void 0 ? _a : '', sx: { paddingBottom: '0px', fontSize: '14px' } }, (_b = props.label) !== null && _b !== void 0 ? _b : '',
+            React.createElement(InputLabel, { htmlFor: (_a = props.id) !== null && _a !== void 0 ? _a : '', sx: { display: 'flex', paddingBottom: '0px', fontSize: '14px' } }, (_b = props.label) !== null && _b !== void 0 ? _b : '',
                 ' ',
-                props.required ? (React.createElement(Typography, { sx: { color: 'red', fontSize: '14px' }, component: 'span' }, "*")) : null),
-            props.instructionText && (React.createElement(Typography, { fontSize: '10px', lineHeight: '14px' }, props.instructionText)),
+                props.required ? (React.createElement(Typography, { sx: { color: 'red', fontSize: '14px' }, component: 'span' }, "*")) : null,
+                props.tooltip && (React.createElement(Tooltip, { title: props.tooltip, placement: "right" },
+                    React.createElement(InfoRounded, { sx: {
+                            fontSize: '14px',
+                            margin: '2px 4px 0 8px',
+                            color: (theme) => theme.palette.text.secondary,
+                        } })))),
+            renderInstructionText(),
             React.createElement(MUIAutocomplete, Object.assign({}, props, { sx: Object.assign({ '& fieldset': { borderRadius: '8px', borderColor: props.error ? 'red' : undefined }, '& .MuiOutlinedInput-notchedOutline': {
                         border: props.readOnly ? 'none' : 'auto',
                     }, '& .MuiInputBase-input.Mui-disabled': {

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { GridSize } from '@mui/material';
+export declare type ErrorComponentProps = {
+    code?: 'AccessDenied' | 'NotFound' | 'Misconfigured';
+    message?: string;
+    colspan?: GridSize;
+    styles?: React.CSSProperties;
+};
+export default function ErrorComponent(props: ErrorComponentProps): JSX.Element;

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

@@ -0,0 +1,59 @@
+import React from 'react';
+import { Box, Typography, Grid } from '@mui/material';
+import { LockRounded, ErrorRounded, WarningRounded, BuildRounded } from '@mui/icons-material';
+export default function ErrorComponent(props) {
+    const { code, message, colspan, styles } = props;
+    const getTitle = () => {
+        switch (code) {
+            case 'AccessDenied':
+                return 'Access Denied';
+            case 'NotFound':
+                return 'Not Found';
+            case 'Misconfigured':
+                return 'Configuration Error';
+            default:
+                return 'Hmm. Something went wrong.';
+        }
+    };
+    const getSubtitle = () => {
+        if (message)
+            return message;
+        switch (code) {
+            case 'AccessDenied':
+                return 'You do not have permission to view this content.';
+            case 'NotFound':
+                return 'The requested content could not be found.';
+            case 'Misconfigured':
+                return `It looks like something is missing.`;
+            default:
+                return 'There was an error while loading.';
+        }
+    };
+    const getIcon = () => {
+        switch (code) {
+            case 'AccessDenied':
+                return React.createElement(LockRounded, { sx: { color: '#0075A7' } });
+            case 'NotFound':
+                return React.createElement(ErrorRounded, { sx: { color: '#A12723' } });
+            case 'Misconfigured':
+                return React.createElement(BuildRounded, { sx: { color: '#ef8228' } });
+            default:
+                return React.createElement(WarningRounded, { sx: { color: '#ef8228' } });
+        }
+    };
+    return (React.createElement(Grid, { item: true, xs: colspan !== null && colspan !== void 0 ? colspan : 12, sm: 12, sx: Object.assign({ background: 'white', display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column', boxShadow: '0px 8px 16px 0px rgba(145, 158, 171, 0.12)', borderRadius: '6px', height: 200 }, styles) },
+        React.createElement(Box, { sx: {
+                padding: '8px',
+                height: '36px',
+                width: '36px',
+                borderRadius: '8px',
+                backgroundColor: '#F9FAFB',
+                boxShadow: '0px 1px 2px 0px rgba(0, 0, 0, 0.12)',
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                marginBottom: '16px',
+            } }, getIcon()),
+        React.createElement(Typography, { sx: { fontWeight: 700, fontSize: '18px' } }, getTitle()),
+        React.createElement(Typography, { sx: { marginTop: '4px' } }, getSubtitle())));
+}

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

@@ -0,0 +1,3 @@
+import ErrorComponent from './ErrorComponent';
+export { ErrorComponent };
+export default ErrorComponent;

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

@@ -0,0 +1,3 @@
+import ErrorComponent from './ErrorComponent';
+export { ErrorComponent };
+export default ErrorComponent;

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

@@ -1,6 +1,7 @@
 export { BuilderGrid } from './BuilderGrid';
 export { CriteriaBuilder } from './CriteriaBuilder';
 export { DataGrid } from './DataGrid';
+export { ErrorComponent } from './ErrorComponent';
 export { FormField } from './FormField';
 export { MenuBar } from './Menubar';
 export { MultiSelect } from './MultiSelect';

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

@@ -1,6 +1,7 @@
 export { BuilderGrid } from './BuilderGrid';
 export { CriteriaBuilder } from './CriteriaBuilder';
 export { DataGrid } from './DataGrid';
+export { ErrorComponent } from './ErrorComponent';
 export { FormField } from './FormField';
 export { MenuBar } from './Menubar';
 export { MultiSelect } from './MultiSelect';

package/dist/published/index.d.ts

@@ -1,7 +1,7 @@
 export { ClickAwayListener, Toolbar, createTheme, styled } from '@mui/material';
 export { CalendarPicker, DateTimePicker, MonthPicker, PickersDay, StaticDateTimePicker, StaticTimePicker, TimePicker, YearPicker, } from '@mui/x-date-pickers';
 export * from './components/core';
-export { BuilderGrid, CriteriaBuilder, DataGrid, FormField, MenuBar, MultiSelect, RepeatableField, UserAvatar, } from './components/custom';
+export { BuilderGrid, CriteriaBuilder, DataGrid, ErrorComponent, FormField, MenuBar, MultiSelect, RepeatableField, UserAvatar, } from './components/custom';
 export { Box, Container, Grid, Stack } from './components/layout';
 export * from './util';
 export * as EVOKE_TYPES from './types';

package/dist/published/index.js

@@ -1,7 +1,7 @@
 export { ClickAwayListener, Toolbar, createTheme, styled } from '@mui/material';
 export { CalendarPicker, DateTimePicker, MonthPicker, PickersDay, StaticDateTimePicker, StaticTimePicker, TimePicker, YearPicker, } from '@mui/x-date-pickers';
 export * from './components/core';
-export { BuilderGrid, CriteriaBuilder, DataGrid, FormField, MenuBar, MultiSelect, RepeatableField, UserAvatar, } from './components/custom';
+export { BuilderGrid, CriteriaBuilder, DataGrid, ErrorComponent, FormField, MenuBar, MultiSelect, RepeatableField, UserAvatar, } from './components/custom';
 export { Box, Container, Grid, Stack } from './components/layout';
 export * from './util';
 export * as EVOKE_TYPES from './types';

package/dist/published/types.d.ts

@@ -36,6 +36,10 @@ export declare type RichTextTemplate = {
         view_permission?: 'Private' | 'Portal' | 'Public';
     };
     additionalDatasources?: string[];
+    sort?: {
+        sortBy: string;
+        direction: 'asc' | 'desc' | 'ASC' | 'DESC';
+    };
 };
 export declare type App = {
     id: string;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.0.0-dev.202",
+    "version": "1.0.0-dev.204",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",