@pega/cosmos-react-demos 3.0.0-dev.4.2 → 3.0.0-dev.7.0

package/lib/build/PageTemplates/GalleryPage.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"GalleryPage.stories.js","sourceRoot":"","sources":["../../../src/build/PageTemplates/GalleryPage.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAEjE,OAAO,EAAE,SAAS,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAErE,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,WAAW;IACtB,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACM,CAAC;AAUV,MAAM,CAAC,MAAM,eAAe,GAA2B,CAAC,IAAqB,EAAE,EAAE,CAAC,CAChF,KAAC,WAAW,IACV,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,WAAW,EAAE,IAAI,CAAC,iBAAiB,EACnC,KAAK,EAAE;QACL,GAAG,EAAE,kGAAkG;QACvG,GAAG,EAAE,sBAAsB;KAC5B,EACD,KAAK,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB,EAAE,EACvD,UAAU,EAAE;QACV,OAAO,EAAE,IAAI,CAAC,iBAAiB;QAC/B,WAAW,EAAE,IAAI,CAAC,qBAAqB;KACxC,EACD,MAAM,EAAE;QACN,IAAI,EAAE,iBAAiB;QACvB,OAAO,EAAE,MAAM,CAAC,gCAAgC,CAAC;KAClD,EACD,WAAW,EAAE,MAAM,CAAC,0BAA0B,CAAC,WAC/C,CACH,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAA2B,CAAC,IAAqB,EAAE,EAAE;IACvF,OAAO,CACL,KAAC,QAAQ,IACP,UAAU,EAAE;YACV,KAAK,EAAE,EAAE;YACT,aAAa,EAAE,GAAG;YAClB,WAAW,EAAE,GAAG,EAAE,GAAE,CAAC;SACtB,EACD,OAAO,EAAE;YACP,IAAI,EAAE,SAAS;YACf,MAAM,EAAE;gBACN,IAAI,EAAE;oBACJ,IAAI,EAAE,gBAAgB;oBACtB,OAAO,EAAE,SAAS;iBACnB;aACF;SACF,EACD,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,KAAC,eAAe,OAAK,IAAI,WAAI,EACnC,OAAO,iBACP,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,uBAAuB,CAAC,IAAI,GAAG;IAC7B,aAAa,EAAE,cAAc;IAC7B,iBAAiB,EAAE,iCAAiC;IACpD,cAAc,EAAE,KAAK;IACrB,iBAAiB,EAAE,+BAA+B;IAClD,qBAAqB,EAAE,qEAAqE;CAC7F,CAAC;AAEF,uBAAuB,CAAC,QAAQ,GAAG;IACjC,aAAa,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC5C,iBAAiB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAChD,cAAc,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAChD,iBAAiB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAChD,qBAAqB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CACrD,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { action } from '@storybook/addon-actions';\n\nimport { AppShell, GalleryPage } from '@pega/cosmos-react-build';\n\nimport { appHeader, getOverviewCardData } from './GalleryPage.mocks';\n\nexport default {\n  title: 'Build/GalleryPage',\n  component: GalleryPage,\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\ninterface GalleryPageArgs {\n  bannerHeading: string;\n  bannerDescription: string;\n  showEmptyState: boolean;\n  emptyStateHeading: string;\n  emptyStateDescription: string;\n}\n\nexport const GalleryPageDemo: Story<GalleryPageArgs> = (args: GalleryPageArgs) => (\n  <GalleryPage\n    heading={args.bannerHeading}\n    description={args.bannerDescription}\n    image={{\n      src: 'https://www.pega.com/sites/default/files/styles/2560/public/media/images/2019-01/pega-logo_0.png',\n      alt: 'Image for the banner'\n    }}\n    items={args.showEmptyState ? [] : getOverviewCardData()}\n    emptyState={{\n      heading: args.emptyStateHeading,\n      description: args.emptyStateDescription\n    }}\n    action={{\n      text: 'New application',\n      onClick: action('Clicked New application button')\n    }}\n    onItemClick={action('Clicked interactive card')}\n  />\n);\n\nexport const AppShellWithGalleryPage: Story<GalleryPageArgs> = (args: GalleryPageArgs) => {\n  return (\n    <AppShell\n      navigation={{\n        nodes: [],\n        currentNodeId: '1',\n        onNodeClick: () => {}\n      }}\n      appInfo={{\n        text: 'U+ Desk',\n        visual: {\n          icon: {\n            name: 'phone-in-solid',\n            bgColor: '#0ac7c8'\n          }\n        }\n      }}\n      appHeader={appHeader}\n      main={<GalleryPageDemo {...args} />}\n      hideNav\n    />\n  );\n};\n\nAppShellWithGalleryPage.args = {\n  bannerHeading: 'Applications',\n  bannerDescription: 'Edit or create new applications',\n  showEmptyState: false,\n  emptyStateHeading: 'Create your first application',\n  emptyStateDescription: \"You're on your way to creating your first professional application.\"\n};\n\nAppShellWithGalleryPage.argTypes = {\n  bannerHeading: { control: { type: 'text' } },\n  bannerDescription: { control: { type: 'text' } },\n  showEmptyState: { control: { type: 'boolean' } },\n  emptyStateHeading: { control: { type: 'text' } },\n  emptyStateDescription: { control: { type: 'text' } }\n};\n"]}
+{"version":3,"file":"GalleryPage.stories.js","sourceRoot":"","sources":["../../../src/build/PageTemplates/GalleryPage.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAEjE,OAAO,EAAE,SAAS,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAErE,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,WAAW;IACtB,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACM,CAAC;AAUV,MAAM,CAAC,MAAM,uBAAuB,GAA2B,CAAC,IAAqB,EAAE,EAAE;IACvF,MAAM,eAAe,GAAG,CAAC,EACvB,aAAa,EACb,iBAAiB,EACjB,cAAc,EACd,iBAAiB,EACjB,qBAAqB,EACL,EAAE,EAAE,CAAC,CACrB,KAAC,WAAW,IACV,OAAO,EAAE,aAAa,EACtB,WAAW,EAAE,iBAAiB,EAC9B,KAAK,EAAE;YACL,GAAG,EAAE,kGAAkG;YACvG,GAAG,EAAE,sBAAsB;SAC5B,EACD,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB,EAAE,EAClD,UAAU,EAAE;YACV,OAAO,EAAE,iBAAiB;YAC1B,WAAW,EAAE,qBAAqB;SACnC,EACD,MAAM,EAAE;YACN,IAAI,EAAE,iBAAiB;YACvB,OAAO,EAAE,MAAM,CAAC,gCAAgC,CAAC;SAClD,EACD,WAAW,EAAE,MAAM,CAAC,0BAA0B,CAAC,GAC/C,CACH,CAAC;IAEF,OAAO,CACL,KAAC,QAAQ,IACP,UAAU,EAAE;YACV,KAAK,EAAE,EAAE;YACT,aAAa,EAAE,GAAG;YAClB,WAAW,EAAE,GAAG,EAAE,GAAE,CAAC;SACtB,EACD,OAAO,EAAE;YACP,IAAI,EAAE,SAAS;YACf,MAAM,EAAE;gBACN,IAAI,EAAE,gBAAgB;gBACtB,eAAe,EAAE,SAAS;aAC3B;SACF,EACD,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,KAAC,eAAe,OAAK,IAAI,GAAI,EACnC,OAAO,SACP,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,uBAAuB,CAAC,IAAI,GAAG;IAC7B,aAAa,EAAE,cAAc;IAC7B,iBAAiB,EAAE,iCAAiC;IACpD,cAAc,EAAE,KAAK;IACrB,iBAAiB,EAAE,+BAA+B;IAClD,qBAAqB,EAAE,qEAAqE;CAC7F,CAAC;AAEF,uBAAuB,CAAC,QAAQ,GAAG;IACjC,aAAa,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC5C,iBAAiB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAChD,cAAc,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAChD,iBAAiB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAChD,qBAAqB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CACrD,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { action } from '@storybook/addon-actions';\n\nimport { AppShell, GalleryPage } from '@pega/cosmos-react-build';\n\nimport { appHeader, getOverviewCardData } from './GalleryPage.mocks';\n\nexport default {\n  title: 'Build/GalleryPage',\n  component: GalleryPage,\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\ninterface GalleryPageArgs {\n  bannerHeading: string;\n  bannerDescription: string;\n  showEmptyState: boolean;\n  emptyStateHeading: string;\n  emptyStateDescription: string;\n}\n\nexport const AppShellWithGalleryPage: Story<GalleryPageArgs> = (args: GalleryPageArgs) => {\n  const GalleryPageDemo = ({\n    bannerHeading,\n    bannerDescription,\n    showEmptyState,\n    emptyStateHeading,\n    emptyStateDescription\n  }: GalleryPageArgs) => (\n    <GalleryPage\n      heading={bannerHeading}\n      description={bannerDescription}\n      image={{\n        src: 'https://www.pega.com/sites/default/files/styles/2560/public/media/images/2019-01/pega-logo_0.png',\n        alt: 'Image for the banner'\n      }}\n      items={showEmptyState ? [] : getOverviewCardData()}\n      emptyState={{\n        heading: emptyStateHeading,\n        description: emptyStateDescription\n      }}\n      action={{\n        text: 'New application',\n        onClick: action('Clicked New application button')\n      }}\n      onItemClick={action('Clicked interactive card')}\n    />\n  );\n\n  return (\n    <AppShell\n      navigation={{\n        nodes: [],\n        currentNodeId: '1',\n        onNodeClick: () => {}\n      }}\n      appInfo={{\n        text: 'U+ Desk',\n        visual: {\n          icon: 'phone-in-solid',\n          backgroundColor: '#0ac7c8'\n        }\n      }}\n      appHeader={appHeader}\n      main={<GalleryPageDemo {...args} />}\n      hideNav\n    />\n  );\n};\n\nAppShellWithGalleryPage.args = {\n  bannerHeading: 'Applications',\n  bannerDescription: 'Edit or create new applications',\n  showEmptyState: false,\n  emptyStateHeading: 'Create your first application',\n  emptyStateDescription: \"You're on your way to creating your first professional application.\"\n};\n\nAppShellWithGalleryPage.argTypes = {\n  bannerHeading: { control: { type: 'text' } },\n  bannerDescription: { control: { type: 'text' } },\n  showEmptyState: { control: { type: 'boolean' } },\n  emptyStateHeading: { control: { type: 'text' } },\n  emptyStateDescription: { control: { type: 'text' } }\n};\n"]}

