@pega/custom-dx-components 26.1.10-alpha-0.1 → 26.1.10-alpha-0.3

package/.github/workflows/lint-and-format.yml

@@ -0,0 +1,36 @@
+name: Lint and Format
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+    branches:
+      - master
+
+jobs:
+  lint-and-format:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [20.x]
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run ESLint
+        run: npm run lint:es
+
+      - name: Check Prettier formatting
+        run: npm run lint:format

package/.prettierignore

@@ -1,2 +1,15 @@
-node_modules
-*.md
+**/.git
+**/.github
+**/.vscode
+**/.svn
+**/.hg
+**/*.md
+**/*.svg
+**/assets
+**/*.mustache
+**/*.zip
+**/*.key
+**/*.crt
+**/*.gitignore
+**/*.npmrc
+**/*.txt

package/.prettierrc.mjs

@@ -0,0 +1,8 @@
+import pegaPrettierConfig from "@pega/prettier-config";
+
+export default {
+  ...pegaPrettierConfig,
+  printWidth: 150,
+  trailingComma: "none",
+  arrowParens: "avoid",
+};

package/README.md

@@ -37,9 +37,9 @@ Ensure you have access to the following in your system:
 
 - Git version 2.30 or later
 
-- System node version >= 22.15.0
+- System node version >= 24.4.1
 
-- System npm version 10.9.2
+- System npm version 11.4.2
 
 ## Latest Documentation
 

package/eslint.config.mjs

@@ -8,8 +8,10 @@ import react from 'eslint-plugin-react';
 import reactHooks from 'eslint-plugin-react-hooks';
 // eslint.config.js
 import { defineConfig } from 'eslint/config';
+import noPcorePconnectInPresentation from './src/rules/no-pcore-pconnect-in-presentation.js';
 
 const __filename = fileURLToPath(import.meta.url);
+const __dirname = fileURLToPath(new URL('.', import.meta.url));
 
 export default defineConfig([
   eslint.configs.recommended,
@@ -40,7 +42,8 @@ export default defineConfig([
     '**/*.mjs',
     '**/paths.js',
     'dist/*',
