@pega/custom-dx-components 0.0.1 → 0.1.10

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyForm/mock.js

@@ -0,0 +1,139 @@
+/* eslint-disable storybook/default-exports */
+/* eslint-disable storybook/prefer-pascal-case */
+export const pyReviewRaw = {
+  name: 'CollectInformation',
+  type: 'View',
+  config: {
+    template: 'DefaultForm',
+    ruleClass: 'OM5W9U-SampleApp-Work-Test',
+    localeReference: '@LR OM5W9U-SAMPLEAPP-WORK-TEST!VIEW!COLLECTINFORMATION',
+    context: '@P .pyViewContext'
+  },
+  children: [
+    {
+      name: 'Fields',
+      type: 'Region',
+      children: [
+        {
+          type: 'TextInput',
+          config: {
+            value: '@P .FirstName',
+            label: '@L First Name',
+            key: 'FirstName'
+          }
+        },
+        {
+          type: 'TextInput',
+          config: {
+            value: '@P .MiddleName',
+            label: '@L Middle Name',
+            key: 'MiddleName'
+          }
+        },
+        {
+          type: 'TextInput',
+          config: {
+            value: '@P .LastName',
+            label: '@L Last Name',
+            key: 'LastName'
+          }
+        },
+        {
+          type: 'Email',
+          config: {
+            value: '@P .Email',
+            label: '@L Email',
+            key: 'Email'
+          }
+        },
+        {
+          type: 'Phone',
+          config: {
+            value: '@P .PhoneNumber',
+            label: '@L Phone Number',
+            datasource: {
+              source: '@DATASOURCE D_pyCountryCallingCodeList.pxResults',
+              fields: {
+                value: '@P .pyCallingCode'
+              }
+            },
+            key: 'PhoneNumber'
+          }
+        },
+        {
+          type: 'Date',
+          config: {
+            value: '@P .ServiceDate',
+            label: '@L Service Date',
+            key: 'ServiceDate'
+          }
+        }
+      ]
+    }
+  ],
+  classID: 'OM5W9U-SampleApp-Work-Test'
+};
+
+export const regionChildrenResolved = [
+  {
+    readOnly: undefined,
+    value: 'John',
+    label: 'First Name',
+    hasSuggestions: false,
+    key: 'firstName'
+  },
+  {
+    readOnly: undefined,
+    value: '',
+    label: 'Middle Name',
+    hasSuggestions: false,
+    key: 'middleName'
+  },
+  {
+    readOnly: undefined,
+    value: 'Doe',
+    label: 'Last Name',
+    hasSuggestions: false,
+    key: 'lastName'
+  },
+  {
+    readOnly: undefined,
+    value: 'John@doe.com',
+    label: 'Email',
+    hasSuggestions: false,
+    key: 'email'
+  },
+  {
+    readOnly: undefined,
+    value: '+16397975093',
+    label: 'Phone Number',
+    datasource: {
+      fields: {
+        value: undefined
+      },
+      source: [
+        {
+          value: '+1'
+        },
+        {
+          value: '+91'
+        },
+        {
+          value: '+48'
+        },
+        {
+          value: '+44'
+        }
+      ]
+    },
+    hasSuggestions: false,
+    key: 'phoneNumber'
+  },
+  {
+    readOnly: undefined,
+    value: '2023-01-25',
+    label: 'Service Date',
+    hasSuggestions: false,
+    key: 'serviceDate'
+  }
+];

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyForm/styles.js

@@ -0,0 +1,15 @@
+
+// utilizing theming, comment out, if want individual style
+import styled from 'styled-components';
+import { Configuration } from '@pega/cosmos-react-core';
+
+export default styled(Configuration)``;
+
+// individual style, comment out above, and uncomment here and add styles
+// import styled, { css } from 'styled-components';
+//
+// export default styled.div(() => {
+//  return css`
+//    margin: 0px 0;
+//  `;
+// });

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyInteger/config.json

