@pega/dx-component-builder-sdk 0.1.49 → 0.8.2

package/tests/assets/components/SDK-React/create/override-sdk/field/Email/config-ext.json

@@ -0,0 +1,9 @@
+{
+    "componentKey": "Email",
+    "name": "Email",
+    "label": "Email",
+    "description": "Email",
+    "type": "Field",
+    "subtype": "Text-Email",
+    "properties": []
+}

package/tests/assets/components/SDK-React/create/override-sdk/field/Email/index.tsx

@@ -0,0 +1 @@
+export { default } from './Email';

package/tests/assets/components/SDK-React/create/override-sdk/field/Integer/Integer.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { TextField } from '@material-ui/core';
+import TextInput from '@pega/react-sdk-components/lib/components/field/TextInput';
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
+import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface IntegerProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on Integer here
+}
+
+
+export default function Integer(props: IntegerProps) {
+  const {
+    label,
+    required,
+    disabled,
+    value = '',
+    validatemessage,
+    status,
+    onChange,
+    onBlur,
+    readOnly,
+    testId,
+    helperText,
+    displayMode,
+    hideLabel
+  } = props;
+  const helperTextToDisplay = validatemessage || helperText;
+
+  // console.log(`Integer: label: ${label} value: ${value}`);
+
+  if (displayMode === 'LABELS_LEFT') {
+    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
+  }
+
+  if (displayMode === 'STACKED_LARGE_VAL') {
+    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
+  }
+
+  if (readOnly) {
+    return <TextInput {...props} />;
+  }
+
+  let testProp = {};
+
+  testProp = {
+    'data-test-id': testId
+  };
+
+  function intOnChange(event) {
+    // console.log(`Integer intOnChange inValue: ${event.target.value}`);
+
+    // Disallow "." and "," (separators) since this is an integer field
+    //  Mimics Pega Integer behavior (where separator characters are "eaten" if they're typed)
+    const disallowedChars = ['.', ','];
+    const theAttemptedValue = event.target.value;
+    const lastChar = theAttemptedValue.slice(-1);
+
+    if (disallowedChars.includes(lastChar)) {
+      event.target.value = theAttemptedValue.slice(0, -1);
+    }
+
+    // Pass through to the Constellation change handler
+    onChange(event);
+  }
+
+  return (
+    <TextField
+      fullWidth
+      variant={readOnly ? 'standard' : 'outlined'}
+      helperText={helperTextToDisplay}
+      placeholder=''
+      size='small'
+      required={required}
+      disabled={disabled}
+      onChange={intOnChange}
+      onBlur={!readOnly ? onBlur : undefined}
+      error={status === 'error'}
+      label={label}
+      value={value}
+      type='text'
+      inputProps={{ inputMode: 'numeric', pattern: '[0-9]*', ...testProp }}
+    />
+  );
+}

package/tests/assets/components/SDK-React/create/override-sdk/field/Integer/config-ext.json

@@ -0,0 +1,9 @@
+{
+    "componentKey": "Integer",
+    "name": "Integer",
+    "label": "Integer",
+    "description": "Integer",
+    "type": "Field",
+    "subtype": "Integer",
+    "properties": []
+}

package/tests/assets/components/SDK-React/create/override-sdk/field/Integer/index.tsx

@@ -0,0 +1 @@
+export { default } from './Integer';

