@pega/dx-component-builder-sdk 0.1.0

package/src/constants.js

@@ -0,0 +1,134 @@
+// cSpell:ignore words timeofday caseview casepreview objectview
+export const DXCB_CONFIG_JSON_FILENAME = 'dxcb.config.json';
+export const BUILD_CONFIG_JSON_FILENAME = 'build.config.json';
+export const SDK_LOCAL_COMPONENT_MAP_FILENAME = "sdk-local-component-map.js";
+export const COMPONENTS_DIRECTORY_PATH = 'components-directory-path';
+export const TOKEN_PATH = '../.access_token';
+export const OOTB_COMPONENTS = '../.ootb_components';
+export const FIELD_PATH = '/field';
+export const TEMPLATE_PATH = '/template';
+export const WIDGET_PATH = '/widget';
+export const COMPONENT_PREFIX_FIELD_PATH = "field/";
+export const COMPONENT_PREFIX_TEMPLATE_PATH = "template/";
+export const COMPONENT_PREFIX_WIDGET_PATH = "widget/";
+
+/* REST end points */
+export const PUBLISH_COMPONENT_SERVICE_REST_ENDPOINT = 'PRRestService/dev/v1/publish_component';
+export const LIST_COMPONENT_SERVICE_REST_ENDPOINT = 'PRRestService/dev/v1/list_component';
+export const OOTB_COMPONENT_SERVICE_REST_ENDPOINT = 'PRRestService/dev/v1/ootb_component';
+export const DELETE_COMPONENT_SERVICE_REST_ENDPOINT = 'PRRestService/dev/v1/delete_component';
+export const TOKEN_URL_V1 = 'PRRestService/oauth2/v1/token';
+
+export const COMPONENT_SCHEMA = {
+  framework: [
+    {
+      name: 'Constellation',
+      value: 'Constellation'
+    },
+    {
+      name: 'SDK Angular',
+      value: 'SDK-Angular'
+    },
+    {
+      name: 'SDK React',
+      value: 'SDK-React'
+    },
+    {
+      name: 'SDK Web Components',
+      value: 'SDK-WebComponents'
+    }
+  ],
+  type: [
+    {
+      name: 'Field',
+      value: 'Field'
+    },
+    {
+      name: 'Layout template',
+      value: 'Template'
+    },
+    {
+      name: 'Widget',
+      value: 'Widget'
+    }
+  ],
+  subtype: {
+    field: [
+      {
+        name: 'Text',
+        value: 'Text'
+      },
+      {
+        name: 'Text Input',
+        value: 'Text-Input'
+      },
+      {
+        name: 'Paragraph',
+        value: 'Text-Paragraph'
+      },
+      {
+        name: 'Email',
+        value: 'Text-Email'
+      },
+      {
+        name: 'Phone',
+        value: 'Text-Phone'
+      },
+      {
+        name: 'URL',
+        value: 'Text-URL'
+      },
+      {
+        name: 'Integer',
+        value: 'Integer'
+      },
+      {
+        name: 'Decimal',
+        value: 'Decimal'
+      },
+      {
+        name: 'Currency',
+        value: 'Decimal-Currency'
+      },
+      {
+        name: 'Percentage',
+        value: 'Decimal-Percentage'
+      },
+      {
+        name: 'Boolean',
+        value: 'Boolean'
+      },
+      {
+        name: 'Date',
+        value: 'Date'
+      },
+      {
+        name: 'DateTime',
+        value: 'DateTime'
+      },
+      {
+        name: 'TimeOfDay',
+        value: 'TimeOfDay'
+      },
+      {
+        name: 'Picklist',
+        value: 'Picklist'
+      }
+    ],
+    template: ['DETAILS', 'DETAILS-region', 'FORM', 'FORM-region', 'PAGE' ],
+    widget: [
+      {
+        name: 'CASE',
+        value: 'CASE'
+      },
+      {
+        name: 'PAGE',
+        value: 'PAGE'
+      },
+      {
+        name: 'PAGE & CASE',
+        value: ['PAGE', 'CASE']
+      }
+    ]
+  }
+};

package/src/tasks/authenticate/helper.js

