@pega/custom-dx-components 2.0.10 → 2.0.12

package/src/tasks/create/templates/Constellation/Widget/PAGE-CASE/styles.js.mustache

@@ -2,6 +2,6 @@ import styled, { css } from 'styled-components';
 
 export default styled.div(() => {
   return css`
-    margin: 8px 0;
+    margin: 0px 0;
   `;
 });

package/src/tasks/delete/helper.js

@@ -13,6 +13,8 @@ import {
 } from '../../util.js';
 import { getComponentsFromServer } from '../list/helper.js';
 
+
+
 export const SOURCE_OF_COMPONENT_TYPES = {
   SERVER: 'Server',
   LOCAL: 'Local'
@@ -92,6 +94,8 @@ export const deleteServerComponents = async (sourceOfComponents, answers) => {
       choices: choicesArr
     });
     await deleteServerComponent(answers.componentToDelete);
+
+
   } else {
     console.log(chalk.bold.redBright(`No custom components in ${sourceOfComponents}`));
   }

package/src/tasks/delete/index.js

@@ -9,6 +9,8 @@ import {
   getDeleteComponentsQuestions
 } from './helper.js';
 
+import { showVersion } from '../../util.js';
+
 const deleteComponentsFn = async (sourceOfComponents, answers) => {
   switch (sourceOfComponents) {
     case SOURCE_OF_COMPONENT_TYPES.LOCAL: {
@@ -27,6 +29,8 @@ const deleteComponentsFn = async (sourceOfComponents, answers) => {
 };
 
 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];

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

@@ -0,0 +1,175 @@
+import chalk from 'chalk';
+import inquirer from 'inquirer';
+import ora from 'ora';
+
+import { LIST_COMPONENT_SERVICE_REST_ENDPOINT } from '../../constants.js';
+import {
+  constructCompleteUrl,
+  deleteLocalComponent,
+  deleteServerComponent,
+  getComponents,
+  getPegaServerConfig,
+  validateRulesetVersion,
+  nodeFetch
+} from '../../util.js';
+import { getComponentsFromServer } from '../list/helper.js';
+
+export const SOURCE_OF_COMPONENT_TYPES = {
+  SERVER: 'Server',
+  LOCAL: 'Local'
+};
+
+export const getDeleteComponentsQuestions = async (options, sourceOfComponentsOption) => {
+  const defaultPegaServerConfig = await getPegaServerConfig();
+
+
+  return [
+    {
+      name: 'sourceOfComponents',
+      type: 'rawlist',
+      message: 'Delete components from Server or Local ?',
+      choices: Object.values(SOURCE_OF_COMPONENT_TYPES),
+      default: defaultPegaServerConfig.sourceOfComponents,
+      when() {
+        return !options.params[3];
+      }
+    }
+  ];
+};
+
+
+
+export const deleteLocalComponents = async sourceOfComponents => {
+  const localComponents = await getComponents();
+
+  for (var 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 (answers.confirmDeletion) {
+      for (var index in localComponents) {
+        var componentToDelete = localComponents[index];
+        //console.log(chalk.bold.green("Deleting: " + componentToDelete));
+        await deleteLocalComponent(componentToDelete);
+      }
+    }
+  } else {
+    console.log(chalk.bold.redBright(`No custom components in ${sourceOfComponents}`));
+  }
+};
+
+export const deleteServerComponents = async (sourceOfComponents, answers) => {
+  const spinner = ora('Fetching components from server').start();
+  const data = await getComponentsFromServer(answers);
+  const defaultPegaConfig = await getPegaServerConfig();
+
+  const serverComponents = JSON.parse(data);
+  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';
+        }
+      },
+      {
+        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';
+        }
+      }
+      ]);
+
+      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]));
+        }
+      }
+
+
+    const answers = await inquirer.prompt([
+      {
+        name: 'confirmDeletion',
+        type: 'confirm',
+        message: 'Do you want to delete these components ?',
+        default: false
+      }
+    ]);
+    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 answers = await inquirer.prompt({
+      name: 'componentToDelete',
+      type: 'rawlist',
+      pageSize: 10,
+      message: `Select component to delete \n  ${standardizeStr('Rule name', 48)} ${standardizeStr(
+        'Ruleset name',
+        30
+      )} ${standardizeStr('Ruleset version', 22)}`,
+      choices: choicesArr
+    });
+    */
+
+
+
+    /*
+    await deleteServerComponent(answers.componentToDelete);
+    await deleteFromComponentMap(answers.componentToDelete.split("~")[0]);
+    */
+
+  } 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

