@pega/sdk 0.0.4 → 0.0.6

package/templates/react-native-sdk-reference/src/components/common/inputTheme.ts

@@ -0,0 +1,17 @@
+export const FORM_INPUT_THEME = {
+  colors: {
+    primary: '#7C5CE6',
+    outline: 'rgba(255, 255, 255, 0.45)',
+    onSurface: '#FFFFFF',
+    onSurfaceVariant: 'rgba(255, 255, 255, 0.72)',
+    error: '#FF3B30',
+  },
+};
+
+export const FORM_INPUT_PROPS = {
+  mode: 'outlined' as const,
+  textColor: '#FFFFFF',
+  outlineColor: 'rgba(255, 255, 255, 0.45)',
+  activeOutlineColor: '#7C5CE6',
+  theme: FORM_INPUT_THEME,
+};

package/templates/react-native-sdk-reference/src/components/design-system/AutoComplete.tsx

@@ -0,0 +1,126 @@
+import { useEffect, useRef, useState } from 'react';
+import { Keyboard, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { TextInput } from 'react-native-paper';
+import LabelText from '../common/LabelText';
+import { FORM_INPUT_PROPS } from '../common/inputTheme';
+
+const AutoComplete = (props) => {
+  const { label, required, readOnly, testId, placeholder, disabled, status, options, onChange } = props;
+
+  const [inputValue, setInputValue] = useState('');
+  const [showOptions, setShowOptions] = useState(false);
+  const [selectedKey, setSelectedKey] = useState(null);
+  const inputRef = useRef(null);
+
+  const handleChange = (value) => {
+    setInputValue(value);
+    setShowOptions(true);
+    setSelectedKey(null);
+    if (onChange) onChange(null);
+  };
+
+  const handleBlur = () => {
+    // Handle blur event
+    setShowOptions(false);
+  };
+
+  const filteredOptions = options.filter((option) => option.value.toLowerCase().includes(inputValue.toLowerCase()));
+
+  // Show label for selected key
+  useEffect(() => {
+    if (selectedKey !== null) {
+      const selected = options.find((opt) => opt.key === selectedKey);
+      if (selected) setInputValue(selected.value);
+    }
+  }, [selectedKey, options]);
+
+  // Dismiss dropdown on outside press
+  useEffect(() => {
+    if (!showOptions) return;
+    const hide = () => setShowOptions(false);
+    Keyboard.addListener('keyboardDidHide', hide);
+    return () => Keyboard.removeAllListeners('keyboardDidHide');
+  }, [showOptions]);
+
+  return (
+    <View style={styles.autoCompleteContainer}>
+      <TextInput
+        ref={inputRef}
+        {...FORM_INPUT_PROPS}
+        label={<LabelText label={label} required={required} />}
+        value={inputValue}
+        onChangeText={handleChange}
+        onBlur={!readOnly ? handleBlur : undefined}
+        error={status === 'error'}
+        testID={testId}
+        placeholder={placeholder}
+        disabled={disabled}
+        readOnly={readOnly}
+        onFocus={() => setShowOptions(true)}
+        accessibilityLabel={label}
+        accessibilityRole="combobox"
+        accessibilityState={{ disabled, expanded: showOptions }}
+      />
+      {showOptions && (
+        <View style={styles.optionsContainer}>
+          {filteredOptions.length === 0 ? (
+            <Text style={styles.emptyText}>No options found</Text>
+          ) : (
+            filteredOptions.map((option) => (
+              <TouchableOpacity
+                key={option.key}
+                onPress={() => {
+                  setSelectedKey(option.key);
+                  setInputValue(option.value);
+                  setShowOptions(false);
+                  if (onChange) onChange(option.key);
+                }}
+                accessible={true}
+                accessibilityRole="button"
+                accessibilityLabel={option.value}
+                style={{
+                  padding: 15,
+                  backgroundColor: '#444',
+                  borderBottomWidth: 1,
+                  borderColor: '#333',
+                }}
+              >
+                <Text style={{ color: '#ffffff' }}>{option.value}</Text>
+              </TouchableOpacity>
+            ))
+          )}
+        </View>
+      )}
+    </View>
+  );
+};
+
+export default AutoComplete;
+
+const styles = StyleSheet.create({
+  autoCompleteContainer: {
+    position: 'relative',
+  },
+  optionsContainer: {
+    position: 'absolute',
+    top: 57,
+    left: 0,
+    right: 0,
+    backgroundColor: '#444',
+    borderRadius: 4,
+    zIndex: 1000,
+  },
+  label: {
+    fontSize: 18,
+    color: '#ffffff',
+  },
+  requiredLabel: {
+    color: 'red',
+  },
+  emptyText: {
+    color: '#aaa',
+    padding: 10,
+    fontStyle: 'italic',
+    textAlign: 'center',
+  },
+});

package/templates/react-native-sdk-reference/src/components/design-system/FieldGroup.tsx

@@ -0,0 +1,72 @@
+import React, { PropsWithChildren, useState } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+
+// FieldGroupProps is one of the few components that does NOT have getPConnect.
+//  So, no need to extend PConnProps
+interface FieldGroupProps {
+  name?: string;
+  collapsible?: boolean;
+  instructions?: string;
+}
+
+export default function FieldGroup(props: PropsWithChildren<FieldGroupProps>) {
+  const { children, name, collapsible = false, instructions } = props;
+  const [collapsed, setCollapsed] = useState(false);
+
+  const headerClickHandler = () => {
+    setCollapsed((current) => !current);
+  };
+
+  return (
+    <View style={styles.root}>
+      <View style={styles.fullWidth}>
+        {name && (
+          <View style={styles.fieldMargin}>
+            {collapsible ? (
+              <TouchableOpacity accessibilityRole="button" onPress={headerClickHandler} style={styles.fieldGroupHeader}>
+                <Text style={styles.collapseIcon}>{collapsed ? '▶' : '▼'}</Text>
+                <Text style={styles.headingText}>{name}</Text>
+              </TouchableOpacity>
+            ) : (
+              <Text style={styles.headingText}>{name}</Text>
+            )}
+          </View>
+        )}
+        {instructions && instructions !== 'none' && <Text style={styles.instructionText}>{instructions}</Text>}
+        {!collapsed && <View style={styles.fullWidth}>{children}</View>}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: {
+    marginRight: 8,
+    marginLeft: 8,
+    marginTop: 8,
+    marginBottom: 8,
+  },
+  fieldMargin: {
+    paddingTop: 8,
+    paddingBottom: 8,
+    marginTop: 8,
+  },
+  fullWidth: {
+    width: '100%',
+  },
+  fieldGroupHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 5,
+  },
+  instructionText: {
+    paddingVertical: 5,
+    color: '#fff',
+  },
+  headingText: {
+    fontWeight: 'bold',
+    color: '#fff',
+    fontSize: 20,
+  },
+  collapseIcon: { fontSize: 18, color: '#fff' },
+});

