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

package/jsx/build/ObjectSelect/ObjectSelect.stories.jsx

@@ -0,0 +1,258 @@
+import { useReducer, useState, useCallback, useMemo, useRef, useEffect } from 'react';
+import { action } from '@storybook/addon-actions';
+import { Form, Button, Flex, Input, TextArea, Card, CardContent, registerIcon, menuHelpers, useToaster, 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, dataPages, ViewportDrawer, FormRenderer, mockNetworkReq } from './ObjectSelect.mocks';
+registerIcon(times);
+export default {
+    title: 'Build/ObjectSelect',
+    component: ObjectSelect
+};
+export const ObjectSelectSkeleton = (args) => {
+    const [value, setValue] = useState(args.value);
+    return (<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',
+            onSubmit: args.onSubmit,
+            children: (<StyledConfigurationContent>
+            <StyledRegion style={{ minHeight: '20vh' }}/>
+          </StyledConfigurationContent>)
+        }} onPreview={args.onPreview} onLinkClick={(id, e) => {
+            e.preventDefault();
+            action(`item with id - ${id} is clicked`)(e);
+        }}/>);
+};
+ObjectSelectSkeleton.args = {
+    label: 'Object select label',
+    labelHidden: false,
+    info: 'Object select info text',
+    placeholder: '',
+    status: undefined,
+    required: false,
+    disabled: false,
+    readOnly: false,
+    onPreview: action('Clicked preview link'),
+    onSubmit: ({ close }) => {
+        action('Clicked submit button');
+        close();
+    },
+    onClose: 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 } },
+    onClose: { table: { disable: true } }
+};
+export const ObjectSelectDemo = (args) => {
+    const [drawerOpen, setDrawerOpen] = useState(false);
+    const [drawerData, setDrawerData] = useState(dataPages[0]);
+    const [scopeError, setScopeError] = useState(false);
+    const [formLoading, setFormLoading] = useState(false);
+    const [items, setItems] = useState(() => {
+        return menuHelpers.mapTree(dataPages, item => ({
+            ...item,
+            selected: item.items ? undefined : !!item.selected
+        }));
+    });
+    const selected = useMemo(() => menuHelpers.getSelected(items)[0], [items]);
+    const selectItem = useCallback((id) => {
+        setItems(cur => menuHelpers.selectItem(cur, id, 'single-select'));
+    }, []);
+    const { createNewAs, ...restArgs } = args;
+    const mounted = useRef(false);
+    useEffect(() => {
+        mounted.current = true;
+        return () => {
+            mounted.current = false;
+        };
+    }, []);
+    return (<>
+      <ObjectSelectComp {...restArgs} popoverContent={args.popoverContent} onPreview={id => {
+            const data = dataPages.find(dataPage => dataPage.id === id);
+            if (data)
+                setDrawerData(data);
+            if (!drawerOpen) {
+                setDrawerOpen(true);
+            }
+        }} createConfiguration={createNewAs === 'modal'
+            ? {
+                loading: formLoading,
+                renderer: FormRenderer,
+                rendererProps: {
+                    items,
+                    selectItem,
+                    scopeError
+                },
+                onSubmit: ({ close }) => {
+                    if (selected) {
+                        setFormLoading(true);
+                        mockNetworkReq().then(() => {
+                            if (mounted)
+                                close();
+                        });
+                    }
+                    else
+                        setScopeError(true);
+                },
+                onDismiss: ({ close }) => close(),
+                onBeforeOpen: () => {
+                    setFormLoading(true);
+                    mockNetworkReq().then(() => {
+                        if (mounted)
+                            setFormLoading(false);
+                    });
+                },
+                onAfterClose: () => {
+                    setFormLoading(false);
+                    setItems(dataPages);
+                }
+            }
+            : { href: 'https://www.pega.com' }}/>
+      <ViewportDrawer drawerData={drawerData} drawerOpen={drawerOpen} setDrawerOpen={setDrawerOpen}/>
+    </>);
+};
+ObjectSelectDemo.args = {
+    label: 'Data source',
+    labelHidden: false,
+    info: 'Select an appropriate data source',
+    placeholder: '',
+    status: undefined,
+    required: false,
+    disabled: false,
+    readOnly: false,
+    popoverContent: 'simple',
+    onPreview: () => { },
+    onSubmit: ({ close }) => {
+        action('Clicked submit button');
+        close();
+    },
+    onClose: action('Clicked cancel button'),
+    createNewAs: 'modal'
+};
+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 } },
+    onClose: { table: { disable: true } },
+    createNewAs: { options: ['modal', 'link'], control: { type: 'radio' } }
+};
+export const ObjectSelectDemoInForm = () => {
+    const [fields, setField] = useReducer(fieldReducer, undefined, initFields);
+    const { push } = useToaster();
+    const [drawerOpen, setDrawerOpen] = useState(false);
+    const [drawerData, setDrawerData] = useState(dataPages[0]);
+    const [scopeError, setScopeError] = useState(false);
+    const [formLoading, setFormLoading] = useState(false);
+    const [items, setItems] = useState(() => {
+        return menuHelpers.mapTree(dataPages, item => ({
+            ...item,
+            selected: item.items ? undefined : !!item.selected
+        }));
+    });
+    const selected = useMemo(() => menuHelpers.getSelected(items)[0], [items]);
+    const selectItem = useCallback((id) => {
+        setItems(cur => menuHelpers.selectItem(cur, id, 'single-select'));
+    }, []);
+    const name = fields.find(field => field.name === 'name');
+    const description = fields.find(field => field.name === 'description');
+    if (!name || !description)
+        return <></>;
+    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>
+    </>);
+    return (<Card style={{ margin: 'auto', maxWidth: '37.5rem' }}>
+      <CardContent>
+        <Form actions={actions} onSubmit={(e) => {
+            e.preventDefault();
+            push({ content: 'Form submitted!' });
+        }} heading='Configure Table'>
+          <Flex container={{ direction: 'column', gap: 2 }} item={{ grow: 1 }}>
+            <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'/>
+
+            <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 })}/>
+            <ObjectSelectComp label='Data page' info='Select an appropriate data page' items={[]} onSubmit={({ close }) => close()} onClose={() => null} onChange={() => { }} onPreview={id => {
+            const data = dataPages.find(dataPage => dataPage.id === id);
+            if (data)
+                setDrawerData(data);
+            if (!drawerOpen) {
+                setDrawerOpen(true);
+            }
+        }} createConfiguration={{ href: 'https://www.pega.com' }}/>
+            <ObjectSelectComp label='Visibility condition' info='Choose a when condition from list' items={[]} onChange={() => { }} onSubmit={({ close }) => close()} onClose={() => null} createConfiguration={{
+            loading: formLoading,
+            renderer: FormRenderer,
+            rendererProps: {
+                items,
+                selectItem,
+                scopeError
+            },
+            onSubmit: ({ close }) => {
+                if (selected) {
+                    setFormLoading(true);
+                    mockNetworkReq().then(close);
+                }
+                else
+                    setScopeError(true);
+            },
+            onDismiss: ({ close }) => close(),
+            onBeforeOpen: () => {
+                setFormLoading(true);
+                mockNetworkReq().then(() => setFormLoading(false));
+            },
+            onAfterClose: () => {
+                setFormLoading(false);
+                setItems(dataPages);
+            }
+        }} onPreview={id => {
+            const data = dataPages.find(dataPage => dataPage.id === id);
+            if (data)
+                setDrawerData(data);
+            if (!drawerOpen) {
+                setDrawerOpen(true);
+            }
+        }}/>
+            <ViewportDrawer drawerData={drawerData} drawerOpen={drawerOpen} setDrawerOpen={setDrawerOpen}/>
+          </Flex>
+        </Form>
+      </CardContent>
+    </Card>);
+};
+//# sourceMappingURL=ObjectSelect.stories.jsx.map

