@pega/dx-component-builder-sdk 0.23.18 → 0.23.19

package/README.md

@@ -2,13 +2,13 @@
 
 ## Overview
 
-This project provides you with an environment to extend SDK-R by giving you tools to create and publish custom components that are not available from the SDK-R release.
+This project provides you with an environment to extend SDK-R/SDK-A by giving you tools to create and publish custom components that are not available from the SDK-R/SDK-A release.
 
 ## Prerequisites
 
 Ensure you have access to the following in your system:
 
-- Pega Infinity Server version 8.8 or later
+- Pega Infinity Server version 23
 
 - Git version 2.30 or later
 
@@ -16,7 +16,7 @@ Ensure you have access to the following in your system:
 
 - System npm version 8
 
-- Installed SDK-R, as the below commands live in the package.json of the SDK-R an NOT in this npm module
+- Installed SDK-R or SDK-A, as the below commands live in the package.json of the SDK-R/SDK-A an NOT in this npm module
 
 
 ## Create custom components
@@ -79,7 +79,7 @@ The *config.json* file contains the mapping of properties for configuring the au
 
 
 2. Enter the following command to start the storybook to view the demo.
-   `npm start`
+   `npm run startStorybook (Angular) npm run storybookSDK (React) or npm run storybookConstellation (React)`
 
 3. Modify the source files to build your own component. You can also install and import third-party libraries if required for your component.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/dx-component-builder-sdk",
-  "version": "0.23.18",
+  "version": "0.23.19",
   "description": "Utility for building custom UI components",
   "bin": "./bin/index.js",
   "scripts": {

package/src/tasks/create/templates/SDK-React/field/Decimal-Percentage/demo.stories.tsx.mustache

@@ -10,6 +10,20 @@ const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
   excludeStories: /.*Data$/
 };
 
+window.PCore = {
+  ...window.PCore,
+  getEnvironmentInfo: (): any => {
+    return {
+      getUseLocale: () => {
+        return 'en-GB';
+      },
+      getLocale: () => {
+        return 'en-GB';
+      }
+    };
+  }
+};
+
 export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
@@ -22,10 +36,16 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
     fieldMetadata,
     getPConnect: () => {
       return {
+        getComponentName: () => {
+          return 'Percentage';
+        },
         getActionsApi: () => {
           return {
             updateFieldValue: (propName, theValue) => {
               setValue(theValue);
+            },
+            triggerFieldChange: (propName, theValue) => {
+              setValue(theValue);
             }
           };
         },

package/src/tasks/create/templates/SDK-React/widget/PAGE-CASE/demo.stories.tsx.mustache

@@ -11,6 +11,13 @@ window.PCore = {
         return new Promise(resolve => {
           resolve(operatorDetails);
         });
+      },
+    };
+  },
+  getLocaleUtils: (): any => {
+    return {
+      getLocaleValue: val => {
+        return val;
       }
     };
   }

package/src/tasks/map/map.js