package/templates/react-native-sdk-reference/src/components/design-system/Radio.tsx

@@ -0,0 +1,61 @@
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { MaterialIcons } from '@expo/vector-icons';
+
+export default function Radio({ options, selectedValue, readOnly, disabled, onChange, style, inline = false }: any) {
+  return (
+    <View style={[styles.container, style, inline && { flexDirection: 'row', gap: 10 }]}>
+      {options.map((option: any) => {
+        const active = selectedValue === option.value;
+
+        return (
+          <TouchableOpacity
+            disabled={readOnly || disabled}
+            style={[
+              styles.radio,
+              {
+                backgroundColor: readOnly || disabled ? '#49454f' : '#272729',
+                borderColor: '#7B8CE5',
+                borderWidth: active ? 1 : 0,
+                width: inline ? 'auto' : '100%',
+              },
+            ]}
+            onPress={() => onChange(option.value)}
+            key={option.value}
+          >
+            <MaterialIcons
+              name={active ? 'radio-button-checked' : 'radio-button-unchecked'}
+              size={24}
+              color={active ? '#06b6d4' : '#64748b'}
+            />
+            <Text style={{ color: '#fff' }}>{option.label}</Text>
+          </TouchableOpacity>
+        );
+      })}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  radio: {
+    height: 60,
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 10,
+    paddingHorizontal: 10,
+    borderRadius: 15,
+    gap: 10,
+  },
+  text: {
+    fontSize: 16,
+    marginLeft: 15,
+    color: '#6b7280',
+  },
+  activeText: {
+    color: '#374151',
+  },
+});

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

