@pega/custom-dx-components 23.1.10 → 23.1.11

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyTwoColumnDetails/demo.stories.jsx

@@ -1,139 +0,0 @@
-import { Text, FieldValueList, Button, DateTimeDisplay, useTheme } from '@pega/cosmos-react-core';
-import PegaDxilMyTwoColumnDetails from './index';
-import { pyReviewRaw, pyReviewResolved, regionChildrenResolved } from './mock.stories';
-import StatusWorkRenderer from './StatusWork.jsx';
-
-export default {
-  title: 'PegaDxilMyTwoColumnDetails',
-  component: PegaDxilMyTwoColumnDetails
-};
-
-const renderField = resolvedProps => {
-  const {
-    displayAsStatus = false,
-    displayMode,
-    value = '',
-    label = '',
-    key,
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    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} />;
-
-  if (label === 'Create Operator')
-    val = (
-      <Button
-        variant='link'
-        style={
-          label !== null
-            ? { width: 'max-content', height: theme.components.input.height }
-            : undefined
-        }
-        key={key}
-      >
-        {value.userName}
-      </Button>
-    );
-
-  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 basePegaDxilMyTwoColumnDetails = () => {
-  const props = {
-    template: 'MyCo_MyComponents_NewDetailsTemplate',
-    showHighlightedData: true,
-    label: 'Test Details',
-    showLabel: true,
-    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: () => {
-          /* nothing */
-        }
-      };
-    }
-  };
-
-  const regionAChildren = pyReviewRaw.children[0].children.map(child => {
-    return props.getPConnect().createComponent(child);
-  });
-  const regionBChildren = pyReviewRaw.children[1].children.map(child => {
-    return props.getPConnect().createComponent(child);
-  });
-
-  return (
-    <PegaDxilMyTwoColumnDetails {...props}>
-      {regionAChildren}
-      {regionBChildren}
-    </PegaDxilMyTwoColumnDetails>
-  );
-};

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyTwoColumnDetails/index.jsx

@@ -1,83 +0,0 @@
-import { Fragment } from 'react';
-import { Grid, Flex, FieldGroup } from '@pega/cosmos-react-core';
-import PropTypes from 'prop-types';
-
-import StyledPegaDxilMyTwoColumnDetailsWrapper from './styles';
-
-// includes in bundle
-import { getAllFields } from './utils';
-
-// Duplicated runtime code from Constellation Design System Component
-
-// 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
-export default function PegaDxilMyTwoColumnDetails(props) {
-
-  const { getPConnect, children, label, showLabel, showHighlightedData  } = props;
-  const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
-
-  const numRegions = getAllFields(getPConnect)?.length;
-  const gridRepeat = "repeat(".concat(numRegions).concat(", 1fr)");
-  const gridContainer = { "colGap": 1};
-  gridContainer.cols = gridRepeat;
-  gridContainer.alignItems = 'start';
-
-  const gridHighlightContainer = { "gap": 2};
-  gridHighlightContainer.cols = gridRepeat;
-  gridHighlightContainer.alignItems = 'start';
-  gridHighlightContainer.pad = [0, 0, 2, 0];
-
-  // Set up highlighted data to pass in return if is set to show, need raw metadata to pass to createComponent
-  let highlightedDataArr = [];
-  if (showHighlightedData) {
-    const { highlightedData = [] } = getPConnect().getRawMetadata().config;
-    highlightedDataArr = highlightedData.map((field) => {
-      field.config.displayMode = 'STACKED_LARGE_VAL';
-
-      // Mark as status display when using pyStatusWork
-      if (field.config.value === '@P .pyStatusWork') {
-        field.type = 'TextInput';
-        field.config.displayAsStatus = true;
-      }
-
-      return getPConnect().createComponent(field);
-    });
-  }
-
-  return (
-    <StyledPegaDxilMyTwoColumnDetailsWrapper>
-    <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
-      {showHighlightedData && highlightedDataArr.length > 0 && (
-        <Grid container={gridHighlightContainer}
-          data-testid={`highlighted-column-count-${numRegions}`}>
-          {highlightedDataArr.map((child, i) => (
-            <Fragment key={`hf-${i + 1}`}>{child}</Fragment>
-          ))}
-        </Grid>
-      )}
-      <Grid container={gridContainer} data-testid={`column-count-${numRegions}`} >
-       {children.map((child, i) => (
-        <Flex container={{ direction: 'column'}} key={`r-${i + 1}`}>
-        {child}
-        </Flex>
-       ))}
-      </Grid>
-    </FieldGroup>
-    </StyledPegaDxilMyTwoColumnDetailsWrapper>
-  );
-
-}
-
-PegaDxilMyTwoColumnDetails.defaultProps = {
-  label: undefined,
-  showLabel: true,
-  showHighlightedData: false
-};
-
-
-PegaDxilMyTwoColumnDetails.propTypes = {
-  showLabel: PropTypes.bool,
-  label: PropTypes.string,
-  getPConnect: PropTypes.func.isRequired,
-  showHighlightedData: PropTypes.bool
-};

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyTwoColumnDetails/mock.stories.js