package/tests/assets/components/SDK-React/create/override-sdk/field/Percentage/Percentage.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { TextField } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+
+import TextInput from '@pega/react-sdk-components/lib/components/field/TextInput';
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
+import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+
+// Inspired by https://stackoverflow.com/questions/50823182/material-ui-remove-up-down-arrow-dials-from-textview
+const useStyles = makeStyles((/* theme */) => ({
+  input: {
+    '& input[type=number]': {
+      '-moz-appearance': 'textfield'
+    },
+    '& input[type=number]::-webkit-outer-spin-button': {
+      '-webkit-appearance': 'none',
+      margin: 0
+    },
+    '& input[type=number]::-webkit-inner-spin-button': {
+      '-webkit-appearance': 'none',
+      margin: 0
+    }
+  }
+}));
+
+
+interface PercentageProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on Percentage here
+}
+
+
+export default function Percentage(props: PercentageProps) {
+  const classes = useStyles();
+
+  const {
+    label,
+    required,
+    disabled,
+    value = '',
+    validatemessage,
+    status,
+    onChange,
+    onBlur,
+    readOnly,
+    testId,
+    helperText,
+    displayMode,
+    hideLabel
+  } = props;
+  const helperTextToDisplay = validatemessage || helperText;
+
+  // console.log(`Percentage: label: ${label} value: ${value}`);
+
+  if (displayMode === 'LABELS_LEFT') {
+    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
+  }
+
+  if (displayMode === 'STACKED_LARGE_VAL') {
+    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
+  }
+
+  if (readOnly) {
+    return <TextInput {...props} />;
+  }
+
+  let testProp = {};
+
+  testProp = {
+    'data-test-id': testId
+  };
+
+  return (
+    <TextField
+      className={classes.input}
+      fullWidth
+      variant={readOnly ? 'standard' : 'outlined'}
+      helperText={helperTextToDisplay}
+      placeholder=''
+      size='small'
+      required={required}
+      disabled={disabled}
+      onChange={onChange}
+      onBlur={!readOnly ? onBlur : undefined}
+      error={status === 'error'}
+      label={label}
+      value={value}
+      type='number'
+      inputProps={{ ...testProp }}
+    />
+  );
+}

package/tests/assets/components/SDK-React/create/override-sdk/field/Percentage/config-ext.json

@@ -0,0 +1,9 @@
+{
+    "componentKey": "Percentage",
+    "name": "Percentage",
+    "label": "Percentage",
+    "description": "Percentage",
+    "type": "Field",
+    "subtype": "Decimal-Percentage",
+    "properties": []
+}

package/tests/assets/components/SDK-React/create/override-sdk/field/Percentage/index.tsx

@@ -0,0 +1 @@
+export { default } from './Percentage';

package/tests/assets/components/SDK-React/create/override-sdk/field/Phone/Phone.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import MuiPhoneNumber from 'material-ui-phone-number';
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
+import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface PhoneProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on Phone here
+}
+
+
+
+export default function Phone(props: PhoneProps) {
+  const {
+    label,
+    required,
+    disabled,
+    value = '',
+    validatemessage,
+    status,
+    onChange,
+    onBlur,
+    readOnly,
+    testId,
+    helperText,
+    displayMode,
+    hideLabel
+  } = props;
+  const helperTextToDisplay = validatemessage || helperText;
+
+  let testProp = {};
+
+  testProp = {
+    'data-test-id': testId
+  };
+
+  if (displayMode === 'LABELS_LEFT') {
+    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
+  }
+
+  if (displayMode === 'STACKED_LARGE_VAL') {
+    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
+  }
+
+  if (readOnly) {
+    const disableDropdown = true;
+    return (
+      <div>
+        <MuiPhoneNumber
+          fullWidth
+          helperText={helperTextToDisplay}
+          placeholder=''
+          size='small'
+          required={required}
+          disabled={disabled}
+          onChange={onChange}
+          error={status === 'error'}
+          label={label}
+          value={value}
+          InputProps={{
+            readOnly: true,
+            inputProps: { ...testProp }
+          }}
+          disableDropdown={disableDropdown}
+        />
+      </div>
+    );
+  }
+
+  const handleChange = inputVal => {
+    let phoneValue = inputVal && inputVal.replace(/\D+/g, '');
+    phoneValue = `+${phoneValue}`;
+    onChange({ value: phoneValue });
+  };
+
+  const handleBlur = event => {
+    const phoneValue = event?.target?.value;
+    event.target.value = `+${phoneValue && phoneValue.replace(/\D+/g, '')}`;
+    onBlur(event);
+  };
+
+  return (
+    <MuiPhoneNumber
+      fullWidth
+      variant='outlined'
+      helperText={helperTextToDisplay}
+      placeholder=''
+      size='small'
+      defaultCountry='us'
+      required={required}
+      disabled={disabled}
+      onChange={handleChange}
+      onBlur={!readOnly ? handleBlur : undefined}
+      error={status === 'error'}
+      label={label}
+      value={value}
+      InputProps={{ ...testProp }}
+    />
+  );
+}