@@ -0,0 +1,196 @@
+import { useEffect, useState } from 'react';
+import { TextInput as RNTextInput } from 'react-native-paper';
+import isDeepEqual from 'fast-deep-equal/react';
+
+import DisplayField from '../../common/DisplayField';
+import FormFieldWrapper from '../../common/FormFieldWrapper';
+import HelperText from '../../common/HelperText';
+import { FORM_INPUT_PROPS } from '../../common/inputTheme';
+import MyAutoComplete from '../../design-system/AutoComplete';
+import { getDataPage } from '../../helpers/data_page';
+import handleEvent from '../../helpers/event-utils';
+import Utils from '../../helpers/utils';
+import { PConnFieldProps } from '@/types/PConnProps';
+
+interface IOption {
+  key: string;
+  value: string;
+}
+
+const preProcessColumns = (columnList) => {
+  return columnList.map((col) => {
+    const tempColObj = { ...col };
+    tempColObj.value = col.value && col.value.startsWith('.') ? col.value.substring(1) : col.value;
+    return tempColObj;
+  });
+};
+
+const getDisplayFieldsMetaData = (columnList) => {
+  const displayColumns = columnList.filter((col) => col.display === 'true');
+  const metaDataObj: any = { key: '', primary: '', secondary: [] };
+  const keyCol = columnList.filter((col) => col.key === 'true');
+  metaDataObj.key = keyCol.length > 0 ? keyCol[0].value : 'auto';
+  for (let index = 0; index < displayColumns.length; index += 1) {
+    if (displayColumns[index].primary === 'true') {
+      metaDataObj.primary = displayColumns[index].value;
+    } else {
+      metaDataObj.secondary.push(displayColumns[index].value);
+    }
+  }
+  return metaDataObj;
+};
+
+const flattenParameters = (params = {}) => {
+  const flatParams = {};
+  Object.keys(params).forEach((key) => {
+    const { name, value: theVal } = params[key];
+    flatParams[name] = theVal;
+  });
+
+  return flatParams;
+};
+
+interface AutoCompleteProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on AutoComplete here'
+  displayMode?: string;
+  deferDatasource?: boolean;
+  datasourceMetadata?: any;
+  status?: string;
+  onRecordChange?: any;
+  additionalProps?: object;
+  listType: string;
+  parameters?: any;
+  datasource: any;
+  columns: any[];
+}
+
+export default function AutoComplete(props: AutoCompleteProps) {
+  const {
+    getPConnect,
+    validatemessage,
+    displayMode,
+    deferDatasource,
+    datasourceMetadata,
+    status,
+    helperText,
+    onRecordChange,
+    label,
+    disabled,
+    value = '',
+    readOnly,
+    testId,
+    hideLabel,
+  } = props;
+
+  const context = getPConnect().getContextName();
+  let { listType, parameters, datasource = [], columns = [] } = props;
+  const [options, setOptions] = useState<IOption[]>([]);
+  const [theDatasource, setDatasource] = useState(null);
+  const helperTextToDisplay = validatemessage || helperText;
+
+  const thePConn = getPConnect();
+  const actionsApi = thePConn.getActionsApi();
+  const propName = (thePConn.getStateProps() as any).value;
+
+  if (!isDeepEqual(datasource, theDatasource)) {
+    // inbound datasource is different, so update theDatasource (to trigger useEffect)
+    setDatasource(datasource);
+  }
+
+  // convert associated to datapage listtype and transform props
+  // Process deferDatasource when datapage name is present. WHhen tableType is promptList / localList
+  if (deferDatasource && datasourceMetadata?.datasource?.name) {
+    listType = 'datapage';
+    datasource = datasourceMetadata.datasource.name;
+    const {
+      parameters: dataSourceParameters,
+      propertyForDisplayText,
+      propertyForValue,
+    } = datasourceMetadata.datasource;
+    parameters = flattenParameters(dataSourceParameters);
+    const displayProp = propertyForDisplayText.startsWith('@P')
+      ? propertyForDisplayText.substring(3)
+      : propertyForDisplayText;
+    const valueProp = propertyForValue.startsWith('@P') ? propertyForValue.substring(3) : propertyForValue;
+    columns = [
+      {
+        key: 'true',
+        setProperty: 'Associated property',
+        value: valueProp,
+      },
+      {
+        display: 'true',
+        primary: 'true',
+        useForSearch: true,
+        value: displayProp,
+      },
+    ];
+  }
+  columns = preProcessColumns(columns);
+
+  useEffect(() => {
+    if (listType === 'associated') {
+      setOptions(Utils.getOptionList(props, getPConnect().getDataObject('')));
+    }
+  }, [theDatasource]);
+
+  useEffect(() => {
+    if (!displayMode && listType !== 'associated') {
+      getDataPage(datasource, parameters, context).then((results: any) => {
+        const optionsData: any[] = [];
+        const displayColumn = getDisplayFieldsMetaData(columns);
+        results?.forEach((element) => {
+          const val = element[displayColumn.primary]?.toString();
+          const obj = {
+            key: element[displayColumn.key] || element.pyGUID,
+            value: val,
+          };
+          optionsData.push(obj);
+        });
+        setOptions(optionsData);
+      });
+    }
+  }, []);
+
+  if (['STACKED_LARGE_VAL', 'DISPLAY_ONLY'].includes(displayMode || '')) {
+    return (
+      <DisplayField
+        type="text"
+        label={label}
+        value={value}
+        hideLabel={hideLabel}
+        variant={displayMode === 'STACKED_LARGE_VAL' ? 'stacked' : 'inline'}
+      />
+    );
+  }
+
+  const handleChange = (newValue) => {
+    handleEvent(actionsApi, 'changeNblur', propName, newValue);
+    if (onRecordChange) {
+      onRecordChange(newValue);
+    }
+  };
+
+  if (readOnly || disabled) {
+    const theValAsString = options?.find((opt) => opt.key === value)?.value;
+    return (
+      <FormFieldWrapper>
+        <RNTextInput
+          {...FORM_INPUT_PROPS}
+          label={label}
+          value={theValAsString}
+          testID={testId}
+          readOnly={readOnly}
+          disabled={disabled}
+        />
+      </FormFieldWrapper>
+    );
+  }
+
+  return (
+    <FormFieldWrapper>
+      <MyAutoComplete {...props} options={options} onChange={handleChange} />
+      <HelperText type={status === 'error' ? 'error' : 'info'} value={helperTextToDisplay} />
+    </FormFieldWrapper>
+  );
+}

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

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

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