@@ -1,230 +0,0 @@
-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',
-          displayMode: 'STACKED_LARGE_VAL',
-          displayAsStatus: true,
-          key: 'pyStatusWork'
-        }
-      },
-      {
-        type: 'TextInput',
-        config: {
-          value: '@P .pyID',
-          label: '@L Case ID',
-          displayMode: 'STACKED_LARGE_VAL',
-          key: 'pyID'
-        }
-      },
-      {
-        type: 'DateTime',
-        config: {
-          value: '@P .pxCreateDateTime',
-          label: '@L Create date/time',
-          displayMode: 'STACKED_LARGE_VAL',
-          key: 'pxCreateDateTime'
-        }
-      },
-      {
-        type: 'UserReference',
-        config: {
-          label: '@L Create Operator',
-          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',
-        displayMode: 'STACKED_LARGE_VAL',
-        displayAsStatus: true
-      }
-    },
-    {
-      type: 'TextInput',
-      config: {
-        value: 'M-1002',
-        label: 'Case ID',
-        displayMode: 'STACKED_LARGE_VAL'
-      }
-    },
-    {
-      type: 'DateTime',
-      config: {
-        value: '2022-12-11T20:06:27.232Z',
-        label: 'Create date/time',
-        displayMode: 'STACKED_LARGE_VAL'
-      }
-    },
-    {
-      type: 'UserReference',
-      config: {
-        label: 'Create Operator',
-        value: {
-          userId: 'conns',
-          userName: 'Sara Connor'
-        },
-        placeholder: 'Select...',
-        displayMode: 'STACKED_LARGE_VAL'
-      }
-    }
-  ],
-  displayMode: 'LABELS_LEFT'
-};
-
-export const regionChildrenResolved = [
-  {
-    readOnly: true,
-    value: '',
-    label: 'SLA Deadline',
-    displayMode: 'LABELS_LEFT',
-    key: 'SLA Deadline'
-  },
-  {
-    readOnly: true,
-    value: '',
-    label: 'SLA Goal',
-    displayMode: 'LABELS_LEFT',
-    key: 'SLA Goal'
-  },
-  {
-    readOnly: true,
-    value: '',
-    label: 'SLA Start Time',
-    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'
-  }
-];

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyTwoColumnDetails/styles.js

@@ -1,14 +0,0 @@
-// utilizing theming, comment out, if want individual style
-import styled from 'styled-components';
-import { Configuration } from '@pega/cosmos-react-core';
-
-export default styled(Configuration)``;
-
-// 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;
-//  `;
-// });

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyTwoColumnForm/demo.stories.jsx

