@pega/custom-dx-components 0.25.31 → 0.25.33

package/README.md

@@ -8,15 +8,13 @@ This project provides you with an environment to extend Constellation by giving
 
 Ensure you have access to the following in your system:
 
-- Pega Infinity Server version 24.2 or later
+- Pega Infinity Server version 25.1 or later
 
 - Git version 2.30 or later
 
-- System node version 18, 20
+- System node version >= 22.15.0
 
-- System npm version 8, 10 (9 is not supported)
-
-- Recommended (node 20, npm 10)
+- System npm version 10
 
 ## Latest Documentation
 

package/eslint.config.mjs

@@ -0,0 +1,227 @@
+import { defineConfig, globalIgnores } from 'eslint/config';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import js from '@eslint/js';
+import { FlatCompat } from '@eslint/eslintrc';
+import tseslint from 'typescript-eslint';
+import sonarjs from 'eslint-plugin-sonarjs';
+import importPlugin from 'eslint-plugin-import';
+import react from 'eslint-plugin-react';
+import reactHooks from 'eslint-plugin-react-hooks';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  sonarjs: sonarjs.configs.recommended,
+  importPlugin: importPlugin.configs.recommended,
+  react: react.configs.recommended,
+  reactHooks: reactHooks.configs.recommended,
+  allConfig: js.configs.all
+});
+
+export default tseslint.config(
+  tseslint.configs.recommended,
+  globalIgnores([
+    '**/node_modules',
+    'packages/*/lib',
+    '!**/.storybook',
+    '.storybook/public',
+    '**/demo.stories.jsx',
+    '**/mock.stories.js',
+    '**/demo.stories.tsx',
+    '**/demo.test.tsx',
+    '**/mock.stories.ts',
+    '**/*.mdx',
+    '**/webpack.config.js',
+    'src/helpers/config_access.js',
+    '**/*.html',
+    '**/*.css',
+    '**/*.json',
+    '**/*.md',
+    '**/*.svg',
+    '**/*.zip',
+    '**/*.d.ts',
+    '*.storybook/*',
+    '**/*.cjs',
+    '**/paths.js',
+    'dist/*',
+    'lib/*'
+  ]),
+  {
+    languageOptions: {
+      globals: {
+        PCore: 'readonly',
+        window: true,
+        console: true,
+        document: true,
+        fetch: true
+      },
+
+      ecmaVersion: 13,
+      sourceType: 'script',
+
+      parserOptions: {
+        project: 'tsconfig.json'
+      }
+    },
+
+    settings: {
+      'import/resolver': {
+        typescript: {},
+
+        node: {
+          extensions: ['.js', '.jsx', '.ts', '.tsx']
+        }
+      },
+
+      react: {
+        version: 'detect'
+      }
+    },
+
+    plugins: { sonarjs, import: importPlugin, react, 'react-hooks': reactHooks },
+    rules: {
+      'prettier/prettier': 'off',
+      'sonarjs/cognitive-complexity': 'off',
+      'sonarjs/no-identical-functions': 'off',
+      'sonarjs/no-duplicate-string': 'off',
+      'sonarjs/no-nested-template-literals': 'off',
+      '@typescript-eslint/array-type': 'off',
+      '@typescript-eslint/no-wrapper-object-types': 'off',
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/no-empty-object-type': 'off',
+      '@typescript-eslint/ban-ts-comment': 'off',
+      '@typescript-eslint/no-unsafe-function-type': 'off',
+      '@typescript-eslint/no-inferrable-types': 'off',
+      'import/extensions': ['off', 'never'],
+      'import/named': 'off',
+      'import/no-cycle': 'off',
+      'import/no-duplicates': 'off',
+      'import/no-extraneous-dependencies': 'off',
+      'import/no-named-as-default': 'off',
+      'import/no-named-as-default-member': 'off',
+      'import/no-self-import': 'off',
+      'import/no-unresolved': 'off',
+      'import/no-useless-path-segments': 'off',
+      'import/order': 'off',
+      'no-else-return': 'off',
+      'no-restricted-syntax': 'off',
+      'no-underscore-dangle': 'off',
+      'jsx-a11y/alt-text': 'off',
+      'jsx-a11y/anchor-is-valid': 'off',
+      'jsx-a11y/click-events-have-key-events': 'off',
+      'jsx-a11y/label-has-associated-control': 'off',
+      'jsx-a11y/no-static-element-interactions': 'off',
+      'react/jsx-fragments': 'off',
+      'react/jsx-no-bind': 'off',
+      'react/self-closing-comp': 'off',
+      'sonarjs/prefer-immediate-return': 'off',
+      '@typescript-eslint/dot-notation': 'off',
+      '@typescript-eslint/naming-convention': 'off',
+      '@typescript-eslint/ban-types': 'off',
+      eqeqeq: 'off',
+      'no-alert': 'off',
+      'no-console': 'error',
+      'no-fallthrough': 'error',
+      'no-undef': 'error',
+      'no-unused-vars': 'off',
+      'no-var': '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/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',
+      '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',
+      camelcase: 'error',
+      'func-names': 'error',
+      'no-case-declarations': 'error',
+      'no-lonely-if': 'error',
+      'no-nested-ternary': 'error',
+      'no-plusplus': 'error',
+      'no-restricted-globals': 'error',
+      'no-restricted-properties': 'error',
+      'no-shadow': 'error',
+      radix: 'error',
+      '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-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',
+      'no-unneeded-ternary': 'error',
+      'no-unused-expressions': 'error',
+      'operator-assignment': 'error',
+      'prefer-template': 'error',
+      'vars-on-top': 'error',
+      'prefer-regex-literals': 'off',
+      'no-use-before-define': 'off',
+      '@typescript-eslint/no-use-before-define': 'error'
+    }
+  },
+  {
+    files: ['**/*.@(ts|tsx)'],
+
+    rules: {
+      '@typescript-eslint/method-signature-style': ['error', 'property'],
+      quotes: 'off',
+      '@typescript-eslint/quotes': 'off'
+    }
+  },
+  {
+    files: ['**/*.@(jsx|tsx|mdx)'],
+
+    rules: {
+      'react/react-in-jsx-scope': 'off',
+      'react-hooks/rules-of-hooks': 'off',
+      'react-hooks/exhaustive-deps': 'off'
+    }
+  },
+  {
+    files: ['**/*.@(ts|tsx)'],
+    rules: {
+      'no-undef': 'error',
+      'no-console': 'off',
+      'import/prefer-default-export': 'off',
+      'import/no-relative-packages': 'off',
+      'react/jsx-fragments': 'off',
+      'react/react-in-jsx-scope': 'off',
+      'react-hooks/exhaustive-deps': 'off',
+      'sonarjs/cognitive-complexity': ['warn', 45]
+    }
+  },
+  {
+    files: ['**/*.@(js|jsx|ts|tsx|mdx)'],
+    rules: {}
+  },
+
+  {
+    files: ['*/**/mocks/**.@(mocks|styles).@(tsx|ts)'],
+
+    rules: {
+      'import/prefer-default-export': ['off']
+    }
+  }
+);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/custom-dx-components",
-  "version": "0.25.31",
+  "version": "0.25.33",
   "description": "Utility for building custom UI components",
   "bin": "./bin/index.js",
   "scripts": {
@@ -19,7 +19,7 @@
     "@babel/plugin-transform-class-properties": "^7.27.1",
     "@babel/preset-react": "^7.27.1",
     "@pega/auth": "^0.2.24",
-    "@pega/constellation-dx-components-build-utils": "^2.0.3-dev",
+    "@pega/constellation-dx-components-build-utils": "^2.0.4",
     "@pega/inquirer-fuzzy-path": "^3.0.0",
     "ajv": "^8.17.1",
     "ajv-keywords": "^5.1.0",
@@ -31,7 +31,7 @@
     "compression-webpack-plugin": "^11.1.0",
     "css-loader": "7.1.2",
     "css-minimizer-webpack-plugin": "^7.0.2",
-    "eslint": "^8.56.0",
+    "eslint": "^9.27.0",
     "execa": "^9.5.2",
     "file-loader": "6.2.0",
     "fs-extra": "^11.3.0",

package/src/constants.js

@@ -22,7 +22,7 @@ export const ARCHIVES_PATH = 'store';
 export const BIN_ARCHIVES_PATH = 'bin-arch';
 export const TEMP_PATH = 'store/temp';
 export const COMPONENTS_CONFIG_FILE_NAME = 'componentsconfig.json';
-
+export const MAX_RFT_CHARS = 64;
 
 
 /* REST end points */

package/src/tasks/create/index.js

@@ -23,7 +23,8 @@ import {
   addDebugLog,
   checkLibraryAndArchives,
   getConfigDefaults,
-  getSubTypeLabel
+  getSubTypeLabel,
+  getMaxComponentNameCount
 } from '../../util.js';
 import { COMPONENT_SCHEMA, SHARED_FILE_NAMES } from '../../constants.js';
 
@@ -309,6 +310,7 @@ addDebugLog("create", "", "+");
     );
   } else {
     const componentDefaults = getConfigDefaults();
+    const maxChars = getMaxComponentNameCount();
     const questions = [
       {
         name: 'type',
@@ -356,7 +358,7 @@ addDebugLog("create", "", "+");
       },
       {
         name: 'componentName',
-        message: 'Enter component name (required)',
+        message: `Enter component name (required) (${maxChars} max chars)`,
         validate: value => {
           /* value should not be empty
           It should not have spaces
@@ -364,8 +366,12 @@ addDebugLog("create", "", "+");
           Only case-insensitive alphanumeric values are allowed
         */
           if (value && !/^\d/.test(value) && value === sanitize(value)) {
+            if (value.length > maxChars) {
+              return `${value.length - maxChars} too many characters.`
+            }
             return true;
           }
+
           return 'Only alphanumeric values are allowed, starting with alphabets, no spaces.';
         }
       },

package/src/tasks/create/templates/Constellation/Field/Picklist/index.tsx.mustache

@@ -1,4 +1,3 @@
-/* eslint-disable react-hooks/exhaustive-deps */
 import { useState, useEffect, useRef, type Key } from 'react';
 import { Select, Option, FieldValueList, Text, withConfiguration } from '@pega/cosmos-react-core';
 

package/src/tasks/create/templates/Constellation/Field/Picklist-Autocomplete/index.tsx.mustache

@@ -1,4 +1,3 @@
-/* eslint-disable react-hooks/exhaustive-deps */
 /* eslint-disable sonarjs/cognitive-complexity */
 import { useEffect, useRef, useState, useMemo, type MutableRefObject, type SetStateAction } from 'react';
 import { ComboBox, menuHelpers, debounce, throttle, Button, Icon, withConfiguration, type MenuGroupProps, type MenuItemProps } from '@pega/cosmos-react-core';
@@ -414,6 +413,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   const { isSearchableOnKey } = props;
 
   const [items, setItems] = useState(() => []);
+  // eslint-disable-next-line prefer-const
   let selectItem: ((id: string, ev?: any) => void) | ((arg0: never) => void);
 
   // convert associated to datapage listtype and transform props

package/src/tasks/create/templates/Constellation/Field/Picklist-Autocomplete/repeat-utils.ts.mustache

@@ -1,4 +1,5 @@
 /* eslint-disable sonarjs/no-collapsible-if */
+/* eslint-disable sonarjs/cognitive-complexity */
 /* eslint-disable func-names */
 // @ts-nocheck
 import { splitConditionTree } from '@pega/cosmos-react-condition-builder';
@@ -267,7 +268,7 @@ export function getDescriptorsFieldName(property, pageClass) {
   return property;
 }
 
-// eslint-disable-next-line @typescript-eslint/default-param-last, sonarjs/cognitive-complexity
+// eslint-disable-next-line, sonarjs/cognitive-complexity
 export function preparePatchQueryFields(fields, isDataObject = false, classID = '', getPConnect) {
   const queryFields = [];
   // Descriptors can be configured only for single selectionMode properties

package/src/tasks/create/templates/Constellation/Field/Picklist-RadioButtons/index.tsx.mustache

@@ -77,7 +77,6 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   const propName: string = stateProps.value;
   const configProps = pConn.getConfigProps();
   const className = pConn.getCaseInfo().getClassName();
-  const { getLocaleRuleNameFromKeys, getLocalizedValue } = pConn;
 
   // @ts-ignore
   let configProperty = pConn.getRawMetadata()?.config?.value || '';
@@ -139,10 +138,10 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
         id={`${fullReference}.${item.key}`}
         value={item.key}
         key={`${fullReference}.${item.key}`}
-        label={getLocalizedValue(
+        label={pConn.getLocalizedValue(
           isDatapage ? item.text : item.value,
           localePath,
-          getLocaleRuleNameFromKeys(localeClass, localeContext, localeName)
+          pConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName)
         )}
         name={fullReference}
       />

package/src/tasks/create/templates/Constellation/Field/Text-Input/{StatusWork.tsx → StatusWork.tsx.mustache}

@@ -1,4 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import React from 'react';
 import { Status } from '@pega/cosmos-react-core';
 

package/src/tasks/create/templates/Constellation/Template/DETAILS/Avatar.tsx.mustache

@@ -1,4 +1,3 @@
-/* eslint-disable react-hooks/rules-of-hooks */
 import  React from 'react';
 import { useEffect, useState } from 'react';
 import { Avatar as CosmosAvatar, withConfiguration } from '@pega/cosmos-react-core';

package/src/tasks/create/templates/Constellation/Template/DETAILS/HighlightRender.tsx.mustache

@@ -1,4 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import React from 'react';
 import { FieldValueList, Text } from '@pega/cosmos-react-core';
 import type { PConnProps } from './PConnProps';

package/src/tasks/create/templates/Constellation/Template/DETAILS/StatusWork.tsx.mustache

@@ -1,4 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import React from 'react';
 import { Status } from '@pega/cosmos-react-core';
 

package/src/tasks/create/templates/Constellation/Template/DETAILS-region/Avatar.tsx.mustache

@@ -1,4 +1,3 @@
-/* eslint-disable react-hooks/rules-of-hooks */
 import  React from 'react';
 import { useEffect, useState } from 'react';
 import { Avatar as CosmosAvatar, withConfiguration } from '@pega/cosmos-react-core';

package/src/tasks/create/templates/Constellation/Template/DETAILS-region/HighlightRender.tsx.mustache

@@ -1,4 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import React from 'react';
 import { FieldValueList, Text } from '@pega/cosmos-react-core';
 import type { PConnProps } from './PConnProps';

package/src/tasks/create/templates/Constellation/Template/DETAILS-region/StatusWork.tsx.mustache

@@ -1,4 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import React from 'react';
 import { Status } from '@pega/cosmos-react-core';
 

package/src/tasks/create/templates/Constellation/Template/PAGE/GetNextWork.tsx.mustache

@@ -1,4 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import React from 'react';
 import { Button, useToaster } from '@pega/cosmos-react-core';
 

package/src/tasks/create/templates/Constellation/Widget/PAGE-CASE/Avatar.tsx.mustache

@@ -1,4 +1,3 @@
-/* eslint-disable react-hooks/rules-of-hooks */
 import  React from 'react';
 import { useEffect, useState } from 'react';
 import { Avatar as CosmosAvatar, withConfiguration } from '@pega/cosmos-react-core';

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

@@ -24,7 +24,8 @@ import { checkPathAccess, showVersion ,
   addDebugLog,
   checkLibraryAndArchives,
   getConfigDefaults,
-  getSubTypeLabel
+  getSubTypeLabel,
+  getMaxPrefixCount
 } from '../../util.js';
 
 import { COMPONENT_SCHEMA, COMPONENTS_DIRECTORY_PATH, TASKS_CONFIG_JSON_FILENAME, COMPONENTS_PATH, CATEGORY_CONSTELLATION, SHARED_FILE_NAMES } from '../../constants.js';
@@ -409,10 +410,25 @@ addDebugLog("createAll", "", "+");
       options
     );
   } else {
+    const maxPrefixCount = getMaxPrefixCount();
     const questions = [
       {
         name: 'prefix',
-        message: 'Enter prefix label'
+        message: `Enter prefix label (${maxPrefixCount} max chars)`,
+          validate: value => {
+          /* value should not be empty
+          It should not start with a number
+          Only case-insensitive alphanumeric values are allowed
+        */
+          if (value && !/^\d/.test(value) ) {
+            if (value.length > maxPrefixCount) {
+              return `${value.length - maxPrefixCount} too many characters.`
+            }
+            return true;
+          }
+
+          return 'Only alphanumeric values are allowed, starting with alphabets';
+        }
       },
       {
         name: 'version',

package/src/tasks/create-lib/helper.js

@@ -62,11 +62,10 @@ addDebugLog("getCreateLibComponentQuestions", "", "");
 
   const isLibraryBasedCL = getLibraryBasedCL();
 
-
   return [
     {
       name: 'libraryName',
-      message: 'Enter libray name',
+      message: 'Enter library name',
       default: libraryName,
       validate: value => {
         /* value should not be empty

package/src/tasks/export-archive/helper.js

@@ -58,7 +58,7 @@ addDebugLog("getFilePathQuestions", "", "");
       rootPath: startDirectory,
         // rootPath :: String
         // Root search directory
-      suggestOnly: false,
+      suggestOnly: true,
         // suggestOnly :: Bool
         // Restrict prompt answer to available choices or use them as suggestions
       depthLimit: 2,

package/src/tasks/import-archive/index.js

@@ -326,7 +326,7 @@ export const importArch = async(filePath, fileName, hadArchive) => {
           const newLibNameAnswers = await inquirer.prompt([
             {
               name: 'libraryName',
-              message: 'Enter new libray name',
+              message: 'Enter new library name',
               validate: value => {
                 /* value should not be empty
                 It should not have spaces
@@ -524,7 +524,7 @@ addDebugLog("importArch", `filePath: ${filePath}, fileName: ${fileName}`, "");
         const newLibNameAnswers = await inquirer.prompt([
           {
             name: 'libraryName',
-            message: 'Enter new libray name',
+            message: 'Enter new library name',
             validate: value => {
               /* value should not be empty
               It should not have spaces

package/src/tasks/init/index.js

@@ -144,7 +144,7 @@ export default async options => {
       {
         title: installDependenciesText,
         task: () =>
-          execPromise('npm i --force --dev', { cwd: options.targetDirectory })
+          execPromise('npm i --force --include=dev', { cwd: options.targetDirectory })
       },
       /*
       {

package/src/tasks/init/template/.eslintignore

@@ -10,5 +10,6 @@ src/helpers/config_access.js
 *.storybook/*
 *.cjs
 paths.js
+*.config.mjs
 dist/*
 lib/*

package/src/tasks/init/template/README.md

@@ -8,15 +8,13 @@ This project provides you with an environment to extend Constellation by giving
 
 Ensure you have access to the following in your system:
 
-- Pega Infinity Server version 24.2 or later
+- Pega Infinity Server version 25.1 or later
 
 - Git version 2.30 or later
 
-- System node version 18, 20
+- System node version >= 22.15.0
 
-- System npm version 8, 10 (9 is not supported)
-
-- Recommended (node 20, npm 10)
+- System npm version 10
 
 ## Latest Documentation