@@ -288,7 +288,7 @@ export const deleteFromComponentMap = async (componentKey, category = CATEGORY_C
 
 
       let importFullAng = "import { ".concat(componentComponentNameAng).concat(" } from '").concat(importComponentAng).concat(".component';");
-      let mapFullAng = "\"".concat(getSpecialCalse(originalComponentName, framework)).concat("\" : " ).concat(componentComponentNameAng).concat(",");
+      let mapFullAng = "\"".concat(getSpecialCase(originalComponentName, framework)).concat("\" : " ).concat(componentComponentNameAng).concat(",");
 
       let mapFullAngPretty = getSpecialCase(originalComponentName, framework).concat(": ").concat(componentComponentNameAng);
 

package/tests/assets/sdk-r/components/create/override-sdk/field/Currency/Currency.tsx

@@ -6,7 +6,9 @@ import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event
 import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
 import { getCurrencyCharacters, getCurrencyOptions } from './currency-utils';
 
-// Using control from: https://github.com/unicef/material-ui-currency-textfield
+/* Using @unicef/material-ui-currency-textfield component here, since it allows formatting decimal values,
+as per the locale.
+*/
 
 interface CurrrencyProps extends PConnFieldProps {
   // If any, enter additional props that only exist on Currency here

package/tests/assets/sdk-r/components/create/override-sdk/field/DateTime/config-ext.json

@@ -1,9 +1,9 @@
 {
-  "componentKey": "DateTime",
-  "name": "DateTime",
-  "label": "Date & time",
-  "description": "Date & time",
-  "type": "Field",
-  "subtype": "DateTime",
-  "properties": []
-}
+    "componentKey": "DateTime",
+    "name": "DateTime",
+    "label": "Date & time",
+    "description": "Date & time",
+    "type": "Field",
+    "subtype": "DateTime",
+    "properties": []
+}

package/tests/assets/sdk-r/components/create/override-sdk/field/Decimal/Decimal.tsx

@@ -6,7 +6,9 @@ import { format } from '@pega/react-sdk-components/lib/components/helpers/format
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
-// Using control from: https://github.com/unicef/material-ui-currency-textfield
+/* Using @unicef/material-ui-currency-textfield component here, since it allows formatting decimal values,
+as per the locale.
+*/
 
 interface DecimalProps extends PConnFieldProps {
   // If any, enter additional props that only exist on Decimal here

package/tests/assets/sdk-r/components/create/override-sdk/field/Decimal/config-ext.json

@@ -1,9 +1,9 @@
 {
-  "componentKey": "Decimal",
-  "name": "Decimal",
-  "label": "Decimal",
-  "description": "Decimal",
-  "type": "Field",
-  "subtype": "Decimal",
-  "properties": []
-}
+    "componentKey": "Decimal",
+    "name": "Decimal",
+    "label": "Decimal",
+    "description": "Decimal",
+    "type": "Field",
+    "subtype": "Decimal",
+    "properties": []
+}

package/tests/assets/sdk-r/components/create/override-sdk/field/Dropdown/config-ext.json

@@ -1,9 +1,9 @@
 {
-  "componentKey": "Dropdown",
-  "name": "Dropdown",
-  "label": "Dropdown",
-  "description": "Picklist",
-  "type": "Field",
-  "subtype": "Picklist",
-  "properties": []
-}
+    "componentKey": "Dropdown",
+    "name": "Dropdown",
+    "label": "Dropdown",
+    "description": "Picklist",
+    "type": "Field",
+    "subtype": "Picklist",
+    "properties": []
+}

package/tests/assets/sdk-r/components/create/override-sdk/field/Email/config-ext.json

@@ -1,9 +1,9 @@
 {
-  "componentKey": "Email",
-  "name": "Email",
-  "label": "Email",
-  "description": "Email",
-  "type": "Field",
-  "subtype": "Text-Email",
-  "properties": []
-}
+    "componentKey": "Email",
+    "name": "Email",
+    "label": "Email",
+    "description": "Email",
+    "type": "Field",
+    "subtype": "Text-Email",
+    "properties": []
+}

package/tests/assets/sdk-r/components/create/override-sdk/field/Group/config-ext.json

@@ -1,8 +1,8 @@
 {
-  "componentKey": "Group",
-  "name": "Group",
-  "label": "Field Group",
-  "description": "Field Group",
-  "type": "Group",
-  "properties": []
-}
+    "componentKey": "Group",
+    "name": "Group",
+    "label": "Field Group",
+    "description": "Field Group",
+    "type": "Group",
+    "properties": []
+}

package/tests/assets/sdk-r/components/create/override-sdk/field/Integer/config-ext.json

@@ -1,9 +1,9 @@
 {
-  "componentKey": "Integer",
-  "name": "Integer",
-  "label": "Integer",
-  "description": "Integer",
-  "type": "Field",
-  "subtype": "Integer",
-  "properties": []
-}
+    "componentKey": "Integer",
+    "name": "Integer",
+    "label": "Integer",
+    "description": "Integer",
+    "type": "Field",
+    "subtype": "Integer",
+    "properties": []
+}

package/tests/assets/sdk-r/components/create/override-sdk/field/Percentage/Percentage.tsx

