@pega/dx-component-builder-sdk 0.25.6 → 0.25.7

package/tests/assets/sdk-r/components/create/custom-constellation/template/YourOrg_test25_test25TwoColumnDetails/TwoColumnDetails.svg

@@ -1,28 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="100px" height="70px" viewBox="0 0 100 70" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>2 col </title>
-    <g id="Page-Config" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Page-layouts" transform="translate(-847.000000, -84.000000)">
-            <g id="2-col-" transform="translate(847.000000, 84.000000)">
-                <rect id="bg" stroke="#A5A8BC" stroke-width="0.5" fill="#E7E9EB" x="0.25" y="0.25" width="99.5" height="69.5"></rect>
-                <g id="white" transform="translate(3.000000, 3.000000)" fill="#FFFFFF">
-                    <rect id="Rectangle" x="0" y="0" width="94" height="66.5"></rect>
-                </g>
-                <g id="gray-copy-2" transform="translate(6.000000, 6.000000)" fill="#8084A7">
-                    <rect id="Rectangle" x="0" y="-2.84217094e-14" width="42" height="63.8"></rect>
-                    <rect id="Rectangle" x="46" y="-2.84217094e-14" width="42" height="63.8"></rect>
-                </g>
-                <g id="labels-copy" transform="translate(22.000000, 17.000000)" fill="#FFFFFF" font-family="OpenSans-Semibold, Open Sans" font-size="11" font-weight="500">
-                    <text id="B">
-                        <tspan x="45.75" y="12">B</tspan>
-                    </text>
-                    <g id="labels">
-                        <text id="A">
-                            <tspan x="0.75" y="12">A</tspan>
-                        </text>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>

package/tests/assets/sdk-r/components/create/custom-constellation/template/YourOrg_test25_test25TwoColumnDetails/create-nonce.ts

@@ -1,5 +0,0 @@
-// @ts-ignore
-if (window?.__webpack_nonce__) {
-  // @ts-ignore
-  __webpack_nonce__ = window.__webpack_nonce__;
-}

package/tests/assets/sdk-r/components/create/custom-constellation/template/YourOrg_test25_test25TwoColumnDetails/demo.stories.tsx