@@ -0,0 +1,344 @@
+{
+  "name": "Pega_DXIL_MyInteger",
+  "label": "My Integer",
+  "description": "My Integer",
+  "organization": "Pega",
+  "version": "0.0.1",
+  "library": "DXIL",
+  "allowedApplications": [],
+  "componentKey": "Pega_DXIL_MyInteger",
+  "type": "Field",
+  "subtype": "Integer",
+  "properties": [
+    {
+      "name": "label",
+      "label": "Field label",
+      "format": "TEXT",
+      "required": true
+    },
+    {
+      "name": "readOnly",
+      "label": "Edit mode",
+      "format": "READONLY"
+    },
+    {
+      "name": "showGroupSeparators",
+      "label": "Show thousands separator",
+      "format": "BOOLEAN",
+      "visibility": "(!displayAs = slider)"
+    },
+    {
+      "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": "displayAs",
+          "label": "Display as",
+          "format": "SELECT",
+          "defaultValue": "input",
+          "source": [
+            {
+              "key": "input",
+              "value": "Input"
+            },
+            {
+              "key": "stepper",
+              "value": "Stepper"
+            },
+            {
+              "key": "slider",
+              "value": "Slider"
+            }
+          ]
+        },
+        {
+          "name": "min",
+          "label": "Min value",
+          "format": "NUMBER",
+          "defaultValue": "0",
+          "required": true,
+          "visibility": "(displayAs = slider)"
+        },
+        {
+          "name": "max",
+          "label": "Max value",
+          "format": "NUMBER",
+          "defaultValue": "100",
+          "required": true,
+          "visibility": "(displayAs = slider)"
+        },
+        {
+          "name": "defaultValue",
+          "label": "Default value",
+          "format": "NUMBER",
+          "visibility": "(displayAs = slider)"
+        },
+        {
+          "name": "step",
+          "label": "Increment",
+          "format": "NUMBER",
+          "defaultValue": "1",
+          "min": 1,
+          "visibility": "(displayAs = slider)"
+        },
+        {
+          "name": "placeholder",
+          "label": "Placeholder",
+          "format": "TEXT",
+          "visibility": "(!displayAs = slider && !displayAs = stepper)"
+        },
+        {
+          "name": "helperText",
+          "label": "Helper text",
+          "format": "TEXT"
+        },
+        {
+          "name": "showInput",
+          "label": "Show numeric input",
+          "format": "BOOLEAN",
+          "defaultValue": true,
+          "visibility": "(displayAs = slider)"
+        },
+        {
+          "name": "showTicks",
+          "label": "Show ticks",
+          "format": "BOOLEAN",
+          "defaultValue": true,
+          "visibility": "(displayAs = slider)"
+        }
+      ]
+    },
+    {
+      "label": "Read-only settings",
+      "format": "GROUP",
+      "properties": [
+        {
+          "format": "SELECT",
+          "name": "formatter",
+          "label": "Format",
+          "defaultValue": "defaultInteger",
+          "source": [
+            {
+              "key": "defaultInteger",
+              "value": "Default"
+            },
+            {
+              "key": "Decimal",
+              "value": "Decimal"
+            },
+            {
+              "key": "Currency",
+              "value": "Currency"
+            },
+            {
+              "key": "Percentage",
+              "value": "Percentage"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "format": "CASCADE",
+      "visibility": "(formatter = Currency)",
+      "source": {
+        "format": "SELECT",
+        "label": "ISO Code Selection",
+        "name": "isoCodeSelection",
+        "defaultValue": "constant",
+        "source": [
+          {
+            "key": "constant",
+            "value": "Constant"
+          },
+          {
+            "key": "propertyRef",
+            "value": "Property Reference"
+          }
+        ]
+      },
+      "cascadeElements": [
+        {
+          "key": "currencyISOCode",
+          "format": "TEXT",
+          "name": "currencyISOCode",
+          "label": "Currency ISO Code",
+          "defaultValue": "USD",
+          "match": "constant"
+        },
+        {
+          "key": "currencyISOCode",
+          "format": "PROPERTY",
+          "name": "currencyISOCode",
+          "label": "Currency ISO Code",
+          "match": "propertyRef"
+        }
+      ]
+    },
+    {
+      "format": "SELECT",
+      "name": "currencyDisplay",
+      "label": "Currency display",
+      "visibility": "(formatter = Currency)",
+      "defaultValue": "symbol",
+      "source": [
+        {
+          "key": "symbol",
+          "value": "Auto"
+        },
+        {
+          "key": "code",
+          "value": "Code"
+        },
+        {
+          "key": "name",
+          "value": "Name"
+        }
+      ]
+    },
+    {
+      "format": "SELECT",
+      "name": "negative",
+      "label": "Negative number display",
+      "visibility": "(formatter = Currency)",
+      "defaultValue": "minus-sign",
+      "source": [
+        {
+          "key": "minus-sign",
+          "value": "Standard"
+        },
+        {
+          "key": "parentheses",
+          "value": "Accounting"
+        }
+      ]
+    },
+    {
+      "format": "SELECT",
+      "name": "notation",
+      "label": "Notation",
+      "visibility": "(!negative = parentheses)&&(!formatter = Percentage)",
+      "defaultValue": "standard",
+      "source": [
+        {
+          "key": "standard",
+          "value": "Standard"
+        },
+        {
+          "key": "compact",
+          "value": "Compact"
+        }
+      ]
+    },
+    {
+      "name": "decimalPrecision",
+      "label": "Decimal places",
+      "format": "NUMBER",
+      "visibility": "(formatter = Decimal)||(formatter = Percentage)",
+      "min": 0,
+      "max": 20
+    },
+    {
+      "format": "SELECT",
+      "name": "currencyDecimalPrecision",
+      "label": "Decimal places shown",
+      "visibility": "(formatter = Currency)",
+      "defaultValue": "auto",
+      "source": [
+        {
+          "key": "auto",
+          "value": "Auto"
+        },
+        {
+          "key": "0",
+          "value": "None"
+        },
+        {
+          "key": "1",
+          "value": "1"
+        },
+        {
+          "key": "2",
+          "value": "2"
+        },
+        {
+          "key": "3",
+          "value": "3"
+        },
+        {
+          "key": "4",
+          "value": "4"
+        }
+      ]
+    },
+    {
+      "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/components/createAll/Constellation/Pega_DXIL_MyInteger/demo.stories.jsx

@@ -0,0 +1,61 @@
+/* eslint-disable storybook/prefer-pascal-case */
+/* eslint-disable react/jsx-no-useless-fragment */
+import { withKnobs } from '@storybook/addon-knobs';
+
+import { stateProps, configProps, fieldMetadata } from './mock';
+import PegaDxilMyInteger from './index.jsx';
+
+export default {
+  title: 'PegaDxilMyInteger',
+  decorators: [withKnobs],
+  component: PegaDxilMyInteger
+};
+
+export const BasePegaDxilMyInteger = () => {
+  const props = {
+    value: configProps.value,
+    placeholder: configProps.placeholder,
+    label: configProps.label,
+    helperText: configProps.helperText,
+    showGroupSeparators: configProps.showGroupSeparators,
+    hasSuggestions: configProps.hasSuggestions,
+    testId: configProps.testId,
+    fieldMetadata,
+
+    getPConnect: () => {
+      return {
+        getStateProps: () => {
+          return stateProps;
+        },
+        getActionsApi: () => {
+          return {
+            updateFieldValue: () => {
+              /* nothing */
+            },
+            triggerFieldChange: () => {
+              /* nothing */
+            }
+          };
+        },
+        ignoreSuggestion: () => {
+          /* nothing */
+        },
+        acceptSuggestion: () => {
+          /* nothing */
+        },
+        setInheritedProps: () => {
+          /* nothing */
+        },
+        resolveConfigProps: () => {
+          /* nothing */
+        }
+      };
+    }
+  };
+
+  return (
+    <>
+      <PegaDxilMyInteger {...props} />
+    </>
+  );
+};

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyInteger/event-utils.js

@@ -0,0 +1,18 @@
+const handleEvent = (actions, eventType, propName, value) => {
+  switch (eventType) {
+    case "change":
+      actions.updateFieldValue(propName, value);
+      break;
+    case "blur":
+      actions.triggerFieldChange(propName, value);
+      break;
+    case "changeNblur":
+      actions.updateFieldValue(propName, value);
+      actions.triggerFieldChange(propName, value);
+      break;
+    default:
+      break;
+  }
+};
+
+export default handleEvent;