package/tests/assets/components/SDK-React/create/override-sdk/field/Phone/index.tsx

@@ -0,0 +1 @@
+export { default } from './Phone';

package/tests/assets/components/SDK-React/create/override-sdk/field/RadioButtons/RadioButtons.tsx

@@ -0,0 +1,132 @@
+import React, { useState, useEffect } from 'react';
+import {
+  Radio,
+  RadioGroup,
+  FormControl,
+  FormControlLabel,
+  FormLabel,
+  FormHelperText
+} from '@material-ui/core';
+
+import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
+import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
+import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface RadioButtonsProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on RadioButtons here
+  inline: boolean,
+  fieldMetadata?: any
+}
+
+
+export default function RadioButtons(props: RadioButtonsProps) {
+  const {
+    getPConnect,
+    label,
+    value = '',
+    readOnly,
+    validatemessage,
+    helperText,
+    status,
+    required,
+    inline,
+    displayMode,
+    hideLabel,
+    fieldMetadata
+  } = props;
+  const [theSelectedButton, setSelectedButton] = useState(value);
+
+  const thePConn = getPConnect();
+  const theConfigProps = thePConn.getConfigProps();
+  const actionsApi = thePConn.getActionsApi();
+  const propName = thePConn.getStateProps().value;
+  const helperTextToDisplay = validatemessage || helperText;
+  const className = thePConn.getCaseInfo().getClassName();
+
+  let configProperty = thePConn.getRawMetadata()?.config?.value || '';
+  configProperty = configProperty.startsWith('@P') ? configProperty.substring(3) : configProperty;
+  configProperty = configProperty.startsWith('.') ? configProperty.substring(1) : configProperty;
+
+  const metaData = Array.isArray(fieldMetadata)
+    ? fieldMetadata.filter(field => field?.classID === className)[0]
+    : fieldMetadata;
+  let displayName = metaData?.datasource?.propertyForDisplayText;
+  displayName = displayName?.slice(displayName.lastIndexOf('.') + 1);
+  const localeContext = metaData?.datasource?.tableType === 'DataPage' ? 'datapage' : 'associated';
+  const localeClass = localeContext === 'datapage' ? '@baseclass' : className;
+  const localeName = localeContext === 'datapage' ? metaData?.datasource?.name : configProperty;
+  const localePath = localeContext === 'datapage' ? displayName : localeName;
+
+  // theOptions will be an array of JSON objects that are literally key/value pairs.
+  //  Ex: [ {key: "Basic", value: "Basic"} ]
+  const theOptions = Utils.getOptionList(theConfigProps, thePConn.getDataObject(''));
+
+  useEffect(() => {
+    // This update theSelectedButton which will update the UI to show the selected button correctly
+    setSelectedButton(value);
+  }, [value]);
+
+  if (displayMode === 'LABELS_LEFT') {
+    return (
+      <FieldValueList
+        name={hideLabel ? '' : label}
+        value={thePConn.getLocalizedValue(
+          value,
+          localePath,
+          thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName)
+        )}
+      />
+    );
+  }
+
+  if (displayMode === 'STACKED_LARGE_VAL') {
+    return (
+      <FieldValueList
+        name={hideLabel ? '' : label}
+        value={thePConn.getLocalizedValue(
+          value,
+          localePath,
+          thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName)
+        )}
+        variant='stacked'
+      />
+    );
+  }
+
+  const handleChange = event => {
+    handleEvent(actionsApi, 'changeNblur', propName, event.target.value);
+  };
+
+  const handleBlur = event => {
+    thePConn.getValidationApi().validate(event.target.value, "");   // 2nd arg empty string until typedef marked correctly as optional
+  };
+
+  return (
+    <FormControl error={status === 'error'} required={required}>
+      <FormLabel component='legend'>{label}</FormLabel>
+      <RadioGroup
+        value={theSelectedButton}
+        onChange={handleChange}
+        onBlur={!readOnly ? handleBlur : undefined}
+        row={inline}
+      >
+        {theOptions.map(theOption => {
+          return (
+            <FormControlLabel
+              value={theOption.key}
+              key={theOption.key}
+              label={thePConn.getLocalizedValue(
+                theOption.value,
+                localePath,
+                thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName)
+              )}
+              control={<Radio key={theOption.key} color='primary' disabled={readOnly} />}
+            />
+          );
+        })}
+      </RadioGroup>
+      <FormHelperText>{helperTextToDisplay}</FormHelperText>
+    </FormControl>
+  );
+}

