@pega/sdk 0.0.1

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

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

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

@@ -0,0 +1,113 @@
+import { useEffect, useState } from 'react';
+import { MuiTelInput } from 'mui-tel-input';
+
+import { getComponentFromRegistry } from '@pega/sdk-react';
+import type { PConnFieldProps } from '@pega/sdk-react';
+import handleEvent from '../../helpers/event-utils';
+
+interface PhoneProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on Phone here
+}
+
+export default function Phone(props: PhoneProps) {
+  // 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,
+    readOnly,
+    testId,
+    helperText,
+    displayMode,
+    hideLabel,
+    placeholder
+  } = props;
+
+  const pConn = getPConnect();
+  const actions = pConn.getActionsApi();
+  const propName = (pConn.getStateProps() as any).value;
+
+  const [inputValue, setInputValue] = useState(value);
+  useEffect(() => setInputValue(value), [value]);
+
+  const helperTextToDisplay = validatemessage || helperText;
+
+  let testProp = {};
+
+  testProp = {
+    'data-test-id': testId
+  };
+
+  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) {
+    const disableDropdown = true;
+    return (
+      <div>
+        <MuiTelInput
+          fullWidth
+          helperText={helperTextToDisplay}
+          placeholder={placeholder ?? ''}
+          size='small'
+          defaultCountry='US'
+          required={required}
+          disabled={disabled}
+          onChange={onChange}
+          error={status === 'error'}
+          label={label}
+          value={value}
+          slotProps={{
+            input: {
+              readOnly: true,
+              ...testProp
+            }
+          }}
+          disableDropdown={disableDropdown}
+        />
+      </div>
+    );
+  }
+
+  const handleChange = inputVal => {
+    setInputValue(inputVal);
+  };
+
+  const handleBlur = event => {
+    const phoneValue = event?.target?.value;
+    let phoneNumber = phoneValue.split(' ').slice(1).join();
+    phoneNumber = phoneNumber ? `+${phoneValue && phoneValue.replace(/\D+/g, '')}` : '';
+    handleEvent(actions, 'changeNblur', propName, phoneNumber);
+  };
+
+  return (
+    <MuiTelInput
+      fullWidth
+      variant='outlined'
+      helperText={helperTextToDisplay}
+      placeholder={placeholder ?? ''}
+      size='small'
+      defaultCountry='US'
+      required={required}
+      disabled={disabled}
+      onChange={handleChange}
+      onBlur={!readOnly ? handleBlur : undefined}
+      error={status === 'error'}
+      label={label}
+      value={inputValue}
+      slotProps={{ input: { ...testProp } }}
+    />
+  );
+}

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

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

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

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

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

@@ -0,0 +1,158 @@
+import { useState, useEffect } from 'react';
+import { Radio, RadioGroup, FormControl, FormControlLabel, FormLabel, FormHelperText } from '@mui/material';
+
+import Utils from '../../helpers/utils';
+import handleEvent from '../../helpers/event-utils';
+import { getComponentFromRegistry } from '@pega/sdk-react';
+import type { PConnFieldProps } from '@pega/sdk-react';
+
+// Can't use RadioButtonProps until getLocaleRuleNameFromKeys is NOT private
+interface RadioButtonsProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on RadioButtons here
+  inline: boolean;
+  fieldMetadata?: any;
+  variant?: string;
+  hideFieldLabels?: boolean;
+  additionalProps?: any;
+  imagePosition?: string;
+  imageSize?: string;
+  showImageDescription?: boolean;
+  datasource?: any;
+}
+
+export default function RadioButtons(props: RadioButtonsProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const FieldValueList = getComponentFromRegistry('FieldValueList');
+  const SelectableCard = getComponentFromRegistry('SelectableCard');
+
+  const {
+    getPConnect,
+    label,
+    value = '',
+    readOnly,
+    validatemessage,
+    helperText,
+    status,
+    required,
+    inline,
+    displayMode,
+    hideLabel,
+    fieldMetadata,
+    variant,
+    hideFieldLabels,
+    additionalProps,
+    datasource,
+    imagePosition,
+    imageSize,
+    showImageDescription
+  } = props;
+  const [theSelectedButton, setSelectedButton] = useState(value);
+
+  const thePConn = getPConnect();
+  const theConfigProps = thePConn.getConfigProps();
+  const actionsApi = thePConn.getActionsApi();
+  const propName = (thePConn.getStateProps() as any).value;
+  const helperTextToDisplay = validatemessage || helperText;
+  const className = thePConn.getCaseInfo().getClassName();
+
+  let configProperty = (thePConn.getRawMetadata() as any)?.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 === 'DISPLAY_ONLY') {
+    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
+  };
+
+  if (variant === 'card') {
+    const stateProps = thePConn.getStateProps();
+    return (
+      <div>
+        <h4 style={{ marginTop: 0, marginBottom: 0 }}>{label}</h4>
+        <div id='selectable-card' style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(200px, 100%), 1fr))', gap: '1rem' }}>
+          <SelectableCard
+            hideFieldLabels={hideFieldLabels}
+            additionalProps={additionalProps}
+            getPConnect={getPConnect}
+            dataSource={datasource}
+            image={{
+              imagePosition,
+              imageSize,
+              showImageDescription,
+              imageField: stateProps.image?.split('.').pop(),
+              imageDescription: stateProps.imageDescription?.split('.').pop()
+            }}
+            onChange={handleChange}
+            recordKey={stateProps.value?.split('.').pop()}
+            cardLabel={stateProps.primaryField?.split('.').pop()}
+            radioBtnValue={value}
+            type='radio'
+            setIsRadioCardSelected={displayMode !== 'DISPLAY_ONLY' ? setSelectedButton : undefined}
+          />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <FormControl variant='standard' 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/templates/react-sdk-reference/src/components/field/RadioButtons/config-ext.json

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

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

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