package/jsx/build/ObjectSelect/ObjectSelect.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"ObjectSelect.stories.jsx","sourceRoot":"","sources":["../../../src/build/ObjectSelect/ObjectSelect.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport {\n  FormEvent,\n  useReducer,\n  ChangeEvent,\n  FocusEvent,\n  useState,\n  useCallback,\n  useMemo,\n  useRef,\n  useEffect\n} from 'react';\nimport { action } from '@storybook/addon-actions';\n\nimport {\n  Form,\n  Button,\n  Flex,\n  Input,\n  TextArea,\n  Card,\n  CardContent,\n  registerIcon,\n  menuHelpers,\n  useToaster,\n  StyledRegion,\n  MenuItemProps,\n  FieldValueListProps,\n  MenuProps\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  dataPages,\n  ViewportDrawer,\n  FormRenderer,\n  mockNetworkReq\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        onSubmit: args.onSubmit,\n        children: (\n          <StyledConfigurationContent>\n            <StyledRegion style={{ minHeight: '20vh' }} />\n          </StyledConfigurationContent>\n        )\n      }}\n      onPreview={args.onPreview}\n      onLinkClick={(id, e) => {\n        e.preventDefault();\n        action(`item with id - ${id} is clicked`)(e);\n      }}\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: ({ close }: { close: () => void }) => {\n    action('Clicked submit button');\n    close();\n  },\n  // eslint-disable-next-line demo-patterns/literal-args\n  onClose: 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  onClose: { table: { disable: true } }\n};\n\nexport const ObjectSelectDemo: Story<ObjectSelectStoryProps> = (args: ObjectSelectStoryProps) => {\n  const [drawerOpen, setDrawerOpen] = useState(false);\n  const [drawerData, setDrawerData] = useState<\n    MenuItemProps & { metaData: FieldValueListProps['fields'] }\n  >(dataPages[0]);\n\n  const [scopeError, setScopeError] = useState(false);\n  const [formLoading, setFormLoading] = useState(false);\n\n  const [items, setItems] = useState<MenuProps['items']>((): MenuProps['items'] => {\n    return menuHelpers.mapTree(dataPages, item => ({\n      ...item,\n      selected: item.items ? undefined : !!item.selected\n    }));\n  });\n\n  const selected = useMemo(() => menuHelpers.getSelected(items)[0], [items]);\n\n  const selectItem = useCallback((id: MenuItemProps['id']) => {\n    setItems(cur => menuHelpers.selectItem(cur, id, 'single-select'));\n  }, []);\n\n  const { createNewAs, ...restArgs } = args;\n\n  const mounted = useRef(false);\n  useEffect(() => {\n    mounted.current = true;\n    return () => {\n      mounted.current = false;\n    };\n  }, []);\n\n  return (\n    <>\n      <ObjectSelectComp\n        {...restArgs}\n        popoverContent={args.popoverContent}\n        onPreview={id => {\n          const data = dataPages.find(dataPage => dataPage.id === id);\n          if (data) setDrawerData(data);\n          if (!drawerOpen) {\n            setDrawerOpen(true);\n          }\n        }}\n        createConfiguration={\n          createNewAs === 'modal'\n            ? {\n                loading: formLoading,\n                renderer: FormRenderer,\n                rendererProps: {\n                  items,\n                  selectItem,\n                  scopeError\n                },\n                onSubmit: ({ close }) => {\n                  if (selected) {\n                    setFormLoading(true);\n                    mockNetworkReq().then(() => {\n                      if (mounted) close();\n                    });\n                  } else setScopeError(true);\n                },\n                onDismiss: ({ close }) => close(),\n                onBeforeOpen: () => {\n                  setFormLoading(true);\n                  mockNetworkReq().then(() => {\n                    if (mounted) setFormLoading(false);\n                  });\n                },\n                onAfterClose: () => {\n                  // Clean up loading state when the form is closed.\n                  setFormLoading(false);\n                  setItems(dataPages);\n                }\n              }\n            : { href: 'https://www.pega.com' }\n        }\n      />\n      <ViewportDrawer\n        drawerData={drawerData}\n        drawerOpen={drawerOpen}\n        setDrawerOpen={setDrawerOpen}\n      />\n    </>\n  );\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: ({ close }: { close: () => void }) => {\n    action('Clicked submit button');\n    close();\n  },\n  // eslint-disable-next-line demo-patterns/literal-args\n  onClose: action('Clicked cancel button'),\n  createNewAs: 'modal'\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  onClose: { table: { disable: true } },\n  createNewAs: { options: ['modal', 'link'], control: { type: 'radio' } }\n};\n\nexport const ObjectSelectDemoInForm: Story = () => {\n  const [fields, setField] = useReducer(fieldReducer, undefined, initFields);\n  const { push } = useToaster();\n  const [drawerOpen, setDrawerOpen] = useState(false);\n  const [drawerData, setDrawerData] = useState<\n    MenuItemProps & { metaData: FieldValueListProps['fields'] }\n  >(dataPages[0]);\n\n  const [scopeError, setScopeError] = useState(false);\n  const [formLoading, setFormLoading] = useState(false);\n\n  const [items, setItems] = useState<MenuProps['items']>((): MenuProps['items'] => {\n    return menuHelpers.mapTree(dataPages, item => ({\n      ...item,\n      selected: item.items ? undefined : !!item.selected\n    }));\n  });\n\n  const selected = useMemo(() => menuHelpers.getSelected(items)[0], [items]);\n\n  const selectItem = useCallback((id: MenuItemProps['id']) => {\n    setItems(cur => menuHelpers.selectItem(cur, id, 'single-select'));\n  }, []);\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 <></>;\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              onSubmit={({ close }) => close()}\n              onClose={() => null}\n              onChange={() => {}}\n              onPreview={id => {\n                const data = dataPages.find(dataPage => dataPage.id === id);\n                if (data) setDrawerData(data);\n                if (!drawerOpen) {\n                  setDrawerOpen(true);\n                }\n              }}\n              createConfiguration={{ href: 'https://www.pega.com' }}\n            />\n            <ObjectSelectComp\n              label='Visibility condition'\n              info='Choose a when condition from list'\n              items={[]}\n              onChange={() => {}}\n              onSubmit={({ close }) => close()}\n              onClose={() => null}\n              createConfiguration={{\n                loading: formLoading,\n                renderer: FormRenderer,\n                rendererProps: {\n                  items,\n                  selectItem,\n                  scopeError\n                },\n                onSubmit: ({ close }) => {\n                  if (selected) {\n                    setFormLoading(true);\n                    mockNetworkReq().then(close);\n                  } else setScopeError(true);\n                },\n                onDismiss: ({ close }) => close(),\n                onBeforeOpen: () => {\n                  setFormLoading(true);\n                  mockNetworkReq().then(() => setFormLoading(false));\n                },\n                onAfterClose: () => {\n                  // Clean up loading state when the form is closed.\n                  setFormLoading(false);\n                  setItems(dataPages);\n                }\n              }}\n              onPreview={id => {\n                const data = dataPages.find(dataPage => dataPage.id === id);\n                if (data) setDrawerData(data);\n                if (!drawerOpen) {\n                  setDrawerOpen(true);\n                }\n              }}\n            />\n            <ViewportDrawer\n              drawerData={drawerData}\n              drawerOpen={drawerOpen}\n              setDrawerOpen={setDrawerOpen}\n            />\n          </Flex>\n        </Form>\n      </CardContent>\n    </Card>\n  );\n};\n"]}

package/jsx/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/jsx/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/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',