@pega/dx-component-builder-sdk 0.23.10 → 0.23.11

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyTimeOfDay/demo.stories.tsx

@@ -0,0 +1,56 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import PegaDxilMyTimeOfDay from './index';
+import { configProps, stateProps } from './mock';
+
+const meta: Meta<typeof PegaDxilMyTimeOfDay > = {
+  title: 'PegaDxilMyTimeOfDay ',
+  component: PegaDxilMyTimeOfDay ,
+  excludeStories: /.*Data$/
+};
+
+export default meta;
+type Story = StoryObj<typeof PegaDxilMyTimeOfDay >;
+
+export const BasePegaDxilMyTimeOfDay: Story = (args) => {
+  const [value, setValue] = useState(configProps.value);
+
+  const props = {
+    value,
+
+    getPConnect: () => {
+      return {
+        getActionsApi: () => {
+          return {
+            updateFieldValue: (propName, theValue) => {
+              setValue(theValue);
+            },
+            triggerFieldChange: () => {/* nothing */}
+          };
+        },
+        getStateProps: () => {
+          return stateProps;
+        }
+      };
+    },
+    onChange: time => {
+      setValue(time.value);
+    }
+  };
+
+  return <PegaDxilMyTimeOfDay {...props} {...args} />;
+};
+
+BasePegaDxilMyTimeOfDay.args = {
+  label: configProps.label,
+  helperText: configProps.helperText,
+  testId: configProps.testId,
+  readOnly: configProps.readOnly,
+  disabled: configProps.disabled,
+  required: configProps.required,
+  status: configProps.status,
+  hideLabel: configProps.hideLabel,
+  displayMode: configProps.displayMode,
+  validatemessage: configProps.validatemessage,
+};

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyTimeOfDay/index.tsx

@@ -0,0 +1,88 @@
+import { KeyboardTimePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';
+import DayjsUtils from '@date-io/dayjs';
+import AccessTimeIcon from '@material-ui/icons/AccessTime';
+import dayjs from 'dayjs';
+
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import StyledPegaDxilMyTimeOfDayWrapper from './styles';
+
+interface PegaDxilMyTimeOfDayProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on this componentName
+}
+
+
+// Duplicated runtime code from React SDK
+
+// 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 PegaDxilMyTimeOfDay(props: PegaDxilMyTimeOfDayProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const FieldValueList = getComponentFromMap('FieldValueList');
+  const TextInput = getComponentFromMap('TextInput');
+
+  const { label, required, disabled, value = '', validatemessage, status, onChange, readOnly, helperText, displayMode, hideLabel, testId } = props;
+  const helperTextToDisplay = validatemessage || helperText;
+
+  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
+  };
+
+  const handleChange = date => {
+    const theValue = date && date.isValid() ? date.format('HH:mm') : null;
+    onChange({ value: theValue });
+  };
+
+  let timeValue: any = null;
+  if (value) {
+    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 (
+    <StyledPegaDxilMyTimeOfDayWrapper>
+      <MuiPickersUtilsProvider utils={DayjsUtils}>
+        <KeyboardTimePicker
+          variant='inline'
+          inputVariant='outlined'
+          placeholder='hh:mm am'
+          keyboardIcon={<AccessTimeIcon />}
+          fullWidth
+          required={required}
+          disabled={disabled}
+          error={status === 'error'}
+          helperText={helperTextToDisplay}
+          minutesStep={5}
+          size='small'
+          label={label}
+          autoOk
+          mask='__:__ _m'
+          format='hh:mm a'
+          value={timeValue}
+          onChange={handleChange}
+        InputProps={{ inputProps: { ...testProp } }}
+        />
+      </MuiPickersUtilsProvider>
+    </StyledPegaDxilMyTimeOfDayWrapper>
+  );
+}
+

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyTimeOfDay/mock.ts

@@ -0,0 +1,18 @@
+export const configProps = {
+  value: "",
+  label: "Time Sample",
+  helperText: "Time Helper Text",
+  testId: "time-12345678",
+  disabled: false,
+  required: false,
+  readOnly: false,
+  status: '',
+  hideLabel: false,
+  displayMode: '',
+  validatemessage: ''
+};
+
+export const stateProps = {
+  value: ".TimeSample",
+  hasSuggestions: false
+};

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyTimeOfDay/styles.js

@@ -0,0 +1,7 @@
+import styled, { css } from 'styled-components';
+
+export default styled.div(() => {
+  return css`
+    margin: 0px 0;
+  `;
+});

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyURL/config.json

