@pega/custom-dx-components 23.1.10 → 23.1.12

package/src/tasks/init/index.js

@@ -7,11 +7,16 @@ import { exec } from 'child_process';
 import chalk from 'chalk';
 import { execa } from 'execa';
 import ncp from 'ncp';
-import Listr from 'listr';
+import { Listr } from 'listr2';
 import gitignore from 'gitignore';
 import inquirer from 'inquirer';
 
-import { compileMustacheTemplate, isPascalCase, convertIntoPascalCase, sanitize } from '../../util.js';
+import {
+  compileMustacheTemplate,
+  isPascalCase,
+  convertIntoPascalCase,
+  sanitize
+} from '../../util.js';
 
 import { getInitProjectQuestions } from './helper.js';
 
@@ -21,7 +26,7 @@ const copy = promisify(ncp);
 const writeGitignore = promisify(gitignore.writeFile);
 const writeFile = promisify(fs.writeFile);
 
-const createGitignore = async (options) => {
+const createGitignore = async options => {
   const file = fs.createWriteStream(path.join(options.targetDirectory, '.gitignore'), {
     flags: 'a'
   });
@@ -31,13 +36,13 @@ const createGitignore = async (options) => {
   });
 };
 
-const createLicense = async (options) => {
+const createLicense = async options => {
   const targetPath = path.join(options.targetDirectory, 'LICENSE');
   const licenseContent = 'Enter license text here';
   return writeFile(targetPath, licenseContent, 'utf8');
 };
 
-const copyProjectTemplate = async (options) => {
+const copyProjectTemplate = async options => {
   await copy(options.templateDirectory, options.targetDirectory, {
     clobber: false
   });
@@ -68,7 +73,7 @@ const copyProjectTemplate = async (options) => {
   await createLicense(options);
 };
 
-const initGit = async (options) => {
+const initGit = async options => {
   const result = await execa('git', ['init'], {
     cwd: options.targetDirectory
   });
@@ -77,13 +82,16 @@ const initGit = async (options) => {
   }
 };
 
-export default async (options) => {
-  options.templateDirectory = path.resolve(path.dirname(fileURLToPath(import.meta.url)), 'template');
+export default async options => {
+  options.templateDirectory = path.resolve(
+    path.dirname(fileURLToPath(import.meta.url)),
+    'template'
+  );
   let projectName = 'test';
 
   const questions = getInitProjectQuestions();
 
-  await inquirer.prompt(questions).then(async (answers) => {
+  await inquirer.prompt(questions).then(async answers => {
     projectName = answers.projectName;
     projectName = sanitize(projectName).toLowerCase();
     options = { ...options, ...answers };
@@ -99,7 +107,10 @@ export default async (options) => {
 
     const targetDirectory = options.targetDirectory || process.cwd();
     options.targetDirectory = path.join(targetDirectory, projectName);
-    options.componentDirectory = path.join(options.targetDirectory, 'node_modules/@pega/custom-dx-components');
+    options.componentDirectory = path.join(
+      options.targetDirectory,
+      'node_modules/@pega/custom-dx-components'
+    );
   });
 
   const installDependenciesText = `Installing dependencies. This will take a couple of minutes.`;
@@ -121,16 +132,18 @@ export default async (options) => {
       },
       {
         title: installDependenciesText,
-        task: () => execPromise('npm i --force --production=false', { cwd: options.targetDirectory })
+        task: () =>
+          execPromise('npm i --force --production=false', { cwd: options.targetDirectory })
       },
       {
         title: 'Installing tasks dependencies',
-        task: () => execPromise('npm i --force --production=false', { cwd: options.componentDirectory })
-      },
-      {
+        task: () =>
+          execPromise('npm i --force --production=false', { cwd: options.componentDirectory })
+      }
+      /* {
         title: 'Installing quick run',
         task: () => execPromise('npm i -g npm-quick-run', { cwd: options.targetDirectory })
-      }
+      } */
     ],
     {
       exitOnError: false
@@ -139,7 +152,9 @@ export default async (options) => {
 
   await tasks.run();
   console.log('\n');
-  console.log(`${chalk.green('Success!!')} Project created at ${chalk.blueBright(options.targetDirectory)}`);
+  console.log(
+    `${chalk.green('Success!!')} Project created at ${chalk.blueBright(options.targetDirectory)}`
+  );
   console.log(
     '\n',
     `Inside that directory, you can run several commands:`,

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

@@ -6,3 +6,9 @@ src/helpers/config_access.js
 *.md
 *.svg
 *.zip
+*.d.ts
+*.storybook/*
+*.cjs
+paths.js
+dist/*
+lib/*

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

@@ -5,18 +5,31 @@
     "project": "tsconfig.json",
     "ecmaVersion": 13
   },
+  "globals": {
+    "PCore": "readonly"
+  },
   "settings": {
     "import/resolver": {
       "typescript": {},
       "node": {
-        "extensions": [".js", ".jsx"]
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
       }
     },
     "react": {
       "version": "detect"
     }
   },
-  "ignorePatterns": ["node_modules", "packages/*/lib", "!.storybook", ".storybook/public"],
+  "ignorePatterns": [
+    "node_modules",
+    "packages/*/lib",
+    "!.storybook",
+    ".storybook/public",
+    "**/demo.stories.jsx",
+    "**/mock.stories.js",
+    "**/demo.stories.tsx",
+    "**/mock.stories.ts",
+    "**/*.mdx"
+  ],
   "rules": {
     // Prettier recommends running separately from a linter.
     // https://prettier.io/docs/en/integrating-with-linters.html#notes
@@ -30,7 +43,7 @@
 
     //
     // JA - Override some default lint handling here
-    "@typescript-eslint/array-type": ["error", { "default": "generic" }],
+    "@typescript-eslint/array-type": "off",
     // "import/extensions": ["warn", "never"],    // Turning off for now (see below)
 
     //
@@ -71,15 +84,18 @@
     //
     // Initial release: set to error
     "@typescript-eslint/no-inferrable-types": "error",
-    "eqeqeq": "error",
-    "no-alert": "error",
+    "eqeqeq": "off",
+    "no-alert": "off",
     "no-console": "error",
     "no-fallthrough": "error",
     "no-undef": "error",
-    "no-unused-vars": "error",
-    "no-var": "error",
-    "prefer-const": "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",
@@ -98,7 +114,6 @@
     "react/static-property-placement": "error",
     "array-callback-return": "error",
     "camelcase": "error",
-    "default-case": "error",
     "func-names": "error",
     "no-case-declarations": "error",
     "no-lonely-if": "error",
@@ -127,6 +142,7 @@
     "operator-assignment": "error",
     "prefer-template": "error",
     "vars-on-top": "error",
+    "prefer-regex-literals": "off",
 
     "no-use-before-define": "off", // doc for @typescript-eslint/no-use-before-define says to turn off the base implementation
     "@typescript-eslint/no-use-before-define": "error"
@@ -173,6 +189,39 @@
         ]
       }
     },
+    {
+      // rules for typescript (keeping old rules for js)
+      "files": "*.@(ts|tsx)",
+      "rules": {
+        "no-undef": "off",
+        "no-console": "off",
+        "import/prefer-default-export": "off",
+        "import/no-relative-packages": "off",
+        "react/jsx-fragments": "off",
+        "react/react-in-jsx-scope": "off",
+        // Set up configuration for future sweep
+        "react-hooks/exhaustive-deps": [
+          "error",
+          {
+            "additionalHooks": "useAfterInitialEffect"
+          }
+        ],
+        "sonarjs/cognitive-complexity": ["warn", 45]
+      }
+    },
+    // {
+    //   "files": "*.@(tsx)",
+    //   "rules": {
+    //     "react/react-in-jsx-scope": "off",
+    //     // Set up configuration for future sweep
+    //     "react-hooks/exhaustive-deps": [
+    //       "error",
+    //       {
+    //         "additionalHooks": "useAfterInitialEffect"
+    //       }
+    //     ]
+    //   }
+    // },
     {
       "files": "*.@(js|jsx|ts|tsx|mdx)",
       "rules": {}

package/src/tasks/init/template/.storybook/main.js

@@ -0,0 +1,12 @@
+/** @type { import('@storybook/react-webpack5').StorybookConfig } */
+const config = {
+  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+  framework: {
+    name: '@storybook/react-webpack5'
+  },
+  docs: {
+    autodocs: 'tag'
+  }
+};
+export default config;

package/src/tasks/init/template/.storybook/preview.js

@@ -0,0 +1,14 @@
+/** @type { import('@storybook/react').Preview } */
+const preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i
+      }
+    }
+  }
+};
+
+export default preview;

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

@@ -8,14 +8,14 @@ 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 8.7 or later
+- Pega Infinity Server version 23 or later
 
 - Git version 2.30 or later
 
-- System node version 18
+- System node version 18, 20
 
-- System npm version 8
+- System npm version 8, 10 (9 is not supported)
 
 ## Latest Documentation
 
-Find the latest documentation on using **DX Component Builder** [here](https://docs.pega.com/bundle/constellation-dx-components-88/page/constellation-dx-components/custom-components/lifecycle-dx-cosmos-components.html)
+Find the latest documentation on using **DX Component Builder** [here](https://docs.pega.com/bundle/constellation-dx-components/page/constellation-dx-components/custom-components/whats-new-constellation-dx-components-pega-infinity-23.html)

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

@@ -0,0 +1,10 @@
+# Reporting Security Issues
+
+Pegasystems takes security seriously. We appreciate your efforts to responsibly disclose your findings, and will make every effort to acknowledge your contributions.
+
+To report a security issue, [email us](mailto:opensource@pega.com;security@pega.com) and include the word "SECURITY" in the subject line.
+
+The Pega team will send a response indicating the next steps in handling your report. We may ask for additional information or guidance.
+
+## Learning More About Security
+To learn more about securing a Pega application or our security capabilities, please see the [security article](https://community.pega.com/knowledgebase/capabilities/security) on Pega Community and the [Pega Trust Center](https://www.pega.com/products/cloud/pega-trust-center).

package/src/tasks/init/template/babel.config.cjs

@@ -1,11 +1,11 @@
 module.exports = {
   presets: [
     [
-      '@babel/preset-env',
+      '@babel/preset-typescript',
       {
-        targets: {
-          node: 'current'
-        }
+        onlyRemoveTypeImports: true,
+        allExtensions: true,
+        isTSX: true
       }
     ]
   ],

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

@@ -6,8 +6,8 @@
   "main": "src/index.js",
   "type": "module",
   "scripts": {
-    "startStorybook": "start-storybook --port 6040 --quiet",
-    "lint": "run-p -cl lint:*",
+    "startStorybook": "storybook dev --port 6040 --quiet",
+    "lint": "eslint .",
     "authenticate": "custom-dx-components authenticate",
     "buildComponent": "custom-dx-components buildComponent",
     "buildAllComponents": "custom-dx-components buildAllComponents",
@@ -23,16 +23,15 @@
     "deleteAll": "custom-dx-components deleteAll",
     "promoteWebPack": "custom-dx-components promoteWebPack",
     "revertWebPack": "custom-dx-components revertWebPack",
-    "lint:types": "tsc --noEmit",
-    "lint:es": "eslint .",
-    "lint:styles": "stylelint \"./**/*.@(js|jsx|ts|tsx)\"",
-    "lint:format": "prettier -c .",
-    "lint:spelling": "cspell --no-progress **/*",
-    "test": "echo 'Running functional and unit tests will DELETE existing local components, proceed (y/n)?' && read proceed && if test \"$proceed\" = \"y\"; then npm run test:full; fi ",
-    "test:full": "npm run test:functional && npm run test:unit",
-    "test:functional": "npm run test:functional:local --prefix node_modules/@pega/custom-dx-components",
-    "test-coverage": "node --input-type=module  --experimental-vm-modules node_modules/jest/bin/jest.js --runInBand node_modules/@pega/custom-dx-component --ci --testResultsProcessor='jest-junit' --coverage",
-    "test:unit": "npm run test:unit:local --prefix node_modules/@pega/custom-dx-components"
+    "_internal-test-coverage": "node --input-type=module  --experimental-vm-modules node_modules/jest/bin/jest.js --runInBand node_modules/@pega/custom-dx-component --ci --testResultsProcessor='jest-junit' --coverage",
+    "_internal-test": "echo 'Running functional and unit tests will DELETE existing local components, proceed (y/n)?' && read proceed && if test \"$proceed\" = \"y\"; then npm run _internal-test-full; fi ",
+    "_internal-test-full": "npm run _internal-test-functional && npm run _internal-test-unit",
+    "_internal-test-functional": "npm run test:functional:local --prefix node_modules/@pega/custom-dx-components",
+    "_internal-test-unit": "npm run test:unit:local --prefix node_modules/@pega/custom-dx-components",
+    "_lint:styles": "stylelint \"./**/*.@(js|jsx|ts|tsx)\"",
+    "_lint:format": "prettier -c .",
+    "_lint:spelling": "cspell --no-progress **/*",
+    "_lint:types": "tsc --noEmit"
   },
     "scriptsComments": {
     "build": "tsc -b tsconfig.build.json",
@@ -50,10 +49,12 @@
   "author": "",
   "license": "Enter License",
   "sideEffects": false,
-  "dependencies": {
-    "@pega/cosmos-react-core": "^4.0.1",
-    "@pega/cosmos-react-work": "4.0.1",
-    "dayjs": "^1.11.5",
+ "dependencies": {
+    "@pega/cosmos-react-condition-builder": "^4.2.0",
+    "@pega/cosmos-react-core": "^4.2.0",
+    "@pega/cosmos-react-work": "^4.2.0",
+    "dayjs": "^1.11.10",
+    "lodash.get": "^4.4.2",
     "polished": "^4.2.2",
     "prop-types": "^15.8.1",
     "react": "^17.0.2",
@@ -62,40 +63,43 @@
     "react-is": "^18.2.0",
     "react-player": "^2.10.1",
     "react-redux": "^7.2.6",
-    "styled-components": "^5.3.5"
+    "styled-components": "^5.3.5",
+    "ts-loader": "^9.5.1"
   },
   "devDependencies": {
-    "@pega/configs": "^0.5.3",
-    "@pega/custom-dx-components": "^23.1.10",
-    "@pega/eslint-config": "^0.3.2",
-    "@storybook/addon-actions": "^6.5.12",
-    "@storybook/addon-essentials": "^6.5.12",
-    "@storybook/addon-links": "^6.5.12",
-    "@storybook/addon-knobs": "^6.3.1",
-    "@storybook/addon-storysource": "^6.5.12",
-    "@storybook/builder-webpack5": "^6.5.12",
-    "@storybook/manager-webpack5": "^6.5.12",
-    "@storybook/react": "^6.5.12",
-    "@types/emoji-mart": "^3.0.9",
+    "@pega/configs": "^0.6.0",
+    "@pega/custom-dx-components": "23.1.12",
+    "@pega/pcore-pconnect-typedefs": "~2.1.1",
+    "@storybook/addon-actions": "^7.6.7",
+    "@storybook/addon-essentials": "^7.6.7",
+    "@storybook/addon-links": "^7.6.7",
+    "@storybook/addon-storysource": "^7.6.7",
+    "@storybook/react": "^7.6.7",
+    "@storybook/react-webpack5": "^7.6.7",
+    "@types/emoji-mart": "^3.0.14",
+    "@types/lodash.get": "^4.4.9",
     "@types/react": "^17.0.39",
-    "@types/react-color": "^3.0.6",
+    "@types/react-color": "^3.0.11",
     "@types/react-dom": "^17.0.11",
-    "@types/styled-components": "^5.1.26",
+    "@types/styled-components": "^5.1.34",
     "@typescript-eslint/eslint-plugin": "^5.6.0",
-    "eslint": "^8.4.1",
-    "eslint-plugin-import": "^2.25.3",
-    "eslint-plugin-jest": "^25.3.0",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-mdx": "^2.0.5",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.27.1",
-    "eslint-plugin-react-hooks": "^4.3.0",
-    "eslint-plugin-sonarjs": "^0.11.0",
-    "jest": "^29.3.1",
-    "jest-environment-jsdom": "^29.3.1",
+    "eslint": "^8.56.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jest": "^27.6.1",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-mdx": "^2.3.2",
+    "eslint-plugin-prettier": "^5.1.2",
+    "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",
     "npm-run-all": "^4.1.5",
-    "prettier": "2.7.1",
+    "prettier": "3.1.1",
+    "storybook": "^7.6.7",
     "stylelint": "^14.11.0",
-    "typescript": "~4.8.3"
+    "typescript": "~4.9.5"
   }
 }

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

@@ -34,5 +34,6 @@
     "subtype": "",
     "description": "",
     "icon": ""
-  }
+  },
+  "usePromotedWebPack": false
 }

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

@@ -3,6 +3,7 @@
   "include": ["./**/*", ".storybook/**/*"],
   "compilerOptions": {
     "noEmit": true,
-    "allowJs": true
+    "allowJs": true,
+    "importsNotUsedAsValues": "remove"
   }
 }

package/src/tasks/linter/index.js

@@ -15,12 +15,15 @@ export const lintComponent = async (dirToLint) => {
   const formatter = await eslint.loadFormatter("stylish");
   const resultText = formatter.format(results);
 
-  // 4. Output it.
-  // console.log(`lint resultText: ${resultText}`);
-  console.log(resultText);
-
   // Indicate linting is complete
   console.log(chalk.green(` linting complete...`));
+
+  if (resultText.length > 0 && resultText.indexOf("error") >= 0) {
+    throw new Error( "Lint:\n" + resultText );
+  }
+  else {
+    console.log(resultText);
+  }
 };
 
 // inpsired by https://eslint.org/docs/latest/developer-guide/nodejs-api

package/src/tasks/list/helper.js

@@ -102,6 +102,15 @@ async function fetchComponentsFromInfinity(apiUrl, headers) {
     })
       .then((response) => {
         status = response.status;
+        if (status === 404){
+          throw new Error('404: Server resource not found');
+        }
+        else if (status === 405){
+          throw new Error('405: Server method not allowed');
+        }
+        else if (status === 408){
+          throw new Error('408: Server timed out');
+        }
         return response.json();
       })
       .then((resp) => {
@@ -122,6 +131,7 @@ async function fetchComponentsFromInfinity(apiUrl, headers) {
 }
 
 async function fetchComponentsFromLaunchpad(apiUrl, headers) {
+
   const serverConfig = await getPegaServerConfig();
   // constructing urls for all type of components
   const urls = COMPONENT_SCHEMA.type.map((type) => apiUrl.replace('{type}', type.value));

package/src/tasks/list/index.js

@@ -1,5 +1,6 @@
 import inquirer from 'inquirer';
 import ora from 'ora';
+import chalk from 'chalk';
 
 import { showVersion, getPegaServerConfig } from '../../util.js';
 
@@ -35,9 +36,25 @@ const getList = async (sourceOfComponents, answers) => {
 
 
       const spinner = ora('Fetching components from server\n').start();
-      const data = await getComponentsFromServer(library, organization);
-      spinner.stop();
-      await displayServerComponents(data, answers);
+
+      try {
+        const data = await getComponentsFromServer(library, organization);
+        spinner.stop();
+        await displayServerComponents(data, answers);
+      }
+      catch (error) {
+
+        if (error.indexOf("ECONNREFUSED") >= 0) {
+          console.log(`\n${chalk.bold.red('Error occurred in authentication. Please regenerate using authenticate')}`);
+        }
+        else {
+          console.log(`${chalk.bold.red(error)}`);
+        }
+
+        // spinner.stop();
+        process.exit(1);
+      }
+
 
       break;
     }

package/src/tasks/promote-webpack/index.js

@@ -9,7 +9,8 @@ import inquirer from 'inquirer';
 import {
   convertIntoPascalCase,
   checkPathAccess,
-  showVersion
+  showVersion,
+  updateUseWebPackPromotion
 } from '../../util.js';
 
 import {
@@ -22,8 +23,6 @@ import {
 
 
 
-let redirectFile = "";
-
 export const copyWebPack = async () => {
 
    // first check to see if already have the file
@@ -79,48 +78,23 @@ export const copyWebPack = async () => {
     }
 
 
-
-
-
+    console.log(chalk.bold.green(`Bundler now using ${newWebPackConfigDir}.`));
+    console.log(chalk.bold.green(`Utilize this file for webpack modifications.`));
 
   }
 
-  redirectFile = newWebPackConfigDir;
-
-
-
-}
-
-export const updateBuilder = async () => {
-
-  const builderIndexDir = fileURLToPath(new URL(BUILDER_INDEX_FILE_PATH, import.meta.url));
-
-  let indexFileJS = fs.readFileSync(builderIndexDir, { encoding: 'utf8' });
 
-  if (indexFileJS.length > 0) {
-    // comment out original webpack reference
-
-    // if not commented out, comment out
-    if (indexFileJS.indexOf("// import configFactory from './webpack.config.js';") < 0) {
-      indexFileJS = indexFileJS.replaceAll("import configFactory from './webpack.config.js';", "// import configFactory from './webpack.config.js';");
-    }
 
-    // uncomment out promoted webpack reference
-    indexFileJS = indexFileJS.replaceAll("// import configFactory from '../../../../../../../webpack.config.js';", "import configFactory from '../../../../../../../webpack.config.js';");
 
-    fs.writeFileSync(builderIndexDir, indexFileJS, { encoding: 'utf8' });
 
-    console.log(chalk.bold.green(`Bundler now using ${redirectFile}.`));
-    console.log(chalk.bold.green(`Utilize this file for webpack modifications.`));
-  }
+}
 
 
-}
 
 export default async options => {
   showVersion();
 
   await copyWebPack();
-  await updateBuilder();
+  await updateUseWebPackPromotion(true);
 
 };