@evoke-platform/ui-components 1.16.0 → 1.18.0

package/dist/published/components/custom/ViewDetailsV2/InstanceEntryRenderer.js

@@ -19,6 +19,8 @@ import { Image } from '../FormV2/components/FormFieldTypes/Image';
 import PropertyProtection from '../FormV2/components/PropertyProtection';
 import { entryIsVisible, fetchInitialMiddleObjectInstances, fetchMiddleObject, filterEmptySections, getDefaultPages, isAddressProperty, } from '../FormV2/components/utils';
 import HtmlView from '../FormV2/components/HtmlView';
+import FormletRenderer from '../FormV2/components/FormletRenderer';
+import MisconfiguredErrorMessage from '../FormV2/components/MisconfiguredErrorMessage';
 function ViewOnlyEntryRenderer(props) {
     const { entry } = props;
     const { fetchedOptions, setFetchedOptions, object, instance, richTextEditor: RichTextEditor } = useFormContext();
@@ -29,6 +31,7 @@ function ViewOnlyEntryRenderer(props) {
     const [currentDisplayValue, setCurrentDisplayValue] = useState(instance?.[entryId]);
     const [protectionMode, setProtectionMode] = useState('mask');
     const display = 'display' in entry ? entry.display : undefined;
+    const isReference = (value) => !!value && typeof value === 'object' && 'id' in value && 'name' in value;
     const fieldDefinition = useMemo(() => {
         const def = entry.type === 'readonlyField'
             ? isAddressProperty(entry.propertyId)
@@ -111,14 +114,14 @@ function ViewOnlyEntryRenderer(props) {
             return (React.createElement(AddressFields, { entry: entry, viewOnly: true, entryId: entryId, fieldDefinition: fieldDefinition }));
         }
         else {
-            let fieldValue = currentDisplayValue ?? (instance?.[entryId] || '');
+            let fieldValue = currentDisplayValue ?? instance?.[entryId];
             switch (fieldDefinition?.type) {
                 case 'object':
-                    if (navigationSlug && fieldDefinition?.objectId) {
+                    if (navigationSlug && fieldDefinition?.objectId && isReference(fieldValue)) {
                         return (React.createElement(FieldWrapper, { inputId: entryId, inputType: "object", label: display?.label || fieldDefinition?.name || 'default', value: fieldValue, required: display?.required || false, viewOnly: true },
                             React.createElement(Link, { sx: { cursor: 'pointer', fontFamily: 'sans-serif' }, href: `${'/app'}${navigationSlug.replace(':instanceId', fieldValue.id)}` }, fieldValue.name)));
                     }
-                    fieldValue = fieldValue.name;
+                    fieldValue = isReference(fieldValue) ? fieldValue.name : undefined;
                     break;
                 case 'array':
                     if (!isEmpty(fieldValue)) {
@@ -129,24 +132,29 @@ function ViewOnlyEntryRenderer(props) {
                     }
                     break;
                 case 'user':
-                    fieldValue = fieldValue && fieldValue.name;
+                    fieldValue = isReference(fieldValue) ? fieldValue.name : undefined;
                     break;
                 case 'date':
                     fieldValue =
                         isProtectedProperty && protectionMode === 'mask'
                             ? fieldValue
-                            : fieldValue && DateTime.fromISO(fieldValue).toFormat('MM/dd/yyyy');
+                            : typeof fieldValue === 'string'
+                                ? DateTime.fromISO(fieldValue).toFormat('MM/dd/yyyy')
+                                : undefined;
                     break;
                 case 'date-time':
                     fieldValue =
                         fieldValue && fieldValue instanceof Date
                             ? DateTime.fromJSDate(fieldValue).toFormat('MM/dd/yyyy hh:mm a')
-                            : fieldValue && DateTime.fromISO(fieldValue).toFormat('MM/dd/yyyy hh:mm a');
+                            : typeof fieldValue === 'string'
+                                ? DateTime.fromISO(fieldValue).toFormat('MM/dd/yyyy hh:mm a')
+                                : undefined;
                     break;
                 case 'time':
                     fieldValue =
-                        fieldValue &&
-                            DateTime.fromISO(DateTime.now().toISODate() + 'T' + fieldValue).toFormat('hh:mm a');
+                        typeof fieldValue === 'string'
+                            ? DateTime.fromISO(`${DateTime.now().toISODate()}T${fieldValue}`).toFormat('hh:mm a')
+                            : undefined;
                     break;
                 default:
                     break;
@@ -200,6 +208,9 @@ function ViewOnlyEntryRenderer(props) {
         const filteredEntry = filterEmptySections(entry, instance);
         return filteredEntry ? React.createElement(AccordionSections, { entry: filteredEntry, readOnly: true }) : null;
     }
-    return null;
+    else if (entry.type === 'formlet') {
+        return React.createElement(FormletRenderer, { entry: entry, readOnly: true });
+    }
+    return React.createElement(MisconfiguredErrorMessage, null);
 }
 export default ViewOnlyEntryRenderer;

package/dist/published/components/custom/ViewDetailsV2/ViewDetailsV2Container.js

@@ -131,6 +131,7 @@ function ViewDetailsV2ContainerInner(props) {
                         onCollapseAll: handleCollapseAll,
                         expandedSections,
                         hasAccordions: hasSections,
+                        readOnly: true,
                     })
                     : updatedEntries.map((entry, index) => (React.createElement(ViewOnlyEntryRenderer, { entry: entry, key: index }))))))) : (React.createElement(Box, { sx: { padding: '20px' } },
             React.createElement(Box, { display: 'flex', width: '100%', justifyContent: 'space-between' },

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

@@ -19,6 +19,7 @@ declare const _default: import("@storybook/types").ComponentAnnotations<import("
     } | undefined;
     renderHeader?: ((props: import("../components/custom").HeaderProps) => React.ReactNode) | undefined;
     renderBody?: ((props: import("../components/custom").BodyProps) => React.ReactNode) | undefined;
+    readOnly?: boolean | undefined;
     renderFooter?: ((props: import("../components/custom").FooterProps) => React.ReactNode) | undefined;
 }>;
 export default _default;
@@ -42,6 +43,7 @@ export declare const Editable: import("@storybook/types").AnnotatedStoryFn<impor
     } | undefined;
     renderHeader?: ((props: import("../components/custom").HeaderProps) => React.ReactNode) | undefined;
     renderBody?: ((props: import("../components/custom").BodyProps) => React.ReactNode) | undefined;
+    readOnly?: boolean | undefined;
     renderFooter?: ((props: import("../components/custom").FooterProps) => React.ReactNode) | undefined;
 }>;
 export declare const NoButtons: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, import("../components/custom/FormV2/components/types").BaseProps & {
@@ -64,5 +66,6 @@ export declare const NoButtons: import("@storybook/types").AnnotatedStoryFn<impo
     } | undefined;
     renderHeader?: ((props: import("../components/custom").HeaderProps) => React.ReactNode) | undefined;
     renderBody?: ((props: import("../components/custom").BodyProps) => React.ReactNode) | undefined;
+    readOnly?: boolean | undefined;
     renderFooter?: ((props: import("../components/custom").FooterProps) => React.ReactNode) | undefined;
 }>;

package/dist/published/stories/FormRenderer.stories.js

@@ -27,6 +27,7 @@ const mockProps = {
     fieldHeight: 'medium',
     form: mockEvokeForm,
     instance: instance,
+    readOnly: false,
 };
 const Template = (args) => {
     const [formDataState, setFormDataState] = React.useState(formData);

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

@@ -10,6 +10,7 @@ declare const _default: import("@storybook/types").ComponentAnnotations<import("
     } | undefined;
     display?: {
         fieldHeight?: "medium" | "small" | undefined;
+        readOnly?: boolean | undefined;
     } | undefined;
     actionId?: string | undefined;
     objectId: string;
@@ -43,6 +44,7 @@ export declare const Editable: import("@storybook/types").AnnotatedStoryFn<impor
     } | undefined;
     display?: {
         fieldHeight?: "medium" | "small" | undefined;
+        readOnly?: boolean | undefined;
     } | undefined;
     actionId?: string | undefined;
     objectId: string;
@@ -75,6 +77,7 @@ export declare const DefaultForm: import("@storybook/types").AnnotatedStoryFn<im
     } | undefined;
     display?: {
         fieldHeight?: "medium" | "small" | undefined;
+        readOnly?: boolean | undefined;
     } | undefined;
     actionId?: string | undefined;
     objectId: string;
