@pega/custom-dx-components 0.0.1 → 0.8.2

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

@@ -4,7 +4,12 @@ import webpack from 'webpack';
 import FileSizeReporter from 'react-dev-utils/FileSizeReporter.js';
 import printBuildError from 'react-dev-utils/printBuildError.js';
 
+
+// used by promote and revert webPack commands, do not change
 import configFactory from './webpack.config.js';
+// import configFactory from '../../../../../../../webpack.config.js';
+// do not change
+
 import paths from './paths.js';
 
 // Do this as the first thing so that any code reading it knows the right env.
@@ -36,13 +41,40 @@ const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
 const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
 const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
 
+let compilationErrors = null;
+
 // Create the build and print the deployment instructions.
 function build(config, previousFileSizes) {
   console.log(`Creating a ${Env} build...`);
 
+
+
   const compiler = webpack(config);
   return new Promise((resolve, reject) => {
     compiler.run((err, stats) => {
+
+       if (err != null && typeof (err) == "object") {
+          if (err.error != undefined) {
+            //store and print elsewhere
+            compilationErrors = err.error;
+            //console.log("err:" + err);
+          }
+       }
+       if (stats != null & typeof(stats) == "object") {
+        if (stats.errors != undefined) {
+          console.log("stats:" + stats);
+        }
+        else if (stats.compilation != undefined && stats.compilation.errors != undefined) {
+
+          //store and print elsewhere
+          compilationErrors = stats.compilation.errors;
+
+          console.log("stats:" + stats);
+        }
+
+       }
+
+
       let messages;
       if (err) {
         if (!err.message) {
@@ -131,7 +163,11 @@ export default ({
       .then(
         ({ stats, previousFileSizes, warnings }) => {
           if (warnings.length) {
-            console.log(chalk.yellow('Compiled with warnings.\n'), warnings[0].message);
+            //console.log(chalk.yellow('Compiled with warnings.\n'), warnings[0].message);
+            console.log(chalk.yellow('Compiled with warnings.\n'));
+            for (let warning in warnings) {
+              console.log(chalk.yellow("Warning.."), warnings[warning].message);
+            }
           } else {
             console.log(chalk.green('Compiled successfully.\n'));
           }
@@ -146,7 +182,7 @@ export default ({
           );
           resolve('done emitting');
         },
-        err => {
+        err  => {
           reject();
           const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true';
           if (tscCompileOnError) {
@@ -156,11 +192,24 @@ export default ({
               )
             );
             printBuildError(err);
-          } else {
-            console.log(chalk.red('Failed to compile.\n'));
-            printBuildError(err);
+          }
+          else if (compilationErrors != null) {
+            if (compilationErrors.length == undefined) {
+              console.log(chalk.red("Error..."), compilationErrors.message);
+            }
+            else {
+              for (let error in compilationErrors) {
+                console.log(chalk.red("Error..."), compilationErrors[error].message);
+              }
+            }
+
             process.exit(1);
           }
+          else {
+            console.log(chalk.red('Failed to compile.\n'));
+            printBuildError(JSON.stringify(err));
+
+          }
         }
       )
       .catch(err => {

package/src/tasks/{publish/bundle → bundle}/builder/webpack.config.js

@@ -103,21 +103,19 @@ export default (
     return loaders;
   };
   return {
-    mode: isEnvDevelopment ? 'development' : 'production',
+    mode: devBuild ? 'development' : 'production',
     // Stop compilation early in production
     bail: isEnvProduction,
     // These are the "entry points" to our application.
     // This means they will be the "root" imports that are included in JS bundle.
     entry: inputFile,
-    devtool: shouldUseSourceMap ? 'source-map' : false,
+    devtool: devBuild ? 'eval-cheap-module-source-map' : false,
     output: {
       // The build folder.
       path: paths.appBuild,
       // There will be one main bundle, and one file per asynchronous chunk.
       // In development, it does not produce real files.
-      filename: isEnvProduction
-        ? `${componentKey}/${componentKey}.js`
-        : isEnvDevelopment && `${componentKey}/${componentKey}.js`,
+      filename: isEnvProduction ? `${componentKey}/${componentKey}.js` : isEnvDevelopment && `${componentKey}/${componentKey}.js`,
       chunkFilename: isEnvProduction
         ? `${componentKey}/js/[name].[contenthash:8].chunk.js`
         : isEnvDevelopment && `${componentKey}/js/[name].chunk.js`,
@@ -125,7 +123,8 @@ export default (
         name: componentKey,
         type: 'umd',
         export: 'default'
-      }
+      },
+      publicPath: ''
     },
     optimization: {
       minimize: isEnvProduction,
@@ -310,18 +309,20 @@ export default (
         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$/
       }),
+
       new webpack.optimize.LimitChunkCountPlugin({
-        maxChunks: 5
+        maxChunks: 1
       }),
       new webpack.optimize.MinChunkSizePlugin({
         minChunkSize: 100000 // Minimum number of characters
       }),
-      isEnvProduction && new CompressionPlugin(compressionBRConfObj)
+      !devBuild && new CompressionPlugin(compressionBRConfObj)
 
       /* Dont generate gzip file */
       /* isEnvProduction && new CompressionPlugin(compressionGZConfObj) */

package/src/tasks/{publish/bundle → 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/create/index.js

@@ -13,8 +13,10 @@ import {
   getComponentDirectoryPath,
   getComponents,
   getComponentDefaults,
+  getPegaServerConfig,
   sanitize,
-  validateSemver
+  validateSemver,
+  showVersion
 } from '../../util.js';
 import { COMPONENT_SCHEMA } from '../../constants.js';
 
@@ -53,6 +55,16 @@ const compileMustacheTemplates = async (
     subtype = subtype.toString();
   }
 
+  let mustacheSubType = subtype;
+  if (typeof(mustacheSubType) == "string") {
+    if (mustacheSubType == "FORM-region") {
+      mustacheSubType = "FORM";
+    }
+    else if (mustacheSubType == "DETAILS-region") {
+      mustacheSubType = "DETAILS";
+    }
+  }
+
   if (allowedApplications.trim() === '') {
     allowedApplications = [];
   } else {
@@ -76,8 +88,8 @@ const compileMustacheTemplates = async (
       LIBRARY: library,
       ALLOWEDAPPS: JSON.stringify(allowedApplications),
       TYPE: type,
-      SUB_TYPE: JSON.stringify(subtype),
-      DESCRIPTION: description,
+      SUB_TYPE: JSON.stringify(mustacheSubType),
+      DESCRIPTION: description || componentLabel,
       IS_TEMPLATE: isTemplate,
       IS_PICKLIST: isPicklist,
       IS_BOOLEAN: isBool,
@@ -94,28 +106,62 @@ const validateCompile = async (
     componentLabel,
     library,
     version,
+    framework,
     type,
     subtype,
     description,
-    allowedApplications
+    allowedApplications,
+    organization
   },
   options
 ) => {
-  const templateDirectory = fileURLToPath(new URL('./template', import.meta.url));
 
-  const { organization } = JSON.parse(fs.readFileSync(path.resolve('package.json'), 'utf8'));
+  let sSubType = subtype;
+  if (Array.isArray(subtype)) {
+    sSubType = subtype.join("-");
+  }
 
-  const componentKey = `${organization}_${library}_${componentName}`;
-  /*
-  if (!isPascalCase(componentKey)) {
-    console.log(
-      chalk.yellowBright(
-        `${componentKey} is not in Pascal Case. Attempting to create component in Pascal Case !!`
-      )
-    );
-    componentKey = convertIntoPascalCase(componentKey);
-  } */
+  // for now, until add question back in
+  if (framework == undefined || framework == "") {
+    framework = "Constellation";
+  }
+
+
+
+  const defaultPegaServerConfig = await getPegaServerConfig();
+  const isLaunchpad = defaultPegaServerConfig.serverType === 'launchpad';
+  let originalFramework = framework;
+
+  let templateDir = `./templates/${framework}/${type}/${sSubType}`;
+  let templateDirectory = fileURLToPath(new URL(templateDir, import.meta.url));
+
+  if (isLaunchpad) {
+    framework = "Launchpad";
+
+    templateDir = `./templates/${framework}/${type}/${sSubType}`;
+    templateDirectory = fileURLToPath(new URL(templateDir, import.meta.url));
+
+    // if doesn't exist, revert
+    if (!fs.existsSync(templateDirectory)) {
+      framework = originalFramework;
 
+      templateDir = `./templates/${framework}/${type}/${sSubType}`;
+      templateDirectory = fileURLToPath(new URL(templateDir, import.meta.url));
+
+    }
+
+  }
+
+
+
+
+  if (organization == null) {
+   ({ organization } = JSON.parse(fs.readFileSync(path.resolve('package.json'), 'utf8')));
+  }
+
+
+
+  const componentKey = `${organization}_${library}_${componentName}`;
   const targetDirectory = await getComponentDirectoryPath(componentKey);
 
   const components = await getComponents();
@@ -146,29 +192,83 @@ const validateCompile = async (
 };
 
 export default async options => {
-  if (options.params[9]) {
-    const componentName = options.params[3];
-    const componentLabel = options.params[4];
-    const library = options.params[5];
-    const version = options.params[6];
-    const type = options.params[7];
-    const subtype = options.params[8];
-    const description = options.params[9];
+  showVersion();
+
+  if (options.params.length >= 12) {
+
+    const type = options.params[3];
+    const subtype = options.params[4];
+    const componentName = options.params[5];
+    const componentLabel = options.params[6];
+    const version = options.params[7];
+    const library = options.params[8];
+    const allowedApplications = options.params[9];
+    const description = options.params[10];
+    const organization = options.params[11];
+    const framework = "Constellation";
+
     await validateCompile(
       {
         componentName,
         componentLabel,
         library,
         version,
+        framework,
         type,
         subtype,
-        description
+        description,
+        allowedApplications,
+        organization
       },
       options
     );
   } else {
     const componentDefaults = await getComponentDefaults();
     const questions = [
+      {
+        name: 'type',
+        type: 'rawlist',
+        message: 'Enter type of component',
+        default: componentDefaults.type,
+        choices: COMPONENT_SCHEMA.type
+      },
+      {
+        name: 'subtype',
+        type: 'rawlist',
+        message: 'Enter subtype of component',
+        default: componentDefaults.subtype,
+        choices: COMPONENT_SCHEMA.subtype.field,
+        when(answers) {
+          return answers.type === 'Field';
+        }
+      },
+      {
+        name: 'subtype',
+        type: 'rawlist',
+        message: 'Enter subtype of component',
+        default: componentDefaults.subtype,
+        choices: COMPONENT_SCHEMA.subtype.template,
+        when(answers) {
+          return answers.type === 'Template';
+        }
+      },
+      {
+        name: 'subtype',
+        type: 'rawlist',
+        message: 'Enter subtype of component',
+        default: [componentDefaults.subtype || COMPONENT_SCHEMA.subtype.widget[0]],
+        choices: COMPONENT_SCHEMA.subtype.widget,
+        when(answers) {
+          return answers.type === 'Widget';
+        },
+        validate: value => {
+          /* value should not be empty */
+          if (Array.isArray(value) && value.length) {
+            return true;
+          }
+          return 'Please select subtype';
+        }
+      },
       {
         name: 'componentName',
         message: 'Enter component name (required)',
@@ -197,6 +297,7 @@ export default async options => {
       {
         name: 'version',
         message: 'Enter component version',
+        default: componentDefaults.version,
         validate: value => {
           if (validateSemver(value)) {
             return true;
@@ -225,62 +326,20 @@ export default async options => {
         message: 'Please enter the application names to be supported (comma-separated). ',
         suffix: 'Keep empty for all applications'
       },
-      {
-        name: 'type',
-        type: 'rawlist',
-        message: 'Enter type of component',
-        default: componentDefaults.type,
-        choices: COMPONENT_SCHEMA.type
-      },
-      {
-        name: 'subtype',
-        type: 'rawlist',
-        message: 'Enter subtype of component',
-        default: componentDefaults.subtype,
-        choices: COMPONENT_SCHEMA.subtype.field,
-        when(answers) {
-          return answers.type === 'Field';
-        }
-      },
-      {
-        name: 'subtype',
-        type: 'rawlist',
-        message: 'Enter subtype of component',
-        default: componentDefaults.subtype,
-        choices: COMPONENT_SCHEMA.subtype.template,
-        when(answers) {
-          return answers.type === 'Template';
-        }
-      },
-      {
-        name: 'subtype',
-        type: 'checkbox',
-        message: 'Enter subtype of component',
-        default: [componentDefaults.subtype || COMPONENT_SCHEMA.subtype.widget[0]],
-        choices: COMPONENT_SCHEMA.subtype.widget,
-        when(answers) {
-          return answers.type === 'Widget';
-        },
-        validate: value => {
-          /* value should not be empty */
-          if (Array.isArray(value) && value.length) {
-            return true;
-          }
-          return 'Please select subtype';
-        }
-      },
       {
         name: 'description',
         message: 'Enter description for the component',
         default: componentDefaults.description
       }
     ];
+
     await inquirer.prompt(questions).then(async answers => {
       const {
         componentName,
         componentLabel,
         library,
         version,
+        framework,
         type,
         subtype,
         description,
@@ -292,6 +351,7 @@ export default async options => {
           componentLabel,
           library,
           version,
+          framework,
           type,
           subtype,
           description,

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

@@ -0,0 +1,38 @@
+function Boolean(value, { allowEmpty = true, tick = "", cross = "" } = {}) {
+  if (
+    (!allowEmpty && !value) ||
+    value === false ||
+    value?.toString()?.toLowerCase() === "false" ||
+    value === 0 ||
+    value === "0"
+  ) {
+    return cross || "";
+  }
+  if (
+    value === true ||
+    value?.toString()?.toLowerCase() === "true" ||
+    value === 1 ||
+    value === "1"
+  ) {
+    return tick || "";
+  }
+  if (
+    allowEmpty &&
+    (value === "null" ||
+      value === "" ||
+      value === null ||
+      typeof value === "undefined")
+  ) {
+    return "––";
+  }
+  return value;
+}
+
+export default {
+  TrueFalse: (value, options) =>
+    Boolean(value, {
+      ...options,
+      tick: "True",
+      cross: "False"
+    })
+};

package/src/tasks/create/templates/Constellation/Field/Boolean/boolean-format.js.mustache

@@ -0,0 +1,26 @@
+import Boolean from "./Boolean";
+
+
+export default {
+  ...Boolean
+};
+
+
+
+export function format(value, type) {
+  let formattedValue;
+
+  switch (type?.toLowerCase()) {
+
+
+    case "boolean":
+    case "checkbox": {
+      formattedValue = Boolean.TrueFalse(value, { allowEmpty: false });
+      break;
+    }
+
+    default:
+      formattedValue = value;
+  }
+  return formattedValue;
+}

package/src/tasks/create/templates/Constellation/Field/Boolean/config.json.mustache

@@ -0,0 +1,145 @@
+{
+  "name": "{{COMPONENT_KEY}}",
+  "label": "{{COMPONENT_LABEL}}",
+  "description": "{{DESCRIPTION}}",
+  "organization": "{{ORGANIZATION}}",
+  "version": "{{VERSION}}",
+  "library": "{{LIBRARY}}",
+  "allowedApplications": {{{ALLOWEDAPPS}}},
+  "componentKey": "{{COMPONENT_KEY}}",
+  "type": "{{TYPE}}",
+  "subtype": {{{SUB_TYPE}}},
+  "icon": "images/pz-checkbox-active.svg",
+  "properties": [
+    {
+      "name": "label",
+      "label": "Field label",
+      "format": "TEXT"
+    },
+    {
+      "name": "hideLabel",
+      "label": "Hide Label",
+      "format": "BOOLEAN"
+    },
+    {
+      "name": "readOnly",
+      "label": "Edit mode",
+      "format": "READONLY"
+    },
+    {
+      "label": "Column settings",
+      "format": "GROUP",
+      "visibility": "@VIEWTYPE == 'MultiRecordDisplayAsTable'",
+      "properties": [
+        {
+          "name": "columnWidth",
+          "label": "Column width",
+          "format": "SELECT",
+          "source": [
+            {
+              "key": "auto",
+              "value": "Auto"
+            },
+            {
+              "key": "custom",
+              "value": "Custom"
+            }
+          ]
+        },
+        {
+          "name": "width",
+          "label": "Width (px)",
+          "format": "NUMBER",
+          "visibility": "$this.columnWidth == 'custom'"
+        }
+      ]
+    },
+    {
+      "label": "Input settings",
+      "format": "GROUP",
+      "visibility": "(!readOnly = true)",
+      "properties": [
+        {
+          "name": "caption",
+          "label": "Caption",
+          "format": "TEXT",
+          "useAsAuthoringLabel": true
+        },
+        {
+          "name": "helperText",
+          "label": "Helper text",
+          "format": "TEXT"
+        }
+      ]
+    },
+    {
+      "label": "Read-only settings",
+      "format": "GROUP",
+      "properties": [
+        {
+          "format": "SELECT",
+          "name": "displayValue",
+          "label": "Display Value",
+          "defaultValue": "Yes/No",
+          "localize": true,
+          "splitValues": {
+            "token": "/",
+            "propertyNames": ["trueLabel", "falseLabel"]
+          },
+          "source": [
+            {
+              "key": "Yes/No",
+              "value": "Yes/No"
+            },
+            {
+              "key": "True/False",
+              "value": "True/False"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "label": "Conditions",
+      "format": "GROUP",
+      "properties": [
+        {
+          "name": "required",
+          "label": "Required",
+          "format": "REQUIRED",
+          "visibility": "(!readOnly = true)"
+        },
+        {
+          "name": "disabled",
+          "label": "Disabled",
+          "format": "DISABLED",
+          "visibility": "(!readOnly = true)"
+        },
+        {
+          "name": "visibility",
+          "label": "Visibility",
+          "format": "VISIBILITY"
+        }
+      ]
+    },
+    {
+      "label": "Advanced",
+      "format": "GROUP",
+      "collapsible": true,
+      "properties": [
+        {
+          "name": "testId",
+          "label": "Test ID",
+          "format": "TEXT",
+          "ignorePattern": "[^-_\\p{N}\\p{L}]",
+          "includeAnnotations": false
+        }
+      ]
+    }
+  ],
+  "defaultConfig": {
+    "caption": "@L $this.label",
+    "trueLabel": "@L Yes",
+    "falseLabel": "@L No"
+  }
+}