@evoke-platform/ui-components 1.6.0-dev.25 → 1.6.0-dev.27

package/dist/published/components/custom/FormV2/FormRenderer.d.ts

@@ -0,0 +1,19 @@
+import { EvokeForm, ObjectInstance } from '@evoke-platform/context';
+import React, { ComponentType } from 'react';
+import { FieldErrors, FieldValues } from 'react-hook-form';
+import { BaseProps, DocumentInstance, SimpleEditorProps } from './components/types';
+export type FormProps = BaseProps & {
+    richTextEditor?: ComponentType<SimpleEditorProps>;
+    hideButtons?: boolean;
+    value?: FieldValues;
+    onSubmit?: (data: FieldValues) => void;
+    fieldHeight?: 'small' | 'medium';
+    stickyFooter?: boolean;
+    onCancel?: () => void;
+    form: EvokeForm;
+    instance?: ObjectInstance | DocumentInstance;
+    onChange: (id: string, value: unknown) => void;
+    onValidationChange?: (errors: FieldErrors) => void;
+};
+declare function FormRenderer(props: FormProps): React.JSX.Element;
+export default FormRenderer;

package/dist/published/components/custom/FormV2/FormRenderer.js

@@ -0,0 +1,183 @@
+import { useObject } from '@evoke-platform/context';
+import { isEqual } from 'lodash';
+import React, { useEffect, useMemo, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { useResponsive } from '../../../theme';
+import { Button, Skeleton, Typography } from '../../core';
+import { Box } from '../../layout';
+import ActionButtons from './components/ActionButtons';
+import { FormContext } from './components/FormContext';
+import { RecursiveEntryRenderer } from './components/RecursiveEntryRenderer';
+import { convertDocToParameters, convertPropertiesToParams } from './components/utils';
+import { handleValidation } from './components/ValidationFiles/Validation';
+import ValidationErrorDisplay from './components/ValidationFiles/ValidationErrorDisplay';
+function FormRenderer(props) {
+    const { onSubmit, value, fieldHeight, richTextEditor, hideButtons, stickyFooter, onCancel, form, instance, onChange, onValidationChange, } = props;
+    const { entries, name: title, objectId, actionId, display } = form;
+    const { register, unregister, setValue, reset, handleSubmit, formState: { errors, isSubmitted }, getValues, } = useForm({
+        defaultValues: value,
+    });
+    const hasSections = entries.some((entry) => entry.type === 'sections');
+    const isModal = !!document.querySelector('.MuiDialog-container');
+    const { isSm, isXs, smallerThan } = useResponsive();
+    const isSmallerThanMd = smallerThan('md');
+    const objectStore = useObject(objectId);
+    const [expandedSections, setExpandedSections] = useState([]);
+    const [fetchedOptions, setFetchedOptions] = useState({});
+    const [expandAll, setExpandAll] = useState();
+    const [action, setAction] = useState();
+    const [object, setObject] = useState();
+    const [triggerFieldReset, setTriggerFieldReset] = useState(false);
+    const updateFetchedOptions = (newData) => {
+        setFetchedOptions((prev) => ({
+            ...prev,
+            ...newData,
+        }));
+    };
+    function handleExpandAll() {
+        setExpandAll(true);
+    }
+    function handleCollapseAll() {
+        setExpandAll(false);
+    }
+    useEffect(() => {
+        (async () => {
+            try {
+                const object = await objectStore.get({ sanitized: true });
+                setObject(object);
+                if (actionId) {
+                    const action = object?.actions?.find((a) => a.id === actionId);
+                    setAction(action);
+                }
+            }
+            catch (error) {
+                console.error('Failed to fetch object or action:', error);
+            }
+        })();
+    }, [objectStore, actionId]);
+    useEffect(() => {
+        const currentValues = getValues();
+        if (value) {
+            for (const key of Object.keys(currentValues)) {
+                if (!isEqual(currentValues[key], value[key])) {
+                    setValue(key, value[key], { shouldValidate: true });
+                }
+            }
+            if (triggerFieldReset === true) {
+                setTriggerFieldReset(false);
+            }
+        }
+    }, [value]);
+    useEffect(() => {
+        if (onValidationChange) {
+            onValidationChange(errors);
+        }
+    }, [errors, onValidationChange]);
+    const handleReset = () => {
+        if (onCancel) {
+            onCancel();
+        }
+        else {
+            reset(instance); // clears react-hook-form state back to default values
+        }
+        setTriggerFieldReset(true);
+    };
+    const parameters = useMemo(() => {
+        if (form.id === 'documentForm') {
+            return convertDocToParameters(instance);
+        }
+        else if (action?.parameters) {
+            return action.parameters;
+        }
+        else if (object) {
+            // if forms actionId is synced with object properties
+            return convertPropertiesToParams(object);
+        }
+    }, [form.id, action?.parameters, object, instance]);
+    useEffect(() => {
+        handleValidation(entries, register, getValues(), action?.parameters, instance);
+    }, []);
+    if (entries && parameters && (!actionId || action)) {
+        return (React.createElement(React.Fragment, null,
+            React.createElement(Box, { sx: {
+                    paddingX: isSmallerThanMd ? 2 : 3,
+                    paddingTop: '0px',
+                    borderBottom: '2px solid #F4F6F8',
+                } },
+                React.createElement(Box, { sx: {
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        alignItems: 'center',
+                        flexWrap: 'wrap',
+                        paddingY: isSm || isXs ? 2 : 3,
+                    } },
+                    React.createElement(Typography, { sx: {
+                            fontSize: '20px',
+                            lineHeight: '30px',
+                            fontWeight: 700,
+                            flexGrow: '1',
+                        } }, title),
+                    isSmallerThanMd && hasSections && (React.createElement(Box, { sx: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            maxHeight: '22px',
+                        } },
+                        React.createElement(Button, { variant: "text", size: "small", disableRipple: true, disabled: expandedSections.every((section) => section.expanded === true), sx: {
+                                color: '#212B36',
+                                borderRight: '1px solid #e5e8eb',
+                                borderRadius: '0px',
+                                '&:hover': {
+                                    backgroundColor: 'transparent',
+                                },
+                                fontWeight: 400,
+                                fontSize: '14px',
+                            }, onClick: handleExpandAll }, "Expand all"),
+                        React.createElement(Button, { variant: "text", size: "small", disableRipple: true, disabled: expandedSections.every((section) => section.expanded === false), sx: {
+                                color: '#212B36',
+                                '&:hover': {
+                                    backgroundColor: 'transparent',
+                                },
+                                fontWeight: 400,
+                                fontSize: '14px',
+                            }, onClick: handleCollapseAll }, "Collapse all")))),
+                React.createElement(ValidationErrorDisplay, { errors: errors, show: !!(isSubmitted && errors), formId: form.id, title: title })),
+            React.createElement(FormContext.Provider, { value: {
+                    fetchedOptions,
+                    setFetchedOptions: updateFetchedOptions,
+                    getValues,
+                    stickyFooter,
+                    object,
+                } },
+                React.createElement(Box, { sx: {
+                        padding: isModal ? '0px' : isSm || isXs ? 2 : 3,
+                        paddingBottom: '0px',
+                        paddingTop: !hasSections ? undefined : '0px',
+                    } },
+                    entries.map((entry, index) => (React.createElement(RecursiveEntryRenderer, { fieldHeight: fieldHeight, key: index, entry: entry, handleChange: onChange, errors: errors, showSubmitError: !!(isSubmitted && errors), instance: instance, richTextEditor: richTextEditor, expandedSections: expandedSections, setExpandedSections: setExpandedSections, expandAll: expandAll, setExpandAll: setExpandAll, triggerFieldReset: triggerFieldReset, parameters: parameters }))),
+                    !hideButtons && (actionId || form.id === 'documentForm') && onSubmit && (React.createElement(Box, { sx: {
+                            ...(stickyFooter === false ? { position: 'static' } : { position: 'sticky' }),
+                            bottom: isModal ? -5 : isSmallerThanMd ? 0 : 24,
+                            zIndex: 1000,
+                            borderTop: action?.type !== 'delete' ? '1px solid #f4f6f8' : 'none',
+                            backgroundColor: '#fff',
+                            paddingY: isSmallerThanMd ? '16px' : '20px',
+                            paddingX: isSmallerThanMd ? '16px' : '20px',
+                            display: 'flex',
+                            justifyContent: isXs ? 'center' : 'flex-end',
+                            alignItems: 'center',
+                            marginX: isSmallerThanMd ? -2 : -3,
+                            marginBottom: '1px',
+                            borderRadius: '0px 0px 6px 6px',
+                        } },
+                        React.createElement(ActionButtons, { onSubmit: onSubmit, handleSubmit: handleSubmit, isModal: isModal, actionType: action?.type, submitButtonLabel: display?.submitLabel, onReset: handleReset, errors: errors, unregister: unregister, entries: entries, setValue: setValue, formId: form.id, instance: instance })))))));
+    }
+    else {
+        return (React.createElement(Box, { p: 2 },
+            React.createElement(Skeleton, null),
+            React.createElement(Skeleton, null),
+            React.createElement(Skeleton, null),
+            React.createElement(Skeleton, null),
+            React.createElement(Skeleton, null)));
+    }
+}
+export default FormRenderer;

