@pega/sdk 0.0.1

package/templates/react-sdk-reference/src/components/field/TextArea/TextArea.tsx

@@ -0,0 +1,94 @@
+import { useEffect, useState } from 'react';
+import { TextField } from '@mui/material';
+
+import handleEvent from '../../helpers/event-utils';
+import { getComponentFromRegistry } from '@pega/sdk-react';
+import type { PConnFieldProps } from '@pega/sdk-react';
+
+interface TextAreaProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on TextArea here
+  fieldMetadata?: any;
+}
+
+export default function TextArea(props: TextAreaProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const FieldValueList = getComponentFromRegistry('FieldValueList');
+
+  const {
+    getPConnect,
+    label,
+    required,
+    disabled,
+    value = '',
+    validatemessage,
+    status,
+    readOnly,
+    testId,
+    fieldMetadata,
+    helperText,
+    displayMode,
+    hideLabel,
+    placeholder
+  } = props;
+  const helperTextToDisplay = validatemessage || helperText;
+  const pConn = getPConnect();
+  const actions = pConn.getActionsApi();
+  const propName = (pConn.getStateProps() as any).value;
+  const maxLength = fieldMetadata?.maxLength;
+
+  const [inputValue, setInputValue] = useState('');
+
+  let readOnlyProp = {};
+
+  useEffect(() => {
+    setInputValue(value);
+  }, [value]);
+
+  if (displayMode === 'DISPLAY_ONLY') {
+    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 };
+  }
+
+  const testProps: any = { 'data-test-id': testId };
+
+  function handleChange(event) {
+    // update internal value
+    setInputValue(event?.target?.value);
+  }
+
+  function handleBlur() {
+    handleEvent(actions, 'changeNblur', propName, inputValue);
+  }
+
+  return (
+    <TextField
+      multiline
+      minRows={5}
+      maxRows={5}
+      fullWidth
+      variant={readOnly ? 'standard' : 'outlined'}
+      helperText={helperTextToDisplay}
+      placeholder={placeholder ?? ''}
+      size='small'
+      required={required}
+      disabled={disabled}
+      onChange={handleChange}
+      onBlur={!readOnly ? handleBlur : undefined}
+      error={status === 'error'}
+      label={label}
+      value={inputValue}
+      slotProps={{
+        input: { ...readOnlyProp, inputProps: { maxLength, ...testProps } }
+      }}
+    />
+  );
+}

package/templates/react-sdk-reference/src/components/field/TextArea/config-ext.json

@@ -0,0 +1,8 @@
+{
+  "name": "TextArea",
+  "label": "Text area",
+  "description": "Text (paragraph)",
+  "type": "Field",
+  "subtype": "Text-Paragraph",
+  "properties": []
+}

package/templates/react-sdk-reference/src/components/field/TextArea/index.tsx

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

package/templates/react-sdk-reference/src/components/field/TextContent/TextContent.tsx

@@ -0,0 +1,46 @@
+import { Typography } from '@mui/material';
+
+import type { PConnProps } from '@pega/sdk-react';
+
+interface TextContentProps extends PConnProps {
+  // If any, enter additional props that only exist on TextContent here
+  content: string;
+  displayAs: 'Paragraph' | 'Heading 1' | 'Heading 2' | 'Heading 3' | 'Heading 4';
+}
+
+export default function TextContent(props: TextContentProps) {
+  type ExpectedDisplayAs = 'Paragraph' | 'Heading 1' | 'Heading 2' | 'Heading 3' | 'Heading 4';
+  type ExpectedVariants = 'body1' | 'h1' | 'h2' | 'h3' | 'h4';
+
+  const { content, displayAs }: { content: string; displayAs: ExpectedDisplayAs } = props;
+
+  let theVariant: ExpectedVariants = 'body1';
+
+  switch (displayAs) {
+    case 'Paragraph':
+      theVariant = 'body1';
+      break;
+
+    case 'Heading 1':
+      theVariant = 'h1';
+      break;
+
+    case 'Heading 2':
+      theVariant = 'h2';
+      break;
+
+    case 'Heading 3':
+      theVariant = 'h3';
+      break;
+
+    case 'Heading 4':
+      theVariant = 'h4';
+      break;
+
+    default:
+      console.error(`TextContent got an expected displayAs prop: ${displayAs}`);
+      break;
+  }
+
+  return <Typography variant={theVariant}>{content}</Typography>;
+}