@@ -1,208 +0,0 @@
-/* eslint-disable no-nested-ternary */
-/* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
-import type { Meta, StoryObj } from '@storybook/react';
-import { Text, FieldValueList, DateTimeDisplay, useTheme } from '@pega/cosmos-react-core';
-import YourOrgTest25Test25TwoColumnDetails from './index';
-import { pyReviewRaw, pyReviewResolved, regionChildrenResolved, operatorDetails, configProps } from './mock';
-import StatusWorkRenderer from './StatusWork';
-import Operator from './Operator';
-
-const meta: Meta<typeof YourOrgTest25Test25TwoColumnDetails> = {
-  title: 'YourOrgTest25Test25TwoColumnDetails',
-  component: YourOrgTest25Test25TwoColumnDetails,
-  excludeStories: /.*Data$/,
-  parameters: {
-    type: 'Details'
-  }
-};
-
-export default meta;
-type Story = StoryObj<typeof YourOrgTest25Test25TwoColumnDetails>;
-
-if (!window.PCore) {
-  window.PCore = {};
-}
-
-window.PCore.getLocaleUtils = () => {
-  return {
-    getLocaleValue: value => {
-      return value;
-    }
-  };
-};
-
-window.PCore.getUserApi = () => {
-  return {
-    getOperatorDetails: () => {
-      return new Promise(resolve => {
-        resolve(operatorDetails);
-      });
-    }
-  };
-};
-
-const Region = () => {
-  return <></>;
-};
-
-const renderField = resolvedProps => {
-  const {
-    displayAsStatus = false,
-    displayMode,
-    value = '',
-    label = '',
-    key,
-    // eslint-disable-next-line react-hooks/rules-of-hooks, @typescript-eslint/no-unused-vars
-    theme = useTheme()
-  } = resolvedProps;
-
-  const variant = displayMode === 'LABELS_LEFT' ? 'inline' : 'stacked';
-
-  let val =
-    value !== '' ? (
-      <Text variant='h1' as='span' key={key}>
-        {value}
-      </Text>
-    ) : (
-      ''
-    );
-
-  if (label === 'Create date/time') val = <DateTimeDisplay value={value} variant='datetime' format='long' clockFormat={null} key={key} />;
-
-  if (displayAsStatus === true) val = <StatusWorkRenderer value={value} key={key} />;
-
-  const [_label] =
-    label === 'Create operator'
-      ? [configProps.createLabel, configProps.createOperator, configProps.createDateTime]
-      : label === 'Update operator'
-        ? [configProps.updateLabel, configProps.updateOperator, configProps.updateDateTime]
-        : [configProps.resolveLabel, configProps.resolveOperator, configProps.resolveDateTime];
-
-  if (label === 'Create Operator')
-    val = (
-      <Operator
-        label={configProps.hideLabel ? '' : _label}
-        name={configProps.createOperator.userName}
-        id={configProps.createOperator.userId}
-        value={undefined}
-        validatemessage=''
-        hideLabel={false}
-        readOnly={false}
-        required={false}
-        disabled={false}
-        externalUser={undefined}
-        metaObj={undefined}
-        testId=''
-        helperText=''
-      />
-    );
-
-  if (variant === 'inline') {
-    val = value || (
-      <span aria-hidden='true' key={key}>
-        &ndash;&ndash;
-      </span>
-    );
-  } else {
-    val = (
-      <Text variant='h1' as='span' key={key}>
-        {val}
-      </Text>
-    );
-  }
-  return <FieldValueList variant={variant} fields={[{ name: label, value: val }]} key={key} />;
-};
-
-export const BaseYourOrgTest25Test25TwoColumnDetails: Story = args => {
-  const props = {
-    getPConnect: () => {
-      return {
-        getChildren: () => {
-          return pyReviewRaw.children;
-        },
-        getRawMetadata: () => {
-          return pyReviewRaw;
-        },
-        getContextName: () => {
-          return 'app/primary_1';
-        },
-        getInheritedProps: () => {
-          return pyReviewRaw.config.inheritedProps;
-        },
-        createComponent: config => {
-          // eslint-disable-next-line default-case
-          switch (config.config.value) {
-            case '@P .pyStatusWork':
-              return renderField(pyReviewResolved.highlightedData[0].config);
-            case '@P .pyID':
-              return renderField(pyReviewResolved.highlightedData[1].config);
-            case '@P .pxCreateDateTime':
-              return renderField(pyReviewResolved.highlightedData[2].config);
-            case '@USER .pxCreateOperator':
-              return renderField(pyReviewResolved.highlightedData[3].config);
-            case '@P .pySLADeadline':
-              return renderField(regionChildrenResolved[0]);
-            case '@P .pySLAGoal':
-              return renderField(regionChildrenResolved[1]);
-            case '@P .pySLAStartTime':
-              return renderField(regionChildrenResolved[2]);
-          }
-        },
-        setInheritedProp: () => {
-          /* nothing */
-        },
-        resolveConfigProps: config => {
-          return config;
-        }
-      };
-    }
-  };
-
-  return (
-    <YourOrgTest25Test25TwoColumnDetails {...props} {...args}>
-      <Region
-        {...{
-          getPConnect: () => ({
-            setInheritedProp: () => {},
-            getChildren: () =>
-              pyReviewRaw.children[0].children.map((child, index) => {
-                return {
-                  getPConnect: () => ({
-                    getRawMetadata: () => pyReviewRaw.children[0].children[index],
-                    getConfigProps: () => {},
-                    resolveConfigProps: () => regionChildrenResolved[index],
-                    getComponent: () => props.getPConnect().createComponent(pyReviewRaw.children[0].children[index])
-                  })
-                };
-              })
-          })
-        }}
-      />
-      <Region
-        {...{
-          getPConnect: () => ({
-            setInheritedProp: () => {},
-            getChildren: () =>
-              pyReviewRaw.children[1].children.map((child, index) => {
-                return {
-                  getPConnect: () => ({
-                    getRawMetadata: () => pyReviewRaw.children[1].children[index],
-                    getConfigProps: () => {},
-                    resolveConfigProps: () => regionChildrenResolved[index],
-                    getComponent: () => props.getPConnect().createComponent(pyReviewRaw.children[1].children[index])
-                  })
-                };
-              })
-          })
-        }}
-      />
-    </YourOrgTest25Test25TwoColumnDetails>
-  );
-};
-
-BaseYourOrgTest25Test25TwoColumnDetails.args = {
-  showLabel: true,
-  label: 'Details Region template',
-  showHighlightedData: true
-};