@@ -6,6 +6,9 @@ import { getCurrencyCharacters, getCurrencyOptions } from '@pega/react-sdk-compo
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
 
+/* Using @unicef/material-ui-currency-textfield component here, since it allows formatting decimal values,
+as per the locale.
+*/
 interface PercentageProps extends PConnFieldProps {
   // If any, enter additional props that only exist on Percentage here
   currencyISOCode?: string;

package/tests/assets/sdk-r/components/create/override-sdk/field/Percentage/config-ext.json

@@ -1,9 +1,9 @@
 {
-  "componentKey": "Percentage",
-  "name": "Percentage",
-  "label": "Percentage",
-  "description": "Percentage",
-  "type": "Field",
-  "subtype": "Decimal-Percentage",
-  "properties": []
-}
+    "componentKey": "Percentage",
+    "name": "Percentage",
+    "label": "Percentage",
+    "description": "Percentage",
+    "type": "Field",
+    "subtype": "Decimal-Percentage",
+    "properties": []
+}

package/tests/assets/sdk-r/components/create/override-sdk/field/RadioButtons/config-ext.json

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

package/tests/assets/sdk-r/components/create/override-sdk/field/SemanticLink/config-ext.json

@@ -1,9 +1,9 @@
 {
-  "label": "SemanticLink",
-  "componentKey": "SemanticLink",
-  "name": "SemanticLink",
-  "description": "SemanticLink",
-  "type": "Field",
-  "subtype": "ACTION",
-  "properties": []
-}
+    "label": "SemanticLink",
+    "componentKey": "SemanticLink",
+    "name": "SemanticLink",
+    "description": "SemanticLink",
+    "type": "Field",
+    "subtype": "ACTION",
+    "properties": []
+}

package/tests/assets/sdk-r/components/create/override-sdk/field/TextArea/config-ext.json

@@ -1,9 +1,9 @@
 {
-  "componentKey": "TextArea",
-  "name": "TextArea",
-  "label": "Text area",
-  "description": "Text (paragraph)",
-  "type": "Field",
-  "subtype": "Text-Paragraph",
-  "properties": []
-}
+    "componentKey": "TextArea",
+    "name": "TextArea",
+    "label": "Text area",
+    "description": "Text (paragraph)",
+    "type": "Field",
+    "subtype": "Text-Paragraph",
+    "properties": []
+}

package/tests/assets/sdk-r/components/create/override-sdk/field/TextContent/config-ext.json

@@ -1,9 +1,9 @@
 {
-  "label": "TextContent",
-  "componentKey": "TextContent",
-  "name": "TextContent",
-  "description": "Text",
-  "type": "Field",
-  "subtype": "DATA_CAPTURE",
-  "properties": []
-}
+    "label": "TextContent",
+    "componentKey": "TextContent",
+    "name": "TextContent",
+    "description": "Text",
+    "type": "Field",
+    "subtype": "DATA_CAPTURE",
+    "properties": []
+}

package/tests/assets/sdk-r/components/create/override-sdk/field/TextInput/config-ext.json

@@ -1,9 +1,9 @@
 {
-  "componentKey": "TextInput",
-  "name": "TextInput",
-  "label": "Text input",
-  "description": "Text (single line)",
-  "type": "Field",
-  "subtype": "Text",
-  "properties": []
-}
+    "componentKey": "TextInput",
+    "name": "TextInput",
+    "label": "Text input",
+    "description": "Text (single line)",
+    "type": "Field",
+    "subtype": "Text",
+    "properties": []
+}

package/tests/assets/sdk-r/components/create/override-sdk/field/Time/config-ext.json

@@ -1,9 +1,9 @@
 {
-  "componentKey": "Time",
-  "name": "Time",
-  "label": "Time only",
-  "description": "Time only",
-  "type": "Field",
-  "subtype": "TimeOfDay",
-  "properties": []
-}
+    "componentKey": "Time",
+    "name": "Time",
+    "label": "Time only",
+    "description": "Time only",
+    "type": "Field",
+    "subtype": "TimeOfDay",
+    "properties": []
+}

