@pega/custom-dx-components 8.8.14 → 8.8.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/custom-dx-components",
-  "version": "8.8.14",
+  "version": "8.8.16",
   "description": "Utility for building custom UI components",
   "bin": "./bin/index.js",
   "scripts": {
@@ -13,15 +13,15 @@
   "type": "module",
   "sideEffects": false,
   "dependencies": {
-    "@babel/core": "^7.19.1",
+    "@babel/core": "^7.22.5",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/preset-env": "^7.19.1",
-    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-env": "^7.22.5",
+    "@babel/preset-react": "^7.22.5",
     "adm-zip": "^0.5.9",
     "ajv": "^8.12.0",
     "ajv-keywords": "^5.1.0",
     "arg": "^5.0.2",
-    "babel-loader": "^8.2.5",
+    "babel-loader": "^9.1.2",
     "chalk": "^5.0.1",
     "compression-webpack-plugin": "^10.0.0",
     "css-loader": "6.7.1",
@@ -62,9 +62,9 @@
     "custom-components"
   ],
   "devDependencies": {
-    "@pega/configs": "^0.5.3",
+    "@pega/configs": "^0.4.0",
     "@pega/prettier-config": "^0.5.3",
-    "cspell": "^6.9.0",
+    "cspell": "^4.0.23",
     "prettier": "2.7.1"
   }
 }

package/src/auth.js

