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

package/jsx/build/ObjectSelect/ObjectSelect.mocks.jsx

@@ -0,0 +1,315 @@
+import { useState } from 'react';
+import { AtomicCondition, getInitConditionForLhs, formatCondition } from '@pega/cosmos-react-condition-builder';
+import { Button, Flex, Input, Card, CardContent, Drawer, Text, FieldValueList, Icon, menuHelpers, useI18n } from '@pega/cosmos-react-core';
+import { ObjectSelect } from '@pega/cosmos-react-build';
+import { StyledDrawerContent, StyledCodeBlock } from './ObjectSelect.styles';
+export const skeletonData = [
+    {
+        id: '01-1',
+        primary: 'primary-link-1',
+        secondary: ['secondary-1'],
+        href: 'http://www.pega.com'
+    },
+    {
+        id: '01-2',
+        primary: 'primary-link-2',
+        secondary: [
+            'secondary-1',
+            'secondary-2',
+            'secondary-3',
+            'secondary-4',
+            'secondary-5',
+            'secondary-6',
+            'secondary-7',
+            'secondary-8',
+            'secondary-9'
+        ],
+        href: 'http://www.pega.com'
+    },
+    {
+        id: '01-3',
+        primary: 'primary-link-3',
+        secondary: ['secondary-1', 'secondary-2'],
+        href: 'http://www.pega.com'
+    },
+    {
+        id: '01-4',
+        primary: 'primary-link-4',
+        secondary: ['secondary-1', 'secondary-2'],
+        href: 'http://www.pega.com'
+    }
+];
+export const dataPages = [
+    {
+        id: '01-1',
+        primary: 'MortgageRequestList-DataSource',
+        secondary: ['Scope', 'O1XPTI-CCompass-Work-MortgageRequest'],
+        href: 'http://www.pega.com'
+    },
+    {
+        id: '01-2',
+        primary: 'Credit Scores List Data Source',
+        secondary: ['Scope', 'CreditScore'],
+        href: 'http://www.pega.com'
+    },
+    {
+        id: '01-3',
+        primary: 'GetAutoLoanByIDDataSource',
+        secondary: ['Scope', 'O1XPTI-CCompass-Work-AutoLoan'],
+        href: 'http://www.pega.com'
+    },
+    {
+        id: '01-4',
+        primary: 'DS_pyMyWorkList',
+        secondary: ['Scope', 'Assign-Worklist'],
+        href: 'http://www.pega.com'
+    }
+];
+export const demoFields = [
+    { name: 'employeeId', label: 'Employee ID', type: 'TEXT' },
+    { name: 'firstName', label: 'First Name', type: 'TEXT' },
+    { name: 'lastName', label: 'Last Name', type: 'TEXT' },
+    { name: 'gender', label: 'Gender', type: 'TEXT' },
+    {
+        name: 'department',
+        label: 'Department',
+        type: 'TEXT',
+        possibleValues: [
+            'Customer Service',
+            'Engineering',
+            'Facilities',
+            'Finance',
+            'HR',
+            'IT',
+            'Sales'
+        ]
+    },
+    { name: 'age', label: 'Age', type: 'NUMBER' },
+    { name: 'experience', label: 'Experience (yrs)', type: 'NUMBER' },
+    { name: 'salary', label: 'Salary', type: 'NUMBER' },
+    { name: 'hireDate', label: 'Hire Date', type: 'DATE_ONLY' },
+    { name: 'dateOfBirth', label: 'Date of Birth', type: 'DATE_ONLY' },
+    {
+        name: 'shiftStartTime',
+        label: 'Shift start time',
+        type: 'TIME_ONLY',
+        groupLabel: 'Technical details'
+    },
+    {
+        name: 'shiftEndTime',
+        label: 'Shift end time',
+        type: 'TIME_ONLY',
+        groupLabel: 'Technical details'
+    },
+    {
+        name: 'lastActivityAt',
+        label: 'Last activity at',
+        type: 'DATE_TIME',
+        groupLabel: 'Technical details'
+    },
+    {
+        name: 'nextPasswordReset',
+        label: 'Next password reset',
+        type: 'DATE_TIME',
+        groupLabel: 'Technical details'
+    },
+    { name: 'isSeniorCitizen', label: 'Is Senior Citizen', type: 'BOOLEAN' },
+    { name: 'isRemoteEmployee', label: 'Is Remote Employee', type: 'BOOLEAN' }
+];
+export const demoDateFunctions = {
+    DATE_TIME: [
+        'YEARS',
+        'QUARTERS',
+        'MONTHS',
+        'WEEKS',
+        'DAYS',
+        'HOURS',
+        'MONTHS_OF_YEAR',
+        'DAYS_OF_MONTH',
+        'DAYS_OF_WEEK'
+    ],
+    DATE_ONLY: [
+        'YEARS',
+        'QUARTERS',
+        'MONTHS',
+        'WEEKS',
+        'MONTHS_OF_YEAR',
+        'DAYS_OF_MONTH',
+        'DAYS_OF_WEEK'
+    ]
+};
+export const initFields = () => {
+    const common = { value: undefined, status: undefined };
+    return [
+        {
+            ...common,
+            name: 'name',
+            required: true,
+            error: 'Please enter a valid name for table',
+            validator() {
+                if (!this.value)
+                    return false;
+                return /^[a-z]{1}[a-z0-9]+$/i.test(this.value);
+            }
+        },
+        {
+            ...common,
+            name: 'description',
+            required: true,
+            help: 'Give an appropriate description for the table',
+            error: 'Field cannot be empty',
+            validator() {
+                if (!this.value)
+                    return false;
+                return true;
+            }
+        }
+    ];
+};
+export 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 ViewportDrawer = ({ drawerData, drawerOpen, setDrawerOpen }) => {
+    const fields = drawerData?.secondary?.map((data, index) => {
+        return {
+            id: (index + 1).toString(),
+            name: data?.toString() ?? '',
+            value: data
+        };
+    });
+    return (<Drawer open={drawerOpen} onOuterClick={() => {
+            setDrawerOpen(false);
+        }} position='fixed' size='30rem' nullWhenClosed shadow>
+      <Flex as={StyledDrawerContent} container={{
+            direction: 'column',
+            alignItems: 'start',
+            gap: 2,
+            pad: 4
+        }}>
+        <Flex container={{ direction: 'column', gap: 1 }}>
+          <Flex container={{ gap: 2, alignItems: 'center' }}>
+            <Button variant='simple' label='Close drawer' icon onClick={() => setDrawerOpen(false)}>
+              <Icon name='times'/>
+            </Button>
+            <Text variant='h3'>{drawerData?.primary}</Text>
+          </Flex>
+          <Flex container={{ direction: 'column', gap: 2, pad: 1 }}>
+            <Text as='p'>
+              This is a mock representation for the parameters of the {drawerData?.primary} rule
+            </Text>
+            <FieldValueList variant='inline' fields={fields}/>
+          </Flex>
+        </Flex>
+      </Flex>
+    </Drawer>);
+};
+export const ConfigurationContent = (args) => {
+    const [showErrorIndicators] = useState(false);
+    const ConditionBuilder = (<AtomicCondition condition={args.condition} fields={demoFields} indicateErrors={showErrorIndicators} dateFunctions={demoDateFunctions} onChange={c => args.setCondition(c)} itemDirection='row' showLhsAsLabel={false} validRhsTypes={args.validRHSTypes}/>);
+    const Inputs = (<Flex container={{ direction: 'column', gap: 2 }}>
+      <Text variant='h4'>Inputs</Text>
+      <Flex container={{ direction: 'column', gap: 1 }}>
+        <Flex container={{ alignItems: 'end', gap: 1 }}>
+          <Input label='Name' type='text' defaultValue='Sample key 1' disabled readOnly={args.readOnly}/>
+          <Input label='Value' type='text' defaultValue='Sample value 1' readOnly={args.readOnly} disabled={args.disabled}/>
+        </Flex>
+        <Flex container={{ alignItems: 'end', gap: 1 }}>
+          <Input label='Name 2' labelHidden type='text' defaultValue='Sample key 2' disabled readOnly={args.readOnly}/>
+          <Input label='Value 2' labelHidden type='text' defaultValue='Sample value 2' readOnly={args.readOnly} disabled={args.disabled}/>
+        </Flex>
+      </Flex>
+    </Flex>);
+    return args.popoverContent === 'advanced' ? ConditionBuilder : Inputs;
+};
+export const ObjectSelectComp = ({ popoverContent, ...args }) => {
+    const t = useI18n();
+    const [drawerOpen, setDrawerOpen] = useState(false);
+    const [drawerData, setDrawerData] = useState(dataPages[0]);
+    const [value, setValue] = useState(args.value);
+    const convertRhsTypes = (useLiteralRHSType, useFieldRHSType, useRelativeDatesType, dateFunctions) => {
+        const setRhsTypes = new Set();
+        if (useLiteralRHSType)
+            setRhsTypes.add('LITERAL');
+        if (useFieldRHSType)
+            setRhsTypes.add('FIELD');
+        if (dateFunctions)
+            setRhsTypes.add('DATE_FUNCTION');
+        if (useRelativeDatesType)
+            setRhsTypes.add('RELATIVE_DATE');
+        return setRhsTypes;
+    };
+    const validRHSTypes = convertRhsTypes(true, true, true, demoDateFunctions);
+    const [submitCondition, setSubmitCondition] = useState(undefined);
+    const [condition, setCondition] = useState(() => submitCondition ||
+        getInitConditionForLhs({ field: 'age' }, demoFields, validRHSTypes, undefined, demoDateFunctions));
+    const handleSubmission = () => {
+        setSubmitCondition(condition);
+    };
+    return (<Flex container={{ direction: 'column', gap: 1 }}>
+      <ObjectSelect {...args} onChange={id => {
+            const data = menuHelpers.getItem(dataPages, id);
+            if (data) {
+                setValue({
+                    id: data.id,
+                    primary: data.primary,
+                    href: data.href ?? '#',
+                    meta: data.id !== '01-4' ? data.secondary?.join('  ') : ''
+                });
+            }
+            else
+                setValue(undefined);
+        }} items={dataPages} configuration={{
+            label: args.disabled || args.readOnly ? 'View Configuration' : 'Edit Configuration',
+            heading: 'Map Parameters',
+            primaryAction: {
+                id: 'submit',
+                text: 'Submit',
+                onClick: popoverContent === 'advanced' ? handleSubmission : args.onSubmit
+            },
+            secondaryAction: {
+                id: 'cancel',
+                text: 'Cancel',
+                onClick: args.onCancel
+            },
+            content: (<ConfigurationContent {...args} popoverContent={popoverContent} condition={condition} setCondition={setCondition} validRHSTypes={validRHSTypes}/>)
+        }} value={value} onPreview={(id, e) => {
+            const data = menuHelpers.getItem(dataPages, id);
+            if (data)
+                setDrawerData(data);
+            setDrawerOpen(true);
+            args.onPreview?.(id, e);
+        }}/>
+      <ViewportDrawer drawerData={drawerData} drawerOpen={drawerOpen} setDrawerOpen={setDrawerOpen}/>
+      {popoverContent === 'advanced' && (<Card>
+          <CardContent>
+            <Text variant='h4'>Output:</Text>
+            <StyledCodeBlock>
+              {submitCondition ? JSON.stringify(submitCondition, null, 2) : '(No condition)'}
+            </StyledCodeBlock>
+
+            <Text variant='h4'>Formatted Output:</Text>
+            <StyledCodeBlock>
+              {submitCondition
+                ? formatCondition({ condition: submitCondition }, demoFields, t)
+                : '(No condition)'}
+            </StyledCodeBlock>
+          </CardContent>
+        </Card>)}
+    </Flex>);
+};
+//# sourceMappingURL=ObjectSelect.mocks.jsx.map