package/tests/assets/sdk-r/components/create/override-sdk/field/URL/config-ext.json

@@ -1,9 +1,9 @@
 {
-  "componentKey": "URL",
-  "name": "URL",
-  "label": "URL",
-  "description": "URL",
-  "type": "Field",
-  "subtype": "Text-URL",
-  "properties": []
-}
+    "componentKey": "URL",
+    "name": "URL",
+    "label": "URL",
+    "description": "URL",
+    "type": "Field",
+    "subtype": "Text-URL",
+    "properties": []
+}

package/tests/assets/sdk-r/components/create/override-sdk/field/UserReference/config-ext.json

@@ -1,9 +1,9 @@
 {
-  "label": "UserReference",
-  "componentKey": "UserReference",
-  "name": "UserReference",
-  "description": "User reference",
-  "type": "Field",
-  "subtype": "DATA_CAPTURE",
-  "properties": []
-}
+    "label": "UserReference",
+    "componentKey": "UserReference",
+    "name": "UserReference",
+    "description": "User reference",
+    "type": "Field",
+    "subtype": "DATA_CAPTURE",
+    "properties": []
+}

package/tests/assets/sdk-r/components/create/override-sdk/template/CaseSummary/config-ext.json

@@ -1,9 +1,9 @@
 {
-  "componentKey": "CaseSummary",
-  "name": "CaseSummary",
-  "label": "Summary data",
-  "description": "Case summary template",
-  "type": "Template",
-  "subtype": "SUMMARY",
-  "properties": []
-}
+    "componentKey": "CaseSummary",
+    "name": "CaseSummary",
+    "label": "Summary data",
+    "description": "Case summary template",
+    "type": "Template",
+    "subtype": "SUMMARY",
+    "properties": []
+}

package/tests/assets/sdk-r/components/create/override-sdk/template/CaseView/config-ext.json

@@ -1,9 +1,9 @@
 {
-  "componentKey": "CaseView",
-  "name": "CaseView",
-  "label": "Object page",
-  "description": "Standard case page",
-  "type": "Template",
-  "subtype": "CASEVIEW",
-  "properties": []
-}
+    "componentKey": "CaseView",
+    "name": "CaseView",
+    "label": "Object page",
+    "description": "Standard case page",
+    "type": "Template",
+    "subtype": "CASEVIEW",
+    "properties": []
+}

package/tests/assets/sdk-r/components/create/override-sdk/template/Confirmation/config-ext.json

@@ -1,12 +1,12 @@
 {
-  "componentKey": "Confirmation",
-  "name": "Confirmation",
-  "label": "Confirmation",
-  "description": "Confirmation template",
-  "type": "Template",
-  "subtype": "CASE",
-  "icon": "confirm-view.svg",
-  "hideTemplateEdit": true,
-  "hideViewName": true,
-  "properties": []
-}
+    "componentKey": "Confirmation",
+    "name": "Confirmation",
+    "label": "Confirmation",
+    "description": "Confirmation template",
+    "type": "Template",
+    "subtype": "CASE",
+    "icon": "confirm-view.svg",
+    "hideTemplateEdit": true,
+    "hideViewName": true,
+    "properties": []
+}

package/tests/assets/sdk-r/components/create/override-sdk/template/DataReference/config-ext.json

@@ -1,10 +1,10 @@
 {
-  "label": "DataReference",
-  "componentKey": "DataReference",
-  "name": "DataReference",
-  "description": "Data Reference Template",
-  "type": "Template",
-  "icon": "DataReference.svg",
-  "subtype": "DATAVIEW",
-  "properties": []
-}
+    "label": "DataReference",
+    "componentKey": "DataReference",
+    "name": "DataReference",
+    "description": "Data Reference Template",
+    "type": "Template",
+    "icon": "DataReference.svg",
+    "subtype": "DATAVIEW",
+    "properties": []
+}

package/tests/assets/sdk-r/components/create/override-sdk/template/DefaultForm/config-ext.json

