@pega/cosmos-react-demos 3.0.0-dev.1.0 → 3.0.0-dev.10.0

package/jsx/build/PageTemplates/PageTemplates.mocks.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageTemplates.mocks.jsx","sourceRoot":"","sources":["../../../src/build/PageTemplates/PageTemplates.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FormEvent,\n  ChangeEvent,\n  FocusEvent,\n  useReducer,\n  useRef,\n  useContext,\n  useState\n} 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  BuildTheme,\n  Configuration,\n  StandardTree,\n  StandardTreeProps,\n  treeHelpers\n} from '@pega/cosmos-react-core';\nimport { RichTextEditor, RichTextEditorState } from '@pega/cosmos-react-rte';\nimport { AppShell, AppShellProps } from '@pega/cosmos-react-build';\n\nimport { FileInputDemo } from '../../core/File/FileInput.stories';\nimport { dataPages, ObjectSelectComp } from '../ObjectSelect/ObjectSelect.mocks';\nimport {\n  treeList,\n  recordMenuList,\n  appExplorerMenuList,\n  branchesMenuList\n} from '../AppShell/AppShell.mocks';\n\ninterface Field extends FormControlProps {\n  help?: string;\n  error?: string;\n  validator: (this: Field) => boolean;\n}\n\nexport interface AppShellStory {\n  main?: AppShellProps['main'];\n  hideNavigation?: 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\nexport const AppShellWithMenuNavigation = ({ main, hideNavigation }: AppShellStory) => {\n  const [currentNodeId, setCurrentNodeId] = useState<string | undefined>();\n  const [allNodes, setAllNodes] = useState<StandardTreeProps['nodes']>(treeList);\n\n  const onNodeClick = (id: string) => {\n    const clickedNode = treeHelpers.getNode(allNodes, id);\n\n    if (!clickedNode?.nodes) {\n      setCurrentNodeId(id);\n      return;\n    }\n\n    setAllNodes(tree =>\n      treeHelpers.mapNode(tree, id, node => {\n        return {\n          ...node,\n          expanded: !node.expanded\n        };\n      })\n    );\n\n    return (\n      <StandardTree\n        nodes={recordMenuList}\n        onNodeClick={onNodeClick}\n        currentNodeId={currentNodeId}\n      />\n    );\n  };\n\n  const appHeader = {\n    brand: {\n      name: 'AppStudioX',\n      visual: {\n        icon: 'pegasus'\n      }\n    },\n    utils: {\n      avatar: { name: 'Alan' },\n      search: {\n        placeholder: 'Search anything, anywhere'\n      },\n      branch: {\n        text: 'Alpha branch',\n        items: [\n          {\n            primary: 'Commit to branch',\n            id: 'commitToBranch',\n            onClick: () => {}\n          },\n          {\n            primary: 'Merge branch',\n            id: 'mergeBranch',\n            onClick: () => {}\n          },\n          {\n            primary: 'View branch',\n            id: 'viewBranch',\n            onClick: () => {}\n          },\n          {\n            primary: 'Switch branch',\n            id: 'switchBranch',\n            onClick: () => {}\n          },\n          {\n            primary: 'Add branch',\n            id: 'addBranch',\n            onClick: () => {}\n          },\n          {\n            primary: 'View all branches',\n            id: 'viewAllBranches',\n            onClick: () => {}\n          }\n        ]\n      },\n      action: {\n        id: 'preview',\n        text: 'Preview',\n        onClick: () => {}\n      }\n    },\n    links: [\n      {\n        id: '1',\n        name: 'Applications',\n        onClick: () => {}\n      },\n      {\n        id: '2',\n        name: 'Shared resources',\n        onClick: () => {}\n      },\n      {\n        id: '3',\n        name: 'Teams',\n        onClick: () => {}\n      },\n      {\n        id: '4',\n        name: 'AI & Analytics',\n        onClick: () => {}\n      },\n      {\n        id: '5',\n        name: 'Deploy',\n        onClick: () => {}\n      }\n    ]\n  };\n\n  return (\n    <Configuration theme={BuildTheme}>\n      <AppShell\n        main={main}\n        appHeader={appHeader}\n        hideNav={hideNavigation}\n        appInfo={{\n          text: 'xCompass',\n          visual: {\n            icon: 'compass',\n            backgroundColor: '#20AA50'\n          }\n        }}\n        navigation={{\n          nodes: allNodes,\n          currentNodeId,\n          onNodeClick\n        }}\n        utils={{\n          onItemClick: id => {\n            if (id === 'explorer') {\n              setAllNodes(appExplorerMenuList);\n            }\n\n            if (id === 'branches') {\n              setAllNodes(branchesMenuList);\n            }\n\n            if (id === 'records') {\n              setAllNodes(recordMenuList);\n            }\n          },\n          items: [\n            {\n              label: 'App Explorer',\n              id: 'explorer'\n            },\n            {\n              label: 'Branches',\n              id: 'branches'\n            },\n            {\n              label: 'Records',\n              id: 'records'\n            }\n          ],\n          drawer: {\n            onBeforeClose: () => setAllNodes(treeList)\n          }\n        }}\n      />\n    </Configuration>\n  );\n};\n"]}

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

@@ -1,26 +1,21 @@
 import { Meta, Story } from '@storybook/react';
 import { MouseEvent } from 'react';
 import { StatusProps, PageTemplateProps } from '@pega/cosmos-react-core';
-import { AppShellProps } from '@pega/cosmos-react-build';
+import { AppShellStory } from './PageTemplates.mocks';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export interface PageTemplatesStoryProps extends PageTemplateProps {
-    template: 'one column' | 'two column' | 'three column' | 'four column' | 'wide narrow' | 'narrow wide' | 'wide wide narrow' | 'narrow wide wide' | 'narrow wide narrow' | 'tabbed';
+    template?: 'one column' | 'two column' | 'three column' | 'four column' | 'wide narrow' | 'narrow wide' | 'wide wide narrow' | 'narrow wide wide' | 'narrow wide narrow' | 'tabbed';
     showBreadcrumbs?: boolean;
     pathData?: string;
     showActions?: boolean;
     showBanners?: boolean;
     subTitle?: string;
-    showBranch?: boolean;
-    branchName?: string;
+    showStatus?: boolean;
     statusVariant?: StatusProps['variant'];
-    statusLabel: string;
+    statusLabel?: string;
     showEditButton?: boolean;
     onEdit?: (e: MouseEvent<HTMLButtonElement>) => void;
 }
-interface AppShellStory {
-    main: AppShellProps['main'];
-    hideNavigation?: boolean;
-}
 export declare const PageTemplatesDemo: Story<PageTemplatesStoryProps & AppShellStory>;
 //# sourceMappingURL=PageTemplates.stories.d.ts.map

package/jsx/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,EASL,UAAU,EACX,MAAM,OAAO,CAAC;AAGf,OAAO,EAwBL,WAAW,EACX,iBAAiB,EAClB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAY,aAAa,EAA6B,MAAM,0BAA0B,CAAC;;AAW9F,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;AAQD,UAAU,aAAa;IACrB,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC5B,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAkVD,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,uBAAuB,GAAG,aAAa,CA2L5E,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,EAUL,WAAW,EACX,iBAAiB,EAClB,MAAM,yBAAyB,CAAC;AAMjC,OAAO,EAGL,aAAa,EAEd,MAAM,uBAAuB,CAAC;;AAE/B,wBAKU;AAEV,MAAM,WAAW,uBAAwB,SAAQ,iBAAiB;IAChE,QAAQ,CAAC,EACL,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,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CACrD;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,uBAAuB,GAAG,aAAa,CAiQ5E,CAAC"}

package/jsx/build/PageTemplates/PageTemplates.stories.jsx

@@ -1,260 +1,17 @@
-import { useState, useMemo, useReducer, useRef, useContext } from 'react';
+import { useState, useMemo, useContext } from 'react';
 import { action } from '@storybook/addon-actions';
-import { Button, Banner, treeHelpers, StandardTree, Configuration, Modal, ModalManagerContext, BuildTheme, Flex, Form, Input, CheckboxGroup, RadioButtonGroup, RadioButton, Checkbox, Select, Option, TextArea, ToasterContext, Text, Actions } from '@pega/cosmos-react-core';
-import { RichTextEditor } from '@pega/cosmos-react-rte';
-import { AppShell, TabbedPage, OneColumnPage } from '@pega/cosmos-react-build';
-import { FileInputDemo } from '@pega/cosmos-react-demos/lib/core/File/FileInput.stories';
-import { TableDemo } from '@pega/cosmos-react-demos/lib/core/Table/Table.stories';
-import { WorkbenchDemo } from '@pega/cosmos-react-demos/lib/build/Workbench/Workbench.stories';
-import { appExplorerMenuList, branchesMenuList, recordMenuList, treeList } from '@pega/cosmos-react-demos/lib/build/AppShell/AppShell.mocks';
+import { Button, Banner, Configuration, Modal, ModalManagerContext, BuildTheme, Flex, Text, Actions } from '@pega/cosmos-react-core';
+import { TabbedPage, OneColumnPage, ObjectPreview } from '@pega/cosmos-react-build';
+import { TableDemo } from '../../core/Table/Table.stories';
+import { WorkbenchDemo } from '../Workbench/Workbench.stories';
+import { OneColumnForm, AppShellWithMenuNavigation, PreviewMainContent } from './PageTemplates.mocks';
 export default {
     title: 'Build/PageTemplates',
     parameters: {
         layout: 'fullscreen'
     }
 };
-const initFields = () => {
-    const common = { value: undefined, status: undefined };
-    return [
-        {
-            ...common,
-            name: 'name',
-            required: true,
-            error: 'Please enter first and last name',
-            validator() {
-                if (!this.value)
-                    return false;
-                return /^[a-z]+\s[a-z]+$/i.test(this.value);
-            }
-        },
-        {
-            ...common,
-            name: 'email',
-            required: true,
-            error: 'Enter a @pega.com address',
-            validator() {
-                if (!this.value)
-                    return false;
-                return /^\S+@pega\.com$/.test(this.value);
-            }
-        },
-        {
-            ...common,
-            name: 'notes',
-            required: true,
-            help: 'See how fast you can type 20 characters go',
-            error: 'You need to tell us more than 20 characters',
-            validator() {
-                if (!this.value)
-                    return false;
-                return this.value.length >= 20;
-            }
-        }
-    ];
-};
-const fieldReducer = (fields, { target, type }) => {
-    return fields.map(field => {
-        if (field.name === target.name) {
-            field.value = target.value;
-            if (type === 'blur' || field.status === 'error') {
-                if ((field.required || field.value) && !field.validator()) {
-                    field.status = 'error';
-                    field.info = field.error;
-                }
-                else {
-                    field.status = undefined;
-                    field.info = field.help;
-                }
-            }
-        }
-        return field;
-    });
-};
-const OneColumnForm = () => {
-    const editorRef = useRef(null);
-    const [fields, setField] = useReducer(fieldReducer, undefined, initFields);
-    const { push } = useContext(ToasterContext);
-    const name = fields.find(field => field.name === 'name');
-    const email = fields.find(field => field.name === 'email');
-    const notes = fields.find(field => field.name === 'notes');
-    if (!name || !email || !notes)
-        return null;
-    const canSubmit = fields.every(field => field.value && field.validator());
-    const actions = (<>
-      <Button name='Cancel' variant='secondary' onClick={() => {
-            push({ content: 'Form cancelled!' });
-        }}>
-        Cancel
-      </Button>
-      <Button name='Submit' type='submit' variant='primary' disabled={!canSubmit}>
-        Submit
-      </Button>
-    </>);
-    const onImageAdded = (image, id) => {
-        const src = URL.createObjectURL(image);
-        editorRef.current?.appendImage({ src, alt: image.name }, id);
-    };
-    return (<Form actions={actions} onSubmit={(e) => {
-            e.preventDefault();
-            push({ content: 'Form submitted!' });
-        }} style={{ maxWidth: '37.5rem' }}>
-      <Text variant='h4' as='h4'>
-        Demo Form
-      </Text>
-      <Flex container={{ direction: 'column', gap: 2 }} item={{ grow: 1 }}>
-        <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'/>
-
-        <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'/>
-
-        <CheckboxGroup name='visited' label='Places you have worked'>
-          {['Cambridge', 'Krakow', 'Hyderabad', 'Bangalore'].map(office => (<Checkbox key={office} label={office} onChange={(e) => setField({ ...e })}/>))}
-        </CheckboxGroup>
-
-        <RadioButtonGroup name='meetings' label='Do you enjoy early morning meetings?'>
-          {['Yes', "No...no I don't"].map(option => (<RadioButton key={option} label={option} onChange={(e) => setField({ ...e })}/>))}
-        </RadioButtonGroup>
-
-        <Select label='What would you like to eat?' info='FYI: options are limited'>
-          <Option>choose meal...</Option>
-          <Option>Pizza</Option>
-          <Option>Sandwich</Option>
-          <Option>Salad</Option>
-        </Select>
-
-        <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 })}/>
-        <RichTextEditor label='Detailed meeting notes' info='The rich text editor can be used in forms, comments, and documents' toolbar={[
-            'inline-styling',
-            'headers',
-            'tables',
-            'links',
-            'images',
-            'lists',
-            'cut-copy-paste',
-            'indentation'
-        ]} onImageAdded={onImageAdded} ref={editorRef}/>
-
-        <FileInputDemo />
-      </Flex>
-    </Form>);
-};
-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 (<StandardTree nodes={recordMenuList} onNodeClick={onNodeClick} currentNodeId={currentNodeId}/>);
-    };
-    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 (<Configuration theme={BuildTheme}>
-      <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)
-            }
-        }}/>
-    </Configuration>);
-};
 export const PageTemplatesDemo = (args) => {
-    const [currentTabId, setCurrentTabId] = useState('accounts');
-    const [content, setContent] = useState(<>
-      <TableDemo />
-    </>);
     const { create } = useContext(ModalManagerContext);
     const getPath = () => {
         if (args.showBreadcrumbs) {
@@ -284,20 +41,17 @@ export const PageTemplatesDemo = (args) => {
         ]}/>
     </Flex>) : undefined;
     const banners = args.showBanners ? (<Banner id='warning-banner' variant='warning' messages={['This is a warning banner. You have been warned!']}/>) : undefined;
-    const mainContent = (<Flex container>
-      <OneColumnForm />
-    </Flex>);
+    const mainContent = <OneColumnForm />;
     const modal = () => (<Configuration theme={BuildTheme}>
       <Modal heading='This is the Modal heading' autoWidth={false} center stretch={false}>
         <Text>This is the content of the Modal.</Text>
       </Modal>
     </Configuration>);
     const pageTemplateProps = useMemo(() => {
-        const branchName = args.showBranch ? args.branchName : '';
-        const status = args.showBranch
+        const status = args.showStatus
             ? {
-                type: args.statusVariant,
-                label: args.statusLabel
+                type: args.statusVariant || 'pending',
+                label: args.statusLabel || 'private change'
             }
             : undefined;
         return {
@@ -305,7 +59,6 @@ export const PageTemplatesDemo = (args) => {
             actions,
             banners,
             path: getPath(),
-            branchName,
             status,
             metadata: [
                 { id: '1', name: 'ID', value: 'InterestRate' },
@@ -356,39 +109,110 @@ export const PageTemplatesDemo = (args) => {
             }
         };
     }, [args]);
+    const [tabs, setTabs] = useState([
+        { id: 'accounts', name: 'Accounts', content: <TableDemo /> },
+        { id: 'form', name: 'Form', content: null },
+        { id: 'workbench', name: 'Workbench', content: null }
+    ]);
     let demo;
+    const [openDrawer, setOpenDrawer] = useState(false);
     switch (args.template) {
         case 'one column':
             demo = <OneColumnPage a={mainContent} {...pageTemplateProps}/>;
             break;
         case 'tabbed':
         default:
-            demo = (<TabbedPage a={content} tabs={{
-                    tabs: [
-                        { id: 'accounts', name: 'Accounts' },
-                        { id: 'form', name: 'Form' },
-                        { id: 'workbench', name: 'Workbench' }
-                    ],
+            demo = (<>
+          <TabbedPage tabs={{
+                    tabs,
                     type: 'horizontal',
-                    currentTabId,
                     onTabClick: id => {
-                        setCurrentTabId(id);
                         switch (id) {
                             case 'form':
-                                setContent(<Flex container>
-                      <OneColumnForm />
-                    </Flex>);
-                                break;
-                            case 'accounts':
-                                setContent(<TableDemo />);
+                                if (tabs[1].content === null) {
+                                    const updatedTabs = [...tabs];
+                                    updatedTabs[1].content = (<OneColumnForm previewCallback={() => {
+                                            setOpenDrawer(true);
+                                        }}/>);
+                                    setTabs(updatedTabs);
+                                }
                                 break;
                             case 'workbench':
-                                setContent(<WorkbenchDemo />);
+                                if (tabs[2].content === null) {
+                                    const updatedTabs = [...tabs];
+                                    updatedTabs[2].content = <WorkbenchDemo />;
+                                    setTabs(updatedTabs);
+                                }
                                 break;
                             default:
                         }
                     }
-                }} {...pageTemplateProps}/>);
+                }} {...pageTemplateProps}/>
+          <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={<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 (<AppShellWithMenuNavigation main={demo} hideNavigation={args.hideNavigation}/>);
@@ -402,10 +226,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,
     onEdit: action('Clicked edit button in popover')
 };
@@ -421,13 +244,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 } }
 };