@@ -0,0 +1,49 @@
+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) => {
+  switch (sourceOfComponents) {
+    case SOURCE_OF_COMPONENT_TYPES.LOCAL: {
+      await deleteLocalComponents(sourceOfComponents);
+      break;
+    }
+    case SOURCE_OF_COMPONENT_TYPES.SERVER: {
+      await deleteServerComponents(sourceOfComponents, answers);
+      break;
+    }
+    default: {
+      console.log('Source of components needs to be either Local or Server');
+      break;
+    }
+  }
+};
+
+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);
+  } 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);
+  } else {
+    const questions = await getDeleteComponentsQuestions(options);
+    const answers = await inquirer.prompt(questions);
+    const { sourceOfComponents } = answers;
+    await deleteComponentsFn(sourceOfComponents, answers);
+  }
+};

package/src/tasks/index.js

@@ -1,9 +1,12 @@
 export { default as createComponent } from './create/index.js';
 export { default as deleteComponent } from './delete/index.js';
+export { default as deleteAllComponents } from './delete-all/index.js';
 export { default as initProject } from './init/index.js';
 export { default as publishComponent } from './publish/index.js';
+export { default as publishAllComponents } from './publish-all/index.js';
 export { default as listComponents } from './list/index.js';
 export { default as updateComponent } from './update/index.js';
 export { default as validate } from './validator/index.js';
 export { default as authenticate } from './authenticate/index.js';
 export { default as upgrade } from './upgrade/index.js';
+export { default as buildComponent } from './build/index.js';

package/src/tasks/init/index.js