@@ -0,0 +1,111 @@
+{
+  "name": "Pega_DXIL_MyURL",
+  "label": "My URL",
+  "description": "My URL",
+  "organization": "Pega",
+  "version": "0.0.1",
+  "library": "DXIL",
+  "allowedApplications": [],
+  "componentKey": "Pega_DXIL_MyURL",
+  "type": "Field",
+  "subtype": "Text-URL",
+  "icon": "images/pz-text-input-active.svg",
+  "properties": [
+    {
+      "name": "label",
+      "label": "Field label",
+      "format": "TEXT",
+      "required": true
+    },
+    {
+      "name": "readOnly",
+      "label": "Edit mode",
+      "format": "READONLY"
+    },
+    {
+      "label": "Column settings",
+      "format": "GROUP",
+      "visibility": "@VIEWTYPE == 'MultiRecordDisplayAsTable'",
+      "properties": [
+        {
+          "name": "columnWidth",
+          "label": "Column width",
+          "format": "SELECT",
+          "source": [
+            {
+              "key": "auto",
+              "value": "Auto"
+            },
+            {
+              "key": "custom",
+              "value": "Custom"
+            }
+          ]
+        },
+        {
+          "name": "width",
+          "label": "Width (px)",
+          "format": "NUMBER",
+          "visibility": "$this.columnWidth == 'custom'"
+        }
+      ]
+    },
+    {
+      "label": "Input settings",
+      "format": "GROUP",
+      "visibility": "(!readOnly = true)",
+      "properties": [
+        {
+          "name": "placeholder",
+          "label": "Placeholder",
+          "format": "TEXT"
+        },
+        {
+          "name": "helperText",
+          "label": "Helper text",
+          "format": "TEXT"
+        }
+      ]
+    },
+    {
+      "label": "Conditions",
+      "format": "GROUP",
+      "properties": [
+        {
+          "name": "required",
+          "label": "Required",
+          "format": "REQUIRED",
+          "visibility": "(!readOnly = true)"
+        },
+        {
+          "name": "disabled",
+          "label": "Disabled",
+          "format": "DISABLED",
+          "visibility": "(!readOnly = true)"
+        },
+        {
+          "name": "visibility",
+          "label": "Visibility",
+          "format": "VISIBILITY"
+        }
+      ]
+    },
+    {
+      "label": "Advanced",
+      "format": "GROUP",
+      "collapsible": true,
+      "properties": [
+        {
+          "name": "testId",
+          "label": "Test ID",
+          "format": "TEXT",
+          "ignorePattern": "[^-_\\p{N}\\p{L}]",
+          "includeAnnotations": false
+        }
+      ]
+    }
+  ],
+  "defaultConfig": {
+    "label": "@L $this.label"
+  }
+}

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyURL/demo.stories.tsx

@@ -0,0 +1,54 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import PegaDxilMyUrl from './index';
+import { configProps } from './mock';
+
+const meta: Meta<typeof PegaDxilMyUrl> = {
+  title: 'PegaDxilMyUrl',
+  component: PegaDxilMyUrl,
+  excludeStories: /.*Data$/
+};
+
+export default meta;
+type Story = StoryObj<typeof PegaDxilMyUrl>;
+
+export const BasePegaDxilMyUrl: Story = (args) => {
+  const [value, setValue] = useState(configProps.value);
+
+  const props = {
+    value,
+    placeholder: configProps.placeholder,
+    getPConnect: () => {
+      return {
+        getActionsApi: () => {
+          return {
+            updateFieldValue: (propName, theValue) => {
+              setValue(theValue);
+            }
+          };
+        },
+        getStateProps: () => {
+          return { value: '.name' };
+        }
+      };
+    },
+    onChange: (event) => { setValue(event.target.value); },
+    onBlur: () => { return configProps.value; }
+  };
+
+  return <PegaDxilMyUrl {...props} {...args} />;
+};
+
+BasePegaDxilMyUrl.args = {
+  label: configProps.label,
+  helperText: configProps.helperText,
+  testId: configProps.testId,
+  readOnly: configProps.readOnly,
+  disabled: configProps.disabled,
+  required: configProps.required,
+  status: configProps.status,
+  hideLabel: configProps.hideLabel,
+  displayMode: configProps.displayMode,
+  validatemessage: configProps.validatemessage,
+};

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyURL/index.tsx

