@evoke-platform/ui-components 1.0.0-dev.218 → 1.0.0-dev.220

package/dist/published/components/custom/Form/Common/Form.d.ts

@@ -1,7 +1,8 @@
+/// <reference types="react" />
 import { ApiServices, Obj, ObjectInstance, UserAccount } from '@evoke-platform/context';
-import { ReactNode } from 'react';
-import { Document, ObjectPropertyInputProps } from '../types';
+import { ReactComponent } from '@formio/react';
 import '../../../../styles/form-component.css';
+import { Document, ObjectPropertyInputProps } from '../types';
 declare type OnSaveResponse = {
     isSuccessful: boolean;
     error?: Record<string, unknown>;
@@ -32,7 +33,7 @@ export declare type FormProps = {
     };
     queryAddresses?: unknown;
     fieldHeight?: 'small' | 'medium';
-    richTextEditor?: ReactNode;
+    richTextEditor?: typeof ReactComponent;
 };
 export declare function Form(props: FormProps): JSX.Element;
 export default Form;

package/dist/published/components/custom/Form/Common/Form.js

@@ -12,11 +12,11 @@ import { Components, Form as FormIO } from '@formio/react';
 import { flatten } from 'flat';
 import { isEqual, toPairs } from 'lodash';
 import React, { useEffect, useRef, useState } from 'react';
+import '../../../../styles/form-component.css';
 import { Skeleton, Snackbar } from '../../../core';
 import { Box } from '../../../layout';
 import { ButtonComponent, DocumentComponent, FormFieldComponent, ImageComponent, ObjectComponent, RepeatableFieldComponent, UserComponent, ViewOnlyComponent, } from '../FormComponents';
 import { addObjectPropertiesToComponentProps, buildComponentPropsFromDocumentProperties, buildComponentPropsFromObjectProperties, convertFormToComponents, getFlattenEntries, getPrefixedUrl, } from '../utils';
