@pega/custom-dx-components 8.8.16 → 8.8.18

package/src/tasks/init/template/test/assets/components/createAll/Pega_DXIL_MyDecimal/index.jsx

@@ -0,0 +1,270 @@
+import { useState, useEffect, useRef } from 'react';
+import { NumberInput, NumberDisplay, CurrencyDisplay, FieldValueList, Text } from '@pega/cosmos-react-core';
+import PropTypes from 'prop-types';
+
+// includes in bundle
+import StyledPegaDxilMyDecimalWrapper from './styles';
+import handleEvent from "./event-utils";
+import { suggestionsHandler } from './suggestions-handler';
+
+
+// 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
+const PegaDxilMyDecimal = props => {
+  const {
+    getPConnect,
+    value,
+    placeholder,
+    validatemessage,
+    label,
+    hideLabel,
+    helperText,
+    testId,
+    displayMode,
+    additionalProps,
+    variant,
+    formatter,
+    negative,
+    notation,
+    currencyISOCode,
+    isTableFormatter,
+    hasSuggestions
+  } = props;
+  let { showGroupSeparators } = props;
+  let { currencyDisplay } = props;
+  const pConn = getPConnect();
+  const actions = pConn.getActionsApi();
+  const propName = pConn.getStateProps().value;
+  const [decimalValue, setDecimalValue] = useState(value?.toString());
+  const hasValueChange = useRef(false);
+
+  let { readOnly, required, disabled } = props;
+  [readOnly, required, disabled] = [readOnly, required, disabled].map(
+    (prop) => prop === true || (typeof prop === 'string' && prop === 'true')
+  );
+
+  const [status, setStatus] = useState(hasSuggestions ? 'pending' : undefined);
+
+  useEffect(() => {
+    if (validatemessage !== '') {
+      setStatus('error');
+    }
+    if (hasSuggestions) {
+      setStatus('pending');
+    } else if (!hasSuggestions && status !== 'success') {
+      setStatus(validatemessage !== '' ? 'error' : undefined);
+    }
+  }, [validatemessage, hasSuggestions]);
+
+  const { decimalPrecision, currencyDecimalPrecision } = props;
+  let numberOfDecimals = parseInt(decimalPrecision, 10);
+  if (Number.isNaN(numberOfDecimals)) {
+    numberOfDecimals = decimalPrecision === '' ? undefined : 2;
+  }
+  let noOfFractionDigits = currencyDecimalPrecision === 'auto' ? undefined : parseInt(currencyDecimalPrecision, 10);
+
+  useEffect(() => {
+    setDecimalValue(value?.toString());
+  }, [value]);
+
+  let unit;
+
+  if (['DISPLAY_ONLY', 'LABELS_LEFT', 'STACKED_LARGE_VAL'].includes(displayMode)) {
+    if (displayMode !== 'STACKED_LARGE_VAL' && isTableFormatter) {
+      showGroupSeparators = true;
+      noOfFractionDigits = undefined;
+      if (formatter === 'Currency-Code') {
+        currencyDisplay = 'code';
+      }
+    }
+
+    switch (formatter) {
+      case 'Integer': {
+        numberOfDecimals = 0;
+        break;
+      }
+      case 'Percentage': {
+        showGroupSeparators = false;
+        unit = 'percent';
+        break;
+      }
+      case 'Decimal-Auto': {
+        numberOfDecimals = Number.isInteger(decimalValue) ? 0 : 2;
+        break;
+      }
+      default: {
+        break;
+      }
+    }
+
+
+
+    const displayComp =
+      formatter === 'Currency' || formatter === 'Currency-Code' ? (
+        <CurrencyDisplay
+          value={decimalValue}
+          currencyISOCode={currencyISOCode}
+          formattingOptions={{
+            groupSeparators: showGroupSeparators,
+            fractionDigits: noOfFractionDigits,
+            currency: currencyDisplay,
+            negative,
+            notation: negative === 'parentheses' ? 'standard' : notation
+          }}
+        />
+      ) : (
+        <NumberDisplay
+          value={decimalValue}
+          formattingOptions={{
+            fractionDigits: numberOfDecimals,
+            groupSeparators: showGroupSeparators,
+            notation
+          }}
+          unit={unit}
+        />
+      );
+
+
+    switch (displayMode) {
+      case 'DISPLAY_ONLY': {
+        return (<StyledPegaDxilMyDecimalWrapper> displayComp </StyledPegaDxilMyDecimalWrapper>);
+      }
+      case 'LABELS_LEFT': {
+        return (
+          <StyledPegaDxilMyDecimalWrapper>
+          <FieldValueList
+            variant={hideLabel ? 'stacked' : variant}
+            data-testid={testId}
+            fields={[{ id: '1', name: hideLabel ? '' : label, value: displayComp }]}
+          />
+          </StyledPegaDxilMyDecimalWrapper>
+        );
+      }
+      case 'STACKED_LARGE_VAL': {
+        return (
+          <StyledPegaDxilMyDecimalWrapper>
+          <FieldValueList
+            variant='stacked'
+            data-testid={testId}
+            fields={[
+              {
+                id: '2',
+                name: hideLabel ? '' : label,
+                value: (
+                  <Text variant='h1' as='span'>
+                    {displayComp}
+                  </Text>
+                )
+              }
+            ]}
+          />
+          </StyledPegaDxilMyDecimalWrapper>
+        );
+      }
+      // no default
+    }
+  }
+
+  const onResolveSuggestionHandler = (accepted) => {
+    suggestionsHandler(accepted, pConn, setStatus);
+  };
+
+  return (
+    <StyledPegaDxilMyDecimalWrapper>
+    <NumberInput
+      {...additionalProps}
+      label={label}
+      labelHidden={hideLabel}
+      info={validatemessage || helperText}
+      value={decimalValue}
+      status={status}
+      placeholder={placeholder}
+      disabled={disabled}
+      readOnly={readOnly}
+      required={required}
+      numberOfDecimals={numberOfDecimals}
+      showGroupSeparators={showGroupSeparators}
+      data-testid={testId}
+      onChange={(enteredValue) => {
+        if (hasSuggestions) {
+          setStatus(undefined);
+        }
+        setDecimalValue(enteredValue);
+        if (value !== (enteredValue !== '' ? Number(enteredValue) : '')) {
+          handleEvent(actions, 'change', propName, enteredValue !== '' ? Number(enteredValue) : '');
+          hasValueChange.current = true;
+        }
+      }}
+      onBlur={() => {
+        if (!value || hasValueChange.current) {
+          handleEvent(actions, 'blur', propName, decimalValue !== '' ? Number(decimalValue) : '');
+          if (hasSuggestions) {
+            pConn.ignoreSuggestion();
+          }
+          hasValueChange.current = false;
+        }
+      }}
+      onResolveSuggestion={onResolveSuggestionHandler}
+    />
+    </StyledPegaDxilMyDecimalWrapper>
+  );
+}
+
+
+PegaDxilMyDecimal.defaultProps = {
+  value: '',
+  placeholder: '',
+  validatemessage: '',
+  helperText: '',
+  hideLabel: false,
+  disabled: false,
+  readOnly: false,
+  required: false,
+  testId: null,
+  decimalPrecision: '',
+  showGroupSeparators: false,
+  displayMode: null,
+  additionalProps: {},
+  variant: 'inline',
+  currencyISOCode: 'USD',
+  formatter: 'defaultDecimal',
+  isoCodeSelection: 'constant',
+  negative: 'minus-sign',
+  notation: 'standard',
+  currencyDisplay: 'symbol',
+  currencyDecimalPrecision: 'auto',
+  isTableFormatter: false,
+  hasSuggestions: false
+};
+
+PegaDxilMyDecimal.propTypes = {
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  placeholder: PropTypes.string,
+  label: PropTypes.string.isRequired,
+  hideLabel: PropTypes.bool,
+  getPConnect: PropTypes.func.isRequired,
+  validatemessage: PropTypes.string,
+  helperText: PropTypes.string,
+  disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  readOnly: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  required: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  testId: PropTypes.string,
+  decimalPrecision: PropTypes.string,
+  showGroupSeparators: PropTypes.bool,
+  displayMode: PropTypes.string,
+  additionalProps: PropTypes.objectOf(PropTypes.any),
+  variant: PropTypes.string,
+  currencyISOCode: PropTypes.string,
+  formatter: PropTypes.string,
+  isoCodeSelection: PropTypes.string,
+  negative: PropTypes.string,
+  notation: PropTypes.string,
+  currencyDisplay: PropTypes.string,
+  currencyDecimalPrecision: PropTypes.string,
+  isTableFormatter: PropTypes.bool,
+  hasSuggestions: PropTypes.bool
+};
+
+export default PegaDxilMyDecimal;