package/templates/react-sdk-reference/src/components/field/RichText/RichText.css

@@ -0,0 +1,79 @@
+.tox .tox-toolbar {
+  background-color: var(--app-background-color) !important;
+}
+
+.tox .tox-toolbar__primary {
+  background-color: var(--app-background-color) !important;
+}
+
+.tox .tox-toolbar__button {
+  color: var(--app-text-color) !important;
+}
+
+.tox .tox-toolbar__button--enabled {
+  background: var(--app-primary-color) !important;
+  color: #fff !important;
+}
+
+.tox .tox-dialog {
+  background-color: var(--modal-top-color) !important;
+  color: var(--app-text-color) !important;
+  border: 1px solid var(--modal-border-color) !important;
+  padding: 20px !important;
+  box-shadow: 0 0 10px 3px var(--modal-box-shadow-color) !important;
+}
+
+.tox .tox-dialog__header {
+  background-color: var(--modal-top-color) !important;
+  color: var(--app-text-color) !important;
+  font-weight: 500;
+  border-bottom: 1px solid var(--modal-border-color);
+}
+
+.tox .tox-dialog__footer {
+  background: transparent !important;
+  border-top: 1px solid var(--modal-border-color);
+}
+
+.tox .tox-dialog-wrap__backdrop {
+  background-color: var(--modal-background-color) !important;
+}
+
+.tox .tox-dialog__body input,
+.tox .tox-dialog__body textarea,
+.tox .tox-dialog__body select {
+  background: initial !important;
+  color: var(--app-text-color) !important;
+  border: 1px solid var(--app-neutral-color) !important;
+  border-radius: 4px !important;
+  padding: 6px 10px !important;
+  font-size: 1em !important;
+  font-family: inherit !important;
+}
+
+.tox .tox-dialog__body button {
+  background: transparent;
+  color: #fff !important;
+  border: none !important;
+  border-radius: 4px !important;
+  padding: 8px 16px !important;
+  font-size: 1em !important;
+  cursor: pointer !important;
+}
+
+.tox .tox-dialog__footer .tox-button {
+  background: var(--app-primary-color) !important;
+  color: #fff !important;
+  border: none !important;
+  border-radius: 4px !important;
+  padding: 8px 16px !important;
+  font-size: 1em !important;
+  cursor: pointer !important;
+}
+
+.tox .tox-dialog__footer .tox-button--secondary {
+  background: var(--app-secondary-color) !important;
+  color: var(--secondary-button-text-color) !important;
+  font-size: 0.875rem !important;
+  cursor: pointer !important;
+}

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