package/templates/react-sdk-reference/src/components/field/TextContent/config-ext.json

@@ -0,0 +1,7 @@
+{
+  "name": "TextContent",
+  "description": "Text",
+  "type": "Field",
+  "subtype": "DATA_CAPTURE",
+  "properties": []
+}

package/templates/react-sdk-reference/src/components/field/TextContent/index.tsx

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

package/templates/react-sdk-reference/src/components/field/TextInput/TextInput.tsx

@@ -0,0 +1,92 @@
+import { useState, useEffect } from 'react';
+import { TextField } from '@mui/material';
+
+import handleEvent from '../../helpers/event-utils';
+import { getComponentFromRegistry } from '@pega/sdk-react';
+import type { PConnFieldProps } from '@pega/sdk-react';
+
+interface TextInputProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on TextInput here
+  fieldMetadata?: any;
+}
+
+export default function TextInput(props: TextInputProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const FieldValueList = getComponentFromRegistry('FieldValueList');
+
+  const {
+    getPConnect,
+    label,
+    required,
+    disabled,
+    value = '',
+    validatemessage,
+    status,
+    /* onChange, onBlur */
+    readOnly,
+    testId,
+    fieldMetadata,
+    helperText,
+    displayMode,
+    hideLabel,
+    placeholder
+  } = props;
+
+  const pConn = getPConnect();
+  const actions = pConn.getActionsApi();
+  const propName = (pConn.getStateProps() as any).value;
+
+  const helperTextToDisplay = validatemessage || helperText;
+
+  const [inputValue, setInputValue] = useState('');
+  const maxLength = fieldMetadata?.maxLength;
+
+  let readOnlyProp = {}; // Note: empty if NOT ReadOnly
+
+  useEffect(() => {
+    setInputValue(value);
+  }, [value]);
+
+  if (displayMode === 'DISPLAY_ONLY') {
+    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
+  }
+
+  if (displayMode === 'STACKED_LARGE_VAL') {
+    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
+  }
+
+  if (readOnly) {
+    readOnlyProp = { readOnly: true };
+  }
+
+  const testProps: any = { 'data-test-id': testId };
+
+  function handleChange(event) {
+    // update internal value
+    setInputValue(event?.target?.value);
+  }
+
+  function handleBlur() {
+    handleEvent(actions, 'changeNblur', propName, inputValue);
+  }
+
+  return (
+    <TextField
+      fullWidth
+      variant={readOnly ? 'standard' : 'outlined'}
+      helperText={helperTextToDisplay}
+      placeholder={placeholder ?? ''}
+      size='small'
+      required={required}
+      disabled={disabled}
+      onChange={handleChange}
+      onBlur={!readOnly ? handleBlur : undefined}
+      error={status === 'error'}
+      label={label}
+      value={inputValue}
+      slotProps={{
+        input: { ...readOnlyProp, inputProps: { maxLength, ...testProps } }
+      }}
+    />
+  );
+}

package/templates/react-sdk-reference/src/components/field/TextInput/config-ext.json

@@ -0,0 +1,8 @@
+{
+  "name": "TextInput",
+  "label": "Text input",
+  "description": "Text (single line)",
+  "type": "Field",
+  "subtype": "Text",
+  "properties": []
+}

package/templates/react-sdk-reference/src/components/field/TextInput/index.tsx

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

package/templates/react-sdk-reference/src/components/field/Time/Time.tsx

