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

package/jsx/build/ObjectSelect/ObjectSelect.styles.js

@@ -0,0 +1,27 @@
+import styled, { css } from 'styled-components';
+import { defaultThemeProp, StyledRegion } from '@pega/cosmos-react-core';
+export const StyledDrawerContent = styled.div(props => {
+    const { theme: { base } } = props;
+    return css `
+    height: 100%;
+    background-color: ${base.palette['primary-background']};
+  `;
+});
+StyledDrawerContent.defaultProps = defaultThemeProp;
+export const StyledCodeBlock = styled.pre(({ theme }) => {
+    return css `
+    padding: ${theme.base.spacing};
+    margin-bottom: ${theme.base.spacing};
+  `;
+});
+StyledCodeBlock.defaultProps = defaultThemeProp;
+export const StyledConfigurationContent = styled.div(({ theme }) => {
+    return css `
+    ${StyledRegion} {
+      border: 0.0625rem dashed ${theme.base.palette['border-line']};
+      background-color: ${theme.base.palette['secondary-background']};
+    }
+  `;
+});
+StyledConfigurationContent.defaultProps = defaultThemeProp;
+//# sourceMappingURL=ObjectSelect.styles.js.map

package/jsx/build/ObjectSelect/ObjectSelect.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ObjectSelect.styles.js","sourceRoot":"","sources":["../../../src/build/ObjectSelect/ObjectSelect.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAEzE,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;IACpD,MAAM,EACJ,KAAK,EAAE,EAAE,IAAI,EAAE,EAChB,GAAG,KAAK,CAAC;IAEV,OAAO,GAAG,CAAA;;wBAEY,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;GACvD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACtD,OAAO,GAAG,CAAA;eACG,KAAK,CAAC,IAAI,CAAC,OAAO;qBACZ,KAAK,CAAC,IAAI,CAAC,OAAO;GACpC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACjE,OAAO,GAAG,CAAA;MACN,YAAY;iCACe,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;0BACxC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,sBAAsB,CAAC;;GAEjE,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,0BAA0B,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, StyledRegion } from '@pega/cosmos-react-core';\n\nexport const StyledDrawerContent = styled.div(props => {\n  const {\n    theme: { base }\n  } = props;\n\n  return css`\n    height: 100%;\n    background-color: ${base.palette['primary-background']};\n  `;\n});\n\nStyledDrawerContent.defaultProps = defaultThemeProp;\n\nexport const StyledCodeBlock = styled.pre(({ theme }) => {\n  return css`\n    padding: ${theme.base.spacing};\n    margin-bottom: ${theme.base.spacing};\n  `;\n});\n\nStyledCodeBlock.defaultProps = defaultThemeProp;\n\nexport const StyledConfigurationContent = styled.div(({ theme }) => {\n  return css`\n    ${StyledRegion} {\n      border: 0.0625rem dashed ${theme.base.palette['border-line']};\n      background-color: ${theme.base.palette['secondary-background']};\n    }\n  `;\n});\n\nStyledConfigurationContent.defaultProps = defaultThemeProp;\n"]}

package/jsx/build/PageTemplates/GalleryPage.mocks.d.ts

@@ -0,0 +1,46 @@
+/// <reference types="react" />
+export declare const appHeader: {
+    brand: {
+        name: string;
+        visual: {};
+    };
+    utils: {
+        avatar: {
+            name: string;
+        };
+        search: {
+            placeholder: string;
+        };
+        branchName: string;
+        actions: {
+            primary: string;
+            id: string;
+            onClick: () => void;
+        }[];
+    };
+    links: {
+        id: string;
+        name: string;
+        onClick: () => void;
+    }[];
+};
+export declare const getOverviewCardData: () => {
+    id: string;
+    title: string;
+    description: string;
+    meta: (string | JSX.Element)[];
+    visual: {
+        icon: string;
+        color: string;
+        backgroundColor: string;
+        imageSrc?: undefined;
+        name?: undefined;
+    } | {
+        imageSrc: string;
+        name: string;
+        icon?: undefined;
+        color?: undefined;
+        backgroundColor?: undefined;
+    };
+}[];
+//# sourceMappingURL=GalleryPage.mocks.d.ts.map

