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

package/lib/build/ObjectSelect/ObjectSelect.stories.js

@@ -0,0 +1,123 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useReducer, useContext, useState } from 'react';
+import { action } from '@storybook/addon-actions';
+import { Form, Button, Flex, Input, ToasterContext, TextArea, Card, CardContent, registerIcon, menuHelpers, StyledRegion } from '@pega/cosmos-react-core';
+import { ObjectSelect } from '@pega/cosmos-react-build';
+import * as times from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';
+import { StyledConfigurationContent } from './ObjectSelect.styles';
+import { skeletonData, fieldReducer, initFields, ObjectSelectComp } from './ObjectSelect.mocks';
+registerIcon(times);
+export default {
+    title: 'Build/ObjectSelect',
+    component: ObjectSelect
+};
+export const ObjectSelectSkeleton = (args) => {
+    const [value, setValue] = useState(args.value);
+    return (_jsx(ObjectSelect, { ...args, items: skeletonData, value: value, onChange: id => {
+            const data = menuHelpers.getItem(skeletonData, id);
+            if (data) {
+                setValue({
+                    id: data.id,
+                    primary: data.primary,
+                    href: data.href ?? '#',
+                    meta: data.id !== '01-4' ? data.secondary?.join('  ') : ''
+                });
+            }
+            else
+                setValue(undefined);
+        }, configuration: {
+            label: 'Gear button label',
+            heading: 'Popover heading',
+            primaryAction: {
+                id: 'primaryAction',
+                text: 'Primary action text',
+                onClick: args.onSubmit
+            },
+            secondaryAction: {
+                id: 'secondaryAction',
+                text: 'Secondary action text',
+                onClick: args.onCancel
+            },
+            content: (_jsx(StyledConfigurationContent, { children: _jsx(StyledRegion, { style: { minHeight: '20vh' } }, void 0) }, void 0))
+        }, onPreview: args.onPreview }, void 0));
+};
+ObjectSelectSkeleton.args = {
+    label: 'Object select label',
+    labelHidden: false,
+    info: 'Object select info text',
+    placeholder: '',
+    status: undefined,
+    required: false,
+    disabled: false,
+    readOnly: false,
+    // eslint-disable-next-line demo-patterns/literal-args
+    onPreview: action('Clicked preview link'),
+    // eslint-disable-next-line demo-patterns/literal-args
+    onSubmit: action('Clicked submit button'),
+    // eslint-disable-next-line demo-patterns/literal-args
+    onCancel: action('Clicked cancel button')
+};
+ObjectSelectSkeleton.argTypes = {
+    label: { control: { type: 'text' } },
+    labelHidden: { control: { type: 'boolean' } },
+    info: { control: { type: 'text' } },
+    placeholder: { control: { type: 'text' } },
+    status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },
+    required: { control: { type: 'boolean' } },
+    disabled: { control: { type: 'boolean' } },
+    readOnly: { control: { type: 'boolean' } },
+    onPreview: { table: { disable: true } },
+    onSubmit: { table: { disable: true } },
+    onCancel: { table: { disable: true } }
+};
+export const ObjectSelectDemo = (args) => {
+    return _jsx(ObjectSelectComp, { ...args, popoverContent: args.popoverContent }, void 0);
+};
+ObjectSelectDemo.args = {
+    label: 'Data source',
+    labelHidden: false,
+    info: 'Select an appropriate data source',
+    placeholder: '',
+    status: undefined,
+    required: false,
+    disabled: false,
+    readOnly: false,
+    popoverContent: 'simple',
+    // eslint-disable-next-line demo-patterns/literal-args
+    onPreview: () => { },
+    // eslint-disable-next-line demo-patterns/literal-args
+    onSubmit: action('Clicked submit button'),
+    // eslint-disable-next-line demo-patterns/literal-args
+    onCancel: action('Clicked cancel button')
+};
+ObjectSelectDemo.argTypes = {
+    label: { control: { type: 'text' } },
+    labelHidden: { control: { type: 'boolean' } },
+    info: { control: { type: 'text' } },
+    placeholder: { control: { type: 'text' } },
+    status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },
+    required: { control: { type: 'boolean' } },
+    disabled: { control: { type: 'boolean' } },
+    readOnly: { control: { type: 'boolean' } },
+    popoverContent: { options: ['simple', 'advanced'], control: { type: 'radio' } },
+    onPreview: { table: { disable: true } },
+    onSubmit: { table: { disable: true } },
+    onCancel: { table: { disable: true } }
+};
+export const ObjectSelectDemoInForm = () => {
+    const [fields, setField] = useReducer(fieldReducer, undefined, initFields);
+    const { push } = useContext(ToasterContext);
+    const name = fields.find(field => field.name === 'name');
+    const description = fields.find(field => field.name === 'description');
+    if (!name || !description)
+        return null;
+    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));
+    return (_jsx(Card, { style: { margin: 'auto', maxWidth: '37.5rem' }, children: _jsx(CardContent, { children: _jsx(Form, { actions: actions, onSubmit: (e) => {
+                    e.preventDefault();
+                    push({ content: 'Form submitted!' });
+                }, heading: 'Configure Table', children: _jsxs(Flex, { container: { direction: 'column', gap: 2 }, item: { grow: 1 }, children: [_jsx(Input, { name: 'name', label: 'Table name', value: name.value, required: name.required, status: name.status, info: 'Enter a valid table name', onChange: (e) => setField({ ...e }), onBlur: (e) => setField({ ...e }), autoComplete: 'off' }, void 0), _jsx(TextArea, { name: 'description', required: description.required, label: 'Table description', status: description.status, info: description.info || description.help, onChange: (e) => setField({ ...e }), onBlur: (e) => setField({ ...e }) }, void 0), _jsx(ObjectSelectComp, { label: 'Data page', info: 'Select an appropriate data page', items: [], onChange: () => { } }, void 0), _jsx(ObjectSelectComp, { label: 'Visibility condition', info: 'Choose a when condition from list', items: [], onChange: () => { } }, void 0)] }, void 0) }, void 0) }, void 0) }, void 0));
+};
+//# sourceMappingURL=ObjectSelect.stories.js.map