@@ -0,0 +1,79 @@
+import { TimePicker } from '@mui/x-date-pickers/TimePicker';
+// import AccessTimeIcon from '@mui/icons-material/AccessTime';
+import dayjs from 'dayjs';
+
+import handleEvent from '../../helpers/event-utils';
+import { getComponentFromRegistry } from '@pega/sdk-react';
+import type { PConnFieldProps } from '@pega/sdk-react';
+
+interface TimeProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on Time here
+}
+
+export default function Time(props: TimeProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const FieldValueList = getComponentFromRegistry('FieldValueList');
+  const TextInput = getComponentFromRegistry('TextInput');
+
+  const { getPConnect, label, required, disabled, value = '', validatemessage, status, readOnly, helperText, displayMode, hideLabel, testId } = props;
+  const helperTextToDisplay = validatemessage || helperText;
+  const pConn = getPConnect();
+  const actions = pConn.getActionsApi();
+  const propName = (pConn.getStateProps() as any).value;
+  if (displayMode === 'DISPLAY_ONLY') {
+    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} />;
+  }
+
+  const testProps: any = { 'data-test-id': testId };
+
+  const handleChange = date => {
+    const theValue = date && date.isValid() ? date.format('HH:mm:ss') : null;
+    handleEvent(actions, 'changeNblur', propName, theValue);
+  };
+
+  let timeValue: any = null;
+  if (value && Object.keys(value).length) {
+    const timeArray = value.split(':').map(itm => Number(itm));
+    timeValue = dayjs().hour(timeArray[0]).minute(timeArray[1]);
+  }
+
+  //
+  // TODO: Keyboard doesn't work in the minute field, it updates one digit then jump to am/pm field
+  //       try an older version of the lib or use DateTimePicker
+  //
+
+  return (
+    <TimePicker
+      // keyboardIcon={<AccessTimeIcon />}
+      // fullWidth
+
+      disabled={disabled}
+      minutesStep={5}
+      label={label}
+      // autoOk
+      // mask='__:__ _m'
+      format='hh:mm a'
+      value={timeValue}
+      onChange={handleChange}
+      slotProps={{
+        textField: {
+          variant: 'outlined',
+          placeholder: 'hh:mm am',
+          required,
+          error: status === 'error',
+          helperText: helperTextToDisplay,
+          size: 'small',
+          InputProps: { ...testProps }
+        }
+      }}
+    />
+  );
+}

package/templates/react-sdk-reference/src/components/field/Time/config-ext.json

@@ -0,0 +1,8 @@
+{
+  "name": "Time",
+  "label": "Time only",
+  "description": "Time only",
+  "type": "Field",
+  "subtype": "TimeOfDay",
+  "properties": []
+}

package/templates/react-sdk-reference/src/components/field/Time/index.tsx

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

package/templates/react-sdk-reference/src/components/field/URL/URL.tsx

@@ -0,0 +1,89 @@
+import { useEffect, useState } from 'react';
+import { TextField } from '@mui/material';
+
+import handleEvent from '../../helpers/event-utils';
+import { getComponentFromRegistry } from '@pega/sdk-react';
+import type { PConnFieldProps } from '@pega/sdk-react';
+
+interface URLComponentProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on URLComponent here
+}
+
+// NOTE: that we had to change the name from URL to URLComponent
+//  Otherwise, we were getting all kinds of weird errors when we
+//  referred to URL as a component.
+export default function URLComponent(props: URLComponentProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const FieldValueList = getComponentFromRegistry('FieldValueList');
+  const TextInput = getComponentFromRegistry('TextInput');
+
+  const {
+    getPConnect,
+    label,
+    required,
+    disabled,
+    value = '',
+    validatemessage,
+    status,
+    readOnly,
+    testId,
+    helperText,
+    displayMode,
+    hideLabel,
+    placeholder
+  } = props;
+  const helperTextToDisplay = validatemessage || helperText;
+
+  const [inputValue, setInputValue] = useState('');
+
+  const pConn = getPConnect();
+  const actions = pConn.getActionsApi();
+  const propName = (pConn.getStateProps() as any).value;
+
+  useEffect(() => {
+    setInputValue(value);
+  }, [value]);
+
+  if (displayMode === 'DISPLAY_ONLY') {
+    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} />;
+  }
+
+  const testProps: any = { 'data-test-id': testId };
+
+  const handleChange = event => {
+    setInputValue(event?.target?.value);
+  };
+
+  function handleBlur() {
+    handleEvent(actions, 'changeNblur', propName, inputValue);
+  }
+
+  return (
+    <TextField
+      type='url'
+      fullWidth
+      variant='outlined'
+      helperText={helperTextToDisplay}
+      placeholder={placeholder ?? ''}
+      size='small'
+      required={required}
+      disabled={disabled}
+      onChange={handleChange}
+      onBlur={!readOnly ? handleBlur : undefined}
+      error={status === 'error'}
+      label={label}
+      value={inputValue}
+      slotProps={{
+        input: { inputProps: { ...testProps } }
+      }}
+    />
+  );
+}