@@ -0,0 +1,77 @@
+import { TextField } from '@material-ui/core';
+
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import StyledPegaDxilMyUrlWrapper from './styles';
+
+interface PegaDxilMyUrlProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on this componentName
+}
+
+// Duplicated runtime code from React SDK
+
+// 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 PegaDxilMyUrl(props: PegaDxilMyUrlProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const FieldValueList = getComponentFromMap('FieldValueList');
+  const TextInput = getComponentFromMap('TextInput');
+
+  const {
+    label,
+    required,
+    disabled,
+    value = '',
+    validatemessage,
+    status,
+    onChange,
+    onBlur,
+    readOnly,
+    testId,
+    helperText,
+    displayMode,
+    hideLabel,
+    placeholder
+  } = props;
+  const helperTextToDisplay = validatemessage || helperText;
+
+  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 (
+    <StyledPegaDxilMyUrlWrapper>
+    <TextField
+      type='url'
+      fullWidth
+      variant='outlined'
+      helperText={helperTextToDisplay}
+      placeholder={placeholder ?? ''}
+      size='small'
+      required={required}
+      disabled={disabled}
+      onChange={onChange}
+      onBlur={!readOnly ? onBlur : undefined}
+      error={status === 'error'}
+      label={label}
+      value={value}
+      InputProps={{ inputProps: { ...testProp } }}
+    />
+     </StyledPegaDxilMyUrlWrapper>
+  );
+}
+

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyURL/mock.ts

@@ -0,0 +1,16 @@
+// eslint-disable-next-line import/prefer-default-export
+export const configProps = {
+  value: '',
+  label: 'URL Sample',
+  placeholder: 'URL Placeholder',
+  helperText: 'URL Helper Text',
+  testId: 'url-12345678',
+  hasSuggestions: false,
+  required: false,
+  disabled: false,
+  readOnly: false,
+  displayMode: '',
+  status: '',
+  hideLabel: false,
+  validatemessage: ''
+};

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyURL/styles.js

@@ -0,0 +1,7 @@
+import styled, { css } from 'styled-components';
+
+export default styled.div(() => {
+  return css`
+    margin: 0px 0;
+  `;
+});

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/_field.md

@@ -0,0 +1,6 @@
+# The **custom-sdk/field** directory
+
+The **src/components/custom-sdk/field** directory contains the code for the custom **field** components you want to create and use with the **React SDK**.
+
+When you run the **npm run  create** command to create new _field_ components, the generated code that you can use as a starting point for your component development
+will be placed in component-specific folders in **src/components/custom-sdk/field**.

package/tests/assets/sdk-r/components/createAll/custom-sdk/template/Pega_DXIL_MyDetails/DefaultForm.svg

@@ -0,0 +1,29 @@
+<?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>2 col  copy</title>
+    <g id="Views" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Template-icons" transform="translate(-320.000000, -925.000000)">
+            <g id="2-col--copy" transform="translate(320.000000, 925.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-copy-2" transform="translate(6.000000, 6.000000)" fill="#8084A7">
+                    <rect id="Rectangle" x="0" y="-2.84217094e-14" width="42" height="11.8"></rect>
+                    <rect id="Rectangle" x="46" y="-2.84217094e-14" width="42" height="11.8"></rect>
+                    <rect id="Rectangle-Copy-5" x="0" y="16" width="42" height="11.8"></rect>
+                    <rect id="Rectangle-Copy-3" x="46" y="16" width="42" height="11.8"></rect>
+                    <rect id="Rectangle-Copy-15" x="0" y="32" width="42" height="11.8"></rect>
+                    <rect id="Rectangle-Copy-14" x="46" y="32" width="42" height="11.8"></rect>
+                    <rect id="Rectangle-Copy-17" x="0" y="48" width="42" height="11.8"></rect>
+                    <rect id="Rectangle-Copy-16" x="46" y="48" width="42" height="11.8"></rect>
+                </g>
+                <g id="Group-7" transform="translate(28.000000, 11.000000)">
+                    <path id="Line-12-Copy" d="M35.1666667,42.75 L47.1666667,48.5 L35.1666667,54.25 L35.166,49.25 L-0.25,49.25 L-0.25,47.75 L35.166,47.75 L35.1666667,42.75 Z" fill="#1E1F27" fill-rule="nonzero"></path>
+                    <line x1="0.5" y1="48.5" x2="43.5" y2="32.5" id="Line" stroke="#1E1F27" stroke-width="1.5" stroke-linecap="square"></line>
+                    <line x1="43.5" y1="32.5" x2="1.5" y2="32.5" id="Line-2" stroke="#1E1F27" stroke-width="1.5" stroke-linecap="square"></line>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/tests/assets/sdk-r/components/createAll/custom-sdk/template/Pega_DXIL_MyDetails/config.json

