@evoke-platform/ui-components 1.10.0-dev.2 → 1.10.0-dev.21

package/dist/published/stories/FormRendererData.js

@@ -93,6 +93,11 @@ export const mockGenericEvokeFormObject = {
             name: 'User',
             type: 'user',
         },
+        {
+            id: 'boolean',
+            name: 'Boolean',
+            type: 'boolean',
+        },
     ],
     actions: [
         {
@@ -170,7 +175,7 @@ export const mockGenericEvokeFormObject = {
             ],
             outputEvent: 'Update Generic Evoke Form 2',
             preconditions: {},
-            defaultFormId: 'UpdateGenericEvokeForm',
+            defaultFormId: 'updateGenericEvokeForm',
         },
         {
             id: '_delete',
@@ -196,7 +201,7 @@ export const mockMovieObject = {
             id: 'customers',
             name: 'Customers',
             type: 'collection',
-            objectId: 'costomerMovie',
+            objectId: 'customerMovie',
             relatedPropertyId: 'movie',
             manyToManyPropertyId: 'customer',
         },
@@ -533,20 +538,6 @@ export const mockEvokeForm = {
             display: {
                 label: 'Multi-Select',
             },
-            enumWithLabels: [
-                {
-                    label: '1',
-                    value: '1',
-                },
-                {
-                    label: '2',
-                    value: '2',
-                },
-                {
-                    label: '3',
-                    value: '3',
-                },
-            ],
         },
         {
             type: 'input',
@@ -571,6 +562,8 @@ export const mockEvokeForm = {
             parameterId: 'collection',
             display: {
                 label: 'Collection',
+                createActionId: '_create',
+                createFormId: 'customerCreateForm',
             },
         },
         {
@@ -815,20 +808,6 @@ export const mockDocEvokeForm = {
                     sortBy: 'ASC',
                 },
             },
-            enumWithLabels: [
-                {
-                    label: 'Public',
-                    value: 'Public',
-                },
-                {
-                    label: 'Private',
-                    value: 'Private',
-                },
-                {
-                    label: 'Portal',
-                    value: 'Portal',
-                },
-            ],
         },
         {
             type: 'readonlyField',
@@ -887,20 +866,6 @@ export const mockEvokeFormWithSections = {
                             display: {
                                 label: 'Multi-Select',
                             },
-                            enumWithLabels: [
-                                {
-                                    label: '1',
-                                    value: '1',
-                                },
-                                {
-                                    label: '2',
-                                    value: '2',
-                                },
-                                {
-                                    label: '3',
-                                    value: '3',
-                                },
-                            ],
                         },
                         {
                             type: 'input',
@@ -1094,3 +1059,21 @@ export const users = [
         name: 'User 2',
     },
 ];
+// Layouts
+export const customerLayout = {
+    id: 'layoutId',
+    name: 'Generic Layout 3',
+    properties: [
+        {
+            id: 'name',
+        },
+        {
+            id: 'document',
+        },
+    ],
+    sort: {
+        colId: 'name',
+        sort: 'asc',
+    },
+    objectId: 'customers',
+};

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

@@ -0,0 +1,26 @@
+import React from 'react';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, import("../components/custom/FormV2/components/types").BaseProps & {
+    panelLayoutId?: string | undefined;
+    instanceId?: string | undefined;
+    objectId: string;
+    richTextEditor?: React.ComponentType<import("../components/custom/FormV2/components/types").SimpleEditorProps> | undefined;
+    renderHeader?: ((props: import("../components/custom").HeaderProps) => React.ReactNode) | undefined;
+    renderBody?: ((props: import("../components/custom").BodyProps) => React.ReactNode) | undefined;
+}>;
+export default _default;
+export declare const ViewDetails: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, import("../components/custom/FormV2/components/types").BaseProps & {
+    panelLayoutId?: string | undefined;
+    instanceId?: string | undefined;
+    objectId: string;
+    richTextEditor?: React.ComponentType<import("../components/custom/FormV2/components/types").SimpleEditorProps> | undefined;
+    renderHeader?: ((props: import("../components/custom").HeaderProps) => React.ReactNode) | undefined;
+    renderBody?: ((props: import("../components/custom").BodyProps) => React.ReactNode) | undefined;
+}>;
+export declare const ViewWithSections: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, import("../components/custom/FormV2/components/types").BaseProps & {
+    panelLayoutId?: string | undefined;
+    instanceId?: string | undefined;
+    objectId: string;
+    richTextEditor?: React.ComponentType<import("../components/custom/FormV2/components/types").SimpleEditorProps> | undefined;
+    renderHeader?: ((props: import("../components/custom").HeaderProps) => React.ReactNode) | undefined;
+    renderBody?: ((props: import("../components/custom").BodyProps) => React.ReactNode) | undefined;
+}>;

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,13 +147,14 @@ 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;
+    handleChange?: ((name: string, value: unknown) => void | Promise<void>) | undefined;
+    onAutosave?: ((fieldId: string) => void | Promise<void>) | undefined;
     fieldHeight?: "medium" | "small" | undefined;
     triggerFieldReset?: boolean | undefined;
     showSubmitError?: boolean | undefined;
     associatedObject?: {
         instanceId?: string | undefined;
-        propertyId?: string | undefined;
+        propertyId?: string | 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-dev.2",
+    "version": "1.10.0-dev.21",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",
@@ -20,6 +20,7 @@
     "scripts": {
         "test": "vitest",
         "test:ui": "vitest --ui",
+        "test:preview": "vitest-preview",
         "copy-styles": "copyfiles -u 1 src/styles/*.css dist/published/",
         "build": "rm -rf ./dist && tsc && npm run copy-styles",
         "build:cjs": "tsc --module CommonJS --outDir dist/cjs",
@@ -88,11 +89,12 @@
         "storybook": "^7.6.20",
         "typescript": "^4.7.3",
         "vitest": "^1.6.0",
+        "vitest-preview": "^0.0.3",
         "webpack": "^5.74.0",
         "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"
     },