package/lib/build/PageTemplates/PageTemplates.mocks.d.ts

@@ -6,6 +6,7 @@ interface Field extends FormControlProps {
     validator: (this: Field) => boolean;
 }
 export declare const initFields: () => Field[];
-export declare const OneColumnForm: () => JSX.Element | null;
+export declare const OneColumnForm: (props: any) => JSX.Element | null;
+export declare const PreviewMainContent: () => JSX.Element;
 export {};
 //# sourceMappingURL=PageTemplates.mocks.d.ts.map

package/lib/build/PageTemplates/PageTemplates.mocks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageTemplates.mocks.d.ts","sourceRoot":"","sources":["../../../src/build/PageTemplates/PageTemplates.mocks.tsx"],"names":[],"mappings":";AAEA,OAAO,EAcL,gBAAgB,EACjB,MAAM,yBAAyB,CAAC;AAKjC,UAAU,KAAM,SAAQ,gBAAgB;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,OAAO,CAAC;CACrC;AAGD,eAAO,MAAM,UAAU,QAAO,KAAK,EAmClC,CAAC;AA6BF,eAAO,MAAM,aAAa,0BAkIzB,CAAC"}
+{"version":3,"file":"PageTemplates.mocks.d.ts","sourceRoot":"","sources":["../../../src/build/PageTemplates/PageTemplates.mocks.tsx"],"names":[],"mappings":";AAGA,OAAO,EAcL,gBAAgB,EAEjB,MAAM,yBAAyB,CAAC;AAMjC,UAAU,KAAM,SAAQ,gBAAgB;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,OAAO,CAAC;CACrC;AAGD,eAAO,MAAM,UAAU,QAAO,KAAK,EAmClC,CAAC;AA6BF,eAAO,MAAM,aAAa,UAAW,GAAG,uBA0IvC,CAAC;AAEF,eAAO,MAAM,kBAAkB,mBAe9B,CAAC"}

package/lib/build/PageTemplates/PageTemplates.mocks.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useReducer, useRef, useContext } from 'react';
-import { Button, Flex, Form, Input, CheckboxGroup, RadioButtonGroup, RadioButton, Checkbox, Select, Option, TextArea, ToasterContext, Text } from '@pega/cosmos-react-core';
+import styled from 'styled-components';
+import { Button, Flex, Form, Input, CheckboxGroup, RadioButtonGroup, RadioButton, Checkbox, Select, Option, TextArea, ToasterContext, Text, useTheme } from '@pega/cosmos-react-core';
 import { RichTextEditor } from '@pega/cosmos-react-rte';
 import { FileInputDemo } from '../../core/File/FileInput.stories';