package/lib/build/ObjectSelect/ObjectSelect.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ObjectSelect.stories.js","sourceRoot":"","sources":["../../../src/build/ObjectSelect/ObjectSelect.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { FormEvent, useReducer, useContext, ChangeEvent, FocusEvent, useState } from 'react';\nimport { action } from '@storybook/addon-actions';\n\nimport {\n  Form,\n  Button,\n  Flex,\n  Input,\n  ToasterContext,\n  TextArea,\n  Card,\n  CardContent,\n  registerIcon,\n  menuHelpers,\n  StyledRegion\n} from '@pega/cosmos-react-core';\nimport { ObjectSelect, ObjectSelectProps } from '@pega/cosmos-react-build';\nimport * as times from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\n\nimport { StyledConfigurationContent } from './ObjectSelect.styles';\nimport {\n  skeletonData,\n  fieldReducer,\n  initFields,\n  ObjectSelectStoryProps,\n  ObjectSelectComp\n} from './ObjectSelect.mocks';\n\nregisterIcon(times);\n\nexport default {\n  title: 'Build/ObjectSelect',\n  component: ObjectSelect\n} as Meta;\n\nexport const ObjectSelectSkeleton: Story<ObjectSelectStoryProps> = (\n  args: ObjectSelectStoryProps\n) => {\n  const [value, setValue] = useState<ObjectSelectProps['value']>(args.value);\n\n  return (\n    <ObjectSelect\n      {...args}\n      items={skeletonData}\n      value={value}\n      onChange={id => {\n        const data = menuHelpers.getItem(skeletonData, id);\n        if (data) {\n          setValue({\n            id: data.id,\n            primary: data.primary,\n            href: data.href ?? '#',\n            meta: data.id !== '01-4' ? data.secondary?.join('  ') : ''\n          });\n        } else setValue(undefined);\n      }}\n      configuration={{\n        label: 'Gear button label',\n        heading: 'Popover heading',\n        primaryAction: {\n          id: 'primaryAction',\n          text: 'Primary action text',\n          onClick: args.onSubmit\n        },\n        secondaryAction: {\n          id: 'secondaryAction',\n          text: 'Secondary action text',\n          onClick: args.onCancel\n        },\n        content: (\n          <StyledConfigurationContent>\n            <StyledRegion style={{ minHeight: '20vh' }} />\n          </StyledConfigurationContent>\n        )\n      }}\n      onPreview={args.onPreview}\n    />\n  );\n};\n\nObjectSelectSkeleton.args = {\n  label: 'Object select label',\n  labelHidden: false,\n  info: 'Object select info text',\n  placeholder: '',\n  status: undefined,\n  required: false,\n  disabled: false,\n  readOnly: false,\n  // eslint-disable-next-line demo-patterns/literal-args\n  onPreview: action('Clicked preview link'),\n  // eslint-disable-next-line demo-patterns/literal-args\n  onSubmit: action('Clicked submit button'),\n  // eslint-disable-next-line demo-patterns/literal-args\n  onCancel: action('Clicked cancel button')\n};\n\nObjectSelectSkeleton.argTypes = {\n  label: { control: { type: 'text' } },\n  labelHidden: { control: { type: 'boolean' } },\n  info: { control: { type: 'text' } },\n  placeholder: { control: { type: 'text' } },\n  status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n  required: { control: { type: 'boolean' } },\n  disabled: { control: { type: 'boolean' } },\n  readOnly: { control: { type: 'boolean' } },\n  onPreview: { table: { disable: true } },\n  onSubmit: { table: { disable: true } },\n  onCancel: { table: { disable: true } }\n};\n\nexport const ObjectSelectDemo: Story<ObjectSelectStoryProps> = (args: ObjectSelectStoryProps) => {\n  return <ObjectSelectComp {...args} popoverContent={args.popoverContent} />;\n};\n\nObjectSelectDemo.args = {\n  label: 'Data source',\n  labelHidden: false,\n  info: 'Select an appropriate data source',\n  placeholder: '',\n  status: undefined,\n  required: false,\n  disabled: false,\n  readOnly: false,\n  popoverContent: 'simple',\n  // eslint-disable-next-line demo-patterns/literal-args\n  onPreview: () => {},\n  // eslint-disable-next-line demo-patterns/literal-args\n  onSubmit: action('Clicked submit button'),\n  // eslint-disable-next-line demo-patterns/literal-args\n  onCancel: action('Clicked cancel button')\n};\n\nObjectSelectDemo.argTypes = {\n  label: { control: { type: 'text' } },\n  labelHidden: { control: { type: 'boolean' } },\n  info: { control: { type: 'text' } },\n  placeholder: { control: { type: 'text' } },\n  status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n  required: { control: { type: 'boolean' } },\n  disabled: { control: { type: 'boolean' } },\n  readOnly: { control: { type: 'boolean' } },\n  popoverContent: { options: ['simple', 'advanced'], control: { type: 'radio' } },\n  onPreview: { table: { disable: true } },\n  onSubmit: { table: { disable: true } },\n  onCancel: { table: { disable: true } }\n};\n\nexport const ObjectSelectDemoInForm = () => {\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 description = fields.find(field => field.name === 'description');\n\n  if (!name || !description) 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  return (\n    <Card style={{ margin: 'auto', maxWidth: '37.5rem' }}>\n      <CardContent>\n        <Form\n          actions={actions}\n          onSubmit={(e: FormEvent) => {\n            e.preventDefault();\n            push({ content: 'Form submitted!' });\n          }}\n          heading='Configure Table'\n        >\n          <Flex container={{ direction: 'column', gap: 2 }} item={{ grow: 1 }}>\n            <Input\n              name='name'\n              label='Table name'\n              value={name.value}\n              required={name.required}\n              status={name.status}\n              info='Enter a valid table name'\n              onChange={(e: ChangeEvent<HTMLInputElement>) => setField({ ...e })}\n              onBlur={(e: FocusEvent<HTMLInputElement>) => setField({ ...e })}\n              autoComplete='off'\n            />\n\n            <TextArea\n              name='description'\n              required={description.required}\n              label='Table description'\n              status={description.status}\n              info={description.info || description.help}\n              onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setField({ ...e })}\n              onBlur={(e: FocusEvent<HTMLInputElement>) => setField({ ...e })}\n            />\n            <ObjectSelectComp\n              label='Data page'\n              info='Select an appropriate data page'\n              items={[]}\n              onChange={() => {}}\n            />\n            <ObjectSelectComp\n              label='Visibility condition'\n              info='Choose a when condition from list'\n              items={[]}\n              onChange={() => {}}\n            />\n          </Flex>\n        </Form>\n      </CardContent>\n    </Card>\n  );\n};\n"]}

package/lib/build/ObjectSelect/ObjectSelect.styles.d.ts

@@ -0,0 +1,4 @@
+export declare const StyledDrawerContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledCodeBlock: import("styled-components").StyledComponent<"pre", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledConfigurationContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+//# sourceMappingURL=ObjectSelect.styles.d.ts.map

package/lib/build/ObjectSelect/ObjectSelect.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ObjectSelect.styles.d.ts","sourceRoot":"","sources":["../../../src/build/ObjectSelect/ObjectSelect.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,mBAAmB,yGAS9B,CAAC;AAIH,eAAO,MAAM,eAAe,yGAK1B,CAAC;AAIH,eAAO,MAAM,0BAA0B,yGAOrC,CAAC"}

package/lib/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/lib/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/lib/build/PageTemplates/GalleryPage.mocks.d.ts

@@ -0,0 +1,45 @@
+/// <reference types="react" />
+export declare const appHeader: {
+    brand: {
+        name: string;
+    };
+    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: {
+            name: string;
+            bgColor: string;
+        };
+        image?: undefined;
+    } | {
+        image: {
+            src: string;
+            alt: string;
+        };
+        icon?: undefined;
+    };
+}[];
+//# sourceMappingURL=GalleryPage.mocks.d.ts.map