package/src/tasks/init/template/test/assets/components/createAll/Pega_DXIL_MyDecimal/mock.stories.js

@@ -0,0 +1,21 @@
+export const configProps = {
+  value: '',
+  label: 'Decimal Sample',
+  showGroupSeparators: true,
+  placeholder: 'Decimal Placeholder',
+  helperText: 'Decimal Helper Text',
+  testId: 'decimal-12345678',
+  hasSuggestions: false
+};
+
+export const stateProps = {
+  value: '.DecimalSample',
+  hasSuggestions: false
+};
+
+export const fieldMetadata = {
+  classID: 'DIXL-MediaCo-Work-NewService',
+  type: 'Decimal',
+  displayAs: 'pxNumber',
+  label: 'Decimal sample'
+};

package/src/tasks/init/template/test/assets/components/createAll/Pega_DXIL_MyDecimal/styles.js

@@ -0,0 +1,14 @@
+// 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/src/tasks/init/template/test/assets/components/createAll/Pega_DXIL_MyDecimal/suggestions-handler.js

@@ -0,0 +1,10 @@
+/* eslint-disable import/prefer-default-export */
+export const suggestionsHandler = (accepted, pConn, setStatus) => {
+  if (accepted) {
+    pConn.acceptSuggestion();
+    setStatus('success');
+  } else {
+    pConn.ignoreSuggestion();
+    setStatus(undefined);
+  }
+};