@@ -107,6 +110,7 @@ export declare const NoButtons: import("@storybook/types").AnnotatedStoryFn<impo
     } | undefined;
     display?: {
         fieldHeight?: "medium" | "small" | undefined;
+        readOnly?: boolean | undefined;
     } | undefined;
     actionId?: string | undefined;
     objectId: string;
@@ -139,6 +143,7 @@ export declare const FormWithSections: import("@storybook/types").AnnotatedStory
     } | undefined;
     display?: {
         fieldHeight?: "medium" | "small" | undefined;
+        readOnly?: boolean | undefined;
     } | undefined;
     actionId?: string | undefined;
     objectId: string;

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

@@ -121,3 +121,18 @@ export declare const customerLayout: {
     };
     objectId: string;
 };
+export declare const formlet: {
+    id: string;
+    name: string;
+    entries: {
+        type: string;
+        input: {
+            type: string;
+            id: string;
+        };
+        display: {
+            label: string;
+            required: boolean;
+        };
+    }[];
+};

package/dist/published/stories/FormRendererData.js

@@ -571,6 +571,29 @@ export const mockEvokeForm = {
                 label: 'User',
             },
         },
+        {
+            display: {
+                booleanDisplay: 'checkbox',
+                label: 'Boolean',
+                required: false,
+            },
+            type: 'inputField',
+            input: {
+                type: 'boolean',
+                id: 'boolean',
+            },
+        },
+        {
+            type: 'inputField',
+            input: {
+                type: 'image',
+                id: 'image',
+            },
+            display: {
+                label: 'Image',
+                required: false,
+            },
+        },
     ],
     objectId: 'genericEvokeForm',
     actionId: '_update',
