@pega/custom-dx-components 8.8.17 → 8.8.18

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

@@ -3,10 +3,12 @@ import inquirer from 'inquirer';
 import ora from 'ora';
 
 import {
+  deleteInfinityServerComponent,
+  deleteLaunchpadServerComponent,
   deleteLocalComponent,
-  deleteServerComponent,
   getComponents,
   getPegaServerConfig,
+  standardizeStr,
   validateRulesetVersion
 } from '../../util.js';
 import { getComponentsFromServer } from '../list/helper.js';
@@ -16,10 +18,9 @@ export const SOURCE_OF_COMPONENT_TYPES = {
   LOCAL: 'Local'
 };
 
-export const getDeleteComponentsQuestions = async (options, sourceOfComponentsOption) => {
+export const getDeleteComponentsQuestions = async (options) => {
   const defaultPegaServerConfig = await getPegaServerConfig();
 
-
   return [
     {
       name: 'sourceOfComponents',
@@ -34,30 +35,42 @@ export const getDeleteComponentsQuestions = async (options, sourceOfComponentsOp
   ];
 };
 
-
-
-export const deleteLocalComponents = async sourceOfComponents => {
+export const deleteLocalComponents = async (sourceOfComponents, options) => {
   const localComponents = await getComponents();
 
-  for (var index in localComponents) {
+  // eslint-disable-next-line no-restricted-syntax, guard-for-in
+  for (const index in localComponents) {
     console.log(chalk.bold.green(localComponents[index]));
   }
 
   if (localComponents.length > 0) {
-    const answers = await inquirer.prompt([
-
-      {
-        name: 'confirmDeletion',
-        type: 'confirm',
-        message: 'Delete all local ?',
-        default: false
+    if (options.params.length >= 5) {
+      const sDeletion = options.params[4];
+      const confirmDeletion = sDeletion === 'Y' || sDeletion === 'y' || sDeletion === true || sDeletion === 'true';
+      if (confirmDeletion) {
+        // eslint-disable-next-line no-restricted-syntax, guard-for-in
+        for (const index in localComponents) {
+          const componentToDelete = localComponents[index];
+          // console.log(chalk.bold.green("Deleting: " + componentToDelete));
+          // eslint-disable-next-line no-await-in-loop
+          await deleteLocalComponent(componentToDelete);
+        }
       }
-    ]);
-    if (answers.confirmDeletion) {
-      for (var index in localComponents) {
-        var componentToDelete = localComponents[index];
-        //console.log(chalk.bold.green("Deleting: " + componentToDelete));
-        await deleteLocalComponent(componentToDelete);
+    } else {
+      const answers = await inquirer.prompt([
+        {
+          name: 'confirmDeletion',
+          type: 'confirm',
+          message: 'Delete all local ?',
+          default: false
+        }
+      ]);
+      if (answers.confirmDeletion) {
+        for (const component of localComponents) {
+          // console.log(chalk.bold.green("Deleting: " + componentToDelete));
+          // eslint-disable-next-line no-await-in-loop
+          await deleteLocalComponent(component);
+        }
       }
     }
   } else {
@@ -67,87 +80,121 @@ export const deleteLocalComponents = async sourceOfComponents => {
 
 export const deleteServerComponents = async (sourceOfComponents, answers) => {
   const spinner = ora('Fetching components from server').start();
+  const defaultPegaServerConfig = await getPegaServerConfig();
+  const isLaunchpad = defaultPegaServerConfig.serverType === 'launchpad';
   const data = await getComponentsFromServer(answers);
-  const defaultPegaConfig = await getPegaServerConfig();
 
-  const serverComponents = JSON.parse(data);
+  // const serverComponents = isLaunchpad ? data : data.pxResults;
+  let serverComponents;
+  if (isLaunchpad) {
+    serverComponents = data;
+  } else {
+    try {
+      if (typeof data === 'object') {
+        serverComponents = data.pxResults;
+      } else {
+        serverComponents = JSON.parse(data).pxResults;
+      }
+    } catch (ex) {
+      /* empty */
+    }
+  }
+
   spinner.stop();
-  if (serverComponents && serverComponents.pxResults?.length > 0) {
-    const choicesArr = serverComponents.pxResults.map(({ label, pyRuleSet, pyRuleSetVersion }) => {
-      const name = `${standardizeStr(label, 45)} ${standardizeStr(pyRuleSet, 30)} ${standardizeStr(
-        pyRuleSetVersion,
-        20
-      )}`;
-
-      const value = `${label}~|~${pyRuleSet}~|~${pyRuleSetVersion}`;
-      const short = `Selected component : ${chalk.redBright(
-        `${label} ${pyRuleSet} : ${pyRuleSetVersion}`
-      )}`;
-
-      return { name, value, short };
-    });
-
-    const selectedComp = await inquirer.prompt([
-      {
-        name: 'rulesetName',
-        message: 'Enter ruleset name',
-        default: defaultPegaConfig.rulesetName,
-        validate: value => {
-          if (value.trim()) {
-            return true;
-          }
-          return 'Ruleset name cannot be empty';
+
+  if (serverComponents && serverComponents?.length > 0) {
+    if (isLaunchpad) {
+      serverComponents.forEach((component) => {
+        console.log(chalk.bold.green(component.name));
+      });
+
+      const confirmDeletionAnswers = await inquirer.prompt([
+        {
+          name: 'confirmDeletion',
+          type: 'confirm',
+          message: 'All custom components for the tenant would be deleted. Do you want to proceed ?',
+          default: false
         }
-      },
-      {
-        name: 'rulesetVersion',
-        message: 'Enter ruleset version',
-        default: defaultPegaConfig.rulesetVersion,
-        validate: value => {
-          if (validateRulesetVersion(value)) {
-            return true;
-          }
-          return 'Please provide compatible version e.g 01-01-01';
+      ]);
+
+      if (confirmDeletionAnswers.confirmDeletion) {
+        const componentsList = serverComponents.map((component) => `${component.name}~|~`);
+        for (const componentToDelete of componentsList) {
+          // eslint-disable-next-line no-await-in-loop
+          await deleteLaunchpadServerComponent(componentToDelete);
         }
       }
+    } else {
+      const choicesArr = serverComponents.map(({ label, pyRuleSet, pyRuleSetVersion }) => {
+        const name = `${standardizeStr(label, 45)} ${standardizeStr(pyRuleSet, 30)} ${standardizeStr(pyRuleSetVersion, 20)}`;
+
+        const value = `${label}~|~${pyRuleSet}~|~${pyRuleSetVersion}`;
+        const short = `\n Selected component : ${chalk.redBright(`${label} ${pyRuleSet} : ${pyRuleSetVersion}`)}`;
+
+        return { name, value, short };
+      });
+
+      const selectedComp = await inquirer.prompt([
+        {
+          name: 'rulesetName',
+          message: 'Enter ruleset name',
+          default: defaultPegaServerConfig.rulesetName,
+          validate: (value) => {
+            if (value.trim()) {
+              return true;
+            }
+            return 'Ruleset name cannot be empty';
+          }
+        },
+        {
+          name: 'rulesetVersion',
+          message: 'Enter ruleset version',
+          default: defaultPegaServerConfig.rulesetVersion,
+          validate: (value) => {
+            if (validateRulesetVersion(value)) {
+              return true;
+            }
+            return 'Please provide compatible version e.g 01-01-01';
+          }
+        }
       ]);
 
-      for (var index in choicesArr) {
-        var componentToDelete = choicesArr[index].value;
-        var arData = componentToDelete.split("~|~");
-        if (arData[1] == selectedComp.rulesetName && arData[2] == selectedComp.rulesetVersion) {
-          console.log(chalk.bold.green(arData[0]));
+      let bHasAtLeastOneComponent = false;
+      for (const choice of choicesArr) {
+        const componentToDelete = choice.value;
+        const [name, rulesetName, rulesetVersion] = componentToDelete.split('~|~');
+        if (rulesetName === selectedComp.rulesetName && rulesetVersion === selectedComp.rulesetVersion) {
+          console.log(chalk.bold.green(name));
+          bHasAtLeastOneComponent = true;
         }
       }
 
-
-    const answers = await inquirer.prompt([
-      {
-        name: 'confirmDeletion',
-        type: 'confirm',
-        message: 'Do you want to delete these components ?',
-        default: false
+      if (!bHasAtLeastOneComponent) {
+        console.log(chalk.bold.redBright(`No custom components in ${sourceOfComponents} that match ruleSet:${selectedComp.rulesetName}.`));
+        process.exit();
       }
-    ]);
-    if (answers.confirmDeletion) {
-      for (var index in choicesArr) {
-        var componentToDelete = choicesArr[index].value;
-        var arData = componentToDelete.split("~|~");
-        if (arData[1] == selectedComp.rulesetName && arData[2] == selectedComp.rulesetVersion) {
-          await deleteServerComponent(componentToDelete);
+
+      const confirmDeletionAnswers = await inquirer.prompt([
+        {
+          name: 'confirmDeletion',
+          type: 'confirm',
+          message: 'Do you want to delete these components ?',
+          default: false
+        }
+      ]);
+      if (confirmDeletionAnswers.confirmDeletion) {
+        for (const choice of choicesArr) {
+          const componentToDelete = choice.value;
+          // eslint-disable-next-line no-unused-vars
+          const [name, rulesetName, rulesetVersion] = componentToDelete.split('~|~');
+          if (rulesetName === selectedComp.rulesetName && rulesetVersion === selectedComp.rulesetVersion) {
+            // eslint-disable-next-line no-await-in-loop
+            await deleteInfinityServerComponent(componentToDelete);
+          }
         }
       }
     }
-
-
   } else {
     console.log(chalk.bold.redBright(`No custom components in ${sourceOfComponents}`));
   }
 };
-
-export const standardizeStr = (str, leng) => {
-  for (let i = str.length; i <= leng; i++) {
-    str += ' ';
-  }
-  return str;
-};

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

@@ -1,20 +1,13 @@
 import inquirer from 'inquirer';
-import ora from 'ora';
-import chalk from 'chalk';
-
-import {
-  deleteLocalComponents,
-  SOURCE_OF_COMPONENT_TYPES,
-  deleteServerComponents,
-  getDeleteComponentsQuestions
-} from './helper.js';
 
 import { showVersion } from '../../util.js';
 
-const deleteComponentsFn = async (sourceOfComponents, answers) => {
+import { deleteLocalComponents, SOURCE_OF_COMPONENT_TYPES, deleteServerComponents, getDeleteComponentsQuestions } from './helper.js';
+
+const deleteComponentsFn = async (sourceOfComponents, answers, options) => {
   switch (sourceOfComponents) {
     case SOURCE_OF_COMPONENT_TYPES.LOCAL: {
-      await deleteLocalComponents(sourceOfComponents);
+      await deleteLocalComponents(sourceOfComponents, options);
       break;
     }
     case SOURCE_OF_COMPONENT_TYPES.SERVER: {
@@ -28,22 +21,22 @@ const deleteComponentsFn = async (sourceOfComponents, answers) => {
   }
 };
 
-export default async options => {
+export default async (options) => {
   showVersion();
 
   let sourceOfComponentsOption = SOURCE_OF_COMPONENT_TYPES.LOCAL;
   if (options.params[3] === SOURCE_OF_COMPONENT_TYPES.LOCAL) {
     sourceOfComponentsOption = options.params[3];
-    await deleteComponentsFn(sourceOfComponentsOption);
+    await deleteComponentsFn(sourceOfComponentsOption, null, options);
   } else if (options.params[3] === SOURCE_OF_COMPONENT_TYPES.SERVER) {
     sourceOfComponentsOption = options.params[3];
     const questions = await getDeleteComponentsQuestions(options, sourceOfComponentsOption);
     const answers = await inquirer.prompt(questions);
-    await deleteComponentsFn(sourceOfComponentsOption, answers);
+    await deleteComponentsFn(sourceOfComponentsOption, answers, options);
   } else {
     const questions = await getDeleteComponentsQuestions(options);
     const answers = await inquirer.prompt(questions);
     const { sourceOfComponents } = answers;
-    await deleteComponentsFn(sourceOfComponents, answers);
+    await deleteComponentsFn(sourceOfComponents, answers, options);
   }
 };

package/src/tasks/init/index.js

@@ -11,12 +11,7 @@ import Listr from 'listr';
 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';
 
@@ -26,7 +21,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'
   });
@@ -36,13 +31,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
   });
@@ -73,7 +68,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
   });
@@ -82,16 +77,13 @@ 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 };
@@ -102,11 +94,12 @@ export default async options => {
       fs.mkdirSync(projectDirectory);
     } else {
       console.log(chalk.bold.red(`A project with name ${projectName} already exists. Exiting...`));
-      process.exit(1);
+      process.exit();
     }
 
     const targetDirectory = options.targetDirectory || process.cwd();
     options.targetDirectory = path.join(targetDirectory, projectName);
+    options.componentDirectory = path.join(options.targetDirectory, 'node_modules/@pega/custom-dx-components');
   });
 
   const installDependenciesText = `Installing dependencies. This will take a couple of minutes.`;
@@ -128,8 +121,15 @@ 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 })
+      },
+      {
+        title: 'Installing quick run',
+        task: () => execPromise('npm i -g npm-quick-run', { cwd: options.targetDirectory })
       }
     ],
     {
@@ -139,9 +139,7 @@ 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/babel.config.cjs

@@ -0,0 +1,13 @@
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        targets: {
+          node: 'current'
+        }
+      }
+    ]
+  ],
+  sourceType: 'unambiguous'
+};

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

@@ -0,0 +1,21 @@
+module.exports = {
+  verbose: true,
+  moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx'],
+  transform: {
+    '^.+\\.[t|j]sx?$': 'babel-jest'
+  },
+  collectCoverage: true,
+  testPathIgnorePatterns: [],
+  transformIgnorePatterns: [],
+  modulePathIgnorePatterns: [],
+  coveragePathIgnorePatterns: [],
+  collectCoverageFrom: ['./node_modules/@pega/custom-dx-components/src/*.js'],
+  coverageThreshold: {
+    global: {
+      statements: 79,
+      branches: 74,
+      functions: 81,
+      lines: 80
+    }
+  }
+};

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

@@ -4,6 +4,7 @@
   "description": "{{description}}",
   "organization": "{{organization}}",
   "main": "src/index.js",
+  "type": "module",
   "scripts": {
     "startStorybook": "start-storybook --port 6040 --quiet",
     "lint": "run-p -cl lint:*",
@@ -20,6 +21,8 @@
     "update": "custom-dx-components update",
     "delete": "custom-dx-components delete",
     "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)\"",
@@ -43,8 +46,8 @@
   "license": "Enter License",
   "sideEffects": false,
   "dependencies": {
-    "@pega/cosmos-react-core": "^3.0.1",
-    "@pega/cosmos-react-work": "3.0.1",
+    "@pega/cosmos-react-core": "^3.0.11",
+    "@pega/cosmos-react-work": "3.0.11",
     "dayjs": "^1.11.5",
     "polished": "^4.2.2",
     "prop-types": "^15.8.1",
@@ -58,7 +61,7 @@
   },
   "devDependencies": {
     "@pega/configs": "^0.5.3",
-    "@pega/custom-dx-components": "^8.8.17",
+    "@pega/custom-dx-components": "^8.8.18",
     "@pega/eslint-config": "^0.3.2",
     "@storybook/addon-actions": "^6.5.12",
     "@storybook/addon-essentials": "^6.5.12",
@@ -85,7 +88,6 @@
     "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/init/template/test/assets/components/create/Pega_DXIL_MyTestText/config.json

@@ -0,0 +1,55 @@
+{
+  "name": "Pega_DXIL_MyTestText",
+  "label": "My Test Text",
+  "description": "My Test Text Description",
+  "organization": "Pega",
+  "version": "0.0.1",
+  "library": "DXIL",
+  "allowedApplications": [],
+  "componentKey": "Pega_DXIL_MyTestText",
+  "type": "Field",
+  "subtype": "Text",
+  "properties": [
+    {
+      "name": "label",
+      "label": "Label value",
+      "format": "TEXT"
+    },
+    {
+      "name": "placeholder",
+      "label": "Placeholder",
+      "format": "TEXT"
+    },
+    {
+      "name": "visibility",
+      "label": "Visible",
+      "format": "VISIBILITY"
+    },
+    {
+      "name": "disabled",
+      "label": "Disabled",
+      "format": "DISABLED"
+    },
+    {
+      "name": "required",
+      "label": "Required",
+      "format": "REQUIRED"
+    },
+    {
+      "label": "Advanced",
+      "format": "GROUP",
+      "collapsible": true,
+      "properties": [
+        {
+          "name": "testId",
+          "label": "Test ID",
+          "format": "TEXT",
+          "ignorePattern": "[^-_\\p{N}\\p{L}]",
+          "includeAnnotations": false
+        }
+      ]
+    }
+  ],
+  "defaultConfig": {
+  }
+}

package/src/tasks/init/template/test/assets/components/create/Pega_DXIL_MyTestText/demo.stories.jsx

@@ -0,0 +1,51 @@
+import { useState } from 'react';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import { stateProps, configProps } from './mock.stories';
+
+import PegaDxilMyTestText from './index.jsx';
+
+export default {
+  title: 'PegaDxilMyTestText',
+  decorators: [withKnobs],
+  component: PegaDxilMyTestText
+};
+
+export const basePegaDxilMyTestText = () => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const [value, setValue] = useState(configProps.value);
+
+  const props = {
+    value,
+    placeholder: configProps.placeholder,
+    label: configProps.label,
+    testId: configProps.testId,
+    hasSuggestions: configProps.hasSuggestions,
+
+    getPConnect: () => {
+      return {
+        getStateProps: () => {
+          return stateProps;
+        },
+        getActionsApi: () => {
+          return {
+            updateFieldValue: (propName, theValue) => {
+              setValue(theValue);
+            },
+            triggerFieldChange: () => {/* nothing */}
+          };
+        },
+        ignoreSuggestion: () => {/* nothing */},
+        acceptSuggestion: () => {/* nothing */},
+        setInheritedProps: () => {/* nothing */},
+        resolveConfigProps: () => {/* nothing */}
+      };
+    }
+  };
+
+  return (
+    <>
+      <PegaDxilMyTestText {...props} />
+    </>
+  );
+};

package/src/tasks/init/template/test/assets/components/create/Pega_DXIL_MyTestText/index.jsx

@@ -0,0 +1,60 @@
+import PropTypes from 'prop-types';
+import { Input, Label } from '@pega/cosmos-react-core';
+
+import StyledPegaDxilMyTestTextWrapper from './styles';
+
+
+// Duplicated runtime code from Constellation Design System Component
+
+// props passed in combination of props from property panel (config.json) and run time props from Constellation
+// any default values in config.pros should be set in defaultProps at bottom of this file
+const PegaDxilMyTestText = props => {
+  const { getPConnect, value, placeholder, disabled, readOnly, required, label, testId } = props;
+
+  const pConn = getPConnect();
+  const actions = pConn.getActionsApi();
+  const propName = pConn?.getStateProps()?.value;
+
+  const handleOnChange = event => {
+    const { value: updatedValue } = event.target;
+    actions.updateFieldValue(propName, updatedValue);
+  };
+
+  return (
+    <StyledPegaDxilMyTestTextWrapper>
+      <Label>{label}</Label>
+      <Input
+        type='text'
+        value={value}
+        placeholder={placeholder}
+        disabled={disabled}
+        readOnly={readOnly}
+        required={required}
+        onChange={handleOnChange}
+        testId={testId}
+      />
+    </StyledPegaDxilMyTestTextWrapper>
+  );
+};
+
+PegaDxilMyTestText.defaultProps = {
+  value: '',
+  placeholder: '',
+  disabled: false,
+  readOnly: false,
+  required: false,
+  testId: null
+};
+
+PegaDxilMyTestText.propTypes = {
+  label: PropTypes.string,
+  value: PropTypes.string,
+  placeholder: PropTypes.string,
+  getPConnect: PropTypes.func.isRequired,
+  disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  readOnly: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  required: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  testId: PropTypes.string
+};
+
+export default PegaDxilMyTestText;