-    'lib/*'
+    'lib/*',
+    'tests/*'
   ]),
   {
     languageOptions: {
@@ -56,7 +59,8 @@ export default defineConfig([
       sourceType: 'script',
 
       parserOptions: {
-        project: 'tsconfig.json',
+        project: true,
+        tsconfigRootDir: __dirname,
         ecmaFeatures: {
           jsx: true
         }
@@ -79,8 +83,9 @@ export default defineConfig([
       }
     },
 
-    plugins: { sonarjs, import: importPlugin, react, 'react-hooks': reactHooks },
+    plugins: { sonarjs, import: importPlugin, react, 'react-hooks': reactHooks, 'pega-presentation': { rules: { 'no-pcore-pconnect-in-presentation': noPcorePconnectInPresentation } } },
     rules: {
+      'pega-presentation/no-pcore-pconnect-in-presentation': 'error',
       'prettier/prettier': 'off',
       'sonarjs/cognitive-complexity': 'off',
       'sonarjs/no-identical-functions': 'off',
@@ -121,60 +126,67 @@ export default defineConfig([
       '@typescript-eslint/ban-types': 'off',
       eqeqeq: 'off',
       'no-alert': 'off',
-      'no-console': 'error',
+      'no-console': 'off',
       'no-fallthrough': 'error',
       'no-unused-vars': 'off',
       'no-var': 'off',
+      'no-undef': 'off',
       yoda: 'error',
       'no-irregular-whitespace': 'off',
       'no-empty': 'off',
       'no-new-object': 'off',
       'import/no-relative-packages': 'off',
       'import/no-mutable-exports': 'error',
-      'sonarjs/max-switch-cases': 'error',
-      'sonarjs/no-collapsible-if': 'error',
+      'sonarjs/max-switch-cases': 'off',
+      'sonarjs/no-collapsible-if': 'off',
       'sonarjs/no-all-duplicated-branches': 'error',
       'sonarjs/no-duplicated-branches': 'error',
       'sonarjs/no-gratuitous-expressions': 'off',
       'sonarjs/no-ignored-return': 'error',
       'sonarjs/no-small-switch': 'error',
-      'sonarjs/prefer-object-literal': 'error',
-      'sonarjs/prefer-single-boolean-return': 'error',
-      '@typescript-eslint/no-shadow': 'error',
+      'sonarjs/prefer-object-literal': 'off',
+      'sonarjs/prefer-single-boolean-return': 'off',
+      '@typescript-eslint/no-shadow': 'off',
       'react/default-props-match-prop-types': 'error',
       'react/no-unescaped-entities': 'error',
       'react/no-unused-prop-types': 'error',
       'react/static-property-placement': 'error',
       'array-callback-return': 'error',
-      'func-names': 'error',
-      'no-case-declarations': 'error',
-      'no-lonely-if': 'error',
-      'no-nested-ternary': 'error',
-      'no-plusplus': 'error',
+      'func-names': 'off',
+      'no-case-declarations': 'off',
+      'no-lonely-if': 'off',
+      'no-nested-ternary': 'off',
+      'no-plusplus': 'off',
       'no-restricted-globals': 'error',
       'no-restricted-properties': 'error',
-      'no-shadow': 'error',
-      radix: 'error',
+      'no-shadow': 'off',
+      radix: 'off',
       'spaced-comment': 'error',
       'import/newline-after-import': 'error',
       'sonarjs/no-nested-switch': 'error',
       '@typescript-eslint/no-array-constructor': 'error',
-      '@typescript-eslint/no-unused-vars': 'error',
+      '@typescript-eslint/no-unused-vars': 'off',
       '@typescript-eslint/no-useless-constructor': 'error',
       'react/button-has-type': 'error',
       'react/jsx-curly-brace-presence': 'error',
       'react/jsx-boolean-value': 'error',
       'react/no-array-index-key': 'error',
       'class-methods-use-this': 'error',
-      'guard-for-in': 'error',
+      'guard-for-in': 'off',
       'no-unneeded-ternary': 'error',
       'no-unused-expressions': 'error',
       'operator-assignment': 'error',
       'prefer-template': 'error',
-      'vars-on-top': 'error',
+      'vars-on-top': 'off',
       'prefer-regex-literals': 'off',
       'no-use-before-define': 'off',
-      '@typescript-eslint/no-use-before-define': 'error'
+      '@typescript-eslint/no-use-before-define': 'off',
+      'sonarjs/no-duplicated-branches': 'off',
+      'no-useless-escape': 'off',
+      'no-redeclare': 'off',
+      'no-constant-binary-expression': 'off',
+      'no-constant-condition': 'off',
+      'no-useless-catch': 'off',
     }
   },
   {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/custom-dx-components",
-  "version": "26.1.10-alpha-0.1",
+  "version": "26.1.10-alpha-0.3",
   "description": "Utility for building custom UI components",
   "bin": "./bin/index.js",
   "keywords": [
@@ -12,11 +12,11 @@
   "sideEffects": false,
   "type": "module",
   "scripts": {
-    "lint:es": "eslint .",
-    "lint:format": "prettier -c .",
+    "lint:es": "eslint --color --cache --cache-location node_modules/.cache/eslint/ \"src/**\"",
+    "lint:format": "prettier -c \"src/**\"",
     "lint:spelling": "cspell **/*",
     "fix:es": "eslint --fix .",
-    "fix:format": "prettier -w .",
+    "fix:format": "prettier -w \"src/**\"",
     "test:unit:local": "node --input-type=module  --experimental-vm-modules node_modules/jest/bin/jest.js --runInBand /tests/unit",
     "test:functional:local": "jest --runInBand /tests/functional --detectOpenHandles --coverage"
   },
@@ -24,7 +24,7 @@
     "@babel/core": "^7.28.0",
     "@babel/plugin-transform-class-properties": "^7.27.1",
     "@babel/preset-react": "^7.27.1",
-    "@pega/auth": "^0.2.31",
+    "@pega/auth": "^0.2.37",
     "@pega/constellation-dx-components-build-utils": "^2.0.11",
     "@pega/inquirer-fuzzy-path": "^3.0.0",
     "ajv": "^8.17.1",
@@ -37,7 +37,7 @@
     "compression-webpack-plugin": "^11.1.0",
     "css-loader": "7.1.2",
     "css-minimizer-webpack-plugin": "^7.0.2",
-    "eslint": "^9.31.0",
+    "eslint": "^9.36.0",
     "execa": "^9.6.0",
     "file-loader": "6.2.0",
     "fs-extra": "^11.3.0",
@@ -65,6 +65,7 @@
     "ts-loader": "^9.5.2",
     "typescript": "~5.8.3",
     "unarchive": "^1.1.3",
+    "undici": "^7.21.0",
     "url-loader": "4.1.1",
     "webpack": "5.101.0",
     "webpack-cli": "^6.0.1"
@@ -74,12 +75,23 @@
     "@pega/configs": "^0.17.0",
     "@pega/prettier-config": "^0.17.0",
     "@types/jest": "^29.5.14",
+    "@typescript-eslint/eslint-plugin": "^6.15.0",
+    "@typescript-eslint/parser": "^8.34.1",
     "babel-jest": "^29.7.0",
     "cspell": "^8.19.4",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-jest": "^27.6.2",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-sonarjs": "^0.23.0",
+    "eslint-plugin-storybook": "^0.6.15",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-junit": "^16.0.0",
     "prettier": "3.6.2",
-    "ts-jest": "^29.4.0"
+    "ts-jest": "^29.4.0",
+    "typescript-eslint": "^8.44.1"
   }
 }

package/src/cli.js

@@ -293,4 +293,4 @@ export default async (args = []) => {
       break;
     }
   }
-}
+};

package/src/constants.js

@@ -1,4 +1,4 @@
-// cSpell:ignore words timeofday caseview casepreview objectview
+// cSpell:ignore words timeofday caseview casepreview objectview wsscaseview
 export const TASKS_CONFIG_JSON_FILENAME = 'tasks.config.json';
 export const INPUT_CONFIG_JSON_FILENAME = 'input.config.json';
 export const PACKAGE_JSON_FILENAME = 'package.json';
@@ -24,7 +24,6 @@ export const TEMP_PATH = 'store/temp';
 export const COMPONENTS_CONFIG_FILE_NAME = 'componentsconfig.json';
 export const MAX_RFT_CHARS = 64;
 
-
 /* REST end points */
 export const PUBLISH_COMPONENT_SERVICE_REST_ENDPOINT = 'PRRestService/dev/v1/publish_component';
 export const LIST_COMPONENT_SERVICE_REST_ENDPOINT = 'PRRestService/dev/v1/list_component';
@@ -34,12 +33,9 @@ export const INF_TOKEN_URL_V1 = 'PRRestService/oauth2/v1/token';
 export const INF_AUTHORIZE_URL_V1 = 'PRRestService/oauth2/v1/authorize';
 export const LP_TOKEN_URL = 'uas/oauth/token';
 export const LP_AUTHORIZE_URL = 'uas/oauth/authorize';
-export const LP_LIST_COMPONENT_SERVICE_REST_ENDPOINT =
-  'pegalaunchpad/c11n/v103/app/appstudiox/componentslist?field0=type&value0={type}';
-export const LP_PUBLISH_COMPONENT_SERVICE_REST_ENDPOINT =
-  'pegalaunchpad/c11n/isolations/{isolationId}/v102/assetsUpdate';
-export const LP_DELETE_COMPONENT_SERVICE_REST_ENDPOINT =
-  'pegalaunchpad/c11n/isolations/{isolationId}/v102/assetsUpdate';
+export const LP_LIST_COMPONENT_SERVICE_REST_ENDPOINT = 'pegalaunchpad/c11n/v103/app/appstudiox/componentslist?field0=type&value0={type}';
+export const LP_PUBLISH_COMPONENT_SERVICE_REST_ENDPOINT = 'pegalaunchpad/c11n/isolations/{isolationId}/v102/assetsUpdate';
+export const LP_DELETE_COMPONENT_SERVICE_REST_ENDPOINT = 'pegalaunchpad/c11n/isolations/{isolationId}/v102/assetsUpdate';
 
 export const PUBLISH_COMPONENT_LIBRARY_SERVICE_REST_ENDPOINT = 'PRRestService/dev/v1/publish_component_library';
 export const PUBLISH_COMPONENT_LIBRARY_ARCHIVE_SERVICE_REST_ENDPOINT = 'PRRestService/dev/v1/publish_component_library_archive';
@@ -48,14 +44,15 @@ export const LIST_COMPONENT_LIBRARY_ARCHIVES_SERVICE_REST_ENDPOINT = 'PRRestServ
 export const DELETE_COMPONENT_LIBRARY_SERVICE_REST_ENDPOINT = 'PRRestService/dev/v1/delete_component_library';
 export const COMPONENT_LIBRARY_ARCHIVE_SERVICE_REST_ENDPOINT = 'PRRestService/dev/v1/component_library_archive';
 
-
 export const FIELD_PATH = '/field';
 export const TEMPLATE_PATH = '/template';
 export const WIDGET_PATH = '/widget';
+export const PRESENTATION_PATH = '/presentation';
 
 export const COMPONENT_PREFIX_FIELD_PATH = 'field/';
 export const COMPONENT_PREFIX_TEMPLATE_PATH = 'template/';
 export const COMPONENT_PREFIX_WIDGET_PATH = 'widget/';
+export const COMPONENT_PREFIX_PRESENTATION_PATH = 'presentation/';
 
 export const BUILDER_INDEX_FILE_PATH = '../bundle/builder/index.js';
 export const BUILDER_DIR_FILE_PATH = '../bundle/builder';
@@ -80,11 +77,7 @@ export const AUTHENTICATE_DEFAULTS = {
   redirectUri: 'https://localhost:4010/'
 };
 
-export const SHARED_FILE_NAMES = [
-  "suggestions-handler.ts",
-  "PConnProps.d.ts",
-  "create-nonce.ts"
-];
+export const SHARED_FILE_NAMES = ['suggestions-handler.ts', 'PConnProps.d.ts', 'create-nonce.ts'];
 
 export const AUTHENTICATE_SCHEMA = {
   serverType: [
@@ -144,6 +137,10 @@ export const COMPONENT_SCHEMA = {
     {
       name: 'Widget',
       value: 'Widget'
+    },
+    {
+      name: 'Presentation',
+      value: 'Presentation'
     }
   ],
   subtype: {
@@ -256,6 +253,16 @@ export const COMPONENT_SCHEMA = {
         name: 'PAGE & CASE',
         value: ['PAGE', 'CASE']
       }
+    ],
+    presentation: [
+      {
+        name: 'CASEVIEW',
+        value: 'CASEVIEW'
+      },
+      {
+        name: 'WSSCASEVIEW',
+        value: 'WSSCASEVIEW'
+      }
     ]
   }
 };

package/src/rules/no-pcore-pconnect-in-presentation.js

@@ -0,0 +1,103 @@
+import fs from 'fs';
+import path from 'path';
+
+/** Cache: component directory → parsed config.json (or null) */
+const configCache = new Map();
+
+/**
+ * Walks up the directory tree from `startDir` to find a `config.json` file,
+ * stopping at the project root (`process.cwd()`) to avoid picking up unrelated configs.
+ * Results are cached per directory to minimise repeated filesystem reads.
+ */
+function findComponentConfig(startDir) {
+  if (configCache.has(startDir)) {
+    return configCache.get(startDir);
+  }
+
+  const projectRoot = path.resolve(process.cwd());
+  let dir = path.resolve(startDir);
+
+  while (dir.startsWith(projectRoot)) {
+    const candidate = path.join(dir, 'config.json');
+    if (fs.existsSync(candidate)) {
+      let parsed = null;
+      try {
+        parsed = JSON.parse(fs.readFileSync(candidate, 'utf8'));
+      } catch {
+        // ignore malformed config
+      }
+      configCache.set(startDir, parsed);
+      return parsed;
+    }
+    const parent = path.dirname(dir);
+    if (parent === dir) break;
+    dir = parent;
+  }
+
+  configCache.set(startDir, null);
+  return null;
+}
+
+/** @type {import('eslint').Rule.RuleModule} */
+const rule = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Disallow PCore and getPConnect usage in Presentation components',
+      category: 'Pega DX Components',
+      recommended: true
+    },
+    messages: {
+      noPCore:
+        'PCore must not be used in Presentation components (type="Presentation" in config.json). These are presentation-only components with no platform API access.',
+      noGetPConnect:
+        'getPConnect must not be used in Presentation components (type="Presentation" in config.json). These are presentation-only components with no platform API access.'
+    },
+    schema: []
+  },
+
+  create(context) {
+    const filename = context.filename ?? context.getFilename();
+    const fileDir = path.dirname(filename);
+    const config = findComponentConfig(fileDir);
+
+    if (!config || config.type !== 'Presentation') {
+      return {};
+    }
+
+    return {
+      // Flag `PCore` used as a standalone identifier (e.g. PCore.getConstants())
+      Identifier(node) {
+        if (node.name === 'PCore') {
+          context.report({ node, messageId: 'noPCore' });
+        }
+      },
+
+      // Flag `getPConnect` in destructuring: const { getPConnect } = props
+      // and as a property access: props.getPConnect()
+      Property(node) {
+        if (node.key && node.key.name === 'getPConnect') {
+          context.report({ node, messageId: 'noGetPConnect' });
+        }
+      },
+
+      // Flag `getPConnect` as a member access: props.getPConnect or props['getPConnect']
+      MemberExpression(node) {
+        const prop = node.property;
+        const isGetPConnect = node.computed ? prop.type === 'Literal' && prop.value === 'getPConnect' : prop.name === 'getPConnect';
+        if (isGetPConnect) {
+          context.report({ node, messageId: 'noGetPConnect' });
+        }
+      },
+
+      // Flag `getPConnect` called directly as a standalone function: getPConnect()
+      CallExpression(node) {
+        if (node.callee.type === 'Identifier' && node.callee.name === 'getPConnect') {
+          context.report({ node, messageId: 'noGetPConnect' });
+        }
+      }
+    };
+  }
+};
+
+export default rule;