package/src/tasks/init/template/test/assets/components/createAll/Pega_DXIL_MyDetails/OneColumnDetails.svg

@@ -0,0 +1,22 @@
+<?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>1 col </title>
+    <g id="Page-Config" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Page-layouts" transform="translate(-692.000000, -84.000000)">
+            <g id="1-col-" transform="translate(692.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" transform="translate(6.000000, 6.000000)" fill="#8084A7">
+                    <rect id="Rectangle" x="0" y="-2.84217094e-14" width="88" height="63.8"></rect>
+                </g>
+                <g id="labels" transform="translate(44.000000, 17.000000)" fill="#FFFFFF" font-family="OpenSans-Semibold, Open Sans" font-size="11" font-weight="500">
+                    <text id="A">
+                        <tspan x="0.75" y="12">A</tspan>
+                    </text>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/tasks/init/template/test/assets/components/createAll/Pega_DXIL_MyDetails/StatusWork.jsx

@@ -0,0 +1,26 @@
+import { Status } from "@pega/cosmos-react-core";
+
+export default function StatusWorkRenderer({ value }) {
+  let variant = "info";
+
+  const warnStrings = ["fail", "cancel", "reject", "revoke", "stopped", "warn"];
+  const infoStrings = ["open", "hold", "info", "new"];
+  const successStrings = ["resolved", "completed", "success"];
+  const pendingStrings = ["pending"];
+
+  if (new RegExp(warnStrings.join("|"), "i").test(value)) {
+    variant = "warn";
+  } else if (new RegExp(infoStrings.join("|"), "i").test(value)) {
+    variant = "info";
+  } else if (new RegExp(successStrings.join("|"), "i").test(value)) {
+    variant = "success";
+  } else if (new RegExp(pendingStrings.join("|"), "i").test(value)) {
+    variant = "pending";
+  }
+
+  return (
+    <Status type="rectangle" variant={variant}>
+      {value}
+    </Status>
+  );
+}