package/tests/assets/components/SDK-React/create/override-sdk/field/RadioButtons/config-ext.json

@@ -0,0 +1,9 @@
+{
+    "componentKey": "RadioButtons",
+    "name": "RadioButtons",
+    "label": "Radio buttons",
+    "description": "Picklist",
+    "type": "Field",
+    "subtype": "Picklist",
+    "properties": []
+}

package/tests/assets/components/SDK-React/create/override-sdk/field/RadioButtons/index.tsx

@@ -0,0 +1 @@
+export { default } from './RadioButtons';

package/tests/assets/components/SDK-React/create/override-sdk/field/SemanticLink/SemanticLink.tsx

@@ -0,0 +1,76 @@
+import React from "react";
+import Typography from '@material-ui/core/Typography';
+import Grid from '@material-ui/core/Grid';
+import { makeStyles } from '@material-ui/core/styles';
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
+import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+
+/* although this is called the SemanticLink component, we are not yet displaying as a
+SemanticLink in SDK and only showing the value as a read only text field. */
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    paddingRight: theme.spacing(1),
+    paddingLeft: theme.spacing(1),
+    paddingTop: theme.spacing(1),
+    paddingBottom: theme.spacing(1),
+    marginRight: theme.spacing(1),
+    marginLeft: theme.spacing(1),
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1),
+  },
+  fieldMargin: {
+    paddingRight: theme.spacing(1),
+    paddingLeft: theme.spacing(1),
+    paddingTop: theme.spacing(1),
+    paddingBottom: theme.spacing(1),
+    marginRight: theme.spacing(1),
+    marginLeft: theme.spacing(1),
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1),
+  },
+  fieldLabel: {
+    fontWeight: 400,
+    color: theme.palette.text.secondary
+  },
+  fieldValue: {
+    fontWeight: 400,
+    color: theme.palette.text.primary
+  }
+}));
+
+interface SemanticLinkProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on SemanticLink here
+  // from previous PropTypes
+  text: string,
+}
+
+export default function SemanticLink(props: SemanticLinkProps) {
+  const {
+    text,
+    displayMode,
+    label,
+    hideLabel
+  } = props;
+  const classes = useStyles();
+
+
+  if (displayMode === "LABELS_LEFT" || (!displayMode && label !== undefined)) {
+    const value = text ||  "---";
+    return (
+      <Grid container spacing={1} style={{padding: "4px 0px"}}  id="semantic-link-grid">
+        <Grid item xs={6}>
+          <Typography variant="body2" component="span" className={`${classes.fieldLabel} ${classes.fieldMargin}`}>{label}</Typography>
+        </Grid>
+        <Grid item xs={6}>
+          <Typography variant="body2" component="span" className={classes.fieldValue}>{value}</Typography>
+        </Grid>
+      </Grid>
+    );
+  }
+
+  if (displayMode === 'STACKED_LARGE_VAL') {
+    return <FieldValueList name={hideLabel ? '' : label} value={text} variant='stacked' />;
+  }
+}

package/tests/assets/components/SDK-React/create/override-sdk/field/SemanticLink/config-ext.json

@@ -0,0 +1,9 @@
+{
+    "label": "SemanticLink",
+    "componentKey": "SemanticLink",
+    "name": "SemanticLink",
+    "description": "SemanticLink",
+    "type": "Field",
+    "subtype": "ACTION",
+    "properties": []
+}

package/tests/assets/components/SDK-React/create/override-sdk/field/SemanticLink/index.tsx

@@ -0,0 +1 @@
+export { default } from './SemanticLink';