package/jsx/build/PageTemplates/GalleryPage.mocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GalleryPage.mocks.d.ts","sourceRoot":"","sources":["../../../src/build/PageTemplates/GalleryPage.mocks.tsx"],"names":[],"mappings":";AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;CAmDrB,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;GAyB/B,CAAC"}

package/jsx/build/PageTemplates/GalleryPage.mocks.jsx

@@ -0,0 +1,76 @@
+import { createUID, range, Status } from '@pega/cosmos-react-core';
+export const appHeader = {
+    brand: {
+        name: 'AppStudioX',
+        visual: {}
+    },
+    utils: {
+        avatar: { name: 'Alan' },
+        search: {
+            placeholder: 'Search anything, anywhere…'
+        },
+        branchName: 'test',
+        actions: [
+            {
+                primary: 'Switch branch',
+                id: 'switchbranch',
+                onClick: () => { }
+            },
+            {
+                primary: 'Create branch',
+                id: 'createbranch',
+                onClick: () => { }
+            }
+        ]
+    },
+    links: [
+        {
+            id: '1',
+            name: 'Applications',
+            onClick: () => { }
+        },
+        {
+            id: '2',
+            name: 'Shared resources',
+            onClick: () => { }
+        },
+        {
+            id: '3',
+            name: 'Teams',
+            onClick: () => { }
+        },
+        {
+            id: '4',
+            name: 'AI & Analytics',
+            onClick: () => { }
+        },
+        {
+            id: '5',
+            name: 'Deploy',
+            onClick: () => { }
+        }
+    ]
+};
+export const getOverviewCardData = () => {
+    return range(1, 14).map(num => ({
+        id: createUID(),
+        title: num % 2 !== 0
+            ? `Application ${num}`
+            : `Application ${num} with long name to simulate ellipsis`,
+        description: num % 2 !== 0
+            ? `Description for application with id ${num}`
+            : `Long Description for application with id ${num} to simulate ellipsis in the application description in stories`,
+        meta: [<Status variant='success'>in production</Status>, '1.0.0'],
+        visual: num % 2 !== 0
+            ? {
+                icon: 'phone-in-solid',
+                color: '#ffffff',
+                backgroundColor: '#0ac7c8'
+            }
+            : {
+                imageSrc: 'https://www.pega.com/sites/default/files/media/images/2018-12/Pega.com-og.png',
+                name: 'Image for the card summary'
+            }
+    }));
+};
+//# sourceMappingURL=GalleryPage.mocks.jsx.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GalleryPage.mocks.jsx","sourceRoot":"","sources":["../../../src/build/PageTemplates/GalleryPage.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEnE,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,KAAK,EAAE;QACL,IAAI,EAAE,YAAY;QAClB,MAAM,EAAE,EAAE;KACX;IACD,KAAK,EAAE;QACL,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;QACxB,MAAM,EAAE;YACN,WAAW,EAAE,4BAA4B;SAC1C;QACD,UAAU,EAAE,MAAM;QAClB,OAAO,EAAE;YACP;gBACE,OAAO,EAAE,eAAe;gBACxB,EAAE,EAAE,cAAc;gBAClB,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC;aAClB;YACD;gBACE,OAAO,EAAE,eAAe;gBACxB,EAAE,EAAE,cAAc;gBAClB,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC;aAClB;SACF;KACF;IACD,KAAK,EAAE;QACL;YACE,EAAE,EAAE,GAAG;YACP,IAAI,EAAE,cAAc;YACpB,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC;SAClB;QACD;YACE,EAAE,EAAE,GAAG;YACP,IAAI,EAAE,kBAAkB;YACxB,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC;SAClB;QACD;YACE,EAAE,EAAE,GAAG;YACP,IAAI,EAAE,OAAO;YACb,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC;SAClB;QACD;YACE,EAAE,EAAE,GAAG;YACP,IAAI,EAAE,gBAAgB;YACtB,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC;SAClB;QACD;YACE,EAAE,EAAE,GAAG;YACP,IAAI,EAAE,QAAQ;YACd,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC;SAClB;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,EAAE;IACtC,OAAO,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;QAC9B,EAAE,EAAE,SAAS,EAAE;QACf,KAAK,EACH,GAAG,GAAG,CAAC,KAAK,CAAC;YACX,CAAC,CAAC,eAAe,GAAG,EAAE;YACtB,CAAC,CAAC,eAAe,GAAG,sCAAsC;QAC9D,WAAW,EACT,GAAG,GAAG,CAAC,KAAK,CAAC;YACX,CAAC,CAAC,uCAAuC,GAAG,EAAE;YAC9C,CAAC,CAAC,4CAA4C,GAAG,iEAAiE;QACtH,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,aAAa,EAAE,MAAM,CAAC,EAAE,OAAO,CAAC;QACjE,MAAM,EACJ,GAAG,GAAG,CAAC,KAAK,CAAC;YACX,CAAC,CAAC;gBACE,IAAI,EAAE,gBAAgB;gBACtB,KAAK,EAAE,SAAS;gBAChB,eAAe,EAAE,SAAS;aAC3B;YACH,CAAC,CAAC;gBACE,QAAQ,EACN,+EAA+E;gBACjF,IAAI,EAAE,4BAA4B;aACnC;KACR,CAAC,CAAC,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { createUID, range, Status } from '@pega/cosmos-react-core';\n\nexport const appHeader = {\n  brand: {\n    name: 'AppStudioX',\n    visual: {}\n  },\n  utils: {\n    avatar: { name: 'Alan' },\n    search: {\n      placeholder: 'Search anything, anywhere…'\n    },\n    branchName: 'test',\n    actions: [\n      {\n        primary: 'Switch branch',\n        id: 'switchbranch',\n        onClick: () => {}\n      },\n      {\n        primary: 'Create branch',\n        id: 'createbranch',\n        onClick: () => {}\n      }\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\nexport const getOverviewCardData = () => {\n  return range(1, 14).map(num => ({\n    id: createUID(),\n    title:\n      num % 2 !== 0\n        ? `Application ${num}`\n        : `Application ${num} with long name to simulate ellipsis`,\n    description:\n      num % 2 !== 0\n        ? `Description for application with id ${num}`\n        : `Long Description for application with id ${num} to simulate ellipsis in the application description in stories`,\n    meta: [<Status variant='success'>in production</Status>, '1.0.0'],\n    visual:\n      num % 2 !== 0\n        ? {\n            icon: 'phone-in-solid',\n            color: '#ffffff',\n            backgroundColor: '#0ac7c8'\n          }\n        : {\n            imageSrc:\n              'https://www.pega.com/sites/default/files/media/images/2018-12/Pega.com-og.png',\n            name: 'Image for the card summary'\n          }\n  }));\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"GalleryPage.stories.d.ts","sourceRoot":"","sources":["../../../src/build/PageTemplates/GalleryPage.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAO/C,wBAMU;AAEV,UAAU,eAAe;IACvB,aAAa,EAAE,MAAM,CAAC;IACtB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,cAAc,EAAE,OAAO,CAAC;IACxB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,qBAAqB,EAAE,MAAM,CAAC;CAC/B;AAwGD,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,eAAe,CAsB1D,CAAC"}
+{"version":3,"file":"GalleryPage.stories.d.ts","sourceRoot":"","sources":["../../../src/build/PageTemplates/GalleryPage.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAO/C,wBAMU;AAEV,UAAU,eAAe;IACvB,aAAa,EAAE,MAAM,CAAC;IACtB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,cAAc,EAAE,OAAO,CAAC;IACxB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,qBAAqB,EAAE,MAAM,CAAC;CAC/B;AAED,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,eAAe,CA+C1D,CAAC"}

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

@@ -1,6 +1,6 @@
 import { action } from '@storybook/addon-actions';
-import { createUID, range, Status } from '@pega/cosmos-react-core';
 import { AppShell, GalleryPage } from '@pega/cosmos-react-build';
+import { appHeader, getOverviewCardData } from './GalleryPage.mocks';
 export default {
     title: 'Build/GalleryPage',
     component: GalleryPage,
@@ -8,93 +8,17 @@ export default {
         layout: 'fullscreen'
     }
 };
-const appHeader = {
-    brand: {
-        name: 'AppStudioX'
-    },
-    utils: {
-        avatar: { name: 'Alan' },
-        search: {
-            placeholder: 'Search anything, anywhere…'
-        },
-        branchName: 'test',
-        actions: [
-            {
-                primary: 'Switch branch',
-                id: 'switchbranch',
-                onClick: () => { }
-            },
-            {
-                primary: 'Create branch',
-                id: 'createbranch',
-                onClick: () => { }
-            }
-        ]
-    },
-    links: [
-        {
-            id: '1',
-            name: 'Applications',
-            onClick: () => { }
-        },
-        {
-            id: '2',
-            name: 'Shared resources',
-            onClick: () => { }
-        },
-        {
-            id: '3',
-            name: 'Teams',
-            onClick: () => { }
-        },
-        {
-            id: '4',
-            name: 'AI & Analytics',
-            onClick: () => { }
-        },
-        {
-            id: '5',
-            name: 'Deploy',
-            onClick: () => { }
-        }
-    ]
-};
-const getOverviewCardData = () => {
-    return range(1, 14).map(num => ({
-        id: createUID(),
-        title: num % 2 !== 0
-            ? `Application ${num}`
-            : `Application ${num} with long name to simulate ellipsis`,
-        description: num % 2 !== 0
-            ? `Description for application with id ${num}`
-            : `Long Description for application with id ${num} to simulate ellipsis in the application description in stories`,
-        meta: [<Status variant='success'>in production</Status>, '1.0.0'],
-        visual: num % 2 !== 0
-            ? {
-                icon: {
-                    name: 'phone-in-solid',
-                    bgColor: '#0ac7c8'
-                }
-            }
-            : {
-                image: {
-                    src: 'https://www.pega.com/sites/default/files/styles/2560/public/media/images/2019-01/pega-logo_0.png',
-                    alt: 'Image for the card summary'
-                }
-            }
-    }));
-};
-const GalleryPageDemo = ({ args }) => (<GalleryPage heading={args.bannerHeading} description={args.bannerDescription} image={{
-        src: 'https://www.pega.com/sites/default/files/styles/2560/public/media/images/2019-01/pega-logo_0.png',
-        alt: 'Image for the banner'
-    }} items={args.showEmptyState ? [] : getOverviewCardData()} emptyState={{
-        heading: args.emptyStateHeading,
-        description: args.emptyStateDescription
-    }} action={{
-        text: 'New application',
-        onClick: action('Clicked New application button')
-    }} onItemClick={action('Clicked interactive card')}/>);
 export const AppShellWithGalleryPage = (args) => {
+    const GalleryPageDemo = ({ bannerHeading, bannerDescription, showEmptyState, emptyStateHeading, emptyStateDescription }) => (<GalleryPage heading={bannerHeading} description={bannerDescription} image={{
+            src: 'https://www.pega.com/sites/default/files/styles/2560/public/media/images/2019-01/pega-logo_0.png',
+            alt: 'Image for the banner'
+        }} items={showEmptyState ? [] : getOverviewCardData()} emptyState={{
+            heading: emptyStateHeading,
+            description: emptyStateDescription
+        }} action={{
+            text: 'New application',
+            onClick: action('Clicked New application button')
+        }} onItemClick={action('Clicked interactive card')}/>);
     return (<AppShell navigation={{
             nodes: [],
             currentNodeId: '1',
@@ -102,12 +26,10 @@ export const AppShellWithGalleryPage = (args) => {
         }} appInfo={{
             text: 'U+ Desk',
             visual: {
-                icon: {
-                    name: 'phone-in-solid',
-                    bgColor: '#0ac7c8'
-                }
+                icon: 'phone-in-solid',
+                backgroundColor: '#0ac7c8'
             }
-        }} appHeader={appHeader} main={<GalleryPageDemo args={args}/>} hideNav/>);
+        }} appHeader={appHeader} main={<GalleryPageDemo {...args}/>} hideNav/>);
 };
 AppShellWithGalleryPage.args = {
     bannerHeading: 'Applications',

package/jsx/build/PageTemplates/GalleryPage.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"GalleryPage.stories.jsx","sourceRoot":"","sources":["../../../src/build/PageTemplates/GalleryPage.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { action } from '@storybook/addon-actions';\nimport { FC } from 'react';\n\nimport { createUID, range, Status } from '@pega/cosmos-react-core';\nimport { AppShell, GalleryPage } from '@pega/cosmos-react-build';\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\nconst appHeader = {\n  brand: {\n    name: 'AppStudioX'\n  },\n  utils: {\n    avatar: { name: 'Alan' },\n    search: {\n      placeholder: 'Search anything, anywhere…'\n    },\n    branchName: 'test',\n    actions: [\n      {\n        primary: 'Switch branch',\n        id: 'switchbranch',\n        onClick: () => {}\n      },\n      {\n        primary: 'Create branch',\n        id: 'createbranch',\n        onClick: () => {}\n      }\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\nconst getOverviewCardData = () => {\n  return range(1, 14).map(num => ({\n    id: createUID(),\n    title:\n      num % 2 !== 0\n        ? `Application ${num}`\n        : `Application ${num} with long name to simulate ellipsis`,\n    description:\n      num % 2 !== 0\n        ? `Description for application with id ${num}`\n        : `Long Description for application with id ${num} to simulate ellipsis in the application description in stories`,\n    meta: [<Status variant='success'>in production</Status>, '1.0.0'],\n    visual:\n      num % 2 !== 0\n        ? {\n            icon: {\n              name: 'phone-in-solid',\n              bgColor: '#0ac7c8'\n            }\n          }\n        : {\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 card summary'\n            }\n          }\n  }));\n};\n\nconst GalleryPageDemo: FC<{ args: GalleryPageArgs }> = ({ args }) => (\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={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.jsx","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,CAAC,WAAW,CACV,OAAO,CAAC,CAAC,aAAa,CAAC,CACvB,WAAW,CAAC,CAAC,iBAAiB,CAAC,CAC/B,KAAK,CAAC,CAAC;YACL,GAAG,EAAE,kGAAkG;YACvG,GAAG,EAAE,sBAAsB;SAC5B,CAAC,CACF,KAAK,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB,EAAE,CAAC,CACnD,UAAU,CAAC,CAAC;YACV,OAAO,EAAE,iBAAiB;YAC1B,WAAW,EAAE,qBAAqB;SACnC,CAAC,CACF,MAAM,CAAC,CAAC;YACN,IAAI,EAAE,iBAAiB;YACvB,OAAO,EAAE,MAAM,CAAC,gCAAgC,CAAC;SAClD,CAAC,CACF,WAAW,CAAC,CAAC,MAAM,CAAC,0BAA0B,CAAC,CAAC,EAChD,CACH,CAAC;IAEF,OAAO,CACL,CAAC,QAAQ,CACP,UAAU,CAAC,CAAC;YACV,KAAK,EAAE,EAAE;YACT,aAAa,EAAE,GAAG;YAClB,WAAW,EAAE,GAAG,EAAE,GAAE,CAAC;SACtB,CAAC,CACF,OAAO,CAAC,CAAC;YACP,IAAI,EAAE,SAAS;YACf,MAAM,EAAE;gBACN,IAAI,EAAE,gBAAgB;gBACtB,eAAe,EAAE,SAAS;aAC3B;SACF,CAAC,CACF,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,IAAI,CAAC,CAAC,CAAC,eAAe,CAAC,IAAI,IAAI,CAAC,EAAG,CAAC,CACpC,OAAO,EACP,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/jsx/build/PageTemplates/PageTemplates.mocks.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { FormControlProps } from '@pega/cosmos-react-core';
+import { AppShellProps } from '@pega/cosmos-react-build';
+interface Field extends FormControlProps {
+    help?: string;
+    error?: string;
+    validator: (this: Field) => boolean;
+}
+export interface AppShellStory {
+    main?: AppShellProps['main'];
+    hideNavigation?: boolean;
+}
+export declare const initFields: () => Field[];
+export declare const OneColumnForm: (props: any) => JSX.Element | null;
+export declare const PreviewMainContent: () => JSX.Element;
+export declare const AppShellWithMenuNavigation: ({ main, hideNavigation }: AppShellStory) => JSX.Element;
+export {};
+//# sourceMappingURL=PageTemplates.mocks.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PageTemplates.mocks.d.ts","sourceRoot":"","sources":["../../../src/build/PageTemplates/PageTemplates.mocks.tsx"],"names":[],"mappings":";AAWA,OAAO,EAcL,gBAAgB,EAOjB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAY,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAWnE,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;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAGD,eAAO,MAAM,UAAU,QAAO,KAAK,EAmClC,CAAC;AA6BF,eAAO,MAAM,aAAa,UAAW,GAAG,uBA0IvC,CAAC;AAEF,eAAO,MAAM,kBAAkB,mBAe9B,CAAC;AAEF,eAAO,MAAM,0BAA0B,6BAA8B,aAAa,gBAqKjF,CAAC"}

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

@@ -0,0 +1,287 @@
+import { useReducer, useRef, useContext, useState } from 'react';
+import styled from 'styled-components';
+import { Button, Flex, Form, Input, CheckboxGroup, RadioButtonGroup, RadioButton, Checkbox, Select, Option, TextArea, ToasterContext, Text, useTheme, BuildTheme, Configuration, StandardTree, treeHelpers } from '@pega/cosmos-react-core';
+import { RichTextEditor } from '@pega/cosmos-react-rte';
+import { AppShell } from '@pega/cosmos-react-build';
+import { FileInputDemo } from '../../core/File/FileInput.stories';
+import { dataPages, ObjectSelectComp } from '../ObjectSelect/ObjectSelect.mocks';
+import { treeList, recordMenuList, appExplorerMenuList, branchesMenuList } from '../AppShell/AppShell.mocks';
+export 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;
+    });
+};
+export const OneColumnForm = (props) => {
+    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>
+
+        <ObjectSelectComp label='Date page' info='Choose a when condition from list' items={dataPages} onChange={() => { }} onPreview={() => props.previewCallback()}/>
+
+        <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>);
+};
+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 (<Flex as={StyledRegion} container={{ alignItems: 'center', justify: 'center' }}>
+      <Text>This is a react region</Text>
+    </Flex>);
+};
+export 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 (<StandardTree nodes={recordMenuList} onNodeClick={onNodeClick} currentNodeId={currentNodeId}/>);
+    };
+    const appHeader = {
+        brand: {
+            name: 'AppStudioX',
+            visual: {
+                icon: 'pegasus'
+            }
+        },
+        utils: {
+            avatar: { name: 'Alan' },
+            search: {
+                placeholder: 'Search anything, anywhere'
+            },
+            branch: {
+                text: 'Alpha branch',
+                items: [
+                    {
+                        primary: 'Commit to branch',
+                        id: 'commitToBranch',
+                        onClick: () => { }
+                    },
+                    {
+                        primary: 'Merge branch',
+                        id: 'mergeBranch',
+                        onClick: () => { }
+                    },
+                    {
+                        primary: 'View branch',
+                        id: 'viewBranch',
+                        onClick: () => { }
+                    },
+                    {
+                        primary: 'Switch branch',
+                        id: 'switchBranch',
+                        onClick: () => { }
+                    },
+                    {
+                        primary: 'Add branch',
+                        id: 'addBranch',
+                        onClick: () => { }
+                    },
+                    {
+                        primary: 'View all branches',
+                        id: 'viewAllBranches',
+                        onClick: () => { }
+                    }
+                ]
+            },
+            action: {
+                id: 'preview',
+                text: 'Preview',
+                onClick: () => { }
+            }
+        },
+        links: [
+            {
+                id: '1',
+                name: 'Applications',
+                onClick: () => { }
+            },
+            {
+                id: '2',
+                name: 'Shared resources',
+                onClick: () => { }
+            },
+            {
+                id: '3',
+                name: 'Teams',
+                onClick: () => { }
+            },
+            {
+                id: '4',
+                name: 'AI & Analytics',
+                onClick: () => { }
+            },
+            {
+                id: '5',
+                name: 'Deploy',
+                onClick: () => { }
+            }
+        ]
+    };
+    return (<Configuration theme={BuildTheme}>
+      <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)
+            }
+        }}/>
+    </Configuration>);
+};
+//# sourceMappingURL=PageTemplates.mocks.jsx.map