@@ -123,7 +123,7 @@ export default async options => {
       },
       {
         title: installDependenciesText,
-        task: () => execPromise('npm i --production=false', { cwd: options.targetDirectory })
+        task: () => execPromise('npm i --force --production=false', { cwd: options.targetDirectory })
       }
     ],
     {

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

@@ -0,0 +1,8 @@
+webpack.config.js
+src/helpers/config_access.js
+*.html
+*.css
+*.json
+*.md
+*.svg
+*.zip

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

@@ -1,10 +1,191 @@
 {
-  "extends": ["@pega"],
-  "parserOptions": { "project": "tsconfig.json" },
   "root": true,
-  "ignorePatterns": ["node_modules", "lib", "!.storybook", ".storybook/public"],
+  "extends": ["@pega"],
+  "parserOptions": {
+    "project": "tsconfig.json",
+    "ecmaVersion": 13
+  },
+  "settings": {
+    "import/resolver": {
+      "typescript": {},
+      "node": {
+        "extensions": [".js", ".jsx"]
+      }
+    },
+    "react": {
+      "version": "detect"
+    }
+  },
+  "ignorePatterns": ["node_modules", "packages/*/lib", "!.storybook", ".storybook/public"],
   "rules": {
+    // Prettier recommends running separately from a linter.
+    // https://prettier.io/docs/en/integrating-with-linters.html#notes
     "prettier/prettier": "off",
-    "react/react-in-jsx-scope": "off"
-  }
+
+    // Disable rules from shared configs we're not ready for yet.
+    "sonarjs/cognitive-complexity": "off",
+    "sonarjs/no-identical-functions": "off",
+    "sonarjs/no-duplicate-string": "off",
+    "sonarjs/no-nested-template-literals": "off",
+
+    //
+    // JA - Override some default lint handling here
+    "@typescript-eslint/array-type": ["error", { "default": "generic" }],
+    // "import/extensions": ["warn", "never"],    // Turning off for now (see below)
+
+    //
+    // Initial release: turning these off; phase in to "warn" or "error" over time
+    //  For "quotes" and "@typescript-eslint/quotes", see override below for .ts/.tsx files
+    "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", // prefer warn but needs different parserOptions
+    "@typescript-eslint/naming-convention": "off", // prefer warn but needs different parserOptions
+    "@typescript-eslint/ban-types": "off", // also, see override below
+
+    //
+    // Initial release: set to error
+    "@typescript-eslint/no-inferrable-types": "error",
+    "eqeqeq": "error",
+    "no-alert": "error",
+    "no-console": "error",
+    "no-fallthrough": "error",
+    "no-undef": "error",
+    "no-unused-vars": "error",
+    "no-var": "error",
+    "prefer-const": "error",
+    "yoda": "error",
+
+    "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": "error",
+    "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",
+    "default-case": "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-empty-function": "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",
+
+    "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"
+  },
+  "overrides": [
+    {
+      "files": "*.@(ts|tsx)",
+      "rules": {
+        "@typescript-eslint/method-signature-style": ["error", "property"],
+        // "@typescript-eslint/ban-types": [
+        //   "warn",
+        //   {
+        //     "types": {
+        //       "Omit": "Please use the 'OmitStrict' type from 'src/types/' instead.",
+        //       "object": false,
+        //       "Function": false
+        //     },
+        //     "extendDefaults": true
+        //   }
+        // ],
+
+        "quotes": "off",
+        "@typescript-eslint/quotes": "off"
+        // [
+        //   "error",
+        //   "single",
+        //   {
+        //     "avoidEscape": true,
+        //     "allowTemplateLiterals": false
+        //   }
+        // ]
+      }
+    },
+    {
+      "files": "*.@(jsx|tsx|mdx)",
+      "rules": {
+        "react/react-in-jsx-scope": "off",
+        // Set up configuration for future sweep
+        "react-hooks/exhaustive-deps": [
+          "off",
+          {
+            "additionalHooks": "useAfterInitialEffect"
+          }
+        ]
+      }
+    },
+    {
+      "files": "*.@(js|jsx|ts|tsx|mdx)",
+      "rules": {}
+    },
+    {
+      "files": ".storybook/*.js",
+      "extends": ["@pega/eslint-config/script"]
+    },
+    {
+      "files": "*/**/mocks/**.@(mocks|styles).@(tsx|ts)",
+      "rules": {
+        "import/prefer-default-export": ["off"]
+      }
+    }
+  ]
 }

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

@@ -10,12 +10,15 @@
     "lint": "run-p -cl lint:*",
     "fix": "run-p -cl fix:*",
     "authenticate": "custom-dx-components authenticate",
+    "buildComponent": "custom-dx-components buildComponent",
     "create": "custom-dx-components create",
     "publish": "custom-dx-components publish",
+    "publishAll": "custom-dx-components publishAll",
     "list": "custom-dx-components list",
     "validate-schema": "custom-dx-components validateSchema",
     "update": "custom-dx-components update",
     "delete": "custom-dx-components delete",
+    "deleteAll": "custom-dx-components deleteAll",
     "lint:types": "tsc --noEmit",
     "lint:es": "eslint .",
     "lint:styles": "stylelint \"./**/*.@(js|jsx|ts|tsx)\"",