-import '../../../../styles/form-component.css';
 const usePrevious = (value) => {
     const ref = useRef();
     useEffect(() => {

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

@@ -320,10 +320,10 @@ export class FormFieldComponent extends ReactComponent {
                 delete this.errorDetails['time'];
             }
         }
-        if (validate.min || validate.max) {
+        if (!isNil(validate.min) || !isNil(validate.max)) {
             if (!isNil(value) &&
                 value !== '' &&
-                ((validate.min && value < validate.min) || (validate.max && value > validate.max))) {
+                ((!isNil(validate.min) && value < validate.min) || (!isNil(validate.max) && value > validate.max))) {
                 this.errorDetails['min-max'] = validate.customMessage;
             }
             else {

package/dist/published/components/custom/HistoryLog/DisplayedProperty.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { ObjectProperty } from '../../../types';
+declare type DisplayedPropertyProps = {
+    property: ObjectProperty;
+    value: unknown;
+};
+declare const DisplayedProperty: (props: DisplayedPropertyProps) => JSX.Element;
+export default DisplayedProperty;

package/dist/published/components/custom/HistoryLog/DisplayedProperty.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import { Grid } from '../../layout';
+import { CardMedia, Typography } from '../../core';
+import { DateTime } from 'luxon';
+import { RichTextViewer } from '../RichTextViewer';
+const DisplayedProperty = (props) => {
+    const { property, value } = props;
+    const getAddressAsString = (address) => {
+        let stringAddress = '';
+        if (address === null || address === void 0 ? void 0 : address.line1)
+            stringAddress = stringAddress.concat(address.line1);
+        if (address === null || address === void 0 ? void 0 : address.line2)
+            stringAddress = stringAddress ? stringAddress.concat(' ' + address.line2) : address.line2;
+        if (address === null || address === void 0 ? void 0 : address.city)
+            stringAddress = stringAddress ? stringAddress.concat(', ' + address.city) : address.city;
+        if (address === null || address === void 0 ? void 0 : address.county)
+            stringAddress = stringAddress ? stringAddress.concat(', ' + address.county) : address.county;
+        if (address === null || address === void 0 ? void 0 : address.state)
+            stringAddress = stringAddress ? stringAddress.concat(', ' + address.state) : address.state;
+        if (address === null || address === void 0 ? void 0 : address.zipCode)
+            stringAddress = stringAddress ? stringAddress.concat(' ' + address.zipCode) : address.zipCode;
+        return stringAddress;
+    };
+    const formatData = (property, value) => {
+        var _a, _b;
+        if (property === null || property === void 0 ? void 0 : property.objectId) {
+            return (_a = value === null || value === void 0 ? void 0 : value.name) !== null && _a !== void 0 ? _a : value === null || value === void 0 ? void 0 : value.id;
+        }
+        switch (property === null || property === void 0 ? void 0 : property.type) {
+            case 'string':
+            case 'boolean':
+            case 'number':
+            case 'integer':
+                return value === null || value === void 0 ? void 0 : value.toString();
+            case 'array':
+                return value === null || value === void 0 ? void 0 : value.toString().replaceAll(',', ', ');
+            case 'address':
+                return getAddressAsString(value);
+            case 'user':
+                return (_b = value === null || value === void 0 ? void 0 : value.name) !== null && _b !== void 0 ? _b : value === null || value === void 0 ? void 0 : value.id;
+            case 'time':
+                return value
+                    ? DateTime.fromISO(DateTime.now().toISODate() + 'T' + value).toFormat('hh:mm a')
+                    : undefined;
+            case 'date':
+                return value ? DateTime.fromISO(value).toFormat('MM/dd/yyyy') : undefined;
+            case 'date-time':
+                return value ? DateTime.fromISO(value).toFormat('MM/dd/yyyy hh:mm a') : undefined;
+            case 'document':
+                return value && Array.isArray(value) ? value.map((v) => v.name).join(', ') : undefined;
+        }
+        return value;
+    };
+    return (React.createElement(Grid, { item: true, xs: 4.75 }, property.type === 'image' && value ? (React.createElement(CardMedia, { component: "img", image: value, sx: {
+            borderRadius: '8px',
+            width: 'fit-content',
+            maxWidth: '100%',
+            maxHeight: '80px',
+            margin: '10px',
+            position: 'relative',
+            display: 'inline-block',
+            objectFit: 'contain',
+        } })) : property.type === 'richText' && typeof value === 'string' ? (React.createElement(RichTextViewer, { value: value })) : (React.createElement(Typography, { sx: {
+            fontSize: '12px',
+            padding: '0px 8px',
+            overflowWrap: 'break-word',
+            alignSelf: 'flex-start',
+        } }, value ? formatData(property, value) : 'None'))));
+};
+export default DisplayedProperty;

package/dist/published/components/custom/HistoryLog/Filter.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { EvokeObject } from '../../../types';
+declare type HistoryFilterProps = {
+    filter: string[];
+    setFilter: (filter: string[]) => void;
+    object: EvokeObject;
+    order?: 'desc' | 'asc';
+    setOrder: (order: 'desc' | 'asc') => void;
+};
+declare const HistoryFilter: (props: HistoryFilterProps) => JSX.Element;
+export default HistoryFilter;

package/dist/published/components/custom/HistoryLog/Filter.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Box } from '../../layout';
+import { Button, Checkbox, MenuItem, Select, Typography } from '../../core';
+import { SwapVert } from '@mui/icons-material';
+import { isArray, startCase } from 'lodash';
+const HistoryFilter = (props) => {
+    const { order, setOrder, filter, setFilter, object } = props;
+    return (React.createElement(Box, { sx: { display: 'flex', width: '100%' } },
+        React.createElement(Select, { size: 'small', renderValue: (selected) => {
+                if (isArray(selected) && selected.length) {
+                    const selectedValues = selected.map((s) => s === object.name || s === 'instance' ? object.name : s);
+                    return `Type: ${selectedValues
+                        .map((s) => {
+                        return s === object.name || s === 'instance' ? object.name : startCase(s + 's');
+                    })
+                        .join(', ')}`;
+                }
+                return 'Type: All';
+            }, displayEmpty: true, value: filter, sx: {
+                width: '100%',
+                borderRadius: '8px',
+                margin: '0 4px 16px 0',
+                maxWidth: '400px',
+                '@media (min-width: 600px)': { width: '72%' },
+            }, MenuProps: {
+                PaperProps: {
+                    sx: {
+                        boxShadow: '0px 24px 48px 0px rgba(145, 158, 171, 0.35)',
+                        borderRadius: '12px',
+                    },
+                },
+            } },
+            React.createElement(MenuItem, { sx: { borderBottom: '1px solid rgba(145, 158, 171, 0.24)' }, onClick: () => setFilter([]), disabled: !filter.length },
+                React.createElement(Typography, { fontSize: '14px', color: filter.length ? 'primary' : '#919EAB', sx: { marginLeft: '6px' } }, "Clear Selected Items")),
+            ['instance', 'document', 'correspondence'].map((option) => (React.createElement(MenuItem, { key: option, onClick: () => {
+                    filter.includes(option)
+                        ? setFilter(filter.filter((o) => o !== option))
+                        : setFilter(filter.concat([option]));
+                } },
+                React.createElement(Checkbox, { sx: { padding: '3px', marginRight: '5px' }, checked: filter.includes(option) }),
+                React.createElement(Typography, { fontSize: '14px' }, option === 'instance' ? object.name : startCase(option + 's')))))),
+        React.createElement(Button, { variant: "outlined", color: 'inherit', sx: {
+                width: '100%',
+                maxHeight: '40px',
+                border: '1px solid #cbcbcb',
+                maxWidth: '135px',
+                '@media (min-width: 600px)': {
+                    width: '27%',
+                },
+            }, onClick: () => (order === 'asc' ? setOrder('desc') : setOrder('asc')) },
+            React.createElement(Box, { display: 'flex', alignItems: 'center' },
+                React.createElement(SwapVert, { sx: { color: 'black', fontSize: '20px', marginRight: '4px' } }),
+                React.createElement(Typography, { fontWeight: 700, fontSize: '13px' }, order === 'asc' ? 'Newest First' : 'Oldest First')))));
+};
+export default HistoryFilter;

package/dist/published/components/custom/HistoryLog/HistoryData.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { EvokeObject, History } from '../../../types';
+export declare const nanoid: (size?: number | undefined) => string;
+declare type HistoryDataProps = {
+    records: History[];
+    documentHistory?: Record<string, History[]>;
+    object: EvokeObject;
+};
+declare const HistoricalData: (props: HistoryDataProps) => JSX.Element;
+export default HistoricalData;

package/dist/published/components/custom/HistoryLog/HistoryData.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import { Box, Grid } from '../../layout';
+import { Typography } from '../../core';
+import { ArrowForward } from '@mui/icons-material';
+import { customAlphabet } from 'nanoid';
+import { lowercase, uppercase } from 'nanoid-dictionary';
+import { lowerCase } from 'lodash';
+import DisplayedProperty from './DisplayedProperty';
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const { format } = require('small-date');
+export const nanoid = customAlphabet(uppercase + lowercase);
+const styles = {
+    timelineHeader: {
+        fontWeight: 600,
+        fontSize: '16px',
+    },
+    timelineItemHeader: {
+        fontSize: '12px',
+        color: '#637381',
+    },
+    timelineConnector: {
+        padding: '1px 0px 24px 22px',
+        borderLeft: '2px rgba(145, 158, 171, 0.24) solid',
+        marginLeft: '5px',
+    },
+    historyData: {
+        fontSize: '12px',
+        padding: '0px 8px',
+        overflowWrap: 'break-word',
+    },
+};
+const HistoricalData = (props) => {
+    const { records, documentHistory, object } = props;
+    const getPastDocumentVersion = (history) => {
+        var _a, _b, _c;
+        const documentVersions = (_c = documentHistory === null || documentHistory === void 0 ? void 0 : documentHistory[(_b = (_a = history.subject) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : 'unknown']) !== null && _c !== void 0 ? _c : [];
+        const currentVersion = documentVersions === null || documentVersions === void 0 ? void 0 : documentVersions.map((v) => v.timestamp).indexOf(history.timestamp);
+        return currentVersion ? documentVersions[currentVersion - 1] : undefined;
+    };
+    return (React.createElement(Box, { sx: styles.timelineConnector }, records.map((r) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        return (React.createElement(Box, { margin: '16px 0px', key: `${r.timestamp}-${nanoid()}` },
+            React.createElement(Box, { sx: { display: 'flex', justifyContent: 'space-between' } },
+                React.createElement(Box, { sx: { display: 'flex', maxWidth: '60%', alignContent: 'flex-start' } },
+                    React.createElement(Typography, { sx: { fontSize: '12px', color: '#637381' } },
+                        React.createElement(Typography, { component: 'span', sx: { fontWeight: 600, fontSize: '12px' } }, (_a = r.user.name) !== null && _a !== void 0 ? _a : 'Unknown User'),
+                        "\u00A0",
+                        ['document', 'correspondence'].includes(r.type) ? lowerCase(r.event) : `- ${r.event}`)),
+                React.createElement(Box, null,
+                    React.createElement(Typography, { sx: { fontSize: '12px', color: '#637381' } }, new Date(r.timestamp).getHours() === 12
+                        ? format(new Date(r.timestamp), 'MMM dd, yyyy H:mm a')
+                        : format(new Date(r.timestamp), 'MMM dd, yyyy h:mm a')))),
+            ((r.data && r.eventType !== 'create' && r.type === 'instance') ||
+                ['document', 'correspondence'].includes(r.type)) && (React.createElement(Box, { sx: {
+                    backgroundColor: '#F4F6F8',
+                    borderRadius: '4px',
+                    paddingTop: ((_b = r.data) === null || _b === void 0 ? void 0 : _b.length) ? '4px' : '0px',
+                    paddingBottom: ((_c = r.data) === null || _c === void 0 ? void 0 : _c.length) ? '4px' : '0px',
+                } },
+                r.type === 'instance' && r.data && (React.createElement(Box, null, r.data.map((d) => {
+                    var _a;
+                    const property = (_a = object.properties) === null || _a === void 0 ? void 0 : _a.find((p) => p.id === d.property);
+                    return (property && (React.createElement(Grid, { container: true, key: property.id, display: "flex", gridTemplateColumns: 'fit-content(25%) fit-content(80%) fit-content(2%) fit-content(80%)', alignItems: "flex-start", justifyContent: "center", sx: {
+                            overflowWrap: 'break-word',
+                        } },
+                        React.createElement(Grid, { item: true, xs: 2 },
+                            React.createElement(Typography, { sx: Object.assign(Object.assign({}, styles.historyData), { fontWeight: 600, minWidth: 'fit-content', alignSelf: 'flex-start' }) }, property.name)),
+                        React.createElement(DisplayedProperty, { property: property, value: d.historicalValue }),
+                        React.createElement(Grid, { item: true, xs: 0.5 },
+                            React.createElement(ArrowForward, { sx: { fontSize: '12px' } })),
+                        React.createElement(DisplayedProperty, { property: property, value: d.updatedValue }))));
+                }))),
+                ['document', 'correspondence'].includes(r.type) && (React.createElement(Box, null,
+                    React.createElement(Box, { display: "grid", gridTemplateColumns: 'fit-content(100%) fit-content(2%) fit-content(100%)', alignItems: "center", sx: { overflowWrap: 'break-word' } },
+                        r.type === 'document' &&
+                            r.event === 'Uploaded Document Version' &&
+                            ((_d = r.subject) === null || _d === void 0 ? void 0 : _d.name) !== ((_f = (_e = getPastDocumentVersion(r)) === null || _e === void 0 ? void 0 : _e.subject) === null || _f === void 0 ? void 0 : _f.name) && (React.createElement(React.Fragment, null,
+                            React.createElement(Typography, { sx: styles.historyData }, (_h = (_g = getPastDocumentVersion(r)) === null || _g === void 0 ? void 0 : _g.subject) === null || _h === void 0 ? void 0 : _h.name),
+                            React.createElement(ArrowForward, { sx: { fontSize: '8px' } }))),
+                        React.createElement(Typography, { sx: Object.assign(Object.assign({}, styles.historyData), { fontWeight: 600, minWidth: 'fit-content' }) }, (_j = r.subject) === null || _j === void 0 ? void 0 : _j.name))))))));
+    })));
+};
+export default HistoricalData;

package/dist/published/components/custom/HistoryLog/HistoryLoading.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const HistoryLoading: () => JSX.Element;
+export default HistoryLoading;

package/dist/published/components/custom/HistoryLog/HistoryLoading.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Box } from '../../layout';
+import { Skeleton } from '../../core';
+import { Circle } from '@mui/icons-material';
+const styles = {
+    timelineConnector: {
+        padding: '1px 0px 5px 22px',
+        borderLeft: '2px rgba(145, 158, 171, 0.24) solid',
+        marginLeft: '5px',
+    },
+    headerSkeleton: {
+        height: '40px',
+        width: '210px',
+        borderRadius: '8px',
+    },
+    dataSkeleton: {
+        height: '25px',
+        borderRadius: '7px',
+    },
+};
+const HistoryLoading = () => {
+    return (React.createElement(React.Fragment, { key: 'history-log-loading' },
+        React.createElement(Box, { sx: { display: 'flex', alignItems: 'center' } },
+            React.createElement(Circle, { color: "primary", sx: { fontSize: '12px', marginRight: '12px' } }),
+            React.createElement(Skeleton, { variant: "text", sx: styles.headerSkeleton })),
+        React.createElement(Box, { sx: styles.timelineConnector },
+            React.createElement(Box, { margin: '4px 0px 24px 0px' },
+                React.createElement(Skeleton, { variant: "text", sx: Object.assign(Object.assign({}, styles.dataSkeleton), { width: '120px' }) }),
+                React.createElement(Skeleton, { variant: "text", sx: Object.assign(Object.assign({}, styles.dataSkeleton), { width: '65%' }) }),
+                React.createElement(Skeleton, { variant: "text", sx: Object.assign(Object.assign({}, styles.dataSkeleton), { width: '75%' }) }))),
+        React.createElement(Box, { sx: { display: 'flex', alignItems: 'center' } },
+            React.createElement(Circle, { color: "primary", sx: { fontSize: '12px', marginRight: '12px' } }),
+            React.createElement(Skeleton, { variant: "text", sx: styles.headerSkeleton })),
+        React.createElement(Box, { sx: styles.timelineConnector },
+            React.createElement(Box, { margin: '4px 0px 20px 0px' },
+                React.createElement(Skeleton, { variant: "text", sx: Object.assign(Object.assign({}, styles.dataSkeleton), { width: '120px' }) }),
+                React.createElement(Skeleton, { variant: "text", sx: Object.assign(Object.assign({}, styles.dataSkeleton), { width: '55%' }) })))));
+};
+export default HistoryLoading;

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

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { EvokeObject, History } from '../../../types';
+export declare type HistoryLogProps = {
+    /** The object instance associated with the history log */
+    object: EvokeObject;
+    /** An array of history entries representing the log. */
+    history: History[];
+    /** Indicates whether the history data is loading */
+    loading?: boolean;
+    /** The title displayed above the timeline */
+    title?: string;
+};
+/**
+ * Renders a timeline of the instance's history log.
+ * Users can filter the history by type and sort by date.
+ * Each update displays the state before and after the change.
+ *
+ * @param {HistoryLogProps} props - Configuration properties for the History Log component.
+ * @returns {JSX.Element} A timeline view representing the instance's history.
+ */
+export declare const HistoryLog: (props: HistoryLogProps) => JSX.Element;
+export default HistoryLog;

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

@@ -0,0 +1,92 @@
+import { Box, Typography } from '../../../index';
+import { Circle } from '@mui/icons-material';
+import { DateTime } from 'luxon';
+import React, { useEffect, useState } from 'react';
+import HistoryFilter from './Filter';
+import HistoricalData from './HistoryData';
+import HistoryLoading from './HistoryLoading';
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const { format } = require('small-date');
+/**
+ * Renders a timeline of the instance's history log.
+ * Users can filter the history by type and sort by date.
+ * Each update displays the state before and after the change.
+ *
+ * @param {HistoryLogProps} props - Configuration properties for the History Log component.
+ * @returns {JSX.Element} A timeline view representing the instance's history.
+ */
+export const HistoryLog = (props) => {
+    const { object, history, loading: initialLoading, title } = props;
+    const [historyMap, setHistoryMap] = useState({});
+    const [documentHistory, setDocumentHistory] = useState({});
+    const [filteredHistory, setFilteredHistory] = useState({});
+    const [filter, setFilter] = useState([]);
+    const [order, setOrder] = useState('desc');
+    const [loading, setLoading] = useState(initialLoading !== null && initialLoading !== void 0 ? initialLoading : true);
+    const sortHistoryByTimestamp = (historicalData, order) => {
+        return historicalData.sort((a, b) => order === 'desc' ? b.timestamp.localeCompare(a.timestamp) : a.timestamp.localeCompare(b.timestamp));
+    };
+    const sortGroupedHistoryByDate = (groupedHistory, order = 'desc') => {
+        return Object.fromEntries(Object.entries(groupedHistory)
+            .sort((a, b) => (order === 'desc' ? b[0].localeCompare(a[0]) : a[0].localeCompare(b[0])))
+            .map(([date, records]) => [date, sortHistoryByTimestamp(records, order)]));
+    };
+    useEffect(() => {
+        const groupedHistory = {};
+        const documentHistory = {};
+        history.forEach((h) => {
+            var _a, _b, _c, _d, _e, _f;
+            const timestamp = DateTime.fromISO(h.timestamp).toFormat('yyyy-MM-dd');
+            groupedHistory[timestamp] = ((_a = groupedHistory[timestamp]) !== null && _a !== void 0 ? _a : []).concat(h);
+            if (h.type === 'document') {
+                documentHistory[(_c = (_b = h.subject) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : 'unknown'] = ((_f = documentHistory[(_e = (_d = h.subject) === null || _d === void 0 ? void 0 : _d.id) !== null && _e !== void 0 ? _e : 'unknown']) !== null && _f !== void 0 ? _f : []).concat(h);
+            }
+        });
+        setHistoryMap(sortGroupedHistoryByDate(groupedHistory, 'desc'));
+        setFilteredHistory(sortGroupedHistoryByDate(groupedHistory, 'desc'));
+        setDocumentHistory(sortGroupedHistoryByDate(documentHistory, 'asc'));
+        setLoading(false);
+    }, [history]);
+    useEffect(() => {
+        if (!filter.length) {
+            setFilteredHistory(sortGroupedHistoryByDate(historyMap !== null && historyMap !== void 0 ? historyMap : {}, order));
+        }
+        else {
+            const filtered = Object.fromEntries(Object.entries(historyMap !== null && historyMap !== void 0 ? historyMap : {}).map(([date, historicalData]) => [
+                date,
+                historicalData.filter((r) => filter.includes(r.type)),
+            ]));
+            setFilteredHistory(sortGroupedHistoryByDate(filtered, order));
+        }
+    }, [filter, historyMap, order]);
+    useEffect(() => {
+        setFilteredHistory(sortGroupedHistoryByDate(filteredHistory !== null && filteredHistory !== void 0 ? filteredHistory : {}, order));
+    }, [order]);
+    return (React.createElement(Box, { sx: { margin: '15px 24px 24px 24px' } },
+        !!title && (React.createElement(Box, { sx: { backgroundColor: '#fff', position: 'sticky', top: 0, padding: '15px 0', zIndex: 1400 } },
+            React.createElement(Typography, { sx: { fontWeight: 700, fontSize: '18px' } }, "History"))),
+        React.createElement(HistoryFilter, { order: order, setOrder: setOrder, filter: filter, setFilter: setFilter, object: object }),
+        !loading &&
+            filteredHistory &&
+            Object.entries(filteredHistory).map(([date, records]) => {
+                if (records.length) {
+                    return (React.createElement(React.Fragment, { key: date },
+                        React.createElement(Box, { sx: { display: 'flex', alignItems: 'center' } },
+                            React.createElement(Circle, { color: "primary", sx: { fontSize: '12px', marginRight: '12px' } }),
+                            React.createElement(Typography, { sx: { fontWeight: 600, fontSize: '16px' } },
+                                format(new Date(), 'yyyy-MM-dd') === date
+                                    ? 'Today'
+                                    : format(new Date(date + ' 00:00:000'), 'DDD'),
+                                ' ',
+                                "\u00A0"),
+                            React.createElement(Typography, { sx: { fontWeight: 600, fontSize: '16px', color: '#637381' } }, format(new Date(date + ' 00:00:000'), 'MMM dd, yyyy'))),
+                        React.createElement(HistoricalData, { object: object, records: records, documentHistory: documentHistory })));
+                }
+                return null;
+            }),
+        !loading && filteredHistory && Object.values(filteredHistory).every((v) => !v.length) && (React.createElement(Box, { width: '100%', display: 'grid', justifyContent: 'center', marginTop: '60px' },
+            React.createElement(Typography, { fontSize: '20px', fontWeight: 700 }, "You Have No History"),
+            React.createElement(Typography, { fontSize: '14px', fontWeight: 400 }, "Try modifying the history type."))),
+        loading && React.createElement(HistoryLoading, null)));
+};
+export default HistoryLog;

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+export declare type RichTextViewerProps = {
+    /**
+     * The RTF content to be displayed.
+     */
+    value: string;
+};
+/**
+ * This component takes RTF (Rich Text Format) content generated in
+ * the rich text property and renders it as a React component.
+ *
+ * @param props - The props for the component, including the RTF content.
+ * @returns The rendered HTML content.
+ */
+export declare const RichTextViewer: (props: RichTextViewerProps) => JSX.Element;

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

@@ -0,0 +1,47 @@
+import React, { useEffect, useState } from 'react';
+import parse from 'html-react-parser';
+import { EMFJS, RTFJS, WMFJS } from 'rtf.js';
+import { Box } from '../../layout';
+RTFJS.loggingEnabled(false);
+WMFJS.loggingEnabled(false);
+EMFJS.loggingEnabled(false);
+/**
+ * This component takes RTF (Rich Text Format) content generated in
+ * the rich text property and renders it as a React component.
+ *
+ * @param props - The props for the component, including the RTF content.
+ * @returns The rendered HTML content.
+ */
+export const RichTextViewer = (props) => {
+    const { value } = props;
+    const [htmlContent, setHtmlContent] = useState('');
+    useEffect(() => {
+        if (typeof value === 'string') {
+            let rtf = value;
+            // rtf.js does not support alignment commands inside of groups, so move them outside
+            rtf = rtf.replace(/\\pard\\plain\\q([lrc])\{([^}]+)\}/g, (match, align, text) => {
+                return `\\pard\\plain\\q${align} ${text}`;
+            });
+            // rtf.js does not support color tables, so replace the color table with the actual colors
+            rtf = rtf.replace(/\\cbpat(\d+)/g, (match, p1) => `\\highlight${p1}`);
+            // Fix list issue with rtf.js
+            rtf = rtf.replace(/\\listtext\\pard\\plain\s*(\d+)\.\d+/g, (match, p1) => `\\listtext\\pard\\plain ${p1}.`);
+            const doc = new RTFJS.Document(stringToArrayBuffer(rtf), {});
+            doc.render()
+                .then((htmlElements) => {
+                const combinedHtml = htmlElements.map((elem) => elem.outerHTML).join('');
+                setHtmlContent(combinedHtml);
+            })
+                .catch((error) => console.error(error));
+        }
+    }, [value]);
+    function stringToArrayBuffer(str) {
+        const buffer = new ArrayBuffer(str.length);
+        const bufferView = new Uint8Array(buffer);
+        for (let i = 0; i < str.length; i++) {
+            bufferView[i] = str.charCodeAt(i);
+        }
+        return buffer;
+    }
+    return React.createElement(Box, null, parse(htmlContent));
+};

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

@@ -8,3 +8,5 @@ export { MenuBar } from './Menubar';
 export { MultiSelect } from './MultiSelect';
 export { RepeatableField } from './RepeatableField';
 export { UserAvatar } from './UserAvatar';
+export { HistoryLog } from './HistoryLog';
+export { RichTextViewer } from './RichTextViewer';

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

@@ -8,3 +8,5 @@ export { MenuBar } from './Menubar';
 export { MultiSelect } from './MultiSelect';
 export { RepeatableField } from './RepeatableField';
 export { UserAvatar } from './UserAvatar';
+export { HistoryLog } from './HistoryLog';
+export { RichTextViewer } from './RichTextViewer';

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, ErrorComponent, Form, FormField, MenuBar, MultiSelect, RepeatableField, UserAvatar, } from './components/custom';
+export { BuilderGrid, CriteriaBuilder, DataGrid, ErrorComponent, Form, FormField, MenuBar, MultiSelect, RepeatableField, UserAvatar, HistoryLog, RichTextViewer, } from './components/custom';
 export { Box, Container, Grid, Stack } from './components/layout';
 export * as EVOKE_TYPES from './types';
 export * from './util';

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, ErrorComponent, Form, FormField, MenuBar, MultiSelect, RepeatableField, UserAvatar, } from './components/custom';
+export { BuilderGrid, CriteriaBuilder, DataGrid, ErrorComponent, Form, FormField, MenuBar, MultiSelect, RepeatableField, UserAvatar, HistoryLog, RichTextViewer, } from './components/custom';
 export { Box, Container, Grid, Stack } from './components/layout';
 export * as EVOKE_TYPES from './types';
 export * from './util';

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { HistoryLogProps } from '../components/custom/HistoryLog';
+declare const _default: ComponentMeta<(props: HistoryLogProps) => JSX.Element>;
+export default _default;
+export declare const HistoryLog: ComponentStory<(props: HistoryLogProps) => JSX.Element>;

package/dist/published/stories/HistoryLog.stories.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import { HistoryLog as CustomHistoryLog } from '../index';
+export default {
+    title: 'Custom/HistoryLog',
+    component: CustomHistoryLog,
+};
+const HistoryLogTemplate = (args) => (React.createElement(CustomHistoryLog, Object.assign({}, args)));
+export const HistoryLog = HistoryLogTemplate.bind({});
+HistoryLog.args = {
+    title: 'History Log',
+    object: {
+        id: 'person',
+        name: 'Person',
+        properties: [
+            { id: 'firstName', name: 'First Name', type: 'string' },
+            { id: 'lastName', name: 'Last Name', type: 'string' },
+            { id: 'notes', name: 'Notes', type: 'richText' },
+        ],
+        actions: [],
+    },
+    history: [
+        {
+            user: { id: '1', name: 'Test User' },
+            event: 'Person Created',
+            eventType: 'create',
+            type: 'instance',
+            timestamp: '2021-09-01T12:00:00',
+            subject: {
+                id: '1',
+                name: 'Test Subject',
+            },
+            data: [
+                {
+                    property: 'firstName',
+                    updatedValue: 'Jane',
+                },
+                {
+                    property: 'lastName',
+                    updatedValue: 'Doe',
+                },
+            ],
+        },
+        {
+            user: { id: '1', name: 'Test User' },
+            event: 'Name Updated',
+            eventType: 'update',
+            type: 'instance',
+            timestamp: '2021-09-02T12:00:00',
+            subject: { id: '1', name: 'Test Subject' },
+            data: [
+                {
+                    property: 'firstName',
+                    historicalValue: 'Jane',
+                    updatedValue: 'Jane Jr.',
+                },
+                {
+                    property: 'lastName',
+                    historicalValue: 'Doe',
+                    updatedValue: 'Doe',
+                },
+            ],
+        },
+        {
+            user: { id: '1', name: 'Test User' },
+            event: 'Name Updated',
+            eventType: 'update',
+            type: 'instance',
+            timestamp: '2021-09-03T12:00:00',
+            subject: { id: '1', name: 'Test Subject' },
+            data: [
+                {
+                    property: 'notes',
+                    historicalValue: '{\\rtf1\\ansi\n\\pard\\plain\\ql Left aligned text.\\par\n\\pard\\plain\\qc Centered text.\\par\n\\pard\\plain\\qr Right aligned text.\\par\n}',
+                    updatedValue: '{\\rtf1\\ansi\n\\pard\\plain\\ql \\b\\i\\ul Left aligned text.\\b0\\i0\\ulnone\\par\n\\pard\\plain\\qc \\b\\i\\ul Centered text.\\b0\\i0\\ulnone\\par\n\\pard\\plain\\qr \\b\\i\\ul Right aligned text.\\b0\\i0\\ulnone\\par\n\\pard\\plain\\qj \\b\\i\\ul Justified text.\\b0\\i0\\ulnone\\par\n}',
+                },
+            ],
+        },
+    ],
+};

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { RichTextViewerProps } from '../components/custom/RichTextViewer';
+declare const _default: ComponentMeta<(props: RichTextViewerProps) => JSX.Element>;
+export default _default;
+export declare const RichTextViewer: ComponentStory<(props: RichTextViewerProps) => JSX.Element>;

package/dist/published/stories/RichTextViewer.stories.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { RichTextViewer as CustomRichTextViewer } from '../index';
+export default {
+    title: 'Custom/RichTextViewer',
+    component: CustomRichTextViewer,
+};
+const RichTextViewerTemplate = (args) => (React.createElement(CustomRichTextViewer, Object.assign({}, args)));
+export const RichTextViewer = RichTextViewerTemplate.bind({});
+RichTextViewer.args = {
+    // This is a sample RTF content generated from the evoke rich text editor.
+    value: "{\\rtf1\\deff0{\\fonttbl{\\f0 Calibri;}{\\f1 Times New Roman;}{\\f2 Arial;}{\\f3 Comic Sans MS;}{\\f4 Courier New;}{\\f5 Impact;}{\\f6 Lucida Console;}{\\f7 Tahoma;}{\\f8 Verdana;}}{\\colortbl ;\\red0\\green0\\blue255 ;\\red255\\green0\\blue0 ;\\red161\\green182\\blue214 ;\\red0\\green0\\blue0 ;}{\\*\\defchp \\f1\\fs22}{\\stylesheet {\\ql\\f1\\fs22 Normal;}{\\*\\cs1\\f1\\fs22 Default Paragraph Font;}{\\*\\cs2\\ul\\f1\\fs22\\cf1 Hyperlink;}{\\*\\ts3\\tsrowd\\fs22\\ql\\tsvertalt\\cltxlrtb Normal Table;}}{\\*\\listtable {\\list\\listtemplateid-1\\listhybrid{\\listlevel\\levelnfc0\\levelnfcn0\\leveljc0\\leveljcn0\\levelfollow0\\levelstartat1{\\leveltext\\leveltemplateid1724828877 \\'02\\'00.;}{\\levelnumbers\\'01;}\\levellegal0\\levelnorestart0\\fi-360\\li720\\lin720}{\\listlevel\\levelnfc0\\levelnfcn0\\leveljc0\\leveljcn0\\levelfollow0\\levelstartat1{\\leveltext\\leveltemplateid1648004642 \\'02\\'01.;}{\\levelnumbers\\'01;}\\levellegal0\\levelnorestart0\\fi-360\\li1440\\lin1440}{\\listlevel\\levelnfc0\\levelnfcn0\\leveljc0\\leveljcn0\\levelfollow0\\levelstartat1{\\leveltext\\leveltemplateid1794977542 \\'02\\'02.;}{\\levelnumbers\\'01;}\\levellegal0\\levelnorestart0\\fi-360\\li2160\\lin2160}{\\listlevel\\levelnfc0\\levelnfcn0\\leveljc0\\leveljcn0\\levelfollow0\\levelstartat1{\\leveltext\\leveltemplateid2120433904 \\'02\\'03.;}{\\levelnumbers\\'01;}\\levellegal0\\levelnorestart0\\fi-360\\li2880\\lin2880}{\\listlevel\\levelnfc0\\levelnfcn0\\leveljc0\\leveljcn0\\levelfollow0\\levelstartat1{\\leveltext\\leveltemplateid575479593 \\'02\\'04.;}{\\levelnumbers\\'01;}\\levellegal0\\levelnorestart0\\fi-360\\li3600\\lin3600}{\\listlevel\\levelnfc0\\levelnfcn0\\leveljc0\\leveljcn0\\levelfollow0\\levelstartat1{\\leveltext\\leveltemplateid1286449543 \\'02\\'05.;}{\\levelnumbers\\'01;}\\levellegal0\\levelnorestart0\\fi-360\\li4320\\lin4320}{\\listlevel\\levelnfc0\\levelnfcn0\\leveljc0\\leveljcn0\\levelfollow0\\levelstartat1{\\leveltext\\leveltemplateid1264123316 \\'02\\'06.;}{\\levelnumbers\\'01;}\\levellegal0\\levelnorestart0\\fi-360\\li5040\\lin5040}{\\listlevel\\levelnfc0\\levelnfcn0\\leveljc0\\leveljcn0\\levelfollow0\\levelstartat1{\\leveltext\\leveltemplateid1047350518 \\'02\\'07.;}{\\levelnumbers\\'01;}\\levellegal0\\levelnorestart0\\fi-360\\li5760\\lin5760}{\\listlevel\\levelnfc0\\levelnfcn0\\leveljc0\\leveljcn0\\levelfollow0\\levelstartat1{\\leveltext\\leveltemplateid226529494 \\'02\\'08.;}{\\levelnumbers\\'01;}\\levellegal0\\levelnorestart0\\fi-360\\li6480\\lin6480}{\\listname ;}\\listid1}{\\list\\listtemplateid-1\\listhybrid{\\listlevel\\levelnfc23\\levelnfcn23\\leveljc0\\leveljcn0\\levelfollow0\\levelstartat1{\\leveltext\\leveltemplateid1532193306 \\'01\\u8226\\'e2;}{\\levelnumbers;}\\levellegal0\\levelnorestart0\\fi-360\\li720\\lin720}{\\listlevel\\levelnfc23\\levelnfcn23\\leveljc0\\leveljcn0\\levelfollow0\\levelstartat1{\\leveltext\\leveltemplateid2107293787 \\'01\\u8226\\'e2;}{\\levelnumbers;}\\levellegal0\\levelnorestart0\\fi-360\\li1440\\lin1440}{\\listlevel\\levelnfc23\\levelnfcn23\\leveljc0\\leveljcn0\\levelfollow0\\levelstartat1{\\leveltext\\leveltemplateid9569355 \\'01\\u8226\\'e2;}{\\levelnumbers;}\\levellegal0\\levelnorestart0\\fi-360\\li2160\\lin2160}{\\listlevel\\levelnfc23\\levelnfcn23\\leveljc0\\leveljcn0\\levelfollow0\\levelstartat1{\\leveltext\\leveltemplateid364031910 \\'01\\u8226\\'e2;}{\\levelnumbers;}\\levellegal0\\levelnorestart0\\fi-360\\li2880\\lin2880}{\\listlevel\\levelnfc23\\levelnfcn23\\leveljc0\\leveljcn0\\levelfollow0\\levelstartat1{\\leveltext\\leveltemplateid472054489 \\'01\\u8226\\'e2;}{\\levelnumbers;}\\levellegal0\\levelnorestart0\\fi-360\\li3600\\lin3600}{\\listlevel\\levelnfc23\\levelnfcn23\\leveljc0\\leveljcn0\\levelfollow0\\levelstartat1{\\leveltext\\leveltemplateid242557682 \\'01\\u8226\\'e2;}{\\levelnumbers;}\\levellegal0\\levelnorestart0\\fi-360\\li4320\\lin4320}{\\listlevel\\levelnfc23\\levelnfcn23\\leveljc0\\leveljcn0\\levelfollow0\\levelstartat1{\\leveltext\\leveltemplateid330708956 \\'01\\u8226\\'e2;}{\\levelnumbers;}\\levellegal0\\levelnorestart0\\fi-360\\li5040\\lin5040}{\\listlevel\\levelnfc23\\levelnfcn23\\leveljc0\\leveljcn0\\levelfollow0\\levelstartat1{\\leveltext\\leveltemplateid781235209 \\'01\\u8226\\'e2;}{\\levelnumbers;}\\levellegal0\\levelnorestart0\\fi-360\\li5760\\lin5760}{\\listlevel\\levelnfc23\\levelnfcn23\\leveljc0\\leveljcn0\\levelfollow0\\levelstartat1{\\leveltext\\leveltemplateid417914393 \\'01\\u8226\\'e2;}{\\levelnumbers;}\\levellegal0\\levelnorestart0\\fi-360\\li6480\\lin6480}{\\listname ;}\\listid2}{\\list\\listtemplateid-1\\listhybrid{\\listlevel\\levelnfc23\\levelnfcn23\\leveljc0\\leveljcn0\\levelfollow0\\levelstartat1{\\leveltext\\leveltemplateid631399824 \\'01\\u8226\\'e2;}{\\levelnumbers;}\\levellegal0\\levelnorestart0\\fi-360\\li720\\lin720}{\\listlevel\\levelnfc23\\levelnfcn23\\leveljc0\\leveljcn0\\levelfollow0\\levelstartat1{\\leveltext\\leveltemplateid777553364 \\'01\\u8226\\'e2;}{\\levelnumbers;}\\levellegal0\\levelnorestart0\\fi-360\\li1440\\lin1440}{\\listlevel\\levelnfc23\\levelnfcn23\\leveljc0\\leveljcn0\\levelfollow0\\levelstartat1{\\leveltext\\leveltemplateid1040940783 \\'01\\u8226\\'e2;}{\\levelnumbers;}\\levellegal0\\levelnorestart0\\fi-360\\li2160\\lin2160}{\\listlevel\\levelnfc23\\levelnfcn23\\leveljc0\\leveljcn0\\levelfollow0\\levelstartat1{\\leveltext\\leveltemplateid1534400223 \\'01\\u8226\\'e2;}{\\levelnumbers;}\\levellegal0\\levelnorestart0\\fi-360\\li2880\\lin2880}{\\listlevel\\levelnfc23\\levelnfcn23\\leveljc0\\leveljcn0\\levelfollow0\\levelstartat1{\\leveltext\\leveltemplateid1619661386 \\'01\\u8226\\'e2;}{\\levelnumbers;}\\levellegal0\\levelnorestart0\\fi-360\\li3600\\lin3600}{\\listlevel\\levelnfc23\\levelnfcn23\\leveljc0\\leveljcn0\\levelfollow0\\levelstartat1{\\leveltext\\leveltemplateid1032775825 \\'01\\u8226\\'e2;}{\\levelnumbers;}\\levellegal0\\levelnorestart0\\fi-360\\li4320\\lin4320}{\\listlevel\\levelnfc23\\levelnfcn23\\leveljc0\\leveljcn0\\levelfollow0\\levelstartat1{\\leveltext\\leveltemplateid1278562953 \\'01\\u8226\\'e2;}{\\levelnumbers;}\\levellegal0\\levelnorestart0\\fi-360\\li5040\\lin5040}{\\listlevel\\levelnfc23\\levelnfcn23\\leveljc0\\leveljcn0\\levelfollow0\\levelstartat1{\\leveltext\\leveltemplateid1164322782 \\'01\\u8226\\'e2;}{\\levelnumbers;}\\levellegal0\\levelnorestart0\\fi-360\\li5760\\lin5760}{\\listlevel\\levelnfc23\\levelnfcn23\\leveljc0\\leveljcn0\\levelfollow0\\levelstartat1{\\leveltext\\leveltemplateid1907985166 \\'01\\u8226\\'e2;}{\\levelnumbers;}\\levellegal0\\levelnorestart0\\fi-360\\li6480\\lin6480}{\\listname ;}\\listid3}{\\list\\listtemplateid-1\\listhybrid{\\listlevel\\levelnfc0\\levelnfcn0\\leveljc0\\leveljcn0\\levelfollow0\\levelstartat1{\\leveltext\\leveltemplateid390960229 \\'02\\'00.;}{\\levelnumbers\\'01;}\\levellegal0\\levelnorestart0\\fi-360\\li720\\lin720}{\\listlevel\\levelnfc0\\levelnfcn0\\leveljc0\\leveljcn0\\levelfollow0\\levelstartat1{\\leveltext\\leveltemplateid181252923 \\'02\\'01.;}{\\levelnumbers\\'01;}\\levellegal0\\levelnorestart0\\fi-360\\li1440\\lin1440}{\\listlevel\\levelnfc0\\levelnfcn0\\leveljc0\\leveljcn0\\levelfollow0\\levelstartat1{\\leveltext\\leveltemplateid441957082 \\'02\\'02.;}{\\levelnumbers\\'01;}\\levellegal0\\levelnorestart0\\fi-360\\li2160\\lin2160}{\\listlevel\\levelnfc0\\levelnfcn0\\leveljc0\\leveljcn0\\levelfollow0\\levelstartat1{\\leveltext\\leveltemplateid1835039521 \\'02\\'03.;}{\\levelnumbers\\'01;}\\levellegal0\\levelnorestart0\\fi-360\\li2880\\lin2880}{\\listlevel\\levelnfc0\\levelnfcn0\\leveljc0\\leveljcn0\\levelfollow0\\levelstartat1{\\leveltext\\leveltemplateid239806422 \\'02\\'04.;}{\\levelnumbers\\'01;}\\levellegal0\\levelnorestart0\\fi-360\\li3600\\lin3600}{\\listlevel\\levelnfc0\\levelnfcn0\\leveljc0\\leveljcn0\\levelfollow0\\levelstartat1{\\leveltext\\leveltemplateid304908989 \\'02\\'05.;}{\\levelnumbers\\'01;}\\levellegal0\\levelnorestart0\\fi-360\\li4320\\lin4320}{\\listlevel\\levelnfc0\\levelnfcn0\\leveljc0\\leveljcn0\\levelfollow0\\levelstartat1{\\leveltext\\leveltemplateid431571160 \\'02\\'06.;}{\\levelnumbers\\'01;}\\levellegal0\\levelnorestart0\\fi-360\\li5040\\lin5040}{\\listlevel\\levelnfc0\\levelnfcn0\\leveljc0\\leveljcn0\\levelfollow0\\levelstartat1{\\leveltext\\leveltemplateid375482639 \\'02\\'07.;}{\\levelnumbers\\'01;}\\levellegal0\\levelnorestart0\\fi-360\\li5760\\lin5760}{\\listlevel\\levelnfc0\\levelnfcn0\\leveljc0\\leveljcn0\\levelfollow0\\levelstartat1{\\leveltext\\leveltemplateid1116549653 \\'02\\'08.;}{\\levelnumbers\\'01;}\\levellegal0\\levelnorestart0\\fi-360\\li6480\\lin6480}{\\listname ;}\\listid4}}{\\*\\listoverridetable {\\listoverride\\listid1\\listoverridecount0\\ls1}{\\listoverride\\listid2\\listoverridecount0\\ls2}{\\listoverride\\listid3\\listoverridecount0\\ls3}{\\listoverride\\listid4\\listoverridecount0\\ls4}}{\\info}\\nouicompat\\splytwnine\\htmautsp\\expshrtn\\spltpgpar\\deftab720\\sectd\\marglsxn1440\\margrsxn1440\\margtsxn1440\\margbsxn1440\\headery720\\footery720\\pgwsxn12240\\pghsxn15840\\cols1\\colsx720\\pard\\plain\\ql{\\f1\\fs16\\cf0 Small font}\\f1\\fs16\\cf0\\par\\pard\\plain\\ql\\f1\\fs16\\cf0\\par\\pard\\plain\\ql{\\f2\\fs16\\cf0 Arial Font}\\f2\\fs16\\cf0\\par\\pard\\plain\\ql\\f2\\fs16\\cf0\\par\\pard\\plain\\ql{\\f3\\fs16\\cf0 Comic Sans MS}\\f3\\fs16\\cf0\\par\\pard\\plain\\ql\\f3\\fs16\\cf0\\par\\pard\\plain\\ql{\\f4\\fs16\\cf0 Courier}\\f4\\fs16\\cf0\\par\\pard\\plain\\ql\\f4\\fs16\\cf0\\par\\pard\\plain\\ql{\\f5\\fs16\\cf0 Impact}\\f5\\fs16\\cf0\\par\\pard\\plain\\ql\\f5\\fs16\\cf0\\par\\pard\\plain\\ql{\\f6\\fs16\\cf0 Lucida }\\f6\\fs16\\cf0\\par\\pard\\plain\\ql\\f6\\fs16\\cf0\\par\\pard\\plain\\ql{\\f7\\fs16\\cf0 Tahoma}\\f7\\fs16\\cf0\\par\\pard\\plain\\ql\\f7\\fs16\\cf0\\par\\pard\\plain\\ql{\\f8\\fs16\\cf0 Verdana}\\f8\\fs16\\cf0\\par\\pard\\plain\\ql\\f8\\fs22\\cf0\\par\\pard\\plain\\ql{\\f1\\fs32\\cf0 large font}\\f1\\fs22\\cf0\\par\\pard\\plain\\ql{\\f1\\fs22\\cf2 red text}\\f1\\fs22\\cf2\\par\\pard\\plain\\ql\\shading0\\cbpat3{\\f1\\fs22\\cf4 background color}\\f1\\fs22\\cf4\\par\\pard\\plain\\ql{\\b\\f1\\fs22\\cf0 bold}\\f1\\fs22\\cf0\\par\\pard\\plain\\ql{\\i\\f1\\fs22\\cf0 italic}\\f1\\fs22\\cf0\\par\\pard\\plain\\ql{\\ul\\f1\\fs22\\cf0 underline}\\f1\\fs22\\cf0\\par\\pard\\plain\\ql{\\strike\\f1\\fs22\\cf0 cross out}\\f1\\fs22\\cf0\\par\\pard\\plain\\ql{\\f1\\fs22\\cf0 super}{\\super\\f1\\fs18\\cf0 script}\\f1\\fs22\\cf0\\par\\pard\\plain\\ql{\\f1\\fs22\\cf0 sub}{\\sub\\f1\\fs18\\cf0 script}\\f1\\fs22\\cf0\\par\\pard\\plain\\ql{\\f1\\fs22\\cf0 left align}\\f1\\fs22\\cf0\\par\\pard\\plain\\qc{\\f1\\fs22\\cf0 center align}\\f1\\fs22\\cf0\\par\\pard\\plain\\qr{\\f1\\fs22\\cf0 right align}\\f1\\fs22\\cf0\\par\\pard\\plain\\ql{\\f1\\fs22\\cf0 \\u8226\\'e2}{\\f1\\fs22\\cf0  bullet}\\f1\\fs22\\cf0\\par\\pard\\plain\\ql{\\f1\\fs22\\cf0 \\u8226\\'e2}{\\f1\\fs22\\cf0  list}\\f1\\fs22\\cf0\\par\\pard\\plain\\ql\\f1\\fs22\\cf0\\par{\\listtext\\pard\\plain 1.0}\\pard\\plain\\ilvl0\\ls4\\ql\\fi-360\\li720\\lin720{\\f1\\fs22\\cf0 number}\\f1\\fs22\\cf0\\par{\\listtext\\pard\\plain 2.0}\\pard\\plain\\ilvl0\\ls4\\ql\\fi-360\\li720\\lin720{\\f1\\fs22\\cf0 list}\\f1\\fs22\\cf0\\par\\pard\\plain\\ql\\f1\\fs22\\cf0\\par\\pard\\plain\\ql\\f1\\fs22\\cf0\\par\\pard\\plain\\ql\\f1\\fs22\\cf0\\par}",
+};

package/dist/published/types.d.ts

@@ -76,4 +76,24 @@ export declare type ContainerView = {
     type: 'container';
     children?: ContainerView[] | ConfiguredWidget[];
 };
+export declare type HistoryEventType = 'create' | 'update' | 'delete' | 'queue' | 'print' | 'email' | 'upload';
+export declare type HistoryType = 'correspondence' | 'document' | 'instance';
+export declare type History = {
+    user: Reference;
+    event: string;
+    eventType: HistoryEventType;
+    type: HistoryType;
+    timestamp: string;
+    subject: Reference;
+    data?: HistoryData[];
+};
+export declare type HistoryData = {
+    property: string;
+    historicalValue?: unknown;
+    updatedValue?: unknown;
+};
+export declare type Reference = {
+    id: string;
+    name?: string;
+};
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.0.0-dev.218",
+    "version": "1.0.0-dev.220",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",
@@ -114,8 +114,10 @@
         "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",
         "luxon": "^2.5.2",
+        "nanoid": "^5.0.8",
+        "handlebars": "^4.7.8",
         "nanoid-dictionary": "^4.3.0",
         "pluralize": "^8.0.0",
         "pretty-bytes": "^6.1.1",
@@ -123,6 +125,7 @@
         "react-input-mask": "^2.0.4",
         "react-number-format": "^4.9.3",
         "react-querybuilder": "^6.0.2",
+        "rtf.js": "^3.0.9",
         "sift": "^17.1.3",
         "small-date": "^2.0.0"
     },