@@ -0,0 +1,89 @@
+import React, { useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { Checkbox as RNCheckbox } from '@futurejj/react-native-checkbox';
+
+import FormFieldWrapper from '../../common/FormFieldWrapper';
+import DisplayField from '../../common/DisplayField';
+import HelperText from '../../common/HelperText';
+import handleEvent from '../../helpers/event-utils';
+import { PConnFieldProps } from '@/types/PConnProps';
+import LabelText from '../../common/LabelText';
+
+interface checkboxProps extends Omit<PConnFieldProps, 'value'> {
+  // If any, enter additional props that only exist on Date here
+  caption?: string;
+  value?: boolean;
+  trueLabel?: string;
+  falseLabel?: string;
+}
+
+function Checkbox(props: checkboxProps) {
+  const {
+    getPConnect,
+    caption,
+    value,
+    validatemessage,
+    helperText,
+    status,
+    displayMode,
+    hideLabel,
+    trueLabel,
+    falseLabel,
+    required,
+    readOnly,
+    disabled,
+  } = props;
+  const helperTextToDisplay = validatemessage || helperText;
+
+  const [checked, setChecked] = useState(value);
+
+  const thePConn = getPConnect();
+  const actionsApi = thePConn.getActionsApi();
+  const propName = (thePConn.getStateProps() as any).value;
+
+  const handleChange = () => {
+    setChecked(!checked);
+
+    handleEvent(actionsApi, 'changeNblur', propName, !checked as any);
+  };
+
+  if (['STACKED_LARGE_VAL', 'DISPLAY_ONLY'].includes(displayMode || '')) {
+    return (
+      <DisplayField
+        type="checkbox"
+        label={caption}
+        value={value ? trueLabel : falseLabel}
+        hideLabel={hideLabel}
+        variant={displayMode === 'STACKED_LARGE_VAL' ? 'stacked' : 'inline'}
+      />
+    );
+  }
+
+  return (
+    <FormFieldWrapper>
+      <View style={styles.checkboxContainer}>
+        <LabelText label={caption} required={required} />
+        <RNCheckbox
+          status={checked ? 'checked' : 'unchecked'}
+          style={{ marginLeft: 8 }}
+          onPress={handleChange}
+          disabled={readOnly || disabled}
+        />
+      </View>
+      <HelperText type={status === 'error' ? 'error' : 'info'} value={helperTextToDisplay} />
+    </FormFieldWrapper>
+  );
+}
+
+const styles = StyleSheet.create({
+  checkboxContainer: {
+    paddingHorizontal: 20,
+    marginVertical: 5,
+    width: '100%',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+});
+
+export default Checkbox;

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

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

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

@@ -0,0 +1,84 @@
+import { useEffect, useState } from 'react';
+import { TextInput } from 'react-native-paper';
+
+import { PConnFieldProps } from '../../../types/PConnProps';
+import FormFieldWrapper from '../../common/FormFieldWrapper';
+import HelperText from '../../common/HelperText';
+import handleEvent from '../../helpers/event-utils';
+import LabelText from '../../common/LabelText';
+import DisplayField from '../../common/DisplayField';
+import { FORM_INPUT_PROPS } from '../../common/inputTheme';
+
+interface TextInputProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on Currency here
+  fieldMetadata?: any;
+}
+
+export default function Currency(props: TextInputProps) {
+  const {
+    getPConnect,
+    label,
+    required,
+    disabled,
+    value = '',
+    validatemessage,
+    status,
+    readOnly,
+    testId,
+    helperText,
+    placeholder,
+    displayMode,
+    hideLabel,
+  } = props;
+
+  const pConn = getPConnect();
+  const actions = pConn.getActionsApi();
+  const propName = (pConn.getStateProps() as any).value;
+
+  const helperTextToDisplay = validatemessage || helperText;
+
+  const [inputValue, setInputValue] = useState('');
+
+  useEffect(() => {
+    setInputValue(value);
+  }, [value]);
+
+  if (['STACKED_LARGE_VAL', 'DISPLAY_ONLY'].includes(displayMode || '')) {
+    return (
+      <DisplayField
+        type="currency"
+        label={label}
+        value={value}
+        hideLabel={hideLabel}
+        variant={displayMode === 'STACKED_LARGE_VAL' ? 'stacked' : 'inline'}
+      />
+    );
+  }
+
+  function handleChange(value) {
+    setInputValue(value);
+  }
+
+  function handleBlur() {
+    handleEvent(actions, 'changeNblur', propName, inputValue);
+  }
+
+  return (
+    <FormFieldWrapper>
+      <TextInput
+        keyboardType="decimal-pad"
+        {...FORM_INPUT_PROPS}
+        label={<LabelText label={label} required={required} />}
+        value={inputValue}
+        onChangeText={handleChange}
+        onBlur={!readOnly ? handleBlur : undefined}
+        error={status === 'error'}
+        testID={testId}
+        placeholder={placeholder}
+        disabled={disabled}
+        readOnly={readOnly}
+      />
+      <HelperText type={status === 'error' ? 'error' : 'info'} value={helperTextToDisplay} />
+    </FormFieldWrapper>
+  );
+}

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

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