@@ -0,0 +1,98 @@
+import { useRef } from 'react';
+
+import handleEvent from '../../helpers/event-utils';
+import { getComponentFromRegistry } from '@pega/sdk-react';
+import type { PConnFieldProps } from '@pega/sdk-react';
+
+import './RichText.css';
+
+interface RichTextProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on TextArea here
+  additionalProps?: object;
+}
+
+export default function RichText(props: RichTextProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const FieldValueList = getComponentFromRegistry('FieldValueList');
+  const RichTextEditor = getComponentFromRegistry('RichTextEditor');
+
+  const { getPConnect, value, placeholder, validatemessage, label, hideLabel, helperText, testId, displayMode, additionalProps } = props;
+  const pConn = getPConnect();
+  const editorRef: any = useRef(null);
+
+  let { readOnly, required, disabled } = props;
+  [readOnly, required, disabled] = [readOnly, required, disabled].map(prop => prop === true || (typeof prop === 'string' && prop === 'true'));
+
+  const helperTextToDisplay = validatemessage || helperText;
+
+  if (displayMode === 'DISPLAY_ONLY') {
+    return <FieldValueList name={hideLabel ? '' : label} value={value} isHtml />;
+  }
+
+  if (displayMode === 'STACKED_LARGE_VAL') {
+    return <FieldValueList name={hideLabel ? '' : label} value={value} isHtml variant='stacked' />;
+  }
+
+  let richTextComponent;
+
+  if (readOnly) {
+    // Rich Text read-only component
+    richTextComponent = (
+      <RichTextEditor
+        {...additionalProps}
+        label={label}
+        labelHidden={hideLabel}
+        defaultValue={value}
+        testId={testId}
+        info={helperTextToDisplay}
+        ref={editorRef}
+        readOnly
+      />
+    );
+  } else {
+    // Rich Text editable component
+    const actionsApi = pConn.getActionsApi();
+    let status = '';
+    if (validatemessage !== '') {
+      status = 'error';
+    }
+    const handleChange = () => {
+      if (status === 'error') {
+        const property = (pConn.getStateProps() as any).value;
+        pConn.clearErrorMessages({
+          property,
+          category: '',
+          context: ''
+        });
+      }
+    };
+
+    const handleBlur = () => {
+      if (editorRef.current) {
+        const editorValue = editorRef.current.getContent({ format: 'html' });
+        const property = (pConn.getStateProps() as any).value;
+        handleEvent(actionsApi, 'changeNblur', property, editorValue);
+      }
+    };
+
+    richTextComponent = (
+      <RichTextEditor
+        {...additionalProps}
+        label={label}
+        labelHidden={hideLabel}
+        info={helperTextToDisplay}
+        defaultValue={value}
+        placeholder={placeholder}
+        disabled={disabled}
+        required={required}
+        testId={testId}
+        ref={editorRef}
+        error={status === 'error'}
+        onBlur={handleBlur}
+        onChange={handleChange}
+      />
+    );
+  }
+
+  return richTextComponent;
+}

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

@@ -0,0 +1,10 @@
+{
+  "name": "RichText",
+  "label": "Rich text editor",
+  "description": "Text (paragraph)",
+  "type": "Field",
+  "subtype": "Text-Paragraph",
+  "icon": "images/pz-text-area-active.svg",
+  "properties": [],
+  "defaultConfig": {}
+}

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

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

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

@@ -0,0 +1,63 @@
+import { getComponentFromRegistry } from '@pega/sdk-react';
+import type { PConnProps } from '@pega/sdk-react';
+
+// ScalarListProps can't extend PConnFieldProps because its 'value' has a different type
+interface ScalarListProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  displayInModal: boolean;
+  hideLabel: boolean;
+  value: any[];
+  componentType: string;
+  label: string;
+  displayMode: string;
+}
+
+function CommaSeparatedList(props) {
+  const { items } = props;
+
+  return (
+    <ul style={{ padding: '0', margin: '0' }}>
+      {items.map((value, index) => {
+        return <span key={index}>{value}</span>;
+      })}
+    </ul>
+  );
+}
+
+export default function ScalarList(props: ScalarListProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const FieldValueList = getComponentFromRegistry('FieldValueList');
+
+  const { label, getPConnect, componentType, value: scalarValues, displayMode, hideLabel, ...restProps } = props;
+
+  const items = scalarValues?.map(scalarValue => {
+    return getPConnect().createComponent(
+      {
+        type: componentType,
+        config: {
+          value: scalarValue,
+          displayMode: 'DISPLAY_ONLY',
+          label,
+          ...restProps,
+          readOnly: 'true'
+        }
+      },
+      '',
+      // @ts-expect-error
+      '',
+      {}
+    ); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional;
+  });
+
+  if (['STACKED_LARGE_VAL', 'DISPLAY_ONLY'].includes(displayMode)) {
+    return (
+      <div>
+        <CommaSeparatedList items={items} />
+      </div>
+    );
+  }
+
+  const displayComp = <CommaSeparatedList items={items} />;
+
+  return <FieldValueList name={hideLabel ? '' : label} value={displayComp} variant='stacked' />;
+}

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

@@ -0,0 +1,7 @@
+{
+  "label": "ScalarList",
+  "componentKey": "ScalarList",
+  "name": "ScalarList",
+  "type": "Field",
+  "properties": []
+}

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

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