package/src/tasks/init/template/test/assets/components/createAll/Pega_DXIL_MyDetails/config.json

@@ -0,0 +1,35 @@
+{
+  "name": "Pega_DXIL_MyDetails",
+  "label": "My Details",
+  "description": "My Details",
+  "organization": "Pega",
+  "version": "0.0.1",
+  "library": "DXIL",
+  "allowedApplications": [],
+  "componentKey": "Pega_DXIL_MyDetails",
+  "type": "Template",
+  "subtype": "DETAILS",
+  "icon": "OneColumnDetails.svg",
+  "properties": [
+    {
+      "name": "showHighlightedData",
+      "label": "Enable highlighted fields",
+      "format": "BOOLEAN"
+    },
+    {
+      "name": "highlightedData",
+      "label": "Highlighted fields",
+      "format": "CONTENTPICKER",
+      "addTypeList": ["Fields"],
+      "visibility": "$this.showHighlightedData = true",
+      "saveToConfig": true
+    },
+    {
+      "name": "A",
+      "label": "Region A",
+      "format": "CONTENTPICKER",
+      "addTypeList": ["Fields", "Views"],
+      "allowCreatingGroup": true
+    }
+  ]
+}

package/src/tasks/init/template/test/assets/components/createAll/Pega_DXIL_MyDetails/demo.stories.jsx

@@ -0,0 +1,132 @@
+import { Text, FieldValueList, Button, DateTimeDisplay, useTheme } from '@pega/cosmos-react-core';
+import PegaDxilMyDetails from './index';
+import { pyReviewRaw, pyReviewResolved, regionChildrenResolved } from './mock.stories';
+import StatusWorkRenderer from './StatusWork.jsx';
+
+export default {
+  title: 'PegaDxilMyDetails',
+  component: PegaDxilMyDetails
+};
+
+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
+        key={key}
+        variant='link'
+        style={
+          label !== null
+            ? { width: 'max-content', height: theme.components.input.height }
+            : undefined
+        }
+      >
+        {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 basePegaDxilMyDetails = () => {
+  const props = {
+    template: 'MyCo_MyComponents_NewDetailsTemplate',
+    showHighlightedData: true,
+    label: 'Test Details',
+    showLabel: true,
+    getPConnect: () => {
+      return {
+        getChildren: () => {
+          return pyReviewRaw.children;
+        },
+        getRawMetadata: () => {
+          return pyReviewRaw;
+        },
+        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);
+  });
+
+  return (
+    <>
+      <PegaDxilMyDetails {...props}>{regionAChildren}</PegaDxilMyDetails>
+    </>
+  );
+};

package/src/tasks/init/template/test/assets/components/createAll/Pega_DXIL_MyDetails/index.jsx

@@ -0,0 +1,83 @@
+import { Fragment } from 'react';
+import { Grid, Flex, FieldGroup } from '@pega/cosmos-react-core';
+import PropTypes from 'prop-types';
+
+import StyledPegaDxilMyDetailsWrapper 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 PegaDxilMyDetails(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 (
+    <StyledPegaDxilMyDetailsWrapper>
+    <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>
+    </StyledPegaDxilMyDetailsWrapper>
+  );
+
+}
+
+PegaDxilMyDetails.defaultProps = {
+  label: undefined,
+  showLabel: true,
+  showHighlightedData: false
+};
+
+
+PegaDxilMyDetails.propTypes = {
+  showLabel: PropTypes.bool,
+  label: PropTypes.string,
+  getPConnect: PropTypes.func.isRequired,
+  showHighlightedData: PropTypes.bool
+};