@evoke-platform/ui-components 1.10.0-testing.15 → 1.10.0-testing.17

package/dist/published/stories/ViewDetailsV2Container.stories.js

@@ -0,0 +1,37 @@
+import { Box } from '@mui/material';
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { ViewDetailsV2Container } from '../components/custom';
+import { sharedObjectHandlers } from './sharedMswHandlers';
+export default {
+    title: 'Custom/ViewDetailsV2Container',
+    component: ViewDetailsV2Container,
+    parameters: {
+        layout: 'fullscreen',
+        msw: {
+            handlers: [sharedObjectHandlers],
+        },
+    },
+    decorators: [
+        (Story) => (React.createElement(Box, { sx: { padding: '2rem', paddingBottom: 0, '& .css-x8wy7h': { bottom: -1 } } },
+            React.createElement(Story, null))),
+    ],
+};
+const mockProps = {
+    panelLayoutId: 'genericEvokeView',
+    instanceId: 'genericEvokeViewInstanceId',
+    objectId: 'genericEvokeForm',
+};
+const Template = (args) => {
+    return (React.createElement(MemoryRouter, null,
+        React.createElement(ViewDetailsV2Container, { ...args })));
+};
+export const ViewDetails = Template.bind({});
+ViewDetails.args = {
+    ...mockProps,
+};
+export const ViewWithSections = Template.bind({});
+ViewWithSections.args = {
+    ...mockProps,
+    panelLayoutId: 'genericEvokeViewWithSections',
+};

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

@@ -0,0 +1,4 @@
+import { EvokeForm, ObjectInstance } from '@evoke-platform/context';
+export declare const viewInstance: ObjectInstance;
+export declare const mockGenericEvokeView: Omit<EvokeForm, 'actionId'>;
+export declare const mockGenericEvokeViewWithSections: EvokeForm;

package/dist/published/stories/ViewDetailsV2Data.js

@@ -0,0 +1,203 @@
+export const viewInstance = {
+    id: 'instanceId',
+    name: 'Ren Foreman',
+    multiSelect: ['2', '1', '3'],
+    address: {
+        city: 'Baltimore',
+    },
+    objectId: 'genericEvokeForm',
+    criteria: { name: 'Value' },
+    relatedObject: { id: 'mbSzyE9gpmRx9uMBEmnbh', name: 'A Phantom Menace' },
+    user: { id: 'user1', name: 'User 1' },
+    boolean: false,
+};
+// View definitions for ViewDetailsV2Container stories
+export const mockGenericEvokeView = {
+    id: 'genericEvokeView',
+    name: 'Generic Evoke View',
+    entries: [
+        {
+            type: 'readonlyField',
+            propertyId: 'name',
+            display: {
+                label: 'Name',
+                prefix: 'Dr',
+                suffix: 'Jr',
+                required: true,
+                charCount: true,
+            },
+        },
+        {
+            type: 'readonlyField',
+            propertyId: 'criteria',
+            display: {
+                label: 'Criteria',
+            },
+        },
+        {
+            type: 'readonlyField',
+            propertyId: 'multiSelect',
+            display: {
+                label: 'Multi-Select',
+            },
+        },
+        {
+            type: 'readonlyField',
+            propertyId: 'address.city',
+            display: {
+                label: 'Address City',
+                description: 'address city description',
+            },
+        },
+        {
+            type: 'readonlyField',
+            propertyId: 'relatedObject',
+            display: {
+                label: 'Related Object',
+                mode: 'default',
+                description: 'related Object description',
+                relatedObjectDisplay: 'dropdown',
+            },
+        },
+        {
+            type: 'readonlyField',
+            propertyId: 'collection',
+            display: {
+                label: 'Collection',
+                viewLayout: {
+                    id: 'layoutId',
+                    objectId: 'customers',
+                },
+            },
+        },
+        {
+            type: 'readonlyField',
+            propertyId: 'manyToMany',
+            display: {
+                label: 'Many to Many',
+            },
+        },
+        {
+            type: 'readonlyField',
+            propertyId: 'documentUpload',
+            display: {
+                label: 'Document Upload',
+            },
+        },
+        {
+            type: 'readonlyField',
+            propertyId: 'user',
+            display: {
+                label: 'User',
+            },
+        },
+        {
+            type: 'readonlyField',
+            propertyId: 'boolean',
+            display: {
+                label: 'Boolean',
+                booleanDisplay: 'checkbox',
+            },
+        },
+    ],
+    objectId: 'genericEvokeForm',
+};
+export const mockGenericEvokeViewWithSections = {
+    id: 'genericEvokeViewWithSections',
+    name: 'Generic Evoke View With Sections',
+    entries: [
+        {
+            type: 'sections',
+            label: 'Section',
+            sections: [
+                {
+                    label: 'Section 1',
+                    entries: [
+                        {
+                            type: 'readonlyField',
+                            propertyId: 'name',
+                            display: {
+                                label: 'Name',
+                                prefix: 'Dr',
+                                suffix: 'Jr',
+                                required: true,
+                                charCount: true,
+                            },
+                        },
+                        {
+                            type: 'readonlyField',
+                            propertyId: 'documentUpload',
+                            display: {
+                                label: 'Document Upload',
+                            },
+                        },
+                        {
+                            type: 'readonlyField',
+                            propertyId: 'criteria',
+                            display: {
+                                label: 'Criteria',
+                            },
+                        },
+                        {
+                            type: 'readonlyField',
+                            propertyId: 'multiSelect',
+                            display: {
+                                label: 'Multi-Select',
+                            },
+                        },
+                        {
+                            type: 'readonlyField',
+                            propertyId: 'address.city',
+                            display: {
+                                label: 'Address City',
+                                description: 'address city description',
+                            },
+                        },
+                        {
+                            type: 'readonlyField',
+                            propertyId: 'relatedObject',
+                            display: {
+                                label: 'Related Object',
+                                mode: 'default',
+                                description: 'related Object description',
+                                relatedObjectDisplay: 'dropdown',
+                            },
+                        },
+                    ],
+                },
+                {
+                    label: 'Section 2',
+                    entries: [
+                        {
+                            type: 'readonlyField',
+                            propertyId: 'boolean',
+                            display: {
+                                label: 'Boolean',
+                                booleanDisplay: 'checkbox',
+                            },
+                        },
+                        {
+                            type: 'sections',
+                            label: 'Section',
+                            sections: [
+                                {
+                                    label: 'Nested Section 2',
+                                    entries: [
+                                        {
+                                            type: 'readonlyField',
+                                            propertyId: 'people',
+                                            display: {
+                                                label: 'Many to Many',
+                                            },
+                                        },
+                                    ],
+                                },
+                            ],
+                        },
+                    ],
+                },
+            ],
+        },
+    ],
+    objectId: 'genericEvokeForm',
+};