package/jsx/build/ObjectSelect/ObjectSelect.mocks.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"ObjectSelect.mocks.jsx","sourceRoot":"","sources":["../../../src/build/ObjectSelect/ObjectSelect.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["// cSpell:words XPTI\nimport { ChangeEvent, FC, FocusEvent, MouseEvent, useState } from 'react';\n\nimport {\n  AtomicCondition,\n  LeafCondition,\n  getInitConditionForLhs,\n  RHSType,\n  formatCondition,\n  DateFunctionsByType,\n  Field\n} from '@pega/cosmos-react-condition-builder';\nimport {\n  Button,\n  Flex,\n  Input,\n  Card,\n  CardContent,\n  Drawer,\n  Text,\n  FieldValueList,\n  Icon,\n  menuHelpers,\n  MenuItemProps,\n  useI18n,\n  FormControlProps\n} from '@pega/cosmos-react-core';\nimport { ObjectSelect, ObjectSelectProps } from '@pega/cosmos-react-build';\n\nimport { StyledDrawerContent, StyledCodeBlock } from './ObjectSelect.styles';\n\ninterface FormField extends FormControlProps {\n  help?: string;\n  error?: string;\n  validator: (this: FormField) => boolean;\n}\n\ninterface DrawerProps {\n  drawerData?: MenuItemProps;\n  drawerOpen: boolean;\n  setDrawerOpen: (value: boolean) => void;\n}\n\nexport interface ObjectSelectStoryProps extends ObjectSelectProps {\n  onSubmit?: (id: string, e: MouseEvent<HTMLElement>) => void;\n  onCancel?: (id: string, e: MouseEvent<HTMLElement>) => void;\n  popoverContent?: string;\n}\n\nexport const skeletonData = [\n  {\n    id: '01-1',\n    primary: 'primary-link-1',\n    secondary: ['secondary-1'],\n    href: 'http://www.pega.com'\n  },\n  {\n    id: '01-2',\n    primary: 'primary-link-2',\n    secondary: [\n      'secondary-1',\n      'secondary-2',\n      'secondary-3',\n      'secondary-4',\n      'secondary-5',\n      'secondary-6',\n      'secondary-7',\n      'secondary-8',\n      'secondary-9'\n    ],\n    href: 'http://www.pega.com'\n  },\n  {\n    id: '01-3',\n    primary: 'primary-link-3',\n    secondary: ['secondary-1', 'secondary-2'],\n    href: 'http://www.pega.com'\n  },\n  {\n    id: '01-4',\n    primary: 'primary-link-4',\n    secondary: ['secondary-1', 'secondary-2'],\n    href: 'http://www.pega.com'\n  }\n];\n\nexport const dataPages = [\n  {\n    id: '01-1',\n    primary: 'MortgageRequestList-DataSource',\n    secondary: ['Scope', 'O1XPTI-CCompass-Work-MortgageRequest'],\n    href: 'http://www.pega.com'\n  },\n  {\n    id: '01-2',\n    primary: 'Credit Scores List Data Source',\n    secondary: ['Scope', 'CreditScore'],\n    href: 'http://www.pega.com'\n  },\n  {\n    id: '01-3',\n    primary: 'GetAutoLoanByIDDataSource',\n    secondary: ['Scope', 'O1XPTI-CCompass-Work-AutoLoan'],\n    href: 'http://www.pega.com'\n  },\n  {\n    id: '01-4',\n    primary: 'DS_pyMyWorkList',\n    secondary: ['Scope', 'Assign-Worklist'],\n    href: 'http://www.pega.com'\n  }\n];\n\nexport const demoFields: Field[] = [\n  { name: 'employeeId', label: 'Employee ID', type: 'TEXT' },\n  { name: 'firstName', label: 'First Name', type: 'TEXT' },\n  { name: 'lastName', label: 'Last Name', type: 'TEXT' },\n  { name: 'gender', label: 'Gender', type: 'TEXT' },\n  {\n    name: 'department',\n    label: 'Department',\n    type: 'TEXT',\n    possibleValues: [\n      'Customer Service',\n      'Engineering',\n      'Facilities',\n      'Finance',\n      'HR',\n      'IT',\n      'Sales'\n    ]\n  },\n  { name: 'age', label: 'Age', type: 'NUMBER' },\n  { name: 'experience', label: 'Experience (yrs)', type: 'NUMBER' },\n  { name: 'salary', label: 'Salary', type: 'NUMBER' },\n  { name: 'hireDate', label: 'Hire Date', type: 'DATE_ONLY' },\n  { name: 'dateOfBirth', label: 'Date of Birth', type: 'DATE_ONLY' },\n  {\n    name: 'shiftStartTime',\n    label: 'Shift start time',\n    type: 'TIME_ONLY',\n    groupLabel: 'Technical details'\n  },\n  {\n    name: 'shiftEndTime',\n    label: 'Shift end time',\n    type: 'TIME_ONLY',\n    groupLabel: 'Technical details'\n  },\n  {\n    name: 'lastActivityAt',\n    label: 'Last activity at',\n    type: 'DATE_TIME',\n    groupLabel: 'Technical details'\n  },\n  {\n    name: 'nextPasswordReset',\n    label: 'Next password reset',\n    type: 'DATE_TIME',\n    groupLabel: 'Technical details'\n  },\n  { name: 'isSeniorCitizen', label: 'Is Senior Citizen', type: 'BOOLEAN' },\n  { name: 'isRemoteEmployee', label: 'Is Remote Employee', type: 'BOOLEAN' }\n];\n\nexport const demoDateFunctions: DateFunctionsByType = {\n  DATE_TIME: [\n    'YEARS',\n    'QUARTERS',\n    'MONTHS',\n    'WEEKS',\n    'DAYS',\n    'HOURS',\n    'MONTHS_OF_YEAR',\n    'DAYS_OF_MONTH',\n    'DAYS_OF_WEEK'\n  ],\n  DATE_ONLY: [\n    'YEARS',\n    'QUARTERS',\n    'MONTHS',\n    'WEEKS',\n    'MONTHS_OF_YEAR',\n    'DAYS_OF_MONTH',\n    'DAYS_OF_WEEK'\n  ]\n};\n\nexport const initFields = (): FormField[] => {\n  const common = { value: undefined, status: undefined };\n  return [\n    {\n      ...common,\n      name: 'name',\n      required: true,\n      error: 'Please enter a valid name for table',\n      validator() {\n        if (!this.value) return false;\n        return /^[a-z]{1}[a-z0-9]+$/i.test(this.value);\n      }\n    },\n    {\n      ...common,\n      name: 'description',\n      required: true,\n      help: 'Give an appropriate description for the table',\n      error: 'Field cannot be empty',\n      validator() {\n        if (!this.value) return false;\n        return true;\n      }\n    }\n  ];\n};\n\nexport const fieldReducer = (\n  fields: FormField[],\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 ViewportDrawer = ({ drawerData, drawerOpen, setDrawerOpen }: DrawerProps) => {\n  const fields = drawerData?.secondary?.map((data, index) => {\n    return {\n      id: (index + 1).toString(),\n      name: data?.toString() ?? '',\n      value: data\n    };\n  });\n\n  return (\n    <Drawer\n      open={drawerOpen}\n      onOuterClick={() => {\n        setDrawerOpen(false);\n      }}\n      position='fixed'\n      size='30rem'\n      nullWhenClosed\n      shadow\n    >\n      <Flex\n        as={StyledDrawerContent}\n        container={{\n          direction: 'column',\n          alignItems: 'start',\n          gap: 2,\n          pad: 4\n        }}\n      >\n        <Flex container={{ direction: 'column', gap: 1 }}>\n          <Flex container={{ gap: 2, alignItems: 'center' }}>\n            <Button variant='simple' label='Close drawer' icon onClick={() => setDrawerOpen(false)}>\n              <Icon name='times' />\n            </Button>\n            <Text variant='h3'>{drawerData?.primary}</Text>\n          </Flex>\n          <Flex container={{ direction: 'column', gap: 2, pad: 1 }}>\n            <Text as='p'>\n              This is a mock representation for the parameters of the {drawerData?.primary} rule\n            </Text>\n            <FieldValueList variant='inline' fields={fields!} />\n          </Flex>\n        </Flex>\n      </Flex>\n    </Drawer>\n  );\n};\n\nexport const ConfigurationContent = (args: any) => {\n  const [showErrorIndicators] = useState(false);\n\n  const ConditionBuilder = (\n    <AtomicCondition\n      condition={args.condition}\n      fields={demoFields}\n      indicateErrors={showErrorIndicators}\n      dateFunctions={demoDateFunctions}\n      onChange={c => args.setCondition(c)}\n      itemDirection='row'\n      showLhsAsLabel={false}\n      validRhsTypes={args.validRHSTypes}\n    />\n  );\n\n  const Inputs = (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <Text variant='h4'>Inputs</Text>\n      <Flex container={{ direction: 'column', gap: 1 }}>\n        <Flex container={{ alignItems: 'end', gap: 1 }}>\n          <Input\n            label='Name'\n            type='text'\n            defaultValue='Sample key 1'\n            disabled\n            readOnly={args.readOnly}\n          />\n          <Input\n            label='Value'\n            type='text'\n            defaultValue='Sample value 1'\n            readOnly={args.readOnly}\n            disabled={args.disabled}\n          />\n        </Flex>\n        <Flex container={{ alignItems: 'end', gap: 1 }}>\n          <Input\n            label='Name 2'\n            labelHidden\n            type='text'\n            defaultValue='Sample key 2'\n            disabled\n            readOnly={args.readOnly}\n          />\n          <Input\n            label='Value 2'\n            labelHidden\n            type='text'\n            defaultValue='Sample value 2'\n            readOnly={args.readOnly}\n            disabled={args.disabled}\n          />\n        </Flex>\n      </Flex>\n    </Flex>\n  );\n\n  return args.popoverContent === 'advanced' ? ConditionBuilder : Inputs;\n};\n\nexport const ObjectSelectComp: FC<ObjectSelectStoryProps> = ({\n  popoverContent,\n  ...args\n}: ObjectSelectStoryProps) => {\n  const t = useI18n();\n  const [drawerOpen, setDrawerOpen] = useState(false);\n  const [drawerData, setDrawerData] = useState<MenuItemProps>(dataPages[0]);\n  const [value, setValue] = useState<ObjectSelectProps['value']>(args.value);\n\n  const convertRhsTypes = (\n    useLiteralRHSType: boolean,\n    useFieldRHSType: boolean,\n    useRelativeDatesType: boolean,\n    dateFunctions?: DateFunctionsByType\n  ) => {\n    const setRhsTypes: Set<RHSType> = new Set<RHSType>();\n    if (useLiteralRHSType) setRhsTypes.add('LITERAL');\n    if (useFieldRHSType) setRhsTypes.add('FIELD');\n    if (dateFunctions) setRhsTypes.add('DATE_FUNCTION');\n    if (useRelativeDatesType) setRhsTypes.add('RELATIVE_DATE');\n    return setRhsTypes;\n  };\n\n  const validRHSTypes: Set<RHSType> = convertRhsTypes(true, true, true, demoDateFunctions);\n  const [submitCondition, setSubmitCondition] = useState<LeafCondition | undefined>(undefined);\n  const [condition, setCondition] = useState(\n    () =>\n      submitCondition ||\n      getInitConditionForLhs(\n        { field: 'age' },\n        demoFields,\n        validRHSTypes,\n        undefined,\n        demoDateFunctions\n      )\n  );\n\n  const handleSubmission = () => {\n    setSubmitCondition(condition);\n  };\n\n  return (\n    <Flex container={{ direction: 'column', gap: 1 }}>\n      <ObjectSelect\n        {...args}\n        onChange={id => {\n          const data = menuHelpers.getItem(dataPages, 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        items={dataPages}\n        configuration={{\n          label: args.disabled || args.readOnly ? 'View Configuration' : 'Edit Configuration',\n          heading: 'Map Parameters',\n          primaryAction: {\n            id: 'submit',\n            text: 'Submit',\n            onClick: popoverContent === 'advanced' ? handleSubmission : args.onSubmit\n          },\n          secondaryAction: {\n            id: 'cancel',\n            text: 'Cancel',\n            onClick: args.onCancel\n          },\n          content: (\n            <ConfigurationContent\n              {...args}\n              popoverContent={popoverContent}\n              condition={condition}\n              setCondition={setCondition}\n              validRHSTypes={validRHSTypes}\n            />\n          )\n        }}\n        value={value}\n        onPreview={(id, e: { href: string }) => {\n          const data = menuHelpers.getItem(dataPages, id);\n          if (data) setDrawerData(data);\n          setDrawerOpen(true);\n          args.onPreview?.(id, e);\n        }}\n      />\n      <ViewportDrawer\n        drawerData={drawerData}\n        drawerOpen={drawerOpen}\n        setDrawerOpen={setDrawerOpen}\n      />\n      {popoverContent === 'advanced' && (\n        <Card>\n          <CardContent>\n            <Text variant='h4'>Output:</Text>\n            <StyledCodeBlock>\n              {submitCondition ? JSON.stringify(submitCondition, null, 2) : '(No condition)'}\n            </StyledCodeBlock>\n\n            <Text variant='h4'>Formatted Output:</Text>\n            <StyledCodeBlock>\n              {submitCondition\n                ? formatCondition({ condition: submitCondition }, demoFields, t)\n                : '(No condition)'}\n            </StyledCodeBlock>\n          </CardContent>\n        </Card>\n      )}\n    </Flex>\n  );\n};\n"]}

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

@@ -1,13 +1,8 @@
+/// <reference types="react" />
 import { Meta, Story } from '@storybook/react';
-import { MouseEvent } from 'react';
-import { ObjectSelectProps } from '@pega/cosmos-react-build';
+import { ObjectSelectStoryProps } from './ObjectSelect.mocks';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export interface ObjectSelectStoryProps extends ObjectSelectProps {
-    onSubmit?: (id: string, e: MouseEvent<HTMLElement>) => void;
-    onCancel?: (id: string, e: MouseEvent<HTMLElement>) => void;
-    popoverContent?: string;
-}
 export declare const ObjectSelectSkeleton: Story<ObjectSelectStoryProps>;
 export declare const ObjectSelectDemo: Story<ObjectSelectStoryProps>;
 export declare const ObjectSelectDemoInForm: () => JSX.Element | null;

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

@@ -1 +1 @@
-{"version":3,"file":"ObjectSelect.stories.d.ts","sourceRoot":"","sources":["../../../src/build/ObjectSelect/ObjectSelect.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAOL,UAAU,EAEX,MAAM,OAAO,CAAC;AAuBf,OAAO,EAAgB,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;;AAoB3E,wBAGU;AAcV,MAAM,WAAW,sBAAuB,SAAQ,iBAAiB;IAC/D,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC5D,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC5D,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,sBAAsB,CA2C9D,CAAC;AA6PF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,sBAAsB,CAK1D,CAAC;AAqFF,eAAO,MAAM,sBAAsB,0BA8ElC,CAAC"}
+{"version":3,"file":"ObjectSelect.stories.d.ts","sourceRoot":"","sources":["../../../src/build/ObjectSelect/ObjectSelect.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAqB/C,OAAO,EAIL,sBAAsB,EAEvB,MAAM,sBAAsB,CAAC;;AAI9B,wBAGU;AAEV,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,sBAAsB,CA2C9D,CAAC;AAiCF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,sBAAsB,CAE1D,CAAC;AAmCF,eAAO,MAAM,sBAAsB,0BA8ElC,CAAC"}

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

@@ -1,11 +1,10 @@
 import { useReducer, useContext, useState } from 'react';
 import { action } from '@storybook/addon-actions';
-import { Form, Button, Flex, Input, ToasterContext, TextArea, Card, CardContent, Drawer, Text, FieldValueList, Icon, registerIcon, menuHelpers, useI18n, StyledRegion } from '@pega/cosmos-react-core';
+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 { AtomicCondition, getInitConditionForLhs, formatCondition } from '@pega/cosmos-react-condition-builder';
 import * as times from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';
-import { StyledDrawerContent, StyledCodeBlock, StyledConfigurationContent } from './ObjectSelect.styles';
-import { skeletonData, dataPages, demoFields, demoDateFunctions } from './ObjectSelect.mocks';
+import { StyledConfigurationContent } from './ObjectSelect.styles';
+import { skeletonData, fieldReducer, initFields, ObjectSelectComp } from './ObjectSelect.mocks';
 registerIcon(times);
 export default {
     title: 'Build/ObjectSelect',
@@ -69,136 +68,8 @@ ObjectSelectSkeleton.argTypes = {
     onSubmit: { table: { disable: true } },
     onCancel: { table: { disable: true } }
 };
-const ViewportDrawer = ({ drawerData, drawerOpen, setDrawerOpen }) => {
-    const fields = drawerData?.secondary?.map((data, index) => {
-        return {
-            id: (index + 1).toString(),
-            name: data?.toString() ?? '',
-            value: data
-        };
-    });
-    return (<Drawer open={drawerOpen} onOuterClick={() => {
-            setDrawerOpen(false);
-        }} position='fixed' size='30rem' nullWhenClosed shadow>
-      <Flex as={StyledDrawerContent} container={{
-            direction: 'column',
-            alignItems: 'start',
-            gap: 2,
-            pad: 4
-        }}>
-        <Flex container={{ direction: 'column', gap: 1 }}>
-          <Flex container={{ gap: 2, alignItems: 'center' }}>
-            <Button variant='simple' label='Close drawer' icon onClick={() => setDrawerOpen(false)}>
-              <Icon name='times'/>
-            </Button>
-            <Text variant='h3'>{drawerData?.primary}</Text>
-          </Flex>
-          <Flex container={{ direction: 'column', gap: 2, pad: 1 }}>
-            <Text as='p'>
-              This is a mock representation for the parameters of the {drawerData?.primary} rule
-            </Text>
-            <FieldValueList variant='inline' fields={fields}/>
-          </Flex>
-        </Flex>
-      </Flex>
-    </Drawer>);
-};
-const ConfigurationContent = (args) => {
-    const [showErrorIndicators] = useState(false);
-    const ConditionBuilder = (<AtomicCondition condition={args.condition} fields={demoFields} indicateErrors={showErrorIndicators} dateFunctions={demoDateFunctions} onChange={c => args.setCondition(c)} itemDirection='row' showLhsAsLabel={false} validRhsTypes={args.validRHSTypes}/>);
-    const Inputs = (<Flex container={{ direction: 'column', gap: 2 }}>
-      <Text variant='h4'>Inputs</Text>
-      <Flex container={{ direction: 'column', gap: 1 }}>
-        <Flex container={{ alignItems: 'end', gap: 1 }}>
-          <Input label='Name' type='text' defaultValue='Sample key 1' disabled readOnly={args.readOnly}/>
-          <Input label='Value' type='text' defaultValue='Sample value 1' readOnly={args.readOnly} disabled={args.disabled}/>
-        </Flex>
-        <Flex container={{ alignItems: 'end', gap: 1 }}>
-          <Input label='Name 2' labelHidden type='text' defaultValue='Sample key 2' disabled readOnly={args.readOnly}/>
-          <Input label='Value 2' labelHidden type='text' defaultValue='Sample value 2' readOnly={args.readOnly} disabled={args.disabled}/>
-        </Flex>
-      </Flex>
-    </Flex>);
-    return args.popoverContent === 'advanced' ? ConditionBuilder : Inputs;
-};
-const ObjectSelectComp = ({ popoverContent, ...args }) => {
-    const t = useI18n();
-    const [drawerOpen, setDrawerOpen] = useState(false);
-    const [drawerData, setDrawerData] = useState(dataPages[0]);
-    const [value, setValue] = useState(args.value);
-    const convertRhsTypes = (useLiteralRHSType, useFieldRHSType, useRelativeDatesType, dateFunctions) => {
-        const setRhsTypes = new Set();
-        if (useLiteralRHSType)
-            setRhsTypes.add('LITERAL');
-        if (useFieldRHSType)
-            setRhsTypes.add('FIELD');
-        if (dateFunctions)
-            setRhsTypes.add('DATE_FUNCTION');
-        if (useRelativeDatesType)
-            setRhsTypes.add('RELATIVE_DATE');
-        return setRhsTypes;
-    };
-    const validRHSTypes = convertRhsTypes(true, true, true, demoDateFunctions);
-    const [submitCondition, setSubmitCondition] = useState(undefined);
-    const [condition, setCondition] = useState(() => submitCondition ||
-        getInitConditionForLhs({ field: 'age' }, demoFields, validRHSTypes, undefined, demoDateFunctions));
-    const handleSubmission = () => {
-        setSubmitCondition(condition);
-    };
-    return (<Flex container={{ direction: 'column', gap: 1 }}>
-      <ObjectSelect {...args} onChange={id => {
-            const data = menuHelpers.getItem(dataPages, id);
-            if (data) {
-                setValue({
-                    id: data.id,
-                    primary: data.primary,
-                    href: data.href ?? '#',
-                    meta: data.id !== '01-4' ? data.secondary?.join('  ') : ''
-                });
-            }
-            else
-                setValue(undefined);
-        }} items={dataPages} configuration={{
-            label: args.disabled || args.readOnly ? 'View Configuration' : 'Edit Configuration',
-            heading: 'Map Parameters',
-            primaryAction: {
-                id: 'submit',
-                text: 'Submit',
-                onClick: popoverContent === 'advanced' ? handleSubmission : args.onSubmit
-            },
-            secondaryAction: {
-                id: 'cancel',
-                text: 'Cancel',
-                onClick: args.onCancel
-            },
-            content: (<ConfigurationContent {...args} popoverContent={popoverContent} condition={condition} setCondition={setCondition} validRHSTypes={validRHSTypes}/>)
-        }} value={value} onPreview={(id, e) => {
-            const data = menuHelpers.getItem(dataPages, id);
-            if (data)
-                setDrawerData(data);
-            setDrawerOpen(true);
-            args.onPreview?.(id, e);
-        }}/>
-      <ViewportDrawer drawerData={drawerData} drawerOpen={drawerOpen} setDrawerOpen={setDrawerOpen}/>
-      {popoverContent === 'advanced' && (<Card>
-          <CardContent>
-            <Text variant='h4'>Output:</Text>
-            <StyledCodeBlock>
-              {submitCondition ? JSON.stringify(submitCondition, null, 2) : '(No condition)'}
-            </StyledCodeBlock>
-
-            <Text variant='h4'>Formatted Output:</Text>
-            <StyledCodeBlock>
-              {submitCondition
-                ? formatCondition({ condition: submitCondition }, demoFields, t)
-                : '(No condition)'}
-            </StyledCodeBlock>
-          </CardContent>
-        </Card>)}
-    </Flex>);
-};
-export const ObjectSelectDemo = ({ popoverContent, ...args }) => {
-    return <ObjectSelectComp {...args} popoverContent={popoverContent}/>;
+export const ObjectSelectDemo = (args) => {
+    return <ObjectSelectComp {...args} popoverContent={args.popoverContent}/>;
 };
 ObjectSelectDemo.args = {
     label: 'Data source',
@@ -228,52 +99,6 @@ ObjectSelectDemo.argTypes = {
     onSubmit: { table: { disable: true } },
     onCancel: { table: { disable: true } }
 };
-const initFields = () => {
-    const common = { value: undefined, status: undefined };
-    return [
-        {
-            ...common,
-            name: 'name',
-            required: true,
-            error: 'Please enter a valid name for table',
-            validator() {
-                if (!this.value)
-                    return false;
-                return /^[a-z]{1}[a-z0-9]+$/i.test(this.value);
-            }
-        },
-        {
-            ...common,
-            name: 'description',
-            required: true,
-            help: 'Give an appropriate description for the table',
-            error: 'Field cannot be empty',
-            validator() {
-                if (!this.value)
-                    return false;
-                return true;
-            }
-        }
-    ];
-};
-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 ObjectSelectDemoInForm = () => {
     const [fields, setField] = useReducer(fieldReducer, undefined, initFields);
     const { push } = useContext(ToasterContext);