@pega/dx-component-builder-sdk 0.1.16 → 0.1.17

package/package.json

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

package/src/cli.js

@@ -4,6 +4,7 @@ import chalk from 'chalk';
 import {
   authenticate,
   buildComponent,
+  buildAllComponents,
   createComponent,
   deleteComponent,
   deleteAllComponents,
@@ -22,6 +23,7 @@ const TASKS = {
   CREATE: 'create',
   OVERRIDE: 'override',
   BUILD: 'buildComponent',
+  BUILD_ALL: 'buildAllComponents',
   MAP_ALL: "mapAll",
   PUBLISH: 'publish',
   PUBLISH_All: 'publishAll',
@@ -82,6 +84,10 @@ export default async (args = []) => {
       buildComponent(options);
       break;
     }
+    case TASKS.BUILD_ALL: {
+      buildAllComponents(options);
+      break;
+    }
     case TASKS.LIST: {
       listComponents(options);
       break;

package/src/constants.js

@@ -8,20 +8,16 @@ export const OOTB_COMPONENTS = '../.ootb_components';
 export const FIELD_PATH = '/field';
 export const TEMPLATE_PATH = '/template';
 export const WIDGET_PATH = '/widget';
-export const FORMS_PATH = '/forms';
-export const TEMPLATES_PATH = '/templates';
-export const WIDGETS_PATH = '/widgets';
-export const DSE_PATH = '/designSystemExtensions';
+export const DSE_PATH = '/designSystemExtension';
 export const INFRA_PATH = '/infra';
 export const COMPONENT_PREFIX_FIELD_PATH = "field/";
 export const COMPONENT_PREFIX_TEMPLATE_PATH = "template/";
 export const COMPONENT_PREFIX_WIDGET_PATH = "widget/";
-export const COMPONENT_PREFIX_FORMS_PATH = "forms/";
-export const COMPONENT_PREFIX_TEMPLATES_PATH = "templates/";
-export const COMPONENT_PREFIX_WIDGETS_PATH = "widgets/";
-export const COMPONENT_PREFIX_DSE_PATH = "designSystemExtensions/";
+export const COMPONENT_PREFIX_DSE_PATH = "designSystemExtension/";
 export const COMPONENT_PREFIX_INFRA_PATH = "infra/";
 
+export const COMPONENT_DIRECTORY_PREFIX_CUSTOM = "/custom-";
+
 export const CATEGORY_CUSTOM = "custom";
 export const CATEGORY_OVERRIDE = "override";
 export const CATEGORY_CONSTELLATION = "constellation";
@@ -157,20 +153,20 @@ export const COMPONENT_SCHEMA = {
   },
   overrideType: [
     {
-      name: 'Field (Form)',
-      value: 'forms'
+      name: 'Field',
+      value: 'field'
     },
     {
       name: 'Template',
-      value: 'templates'
+      value: 'template'
     },
     {
       name: 'Widget',
-      value: 'widgets'
+      value: 'widget'
     },
     {
       name: 'Design System Extension',
-      value: 'designSystemExtensions'
+      value: 'designSystemExtension'
     },
     {
       name: 'Infrastructure',
@@ -178,7 +174,7 @@ export const COMPONENT_SCHEMA = {
     }
   ],
   overrideComponent: {
-    forms: [
+    field: [
       {
         name: 'Auto Complete',
         value: 'AutoComplete'
@@ -260,7 +256,7 @@ export const COMPONENT_SCHEMA = {
         value: 'UserReference'
       }
     ],
-    designSystemExtensions: [
+    designSystemExtension: [
       {
         name: 'Case Summary Fields',
         value: 'CaseSummaryFields'
@@ -336,7 +332,7 @@ export const COMPONENT_SCHEMA = {
         value: 'View'
       }
     ],
-    templates: [
+    template: [
       {
         name: 'App Shell',
         value: 'AppShell'
@@ -482,7 +478,7 @@ export const COMPONENT_SCHEMA = {
         value: 'WideNarrow/WideNarrowPage'
       }
     ],
-    widgets: [
+    widget: [
       {
         name: 'App Announcement',
         value: 'AppAnnouncement'

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

@@ -0,0 +1,76 @@
+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,
+  getOptionsCategory,
+} from '../../util.js';
+import { PUBLISH_COMPONENT_SERVICE_REST_ENDPOINT, TOKEN_PATH, COMPONENT_SCHEMA, CATEGORY_CUSTOM } from '../../constants.js';
+
+
+export const getBuildCategory = async (options) => {
+  const categoryType = getOptionsCategory(options);
+
+  return [
+    {
+      name: 'category',
+      type: 'rawlist',
+      message: 'Category of components ?',
+      choices: COMPONENT_SCHEMA.category,
+      when() {
+        return !options.params[4] && categoryType == null;
+      }
+    }
+  ];
+};
+
+export const getBuildComponentQuestions = async (category) => {
+  const components = await getComponentsObj(true, category);
+  const defaultPegaConfig = await getPegaServerConfig();
+
+  if (components.length == 0) {
+    console.log(chalk.bold.yellow(`No components to build`));
+    process.exit(1);
+  }
+
+  return [
+    {
+      name: 'devBuild',
+      message: 'Generate development build ?',
+      default: defaultPegaConfig.devBuild
+    }
+  ];
+};
+
+
+
+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`;
+
+  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.rmd('dist', { recursive: true }, err => {
+    if (err) {
+      throw err;
+    }
+  });
+  return { zipContent, configContent };
+};

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

@@ -0,0 +1,121 @@
+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 { getBuildComponentQuestions, getBuildCategory } from './helper.js';
+import { getComponentDirectoryPath, showVersion, getOptionsCategory, getComponentsObj } from '../../util.js';
+
+import { CATEGORY_CUSTOM } from '../../constants.js';
+
+export default async options => {
+  showVersion();
+
+  const catQuestion = await getBuildCategory(options);
+  const catAnwers = await inquirer.prompt(catQuestion);
+
+  let category = catAnwers.category;
+  if (category == null) {
+    category = getOptionsCategory(options);
+  }
+
+  const components = await getComponentsObj(false, category);
+  const questions = await getBuildComponentQuestions(category);
+  const answers = await inquirer.prompt(questions);
+  const { sourceMap, devBuild } = answers;
+
+  let content = {
+    ...answers
+  };
+
+  var componentKey;
+
+  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',
+        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),
+      }
+    ],
+    {
+      exitOnError: true
+    }
+  );
+
+
+  if (category === CATEGORY_CUSTOM) {
+    for (var index in components) {
+      componentKey = components[index].value;
+      console.log(chalk.bold.green("Building: " + components[index].name));
+      await customTasks.run().catch(err => {
+         console.log(chalk.bold.red(err.toString()));
+      });
+    }
+  }
+  else {
+    for (var index in components) {
+      componentKey = components[index].value;
+      console.log(chalk.bold.green("Building: " + components[index].name));
+      await overrideTasks.run().catch(err => {
+         console.log(chalk.bold.red(err.toString()));
+      });
+    }
+  }
+
+  return true;
+};

package/src/tasks/create/index.js

@@ -258,15 +258,14 @@ export const validateCompile = async (
 export default async options => {
   showVersion();
 
-  if (options.params[10]) {
-    const componentName = options.params[3];
-    const componentLabel = options.params[4];
-    const library = options.params[5];
-    const version = options.params[6];
-    const framework = options.params[7];
-    const type = options.params[8];
-    const subtype = options.params[9];
-    const description = options.params[10];
+  if (options.params[9]) {
+    const type = options.params[3];
+    const subtype = options.params[4];
+    const componentName = options.params[5];
+    const componentLabel = options.params[6];
+    const library = options.params[7];
+    const version = options.params[8];
+    const description = options.params[9];
 
     await validateCompile(
       {
@@ -298,6 +297,50 @@ export default async options => {
 
 
     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)',
@@ -355,57 +398,6 @@ export default async options => {
         message: 'Please enter the application names to be supported (comma-separated). ',
         suffix: 'Keep empty for all applications'
       },
-      // {
-      //   name: 'framework',
-      //   type: 'rawlist',
-      //   message: 'Enter framework a',
-      //   default: 'COSMOS_React',
-      //   choices: COMPONENT_SCHEMA.framework
-      // },
-      {
-        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: 'description',
         message: 'Enter description for the component',

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

@@ -12,6 +12,7 @@ export default {
 };
 
 export const base{{COMPONENT_CLASS_NAME}} = () => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   const [value, setValue] = useState(configProps.value);
 
   const props = {

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

@@ -1,4 +1,4 @@
-import { withKnobs, text, boolean } from '@storybook/addon-knobs';
+import { withKnobs } from '@storybook/addon-knobs';
 import { configProps, stateProps } from './mock.stories';
 import {{COMPONENT_CLASS_NAME}} from './index.jsx';
 
@@ -26,8 +26,13 @@ export const base{{COMPONENT_CLASS_NAME}} = () => {
       return {
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {},
-            triggerFieldChange: () => {}
+            updateFieldValue: () => {/* nothing */},
+            triggerFieldChange: () => {/* nothing */}
+          };
+        },
+        getValidationApi: () => {
+          return {
+            validate: () => {/* nothing */}
           };
         },
         getStateProps: () => {
@@ -36,9 +41,9 @@ export const base{{COMPONENT_CLASS_NAME}} = () => {
         getConfigProps: () => {
           return configProps;
         },
-        ignoreSuggestion: () => {},
-        acceptSuggestion: () => {},
-        clearErrorMessages: () => {}
+        ignoreSuggestion: () => {/* nothing */},
+        acceptSuggestion: () => {/* nothing */},
+        clearErrorMessages: () => {/* nothing */}
       };
     },
     value: configProps.value,

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

@@ -1,5 +1,4 @@
-import { useState } from 'react';
-import { withKnobs, text, boolean } from '@storybook/addon-knobs';
+import { withKnobs } from '@storybook/addon-knobs';
 import { configProps, stateProps } from './mock.stories';
 import {{COMPONENT_CLASS_NAME}} from './index.jsx';
 
@@ -27,8 +26,13 @@ export const base{{COMPONENT_CLASS_NAME}} = () => {
       return {
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {},
-            triggerFieldChange: () => {}
+            updateFieldValue: () => {/* nothing */},
+            triggerFieldChange: () => {/* nothing */}
+          };
+        },
+        getValidationApi: () => {
+          return {
+            validate: () => {/* nothing */}
           };
         },
         getStateProps: () => {
@@ -37,9 +41,9 @@ export const base{{COMPONENT_CLASS_NAME}} = () => {
         getConfigProps: () => {
           return configProps;
         },
-        ignoreSuggestion: () => {},
-        acceptSuggestion: () => {},
-        clearErrorMessages: () => {}
+        ignoreSuggestion: () => {/* nothing */},
+        acceptSuggestion: () => {/* nothing */},
+        clearErrorMessages: () => {/* nothing */}
       };
     },
     value: configProps.value,

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

@@ -20,7 +20,7 @@ export const base{{COMPONENT_CLASS_NAME}} = () => {
     showGroupSeparators: configProps.showGroupSeparators,
     hasSuggestions: configProps.hasSuggestions,
     testId: configProps.testId,
-    fieldMetadata: fieldMetadata,
+    fieldMetadata,
 
     getPConnect: () => {
       return {
@@ -29,14 +29,14 @@ export const base{{COMPONENT_CLASS_NAME}} = () => {
         },
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {},
-            triggerFieldChange: () => {}
+            updateFieldValue: () => {/* nothing */},
+            triggerFieldChange: () => {/* nothing */}
           };
         },
-        ignoreSuggestion: () => {},
-        acceptSuggestion: () => {},
-        setInheritedProps: () => {},
-        resolveConfigProps: () => {}
+        ignoreSuggestion: () => {/* nothing */},
+        acceptSuggestion: () => {/* nothing */},
+        setInheritedProps: () => {/* nothing */},
+        resolveConfigProps: () => {/* nothing */}
       };
     }
   };

package/src/tasks/create/templates/Constellation/Field/Decimal-Currency/demo.stories.jsx.mustache

@@ -13,7 +13,7 @@ export default {
 export const base{{COMPONENT_CLASS_NAME}} = () => {
 
   const props = {
-    value: configProps.value,
+    value: Number(configProps.value),
     placeholder: configProps.placeholder,
     label: configProps.label,
     helperText: configProps.helperText,
@@ -23,7 +23,7 @@ export const base{{COMPONENT_CLASS_NAME}} = () => {
     alwaysShowISOCode: configProps.alwaysShowISOCode,
     hasSuggestions: configProps.hasSuggestions,
     testId: configProps.testId,
-    fieldMetadata: fieldMetadata,
+    fieldMetadata,
 
     getPConnect: () => {
       return {
@@ -32,14 +32,15 @@ export const base{{COMPONENT_CLASS_NAME}} = () => {
         },
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {},
-            triggerFieldChange: () => {}
+            updateFieldValue: () => {/* nothing */},
+            triggerFieldChange: () => {/* nothing */}
           };
         },
-        ignoreSuggestion: () => {},
-        acceptSuggestion: () => {},
-        setInheritedProps: () => {},
-        resolveConfigProps: () => {}
+        ignoreSuggestion: () => {/* nothing */},
+        acceptSuggestion: () => {/* nothing */},
+        setInheritedProps: () => {/* nothing */},
+        resolveConfigProps: () => {/* nothing */},
+        clearErrorMessages: () => {/* nothing */}
       };
     }
   };

package/src/tasks/create/templates/Constellation/Field/Decimal-Percentage/demo.stories.jsx.mustache

@@ -20,7 +20,7 @@ export const base{{COMPONENT_CLASS_NAME}} = () => {
     showGroupSeparators: configProps.showGroupSeparators,
     hasSuggestions: configProps.hasSuggestions,
     testId: configProps.testId,
-    fieldMetadata: fieldMetadata,
+    fieldMetadata,
 
     getPConnect: () => {
       return {
@@ -29,14 +29,14 @@ export const base{{COMPONENT_CLASS_NAME}} = () => {
         },
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {},
-            triggerFieldChange: () => {}
+            updateFieldValue: () => {/* nothing */},
+            triggerFieldChange: () => {/* nothing */}
           };
         },
-        ignoreSuggestion: () => {},
-        acceptSuggestion: () => {},
-        setInheritedProps: () => {},
-        resolveConfigProps: () => {}
+        ignoreSuggestion: () => {/* nothing */},
+        acceptSuggestion: () => {/* nothing */},
+        setInheritedProps: () => {/* nothing */},
+        resolveConfigProps: () => {/* nothing */}
       };
     }
   };

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

@@ -20,7 +20,7 @@ export const base{{COMPONENT_CLASS_NAME}} = () => {
     showGroupSeparators: configProps.showGroupSeparators,
     hasSuggestions: configProps.hasSuggestions,
     testId: configProps.testId,
-    fieldMetadata: fieldMetadata,
+    fieldMetadata,
 
     getPConnect: () => {
       return {
@@ -29,14 +29,14 @@ export const base{{COMPONENT_CLASS_NAME}} = () => {
         },
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {},
-            triggerFieldChange: () => {}
+            updateFieldValue: () => {/* nothing */},
+            triggerFieldChange: () => {/* nothing */}
           };
         },
-        ignoreSuggestion: () => {},
-        acceptSuggestion: () => {},
-        setInheritedProps: () => {},
-        resolveConfigProps: () => {}
+        ignoreSuggestion: () => {/* nothing */},
+        acceptSuggestion: () => {/* nothing */},
+        setInheritedProps: () => {/* nothing */},
+        resolveConfigProps: () => {/* nothing */}
       };
     }
   };