package/tests/assets/sdk-r/components/create/custom-constellation/template/YourOrg_test25_test25TwoColumnDetails/index.tsx

@@ -1,82 +0,0 @@
-import { Fragment, Children, ReactElement } from 'react';
-import { Grid, Flex, FieldGroup, withConfiguration, GridContainerProps } from '@pega/cosmos-react-core';
-import type { PConnFieldProps } from './PConnProps';
-import './create-nonce';
-import DetailsRender from './DetailsRender';
-import HighlightRender from './HighlightRender';
-
-import StyledYourOrgTest25Test25TwoColumnDetailsWrapper, { StyledDetailsGridContainer, StyledHighlightedFieldsHrLine } from './styles';
-
-// includes in bundle
-import { getAllFields } from './utils';
-
-// interface for props
-interface YourOrgTest25Test25TwoColumnDetailsProps extends PConnFieldProps {
-  // If any, enter additional props that only exist on TextInput here
-  showLabel: boolean;
-  showHighlightedData: boolean;
-  children: ReactElement[];
-}
-
-// props passed in combination of props from property panel (config.json) and run time props from Constellation
-// any default values in config.pros should be set in defaultProps at bottom of this file
-function YourOrgTest25Test25TwoColumnDetails(props: YourOrgTest25Test25TwoColumnDetailsProps) {
-  const { getPConnect, label, children, showLabel = true, showHighlightedData = false } = props;
-  const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
-
-  // update children with readonly
-  Children.toArray(children).forEach(child => {
-    // @ts-ignore
-    child.props.getPConnect().setInheritedProp('readOnly', true);
-    // @ts-ignore
-    child.props.getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
-  });
-
-  const numRegions = getAllFields(getPConnect)?.length;
-  const gridRepeat = 'repeat('.concat(numRegions.toString()).concat(', 1fr)');
-
-  const gridContainer: GridContainerProps = { colGap: 6 };
-  gridContainer.cols = gridRepeat;
-  gridContainer.alignItems = 'start';
-
-  // Set up highlighted data to pass in return if is set to show, need raw metadata to pass to createComponent
-  let highlightedDataArr = [];
-  if (showHighlightedData) {
-    // @ts-ignore
-    const { highlightedData = [] } = getPConnect().getRawMetadata().config;
-    // @ts-ignore
-    highlightedDataArr = highlightedData.map(field => {
-      return <HighlightRender field={field} getPConnect={props.getPConnect} />;
-    });
-  }
-
-  return (
-    <StyledYourOrgTest25Test25TwoColumnDetailsWrapper>
-      <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
-        {showHighlightedData && highlightedDataArr.length > 0 && (
-          <>
-            <Flex container={{ direction: 'row', alignItems: 'start', colGap: 10 }} data-testid={`highlighted-column-count-${numRegions}`}>
-              {highlightedDataArr.map((child: any, i: number) => (
-                <Fragment key={`hf-${i + 1}`}>{child}</Fragment>
-              ))}
-            </Flex>
-            <StyledHighlightedFieldsHrLine />
-          </>
-        )}
-        <Grid as={StyledDetailsGridContainer} container={gridContainer} data-testid={`column-count-${numRegions}`}>
-          {children.map((child: any, i: number) => (
-            <Flex
-              // @ts-ignore
-              container={{ direction: 'column', alignItems: 'normal', colGap: 1, rowGap: 1.5 }}
-              key={`r-${i + 1}`}
-            >
-              <DetailsRender child={child} />
-            </Flex>
-          ))}
-        </Grid>
-      </FieldGroup>
-    </StyledYourOrgTest25Test25TwoColumnDetailsWrapper>
-  );
-}
-
-export default withConfiguration(YourOrgTest25Test25TwoColumnDetails);

package/tests/assets/sdk-r/components/create/custom-constellation/template/YourOrg_test25_test25TwoColumnDetails/mock.ts