@@ -35,8 +38,8 @@
   "license": "Enter License",
   "sideEffects": false,
   "dependencies": {
-    "@pega/cosmos-react-core": "^3.0.0-rc.4",
-    "@pega/cosmos-react-work": "3.0.0-rc.4",
+    "@pega/cosmos-react-core": "^3.0.1",
+    "@pega/cosmos-react-work": "3.0.1",
     "@storybook/addon-knobs": "^6.3.1",
     "dayjs": "^1.11.5",
     "jest": "^29.3.1",
@@ -52,7 +55,8 @@
   },
   "devDependencies": {
     "@pega/configs": "^0.3.4",
-    "@pega/custom-dx-components": "^2.0.10",
+    "@pega/custom-dx-components": "^2.0.12",
+    "@pega/eslint-config": "^0.3.2",
     "@storybook/addon-actions": "^6.5.12",
     "@storybook/addon-essentials": "^6.5.12",
     "@storybook/addon-links": "^6.5.12",
@@ -65,7 +69,18 @@
     "@types/react-color": "^3.0.6",
     "@types/react-dom": "^17.0.11",
     "@types/styled-components": "^5.1.26",
-    "eslint": "^8.23.1",
+    "@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",
     "npm-run-all": "^4.1.5",
     "prettier": "2.7.1",
     "stylelint": "^14.11.0",

package/src/tasks/linter/index.js

@@ -0,0 +1,46 @@
+import { ESLint } from 'eslint';
+import chalk from 'chalk';
+
+export const lintComponent = async (dirToLint) => {
+  // console.log("in dx-component-builder-sdk: lintComponent - dirToLint: " + dirToLint);
+  console.log(chalk.green(` linting ${dirToLint}`));
+
+  // 1. Create an instance.
+  const eslint = new ESLint();
+
+  // 2. Lint files.
+  const results = await eslint.lintFiles([dirToLint]);
+
+  // 3. Format the results.
+  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...`));
+};
+
+// inpsired by https://eslint.org/docs/latest/developer-guide/nodejs-api
+
+// (async function main() {
+//   // 1. Create an instance.
+//   const eslint = new ESLint();
+
+//   // 2. Lint files.
+//   const results = await eslint.lintFiles(["lib/**/*.js"]);
+
+//   // 3. Format the results.
+//   const formatter = await eslint.loadFormatter("stylish");
+//   const resultText = formatter.format(results);
+
+//   // 4. Output it.
+//   console.log(resultText);
+// })().catch((error) => {
+//   process.exitCode = 1;
+//   console.error(error);
+// });
+
+export default lintComponent;

package/src/tasks/list/index.js

@@ -10,6 +10,8 @@ import {
   getListComponentsQuestions
 } from './helper.js';
 
+import { showVersion } from '../../util.js';
+
 const getList = async (sourceOfComponents, answers) => {
   switch (sourceOfComponents) {
     case SOURCE_OF_COMPONENT_TYPES.LOCAL: {
@@ -32,6 +34,8 @@ const getList = async (sourceOfComponents, answers) => {
 };
 
 export default async options => {
+  showVersion();
+
   let sourceOfComponentsOption = SOURCE_OF_COMPONENT_TYPES.LOCAL;
 
   if (options.params[3] === SOURCE_OF_COMPONENT_TYPES.LOCAL) {

package/src/tasks/publish/index.js

@@ -4,10 +4,15 @@ import chalk from 'chalk';
 
 import validate from '../validator/index.js';
 
-import bundleComponent from './bundle/index.js';
+import bundleComponent from '../bundle/index.js';
+import { lintComponent } from '../linter/index.js';
+
+import { getComponentDirectoryPath, showVersion } from '../../util.js';
 import { getPublishComponentQuestions, publishComponentToServer, zipComponent } from './helper.js';
 
 export default async options => {
+  showVersion();
+
   const questions = await getPublishComponentQuestions();
   const answers = await inquirer.prompt(questions);
   const { componentKey, sourceMap, devBuild } = answers;
@@ -24,6 +29,14 @@ export default async options => {
           await validate(componentKey);
         }
       },
+      {
+        title: 'Lint component',
+        task: async () => {
+          const targetDirectory = await getComponentDirectoryPath(componentKey);
+          // console.log(`in buildComponent Lint component task: componentKey: ${componentKey} targetDirectory: ${targetDirectory}`);
+          await lintComponent(targetDirectory);
+        }
+      },
       {
         title: 'Bundle Component',
         task: async () => await bundleComponent(componentKey, sourceMap, devBuild),