package/lib/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;;;;;;;;;;;;;;;;;;;;;;;CAkDrB,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;GA2B/B,CAAC"}

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

@@ -0,0 +1,79 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createUID, range, Status } from '@pega/cosmos-react-core';
+export 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: () => { }
+        }
+    ]
+};
+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: [_jsx(Status, { variant: 'success', children: "in production" }, void 0), '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'
+                }
+            }
+    }));
+};
+//# sourceMappingURL=GalleryPage.mocks.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GalleryPage.mocks.js","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;KACnB;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,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,sCAAuB,EAAE,OAAO,CAAC;QACjE,MAAM,EACJ,GAAG,GAAG,CAAC,KAAK,CAAC;YACX,CAAC,CAAC;gBACE,IAAI,EAAE;oBACJ,IAAI,EAAE,gBAAgB;oBACtB,OAAO,EAAE,SAAS;iBACnB;aACF;YACH,CAAC,CAAC;gBACE,KAAK,EAAE;oBACL,GAAG,EAAE,kGAAkG;oBACvG,GAAG,EAAE,4BAA4B;iBAClC;aACF;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  },\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: {\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"]}

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

@@ -8,5 +8,6 @@ interface GalleryPageArgs {
     emptyStateHeading: string;
     emptyStateDescription: string;
 }