@@ -1,178 +0,0 @@
-/* eslint-disable react-hooks/rules-of-hooks */
-import { useState } from 'react';
-import { withKnobs } from '@storybook/addon-knobs';
-
-import PegaDxilMyTwoColumnForm from './index.jsx';
-import { DateInput, Input, FieldValueList, Text } from '@pega/cosmos-react-core';
-import { PhoneInput as CosmosPhone } from '@pega/cosmos-react-core';
-import { pyReviewRaw, regionChildrenResolved } from './mock.stories';
-
-export default {
-  title: 'PegaDxilMyTwoColumnForm',
-  decorators: [withKnobs],
-  component: PegaDxilMyTwoColumnForm
-};
-
-const renderField = resolvedProps => {
-  const { displayMode, value = '', label = '', key } = resolvedProps;
-
-  const [inputValue, setInputValue] = useState(value);
-  const [phoneValue, setPhoneValue] = useState('+16397975093');
-
-
-  const variant = displayMode === 'LABELS_LEFT' ? 'inline' : 'stacked';
-
-  let val =
-    value !== '' ? (
-      <Text
-        variant='h1'
-        as='span'
-        key={key}
-        onChange={e => {
-          setInputValue(e.target.value);
-        }}
-      >
-        {inputValue}
-      </Text>
-    ) : (
-      ''
-    );
-
-
-  if (label === 'Service Date')
-    val = (
-      <DateInput
-        value={inputValue}
-        style={{ fontSize: '14px' }}
-        key={key}
-        onChange={dateVal => {
-          const { valueAsISOString: date } = dateVal;
-          const trimmedDate = date ? date.substring(0, date.indexOf('T')) : date;
-          setInputValue(trimmedDate);
-        }}
-      ></DateInput>
-    );
-
-  if (label === 'Email')
-    val = (
-      <Input
-        type='email'
-        value={inputValue}
-        style={{ fontSize: '14px' }}
-        key={key}
-        onChange={e => {
-          setInputValue(e.target.value);
-        }}
-      ></Input>
-    );
-
-  if (label === 'First Name' || label === 'Last Name' || label === 'Middle Name')
-    val = (
-      <Input
-        value={inputValue}
-        style={{ fontSize: '14px' }}
-        key={key}
-        onChange={e => {
-          setInputValue(e.target.value);
-        }}
-      ></Input>
-    );
-
-  if (label === 'Phone Number')
-    val = (
-      <CosmosPhone
-        value={phoneValue}
-        showCountryCode
-        style={{ fontSize: '14px' }}
-        key={key}
-        onChange={phoneVal => {
-          setPhoneValue(phoneVal);
-        }}
-      ></CosmosPhone>
-    );
-
-
-  if (variant === 'inline') {
-    val = value || (
-      <span
-        aria-hidden='true'
-        key={key}
-        onChange={e => {
-          setInputValue(e.target.value);
-        }}
-      >
-        &ndash;&ndash;
-      </span>
-    );
-  } else {
-    val = (
-      <Text
-        variant='h1'
-        as='span'
-        key={key}
-        onChange={e => {
-          setInputValue(e.target.value);
-        }}
-      >
-        {val}
-      </Text>
-    );
-  }
-  return (
-    <FieldValueList
-      variant={variant}
-      fields={[{ name: label, value: val }]}
-      key={key}
-      onChange={() => {
-        /* nothing */
-      }}
-    />
-  );
-};
-
-export const basePegaDxilMyTwoColumnForm = () => {
-  const props = {
-    template: 'DefaultForm',
-    getPConnect: () => {
-      return {
-        getChildren: () => {
-          return pyReviewRaw.children;
-        },
-        getInheritedProps: () => {
-          return pyReviewRaw.config.inheritedProps;
-        },
-        createComponent: config => {
-          // eslint-disable-next-line default-case
-          switch (config.config.value) {
-            case '@P .FirstName':
-              return renderField(regionChildrenResolved[0]);
-            case '@P .MiddleName':
-              return renderField(regionChildrenResolved[1]);
-            case '@P .LastName':
-              return renderField(regionChildrenResolved[2]);
-            case '@P .Email':
-              return renderField(regionChildrenResolved[3]);
-            case '@P .PhoneNumber':
-              return renderField(regionChildrenResolved[4]);
-            case '@P .ServiceDate':
-              return renderField(regionChildrenResolved[5]);
-          }
-        }
-      };
-    }
-  };
-
-  const regionAChildren = pyReviewRaw.children[0].children.map(child => {
-    return props.getPConnect().createComponent(child);
-  });
-  const regionBChildren = pyReviewRaw.children[1].children.map(child => {
-    return props.getPConnect().createComponent(child);
-  });
-
-  return (
-    <PegaDxilMyTwoColumnForm {...props}>
-      {regionAChildren}
-      {regionBChildren}
-    </PegaDxilMyTwoColumnForm>
-  );
-};

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyTwoColumnForm/index.jsx

@@ -1,48 +0,0 @@
-import { Grid, Flex, FieldGroup } from '@pega/cosmos-react-core';
-import PropTypes from 'prop-types';
-
-import StyledPegaDxilMyTwoColumnFormWrapper from './styles';
-
-
-// Duplicated runtime code from Constellation Design System Component
-
-// 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
-export default function PegaDxilMyTwoColumnForm(props) {
-
-
-  const { children, label, showLabel, getPConnect } = props;
-  const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
-
-  const numRegions = children?.length;
-  const gridRepeat = "repeat(".concat(numRegions).concat(", 1fr)");
-  const gridContainer = {"colGap" : 1};
-  gridContainer.cols = gridRepeat;
-  gridContainer.alignItems = 'start';
-
-  const flexContainer = {direction: 'column'};
-  flexContainer.gap = 2;
-
-  return (
-    <StyledPegaDxilMyTwoColumnFormWrapper>
-      <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
-        <Grid container={gridContainer}>
-        {children.map((child, i) => (
-          <Flex container={flexContainer} key={`r-${i + 1}`}>
-          {child}
-          </Flex>
-        ))}
-        </Grid>
-      </FieldGroup>
-    </StyledPegaDxilMyTwoColumnFormWrapper>
-  );
-
-}
-
-PegaDxilMyTwoColumnForm.defaultProps = {
-  children: []
-};
-
-PegaDxilMyTwoColumnForm.propTypes = {
-  children: PropTypes.arrayOf(PropTypes.node),
-};