@pega/custom-dx-components 8.8.17 → 8.8.19

package/src/tasks/init/template/test/assets/components/createAll/Pega_DXIL_MyForm/styles.js

@@ -0,0 +1,14 @@
+// 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/src/tasks/init/template/test/assets/components/createAll/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/src/tasks/init/template/test/assets/components/createAll/Pega_DXIL_MyInteger/demo.stories.jsx

@@ -0,0 +1,49 @@
+import { withKnobs } from '@storybook/addon-knobs';
+
+import { stateProps, configProps, fieldMetadata } from './mock.stories';
+
+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/src/tasks/init/template/test/assets/components/createAll/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;