+export declare const GalleryPageDemo: Story<GalleryPageArgs>;
 export declare const AppShellWithGalleryPage: Story<GalleryPageArgs>;
 //# sourceMappingURL=GalleryPage.stories.d.ts.map

package/lib/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,eAAe,EAAE,KAAK,CAAC,eAAe,CAmBlD,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,eAAe,CAsB1D,CAAC"}

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 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,
@@ -9,83 +9,7 @@ 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: [_jsx(Status, { variant: 'success', children: "in production" }, void 0), '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 }) => (_jsx(GalleryPage, { heading: args.bannerHeading, description: args.bannerDescription, image: {
+export const GalleryPageDemo = (args) => (_jsx(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: {
@@ -108,7 +32,7 @@ export const AppShellWithGalleryPage = (args) => {
                     bgColor: '#0ac7c8'
                 }
             }
-        }, appHeader: appHeader, main: _jsx(GalleryPageDemo, { args: args }, void 0), hideNav: true }, void 0));
+        }, appHeader: appHeader, main: _jsx(GalleryPageDemo, { ...args }, void 0), hideNav: true }, void 0));
 };
 AppShellWithGalleryPage.args = {
     bannerHeading: 'Applications',

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":"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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.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"]}

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

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

package/lib/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":";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"}

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

@@ -0,0 +1,96 @@
+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 { RichTextEditor } from '@pega/cosmos-react-rte';
+import { FileInputDemo } from '../../core/File/FileInput.stories';
+// Get initial field properties
+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;
+            }
+        }
+    ];
+};
+// Handles setting of state for all fields
+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 = () => {
+    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 = (_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));
+    const onImageAdded = (image, id) => {
+        const src = URL.createObjectURL(image);
+        editorRef.current?.appendImage({ src, alt: image.name }, id);
+    };
+    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: [
+                            'inline-styling',
+                            'headers',
+                            'tables',
+                            'links',
+                            'images',
+                            'lists',
+                            'cut-copy-paste',
+                            'indentation'
+                        ], onImageAdded: onImageAdded, ref: editorRef }, void 0), _jsx(FileInputDemo, {}, void 0)] }, void 0)] }, void 0));
+};
+//# sourceMappingURL=PageTemplates.mocks.js.map

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

@@ -0,0 +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"]}