@@ -1,289 +0,0 @@
-// @ts-nocheck
-export const pyReviewRaw = {
-  name: 'pyReview',
-  type: 'View',
-  config: {
-    template: 'Details',
-    ruleClass: 'MyCo-MyCompon-Work-MyComponents',
-    showLabel: true,
-    label: '@L Details',
-    localeReference: '@LR MYCO-MYCOMPON-WORK-MYCOMPONENTS!VIEW!PYREVIEW',
-    showHighlightedData: true,
-    highlightedData: [
-      {
-        type: 'TextInput',
-        config: {
-          value: '@P .pyStatusWork',
-          label: '@L Work Status',
-          hideLabel: true,
-          displayMode: 'STACKED_LARGE_VAL',
-          displayAsStatus: true,
-          key: 'pyStatusWork'
-        }
-      },
-      {
-        type: 'TextInput',
-        config: {
-          value: '@P .pyID',
-          label: '@L Case ID',
-          hideLabel: true,
-          displayMode: 'STACKED_LARGE_VAL',
-          key: 'pyID'
-        }
-      },
-      {
-        type: 'DateTime',
-        config: {
-          value: '@P .pxCreateDateTime',
-          label: '@L Create date/time',
-          hideLabel: true,
-          displayMode: 'STACKED_LARGE_VAL',
-          key: 'pxCreateDateTime'
-        }
-      },
-      {
-        type: 'UserReference',
-        config: {
-          label: '@L Create Operator',
-          hideLabel: true,
-          value: '@USER .pxCreateOperator',
-          placeholder: 'Select...',
-          displayMode: 'STACKED_LARGE_VAL',
-          key: 'pxCreateOperator'
-        }
-      }
-    ],
-    inheritedProps: [
-      {
-        prop: 'label',
-        value: '@L Details'
-      },
-      {
-        prop: 'showLabel',
-        value: true
-      }
-    ]
-  },
-  children: [
-    {
-      name: 'A',
-      type: 'Region',
-      key: 'A',
-      getPConnect: () => {
-        return {
-          getRawMetadata: () => {
-            return pyReviewRaw.children[0];
-          }
-        };
-      },
-      children: [
-        {
-          type: 'DateTime',
-          config: {
-            value: '@P .pySLADeadline',
-            label: '@L SLA Deadline',
-            key: 'pySLADeadline'
-          }
-        },
-        {
-          type: 'DateTime',
-          config: {
-            value: '@P .pySLAGoal',
-            label: '@L SLA Goal',
-            key: 'pySLAGoal'
-          }
-        },
-        {
-          type: 'RadioButtons',
-          config: {
-            value: '@P .pySLAStartTime',
-            label: '@L SLA Start Time',
-            listType: 'associated',
-            datasource: '@ASSOCIATED .pySLAStartTime',
-            key: 'pySLAStartTime'
-          }
-        }
-      ]
-    },
-    {
-      name: 'B',
-      type: 'Region',
-      key: 'B',
-      getPConnect: () => {
-        return {
-          getRawMetadata: () => {
-            return pyReviewRaw.children[0];
-          }
-        };
-      },
-      children: [
-        {
-          type: 'DateTime',
-          config: {
-            value: '@P .pySLADeadline',
-            label: '@L SLA Deadline',
-            key: 'pySLADeadline'
-          }
-        },
-        {
-          type: 'DateTime',
-          config: {
-            value: '@P .pySLAGoal',
-            label: '@L SLA Goal',
-            key: 'pySLAGoal'
-          }
-        },
-        {
-          type: 'RadioButtons',
-          config: {
-            value: '@P .pySLAStartTime',
-            label: '@L SLA Start Time',
-            listType: 'associated',
-            datasource: '@ASSOCIATED .pySLAStartTime',
-            key: 'pySLAStartTime'
-          }
-        }
-      ]
-    }
-  ],
-  classID: 'MyCo-MyCompon-Work-MyComponents'
-};
-
-export const pyReviewResolved = {
-  readOnly: true,
-  template: 'Details',
-  ruleClass: 'MyCo-MyCompon-Work-MyComponents',
-  showLabel: true,
-  label: 'Details',
-  localeReference: 'MYCO-MYCOMPON-WORK-MYCOMPONENTS!VIEW!PYREVIEW',
-  showHighlightedData: true,
-  highlightedData: [
-    {
-      type: 'TextInput',
-      config: {
-        value: 'New',
-        label: 'Work Status',
-        displayAsStatus: true
-      }
-    },
-    {
-      type: 'TextInput',
-      config: {
-        value: 'M-1002',
-        label: 'Case ID'
-      }
-    },
-    {
-      type: 'DateTime',
-      config: {
-        value: '2022-12-11T20:06:27.232Z',
-        label: 'Create date/time'
-      }
-    },
-    {
-      type: 'UserReference',
-      config: {
-        label: 'Create Operator',
-        value: {
-          userId: 'conns',
-          userName: 'Sara Connor'
-        },
-        placeholder: 'Select...'
-      }
-    }
-  ],
-  displayMode: 'LABELS_LEFT'
-};
-
-export const regionChildrenResolved = [
-  {
-    readOnly: true,
-    value: 'Deadline',
-    label: 'SLA Deadline',
-    hideLabel: true,
-    displayMode: 'LABELS_LEFT',
-    key: 'SLA Deadline'
-  },
-  {
-    readOnly: true,
-    value: 'Goal',
-    label: 'SLA Goal',
-    hideLabel: true,
-    displayMode: 'LABELS_LEFT',
-    key: 'SLA Goal'
-  },
-  {
-    readOnly: true,
-    value: 'Start Time',
-    label: 'SLA Start Time',
-    hideLabel: true,
-    listType: 'associated',
-    datasource: [
-      {
-        key: 'AssignmentCreation',
-        value: 'The creation time of the Assignment'
-      },
-      {
-        key: 'CurrentTime',
-        value: 'Current Date Time'
-      }
-    ],
-    displayMode: 'LABELS_LEFT',
-    key: 'SLA Start Time'
-  }
-];
-
-export const operatorDetails = {
-  data: {
-    pzLoadTime: 'January 18, 2023 10:33:19 AM EST',
-    pzPageNameHash: '_pa1519192551088960pz',
-    pyOperatorInfo: {
-      pyUserName: 'french DigV2',
-      pyPosition: '',
-      pyImageInsKey: '',
-      pySkills: [
-        {
-          pySkillName: '',
-          pzIndexOwnerKey: 'DATA-ADMIN-OPERATOR-ID FRENCHTEST.DIGV2',
-          pySkillRating: 0
-        }
-      ],
-      pyReportToUserName: '',
-      pyReportTo: '',
-      pyOrganization: 'DXIL',
-      pyTitle: '',
-      pyLabel: 'frenchTest.DigV2',
-      pyEmailAddress: 'User@DigV2',
-      pyTelephone: ''
-    }
-  },
-  status: 200,
-  statusText: '',
-  headers: {
-    'content-length': '435',
-    'content-type': 'application/json;charset=UTF-8'
-  },
-  request: {}
-};
-
-export const configProps = {
-  label: 'Create operator',
-  createLabel: 'Created',
-  updateLabel: 'Updated',
-  updateDateTime: '2023-01-16T14:53:33.280Z',
-  createDateTime: '2023-01-16T14:53:33.198Z',
-  updateOperator: {
-    userId: 'admin@mediaco',
-    userName: 'admin'
-  },
-  createOperator: {
-    userId: 'admin@mediaco',
-    userName: 'admin'
-  },
-  resolveLabel: '',
-  resolveOperator: '',
-  resolveDateTime: '',
-  hideLabel: true,
-  key: '_532zx1dah',
-  displayMode: 'LABELS_LEFT'
-};

package/tests/assets/sdk-r/components/create/custom-constellation/template/YourOrg_test25_test25TwoColumnDetails/styles.ts

@@ -1,23 +0,0 @@
-// individual style, comment out above, and uncomment here and add styles
-import styled, { css } from 'styled-components';
-
-export default styled.div(() => {
-  return css`
-    margin: 0px 0;
-  `;
-});
-
-export const StyledDetailsGridContainer = styled.div(() => {
-  return css`
-    margin-line-start: 1;
-  `;
-});
-
-export const StyledHighlightedFieldsHrLine = styled.hr(() => {
-  return css`
-    line: {
-      margin: '0.75rem 0';
-      opacity: '50%';
-    }
-  `;
-});