package/templates/react-sdk-reference/src/components/field/URL/config-ext.json

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

package/templates/react-sdk-reference/src/components/field/URL/index.tsx

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

package/templates/react-sdk-reference/src/components/field/UserReference/UserReference.tsx

@@ -0,0 +1,198 @@
+import { memo, useEffect, useState } from 'react';
+import { Typography } from '@mui/material';
+
+import { getComponentFromRegistry } from '@pega/sdk-react';
+import type { PConnProps } from '@pega/sdk-react';
+
+import { getUserId, isUserNameAvailable } from './UserReferenceUtils';
+
+const DROPDOWN_LIST = 'Drop-down list';
+const SEARCH_BOX = 'Search box';
+
+interface UserReferenceProps extends PConnProps {
+  // If any, enter additional props that only exist on URLComponent here
+  displayAs?: string;
+  displayMode?: string;
+  label?: string;
+  value?: any;
+  testId?: string;
+  placeholder?: string;
+  helperText?: string;
+  disabled?: boolean;
+  readOnly?: boolean;
+  required?: boolean;
+  validatemessage?: string;
+  showAsFormattedText?: boolean;
+  additionalProps?: object;
+  hideLabel?: boolean;
+  variant?: string;
+  onChange?: any;
+}
+
+const UserReference = (props: UserReferenceProps) => {
+  // Get emitted components from map (so we can get any override that may exist)
+  const AutoComplete = getComponentFromRegistry('AutoComplete');
+  const Dropdown = getComponentFromRegistry('Dropdown');
+  const FieldValueList = getComponentFromRegistry('FieldValueList');
+
+  const {
+    label = '',
+    displayAs = '',
+    displayMode = '',
+    getPConnect,
+    value = '',
+    testId = '',
+    helperText = '',
+    validatemessage = '',
+    placeholder = '',
+    showAsFormattedText = false,
+    additionalProps = {},
+    hideLabel = false,
+    readOnly = false,
+    required = false,
+    disabled = false,
+    onChange,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    variant = 'inline'
+  } = props;
+  const [dropDownDataSource, setDropDownDataSource] = useState([]);
+  const [userName, setUserName] = useState('');
+  const OPERATORS_DP = PCore.getEnvironmentInfo().getDefaultOperatorDP();
+  const userId = getUserId(value);
+
+  useEffect(() => {
+    if (userId && readOnly && showAsFormattedText) {
+      if (isUserNameAvailable(value)) {
+        setUserName(value.userName);
+      } else {
+        // if same user ref field is referred in view as editable & readonly formatted text
+        // referenced users won't be available, so get user details from dx api
+        const { getOperatorDetails } = PCore.getUserApi();
+        getOperatorDetails(userId).then((res: any) => {
+          if (res.data && res.data.pyOperatorInfo && res.data.pyOperatorInfo.pyUserName) {
+            setUserName(res.data.pyOperatorInfo.pyUserName);
+          }
+        });
+      }
+    } else if (displayAs === DROPDOWN_LIST) {
+      const queryPayload = {
+        dataViewName: OPERATORS_DP
+      };
+
+      PCore.getRestClient()
+        .invokeRestApi('getListData', { queryPayload })
+        .then(res => {
+          const ddDataSource = res.data.data.map(listItem => ({
+            key: listItem.pyUserIdentifier,
+            value: listItem.pyUserName
+          }));
+          setDropDownDataSource(ddDataSource);
+        })
+        .catch(err => {
+          console.error(err);
+        });
+    }
+  }, [displayAs, readOnly, showAsFormattedText, value]);
+
+  let userReferenceComponent: any = null;
+
+  if (displayMode === 'DISPLAY_ONLY') {
+    return <FieldValueList name={hideLabel ? '' : label} value={userName || ''} />;
+  }
+
+  if (displayMode === 'STACKED_LARGE_VAL') {
+    return <FieldValueList name={hideLabel ? '' : label} value={userName || ''} variant='stacked' />;
+  }
+
+  if (readOnly && showAsFormattedText) {
+    if (userId) {
+      userReferenceComponent = (
+        <>
+          {/*
+            TODO: This has to be replaced with Operator Component
+          */}
+          <div>
+            <Typography variant='caption'>{label}</Typography>
+            <Typography variant='body1'>{userName}</Typography>
+          </div>
+        </>
+      );
+    }
+  } else {
+    if (displayAs === SEARCH_BOX) {
+      const columns = [
+        {
+          value: 'pyUserName',
+          display: 'true',
+          useForSearch: true,
+          primary: 'true'
+        },
+        {
+          value: 'pyUserIdentifier',
+          setProperty: 'Associated property',
+          key: 'true',
+          display: 'true',
+          secondary: 'true',
+          useForSearch: 'true'
+        }
+      ];
+
+      userReferenceComponent = (
+        <AutoComplete
+          additionalProps={additionalProps}
+          label={label}
+          getPConnect={getPConnect}
+          datasource={OPERATORS_DP}
+          listType='datapage'
+          columns={columns}
+          testId={testId}
+          placeholder={placeholder}
+          readOnly={readOnly}
+          disabled={disabled}
+          required={required}
+          helperText={helperText}
+          validatemessage={validatemessage}
+          value={userId}
+          hideLabel={hideLabel}
+          onChange={onChange}
+        />
+      );
+    }
+    if (displayAs === DROPDOWN_LIST) {
+      userReferenceComponent = (
+        <Dropdown
+          additionalProps={additionalProps}
+          datasource={dropDownDataSource}
+          listType='associated'
+          getPConnect={getPConnect}
+          label={label}
+          value={userId}
+          testId={testId}
+          placeholder={placeholder}
+          readOnly={readOnly}
+          disabled={disabled}
+          required={required}
+          helperText={helperText}
+          validatemessage={validatemessage}
+          hideLabel={hideLabel}
+          onChange={onChange}
+        />
+      );
+    }
+  }
+  return userReferenceComponent;
+};
+
+// as objects are there in props, shallow comparision fails & re-rendering of comp happens even with
+// same key value pairs in obj. hence using custom comparison function on when to re-render
+const comparisonFn = (prevProps, nextProps) => {
+  return (
+    getUserId(prevProps.value) === getUserId(nextProps.value) &&
+    prevProps.validatemessage === nextProps.validatemessage &&
+    prevProps.required === nextProps.required &&
+    prevProps.disabled === nextProps.disabled &&
+    prevProps.readOnly === nextProps.readOnly
+  );
+};
+
+export default memo(UserReference, comparisonFn);

package/templates/react-sdk-reference/src/components/field/UserReference/UserReferenceUtils.ts

@@ -0,0 +1,13 @@
+export const getUserId = user => {
+  let userId = '';
+  if (typeof user === 'object' && user !== null && user.userId) {
+    userId = user.userId;
+  } else if (typeof user === 'string' && user) {
+    userId = user;
+  }
+  return userId;
+};
+
+export const isUserNameAvailable = user => {
+  return typeof user === 'object' && user !== null && user.userName;
+};

package/templates/react-sdk-reference/src/components/field/UserReference/config-ext.json

@@ -0,0 +1,7 @@
+{
+  "name": "UserReference",
+  "description": "User reference",
+  "type": "Field",
+  "subtype": "DATA_CAPTURE",
+  "properties": []
+}

package/templates/react-sdk-reference/src/components/field/UserReference/index.tsx

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