+import { dataPages, ObjectSelectComp } from '../ObjectSelect/ObjectSelect.mocks';
 // Get initial field properties
 export const initFields = () => {
     const common = { value: undefined, status: undefined };
@@ -62,7 +64,7 @@ const fieldReducer = (fields, { target, type }) => {
         return field;
     });
 };
-export const OneColumnForm = () => {
+export const OneColumnForm = (props) => {
     const editorRef = useRef(null);
     const [fields, setField] = useReducer(fieldReducer, undefined, initFields);
     const { push } = useContext(ToasterContext);
@@ -74,7 +76,7 @@ export const OneColumnForm = () => {
     const canSubmit = fields.every(field => field.value && field.validator());
     const actions = (_jsxs(_Fragment, { children: [_jsx(Button, { name: 'Cancel', variant: 'secondary', onClick: () => {
                     push({ content: 'Form cancelled!' });
-                }, children: "Cancel" }, void 0), _jsx(Button, { name: 'Submit', type: 'submit', variant: 'primary', disabled: !canSubmit, children: "Submit" }, void 0)] }, void 0));
+                }, children: "Cancel" }), _jsx(Button, { name: 'Submit', type: 'submit', variant: 'primary', disabled: !canSubmit, children: "Submit" })] }));
     const onImageAdded = (image, id) => {
         const src = URL.createObjectURL(image);
         editorRef.current?.appendImage({ src, alt: image.name }, id);
@@ -82,7 +84,7 @@ export const OneColumnForm = () => {
     return (_jsxs(Form, { actions: actions, onSubmit: (e) => {
             e.preventDefault();
             push({ content: 'Form submitted!' });
-        }, style: { maxWidth: '37.5rem' }, children: [_jsx(Text, { variant: 'h4', as: 'h4', children: "Demo Form" }, void 0), _jsxs(Flex, { container: { direction: 'column', gap: 2 }, item: { grow: 1 }, children: [_jsx(Input, { name: 'name', label: 'Name', value: name.value, required: name.required, status: name.status, info: 'some help text here', onChange: (e) => setField({ ...e }), onBlur: (e) => setField({ ...e }), autoComplete: 'off' }, void 0), _jsx(Input, { name: 'email', value: email.value, type: 'email', label: 'Email', required: email.required, status: email.status, info: 'some help text here', onChange: (e) => setField({ ...e }), onBlur: (e) => setField({ ...e }), autoComplete: 'off' }, void 0), _jsx(CheckboxGroup, { name: 'visited', label: 'Places you have worked', children: ['Cambridge', 'Krakow', 'Hyderabad', 'Bangalore'].map(office => (_jsx(Checkbox, { label: office, onChange: (e) => setField({ ...e }) }, office))) }, void 0), _jsx(RadioButtonGroup, { name: 'meetings', label: 'Do you enjoy early morning meetings?', children: ['Yes', "No...no I don't"].map(option => (_jsx(RadioButton, { label: option, onChange: (e) => setField({ ...e }) }, option))) }, void 0), _jsxs(Select, { label: 'What would you like to eat?', info: 'FYI: options are limited', children: [_jsx(Option, { children: "choose meal..." }, void 0), _jsx(Option, { children: "Pizza" }, void 0), _jsx(Option, { children: "Sandwich" }, void 0), _jsx(Option, { children: "Salad" }, void 0)] }, void 0), _jsx(TextArea, { name: 'notes', required: notes.required, label: 'Meeting Notes', status: notes.status, info: notes.info || notes.help, onChange: (e) => setField({ ...e }), onBlur: (e) => setField({ ...e }) }, void 0), _jsx(RichTextEditor, { label: 'Detailed meeting notes', info: 'The rich text editor can be used in forms, comments, and documents', toolbar: [
+        }, style: { maxWidth: '37.5rem' }, children: [_jsx(Text, { variant: 'h4', as: 'h4', children: "Demo Form" }), _jsxs(Flex, { container: { direction: 'column', gap: 2 }, item: { grow: 1 }, children: [_jsx(Input, { name: 'name', label: 'Name', value: name.value, required: name.required, status: name.status, info: 'some help text here', onChange: (e) => setField({ ...e }), onBlur: (e) => setField({ ...e }), autoComplete: 'off' }), _jsx(Input, { name: 'email', value: email.value, type: 'email', label: 'Email', required: email.required, status: email.status, info: 'some help text here', onChange: (e) => setField({ ...e }), onBlur: (e) => setField({ ...e }), autoComplete: 'off' }), _jsx(CheckboxGroup, { name: 'visited', label: 'Places you have worked', children: ['Cambridge', 'Krakow', 'Hyderabad', 'Bangalore'].map(office => (_jsx(Checkbox, { label: office, onChange: (e) => setField({ ...e }) }, office))) }), _jsx(RadioButtonGroup, { name: 'meetings', label: 'Do you enjoy early morning meetings?', children: ['Yes', "No...no I don't"].map(option => (_jsx(RadioButton, { label: option, onChange: (e) => setField({ ...e }) }, option))) }), _jsxs(Select, { label: 'What would you like to eat?', info: 'FYI: options are limited', children: [_jsx(Option, { children: "choose meal..." }), _jsx(Option, { children: "Pizza" }), _jsx(Option, { children: "Sandwich" }), _jsx(Option, { children: "Salad" })] }), _jsx(ObjectSelectComp, { label: 'Date page', info: 'Choose a when condition from list', items: dataPages, onChange: () => { }, onPreview: () => props.previewCallback() }), _jsx(TextArea, { name: 'notes', required: notes.required, label: 'Meeting Notes', status: notes.status, info: notes.info || notes.help, onChange: (e) => setField({ ...e }), onBlur: (e) => setField({ ...e }) }), _jsx(RichTextEditor, { label: 'Detailed meeting notes', info: 'The rich text editor can be used in forms, comments, and documents', toolbar: [
                             'inline-styling',
                             'headers',
                             'tables',
@@ -91,6 +93,15 @@ export const OneColumnForm = () => {
                             'lists',
                             'cut-copy-paste',
                             'indentation'
-                        ], onImageAdded: onImageAdded, ref: editorRef }, void 0), _jsx(FileInputDemo, {}, void 0)] }, void 0)] }, void 0));
+                        ], onImageAdded: onImageAdded, ref: editorRef }), _jsx(FileInputDemo, {})] })] }));
+};
+export const PreviewMainContent = () => {
+    const { base: { palette } } = useTheme();
+    const StyledRegion = styled.div `
+    min-height: 120vh;
+    border: dotted 0.1rem ${palette['border-line']};
+    background: ${palette.skeleton};
+  `;
+    return (_jsx(Flex, { as: StyledRegion, container: { alignItems: 'center', justify: 'center' }, children: _jsx(Text, { children: "This is a react region" }) }));
 };
 //# sourceMappingURL=PageTemplates.mocks.js.map

