@pega/dx-component-builder-sdk 23.1.15 → 24.1.11

package/README.md

@@ -8,13 +8,13 @@ This project provides you with an environment to extend SDK-R/SDK-A by giving yo
 
 Ensure you have access to the following in your system:
 
-- Pega Infinity Server version 23
+- Pega Infinity Server version 24.1
 
 - Git version 2.30 or later
 
-- System node version 18
+- System node version 18, 20
 
-- System npm version 8
+- System npm version 8, 10 (npm 9 not supported)
 
 - 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
 

package/package.json

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

package/src/cli.js

@@ -41,7 +41,7 @@ const TASKS = {
   VALIDATE_SCHEMA: 'validateSchema',
   UPDATE: 'update',
   DELETE: 'delete',
-  DELETE_ALL: "deleteAll",
+  DELETE_ALL: 'deleteAll',
   AUTHENTICATE: 'authenticate',
   UPGRADE: 'upgrade',
   SCAN_AND_FIX: 'scanAndFix'

package/src/constants.js

@@ -164,6 +164,10 @@ export const COMPONENT_SCHEMA = {
         name: 'URL',
         value: 'Text-URL'
       },
+      {
+        name: 'Icon Button URL',
+        value: 'Icon-Button-URL'
+      },
       {
         name: 'Integer',
         value: 'Integer'
@@ -755,7 +759,7 @@ export const COMPONENT_SCHEMA = {
         value: 'Time'
       },
       {
-        name: 'URL',
+        name: 'Url',
         value: 'url'
       },
       {
@@ -772,6 +776,10 @@ export const COMPONENT_SCHEMA = {
         name: 'Alert Banner',
         value: 'AlertBanner'
       },
+      {
+        name: 'Banner',
+        value: 'Banner'
+      },
       {
         name: 'Case Create Stage',
         value: 'CaseCreateStage'
@@ -819,6 +827,10 @@ export const COMPONENT_SCHEMA = {
       {
         name: 'Rich Text Editor',
         value: 'RichTextEditor'
+      },
+      {
+        name: 'Wss Quick Create',
+        value: 'WssQuickCreate'
       }
     ],
     infra: [
@@ -834,6 +846,10 @@ export const COMPONENT_SCHEMA = {
         name: 'Assignment Card',
         value: 'AssignmentCard'
       },
+      {
+        name: 'Dashboard Filter',
+        value: 'DashboardFilter'
+      },
       {
         name: 'Defer Load',
         value: 'DeferLoad'
@@ -842,6 +858,18 @@ export const COMPONENT_SCHEMA = {
         name: 'Error Boundary',
         value: 'ErrorBoundary'
       },
+      {
+        name: 'Flow Container',
+        value: 'Containers/FlowContainer'
+      },
+      {
+        name: 'Hybrid View Container',
+        value: 'Containers/HybridViewContainer'
+      },
+      {
+        name: 'Modal View Container',
+        value: 'Containers/ModalViewContainer'
+      },
       {
         name: 'Multi Step',
         value: 'MultiStep'
@@ -850,10 +878,18 @@ export const COMPONENT_SCHEMA = {
         name: 'Nav Bar',
         value: 'Navbar'
       },
+      {
+        name: 'Preview View Container',
+        value: 'Containers/PreviewViewContainer'
+      },
       {
         name: 'Region',
         value: 'Region'
       },
+      {
+        name: 'Root Container',
+        value: 'RootContainer'
+      },
       {
         name: 'Stages',
         value: 'Stages'
@@ -861,13 +897,21 @@ export const COMPONENT_SCHEMA = {
       {
         name: 'View',
         value: 'View'
-      }
+      },
+      {
+        name: 'View Container',
+        value: 'Containers/ViewContainer'
+      },
     ],
     template: [
       {
         name: 'App Shell',
         value: 'AppShell'
       },
+      {
+        name: 'Banner Page',
+        value: 'BannerPage'
+      },
       {
         name: 'Case Summary',
         value: 'CaseSummary'
@@ -916,6 +960,10 @@ export const COMPONENT_SCHEMA = {
         name: 'Details Wide Narrow',
         value: 'DetailsWideNarrow'
       },
+      {
+        name: 'Dynamic Tabs',
+        value: 'DynamicTabs'
+      },
       {
         name: 'Field Group List',
         value: 'FieldGroupList'
@@ -1023,6 +1071,10 @@ export const COMPONENT_SCHEMA = {
       {
         name: 'Wide Narrow Page',
         value: 'WideNarrowPage'
+      },
+      {
+        name: 'Wss Nav Bar',
+        value: 'WssNavBar'
       }
     ],
     widget: [
@@ -1050,6 +1102,10 @@ export const COMPONENT_SCHEMA = {
         name: 'List Utility',
         value: 'ListUtility'
       },
+      {
+        name: 'Quick Create',
+        value: 'QuickCreate'
+      },
       {
         name: 'To Do',
         value: 'Todo'

package/src/tasks/build-all/helper.js

@@ -71,11 +71,17 @@ export const zipComponent = async (componentKey, category = CATEGORY_CUSTOM) =>
   const srcDirectory = await getComponentDirectoryPath(componentKey, category);
   const buildDirectory = await path.join(path.resolve(), 'dist/components', componentKey);
   const configJson = `${srcDirectory}/config.json`;
+  const localizationJson = `${srcDirectory}/localizations.json`;
 
   const zip = new AdmZip();
 
   zip.addLocalFolder(srcDirectory, 'src/');
   zip.addLocalFile(configJson);
+
+  if (fs.existsSync(localizationJson)) {
+    zip.addLocalFile(localizationJson);
+  }
+
   zip.addLocalFolder(buildDirectory);
   const zipContent = zip.toBuffer().toString('base64');
 

package/src/tasks/build-comp/helper.js

@@ -89,11 +89,17 @@ export const zipComponent = async (componentKey, category = CATEGORY_CUSTOM) =>
   const srcDirectory = await getComponentDirectoryPath(componentKey, category);
   const buildDirectory = await path.join(path.resolve(), 'dist/components', componentKey);
   const configJson = `${srcDirectory}/config.json`;
+  const localizationJson = `${srcDirectory}/localizations.json`;
 
   const zip = new AdmZip();
 
   zip.addLocalFolder(srcDirectory, 'src/');
   zip.addLocalFile(configJson);
+
+  if (fs.existsSync(localizationJson)) {
+    zip.addLocalFile(localizationJson);
+  }
+
   zip.addLocalFolder(buildDirectory);
   const zipContent = zip.toBuffer().toString('base64');
 

package/src/tasks/bundle/builderAngular/webpack.config.js

@@ -266,7 +266,7 @@ export default (
             {
               test: /\.(map)$/,    /* latest react-sdk-components needs to ignore compiling .d.ts and .map files */
               loader: 'null-loader',
-            }, 
+            },
             // "file" loader makes sure those assets get served by WebpackDevServer.
             // When you `import` an asset, you get its (virtual) filename.
             // In production, they would get copied to the `build` folder.
@@ -330,6 +330,19 @@ export default (
         contextRegExp: /@pega\\cosmos-react-core\\lib\\components\\Icon$/
       }),
 
+      /* cosmos 6.x and above */
+      /* Ignore cosmos icons */
+      new webpack.IgnorePlugin({
+        resourceRegExp: /^\.\/.*\/.*\.icon$/,
+        contextRegExp: /@pega\/cosmos-react-core\/lib\/components\/Icon$/
+      }),
+
+      /* Ignore cosmos icons - windows */
+      new webpack.IgnorePlugin({
+        resourceRegExp: /^\.\/.*\/.*\.icon$/,
+        contextRegExp: /@pega\\cosmos-react-core\\lib\\components\\Icon$/
+      }),
+
       new webpack.optimize.LimitChunkCountPlugin({
         maxChunks: 1
       }),

package/src/tasks/bundle/builderAssociated/webpack.config.js

@@ -318,6 +318,19 @@ export default (
         contextRegExp: /@pega\\cosmos-react-core\\lib\\components\\Icon$/
       }),
 
+      /* cosmos 6.x and above */
+      /* Ignore cosmos icons */
+      new webpack.IgnorePlugin({
+        resourceRegExp: /^\.\/.*\/.*\.icon$/,
+        contextRegExp: /@pega\/cosmos-react-core\/lib\/components\/Icon$/
+      }),
+
+      /* Ignore cosmos icons - windows */
+      new webpack.IgnorePlugin({
+        resourceRegExp: /^\.\/.*\/.*\.icon$/,
+        contextRegExp: /@pega\\cosmos-react-core\\lib\\components\\Icon$/
+      }),
+
       new webpack.optimize.LimitChunkCountPlugin({
         maxChunks: 1
       }),

package/src/tasks/bundle/builderReact/webpack.config.js

@@ -262,7 +262,7 @@ export default (
             {
               test: /\.(map)$/,    /* latest react-sdk-components needs to ignore compiling .d.ts and .map files */
               loader: 'null-loader',
-            }, 
+            },
             // "file" loader makes sure those assets get served by WebpackDevServer.
             // When you `import` an asset, you get its (virtual) filename.
             // In production, they would get copied to the `build` folder.
@@ -326,6 +326,19 @@ export default (
         contextRegExp: /@pega\\cosmos-react-core\\lib\\components\\Icon$/
       }),
 
+            /* cosmos 6.x and above */
+      /* Ignore cosmos icons */
+      new webpack.IgnorePlugin({
+        resourceRegExp: /^\.\/.*\/.*\.icon$/,
+        contextRegExp: /@pega\/cosmos-react-core\/lib\/components\/Icon$/
+      }),
+
+      /* Ignore cosmos icons - windows */
+      new webpack.IgnorePlugin({
+        resourceRegExp: /^\.\/.*\/.*\.icon$/,
+        contextRegExp: /@pega\\cosmos-react-core\\lib\\components\\Icon$/
+      }),
+
       new webpack.optimize.LimitChunkCountPlugin({
         maxChunks: 1
       }),

package/src/tasks/create/templates/Constellation/field/Boolean/create-nonce.ts.mustache

@@ -0,0 +1,5 @@
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/src/tasks/create/templates/Constellation/field/Boolean/index.tsx.mustache

@@ -3,10 +3,12 @@ import {
   CheckboxGroup,
   FieldValueList,
   Text,
-  withConfiguration
+  withConfiguration,
+  BooleanDisplay
 } from "@pega/cosmos-react-core";
 
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 // includes in bundle
 import handleEvent from "./event-utils";
@@ -99,7 +101,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
     // @ts-ignore
     displayComponent = (
       // @ts-ignore
-      <{{COMPONENT_CLASS_NAME}} value={value} trueLabel={trueLabel} falseLabel={falseLabel} />
+      <BooleanDisplay value={value} trueLabel={trueLabel} falseLabel={falseLabel} />
     );
   }
 

package/src/tasks/create/templates/Constellation/field/Date/create-nonce.ts.mustache

@@ -0,0 +1,5 @@
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/src/tasks/create/templates/Constellation/field/Date/index.tsx.mustache

@@ -3,6 +3,7 @@ import { DateInput, FieldValueList, DateTimeDisplay, Text, withConfiguration } f
 import FormattedText from "./FormattedText";
 
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 

package/src/tasks/create/templates/Constellation/field/DateTime/create-nonce.ts.mustache

@@ -0,0 +1,5 @@
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/src/tasks/create/templates/Constellation/field/DateTime/index.tsx.mustache

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import { DateTimeInput, FieldValueList, DateTimeDisplay, Text, withConfiguration } from "@pega/cosmos-react-core";
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 // includes in bundle
 import DateTimeFormatter from "./date-time";

package/src/tasks/create/templates/Constellation/field/Decimal/create-nonce.ts.mustache

@@ -0,0 +1,5 @@
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/src/tasks/create/templates/Constellation/field/Decimal/index.tsx.mustache

@@ -2,6 +2,7 @@ import { useState, useEffect, useRef } from 'react';
 import { NumberInput, NumberDisplay, CurrencyDisplay, FieldValueList, Text, withConfiguration } from '@pega/cosmos-react-core';
 
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 // includes in bundle
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';

package/src/tasks/create/templates/Constellation/field/Decimal-Currency/create-nonce.ts.mustache

@@ -0,0 +1,5 @@
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/src/tasks/create/templates/Constellation/field/Decimal-Currency/index.tsx.mustache

@@ -12,6 +12,7 @@ import {
 
 
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 // includes in bundle
 import handleEvent from './event-utils';

package/src/tasks/create/templates/Constellation/field/Decimal-Percentage/create-nonce.ts.mustache

@@ -0,0 +1,5 @@
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/src/tasks/create/templates/Constellation/field/Decimal-Percentage/index.tsx.mustache

@@ -10,6 +10,7 @@ import {
 
 
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 // includes in bundle
 import handleEvent from './event-utils';

package/src/tasks/create/templates/Constellation/field/Icon-Button-URL/PConnProps.d.ts.mustache

@@ -0,0 +1,46 @@
+import  {PConnect } from '@pega/pcore-pconnect-typedefs';
+
+// PConnProps.d.ts
+// This gives us a place to have each component (which is most DX Components) that is
+//  expected to have a getPConnect extend its props (from BaseProps)
+//  such that every component will be expected to have a getPConnect() function
+//  that returns a PConnect object. (new/better way of doing .propTypes).
+//  This PConnProps can be extended to include other props that we know are in every component
+export interface PConnProps {
+  // getPConnect should exist for every C11n component. (add @ts-ignore in special cases where it isn't)
+  getPConnect: () => typeof PConnect;
+
+  // Allow any/all other key/value pairs in the BaseProps for now
+  //  TODO: refine which other props are always expected for various component
+  //    types and consider further interface "subclassing". For example, we may
+  //    want to create a "BasePropsForm" that gives guidance on required, readonly, etc.
+  //    and any other props that every Form component expects.
+  //    For example, see the PConnFieldProps below.
+  // NOTE: if you uncomment the line below, the PConnProps type will allow
+  //  otherwise undefined types to appear. This can be helpful for debugging
+  //  or when adding new components whose types aren't yet known.
+  // [key: string]: any;
+}
+
+
+// PConnFieldProps extends PConnProps to bring in the common properties that are
+// associated with most field components (ex: Dropdown, TextInput, etc.) in the
+//  components/field directory
+export interface PConnFieldProps extends PConnProps {
+  label: string,
+  required: boolean,
+  disabled: boolean,
+  value: any,
+  validatemessage: string,
+  status?: string,
+  onChange?: any,
+  onBlur?: any,
+  readOnly: boolean,
+  testId: string,
+  helperText: string,
+  displayMode?: string,
+  hideLabel: boolean,
+  placeholder?: string,
+  fieldMetadata?: any,
+  additionalProps?: any
+}

package/src/tasks/create/templates/Constellation/field/Icon-Button-URL/config.json.mustache

@@ -0,0 +1,64 @@
+{
+  "name": "{{COMPONENT_KEY}}",
+  "label": "{{COMPONENT_LABEL}}",
+  "description": "{{DESCRIPTION}}",
+  "organization": "{{ORGANIZATION}}",
+  "version": "{{VERSION}}",
+  "library": "{{LIBRARY}}",
+  "allowedApplications": {{{ALLOWEDAPPS}}},
+  "componentKey": "{{COMPONENT_KEY}}",
+  "type": "{{TYPE}}",
+  "subtype": {{{SUB_TYPE}}},
+  "icon": "images/pz-url-active.svg",
+  "properties": [
+    {
+      "format": "SELECT",
+      "name": "countryCode",
+      "label": "Country code",
+      "defaultValue": "USA",
+      "source": [
+        {
+          "key": "USA",
+          "value": "United States"
+        },
+        {
+          "key": "CAN",
+          "value": "Canada"
+        },
+        {
+          "key": "AUS",
+          "value": "Australia"
+        },
+        {
+          "key": "JPN",
+          "value": "Japan"
+        },
+        {
+          "key": "IND",
+          "value": "India"
+        },
+        {
+          "key": "TUR",
+          "value": "Turkey"
+        }
+      ]
+    },
+    {
+      "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/create/templates/Constellation/field/Icon-Button-URL/create-nonce.ts.mustache

@@ -0,0 +1,5 @@
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/src/tasks/create/templates/Constellation/field/Icon-Button-URL/demo.stories.tsx.mustache

@@ -0,0 +1,104 @@
+
+/* eslint-disable react/jsx-no-useless-fragment */
+// @ts-nocheck
+import type { Meta, StoryObj } from '@storybook/react';
+
+import {{COMPONENT_CLASS_NAME}} from './index';
+import { configProps } from './mock';
+
+const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
+  title: '{{COMPONENT_CLASS_NAME}}',
+  component: {{COMPONENT_CLASS_NAME}},
+  excludeStories: /.*Data$/
+};
+
+export default meta;
+type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
+
+if (!window.PCore) {
+  window.PCore = {};
+}
+
+const statelistData = {
+  data: [
+    {
+      pyLabel: 'Massachusetts',
+      pyStateCode: 'MA'
+    },
+    {
+      pyLabel: 'Rhode Island',
+      pyStateCode: 'RI'
+    },
+    {
+      pyLabel: 'Connecticut',
+      pyStateCode: 'CT'
+    }
+  ]
+};
+
+export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
+
+  window.PCore.getDataPageUtils = () => {
+    return {
+      getData: () => {
+        return new Promise(resolve => {
+          resolve(statelistData);
+        });
+      },
+      getDataAsync: () => {
+        return new Promise(resolve => {
+          resolve(statelistData);
+        });
+      }
+    };
+  };
+
+  const props = {
+    countryCode: configProps.countryCode,
+    getPConnect: () => {
+      return {
+        getValue: value => {
+          return value;
+        },
+        getContextName: () => {
+          return 'app/primary_1';
+        },
+        getLocalizedValue: value => {
+          return value;
+        },
+        getActionsApi: () => {
+          return {
+            updateFieldValue: () => {
+              /* nothing */
+            },
+            triggerFieldChange: () => {
+              /* nothing */
+            }
+          };
+        },
+        ignoreSuggestion: () => {
+          /* nothing */
+        },
+        acceptSuggestion: () => {
+          /* nothing */
+        },
+        setInheritedProps: () => {
+          /* nothing */
+        },
+        resolveConfigProps: () => {
+          /* nothing */
+        }
+      };
+    }
+  };
+
+  return (
+    <>
+      <{{COMPONENT_CLASS_NAME}} {...props} {...args} />
+    </>
+  );
+};
+
+Base{{COMPONENT_CLASS_NAME}}.args = {
+  countryCode: configProps.countryCode
+};