package/tests/assets/components/SDK-React/create/override-sdk/field/SemanticLink/utils.ts

@@ -0,0 +1,52 @@
+// Remove this and use "real" PCore type once .d.ts is fixed (currently shows 2 errors)
+declare const PCore: any;
+
+function getDataReferenceInfo(pConnect, dataRelationshipContext) {
+  if (!pConnect) {
+    throw Error("PConnect parameter is required");
+  }
+
+  let dataContext = "";
+  const payload = {};
+  const pageReference = pConnect.getPageReference();
+  const annotationUtils = PCore.getAnnotationUtils();
+  let fieldMetadata;
+
+  if (pageReference) {
+    /*
+    For page list the page refernce will be something like caseInfo.content.EmployeeRef[1].
+    Need to extract EmployeeRef from caseInfo.content.EmployeeRef[1]
+    */
+    const propertySplit = pageReference.split(".");
+
+    // Regex to match if the property is list type. Eg: EmployeeRef[1]
+    const listPropertyRegex = /([a-z|A-Z]*[[][\d]*)[\]]$/gm;
+    // Regex to match [1] part of the property EmployeeRef[1]
+    const indexRegex = /([[][\d]*[\]])+/gm;
+
+    let contextProperty = dataRelationshipContext !== null ? dataRelationshipContext : propertySplit.pop();
+    const isListProperty = listPropertyRegex.test(contextProperty);
+    contextProperty = isListProperty
+      ? contextProperty.replace(indexRegex, "")
+      : contextProperty;
+    fieldMetadata = pConnect.getFieldMetadata(contextProperty);
+  }
+
+  if (!!fieldMetadata && fieldMetadata.datasource) {
+    const { name, parameters } = fieldMetadata.datasource;
+    dataContext = name;
+    for (const [key, value] of Object.entries(parameters)) {
+      const property = dataRelationshipContext !== null ? annotationUtils.getPropertyName(value) : annotationUtils.getLeafPropertyName(value)
+      payload[key] = pConnect.getValue(`.${property}`);
+    }
+    return { dataContext, dataContextParameters: payload };
+  }
+
+  return {};
+}
+
+function isLinkTextEmpty(text) {
+  return text === "" || text === undefined || text === null;
+}
+
+export default { getDataReferenceInfo, isLinkTextEmpty };

package/tests/assets/components/SDK-React/create/override-sdk/field/TextArea/TextArea.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { TextField } from '@material-ui/core';
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
+import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface TextAreaProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on TextArea here
+  fieldMetadata?: any
+}
+
+
+export default function TextArea(props: TextAreaProps) {
+  const {
+    label,
+    required,
+    disabled,
+    value = '',
+    validatemessage,
+    status,
+    onChange,
+    onBlur,
+    readOnly,
+    testId,
+    fieldMetadata,
+    helperText,
+    displayMode,
+    hideLabel
+  } = props;
+  const helperTextToDisplay = validatemessage || helperText;
+
+  const maxLength = fieldMetadata?.maxLength;
+
+  let readOnlyProp = {};
+
+  if (displayMode === 'LABELS_LEFT') {
+    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
+  }
+
+  if (displayMode === 'STACKED_LARGE_VAL') {
+    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
+  }
+
+  if (readOnly) {
+    // Not just emitting a read only Textfield like some other components do
+    //  since we want to preserve the minRows, maxRows info.
+    readOnlyProp = { readOnly: true };
+  }
+
+  let testProp = {};
+
+  testProp = {
+    'data-test-id': testId
+  };
+
+  return (
+    <TextField
+      multiline
+      minRows={5}
+      maxRows={5}
+      fullWidth
+      variant={readOnly ? 'standard' : 'outlined'}
+      helperText={helperTextToDisplay}
+      placeholder=''
+      size='small'
+      required={required}
+      disabled={disabled}
+      onChange={onChange}
+      onBlur={!readOnly ? onBlur : undefined}
+      error={status === 'error'}
+      label={label}
+      value={value}
+      InputProps={{ ...readOnlyProp, inputProps: { maxLength, ...testProp } }}
+    />
+  );
+}