package/lib/build/PageTemplates/PageTemplates.mocks.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageTemplates.mocks.js","sourceRoot":"","sources":["../../../src/build/PageTemplates/PageTemplates.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FormEvent, ChangeEvent, FocusEvent, useReducer, useRef, useContext } from 'react';\n\nimport {\n  Button,\n  Flex,\n  Form,\n  Input,\n  CheckboxGroup,\n  RadioButtonGroup,\n  RadioButton,\n  Checkbox,\n  Select,\n  Option,\n  TextArea,\n  ToasterContext,\n  Text,\n  FormControlProps\n} from '@pega/cosmos-react-core';\nimport { RichTextEditor, RichTextEditorState } from '@pega/cosmos-react-rte';\n\nimport { FileInputDemo } from '../../core/File/FileInput.stories';\n\ninterface Field extends FormControlProps {\n  help?: string;\n  error?: string;\n  validator: (this: Field) => boolean;\n}\n\n// Get initial field properties\nexport const initFields = (): Field[] => {\n  const common = { value: undefined, status: undefined };\n  return [\n    {\n      ...common,\n      name: 'name',\n      required: true,\n      error: 'Please enter first and last name',\n      validator() {\n        if (!this.value) return false;\n        return /^[a-z]+\\s[a-z]+$/i.test(this.value);\n      }\n    },\n    {\n      ...common,\n      name: 'email',\n      required: true,\n      error: 'Enter a @pega.com address',\n      validator() {\n        if (!this.value) return false;\n        return /^\\S+@pega\\.com$/.test(this.value);\n      }\n    },\n    {\n      ...common,\n      name: 'notes',\n      required: true,\n      help: 'See how fast you can type 20 characters go',\n      error: 'You need to tell us more than 20 characters',\n      validator() {\n        if (!this.value) return false;\n        return this.value.length >= 20;\n      }\n    }\n  ];\n};\n\n// Handles setting of state for all fields\nconst fieldReducer = (\n  fields: Field[],\n  {\n    target,\n    type\n  }:\n    | ChangeEvent<HTMLInputElement | HTMLTextAreaElement>\n    | FocusEvent<HTMLInputElement | HTMLTextAreaElement>\n) => {\n  return fields.map(field => {\n    if (field.name === target.name) {\n      field.value = target.value;\n      if (type === 'blur' || field.status === 'error') {\n        if ((field.required || field.value) && !field.validator()) {\n          field.status = 'error';\n          field.info = field.error;\n        } else {\n          field.status = undefined;\n          field.info = field.help;\n        }\n      }\n    }\n    return field;\n  });\n};\n\nexport const OneColumnForm = () => {\n  const editorRef = useRef<RichTextEditorState>(null);\n  const [fields, setField] = useReducer(fieldReducer, undefined, initFields);\n  const { push } = useContext(ToasterContext);\n\n  const name = fields.find(field => field.name === 'name');\n  const email = fields.find(field => field.name === 'email');\n  const notes = fields.find(field => field.name === 'notes');\n\n  if (!name || !email || !notes) return null;\n\n  const canSubmit = fields.every(field => field.value && field.validator());\n\n  const actions = (\n    <>\n      <Button\n        name='Cancel'\n        variant='secondary'\n        onClick={() => {\n          push({ content: 'Form cancelled!' });\n        }}\n      >\n        Cancel\n      </Button>\n      <Button name='Submit' type='submit' variant='primary' disabled={!canSubmit}>\n        Submit\n      </Button>\n    </>\n  );\n\n  const onImageAdded = (image: File, id: string) => {\n    const src = URL.createObjectURL(image);\n    editorRef.current?.appendImage({ src, alt: image.name }, id);\n  };\n\n  return (\n    <Form\n      actions={actions}\n      onSubmit={(e: FormEvent) => {\n        e.preventDefault();\n        push({ content: 'Form submitted!' });\n      }}\n      style={{ maxWidth: '37.5rem' }}\n    >\n      <Text variant='h4' as='h4'>\n        Demo Form\n      </Text>\n      <Flex container={{ direction: 'column', gap: 2 }} item={{ grow: 1 }}>\n        <Input\n          name='name'\n          label='Name'\n          value={name.value}\n          required={name.required}\n          status={name.status}\n          info='some help text here'\n          onChange={(e: ChangeEvent<HTMLInputElement>) => setField({ ...e })}\n          onBlur={(e: FocusEvent<HTMLInputElement>) => setField({ ...e })}\n          autoComplete='off'\n        />\n\n        <Input\n          name='email'\n          value={email.value}\n          type='email'\n          label='Email'\n          required={email.required}\n          status={email.status}\n          info='some help text here'\n          onChange={(e: ChangeEvent<HTMLInputElement>) => setField({ ...e })}\n          onBlur={(e: FocusEvent<HTMLInputElement>) => setField({ ...e })}\n          autoComplete='off'\n        />\n\n        <CheckboxGroup name='visited' label='Places you have worked'>\n          {['Cambridge', 'Krakow', 'Hyderabad', 'Bangalore'].map(office => (\n            <Checkbox\n              key={office}\n              label={office}\n              onChange={(e: ChangeEvent<HTMLInputElement>) => setField({ ...e })}\n            />\n          ))}\n        </CheckboxGroup>\n\n        <RadioButtonGroup name='meetings' label='Do you enjoy early morning meetings?'>\n          {['Yes', \"No...no I don't\"].map(option => (\n            <RadioButton\n              key={option}\n              label={option}\n              onChange={(e: ChangeEvent<HTMLInputElement>) => setField({ ...e })}\n            />\n          ))}\n        </RadioButtonGroup>\n\n        <Select label='What would you like to eat?' info='FYI: options are limited'>\n          <Option>choose meal...</Option>\n          <Option>Pizza</Option>\n          <Option>Sandwich</Option>\n          <Option>Salad</Option>\n        </Select>\n\n        <TextArea\n          name='notes'\n          required={notes.required}\n          label='Meeting Notes'\n          status={notes.status}\n          info={notes.info || notes.help}\n          onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setField({ ...e })}\n          onBlur={(e: FocusEvent<HTMLInputElement>) => setField({ ...e })}\n        />\n        <RichTextEditor\n          label='Detailed meeting notes'\n          info='The rich text editor can be used in forms, comments, and documents'\n          toolbar={[\n            'inline-styling',\n            'headers',\n            'tables',\n            'links',\n            'images',\n            'lists',\n            'cut-copy-paste',\n            'indentation'\n          ]}\n          onImageAdded={onImageAdded}\n          ref={editorRef}\n        />\n\n        <FileInputDemo />\n      </Flex>\n    </Form>\n  );\n};\n"]}
+{"version":3,"file":"PageTemplates.mocks.js","sourceRoot":"","sources":["../../../src/build/PageTemplates/PageTemplates.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FormEvent, ChangeEvent, FocusEvent, useReducer, useRef, useContext } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  Button,\n  Flex,\n  Form,\n  Input,\n  CheckboxGroup,\n  RadioButtonGroup,\n  RadioButton,\n  Checkbox,\n  Select,\n  Option,\n  TextArea,\n  ToasterContext,\n  Text,\n  FormControlProps,\n  useTheme\n} from '@pega/cosmos-react-core';\nimport { RichTextEditor, RichTextEditorState } from '@pega/cosmos-react-rte';\n\nimport { FileInputDemo } from '../../core/File/FileInput.stories';\nimport { dataPages, ObjectSelectComp } from '../ObjectSelect/ObjectSelect.mocks';\n\ninterface Field extends FormControlProps {\n  help?: string;\n  error?: string;\n  validator: (this: Field) => boolean;\n}\n\n// Get initial field properties\nexport const initFields = (): Field[] => {\n  const common = { value: undefined, status: undefined };\n  return [\n    {\n      ...common,\n      name: 'name',\n      required: true,\n      error: 'Please enter first and last name',\n      validator() {\n        if (!this.value) return false;\n        return /^[a-z]+\\s[a-z]+$/i.test(this.value);\n      }\n    },\n    {\n      ...common,\n      name: 'email',\n      required: true,\n      error: 'Enter a @pega.com address',\n      validator() {\n        if (!this.value) return false;\n        return /^\\S+@pega\\.com$/.test(this.value);\n      }\n    },\n    {\n      ...common,\n      name: 'notes',\n      required: true,\n      help: 'See how fast you can type 20 characters go',\n      error: 'You need to tell us more than 20 characters',\n      validator() {\n        if (!this.value) return false;\n        return this.value.length >= 20;\n      }\n    }\n  ];\n};\n\n// Handles setting of state for all fields\nconst fieldReducer = (\n  fields: Field[],\n  {\n    target,\n    type\n  }:\n    | ChangeEvent<HTMLInputElement | HTMLTextAreaElement>\n    | FocusEvent<HTMLInputElement | HTMLTextAreaElement>\n) => {\n  return fields.map(field => {\n    if (field.name === target.name) {\n      field.value = target.value;\n      if (type === 'blur' || field.status === 'error') {\n        if ((field.required || field.value) && !field.validator()) {\n          field.status = 'error';\n          field.info = field.error;\n        } else {\n          field.status = undefined;\n          field.info = field.help;\n        }\n      }\n    }\n    return field;\n  });\n};\n\nexport const OneColumnForm = (props: any) => {\n  const editorRef = useRef<RichTextEditorState>(null);\n  const [fields, setField] = useReducer(fieldReducer, undefined, initFields);\n  const { push } = useContext(ToasterContext);\n\n  const name = fields.find(field => field.name === 'name');\n  const email = fields.find(field => field.name === 'email');\n  const notes = fields.find(field => field.name === 'notes');\n\n  if (!name || !email || !notes) return null;\n\n  const canSubmit = fields.every(field => field.value && field.validator());\n\n  const actions = (\n    <>\n      <Button\n        name='Cancel'\n        variant='secondary'\n        onClick={() => {\n          push({ content: 'Form cancelled!' });\n        }}\n      >\n        Cancel\n      </Button>\n      <Button name='Submit' type='submit' variant='primary' disabled={!canSubmit}>\n        Submit\n      </Button>\n    </>\n  );\n\n  const onImageAdded = (image: File, id: string) => {\n    const src = URL.createObjectURL(image);\n    editorRef.current?.appendImage({ src, alt: image.name }, id);\n  };\n\n  return (\n    <Form\n      actions={actions}\n      onSubmit={(e: FormEvent) => {\n        e.preventDefault();\n        push({ content: 'Form submitted!' });\n      }}\n      style={{ maxWidth: '37.5rem' }}\n    >\n      <Text variant='h4' as='h4'>\n        Demo Form\n      </Text>\n      <Flex container={{ direction: 'column', gap: 2 }} item={{ grow: 1 }}>\n        <Input\n          name='name'\n          label='Name'\n          value={name.value}\n          required={name.required}\n          status={name.status}\n          info='some help text here'\n          onChange={(e: ChangeEvent<HTMLInputElement>) => setField({ ...e })}\n          onBlur={(e: FocusEvent<HTMLInputElement>) => setField({ ...e })}\n          autoComplete='off'\n        />\n\n        <Input\n          name='email'\n          value={email.value}\n          type='email'\n          label='Email'\n          required={email.required}\n          status={email.status}\n          info='some help text here'\n          onChange={(e: ChangeEvent<HTMLInputElement>) => setField({ ...e })}\n          onBlur={(e: FocusEvent<HTMLInputElement>) => setField({ ...e })}\n          autoComplete='off'\n        />\n\n        <CheckboxGroup name='visited' label='Places you have worked'>\n          {['Cambridge', 'Krakow', 'Hyderabad', 'Bangalore'].map(office => (\n            <Checkbox\n              key={office}\n              label={office}\n              onChange={(e: ChangeEvent<HTMLInputElement>) => setField({ ...e })}\n            />\n          ))}\n        </CheckboxGroup>\n\n        <RadioButtonGroup name='meetings' label='Do you enjoy early morning meetings?'>\n          {['Yes', \"No...no I don't\"].map(option => (\n            <RadioButton\n              key={option}\n              label={option}\n              onChange={(e: ChangeEvent<HTMLInputElement>) => setField({ ...e })}\n            />\n          ))}\n        </RadioButtonGroup>\n\n        <Select label='What would you like to eat?' info='FYI: options are limited'>\n          <Option>choose meal...</Option>\n          <Option>Pizza</Option>\n          <Option>Sandwich</Option>\n          <Option>Salad</Option>\n        </Select>\n\n        <ObjectSelectComp\n          label='Date page'\n          info='Choose a when condition from list'\n          items={dataPages}\n          onChange={() => {}}\n          onPreview={() => props.previewCallback()}\n        />\n\n        <TextArea\n          name='notes'\n          required={notes.required}\n          label='Meeting Notes'\n          status={notes.status}\n          info={notes.info || notes.help}\n          onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setField({ ...e })}\n          onBlur={(e: FocusEvent<HTMLInputElement>) => setField({ ...e })}\n        />\n        <RichTextEditor\n          label='Detailed meeting notes'\n          info='The rich text editor can be used in forms, comments, and documents'\n          toolbar={[\n            'inline-styling',\n            'headers',\n            'tables',\n            'links',\n            'images',\n            'lists',\n            'cut-copy-paste',\n            'indentation'\n          ]}\n          onImageAdded={onImageAdded}\n          ref={editorRef}\n        />\n\n        <FileInputDemo />\n      </Flex>\n    </Form>\n  );\n};\n\nexport const PreviewMainContent = () => {\n  const {\n    base: { palette }\n  } = useTheme();\n  const StyledRegion = styled.div`\n    min-height: 120vh;\n    border: dotted 0.1rem ${palette['border-line']};\n    background: ${palette.skeleton};\n  `;\n\n  return (\n    <Flex as={StyledRegion} container={{ alignItems: 'center', justify: 'center' }}>\n      <Text>This is a react region</Text>\n    </Flex>\n  );\n};\n"]}