@@ -898,6 +921,28 @@ export const mockEvokeFormWithSections = {
                                         },
                                     ],
                                 },
+                                {
+                                    label: 'Nested Section 3',
+                                    entries: [
+                                        // This is how effective forms will show formlets
+                                        {
+                                            type: 'inputField',
+                                            input: {
+                                                type: 'date',
+                                                id: 'dateId1',
+                                            },
+                                            display: {
+                                                label: 'Date 1',
+                                                required: false,
+                                            },
+                                        },
+                                        // This is how non effective forms will show formlets
+                                        {
+                                            type: 'formlet',
+                                            formletId: 'formletId',
+                                        },
+                                    ],
+                                },
                             ],
                         },
                     ],
@@ -1057,3 +1102,21 @@ export const customerLayout = {
     },
     objectId: 'customers',
 };
+// Formlets
+export const formlet = {
+    id: 'formletId',
+    name: 'Formlet with no objectId',
+    entries: [
+        {
+            type: 'inputField',
+            input: {
+                type: 'date',
+                id: 'dateId2',
+            },
+            display: {
+                label: 'Date 2',
+                required: false,
+            },
+        },
+    ],
+};

package/dist/published/stories/sharedMswHandlers.js

@@ -1,5 +1,5 @@
 import { http, HttpResponse } from 'msw';
-import { customerLayout, instance, mockCustomerCreateForm, mockCustomerObject, mockCustomerUpdateForm, mockEvokeForm, mockEvokeFormWithSections, mockGenericEvokeFormObject, mockInstancesForCollection, mockInstancesForRelatedObject, mockMovieCreateForm, mockMovieObject, mockPeopleGenericObject, mockPeopleGenericObjectInstances, mockPeopleObject, mockPropertiesForCriteria, users, } from './FormRendererData';
+import { customerLayout, formlet, instance, mockCustomerCreateForm, mockCustomerObject, mockCustomerUpdateForm, mockEvokeForm, mockEvokeFormWithSections, mockGenericEvokeFormObject, mockInstancesForCollection, mockInstancesForRelatedObject, mockMovieCreateForm, mockMovieObject, mockPeopleGenericObject, mockPeopleGenericObjectInstances, mockPeopleObject, mockPropertiesForCriteria, users, } from './FormRendererData';
 import { mockGenericEvokeView, mockGenericEvokeViewWithSections, viewInstance } from './ViewDetailsV2Data';
 export const sharedObjectHandlers = [
     // Object fetches
@@ -55,6 +55,8 @@ export const sharedObjectHandlers = [
     http.get(/\/checkAccess$/, () => HttpResponse.json({ result: true })),
     // Layout fetches
     http.get('/api/data/objects/customers/tableLayouts/layoutId', () => HttpResponse.json(customerLayout)),
+    // Formlet fetches
+    http.get('/api/data/formlets/formletId', () => HttpResponse.json(formlet)),
     // General instance fetches
     http.get('/api/data/objects/:objectId/instances/:instanceId?', ({ params }) => {
         const { objectId, instanceId } = params;
@@ -104,7 +106,7 @@ export const sharedObjectHandlers = [
         return HttpResponse.json(data);
     }),
     // Form fetches
-    http.get('/api/data/forms/:formId?', ({ params, request }) => {
+    http.get('/api/data/forms/:formId/effective', ({ params, request }) => {
         const formId = Array.isArray(params.formId) ? params.formId[0] : params.formId;
         switch (formId) {
             case 'customerUpdateForm':

package/package.json

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