@@ -0,0 +1,60 @@
+/* eslint-disable import/prefer-default-export */
+import { getPegaServerConfig } from '../../util.js';
+
+export const getAuthQuestions = async () => {
+  const defaultPegaConfig = await getPegaServerConfig();
+
+  return [
+    {
+      name: 'server',
+      message: 'Enter pega server url',
+      default: defaultPegaConfig.server
+    },
+    {
+      name: 'user',
+      message: 'Enter user id',
+      default: defaultPegaConfig.user,
+      validate: value => {
+        if (value.trim()) {
+          return true;
+        }
+        return 'Username cannot be empty';
+      }
+    },
+    {
+      name: 'password',
+      type: 'password',
+      message: 'Enter password',
+      default: defaultPegaConfig.password,
+      validate: value => {
+        if (value.trim()) {
+          return true;
+        }
+        return 'Password cannot be empty';
+      }
+    },
+    {
+      name: 'clientId',
+      message: 'Enter clientId',
+      default: defaultPegaConfig.clientId,
+      validate: value => {
+        if (value.trim()) {
+          return true;
+        }
+        return 'clientId cannot be empty';
+      }
+    },
+    {
+      name: 'clientSecret',
+      type: 'password',
+      message: 'Enter clientSecret',
+      default: defaultPegaConfig.clientSecret,
+      validate: value => {
+        if (value.trim()) {
+          return true;
+        }
+        return 'clientSecret cannot be empty';
+      }
+    }
+  ];
+};

package/src/tasks/authenticate/index.js

@@ -0,0 +1,81 @@
+import path from 'path';
+import fs from 'fs';
+import https from 'https';
+
+import chalk from 'chalk';
+import inquirer from 'inquirer';
+import fetch from 'node-fetch';
+
+import { checkPathAccess, getTokenUrl } from '../../util.js';
+import { TOKEN_PATH } from '../../constants.js';
+
+import { getAuthQuestions } from './helper.js';
+
+export const DXCB_CONFIG_JSON_FILENAME = 'dxcb.config.json';
+
+const pegaConfigJsonPath = path.join(path.resolve(), DXCB_CONFIG_JSON_FILENAME);
+
+const generateAccessToken = async config => {
+  const formData = new URLSearchParams();
+  formData.append('client_id', config.clientId);
+  formData.append('client_secret', config.clientSecret);
+  formData.append('username', config.user);
+  formData.append('password', config.password);
+  formData.append('grant_type', 'password');
+
+  const accessTokenUri = await getTokenUrl(config.server);
+  fetch(accessTokenUri, {
+    agent: new https.Agent({ rejectUnauthorized: false }),
+    method: 'POST',
+    headers: { 'content-type': 'application/x-www-form-urlencoded' },
+    body: formData.toString()
+  })
+    .then(response => {
+      if (response.ok && response.status === 200) {
+        return response.json();
+      } else {
+        throw new Error(`Failed with status: ${response.status}`);
+      }
+    })
+    .then(data => {
+      if (data && data.errors) {
+        const errMessages = data.errors;
+        errMessages.forEach(msgArr => {
+          throw new Error(`Failed with error - ${JSON.stringify(msgArr.message)}`);
+        });
+      }
+      if (data.token_type) {
+        fs.writeFile(TOKEN_PATH, JSON.stringify(data), err => {
+          if (err) {
+            console.error(err);
+          }
+          console.log(`${chalk.bold.green('Authenticated successfully !!')}`);
+        });
+      }
+    })
+    .catch(e => console.log(`${chalk.bold.red(e)}`));
+};
+
+export default async options => {
+  await checkPathAccess(pegaConfigJsonPath);
+
+  let data = fs.readFileSync(pegaConfigJsonPath, { encoding: 'utf8' });
+  data = data && JSON.parse(data);
+
+  const serverConfig = data['server-config'];
+  const params = options.params;
+
+  const questions = await getAuthQuestions(params);
+  const answers = await inquirer.prompt(questions);
+  serverConfig.server = answers.server;
+  serverConfig.user = answers.user;
+  serverConfig.password = answers.password;
+  serverConfig.clientId = answers.clientId;
+  serverConfig.clientSecret = answers.clientSecret;
+  await generateAccessToken(serverConfig);
+
+  data = JSON.stringify(data, null, 2);
+  fs.writeFile(pegaConfigJsonPath, data, err => {
+    if (err) throw err;
+  });
+};

package/src/tasks/build/helper.js