package/src/tasks/authenticate/helper.js

@@ -1,23 +1,15 @@
-/* eslint-disable import/prefer-default-export */
 import { AUTHENTICATE_SCHEMA, AUTHENTICATE_DEFAULTS } from '../../constants.js';
 
 export const getAuthQuestions = async dxcbConfig => {
   const defaultPegaConfig = dxcbConfig;
-  const aAlwaysAsk = dxcbConfig.questions_askAlways
-    ? dxcbConfig.questions_askAlways.split(',')
-    : [];
+  const aAlwaysAsk = dxcbConfig.questions_askAlways ? dxcbConfig.questions_askAlways.split(',') : [];
   const aNeverAsk = dxcbConfig.questions_askNever ? dxcbConfig.questions_askNever.split(',') : [];
   const aAskOnce = dxcbConfig.questions_askOnce ? dxcbConfig.questions_askOnce.split(',') : [];
-  const aAskedOnce = dxcbConfig.questions_askedOnce
-    ? dxcbConfig.questions_askedOnce.split(',')
-    : [];
+  const aAskedOnce = dxcbConfig.questions_askedOnce ? dxcbConfig.questions_askedOnce.split(',') : [];
 
   // Ask if various must, never, once criteria are met
   const askThisTime = prop => {
-    return (
-      aAlwaysAsk.includes(prop) ||
-      (!aNeverAsk.includes(prop) && aAskOnce.includes(prop) && !aAskedOnce.includes(prop))
-    );
+    return aAlwaysAsk.includes(prop) || (!aNeverAsk.includes(prop) && aAskOnce.includes(prop) && !aAskedOnce.includes(prop));
   };
 
   const initAnswer = (prop, defValue) => {
@@ -90,9 +82,7 @@ export const getAuthQuestions = async dxcbConfig => {
       message: 'Enter OAuth 2.0 grant type',
       default: defaultPegaConfig.grantType,
       choices: answers => {
-        return AUTHENTICATE_SCHEMA.grantType.filter(
-          gt => !(answers.serverType === 'launchpad' && gt.value === 'passwordCreds')
-        );
+        return AUTHENTICATE_SCHEMA.grantType.filter(gt => !(answers.serverType === 'launchpad' && gt.value === 'passwordCreds'));
       },
       validate: value => {
         if (value.trim()) {
@@ -116,11 +106,7 @@ export const getAuthQuestions = async dxcbConfig => {
         return 'Authentication service alias cannot be empty';
       },
       when: answers => {
-        return (
-          answers.serverType === 'infinity' &&
-          answers.grantType === 'authCode' &&
-          fnStandardWhen('authService', answers)
-        );
+        return answers.serverType === 'infinity' && answers.grantType === 'authCode' && fnStandardWhen('authService', answers);
       }
     },
     {
@@ -135,11 +121,7 @@ export const getAuthQuestions = async dxcbConfig => {
         return 'Redirect URI cannot be empty';
       },
       when: answers => {
-        return (
-          answers.serverType === 'infinity' &&
-          answers.grantType === 'authCode' &&
-          fnStandardWhen('redirectUri', answers)
-        );
+        return answers.serverType === 'infinity' && answers.grantType === 'authCode' && fnStandardWhen('redirectUri', answers);
       }
     },
     {
@@ -154,11 +136,7 @@ export const getAuthQuestions = async dxcbConfig => {
         return 'Username cannot be empty';
       },
       when: answers => {
-        return (
-          answers.serverType === 'infinity' &&
-          answers.grantType === 'passwordCreds' &&
-          fnStandardWhen('user', answers)
-        );
+        return answers.serverType === 'infinity' && answers.grantType === 'passwordCreds' && fnStandardWhen('user', answers);
       }
     },
     {
@@ -173,12 +151,7 @@ export const getAuthQuestions = async dxcbConfig => {
         return 'Password cannot be empty';
       },
       when: answers => {
-        return (
-          answers.user &&
-          answers.serverType === 'infinity' &&
-          answers.grantType === 'passwordCreds' &&
-          fnStandardWhen('password', answers)
-        );
+        return answers.user && answers.serverType === 'infinity' && answers.grantType === 'passwordCreds' && fnStandardWhen('password', answers);
       }
     },
     {
@@ -209,8 +182,7 @@ export const getAuthQuestions = async dxcbConfig => {
       },
       when: answers => {
         return (
-          ((answers.serverType === 'infinity' && answers.grantType !== 'authCode') ||
-            answers.serverType === 'launchpad') &&
+          ((answers.serverType === 'infinity' && answers.grantType !== 'authCode') || answers.serverType === 'launchpad') &&
           fnStandardWhen('clientSecret', answers)
         );
       }