@pega/dx-component-builder-sdk 0.1.6 → 0.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/dx-component-builder-sdk",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "description": "Utility for building custom UI components",
   "bin": "./bin/index.js",
   "scripts": {

package/src/constants.js

@@ -22,6 +22,10 @@ export const COMPONENT_PREFIX_WIDGETS_PATH = "widgets/";
 export const COMPONENT_PREFIX_DSE_PATH = "designSystemExtensions/";
 export const COMPONENT_PREFIX_INFRA_PATH = "infra/";
 
+export const CATEGORY_CUSTOM = "custom";
+export const CATEGORY_OVERRIDE = "override";
+export const CATEGORY_CONSTELLATION = "constellation";
+
 /* 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';
@@ -225,7 +229,7 @@ export const COMPONENT_SCHEMA = {
       },
       {
         name: 'Radio Buttons',
-        value: 'RadioButons'
+        value: 'RadioButtons'
       },
       {
         name: 'Semantic Link',
@@ -312,8 +316,8 @@ export const COMPONENT_SCHEMA = {
         value: 'DeferLoad'
       },
       {
-        name: 'Error Boundry',
-        value: 'ErrorBoundry'
+        name: 'Error Boundary',
+        value: 'ErrorBoundary'
       },
       {
         name: 'Multi Step',
@@ -493,7 +497,7 @@ export const COMPONENT_SCHEMA = {
     widgets: [
       {
         name: 'App Announcement',
-        value: 'AppAnnoucement'
+        value: 'AppAnnouncement'
       },
       {
         name: 'Case History',

package/src/tasks/build/helper.js

@@ -12,31 +12,13 @@ import {
   getComponents,
   getComponentsObj,
   getPegaServerConfig,
-  validateRulesetVersion
+  validateRulesetVersion,
+  getOptionsCategory,
 } from '../../util.js';
-import { PUBLISH_COMPONENT_SERVICE_REST_ENDPOINT, TOKEN_PATH, COMPONENT_SCHEMA } from '../../constants.js';
+import { PUBLISH_COMPONENT_SERVICE_REST_ENDPOINT, TOKEN_PATH, COMPONENT_SCHEMA, CATEGORY_CUSTOM } from '../../constants.js';
 
-export const getOptionsCategory = (options) => {
-  let categoryType = null;
-  if (options.params[3]) {
-    let catType = options.params[3];
-
-    switch (catType.toLowerCase()) {
-      case "override" :
-      case "o" :
-        categoryType = "override";
-        break;
-      case "custom" :
-      case "c" :
-        categoryType = "custom";
-        break;
-      }
-  }
-  return categoryType;
-}
 
 export const getBuildCategory = async (options) => {
-  const defaultPegaServerConfig = await getPegaServerConfig();
   const categoryType = getOptionsCategory(options);
 
   return [
@@ -83,7 +65,7 @@ export const getBuildComponentQuestions = async (category) => {
   ];
 };
 
-export const zipComponent = async (componentKey, category = "custom") => {
+export const zipComponent = async (componentKey, category = CATEGORY_CUSTOM) => {
   const srcDirectory = await getComponentDirectoryPath(componentKey, category);
   const buildDirectory = await path.join(path.resolve(), 'dist/components', componentKey);
   const configJson = `${srcDirectory}/config.json`;
@@ -96,7 +78,7 @@ export const zipComponent = async (componentKey, category = "custom") => {
   const zipContent = zip.toBuffer().toString('base64');
 
   const configContent = Buffer.from(fs.readFileSync(`${srcDirectory}/config.json`)).toString();
-  fs.rmdir('dist', { recursive: true }, err => {
+  fs.rmd('dist', { recursive: true }, err => {
     if (err) {
       throw err;
     }

package/src/tasks/build/index.js

@@ -6,8 +6,10 @@ import validate from '../validator/index.js';
 
 import bundleComponent from '../bundle/index.js';
 import lintComponent from '../linter/index.js';
-import { getBuildComponentQuestions, getBuildCategory, getOptionsCategory } from './helper.js';
-import { getComponentDirectoryPath, showVersion } from '../../util.js';
+import { getBuildComponentQuestions, getBuildCategory } from './helper.js';
+import { getComponentDirectoryPath, showVersion, getOptionsCategory } from '../../util.js';
+
+import { CATEGORY_CUSTOM } from '../../constants.js';
 
 export default async options => {
   showVersion();
@@ -28,7 +30,45 @@ export default async options => {
     ...answers
   };
 
-  const tasks = new Listr(
+  const customTasks = new Listr(
+    [
+      {
+        title: 'Validate config schema',
+        task: async () => {
+          await validate(componentKey, category);
+        }
+      },
+      {
+        title: 'Lint component',
+        task: async () => {
+          const targetDirectory = await getComponentDirectoryPath(componentKey, category);
+          // console.log(`in buildComponent Lint component task: componentKey: ${componentKey} targetDirectory: ${targetDirectory}`);
+          await lintComponent(targetDirectory);
+        }
+      },
+      {
+        title: 'Bundle component',
+        task: async () => await bundleComponent(componentKey, sourceMap, devBuild, category),
+      },
+      {
+        title: 'Lint companion component',
+        task: async () => {
+          const targetDirectory = await getComponentDirectoryPath(componentKey, "constellation");
+          // console.log(`in buildComponent Lint component task: componentKey: ${componentKey} targetDirectory: ${targetDirectory}`);
+          await lintComponent(targetDirectory);
+        }
+      },
+      {
+        title: 'Bundle companion component',
+        task: async () => await bundleComponent(componentKey, sourceMap, devBuild, "constellation")
+      }
+    ],
+    {
+      exitOnError: true
+    }
+  );
+
+  const overrideTasks = new Listr(
     [
       {
         title: 'Validate config schema',
@@ -47,7 +87,6 @@ export default async options => {
       {
         title: 'Bundle Component',
         task: async () => await bundleComponent(componentKey, sourceMap, devBuild, category),
-        skip: () => (options.skipBundle ? 'Skipped bundling component' : undefined)
       }
     ],
     {
@@ -55,8 +94,16 @@ export default async options => {
     }
   );
 
-  await tasks.run().catch(err => {
-    console.log(chalk.bold.red(err.toString()));
-  });
+  if (category == CATEGORY_CUSTOM) {
+    await customTasks.run().catch(err => {
+      console.log(chalk.bold.red(err.toString()));
+    });
+  }
+  else {
+    await overrideTasks.run().catch(err => {
+      console.log(chalk.bold.red(err.toString()));
+    });
+  }
+
   return true;
 };

package/src/tasks/bundle/index.js

@@ -2,14 +2,14 @@ import path from 'path';
 import fs from 'fs';
 import { stat } from 'fs/promises';
 
-import { BUILD_CONFIG_JSON_FILENAME } from '../../constants.js';
+import { BUILD_CONFIG_JSON_FILENAME, CATEGORY_CUSTOM } from '../../constants.js';
 import { getComponentDirectoryPath } from '../../util.js';
 
 import buildComponent from './builder/index.js';
 
 const extensions = ['ts', 'tsx', 'js', 'jsx'];
 
-const bundleComponent = async (componentKey, sourceMap, devBuild, category = "custom") => {
+const bundleComponent = async (componentKey, sourceMap, devBuild, category = CATEGORY_CUSTOM) => {
   const componentDirectory = await getComponentDirectoryPath(componentKey, category);
 
   const idx = (

package/src/tasks/create/index.js

@@ -9,6 +9,7 @@ import ncp from 'ncp';
 import chalk from 'chalk';
 
 import { checkPathAccess, getTokenUrl, showVersion } from '../../util.js';
+import { CATEGORY_CONSTELLATION } from '../../constants.js';
 
 
 export const DXCB_CONFIG_JSON_FILENAME = 'dxcb.config.json';
@@ -21,6 +22,7 @@ import {
   convertIntoPascalCase,
   compileMustacheTemplate,
   getComponentDirectoryPath,
+  getPegaConfig,
   getComponents,
   getComponentDefaults,
   sanitize,
@@ -44,7 +46,7 @@ const copyComponentTemplate = async options => {
 
 };
 
-const compileMustacheTemplates = async (
+export const compileMustacheTemplates = async (
   componentDirectory,
   {
     componentKey,
@@ -156,7 +158,13 @@ const validateCompile = async (
 
   framework = internalData.sdkType;
 
-  const templateDir = `./templates/${framework}/${type}/${sSubType}`;
+  let pegaConfig = await getPegaConfig();
+  let templateParentDir = `./templates/${framework}`;
+  if (pegaConfig['custom-templates-path'] && pegaConfig['custom-templates-path'] != "") {
+    templateParentDir = pegaConfig['custom-templates-path'];
+  }
+
+  const templateDir = `${templateParentDir}/${type}/${sSubType}`;
   const templateDirectory = fileURLToPath(new URL(templateDir, import.meta.url));
 
   const templateDirConstellation = `./templates/Constellation/${type}/${sSubType}`;
@@ -166,13 +174,13 @@ const validateCompile = async (
 
   const typeLC = type.toLowerCase();
   const targetDirectory = await getComponentDirectoryPath(join(typeLC, "/",componentKey));
-  const targetDirectoryConstellation = await getComponentDirectoryPath(join(typeLC, "/",componentKey), "constellation");
+  const targetDirectoryConstellation = await getComponentDirectoryPath(join(typeLC, "/",componentKey), CATEGORY_CONSTELLATION);
 
   const components = await getComponents(false);
   if (components.includes(componentKey)) {
     console.log(chalk.red(`${componentKey} component already exists in ${targetDirectory}`));
 
-    let componentsConstellation = await getComponents(false, "constellation");
+    let componentsConstellation = await getComponents(false, CATEGORY_CONSTELLATION);
     if (components.includes(componentKey)) {
       console.log(chalk.red(`${componentKey} companion component already exists in ${targetDirectoryConstellation}`));
     }
@@ -180,7 +188,7 @@ const validateCompile = async (
     return;
   }
   // test for constellation
-  const componentsConstellation = await getComponents(false, "constellation");
+  const componentsConstellation = await getComponents(false, CATEGORY_CONSTELLATION);
   if (components.includes(componentKey)) {
     console.log(chalk.red(`${componentKey} companion component already exists in ${targetDirectoryConstellation}`));
     return;

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

@@ -0,0 +1,60 @@
+import { useState } from 'react';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import { configProps, stateProps } from './mock.stories';
+
+import {{COMPONENT_CLASS_NAME}} from './index';
+
+export default {
+  title: '{{COMPONENT_CLASS_NAME}}',
+  decorators: [withKnobs],
+  component: {{COMPONENT_CLASS_NAME}}
+};
+
+export const base{{COMPONENT_CLASS_NAME}} = () => {
+  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, theValue) => {
+              setValue(theValue);
+            },
+            triggerFieldChange: () => { /* nothing */}
+          };
+        },
+        getValidationApi: () => {
+          return {
+            validate: () => { /* nothing */}
+          };
+        }
+      };
+    }
+  };
+
+  return (
+    <>
+      <{{COMPONENT_CLASS_NAME}} {...props} />
+    </>
+  );
+};

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
+};