@pega/custom-dx-components 0.23.1 → 0.23.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/custom-dx-components",
-  "version": "0.23.1",
+  "version": "0.23.3",
   "description": "Utility for building custom UI components",
   "bin": "./bin/index.js",
   "scripts": {
@@ -33,6 +33,7 @@
     "gitignore": "^0.7.0",
     "inquirer": "^9.1.1",
     "listr": "^0.14.3",
+    "lodash": "^4.17.21",
     "mini-css-extract-plugin": "2.6.1",
     "mustache": "^4.2.0",
     "ncp": "^2.0.0",

package/src/constants.js

@@ -7,6 +7,7 @@ export const TOKEN_PATH = 'node_modules/@pega/custom-dx-components/.access_token
 export const SERVICE_TOKEN_PATH = 'node_modules/@pega/custom-dx-components/.service_token';
 export const OOTB_COMPONENTS = 'node_modules/@pega/custom-dx-components/.ootb_components';
 export const AI_PROMPT_FILENAME = 'aiPrompt.txt.mustache';
+export const AI_DAVINCI_PROMPT_FILENAME = 'aiPromptDavinci.txt.mustache';
 
 /* REST end points */
 export const PUBLISH_COMPONENT_SERVICE_REST_ENDPOINT = 'PRRestService/dev/v1/publish_component';
@@ -14,6 +15,8 @@ export const LIST_COMPONENT_SERVICE_REST_ENDPOINT = 'PRRestService/dev/v1/list_c
 export const OOTB_COMPONENT_SERVICE_REST_ENDPOINT = 'PRRestService/dev/v1/ootb_component';
 export const DELETE_COMPONENT_SERVICE_REST_ENDPOINT = 'PRRestService/dev/v1/delete_component';
 export const BOOTSTRAP_SERVICE_REST_ENDPOINT = "PRRestService/application/v2/data_views/D_pxBootstrapConfig";
+export const DXCOMPGENAI_SERVICE_REST_ENDPOINT = "PRRestService/application/v2/data_views/D_DXCompAIGenList";
+
 export const SERVICES_AI_REST_ENDPOINT = 'generativeai';
 export const INF_TOKEN_URL_V1 = 'PRRestService/oauth2/v1/token';
 export const INF_AUTHORIZE_URL_V1 = 'PRRestService/oauth2/v1/authorize';

package/src/tasks/create/templates/Constellation/Field/Boolean/config.json.mustache

@@ -7,6 +7,7 @@
   "library": "{{LIBRARY}}",
   "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
+  "compName" : "{{COMPONENT_CLASS_NAME}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},
   "icon": "images/pz-checkbox-active.svg",

package/src/tasks/create/templates/Constellation/Field/Date/config.json.mustache

@@ -7,6 +7,7 @@
   "library": "{{LIBRARY}}",
   "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
+  "compName" : "{{COMPONENT_CLASS_NAME}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},
   "icon": "images/pz-date-time-active.svg",

package/src/tasks/create/templates/Constellation/Field/DateTime/config.json.mustache

@@ -7,6 +7,7 @@
   "library": "{{LIBRARY}}",
   "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
+  "compName" : "{{COMPONENT_CLASS_NAME}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},
   "icon": "images/pz-text-input-active.svg",

package/src/tasks/create/templates/Constellation/Field/Decimal/config.json.mustache

@@ -7,6 +7,7 @@
   "library": "{{LIBRARY}}",
   "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
+  "compName" : "{{COMPONENT_CLASS_NAME}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},
   "icon": "images/pz-decimal-active.svg",

package/src/tasks/create/templates/Constellation/Field/Decimal-Currency/config.json.mustache

@@ -7,6 +7,7 @@
   "library": "{{LIBRARY}}",
   "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
+  "compName" : "{{COMPONENT_CLASS_NAME}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},
   "icon": "images/pz-currency-active.svg",

package/src/tasks/create/templates/Constellation/Field/Decimal-Percentage/config.json.mustache

@@ -7,6 +7,7 @@
   "library": "{{LIBRARY}}",
   "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
+  "compName" : "{{COMPONENT_CLASS_NAME}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},
   "icon": "images/pz-text-input-active.svg",

package/src/tasks/create/templates/Constellation/Field/Integer/config.json.mustache

@@ -7,6 +7,7 @@
   "library": "{{LIBRARY}}",
   "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
+  "compName" : "{{COMPONENT_CLASS_NAME}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},
   {{#IS_TEMPLATE}}

package/src/tasks/create/templates/Constellation/Field/Picklist/config.json.mustache

@@ -7,6 +7,7 @@
   "library": "{{LIBRARY}}",
   "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
+  "compName" : "{{COMPONENT_CLASS_NAME}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},
   "icon": "images/pz-dropdown-active.svg",

package/src/tasks/create/templates/Constellation/Field/Text/config.json.mustache

@@ -7,6 +7,7 @@
   "library": "{{LIBRARY}}",
   "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
+  "compName" : "{{COMPONENT_CLASS_NAME}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},
   {{#IS_TEMPLATE}}

package/src/tasks/create/templates/Constellation/Field/Text-Email/config.json.mustache

@@ -7,6 +7,7 @@
   "library": "{{LIBRARY}}",
   "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
+  "compName" : "{{COMPONENT_CLASS_NAME}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},
   "icon": "images/pz-email-active.svg",

package/src/tasks/create/templates/Constellation/Field/Text-Input/config.json.mustache

@@ -7,6 +7,7 @@
   "library": "{{LIBRARY}}",
   "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
+  "compName" : "{{COMPONENT_CLASS_NAME}}",
   "type": "{{TYPE}}",
   "subtype": "Text",
   "icon": "images/pz-text-input-active.svg",

package/src/tasks/create/templates/Constellation/Field/Text-Paragraph/config.json.mustache

@@ -7,6 +7,7 @@
   "library": "{{LIBRARY}}",
   "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
+  "compName" : "{{COMPONENT_CLASS_NAME}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},
   "icon": "images/pz-text-area-active.svg",

package/src/tasks/create/templates/Constellation/Field/Text-Phone/config.json.mustache

@@ -7,6 +7,7 @@
   "library": "{{LIBRARY}}",
   "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
+  "compName" : "{{COMPONENT_CLASS_NAME}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},
   "icon": "images/pz-phone-active.svg",

package/src/tasks/create/templates/Constellation/Field/Text-URL/config.json.mustache

@@ -7,6 +7,7 @@
   "library": "{{LIBRARY}}",
   "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
+  "compName" : "{{COMPONENT_CLASS_NAME}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},
   "icon": "images/pz-url-active.svg",

package/src/tasks/create/templates/Constellation/Field/TimeOfDay/config.json.mustache

@@ -7,6 +7,7 @@
   "library": "{{LIBRARY}}",
   "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
+  "compName" : "{{COMPONENT_CLASS_NAME}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},
   "icon": "images/pz-date-time-active.svg",

package/src/tasks/create/templates/Constellation/Template/DETAILS/config.json.mustache

@@ -7,6 +7,7 @@
   "library": "{{LIBRARY}}",
   "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
+  "compName" : "{{COMPONENT_CLASS_NAME}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},
   "icon": "OneColumnDetails.svg",

package/src/tasks/create/templates/Constellation/Template/DETAILS-region/config.json.mustache

@@ -7,6 +7,7 @@
   "library": "{{LIBRARY}}",
   "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
+  "compName" : "{{COMPONENT_CLASS_NAME}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},
   "icon": "TwoColumnDetails.svg",

package/src/tasks/create/templates/Constellation/Template/FORM/config.json.mustache

@@ -7,6 +7,7 @@
   "library": "{{LIBRARY}}",
   "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
+  "compName" : "{{COMPONENT_CLASS_NAME}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},
   "icon": "DefaultForm.svg",

package/src/tasks/create/templates/Constellation/Template/FORM-region/config.json.mustache

@@ -7,6 +7,7 @@
   "library": "{{LIBRARY}}",
   "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
+  "compName" : "{{COMPONENT_CLASS_NAME}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},
   "icon": "TwoColumn.svg",

package/src/tasks/create/templates/Constellation/Template/PAGE/config.json.mustache

@@ -7,6 +7,7 @@
   "library": "{{LIBRARY}}",
   "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
+  "compName" : "{{COMPONENT_CLASS_NAME}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},
   "icon": "OneColumnPage.svg",

package/src/tasks/create/templates/Constellation/Widget/CASE/config.json.mustache

@@ -7,6 +7,7 @@
   "library": "{{LIBRARY}}",
   "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
+  "compName" : "{{COMPONENT_CLASS_NAME}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},
   "icon": "OneColumnPage.svg",

package/src/tasks/create/templates/Constellation/Widget/PAGE/config.json.mustache

@@ -7,6 +7,7 @@
   "library": "{{LIBRARY}}",
   "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
+  "compName" : "{{COMPONENT_CLASS_NAME}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},
   "icon": "OneColumnPage.svg",

package/src/tasks/create/templates/Constellation/Widget/PAGE-CASE/config.json.mustache

@@ -7,6 +7,7 @@
   "library": "{{LIBRARY}}",
   "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
+  "compName" : "{{COMPONENT_CLASS_NAME}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},
   "icon": "OneColumnPage.svg",

package/src/tasks/generate-ai/aiPrompt.txt.mustache

@@ -1,121 +1,23 @@
-Your task is to generate a custom DX component based on the Pega Constellation architecture. A custom DX component is a React functional component that uses hooks.  Create the first iteration of this component using the code template below, delimited by the second set of triple backticks.
+You are a Pega Digital Experience (DX) Component and React expert who only produces sample code with no additional narrative.  A Pega React DX Component is a functional component that uses hooks, PropTypes and StyledComponents.
 
-Replace MyOrg, MyLib and MyComponent with the text specified in InputProperties called organization, library and name respectively that is provided in the in the json properties array delimited by the fourth set of triple backticks. Be aware that MyComponent should be derived from the last part of the componentKey text that is delimited by a '_'. Based on the example component definition delimited by the third set of three backticks, replace the component props and PropTypes with the properties defined in the properties json array delimited by the fourth set of backticks.
 
-DesignSystemComponents is an array of jsx React components.  Replace the DesignSystemComponents import with the comma delimited list of imported components from '@pega/cosmos-react-core' with the text specified in DesignSystemComponents, delimited by the first set of triple backticks.  Also add in the jsx components in the render function.
+Very important: The name of the component comes from component definition compName.
 
-{{COMPONENT_ADDITIONAL}}
+Very important: The type of component to be created comes from component definition subtype.
+
+Very important:  A DX component has all of it's data passed in via a single object that must always be called props.  The object properties are then destructured in the component.  There is always a function passed in called getPConnect() that is required.  All event handlers are created in the same component and not passed in via the props object.  Apart from getPConnect() all of the object properties are defined in an array called properties in a file called config.json (a.k.a the component definition).
 
-DesignSystemComponents:
-```{{COMPONENT_DSC}}```
 
-Template:
-```
-import PropTypes from 'prop-types';
-import { DesignSystemComponents } from '@pega/cosmos-react-core';
-import StyledMyOrgMyLibMyComponentWrapper from './styles';
+Presentation components are imported from the Constellation Design System from the packages @pega/cosmos-react-core, @pega/cosmos-react-work, @pega/cosmos-react-social.
 
-export default function MyOrgMyLibMyComponent(props) {
-	const { getPConnect, visibility, disabled, required, aNumber, aString, aBoolean } = props;
+{{COMPONENT_ADDITIONAL}}
+
+Build a component defined by subtype in component definition.
 
-	const pConn = getPConnect();
+Should use the following design system components
 
-	return (
-		<StyledMyOrgMyLibMyPageWidgetWrapper>
-			<DesignSystemComponent
-				input1 = {aNumber}
-				input2 = {aString}
-				input3 = {aBoolean}
-			/>
-		</StyledMyOrgMyLibMyPageWidgetWrapper>
-	);
-}
+DesignSystemComponents:
+{{COMPONENT_DSC}}
 
-MyOrgMyLibMyComponent.defaultProps = {
-	aString: '',
-	aNumber: 0,
-	aBoolean: false,
-	visibility: true,
-	disabled: false,
-	required: false
-}
-MyOrgMyLibMyComponent.propTypes = {
-	aString: PropTypes.string,
-	aNumber: PropTypes.number,
-	aBoolean: PropTypes.bool,
-	visibility: PropTypes.string.bool,
-	disabled: PropTypes.string.bool,
-	required: PropTypes.string.bool,
-	getPConnect: PropTypes.func.isRequired
-}
-```
-ExampleComponentDefinition:
-```
-{
-  "name": "MyOrg_MyLib_MyComponent",
-  "label": "My Component",
-  "description": "My Component",
-  "organization": "MyOrg",
-  "version": "01.01.01",
-  "library": "MyLib",
-  "allowedApplications": [],
-  "componentKey": "MyOrg_MyLib_MyComponent",
-  "type": "",
-  "subtype": "",
-  "properties": [
-    {
-      "name": "aString",
-      "label": "aString value",
-      "format": "TEXT"
-    },
-    {
-      "name": "aBoolean",
-      "label": "aBoolean value",
-      "format": "BOOLEAN"
-    },
-    {
-      "name": "aNumber",
-      "label": "aNumber value",
-      "format": "NUMBER",
-      "defaultValue": "0"
-    },
-    {
-      "name": "visibility",
-      "label": "Visible",
-      "format": "VISIBILITY"
-    },
-    {
-      "name": "disabled",
-      "label": "Disabled",
-      "format": "DISABLED",
-      "visibility": "(!$this.readOnly = true)"
-    },
-    {
-      "name": "required",
-      "label": "Required",
-      "format": "REQUIRED",
-      "visibility": "(!$this.readOnly = true)"
-    },
-    {
-      "label": "Advanced",
-      "format": "GROUP",
-      "collapsible": true,
-      "properties": [
-        {
-          "name": "testId",
-          "label": "Test ID",
-          "format": "TEXT",
-          "ignorePattern": "[^-_\\p{N}\\p{L}]",
-          "includeAnnotations": false
-        }
-      ]
-    }
-  ],
-  "defaultConfig": {
-  }
-}
-```
-InputProperties:
-```
+Here is the component definition
 {{COMPONENT_CONFIG}}
-```

package/src/tasks/generate-ai/aiPromptDavinci.txt.mustache

@@ -0,0 +1,14 @@
+You are a Pega Digital Experience (DX) Component and React expert who only produces sample code with no additional narrative.  A Pega React DX Component is a functional component that uses hooks, PropTypes and StyledComponents.
+
+
+Very important: The name of the component comes from component definition compName.
+
+Very important:  A DX component has all of it's data passed in via a single object that must always be called props.  The object properties are then destructured in the component.  There is always a function passed in called getPConnect() that is required.  All event handlers are created in the same component and not passed in via the props object.  Apart from getPConnect() all of the object properties are defined in an array called properties in a file called config.json (a.k.a the component definition).
+
+
+Presentation components are imported from the Constellation Design System from the packages @pega/cosmos-react-core, @pega/cosmos-react-work, @pega/cosmos-react-social.
+
+{{COMPONENT_ADDITIONAL}}
+
+Here is the component definition
+{{COMPONENT_CONFIG}}