@@ -0,0 +1,125 @@
+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,
+  getComponentsObj,
+  getPegaServerConfig,
+  validateRulesetVersion
+} from '../../util.js';
+import { PUBLISH_COMPONENT_SERVICE_REST_ENDPOINT, TOKEN_PATH } from '../../constants.js';
+
+export const getPublishComponentQuestions = async () => {
+  const components = await getComponentsObj(true);
+  const defaultPegaConfig = await getPegaServerConfig();
+
+  return [
+    {
+      name: 'componentKey',
+      type: 'rawlist',
+      message: 'Select component to build',
+      pageSize: 20,
+      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

@@ -0,0 +1,52 @@
+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 } from '../../util.js';
+
+export default async options => {
+  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/bundle/builder/index.js

@@ -0,0 +1,218 @@
+import chalk from 'chalk';
+import fs from 'fs-extra';
+import webpack from 'webpack';
+import FileSizeReporter from 'react-dev-utils/FileSizeReporter.js';
+import printBuildError from 'react-dev-utils/printBuildError.js';
+
+import configFactory from './webpack.config.js';
+import paths from './paths.js';
+
+// Do this as the first thing so that any code reading it knows the right env.
+let Env = 'production';
+if (process.argv.includes('development')) {
+  Env = 'development';
+}
+
+if (process.argv.includes('source-map')) {
+  process.env.SOURCE_MAP = true;
+}
+
+// Do this as the first thing so that any code reading it knows the right env.
+process.env.BABEL_ENV = Env;
+process.env.NODE_ENV = Env;
+
+// Makes the script crash on unhandled rejections instead of silently
+// ignoring them. In the future, promise rejections that are not handled will
+// terminate the Node.js process with a non-zero exit code.
+process.on('unhandledRejection', err => {
+  console.log(err);
+  process.exit(1);
+});
+
+const measureFileSizesBeforeBuild = FileSizeReporter.measureFileSizesBeforeBuild;
+const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
+
+// These sizes are pretty large. We'll warn for bundles exceeding them.
+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) {
+          return reject(err);
+        }
+
+        let errMessage = err.message;
+
+        // Add additional information for postcss errors
+        if (Object.prototype.hasOwnProperty.call(err, 'postcssNode')) {
+          errMessage += `\nCompileError: Begins at CSS selector ${err.postcssNode.selector}`;
+        }
+
+        messages = {
+          errors: [errMessage],
+          warnings: []
+        };
+      } else {
+        messages = stats.toJson({ all: false, warnings: true, errors: true });
+      }
+      if (messages.errors.length) {
+        // Only keep the first error. Others are often indicative
+        // of the same problem, but confuse the reader with noise.
+        if (messages.errors.length > 1) {
+          messages.errors.length = 1;
+        }
+        return reject(new Error(messages.errors));
+      }
+      if (
+        process.env.CI &&
+        (typeof process.env.CI !== 'string' || process.env.CI.toLowerCase() !== 'false') &&
+        messages.warnings.length
+      ) {
+        console.log(
+          chalk.yellow(
+            '\nTreating warnings as errors because process.env.CI = true.\n' +
+              'Most CI servers set it automatically.\n'
+          )
+        );
+        return reject(new Error(messages.warnings.join('\n\n')));
+      }
+
+      const resolveArgs = {
+        stats,
+        previousFileSizes,
+        warnings: messages.warnings
+      };
+      return resolve(resolveArgs);
+    });
+  });
+}
+
+export default ({
+  inputFile,
+  outputFile,
+  componentKey,
+  externals,
+  globals,
+  sourceMap,
+  devBuild
+}) => {
+  // Generate configuration
+  const config = configFactory(Env, {
+    inputFile,
+    outputFile,
+    componentKey,
+    externals,
+    globals,
+    sourceMap,
+    devBuild
+  });
+
+  if (devBuild) {
+    Env = 'development';
+  }
+
+  return new Promise((resolve, reject) => {
+    measureFileSizesBeforeBuild(paths.appBuild)
+      .then(previousFileSizes => {
+        // Remove all content but keep the directory so that
+        // if you're in it, you don't end up in Trash
+        fs.emptyDirSync(paths.appBuild);
+        // Start the webpack build
+        return build(config, previousFileSizes);
+      })
+      .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'));
+            for (let warning in warnings) {
+              console.log(chalk.yellow("Warning.."), warnings[warning].message);
+            }
+          } else {
+            console.log(chalk.green('Compiled successfully.\n'));
+          }
+
+          console.log('File sizes after gzip:\n');
+          printFileSizesAfterBuild(
+            stats,
+            previousFileSizes,
+            paths.appBuild,
+            WARN_AFTER_BUNDLE_GZIP_SIZE,
+            WARN_AFTER_CHUNK_GZIP_SIZE
+          );
+          resolve('done emitting');
+        },
+        err  => {
+          reject();
+          const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true';
+          if (tscCompileOnError) {
+            console.log(
+              chalk.yellow(
+                'Compiled with the following type errors (you may want to check these before deploying your app):\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 => {
+        reject();
+        if (err && err.message) {
+          console.log(err.message);
+        }
+        process.exit(1);
+      });
+  });
+};