@pega/custom-dx-components 0.0.1 → 0.1.10

package/src/tasks/build-comp/helper.js

@@ -0,0 +1,116 @@
+import fs from 'fs';
+import path from 'path';
+
+import fetch from 'node-fetch';
+import AdmZip from 'adm-zip';
+import chalk from 'chalk';
+
+import { constructCompleteUrl, getComponentDirectoryPath, getComponents, getPegaServerConfig, getHttpsAgent } from '../../util.js';
+import { PUBLISH_COMPONENT_SERVICE_REST_ENDPOINT, TOKEN_PATH } from '../../constants.js';
+
+export const getPublishComponentQuestions = async () => {
+  const components = await getComponents();
+
+  if (components.length === 0) {
+    console.log(chalk.redBright('No components to build'));
+    process.exit();
+  }
+
+  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,
+      // eslint-disable-next-line sonarjs/no-redundant-boolean
+      when: () => false && !process.env.SOURCE_MAP
+    },
+    {
+      name: 'devBuild',
+      type: 'confirm',
+      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, 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 } = JSON.parse(OauthData);
+      let status = 500;
+      fetch(url, {
+        method: 'POST',
+        agent: getHttpsAgent(defaultPegaConfig),
+        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 occurred 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}`);
+          }
+        })
+        // eslint-disable-next-line prefer-promise-reject-errors
+        .catch((e) => Promise.reject(`${chalk.bold.red(e)}`));
+    } else {
+      throw new Error(`Error occurred in authentication. Please regenerate using authenticate`);
+    }
+  } catch (err) {
+    throw new Error(`Error occurred in authentication. Please regenerate using authenticate`);
+  }
+};

package/src/tasks/build-comp/index.js

@@ -0,0 +1,76 @@
+import inquirer from 'inquirer';
+import { Listr } from 'listr2';
+import chalk from 'chalk';
+
+import validate from '../validator/index.js';
+
+import bundleComponent from '../bundle/index.js';
+import lintComponent from '../linter/index.js';
+import { getPublishComponentQuestions } from './helper.js';
+import { getComponentDirectoryPath, showVersion } from '../../util.js';
+
+export default async options => {
+  showVersion();
+
+  let componentKey;
+  let sourceMap;
+  let devBuild;
+  let content;
+
+  if (options.params.length >= 6) {
+    componentKey = options.params[3];
+    sourceMap = options.params[4];
+    const dBuild = options.params[5];
+    devBuild = (dBuild === 'Y' ||
+    dBuild === 'y' ||
+    dBuild === true ||
+    dBuild === 'true') ? true : false;
+
+    content = { componentKey, sourceMap, devBuild};
+  }
+  else {
+    const questions = await getPublishComponentQuestions();
+    const answers = await inquirer.prompt(questions);
+    ({ componentKey, sourceMap, devBuild } = answers);
+
+    content = {
+      ...answers
+    };
+  }
+
+
+
+  const sDevBuild = devBuild ? '(dev build)' : '';
+  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 ${sDevBuild}`,
+        type: 'confirm',
+        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/{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,32 @@ 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$/
       }),
+
+      /* Ignore cosmos streamline-icons */
+      new webpack.IgnorePlugin({
+        resourceRegExp: /^\.\/streamline-icons$/,
+        contextRegExp: /@pega\/cosmos-react-core\/lib\/components\/Icon$/
+      }),
+
+      /* Ignore cosmos streamline-icons - windows */
+      new webpack.IgnorePlugin({
+        resourceRegExp: /^\.\/streamline-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';
 
@@ -45,7 +47,6 @@ const compileMustacheTemplates = async (
   const componentClassName = convertIntoPascalCase(componentKey);
 
   const isTemplate = type === 'Template';
-  const isPicklist = subtype === 'Picklist';
   const isBool = subtype === 'Boolean';
   const isPhone = subtype === 'Phone';
 
@@ -53,6 +54,30 @@ const compileMustacheTemplates = async (
     subtype = subtype.toString();
   }
 
+  let mustacheSubType = subtype;
+  if (typeof mustacheSubType === 'string') {
+    // eslint-disable-next-line default-case
+    switch (mustacheSubType) {
+      case 'FORM-region':
+        mustacheSubType = 'FORM';
+        break;
+      case 'DETAILS-region':
+        mustacheSubType = 'DETAILS';
+        break;
+      case 'Text-Input':
+        mustacheSubType = 'Text';
+        break;
+      case 'Picklist-Autocomplete':
+        mustacheSubType = 'Picklist';
+        break;
+      case 'Picklist-RadioButtons':
+        mustacheSubType = 'Picklist';
+        break;
+    }
+  }
+
+  const isPicklist = subtype === 'Picklist';
+
   if (allowedApplications.trim() === '') {
     allowedApplications = [];
   } else {
@@ -76,8 +101,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 +119,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("-");
+  }
+
+  // for now, until add question back in
+  if (framework == undefined || framework == "") {
+    framework = "Constellation";
+  }
 
-  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);
-  } */
 
+
+  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 +205,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 +310,7 @@ export default async options => {
       {
         name: 'version',
         message: 'Enter component version',
+        default: componentDefaults.version,
         validate: value => {
           if (validateSemver(value)) {
             return true;
@@ -225,62 +339,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 +364,7 @@ export default async options => {
           componentLabel,
           library,
           version,
+          framework,
           type,
           subtype,
           description,