package/dist/published/stories/sharedMswHandlers.js

@@ -1,5 +1,6 @@
 import { http, HttpResponse } from 'msw';
-import { instance, mockCustomerCreateForm, mockCustomerObject, mockCustomerUpdateForm, mockEvokeForm, mockEvokeFormWithSections, mockGenericEvokeFormObject, mockInstancesForCollection, mockInstancesForRelatedObject, mockMovieCreateForm, mockMovieObject, mockPeopleGenericObject, mockPeopleGenericObjectInstances, mockPeopleObject, mockPropertiesForCriteria, users, } from './FormRendererData';
+import { customerLayout, 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
     http.get('/api/data/objects/:objectId/effective', ({ params, request }) => {
@@ -30,8 +31,13 @@ export const sharedObjectHandlers = [
     http.get('/api/data/objects/:objectId/instances/:instanceId/object', ({ params }) => {
         const { objectId, instanceId } = params;
         let data;
-        if (objectId === 'genericEvokeForm' && instanceId === 'updateGenericEvokeFormInstanceId') {
-            data = mockGenericEvokeFormObject;
+        if (objectId === 'genericEvokeForm') {
+            if (instanceId === 'updateGenericEvokeFormInstanceId') {
+                data = mockGenericEvokeFormObject;
+            }
+            else if (instanceId === 'genericEvokeViewInstanceId') {
+                data = mockGenericEvokeFormObject;
+            }
         }
         else if (objectId === 'customers' && instanceId === 'collectionInstance') {
             data = mockCustomerObject;
@@ -47,24 +53,47 @@ export const sharedObjectHandlers = [
     http.get('/api/accessManagement/users', () => HttpResponse.json(users)),
     // Permission fetches
     http.get(/\/checkAccess$/, () => HttpResponse.json({ result: true })),
+    // Layout fetches
+    http.get('/api/data/objects/customers/tableLayouts/layoutId', () => HttpResponse.json(customerLayout)),
     // General instance fetches
-    http.get('/api/data/objects/:objectId/instances/:id?', ({ params }) => {
-        const { objectId, id } = params;
+    http.get('/api/data/objects/:objectId/instances/:instanceId?', ({ params }) => {
+        const { objectId, instanceId } = params;
         let data;
         switch (objectId) {
             case 'genericEvokeForm':
-                data = id === 'updateGenericEvokeFormInstanceId' ? instance : {};
+                data =
+                    instanceId === 'updateGenericEvokeFormInstanceId'
+                        ? instance
+                        : instanceId === 'genericEvokeViewInstanceId'
+                            ? viewInstance
+                            : {};
                 break;
             case 'movies':
-                data = id
-                    ? mockInstancesForRelatedObject.find((inst) => inst.id === id)
+                data = instanceId
+                    ? mockInstancesForRelatedObject.find((inst) => inst.id === instanceId)
                     : mockInstancesForRelatedObject;
                 break;
             case 'customers':
-                data = id ? mockInstancesForCollection.find((inst) => inst.id === id) : mockInstancesForCollection;
+                data = instanceId
+                    ? mockInstancesForCollection.find((inst) => inst.id === instanceId)
+                    : mockInstancesForCollection;
                 break;
             case 'peopleGenericObject':
-                data = [];
+                data = [
+                    {
+                        id: 'cgf2',
+                        name: 'Jane Doe',
+                        people: {
+                            id: 'person1',
+                            name: 'Jane Doe',
+                        },
+                        genericEvokeForm: {
+                            id: 'gEV7frl7i1aUEEfkp5dAT',
+                            name: 'Form Guy',
+                        },
+                        objectId: 'peopleGenericObject',
+                    },
+                ];
                 break;
             case 'people':
                 data = mockPeopleGenericObjectInstances;
@@ -92,6 +121,16 @@ export const sharedObjectHandlers = [
                 return HttpResponse.json({});
         }
     }),
+    // View fetches
+    http.get('/api/data/objects/genericEvokeForm/panelLayouts/:viewId?', ({ params, request }) => {
+        const viewId = Array.isArray(params.viewId) ? params.viewId[0] : params.viewId;
+        switch (viewId) {
+            case 'genericEvokeView':
+                return HttpResponse.json(mockGenericEvokeView);
+            case 'genericEvokeViewWithSections':
+                return HttpResponse.json(mockGenericEvokeViewWithSections);
+        }
+    }),
     // Action fetches
     // Fetch for many-to-many create action when adding a value to the field
     http.post('api/data/objects/peopleGenericObject/instances/actions', async (req) => {

package/dist/published/theme/hooks.d.ts

@@ -137,7 +137,7 @@ export declare function useFormContext(): {
      * @returns Object with boolean flags for different breakpoints
      */
     setFetchedOptions: (newData: import("react-hook-form").FieldValues) => void;
-    getValues: import("react-hook-form").UseFormGetValues<import("react-hook-form").FieldValues>;
+    getValues?: import("react-hook-form").UseFormGetValues<import("react-hook-form").FieldValues> | undefined;
     object?: import("@evoke-platform/context").Obj | undefined;
     errors?: import("react-hook-form").FieldValues | undefined;
     instance?: import("react-hook-form").FieldValues | undefined;
@@ -147,7 +147,7 @@ export declare function useFormContext(): {
     setExpandedSections?: import("react").Dispatch<import("react").SetStateAction<import("../components/custom/FormV2/components/types").ExpandedSection[]>> | undefined;
     setExpandAll?: import("react").Dispatch<import("react").SetStateAction<boolean | null | undefined>> | undefined;
     parameters?: import("@evoke-platform/context").InputParameter[] | undefined;
-    handleChange: (name: string, value: unknown) => void | Promise<void>;
+    handleChange?: ((name: string, value: unknown) => void | Promise<void>) | undefined;
     onAutosave?: ((fieldId: string) => void | Promise<void>) | undefined;
     fieldHeight?: "medium" | "small" | undefined;
     triggerFieldReset?: boolean | undefined;
@@ -155,7 +155,7 @@ export declare function useFormContext(): {
     associatedObject?: {
         instanceId?: string | undefined;
         propertyId?: string | undefined; /** Extra large screens (1536px and up) */
-    } | undefined; /** Extra large screens (1536px and up) */
+    } | undefined;
     form?: import("@evoke-platform/context").EvokeForm | undefined;
     width: number;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.10.0-testing.15",
+    "version": "1.10.0-testing.17",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",
@@ -94,7 +94,7 @@
         "yalc": "^1.0.0-pre.53"
     },
     "peerDependencies": {
-        "@evoke-platform/context": "^1.5.0-0",
+        "@evoke-platform/context": "^1.5.0-testing.4",
         "react": "^18.1.0",
         "react-dom": "^18.1.0"
     },