@@ -0,0 +1,21 @@
+{
+  "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": "DefaultForm.svg",
+  "properties": [
+    {
+      "name": "A",
+      "label": "Region A",
+      "format": "CONTENTPICKER",
+      "addTypeList": ["Fields", "Views", "UIComponents"]
+    }
+  ]
+}

package/tests/assets/sdk-r/components/createAll/custom-sdk/template/Pega_DXIL_MyDetails/demo.stories.tsx

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import PegaDxilMyDetails from "./index";
+import operatorDetails, { pyReviewRaw } from "./mock";
+
+const meta: Meta<typeof PegaDxilMyDetails> = {
+  title: 'PegaDxilMyDetails',
+  component: PegaDxilMyDetails,
+  excludeStories: /.*Data$/,
+  parameters: {
+    type: 'Details'
+  }
+};
+
+export default meta;
+type Story = StoryObj<typeof PegaDxilMyDetails>;
+
+window.PCore = {
+  ...window.PCore,
+  getUserApi: (): any => {
+    return {
+      getOperatorDetails: () => {
+        return new Promise((resolve) => {
+          resolve(operatorDetails);
+        });
+      },
+    };
+  },
+  getEnvironmentInfo: (): any => {
+  return {
+    getUseLocale: () => {
+      return 'en-GB';
+    },
+    getLocale: () => {
+      return 'en-GB';
+    }
+  };
+}
+};
+
+export const BasePegaDxilMyDetails: Story = (args) => {
+  const props = {
+    NumCols: "1",
+    template: "DefaultForm",
+    showHighlightedData: false,
+    getPConnect: () => {
+      return {
+        getChildren: () => {
+          return pyReviewRaw.children[0].children;
+        },
+        getRawMetadata: () => {
+          return pyReviewRaw;
+        },
+        getContextName: () => {
+          return 'app/primary_1';
+        },
+        getInheritedProps: () => {
+          return pyReviewRaw.config.inheritedProps;
+        },
+        
+        setInheritedProp: () => {
+          /* nothing */
+        },
+        resolveConfigProps: () => {
+          /* nothing */
+        },
+      };
+    },
+  };
+
+  return <PegaDxilMyDetails {...props} {...args} />;
+};
+
+BasePegaDxilMyDetails.args = {
+  label: "Details",
+  showLabel: true,
+}

package/tests/assets/sdk-r/components/createAll/custom-sdk/template/Pega_DXIL_MyDetails/index.tsx

@@ -0,0 +1,79 @@
+import { createElement } from 'react';
+import Grid from '@material-ui/core/Grid';
+
+import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+import StyledPegaDxilMyDetailsWrapper from "./styles";
+
+interface PegaDxilMyDetailsProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  label: string;
+  showLabel: boolean;
+  showHighlightedData: boolean;
+}
+// Duplicated runtime code from React SDK
+// 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: PegaDxilMyDetailsProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const FieldGroup = getComponentFromMap('FieldGroup');
+
+  const { label, showLabel, getPConnect, showHighlightedData } = props;
+
+  // Get the inherited props from the parent to determine label settings
+  const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
+
+  // Set display mode prop and re-create the children so this part of the dom tree renders
+  // in a readonly (display) mode instead of a editable
+  getPConnect().setInheritedProp('displayMode', 'LABELS_LEFT');
+  getPConnect().setInheritedProp('readOnly', true);
+  const children = (getPConnect().getChildren() as any[]).map((configObject, index) =>
+    createElement(createPConnectComponent(), {
+      ...configObject,
+      // eslint-disable-next-line react/no-array-index-key
+      key: index.toString()
+    })
+  );
+
+  // 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() as any).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, '', '', {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional
+    });
+  }
+
+  return (
+  <StyledPegaDxilMyDetailsWrapper>
+    <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
+      {showHighlightedData && highlightedDataArr.length > 0 && (
+        <Grid container spacing={1} style={{ padding: '0 0 1em' }}>
+          {highlightedDataArr.map((child, i) => (
+            <Grid item xs={12} key={`hf-${i + 1}`}>
+              {child}
+            </Grid>
+          ))}
+        </Grid>
+      )}
+      <Grid container spacing={1}>
+        {children.map((child, i) => (
+          <Grid item xs={12} key={`r-${i + 1}`}>
+            {child}
+          </Grid>
+        ))}
+      </Grid>
+    </FieldGroup>
+    </StyledPegaDxilMyDetailsWrapper>
+  );
+}