@pega/custom-dx-components 2.0.15 → 2.0.16

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

@@ -1,191 +1,10 @@
 {
-  "root": true,
   "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"],
+  "parserOptions": { "project": "tsconfig.json" },
+  "root": true,
+  "ignorePatterns": ["node_modules", "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",
-
-    // 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"]
-      }
-    }
-  ]
+    "react/react-in-jsx-scope": "off"
+  }
 }

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

@@ -10,15 +10,12 @@
     "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)\"",
@@ -38,8 +35,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.0-rc.4",
+    "@pega/cosmos-react-work": "3.0.0-rc.4",
     "@storybook/addon-knobs": "^6.3.1",
     "dayjs": "^1.11.5",
     "jest": "^29.3.1",
@@ -55,8 +52,7 @@
   },
   "devDependencies": {
     "@pega/configs": "^0.3.4",
-    "@pega/custom-dx-components": "^2.0.15",
-    "@pega/eslint-config": "^0.3.2",
+    "@pega/custom-dx-components": "^2.0.16",
     "@storybook/addon-actions": "^6.5.12",
     "@storybook/addon-essentials": "^6.5.12",
     "@storybook/addon-links": "^6.5.12",
@@ -69,18 +65,7 @@
     "@types/react-color": "^3.0.6",
     "@types/react-dom": "^17.0.11",
     "@types/styled-components": "^5.1.26",
-    "@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.23.1",
     "npm-run-all": "^4.1.5",
     "prettier": "2.7.1",
     "stylelint": "^14.11.0",

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

@@ -14,7 +14,6 @@
   "component": {
     "library": "",
     "type": "",
-    "version": "",
     "subtype": "",
     "description": "",
     "icon": ""

package/src/tasks/list/index.js

@@ -10,8 +10,6 @@ import {
   getListComponentsQuestions
 } from './helper.js';
 
-import { showVersion } from '../../util.js';
-
 const getList = async (sourceOfComponents, answers) => {
   switch (sourceOfComponents) {
     case SOURCE_OF_COMPONENT_TYPES.LOCAL: {
@@ -34,8 +32,6 @@ 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/{bundle → publish/bundle}/builder/webpack.config.js

@@ -306,12 +306,14 @@ export default (
         contextRegExp: /moment$/
       }),
       /* Ignore cosmos icons */
+
       new webpack.IgnorePlugin({
         resourceRegExp: /^\.\/icons$/,
         contextRegExp: /@pega\/cosmos-react-core\/lib\/components\/Icon$/
       }),
 
       /* Ignore cosmos icons - windows */
+
       new webpack.IgnorePlugin({
         resourceRegExp: /^\.\/icons$/,
         contextRegExp: /@pega\\cosmos-react-core\\lib\\components\\Icon$/

package/src/tasks/{bundle → publish/bundle}/index.js

@@ -2,8 +2,8 @@ import path from 'path';
 import fs from 'fs';
 import { stat } from 'fs/promises';
 
-import { BUILD_CONFIG_JSON_FILENAME } from '../../constants.js';
-import { getComponentDirectoryPath } from '../../util.js';
+import { BUILD_CONFIG_JSON_FILENAME } from '../../../constants.js';
+import { getComponentDirectoryPath } from '../../../util.js';
 
 import buildComponent from './builder/index.js';
 

package/src/tasks/publish/index.js

@@ -4,15 +4,10 @@ import chalk from 'chalk';
 
 import validate from '../validator/index.js';
 
-import bundleComponent from '../bundle/index.js';
-import { lintComponent } from '../linter/index.js';
-
-import { getComponentDirectoryPath, showVersion } from '../../util.js';
+import bundleComponent from './bundle/index.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;
@@ -29,14 +24,6 @@ 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),

package/src/util.js

@@ -7,8 +7,6 @@ import chalk from 'chalk';
 import mustache from 'mustache';
 import pascalCase from 'pascalcase';
 import fetch from 'node-fetch';
-import { createRequire } from 'module';
-
 
 import {
   COMPONENTS_DIRECTORY_PATH,
@@ -220,14 +218,6 @@ export const validateRulesetVersion = str => {
   return regex.test(str);
 };
 
-export const showVersion = () => {
-  // get package version, so can display at start
-  const require = createRequire(import.meta.url);
-  const pData = require("@pega/custom-dx-components/package.json");
-
-  console.log(chalk.green("DX Component Builder v" + pData.version));
-}
-
 export const getOOTBComponents = async () => {
   return new Promise((resolve, reject) => {
     fs.readFile(OOTB_COMPONENTS, 'utf-8', async (err, data) => {

package/src/tasks/build/helper.js

@@ -1,123 +0,0 @@
-import fs from 'fs';
-import path from 'path';
-import https from 'https';
-
-import fetch from 'node-fetch';
-import AdmZip from 'adm-zip';
-import chalk from 'chalk';
-
-import {
-  constructCompleteUrl,
-  getComponentDirectoryPath,
-  getComponents,
-  getPegaServerConfig,
-  validateRulesetVersion
-} from '../../util.js';
-import { PUBLISH_COMPONENT_SERVICE_REST_ENDPOINT, TOKEN_PATH } from '../../constants.js';
-
-export const getPublishComponentQuestions = async () => {
-  const components = await getComponents();
-  const defaultPegaConfig = await getPegaServerConfig();
-
-  return [
-    {
-      name: 'componentKey',
-      type: 'rawlist',
-      message: 'Select component to build',
-      choices: components
-    },
-    {
-      name: 'sourceMap',
-      message: 'Generate source map ?',
-      default: defaultPegaConfig.sourceMap,
-      when: () => false && !process.env.SOURCE_MAP
-    },
-    {
-      name: 'devBuild',
-      message: 'Generate development build ?',
-      default: defaultPegaConfig.devBuild
-    }
-  ];
-};
-
-export const zipComponent = async componentKey => {
-  const srcDirectory = await getComponentDirectoryPath(componentKey);
-  const buildDirectory = await path.join(path.resolve(), 'dist/components', componentKey);
-  const configJson = `${srcDirectory}/config.json`;
-
-  const zip = new AdmZip();
-
-  zip.addLocalFolder(srcDirectory, 'src/');
-  zip.addLocalFile(configJson);
-  zip.addLocalFolder(buildDirectory);
-  const zipContent = zip.toBuffer().toString('base64');
-
-  const configContent = Buffer.from(fs.readFileSync(`${srcDirectory}/config.json`)).toString();
-  fs.rmdir('dist', { recursive: true }, err => {
-    if (err) {
-      throw err;
-    }
-  });
-  return { zipContent, configContent };
-};
-
-export const publishComponentToServer = async data => {
-  const { configContent, zipContent, componentKey, rulesetName, rulesetVersion } = data;
-
-  const apiBody = {
-    configContent,
-    zipContent,
-    componentKey: JSON.parse(configContent).componentKey,
-    publishFor: 'constellation',
-    rulesetName,
-    rulesetVersion,
-    category: ''
-  };
-  const defaultPegaConfig = await getPegaServerConfig();
-  const url = constructCompleteUrl(
-    defaultPegaConfig.server,
-    PUBLISH_COMPONENT_SERVICE_REST_ENDPOINT
-  );
-  try {
-    const OauthData = fs.readFileSync(TOKEN_PATH, 'utf8');
-    if (OauthData) {
-      const {
-        access_token: accessToken,
-        token_type: tokenType,
-        refresh_token: refreshToken
-      } = JSON.parse(OauthData);
-      let status = 500;
-      fetch(url, {
-        method: 'POST',
-        agent: new https.Agent({ rejectUnauthorized: false }),
-        headers: {
-          Authorization: `${tokenType} ${accessToken}`
-        },
-        body: JSON.stringify(apiBody)
-      })
-        .then(response => {
-          status = response.status;
-          return response.text();
-        })
-        .then(resp => {
-          const respData = JSON.parse(resp);
-          if (status === 401) {
-            throw new Error(
-              'Error occured in authentication. Please regenerate using authenticate'
-            );
-            // console.log(accessTokenUri, refreshToken);
-            /* TODO - Handle refresh_token */
-          } else if (status == 200) {
-            console.log(chalk.bold.green(`Success : ${respData.message}`));
-          } else {
-            throw new Error(`${respData.message}`);
-          }
-        })
-        .catch(e => Promise.reject(`${chalk.bold.red(e)}`));
-    } else {
-      throw new Error(`Error occured in authentication. Please regenerate using authenticate`);
-    }
-  } catch (err) {
-    throw new Error(`Error occured in authentication. Please regenerate using authenticate`);
-  }
-};

package/src/tasks/build/index.js

@@ -1,54 +0,0 @@
-import inquirer from 'inquirer';
-import Listr from 'listr';
-import chalk from 'chalk';
-
-import validate from '../validator/index.js';
-
-import bundleComponent from '../bundle/index.js';
-import lintComponent from '../linter/index.js';
-import { getPublishComponentQuestions, publishComponentToServer, zipComponent } from './helper.js';
-import { getComponentDirectoryPath, showVersion } from '../../util.js';
-
-export default async options => {
-  showVersion();
-
-  const questions = await getPublishComponentQuestions();
-  const answers = await inquirer.prompt(questions);
-  const { componentKey, sourceMap, devBuild } = answers;
-
-  let content = {
-    ...answers
-  };
-
-  const tasks = new Listr(
-    [
-      {
-        title: 'Validate config schema',
-        task: async () => {
-          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),
-        skip: () => (options.skipBundle ? 'Skipped bundling component' : undefined)
-      }
-    ],
-    {
-      exitOnError: true
-    }
-  );
-
-  await tasks.run().catch(err => {
-    console.log(chalk.bold.red(err.toString()));
-  });
-  return true;
-};

package/src/tasks/create/templates/Constellation/Field/Boolean/mock.stories.js.mustache

@@ -1,21 +0,0 @@
-export const configProps = {
-  value: true,
-  label: 'Boolean label',
-  helperText: 'Test helper text',
-  caption: 'Boolean caption',
-  validatemessage: '',
-  hideLabel: false,
-  testId: '12345678',
-  additionalProps: {},
-  displayMode: '',
-  variant: '',
-  trueLabel: 'True',
-  falseLabel: 'False',
-  disabled: false,
-  readOnly: false,
-  required: true
-};
-
-export const stateProps = {
-  value: '.Test'
-};

package/src/tasks/create/templates/Constellation/Field/Date/DateFormatter.js.mustache

@@ -1,61 +0,0 @@
-import dayjs from 'dayjs';
-import relativeTime from 'dayjs/plugin/relativeTime';
-import localizedFormat from 'dayjs/plugin/localizedFormat';
-import utc from 'dayjs/plugin/utc';
-import tzone from 'dayjs/plugin/timezone';
-
-dayjs.extend(relativeTime);
-dayjs.extend(localizedFormat);
-dayjs.extend(utc);
-dayjs.extend(tzone);
-
-const types = ['fromNow', 'customFormat'];
-
-
-
-// value should be in ISO 8601 format.
-function DateFormatter(
-  value,
-  { type = types[1], format = "DD/MM/YYYY", timezone } = {}
-) {
-  if (!value) return value;
-  switch (type) {
-    case types[1]:
-      if (timezone) return dayjs(value).tz(timezone).format(format);
-      return dayjs(value).format(format);
-    case types[0]:
-      return dayjs(value).from(dayjs());
-    default:
-      return value;
-  }
-}
-
-// value should be in hh:mm:ss format (00:00:00 - 23:59:59).
-function TimeFormatter(value, options) {
-  if (!value) return value;
-  const { locale = "en-US" } = options;
-  const timeOnlyRegex = /^(?:[01]\d|2[0123]):(?:[012345]\d):(?:[012345]\d)$/;
-  if (value.length === 8 && timeOnlyRegex.test(value)) {
-    const tempDate = new Date();
-    const hours = parseInt(value.substr(0, 2), 10);
-    const minutes = parseInt(value.substr(3, 2), 10);
-    const seconds = parseInt(value.substr(6, 2), 10);
-    tempDate.setHours(hours);
-    tempDate.setMinutes(minutes);
-    tempDate.setSeconds(seconds);
-    return tempDate.toLocaleTimeString(locale);
-  }
-  return DateFormatter(value, options);
-}
-
-export default {
-  Date: (value, options) => DateFormatter(value, { type: 'customFormat', ...options }),
-  'Date-Time-Default': (value, options) =>
-    DateFormatter(value, { ...options, type: 'customFormat', format: 'lll' }),
-  'Time-Default': (value, options) =>
-    TimeFormatter(value, {
-      ...options,
-      type: 'customFormat',
-      format: 'hh:mm A'
-    })
-};

package/src/tasks/create/templates/Constellation/Field/Date/FormattedText.jsx.mustache

@@ -1,41 +0,0 @@
-import { FieldValueList } from '@pega/cosmos-react-core';
-import PropTypes from 'prop-types';
-
-import { format } from './date.js';
-
-export default function FormattedText(props) {
-  const { formatType, label, value, testId, hideLabel, variant, additionalProps } = props;
-
-  let text = value;
-
-  text = format(text, formatType, additionalProps);
-
-  const fields = [
-    {
-      id: label.toLowerCase(),
-      name: hideLabel ? '' : label,
-      value: text
-    }
-  ];
-  return <FieldValueList variant={variant} fields={fields} data-testid={testId} />;
-}
-
-FormattedText.defaultProps = {
-  formatType: 'none',
-  variant: 'stacked',
-  value: undefined,
-  label: '',
-  testId: null,
-  hideLabel: false,
-  additionalProps: {}
-};
-
-FormattedText.propTypes = {
-  formatType: PropTypes.string,
-  variant: PropTypes.oneOf(['inline', 'stacked']),
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),
-  label: PropTypes.string,
-  testId: PropTypes.string,
-  additionalProps: PropTypes.objectOf(PropTypes.any),
-  hideLabel: PropTypes.bool
-};