@pega/dx-component-builder-sdk 0.1.0 → 0.1.1

package/package.json

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

package/src/cli.js

@@ -8,6 +8,7 @@ import {
   deleteComponent,
   deleteAllComponents,
   listComponents,
+  overrideComponent,
   publishComponent,
   publishAllComponents,
   updateComponent,
@@ -17,6 +18,7 @@ import {
 
 const TASKS = {
   CREATE: 'create',
+  OVERRIDE: 'override',
   BUILD: 'buildComponent',
   PUBLISH: 'publish',
   PUBLISH_All: 'publishAll',
@@ -56,6 +58,10 @@ export default async (args = []) => {
       createComponent(options);
       break;
     }
+    case TASKS.OVERRIDE: {
+      overrideComponent(options);
+      break;
+    }
     case TASKS.PUBLISH: {
       publishComponent(options);
       break;

package/src/constants.js

@@ -8,9 +8,19 @@ 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 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_INFRA_PATH = "infra/";
 
 /* REST end points */
 export const PUBLISH_COMPONENT_SERVICE_REST_ENDPOINT = 'PRRestService/dev/v1/publish_component';
@@ -38,6 +48,16 @@ export const COMPONENT_SCHEMA = {
       value: 'SDK-WebComponents'
     }
   ],
+  category: [
+    {
+      name: 'Custom',
+      value: 'custom'
+    },
+    {
+      name: 'Override',
+      value: 'override'
+    }
+  ],
   type: [
     {
       name: 'Field',
@@ -130,5 +150,351 @@ export const COMPONENT_SCHEMA = {
         value: ['PAGE', 'CASE']
       }
     ]
+  },
+  overrideType: [
+    {
+      name: 'Form (Field)',
+      value: 'forms'
+    },
+    {
+      name: 'Template',
+      value: 'templates'
+    },
+    {
+      name: 'Widget',
+      value: 'widgets'
+    },
+    {
+      name: 'Design System Extension',
+      value: 'designSystemExtensions'
+    },
+    {
+      name: 'Infrastructure',
+      value: 'infra'
+    }
+  ],
+  overrideComponent: {
+    forms: [
+      {
+        name: 'Auto Complete',
+        value: 'AutoComplete'
+      },
+      {
+        name: 'Cancel Alert',
+        value: 'CancelAlert'
+      },
+      {
+        name: 'Checkbox',
+        value: 'Checkbox'
+      },
+      {
+        name: 'Currency',
+        value: 'Currency'
+      },
+      {
+        name: 'Date',
+        value: 'Date'
+      },
+      {
+        name: 'Date Time',
+        value: 'DateTime'
+      },
+      {
+        name: 'Decimal',
+        value: 'Decimal'
+      },
+      {
+        name: 'Dropdown',
+        value: 'Dropdown'
+      },
+      {
+        name: 'Email',
+        value: 'Email'
+      },
+      {
+        name: 'Integer',
+        value: 'Integer'
+      },
+      {
+        name: 'Percentage',
+        value: 'Percentage'
+      },
+      {
+        name: 'Phone',
+        value: 'Phopne'
+      },
+      {
+        name: 'Radio Buttons',
+        value: 'RadioButons'
+      },
+      {
+        name: 'Semantic Link',
+        value: 'SemanticLink'
+      },
+      {
+        name: 'Text Area',
+        value: 'TextArea'
+      },
+      {
+        name: 'Text Content',
+        value: 'TextContent'
+      },
+      {
+        name: 'Text Input',
+        value: 'TextInput'
+      },
+      {
+        name: 'Time',
+        value: 'Time'
+      },
+      {
+        name: 'URL',
+        value: 'URL'
+      },
+      {
+        name: 'User Referene',
+        value: 'UserRefernece'
+      }
+    ],
+    designSystemExtensions: [
+      {
+        name: 'Case Summary Fields',
+        value: 'CaseSummaryFields'
+      },
+      {
+        name: 'Details Fields',
+        value: 'DetailsFields'
+      },
+      {
+        name: 'Field Group',
+        value: 'FieldGroup'
+      },
+      {
+        name: 'Field Group List',
+        value: 'FieldGroupList'
+      },
+      {
+        name: 'Field Value List',
+        value: 'FieldValueList'
+      },
+      {
+        name: 'Operator',
+        value: 'Operator'
+      },
+      {
+        name: 'Pulse',
+        value: 'Pulse'
+      }
+    ],
+    infra: [
+      {
+        name: 'Action Buttons',
+        value: 'ActionButtons'
+      },
+      {
+        name: 'Assignment',
+        value: 'Assignment'
+      },
+      {
+        name: 'Assignment Card',
+        value: 'AssignmentCard'
+      },
+      {
+        name: 'Dashboard Filter',
+        value: 'DashboardFilter'
+      },
+      {
+        name: 'Defer Load',
+        value: 'DeferLoad'
+      },
+      {
+        name: 'Error Boundry',
+        value: 'ErroBoundry'
+      },
+      {
+        name: 'Multi Step',
+        value: 'MultiStep'
+      },
+      {
+        name: 'Nav Bar',
+        value: 'NavBar'
+      },
+      {
+        name: 'Reference',
+        value: 'Reference'
+      },
+      {
+        name: 'Region',
+        value: 'Region'
+      },
+      {
+        name: 'Stages',
+        value: 'Stages'
+      },
+      {
+        name: 'To Do',
+        value: 'ToDo'
+      },
+      {
+        name: 'Vertical Tabs',
+        value: 'VerticalTabs'
+      },
+      {
+        name: 'View',
+        value: 'View'
+      }
+    ],
+    templates: [
+      {
+        name: 'App Shell',
+        value: 'AppShell'
+      },
+      {
+        name: 'Case Summary',
+        value: 'CaseSummary'
+      },
+      {
+        name: 'Case View',
+        value: 'CaseView'
+      },
+      {
+        name: 'Data Reference',
+        value: 'DataReference'
+      },
+      {
+        name: 'Default Form',
+        value: 'DefaultForm'
+      },
+      {
+        name: 'Details',
+        value: 'Details/Details'
+      },
+      {
+        name: 'Details Sub Tabs',
+        value: 'Details/DetailsSubTabs'
+      },
+      {
+        name: 'Details Two Column',
+        value: 'Details/DetailsTwoColumn'
+      },
+      {
+        name: 'Details Three Column',
+        value: 'Details/DetailsThreeColumn'
+      },
+      {
+        name: 'Field Group',
+        value: 'FieldGroupTemplate'
+      },
+      {
+        name: 'Inline Dashboard',
+        value: 'InlineDashboard'
+      },
+      {
+        name: 'List Page',
+        value: 'List Page'
+      },
+      {
+        name: 'Multi Reference - ReadOnly',
+        value: 'MultiReferenceReadOnly'
+      },
+      {
+        name: 'Narrow Wide',
+        value: 'NarrowWide/NarrowWide'
+      },
+      {
+        name: 'Narrow Wide Details',
+        value: 'NarrowWide/NarrowWideDetails'
+      },
+      {
+        name: 'Narrow Wide Form',
+        value: 'NarrowWide/NarrowWideForm'
+      },
+      {
+        name: 'Narrow Wide Page',
+        value: 'NarrowWide/NarrowWidePage'
+      },
+      {
+        name: 'One Column',
+        value: 'OneColumn/OneColumn'
+      },
+      {
+        name: 'One Column Page',
+        value: 'OneColumn/OneColumnPage'
+      },
+      {
+        name: 'One Column Tab',
+        value: 'OneColumn/OneColumnTab'
+      },
+      {
+        name: 'Promoted Filters',
+        value: 'PromotedFilters'
+      },
+      {
+        name: 'Simple Table',
+        value: 'SimpleTable'
+      },
+      {
+        name: 'Single Reference - ReadOnly',
+        value: 'SingleReferenceReadOnly'
+      },
+      {
+        name: 'Sub Tabs',
+        value: 'SubTabs'
+      },
+      {
+        name: 'Two Column',
+        value: 'TwoColumn/TwoColumn'
+      },
+      {
+        name: 'Two Column Page',
+        value: 'TwoColumn/TwoColumnPage'
+      },
+      {
+        name: 'Two Column Tab',
+        value: 'TwoColumn/TwoColumnTab'
+      },
+      {
+        name: 'Wide Narrow',
+        value: 'WideNarrow/WideNarrow'
+      },
+      {
+        name: 'Wide Narrow Details',
+        value: 'WideNarrow/WideNarrowDetails'
+      },
+      {
+        name: 'Wide Narrow Form',
+        value: 'WideNarrow/WideNarrowForm'
+      },
+      {
+        name: 'Wide Narrow Page',
+        value: 'WideNarrow/WideNarrowPage'
+      }
+    ],
+    widgets: [
+      {
+        name: 'App Announcement',
+        value: 'AppAnnoucement'
+      },
+      {
+        name: 'Case History',
+        value: 'CaseHistory'
+      },
+      {
+        name: 'File Utility',
+        value: 'FileUtility'
+      },
+      {
+        name: 'Followers',
+        value: 'Followers'
+      },
+      {
+        name: 'Summary Item',
+        value: 'SummaryItem'
+      },
+      {
+        name: 'Summary List',
+        value: 'SummaryList'
+      }
+    ],
   }
 };

package/src/tasks/build/helper.js

@@ -14,12 +14,53 @@ import {
   getPegaServerConfig,
   validateRulesetVersion
 } from '../../util.js';
-import { PUBLISH_COMPONENT_SERVICE_REST_ENDPOINT, TOKEN_PATH } from '../../constants.js';
+import { PUBLISH_COMPONENT_SERVICE_REST_ENDPOINT, TOKEN_PATH, COMPONENT_SCHEMA } from '../../constants.js';
 
-export const getPublishComponentQuestions = async () => {
-  const components = await getComponentsObj(true);
+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 [
+    {
+      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: 'componentKey',
@@ -42,8 +83,8 @@ export const getPublishComponentQuestions = async () => {
   ];
 };
 
-export const zipComponent = async componentKey => {
-  const srcDirectory = await getComponentDirectoryPath(componentKey);
+export const zipComponent = async (componentKey, category = "custom") => {
+  const srcDirectory = await getComponentDirectoryPath(componentKey, category);
   const buildDirectory = await path.join(path.resolve(), 'dist/components', componentKey);
   const configJson = `${srcDirectory}/config.json`;
 
@@ -62,64 +103,3 @@ export const zipComponent = async componentKey => {
   });
   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

@@ -6,11 +6,19 @@ 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 { getBuildComponentQuestions, getBuildCategory, getOptionsCategory } from './helper.js';
 import { getComponentDirectoryPath } from '../../util.js';
 
 export default async options => {
-  const questions = await getPublishComponentQuestions();
+  const catQuestion = await getBuildCategory(options);
+  const catAnwers = await inquirer.prompt(catQuestion);
+
+  let category = catAnwers.category;
+  if (category == null) {
+    category = getOptionsCategory(options);
+  }
+
+  const questions = await getBuildComponentQuestions(category);
   const answers = await inquirer.prompt(questions);
   const { componentKey, sourceMap, devBuild } = answers;
 
@@ -23,20 +31,20 @@ export default async options => {
       {
         title: 'Validate config schema',
         task: async () => {
-          await validate(componentKey);
+          await validate(componentKey, category);
         }
       },
       {
         title: 'Lint component',
         task: async () => {
-          const targetDirectory = await getComponentDirectoryPath(componentKey);
+          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),
+        task: async () => await bundleComponent(componentKey, sourceMap, devBuild, category),
         skip: () => (options.skipBundle ? 'Skipped bundling component' : undefined)
       }
     ],

package/src/tasks/bundle/index.js

@@ -9,8 +9,8 @@ import buildComponent from './builder/index.js';
 
 const extensions = ['ts', 'tsx', 'js', 'jsx'];
 
-const bundleComponent = async (componentKey, sourceMap, devBuild) => {
-  const componentDirectory = await getComponentDirectoryPath(componentKey);
+const bundleComponent = async (componentKey, sourceMap, devBuild, category = "custom") => {
+  const componentDirectory = await getComponentDirectoryPath(componentKey, category);
 
   const idx = (
     await Promise.all(

package/src/tasks/delete/helper.js

@@ -3,7 +3,7 @@ import inquirer from 'inquirer';
 import ora from 'ora';
 //import { element } from 'prop-types';
 
-import { LIST_COMPONENT_SERVICE_REST_ENDPOINT } from '../../constants.js';
+import { LIST_COMPONENT_SERVICE_REST_ENDPOINT, COMPONENT_SCHEMA } from '../../constants.js';
 import {
   constructCompleteUrl,
   deleteLocalComponent,
@@ -21,25 +21,55 @@ export const SOURCE_OF_COMPONENT_TYPES = {
   LOCAL: 'Local'
 };
 
+
+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 getDeleteComponentsQuestions = async (options, sourceOfComponentsOption) => {
   const defaultPegaServerConfig = await getPegaServerConfig();
+  const categoryType = getOptionsCategory(options);
 
   return [
+    {
+      name: 'category',
+      type: 'rawlist',
+      message: 'Category of components ?',
+      choices: COMPONENT_SCHEMA.category,
+      when() {
+        return !options.params[4] && categoryType == null;
+      }
+    },
     {
       name: 'sourceOfComponents',
       type: 'rawlist',
       message: 'Delete components from Server or Local ?',
       choices: Object.values(SOURCE_OF_COMPONENT_TYPES),
       default: defaultPegaServerConfig.sourceOfComponents,
-      when() {
-        return !options.params[3];
+      when(answers) {
+        return !options.params[4] && answers.category != 'override' && categoryType != 'override';
       }
     }
   ];
 };
 
-export const deleteLocalComponents = async sourceOfComponents => {
-  const localComponents = await getComponentsObj(true);
+export const deleteLocalComponents = async (sourceOfComponents, category = "custom") => {
+  const localComponents = await getComponentsObj(true, category);
   //const localComponentsAndSub = await getComponentsAndSubDirectory();
 
   if (localComponents.length > 0) {
@@ -58,7 +88,18 @@ export const deleteLocalComponents = async sourceOfComponents => {
       }
     ]);
     if (answers.confirmDeletion) {
-      await deleteLocalComponent(answers.componentKey);
+      await deleteLocalComponent(answers.componentKey, category);
+
+      if (category === "override") {
+        // need to remove the map as well
+        if (answers.componentKey != undefined) {
+          await deleteFromComponentMap(answers.componentKey, category);
+        }
+        else {
+          console.log(chalk.bold.redBright(`No component in map: ` + componnetName));
+        }
+
+      }
     }
   } else {
     console.log(chalk.bold.redBright(`No custom components in ${sourceOfComponents}`));