package/dist/published/components/custom/FormV2/components/FormFieldTypes/CollectionFiles/ActionDialog.js

@@ -36,7 +36,7 @@ const styles = {
     },
 };
 export const ActionDialog = (props) => {
-    const { open, onClose, action, object, instanceId, relatedForm } = props;
+    const { open, onClose, action, object, instanceId, relatedForm, instanceInput } = props;
     const [loading, setLoading] = useState(false);
     const [hasAccess, setHasAccess] = useState();
     const [form, setForm] = useState();
@@ -62,7 +62,12 @@ export const ActionDialog = (props) => {
             ? {
                 id: '',
                 name: '',
-                entries: [],
+                entries: [
+                    {
+                        type: 'content',
+                        html: `<p>You are about to delete ${instanceInput?.name}. Deleted records can't be restored. Are you sure you want to continue?</p>`,
+                    },
+                ],
                 objectId: object.id,
                 actionId: '_delete',
                 display: {

package/dist/published/components/custom/FormV2/components/types.d.ts

@@ -120,3 +120,12 @@ export type SectionsProps = {
     triggerFieldReset?: boolean;
     showSubmitError?: boolean;
 };
+export type DocumentInstance = {
+    id: string;
+    name: string;
+    contentType: string;
+    size: number;
+    uploadedDate: string;
+    metadata?: Record<string, string>;
+    versionId: string;
+};

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

@@ -2,6 +2,7 @@ import { ApiServices, Column, Columns, FormEntry, InputParameter, Obj, ObjectIns
 import { LocalDateTime } from '@js-joda/core';
 import { FieldErrors, FieldValues } from 'react-hook-form';
 import { AutocompleteOption } from '../../../core';
+import { DocumentInstance } from './types';
 export declare const scrollIntoViewWithOffset: (el: HTMLElement, offset: number, container?: HTMLElement) => void;
 export declare const normalizeDateTime: (dateTime: LocalDateTime) => string;
 export declare function isAddressProperty(key: string): boolean;
@@ -40,3 +41,7 @@ export declare function getDefaultPages(parameters: InputParameter[], defaultPag
 export declare function updateCriteriaInputs(criteria: Record<string, unknown>, data: Record<string, unknown>, user?: UserAccount): Record<string, unknown>;
 export declare function fetchCollectionData(apiServices: ApiServices, fieldDefinition: InputParameter | Property, setFetchedOptions: (newData: FieldValues) => void, instanceId?: string, fetchedOptions?: Record<string, unknown>, initialMiddleObjectInstances?: ObjectInstance[]): Promise<void>;
 export declare const getErrorCountForSection: (section: Section | Column, errors: FieldErrors) => number;
+export declare const convertDocToParameters: (obj: DocumentInstance) => InputParameter[];
+export declare const propertyToParameter: (property: Property) => InputParameter;
+export declare const propertyValidationToParameterValidation: (property: Property) => InputParameter['validation'];
+export declare const convertPropertiesToParams: (object: Obj) => InputParameter[] | undefined;

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

@@ -1,6 +1,6 @@
 import { LocalDateTime } from '@js-joda/core';
 import jsonLogic from 'json-logic-js';
-import { get, isArray, isObject, transform } from 'lodash';
+import { get, isArray, isObject, omit, startCase, transform } from 'lodash';
 import { DateTime } from 'luxon';
 import Handlebars from 'no-eval-handlebars';
 import { defaultRuleProcessorMongoDB, formatQuery, parseMongoDB } from 'react-querybuilder';
@@ -371,3 +371,64 @@ export const getErrorCountForSection = (section, errors) => {
         }, 0)
         : 0;
 };
+// to convert the properties of the current instances doc into a mappable object
+export const convertDocToParameters = (obj) => {
+    return Object.entries(obj).flatMap(([key, value]) => {
+        if (key === 'metadata') {
+            return [
+                {
+                    id: 'type',
+                    name: 'Type',
+                    type: 'string',
+                },
+                {
+                    id: 'view_permission',
+                    name: 'View Permission',
+                    type: 'string',
+                    enum: ['Public', 'Private', 'Portal'],
+                },
+            ];
+        }
+        return [
+            {
+                id: key,
+                name: startCase(key),
+                type: 'string',
+            },
+        ];
+    });
+};
+export const propertyToParameter = (property) => {
+    return {
+        ...omit(property, ['searchable', 'formula', 'formulaType', 'mask', 'textTransform']),
+        validation: property.validation ? propertyValidationToParameterValidation(property) : undefined,
+    };
+};
+export const propertyValidationToParameterValidation = (property) => {
+    if (property.validation) {
+        if ('from' in property.validation || 'to' in property.validation) {
+            return undefined;
+        }
+        return { ...property.validation };
+    }
+    return undefined;
+};
+export const convertPropertiesToParams = (object) => {
+    return object.properties
+        ?.reduce((acc, property) => {
+        return property.type === 'address'
+            ? [
+                ...acc,
+                ...['city', 'county', 'state', 'line1', 'line2', 'zipCode'].map((field) => ({
+                    id: `${property.id}.${field}`,
+                    name: `${property.name} ${startCase(field)}`,
+                    type: 'string',
+                })),
+            ]
+            : [...acc, property];
+    }, [])
+        .filter(({ id, type }) => type !== 'collection')
+        .flat()
+        .sort((a, b) => a.name.localeCompare(b.name))
+        .map(propertyToParameter);
+};

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

@@ -0,0 +1 @@
+export { default as FormRenderer } from './FormRenderer';

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

@@ -0,0 +1 @@
+export { default as FormRenderer } from './FormRenderer';

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

@@ -5,6 +5,7 @@ export { ErrorComponent } from './ErrorComponent';
 export { Form } from './Form';
 export type { FormRef } from './Form';
 export { FormField } from './FormField';
+export { FormRenderer } from './FormV2';
 export { HistoryLog } from './HistoryLog';
 export { MenuBar } from './Menubar';
 export { MultiSelect } from './MultiSelect';

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

@@ -4,6 +4,7 @@ export { DataGrid } from './DataGrid';
 export { ErrorComponent } from './ErrorComponent';
 export { Form } from './Form';
 export { FormField } from './FormField';
+export { FormRenderer } from './FormV2';
 export { HistoryLog } from './HistoryLog';
 export { MenuBar } from './Menubar';
 export { MultiSelect } from './MultiSelect';

package/dist/published/index.d.ts

@@ -2,7 +2,7 @@ export { ClickAwayListener, createTheme, darken, lighten, styled, Toolbar, useMe
 export { CalendarPicker, DateTimePicker, MonthPicker, PickersDay, StaticDateTimePicker, StaticTimePicker, TimePicker, YearPicker, } from '@mui/x-date-pickers';
 export * from './colors';
 export * from './components/core';
-export { BuilderGrid, CriteriaBuilder, DataGrid, ErrorComponent, Form, FormField, getReadableQuery, HistoryLog, MenuBar, MultiSelect, RepeatableField, ResponsiveOverflow, RichTextViewer, UserAvatar, } from './components/custom';
+export { BuilderGrid, CriteriaBuilder, DataGrid, ErrorComponent, Form, FormField, FormRenderer, getReadableQuery, HistoryLog, MenuBar, MultiSelect, RepeatableField, ResponsiveOverflow, RichTextViewer, UserAvatar, } from './components/custom';
 export type { FormRef } from './components/custom';
 export { NumericFormat } from './components/custom/FormField/InputFieldComponent';
 export { Box, Container, Grid, Stack } from './components/layout';

package/dist/published/index.js

@@ -2,7 +2,7 @@ export { ClickAwayListener, createTheme, darken, lighten, styled, Toolbar, useMe
 export { CalendarPicker, DateTimePicker, MonthPicker, PickersDay, StaticDateTimePicker, StaticTimePicker, TimePicker, YearPicker, } from '@mui/x-date-pickers';
 export * from './colors';
 export * from './components/core';
-export { BuilderGrid, CriteriaBuilder, DataGrid, ErrorComponent, Form, FormField, getReadableQuery, HistoryLog, MenuBar, MultiSelect, RepeatableField, ResponsiveOverflow, RichTextViewer, UserAvatar, } from './components/custom';
+export { BuilderGrid, CriteriaBuilder, DataGrid, ErrorComponent, Form, FormField, FormRenderer, getReadableQuery, HistoryLog, MenuBar, MultiSelect, RepeatableField, ResponsiveOverflow, RichTextViewer, UserAvatar, } from './components/custom';
 export { NumericFormat } from './components/custom/FormField/InputFieldComponent';
 export { Box, Container, Grid, Stack } from './components/layout';
 export * from './theme';

package/package.json

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