@@ -1,9 +1,9 @@
 {
-  "componentKey": "DefaultForm",
-  "name": "DefaultForm",
-  "label": "Default form",
-  "description": "DefaultForm Template",
-  "type": "Template",
-  "subtype": "FORM",
-  "properties": []
-}
+    "componentKey": "DefaultForm",
+    "name": "DefaultForm",
+    "label": "Default form",
+    "description": "DefaultForm Template",
+    "type": "Template",
+    "subtype": "FORM",
+    "properties": []
+}

package/tests/assets/sdk-r/components/create/override-sdk/template/DetailsSubTabs/config-ext.json

@@ -1,9 +1,9 @@
 {
-  "componentKey": "DetailsSubTabs",
-  "name": "DetailsSubTabs",
-  "label": "Details (Sub tabs)",
-  "description": "Details (Sub tabs)",
-  "type": "Template",
-  "subtype": "DETAILS",
-  "properties": []
-}
+    "componentKey": "DetailsSubTabs",
+    "name": "DetailsSubTabs",
+    "label": "Details (Sub tabs)",
+    "description": "Details (Sub tabs)",
+    "type": "Template",
+    "subtype": "DETAILS",
+    "properties": []
+}

package/tests/assets/sdk-r/components/create/override-sdk/template/DetailsThreeColumn/config-ext.json

@@ -1,9 +1,9 @@
 {
-  "componentKey": "DetailsThreeColumn",
-  "name": "DetailsThreeColumn",
-  "label": "Details (Three column)",
-  "description": "Details (Three column)",
-  "type": "Template",
-  "subtype": "DETAILS",
-  "properties": []
-}
+    "componentKey": "DetailsThreeColumn",
+    "name": "DetailsThreeColumn",
+    "label": "Details (Three column)",
+    "description": "Details (Three column)",
+    "type": "Template",
+    "subtype": "DETAILS",
+    "properties": []
+}

package/tests/assets/sdk-r/components/create/override-sdk/template/DetailsTwoColumn/config-ext.json

@@ -1,9 +1,9 @@
 {
-  "componentKey": "DetailsTwoColumn",
-  "name": "DetailsTwoColumn",
-  "label": "Details (Two column)",
-  "description": "Details (Two column)",
-  "type": "Template",
-  "subtype": "DETAILS",
-  "properties": []
-}
+    "componentKey": "DetailsTwoColumn",
+    "name": "DetailsTwoColumn",
+    "label": "Details (Two column)",
+    "description": "Details (Two column)",
+    "type": "Template",
+    "subtype": "DETAILS",
+    "properties": []
+}

package/tests/assets/sdk-r/components/create/override-sdk/template/ListPage/config-ext.json

@@ -1,8 +1,8 @@
 {
-  "componentKey": "ListPage",
-  "name": "ListPage",
-  "type": "Template",
-  "subtype": "PAGE",
-  "label": "List page",
-  "properties": []
-}
+    "componentKey": "ListPage",
+    "name": "ListPage",
+    "type": "Template",
+    "subtype": "PAGE",
+    "label": "List page",
+    "properties": []
+}

package/tests/assets/sdk-r/components/create/override-sdk/template/ListView/ListView.tsx

@@ -154,7 +154,8 @@ export default function ListView(props: ListViewProps) {
       paper: {
         width: '100%',
         marginTop: theme.spacing(2),
-        marginBottom: theme.spacing(2)
+        marginBottom: theme.spacing(2),
+        display: 'grid'
       },
       search: {
         padding: '5px 5px'

package/tests/assets/sdk-r/components/create/override-sdk/template/ListView/config-ext.json

@@ -1,9 +1,9 @@
 {
-  "componentKey": "ListView",
-  "name": "ListView",
-  "label": "Table",
-  "description": "Table Template",
-  "type": "Template",
-  "subtype": "LIST",
-  "properties": []
-}
+    "componentKey": "ListView",
+    "name": "ListView",
+    "label": "Table",
+    "description": "Table Template",
+    "type": "Template",
+    "subtype": "LIST",
+    "properties": []
+}