package/lib/build/PageTemplates/PageTemplates.stories.d.ts

@@ -11,9 +11,8 @@ export interface PageTemplatesStoryProps extends PageTemplateProps {
     showActions?: boolean;
     showBanners?: boolean;
     subTitle?: string;
-    showBranch?: boolean;
-    branchName?: string;
-    statusVariant?: StatusProps['variant'];
+    showStatus?: boolean;
+    statusVariant: StatusProps['variant'];
     statusLabel: string;
     showEditButton?: boolean;
     onEdit?: (e: MouseEvent<HTMLButtonElement>) => void;
@@ -22,6 +21,5 @@ interface AppShellStory {
     main: AppShellProps['main'];
     hideNavigation?: boolean;
 }
-export declare const AppShellWithMenuNavigation: (args: AppShellStory) => JSX.Element;
 export declare const PageTemplatesDemo: Story<PageTemplatesStoryProps & AppShellStory>;
 //# sourceMappingURL=PageTemplates.stories.d.ts.map

package/lib/build/PageTemplates/PageTemplates.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageTemplates.stories.d.ts","sourceRoot":"","sources":["../../../src/build/PageTemplates/PageTemplates.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAiC,UAAU,EAAE,MAAM,OAAO,CAAC;AAGlE,OAAO,EAaL,WAAW,EACX,iBAAiB,EAClB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAY,aAAa,EAA6B,MAAM,0BAA0B,CAAC;;AAa9F,wBAKU;AAEV,MAAM,WAAW,uBAAwB,SAAQ,iBAAiB;IAChE,QAAQ,EACJ,YAAY,GACZ,YAAY,GACZ,cAAc,GACd,aAAa,GACb,aAAa,GACb,aAAa,GACb,kBAAkB,GAClB,kBAAkB,GAClB,oBAAoB,GACpB,QAAQ,CAAC;IACb,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACvC,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CACrD;AAED,UAAU,aAAa;IACrB,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC5B,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,eAAO,MAAM,0BAA0B,SAAU,aAAa,gBAyI7D,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,uBAAuB,GAAG,aAAa,CAkL5E,CAAC"}
+{"version":3,"file":"PageTemplates.stories.d.ts","sourceRoot":"","sources":["../../../src/build/PageTemplates/PageTemplates.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAiC,UAAU,EAAE,MAAM,OAAO,CAAC;AAGlE,OAAO,EAaL,WAAW,EACX,iBAAiB,EAClB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAEL,aAAa,EAId,MAAM,0BAA0B,CAAC;;AAalC,wBAKU;AAEV,MAAM,WAAW,uBAAwB,SAAQ,iBAAiB;IAChE,QAAQ,EACJ,YAAY,GACZ,YAAY,GACZ,cAAc,GACd,aAAa,GACb,aAAa,GACb,aAAa,GACb,kBAAkB,GAClB,kBAAkB,GAClB,oBAAoB,GACpB,QAAQ,CAAC;IACb,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACtC,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CACrD;AAED,UAAU,aAAa;IACrB,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC5B,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,uBAAuB,GAAG,aAAa,CAyY5E,CAAC"}

package/lib/build/PageTemplates/PageTemplates.stories.js

@@ -1,132 +1,21 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useMemo, useContext } from 'react';
 import { action } from '@storybook/addon-actions';
 import { Button, Banner, treeHelpers, StandardTree, Configuration, Modal, ModalManagerContext, BuildTheme, Flex, Text, Actions } from '@pega/cosmos-react-core';
-import { AppShell, TabbedPage, OneColumnPage } from '@pega/cosmos-react-build';
+import { AppShell, TabbedPage, OneColumnPage, ObjectPreview } from '@pega/cosmos-react-build';
 import { TableDemo } from '../../core/Table/Table.stories';
 import { WorkbenchDemo } from '../Workbench/Workbench.stories';
 import { appExplorerMenuList, branchesMenuList, recordMenuList, treeList } from '../AppShell/AppShell.mocks';
-import { OneColumnForm } from './PageTemplates.mocks';
+import { OneColumnForm, PreviewMainContent } from './PageTemplates.mocks';
 export default {
     title: 'Build/PageTemplates',
     parameters: {
         layout: 'fullscreen'
     }
 };
-export const AppShellWithMenuNavigation = (args) => {
-    const [currentNodeId, setCurrentNodeId] = useState();
-    const [allNodes, setAllNodes] = useState(treeList);
-    const onNodeClick = (id) => {
-        const clickedNode = treeHelpers.getNode(allNodes, id);
-        if (!clickedNode?.nodes) {
-            setCurrentNodeId(id);
-            return;
-        }
-        setAllNodes(tree => treeHelpers.mapNode(tree, id, node => {
-            return {
-                ...node,
-                expanded: !node.expanded
-            };
-        }));
-        return (_jsx(StandardTree, { nodes: recordMenuList, onNodeClick: onNodeClick, currentNodeId: currentNodeId }, void 0));
-    };
-    const appHeader = {
-        brand: {
-            name: 'AppStudioX'
-        },
-        utils: {
-            avatar: { name: 'Alan' },
-            search: {
-                placeholder: 'Search anything, anywhere'
-            },
-            branchName: 'test',
-            actions: [
-                {
-                    primary: 'Switch branch',
-                    id: 'switchbranch',
-                    onClick: action('Clicked switchbranch')
-                },
-                {
-                    primary: 'Create branch',
-                    id: 'createbranch',
-                    onClick: action('Clicked createbranch')
-                }
-            ]
-        },
-        links: [
-            {
-                id: '1',
-                name: 'Applications',
-                onClick: action('Clicked Applications')
-            },
-            {
-                id: '2',
-                name: 'Shared resources',
-                onClick: action('Clicked Shared resources')
-            },
-            {
-                id: '3',
-                name: 'Teams',
-                onClick: () => { }
-            },
-            {
-                id: '4',
-                name: 'AI & Analytics',
-                onClick: action('Clicked AI & Analytics')
-            },
-            {
-                id: '5',
-                name: 'Deploy',
-                onClick: action('Clicked Deploy')
-            }
-        ]
-    };
-    return (_jsx(Configuration, { theme: BuildTheme, children: _jsx(AppShell, { main: args.main, appHeader: appHeader, hideNav: args.hideNavigation, appInfo: {
-                text: 'xCompass',
-                visual: {
-                    icon: {
-                        name: 'compass',
-                        bgColor: '#20AA50'
-                    }
-                }
-            }, navigation: {
-                nodes: allNodes,
-                currentNodeId,
-                onNodeClick
-            }, utils: {
-                onItemClick: id => {
-                    if (id === 'explorer') {
-                        setAllNodes(appExplorerMenuList);
-                    }
-                    if (id === 'branches') {
-                        setAllNodes(branchesMenuList);
-                    }
-                    if (id === 'records') {
-                        setAllNodes(recordMenuList);
-                    }
-                },
-                items: [
-                    {
-                        label: 'App Explorer',
-                        id: 'explorer'
-                    },
-                    {
-                        label: 'Branches',
-                        id: 'branches'
-                    },
-                    {
-                        label: 'Records',
-                        id: 'records'
-                    }
-                ],
-                drawer: {
-                    onBeforeClose: () => setAllNodes(treeList)
-                }
-            } }, void 0) }, void 0));
-};
 export const PageTemplatesDemo = (args) => {
     const [currentTabId, setCurrentTabId] = useState('accounts');
-    const [content, setContent] = useState(_jsx(_Fragment, { children: _jsx(TableDemo, {}, void 0) }, void 0));
+    const [content, setContent] = useState(_jsx(TableDemo, {}));
     const { create } = useContext(ModalManagerContext);
     const getPath = () => {
         if (args.showBreadcrumbs) {
@@ -143,7 +32,7 @@ export const PageTemplatesDemo = (args) => {
                 : [];
         }
     };
-    const actions = args.showActions ? (_jsxs(Flex, { container: true, children: [_jsx(Button, { variant: 'primary', children: "Save" }, void 0), _jsx(Actions, { menuAt: 2, items: [
+    const actions = args.showActions ? (_jsxs(Flex, { container: true, children: [_jsx(Button, { variant: 'primary', children: "Save" }), _jsx(Actions, { menuAt: 2, items: [
                     {
                         id: '1',
                         text: 'Page action 1'
@@ -152,13 +41,124 @@ export const PageTemplatesDemo = (args) => {
                         id: '2',
                         text: 'Page action 2'
                     }
-                ] }, void 0)] }, void 0)) : undefined;
-    const banners = args.showBanners ? (_jsx(Banner, { id: 'warning-banner', variant: 'warning', messages: ['This is a warning banner. You have been warned!'] }, void 0)) : undefined;
-    const mainContent = _jsx(OneColumnForm, {}, void 0);
-    const modal = () => (_jsx(Configuration, { theme: BuildTheme, children: _jsx(Modal, { heading: 'This is the Modal heading', autoWidth: false, center: true, stretch: false, children: _jsx(Text, { children: "This is the content of the Modal." }, void 0) }, void 0) }, void 0));
+                ] })] })) : undefined;
+    const banners = args.showBanners ? (_jsx(Banner, { id: 'warning-banner', variant: 'warning', messages: ['This is a warning banner. You have been warned!'] })) : undefined;
+    const mainContent = _jsx(OneColumnForm, {});
+    const modal = () => (_jsx(Configuration, { theme: BuildTheme, children: _jsx(Modal, { heading: 'This is the Modal heading', autoWidth: false, center: true, stretch: false, children: _jsx(Text, { children: "This is the content of the Modal." }) }) }));
+    const AppShellWithMenuNavigation = ({ main, hideNavigation }) => {
+        const [currentNodeId, setCurrentNodeId] = useState();
+        const [allNodes, setAllNodes] = useState(treeList);
+        const onNodeClick = (id) => {
+            const clickedNode = treeHelpers.getNode(allNodes, id);
+            if (!clickedNode?.nodes) {
+                setCurrentNodeId(id);
+                return;
+            }
+            setAllNodes(tree => treeHelpers.mapNode(tree, id, node => {
+                return {
+                    ...node,
+                    expanded: !node.expanded
+                };
+            }));
+            return (_jsx(StandardTree, { nodes: recordMenuList, onNodeClick: onNodeClick, currentNodeId: currentNodeId }));
+        };
+        const appHeader = {
+            brand: {
+                name: 'AppStudioX',
+                visual: {
+                    icon: 'pegasus'
+                }
+            },
+            utils: {
+                avatar: { name: 'Alan' },
+                search: {
+                    placeholder: 'Search anything, anywhere'
+                },
+                branchName: 'test',
+                actions: [
+                    {
+                        primary: 'Switch branch',
+                        id: 'switchbranch',
+                        onClick: action('Clicked switchbranch')
+                    },
+                    {
+                        primary: 'Create branch',
+                        id: 'createbranch',
+                        onClick: action('Clicked createbranch')
+                    }
+                ]
+            },
+            links: [
+                {
+                    id: '1',
+                    name: 'Applications',
+                    onClick: action('Clicked Applications')
+                },
+                {
+                    id: '2',
+                    name: 'Shared resources',
+                    onClick: action('Clicked Shared resources')
+                },
+                {
+                    id: '3',
+                    name: 'Teams',
+                    onClick: () => { }
+                },
+                {
+                    id: '4',
+                    name: 'AI & Analytics',
+                    onClick: action('Clicked AI & Analytics')
+                },
+                {
+                    id: '5',
+                    name: 'Deploy',
+                    onClick: action('Clicked Deploy')
+                }
+            ]
+        };
+        return (_jsx(Configuration, { theme: BuildTheme, children: _jsx(AppShell, { main: main, appHeader: appHeader, hideNav: hideNavigation, appInfo: {
+                    text: 'xCompass',
+                    visual: {
+                        icon: 'compass',
+                        backgroundColor: '#20AA50'
+                    }
+                }, navigation: {
+                    nodes: allNodes,
+                    currentNodeId,
+                    onNodeClick
+                }, utils: {
+                    onItemClick: id => {
+                        if (id === 'explorer') {
+                            setAllNodes(appExplorerMenuList);
+                        }
+                        if (id === 'branches') {
+                            setAllNodes(branchesMenuList);
+                        }
+                        if (id === 'records') {
+                            setAllNodes(recordMenuList);
+                        }
+                    },
+                    items: [
+                        {
+                            label: 'App Explorer',
+                            id: 'explorer'
+                        },
+                        {
+                            label: 'Branches',
+                            id: 'branches'
+                        },
+                        {
+                            label: 'Records',
+                            id: 'records'
+                        }
+                    ],
+                    drawer: {
+                        onBeforeClose: () => setAllNodes(treeList)
+                    }
+                } }) }));
+    };
     const pageTemplateProps = useMemo(() => {
-        const branchName = args.showBranch ? args.branchName : '';
-        const status = args.showBranch
+        const status = args.showStatus
             ? {
                 type: args.statusVariant,
                 label: args.statusLabel
@@ -169,7 +169,6 @@ export const PageTemplatesDemo = (args) => {
             actions,
             banners,
             path: getPath(),
-            branchName,
             status,
             metadata: [
                 { id: '1', name: 'ID', value: 'InterestRate' },
@@ -221,40 +220,106 @@ export const PageTemplatesDemo = (args) => {
         };
     }, [args]);
     let demo;
+    const [openDrawer, setOpenDrawer] = useState(false);
     switch (args.template) {
         case 'one column':
-            demo = _jsx(OneColumnPage, { a: mainContent, ...pageTemplateProps }, void 0);
+            demo = _jsx(OneColumnPage, { a: mainContent, ...pageTemplateProps });
             break;
         case 'tabbed':
         default:
-            demo = (_jsx(TabbedPage, { a: content, tabs: {
-                    tabs: [
-                        { id: 'accounts', name: 'Accounts' },
-                        { id: 'form', name: 'Form' },
-                        { id: 'workbench', name: 'Workbench' }
-                    ],
-                    type: 'horizontal',
-                    currentTabId,
-                    onTabClick: id => {
-                        setCurrentTabId(id);
-                        // eslint-disable-next-line sonarjs/no-nested-switch
-                        switch (id) {
-                            case 'form':
-                                setContent(_jsx(OneColumnForm, {}, void 0));
-                                break;
-                            case 'accounts':
-                                setContent(_jsx(TableDemo, {}, void 0));
-                                break;
-                            case 'workbench':
-                                setContent(_jsx(WorkbenchDemo, {}, void 0));
-                                break;
-                            default:
-                        }
-                    }
-                }, ...pageTemplateProps }, void 0));
+            demo = (_jsxs(_Fragment, { children: [_jsx(TabbedPage, { a: content, tabs: {
+                            tabs: [
+                                { id: 'accounts', name: 'Accounts' },
+                                { id: 'form', name: 'Form' },
+                                { id: 'workbench', name: 'Workbench' }
+                            ],
+                            type: 'horizontal',
+                            currentTabId,
+                            onTabClick: id => {
+                                setCurrentTabId(id);
+                                // eslint-disable-next-line sonarjs/no-nested-switch
+                                switch (id) {
+                                    case 'form':
+                                        setContent(_jsx(OneColumnForm, { previewCallback: () => {
+                                                setOpenDrawer(true);
+                                            } }));
+                                        break;
+                                    case 'accounts':
+                                        setContent(_jsx(TableDemo, {}));
+                                        break;
+                                    case 'workbench':
+                                        setContent(_jsx(WorkbenchDemo, {}));
+                                        break;
+                                    default:
+                                }
+                            }
+                        }, ...pageTemplateProps }), _jsx(ObjectPreview, { open: openDrawer, onDismiss: () => setOpenDrawer(false), header: {
+                            title: 'Interest rate',
+                            metadata: [
+                                { id: '1', name: 'ID', value: 'InterestRate' },
+                                { id: '2', name: 'Rule type', value: 'Field' },
+                                {
+                                    id: '3',
+                                    name: 'Scope',
+                                    value: 'O1XPTI-CCompass-Work-MortgageRequest'
+                                },
+                                { id: '4', name: 'Application', value: 'XCompass' }
+                            ],
+                            additionalInfo: {
+                                title: 'Interest rate',
+                                description: 'Interest rate for the savings account',
+                                fields: [
+                                    {
+                                        id: '1',
+                                        name: 'Id',
+                                        value: 'InterestRate'
+                                    },
+                                    {
+                                        id: '2',
+                                        name: 'Rule type',
+                                        value: 'Field'
+                                    },
+                                    {
+                                        id: '3',
+                                        name: 'Scope',
+                                        value: 'O1XPTI-CCompass-Work-MortgageRequest'
+                                    },
+                                    {
+                                        id: '4',
+                                        name: 'Branch',
+                                        value: 'xCompass (Main)'
+                                    },
+                                    {
+                                        id: '5',
+                                        name: 'Application',
+                                        value: 'XCompass'
+                                    }
+                                ],
+                                onEdit: () => { }
+                            }
+                        }, content: _jsx(PreviewMainContent, {}), primaryAction: {
+                            id: 'PA',
+                            text: 'Save',
+                            onClick: () => { }
+                        }, secondaryAction: {
+                            id: 'SA',
+                            text: 'Open rule',
+                            onClick: () => { }
+                        }, additionalActions: {
+                            items: [
+                                {
+                                    id: '1',
+                                    text: 'Page action 1'
+                                },
+                                {
+                                    id: '2',
+                                    text: 'Page action 2'
+                                }
+                            ]
+                        } })] }));
             break;
     }
-    return (_jsx(AppShellWithMenuNavigation, { main: demo, hideNavigation: args.hideNavigation }, void 0));
+    return (_jsx(AppShellWithMenuNavigation, { main: demo, hideNavigation: args.hideNavigation }));
 };
 PageTemplatesDemo.args = {
     template: 'tabbed',
@@ -265,10 +330,9 @@ PageTemplatesDemo.args = {
     pathData: 'Home,xCompass,Fields',
     showActions: true,
     showBanners: false,
-    showBranch: true,
+    showStatus: true,
     statusVariant: 'pending',
     statusLabel: 'private change',
-    branchName: 'xCompass (Main)',
     showEditButton: true,
     // eslint-disable-next-line demo-patterns/literal-args
     onEdit: action('Clicked edit button in popover')
@@ -285,13 +349,12 @@ PageTemplatesDemo.argTypes = {
     pathData: { control: { type: 'text' } },
     showActions: { control: { type: 'boolean' } },
     showBanners: { control: { type: 'boolean' } },
-    showBranch: { control: { type: 'boolean' } },
+    showStatus: { control: { type: 'boolean' } },
     statusVariant: {
         options: ['success', 'urgent', 'warn', 'pending', 'info'],
         control: { type: 'select' }
     },
     statusLabel: { control: { type: 'text' } },
-    branchName: { control: { type: 'text' } },
     showEditButton: { control: { type: 'boolean' } },
     onEdit: { table: { disable: true } }
 };