@@ -31,7 +31,7 @@ class PegaAuth {
         obj = JSON.parse(peConfig);
       } catch (e) {
         try {
-          obj = JSON.parse(this.#atob(peConfig));
+          obj = JSON.parse(atob(peConfig));
         } catch (err) {
           obj = {};
         }
@@ -42,7 +42,7 @@ class PegaAuth {
 
   #updateConfig() {
     if (this.ssKeyConfig) {
-      window.sessionStorage.setItem(this.ssKeyConfig, this.#btoa(JSON.stringify(this.config)));
+      window.sessionStorage.setItem(this.ssKeyConfig, btoa(JSON.stringify(this.config)));
     }
   }
 
@@ -119,7 +119,7 @@ class PegaAuth {
     const sessionIndexArg =
       sessionIndex && this.config.sessionIndexAttempts < 3 ? `&session_index=${sessionIndex}` : '';
     const userIdentifierArg = userIdentifier ? `&UserIdentifier=${encodeURIComponent(userIdentifier)}` : '';
-    const passwordArg = password && userIdentifier ? `&Password=${encodeURIComponent(window.atob(password))}` : '';
+    const passwordArg = password && userIdentifier ? `&Password=${encodeURIComponent(atob(password))}` : '';
     const moreAuthArgs = bInfinity
       ? `&enable_psyncid=true${authServiceArg}${sessionIndexArg}${userIdentifierArg}${passwordArg}`
       : `&isolationID=${isolationId}`;
@@ -137,10 +137,14 @@ class PegaAuth {
       // Deferring dynamic loading of node libraries til this first method to avoid doing this in constructor
       await this.#importNodeLibs();
     }
-    const { grantType } = this.config;
+    const { grantType, noPKCE } = this.config;
     if (grantType && grantType !== 'authCode') {
       return this.getToken();
     }
+    // Make sure browser in a secure context, else PKCE will fail
+    if (!this.isNode && !noPKCE && !window.isSecureContext) {
+      throw (new Error(`Authorization code grant flow failed due to insecure browser context at ${window.location.origin}.  Use localhost or https.`));
+    }
     return this.#authCodeStart();
   }
 
@@ -155,7 +159,7 @@ class PegaAuth {
     };
 
     const redirectOrigin = fnGetRedirectUriOrigin();
-    const state = this.isNode ? '' : this.#btoa(window.location.origin);
+    const state = this.isNode ? '' : btoa(window.location.origin);
 
     return new Promise((resolve, reject) => {
       this.#buildAuthorizeUrl(state).then((url) => {
@@ -281,7 +285,7 @@ class PegaAuth {
           const bCloseWithinFrame = false;
           elCloseBtn = document.createElement('img');
           elCloseBtn.onclick = fnCloseAndReject;
-          elCloseBtn.src = `data:image/svg+xml;base64,${this.#btoa(svgCloseBtn)}`;
+          elCloseBtn.src = `data:image/svg+xml;base64,${btoa(svgCloseBtn)}`;
           const oBtnStyle = elCloseBtn.style;
           oBtnStyle.cursor = 'pointer';
           // If svg doesn't set width and height might want to set oBtStyle width and height to something like '2em'
@@ -290,9 +294,10 @@ class PegaAuth {
           oBtnStyle.zIndex = nFrameZLevel + 1;
           const nTopOffset = bCloseWithinFrame ? 5 : -10;
           const nRightOffset = bCloseWithinFrame ? -34 : -20;
-          oBtnStyle.top = `${Math.round(Math.max(window.innerHeight - loginBoxHeight, 0) / 2) + nTopOffset}px`;
-          oBtnStyle.left = `${Math.round(Math.max(window.innerWidth - loginBoxWidth, 0) / 2) + loginBoxWidth + nRightOffset
-            }px`;
+          const nTop = Math.round(Math.max(window.innerHeight - loginBoxHeight, 0) / 2) + nTopOffset;
+          oBtnStyle.top = `${nTop}px`;
+          const nLeft = Math.round(Math.max(window.innerWidth - loginBoxWidth, 0) / 2) + loginBoxWidth + nRightOffset;
+          oBtnStyle.left = `${nLeft}px`;
           document.body.insertBefore(elCloseBtn, document.body.firstChild);
           // If the password was wrong, then the login screen will be in the iframe
           // ..and with Pega without realization of US-372314 it may replace the top (main portal) window
@@ -437,7 +442,7 @@ class PegaAuth {
     }
     if (grantType === 'passwordCreds') {
       formData.append('username', userIdentifier);
-      formData.append('password', this.#atob(password));
+      formData.append('password', atob(password));
     }
 
     return fetch(tokenUri, {
@@ -536,7 +541,7 @@ class PegaAuth {
 
     const hdrs = { 'content-type': this.urlencoded };
     if (clientSecret) {
-      const basicCreds = window.btoa(`${clientId}:${clientSecret}`);
+      const basicCreds = btoa(`${clientId}:${clientSecret}`);
       hdrs.authorization = `Basic ${basicCreds}`;
     }
     const aTknProps = ['access_token'];
@@ -584,25 +589,9 @@ class PegaAuth {
     return this.subtle.digest('SHA-256', new TextEncoder().encode(str));
   }
 
-  /* btoa to work with node or browser - create B64 string */
-  #btoa(str) {
-    if (this.isNode) {
-      return Buffer.from(str, 'binary').toString('base64');
-    }
-    return window.btoa(str);
-  }
-
-  /* atoa to work with node or browser - convert B64 to binary */
-  #atob(str) {
-    if (this.isNode) {
-      return Buffer.from(str, 'base64').toString('binary');
-    }
-    return window.atob(str);
-  }
-
   // Base64 encode
   #encode64(buff) {
-    return this.#btoa(new Uint8Array(buff).reduce((s, b) => s + String.fromCharCode(b), ''));
+    return btoa(new Uint8Array(buff).reduce((s, b) => s + String.fromCharCode(b), ''));
   }
 
   /*

package/src/cli.js

@@ -51,7 +51,7 @@ const parseArgumentsIntoOptions = rawArgs => {
     task: args._[0],
     git: true, // args['--git'] || false
     runInstall: true, // args['--install'] || false
-    skipBundle: false,
+    skipBundle: args['--skipBundle'] || false,
     params: rawArgs
   };
 };

package/src/tasks/build/helper.js

@@ -16,6 +16,12 @@ import { PUBLISH_COMPONENT_SERVICE_REST_ENDPOINT, TOKEN_PATH } from '../../const
 
 export const getPublishComponentQuestions = async () => {
   const components = await getComponents();
+
+  if (components.length == 0) {
+    console.log(chalk.redBright("No components to build"));
+    process.exit(1);
+  }
+
   const defaultPegaConfig = await getPegaServerConfig();
 
   return [

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

@@ -32,7 +32,7 @@ export const getBuildComponentQuestions = async ()  => {
   const defaultPegaConfig = await getPegaServerConfig();
 
   if (components.length == 0) {
-    console.log(chalk.bold.yellow(`No components to build`));
+    console.log(chalk.redBright("No components to build"));
     process.exit(1);
   }
 

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

@@ -10,7 +10,7 @@ import { getComponentDirectoryPath, showVersion, getComponents } from '../../uti
 import { getBuildComponentQuestions, cleanUp } from './helper.js';
 
 
-export function getCustomTasks(componentKey, sourceMap, devBuild) {
+export function getCustomTasks(componentKey, sourceMap, devBuild, options) {
 
   const sDevBuild = devBuild ? '(dev build)' : '';
   return new Listr(
@@ -32,6 +32,7 @@ export function getCustomTasks(componentKey, sourceMap, devBuild) {
       {
         title: `Bundle component ${sDevBuild}`,
         task: async () => bundleComponent(componentKey, sourceMap, devBuild),
+        skip: () => (options.skipBundle ? 'Skipped bundling component' : undefined)
       }
     ],
     {
@@ -45,7 +46,7 @@ export function getCustomTasks(componentKey, sourceMap, devBuild) {
 
 
 
-export default async () => {
+export default async (options) => {
   showVersion();
 
 
@@ -58,7 +59,7 @@ export default async () => {
   for (const componentKey of components) {
     console.log(chalk.bold.green(`Building ${componentKey}`));
 
-    const myCustomTasks = getCustomTasks(componentKey, sourceMap, devBuild );
+    const myCustomTasks = getCustomTasks(componentKey, sourceMap, devBuild, options );
 
     // eslint-disable-next-line no-await-in-loop
     await myCustomTasks.run().catch(err => {

package/src/tasks/init/template/package.json.mustache

@@ -6,9 +6,7 @@
   "main": "src/index.js",
   "scripts": {
     "startStorybook": "start-storybook --port 6040 --quiet",
-    "build": "tsc -b tsconfig.build.json",
     "lint": "run-p -cl lint:*",
-    "fix": "run-p -cl fix:*",
     "authenticate": "custom-dx-components authenticate",
     "buildComponent": "custom-dx-components buildComponent",
     "buildAllComponents": "custom-dx-components buildAllComponents",
@@ -26,7 +24,11 @@
     "lint:es": "eslint .",
     "lint:styles": "stylelint \"./**/*.@(js|jsx|ts|tsx)\"",
     "lint:format": "prettier -c .",
-    "lint:spelling": "cspell --no-progress **/*",
+    "lint:spelling": "cspell --no-progress **/*"
+  },
+    "scriptsComments": {
+    "build": "tsc -b tsconfig.build.json",
+    "fix": "run-p -cl fix:*",
     "fix:es": "eslint --fix .",
     "fix:format": "prettier -w ."
   },
@@ -56,7 +58,7 @@
   },
   "devDependencies": {
     "@pega/configs": "^0.5.3",
-    "@pega/custom-dx-components": "^8.8.14",
+    "@pega/custom-dx-components": "^8.8.16",
     "@pega/eslint-config": "^0.3.2",
     "@storybook/addon-actions": "^6.5.12",
     "@storybook/addon-essentials": "^6.5.12",
@@ -83,6 +85,7 @@
     "eslint-plugin-sonarjs": "^0.11.0",
     "jest": "^29.3.1",
     "jest-environment-jsdom": "^29.3.1",
+    "npm-quick-run": "^1.18.0",
     "npm-run-all": "^4.1.5",
     "prettier": "2.7.1",
     "stylelint": "^14.11.0",

package/src/tasks/publish/helper.js

@@ -21,6 +21,12 @@ import {
 
 export const getPublishComponentQuestions = async () => {
   const components = await getComponents();
+
+  if (components.length == 0) {
+    console.log(chalk.redBright("No components to publish"));
+    process.exit(1);
+  }
+
   const defaultPegaConfig = await getPegaServerConfig();
 
   return [

package/src/tasks/publish-all/index.js

@@ -63,6 +63,12 @@ export default async options => {
   showVersion();
 
   const components = await getComponents();
+
+  if (components.length == 0) {
+    console.log(chalk.redBright("No components to publish"));
+    process.exit(1);
+  }
+
   const questions = await getPublishComponentQuestions();
   const answers = await inquirer.prompt(questions);
   const { sourceMap, devBuild } = answers;