@pega/custom-dx-components 2.0.16 → 2.0.18

package/README.md

@@ -8,7 +8,7 @@ This project provides you with an environment to extend Constellation by giving
 
 Ensure you have access to the following in your system:
 
-- Pega Infinity Server version 8.8 or later
+- Pega Infinity Server version 8.7 or later
 
 - Git version 2.30 or later
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/custom-dx-components",
-  "version": "2.0.16",
+  "version": "2.0.18",
   "description": "Utility for building custom UI components",
   "bin": "./bin/index.js",
   "scripts": {
@@ -26,6 +26,7 @@
     "css-loader": "6.7.1",
     "css-minimizer-webpack-plugin": "^4.1.0",
     "execa": "^6.1.0",
+    "eslint": "^8.4.1",
     "file-loader": "6.2.0",
     "fs-extra": "^10.1.0",
     "gitignore": "^0.7.0",
@@ -61,7 +62,6 @@
   "devDependencies": {
     "@pega/configs": "^0.3.3",
     "cspell": "^6.9.0",
-    "eslint": "^8.23.1",
     "prettier": "2.7.1"
   }
 }

package/src/cli.js

@@ -3,11 +3,14 @@ import chalk from 'chalk';
 
 import {
   authenticate,
+  buildComponent,
   createComponent,
   deleteComponent,
+  deleteAllComponents,
   initProject,
   listComponents,
   publishComponent,
+  publishAllComponents,
   updateComponent,
   validate,
   upgrade
@@ -16,11 +19,14 @@ import {
 const TASKS = {
   INIT: 'init',
   CREATE: 'create',
+  BUILD: 'buildComponent',
   PUBLISH: 'publish',
+  PUBLISH_All: 'publishAll',
   LIST: 'list',
   VALIDATE_SCHEMA: 'validateSchema',
   UPDATE: 'update',
   DELETE: 'delete',
+  DELETE_ALL: "deleteAll",
   AUTHENTICATE: 'authenticate',
   UPGRADE: 'upgrade'
 };
@@ -60,6 +66,14 @@ export default async (args = []) => {
       publishComponent(options);
       break;
     }
+    case TASKS.PUBLISH_All: {
+      publishAllComponents(options);
+      break;
+    }
+    case TASKS.BUILD: {
+      buildComponent(options);
+      break;
+    }
     case TASKS.LIST: {
       listComponents(options);
       break;
@@ -76,6 +90,10 @@ export default async (args = []) => {
       deleteComponent(options);
       break;
     }
+    case TASKS.DELETE_ALL: {
+      deleteAllComponents(options);
+      break;
+    }
     case TASKS.AUTHENTICATE: {
       authenticate(options);
       break;

package/src/tasks/authenticate/index.js

@@ -6,7 +6,7 @@ import chalk from 'chalk';
 import inquirer from 'inquirer';
 import fetch from 'node-fetch';
 
-import { checkPathAccess, getTokenUrl } from '../../util.js';
+import { checkPathAccess, getTokenUrl, showVersion } from '../../util.js';
 import { TOKEN_PATH } from '../../constants.js';
 
 import { getAuthQuestions } from './helper.js';
@@ -57,6 +57,8 @@ const generateAccessToken = async config => {
 };
 
 export default async options => {
+  showVersion();
+
   await checkPathAccess(pegaConfigJsonPath);
 
   let data = fs.readFileSync(pegaConfigJsonPath, { encoding: 'utf8' });

package/src/tasks/build/helper.js

@@ -0,0 +1,123 @@
+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

@@ -0,0 +1,54 @@
+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/{publish/bundle → bundle}/builder/webpack.config.js

@@ -306,14 +306,12 @@ 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/{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

@@ -14,7 +14,8 @@ import {
   getComponents,
   getComponentDefaults,
   sanitize,
-  validateSemver
+  validateSemver,
+  showVersion
 } from '../../util.js';
 import { COMPONENT_SCHEMA } from '../../constants.js';
 
@@ -87,7 +88,7 @@ const compileMustacheTemplates = async (
       ALLOWEDAPPS: JSON.stringify(allowedApplications),
       TYPE: type,
       SUB_TYPE: JSON.stringify(mustacheSubType),
-      DESCRIPTION: description,
+      DESCRIPTION: description || componentLabel,
       IS_TEMPLATE: isTemplate,
       IS_PICKLIST: isPicklist,
       IS_BOOLEAN: isBool,
@@ -172,6 +173,8 @@ const validateCompile = async (
 };
 
 export default async options => {
+  showVersion();
+
   if (options.params[10]) {
     const componentName = options.params[3];
     const componentLabel = options.params[4];
@@ -226,6 +229,7 @@ export default async options => {
       {
         name: 'version',
         message: 'Enter component version',
+        default: componentDefaults.version,
         validate: value => {
           if (validateSemver(value)) {
             return true;
@@ -312,7 +316,6 @@ export default async options => {
       }
     ];
 
-    console.log(chalk.green("DX Component Builder v2.0.16"));
     await inquirer.prompt(questions).then(async answers => {
       const {
         componentName,

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

@@ -7,7 +7,7 @@ export default {
 
 
 
-export function format(value, type, options) {
+export function format(value, type) {
   let formattedValue;
 
   switch (type?.toLowerCase()) {

package/src/tasks/create/templates/Constellation/Field/Boolean/demo.stories.jsx.mustache

@@ -1,7 +1,9 @@
 import { useState } from 'react';
-import { withKnobs, text, boolean } from '@storybook/addon-knobs';
+import { withKnobs } from '@storybook/addon-knobs';
 
-import {{COMPONENT_CLASS_NAME}} from './index.jsx';
+import { configProps, stateProps } from './mock.stories';
+
+import {{COMPONENT_CLASS_NAME}} from './index';
 
 export default {
   title: '{{COMPONENT_CLASS_NAME}}',
@@ -10,30 +12,44 @@ export default {
 };
 
 export const base{{COMPONENT_CLASS_NAME}} = () => {
-  const [value, setValue] = useState('test value');
+  const [value, setValue] = useState(configProps.value);
 
   const props = {
+    value,
+    label: configProps.label,
+    helperText: configProps.helperText,
+    caption: configProps.caption,
+    validatemessage: configProps.validatemessage,
+    hideLabel: configProps.hideLabel,
+    testId: configProps.testId,
+    additionalProps: configProps.additionalProps,
+    displayMode: configProps.displayMode,
+    variant: configProps.variant,
+    trueLabel: configProps.trueLabel,
+    falseLabel: configProps.falseLabel,
+    disabled: configProps.disabled,
+    readOnly: configProps.readOnly,
+    required: configProps.required,
     getPConnect: () => {
       return {
+        getStateProps: () => {
+          return stateProps;
+        },
         getActionsApi: () => {
           return {
-            updateFieldValue: (propName, value) => {
-              setValue(value);
-            }
+            updateFieldValue: (propName, theValue) => {
+              setValue(theValue);
+            },
+            triggerFieldChange: () => { /* nothing */}
           };
         },
-        getStateProps: () => {
-          return { value: '.name' };
+        getValidationApi: () => {
+          return {
+            validate: () => { /* nothing */}
+          };
         }
       };
-    },
-    value,
-    placeholder: text('Placeholder', 'Test placeholder'),
-    disabled: boolean('Disabled', false),
-    readOnly: boolean('Disabled', false),
-    required: boolean('Disabled', false),
-    label: text('Label', 'Sample Label'),
-    testId: text('Test id', 'text-12344566')
+    }
   };
 
   return (

package/src/tasks/create/templates/Constellation/Field/Boolean/index.jsx.mustache

@@ -7,7 +7,6 @@ import {
 import PropTypes from "prop-types";
 
 // includes in bundle
-import { format } from "./boolean-format";
 import handleEvent from "./event-utils";
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
@@ -70,7 +69,7 @@ const {{COMPONENT_CLASS_NAME}} = props => {
 
   let displayComponent;
   if (displayMode) {
-    displayComponent = <BooleanDisplay value={value} trueLabel={trueLabel} falseLabel={falseLabel}></BooleanDisplay>;
+    displayComponent = <{{COMPONENT_CLASS_NAME}}  value={value} trueLabel={trueLabel} falseLabel={falseLabel} />;
   }
 
   if (displayMode === 'DISPLAY_ONLY') {

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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,61 @@
+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

@@ -0,0 +1,41 @@
+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
+};