@pega/dx-component-builder-sdk 8.23.15 → 8.23.17

package/src/tasks/map/map.js

@@ -5,32 +5,44 @@ import { join } from 'path';
 
 import {
   convertIntoPascalCase,
+  convertIntoKebabCase,
+  reverseKebabCase,
   removeComponentPrefix,
+  getLocalComponentKeyFromConfig,
   getFramework
 } from '../../util.js';
 
 import {
-  COMPONENTS_DIRECTORY_PATH,
+  REACT_COMPONENTS_DIRECTORY_PATH,
+  ANGULAR_COMPONENTS_DIRECTORY_PATH,
+  ANGULAR_COMPONENTS_APP_DIRECTORY_PATH,
   SDK_CONFIG_JSON_FILENAME,
   CATEGORY_CUSTOM,
   CATEGORY_CONSTELLATION,
   COMPONENT_DIRECTORY_PREFIX_CUSTOM,
   COMPONENT_DIRECTORY_SUFFIX_SDK,
-  COMPONENT_REACT_LIB_PATH
+  COMPONENT_REACT_LIB_PATH,
+  COMPONENT_ANGULAR_LIB_PATH
 } from '../../constants.js';
+import { or } from 'ajv/dist/compile/codegen/index.js';
 
-export const SDK_LOCAL_COMPONENT_MAP_FILENAME = "sdk-local-component-map.js";
+export const SDK_LOCAL_REACT_COMPONENT_MAP_FILENAME = "sdk-local-component-map.js";
+export const SDK_LOCAL_ANGULAR_COMPONENT_MAP_FILENAME = "sdk-local-component-map.ts";
 export const IMPORT_END_TAG = "/*import end";
 export const MAP_END_TAG = "/*map end";
 
 export const DXCB_CONFIG_INTERNAL_JSON_FILENAME = 'src/dxcb.config.json';
 const pegaConfigInternalJsonPath = path.join(path.resolve(), DXCB_CONFIG_INTERNAL_JSON_FILENAME);
-const pegaLocalComponentMapPath = path.join(path.resolve(), SDK_LOCAL_COMPONENT_MAP_FILENAME);
+const pegaLocalReactComponentMapPath = path.join(path.resolve(), SDK_LOCAL_REACT_COMPONENT_MAP_FILENAME);
+const pegaLocalAngularComponentMapPath = path.join(path.resolve(),  SDK_LOCAL_ANGULAR_COMPONENT_MAP_FILENAME);
 
 export const updateComponentMap = async (componentKey, category = CATEGORY_CUSTOM) => {
 
   const framework = await getFramework();
 
+  // POSIX key
+  componentKey = componentKey.split(path.sep).join("/");
+
   switch (framework) {
     case 'SDK-React' :
 
@@ -39,10 +51,12 @@ export const updateComponentMap = async (componentKey, category = CATEGORY_CUSTO
       const componentNameNoPrefix = removeComponentPrefix(componentKey);
       const componentName = convertIntoPascalCase(componentNameNoPrefix);
     
-      let mapData = fs.readFileSync(pegaLocalComponentMapPath, { encoding: 'utf8' });
+      let mapData = fs.readFileSync(pegaLocalReactComponentMapPath, { encoding: 'utf8' });
     
-      let importComponent = join(COMPONENTS_DIRECTORY_PATH, categoryDirectory, componentKey);
-      importComponent = "./".concat(importComponent);
+      let importComponent = join(REACT_COMPONENTS_DIRECTORY_PATH, categoryDirectory, componentKey);
+
+      // POSIX path
+      importComponent = "./".concat(importComponent).split(path.sep).join("/");
     
       let importFull = "import ".concat(componentName).concat(" from '").concat(importComponent).concat("/';");
       let mapFull = "\"".concat(componentNameNoPrefix).concat("\" : " ).concat(componentName).concat(",");
@@ -64,14 +78,57 @@ export const updateComponentMap = async (componentKey, category = CATEGORY_CUSTO
     
         mapData = mapDataStart.concat("  ").concat(mapFull).concat("\n").concat(mapDataEnd);
     
-        fs.writeFileSync(pegaLocalComponentMapPath, mapData, { encoding: 'utf8' });
+        fs.writeFileSync(pegaLocalReactComponentMapPath, mapData, { encoding: 'utf8' });
     
     
       }
       break;
     case 'SDK-Angular' :
+      const categoryDirectoryAng = (category === CATEGORY_CONSTELLATION) ? join("/", COMPONENT_DIRECTORY_PREFIX_CUSTOM + category.toLowerCase()) : join("/", category.toLowerCase() + COMPONENT_DIRECTORY_SUFFIX_SDK);
+    
+      const componentNameNoPrefixAng = removeComponentPrefix(componentKey);
+      const originalComponenttNameConfigAng = await getLocalComponentKeyFromConfig(componentKey, category);
+      const originalComponentName = originalComponenttNameConfigAng != "" ? originalComponenttNameConfigAng : reverseKebabCase(componentNameNoPrefixAng);
+      
+      const componentComponentNameAng = convertIntoPascalCase(originalComponentName).concat("Component");
+
+
+
+    
+      let mapDataAng = fs.readFileSync(pegaLocalAngularComponentMapPath, { encoding: 'utf8' });
+    
+      // componentKey twice for directory and file
+      let importComponentAng = join(ANGULAR_COMPONENTS_DIRECTORY_PATH, categoryDirectoryAng, componentKey, componentNameNoPrefixAng);
+
+      // POSIX path
+      importComponentAng = "./".concat(importComponentAng).split(path.sep).join("/");
+    
+      let importFullAng = "import { ".concat(componentComponentNameAng).concat(" } from '").concat(importComponentAng).concat(".component';");
+      let mapFullAng = "\"".concat(originalComponentName).concat("\" : " ).concat(componentComponentNameAng).concat(",");
+    
+      if (mapDataAng.indexOf(importComponentAng.concat(".component")) < 0) {
+        // not present so we can add
+    
+        // add import
+        let endImportIndex = mapDataAng.indexOf(IMPORT_END_TAG);
+        let mapDataStart = mapDataAng.substring(0, endImportIndex);
+        let mapDataEnd = mapDataAng.substring(endImportIndex);
+    
+        mapDataAng = mapDataStart.concat(importFullAng).concat("\n").concat(mapDataEnd);
+    
+        // add map
+        let endMapIndex = mapDataAng.indexOf(MAP_END_TAG);
+        mapDataStart = mapDataAng.substring(0, endMapIndex);
+        mapDataEnd = mapDataAng.substring(endMapIndex);
+    
+        mapDataAng = mapDataStart.concat("  ").concat(mapFullAng).concat("\n").concat(mapDataEnd);
+    
+        fs.writeFileSync(pegaLocalAngularComponentMapPath, mapDataAng, { encoding: 'utf8' });
+    
+    
+      }
       break;
-    case 'WebComponents' :
+    case 'SDK-WebComponents' :
       break;
     
   }
@@ -85,6 +142,9 @@ export const deleteFromComponentMap = async (componentKey, category = CATEGORY_C
 
   const framework = await getFramework();
 
+  // POSIX key
+  componentKey = componentKey.split(path.sep).join("/");
+
   switch (framework) {
     case 'SDK-React' :
       const categoryDirectory = (category === CATEGORY_CONSTELLATION) ? join("/", COMPONENT_DIRECTORY_PREFIX_CUSTOM + category.toLowerCase()) : join("/", category.toLowerCase() + COMPONENT_DIRECTORY_SUFFIX_SDK);
@@ -92,10 +152,13 @@ export const deleteFromComponentMap = async (componentKey, category = CATEGORY_C
       const componentNameNoPrefix = removeComponentPrefix(componentKey);
       const componentName = convertIntoPascalCase(componentNameNoPrefix);
     
-      let mapData = fs.readFileSync(pegaLocalComponentMapPath, { encoding: 'utf8' });
+      let mapData = fs.readFileSync(pegaLocalReactComponentMapPath, { encoding: 'utf8' });
     
-      let importComponent = join(COMPONENTS_DIRECTORY_PATH, categoryDirectory, componentKey);
-      importComponent = "./".concat(importComponent);
+      let importComponent = join(REACT_COMPONENTS_DIRECTORY_PATH, categoryDirectory, componentKey);
+
+      // POSIX path
+      importComponent = "./".concat(importComponent).split(path.sep).join("/");
+
     
       let importFull = "import ".concat(componentName).concat(" from '").concat(importComponent).concat("/';");
       let mapFull = "\"".concat(componentNameNoPrefix).concat("\" : " ).concat(componentName).concat(",");
@@ -109,13 +172,46 @@ export const deleteFromComponentMap = async (componentKey, category = CATEGORY_C
         mapData = mapData.replace(removeImport, "");
         mapData = mapData.replace(removeMap, "");
     
-        fs.writeFileSync(pegaLocalComponentMapPath, mapData, { encoding: 'utf8' });
+        fs.writeFileSync(pegaLocalReactComponentMapPath, mapData, { encoding: 'utf8' });
     
       }
       break;
     case 'SDK-Angular' :
+      const categoryDirectoryAng = (category === CATEGORY_CONSTELLATION) ? join("/", COMPONENT_DIRECTORY_PREFIX_CUSTOM + category.toLowerCase()) : join("/", category.toLowerCase() + COMPONENT_DIRECTORY_SUFFIX_SDK);
+    
+      const componentNameNoPrefixAng = removeComponentPrefix(componentKey);
+      const originalComponenttNameConfigAng = await getLocalComponentKeyFromConfig(componentKey, category);
+      const originalComponentName = originalComponenttNameConfigAng != "" ? originalComponenttNameConfigAng : reverseKebabCase(componentNameNoPrefixAng);
+      
+      const componentComponentNameAng = convertIntoPascalCase(originalComponentName).concat("Component");
+
+      let mapDataAng = fs.readFileSync(pegaLocalAngularComponentMapPath, { encoding: 'utf8' });
+
+      // componentKey twice for directory and file
+      let importComponentAng = join(ANGULAR_COMPONENTS_DIRECTORY_PATH, categoryDirectoryAng, componentKey, componentNameNoPrefixAng);
+
+      // POSIX path
+      importComponentAng = "./".concat(importComponentAng).split(path.sep).join("/");
+    
+    
+      let importFullAng = "import { ".concat(componentComponentNameAng).concat(" } from '").concat(importComponentAng).concat(".component';");
+      let mapFullAng = "\"".concat(originalComponentName).concat("\" : " ).concat(componentComponentNameAng).concat(",");
+     
+    
+      if (mapDataAng.indexOf(importFullAng) >= 0) {
+    
+        let removeImport = importFullAng.concat("\n");
+        let removeMap = "  ".concat(mapFullAng).concat("\n");
+    
+        mapDataAng = mapDataAng.replace(removeImport, "");
+        mapDataAng = mapDataAng.replace(removeMap, "");
+    
+        fs.writeFileSync(pegaLocalAngularComponentMapPath, mapDataAng, { encoding: 'utf8' });
+    
+      }
       break;
-    case 'WebComponents' :
+      break;
+    case 'SDK-WebComponents' :
       break;
     
   }
@@ -129,6 +225,10 @@ export const renameComponentInMap = async (oldComponentKey, newComponentKey) =>
 
   const framework = await getFramework();
 
+  // POSIX key
+  oldComponentKey = oldComponentKey.split(path.sep).join("/");
+  newComponentKey = newComponentKey.split(path.sep).join("/");
+
   switch (framework) {
     case 'SDK-React' :
 
@@ -138,23 +238,45 @@ export const renameComponentInMap = async (oldComponentKey, newComponentKey) =>
       const newComponentNameNoPrefix = removeComponentPrefix(newComponentKey);
       const newComponentName = convertIntoPascalCase(newComponentNameNoPrefix);
     
-      let mapData = fs.readFileSync(pegaLocalComponentMapPath, { encoding: 'utf8' });
+      let mapData = fs.readFileSync(pegaLocalReactComponentMapPath, { encoding: 'utf8' });
     
       if (mapData.indexOf(oldComponentName) >= 0) {
-    
-    
-    
+        
         mapData = mapData.replaceAll(oldComponentName + " ", newComponentName + " ");
         mapData = mapData.replaceAll(oldComponentName + ",", newComponentName + ",");
     
         mapData = mapData.replaceAll(oldComponentNameNoPrefix + "/", newComponentNameNoPrefix + "/");
         mapData = mapData.replaceAll( '"' + oldComponentNameNoPrefix + '"' , '"' + newComponentNameNoPrefix + '"');
     
-        fs.writeFileSync(pegaLocalComponentMapPath, mapData, { encoding: 'utf8' });
+        fs.writeFileSync(pegaLocalReactComponentMapPath, mapData, { encoding: 'utf8' });
     
       }
       break;
     case 'SDK-Angular' :
+      const oldComponentNameNoPrefixAng = removeComponentPrefix(oldComponentKey);
+      const oldComponentNameAng = convertIntoPascalCase(oldComponentNameNoPrefixAng);
+      const oldComponentKebabNameAng = convertIntoKebabCase(oldComponentNameAng);
+    
+      const newComponentNameNoPrefixAng = removeComponentPrefix(newComponentKey);
+      const newComponentNameAng = convertIntoPascalCase(newComponentNameNoPrefixAng);
+      const newComponentKebabNameAng = convertIntoKebabCase(newComponentNameAng);
+    
+      let mapDataAng = fs.readFileSync(pegaLocalAngularComponentMapPath, { encoding: 'utf8' });
+    
+      if (mapDataAng.indexOf(oldComponentNameAng) >= 0) {
+        
+        mapDataAng = mapDataAng.replaceAll(oldComponentNameAng + " ", newComponentNameAng + " ");
+        mapDataAng = mapDataAng.replaceAll(oldComponentNameAng + ",", newComponentNameAng + ",");
+    
+        mapDataAng = mapDataAng.replaceAll(oldComponentKebabNameAng + "/", newComponentKebabNameAng + "/");
+        mapDataAng = mapDataAng.replaceAll(oldComponentKebabNameAng + ".component", newComponentKebabNameAng + ".component");
+
+        mapDataAng = mapDataAng.replaceAll( '"' + oldComponentNameNoPrefixAng + '"' , '"' + newComponentNameNoPrefixAng + '"');
+        mapDataAng = mapDataAng.replaceAll( oldComponentNameAng + 'Component' , newComponentNameAng + 'Component');
+    
+        fs.writeFileSync(pegaLocalAngularComponentMapPath, mapDataAng, { encoding: 'utf8' });
+    
+      }
       break;
     case 'WebComponents' :
       break;
@@ -169,19 +291,28 @@ export const renameComponentInMap = async (oldComponentKey, newComponentKey) =>
 export const clearComponentMap = async () =>  {
 
   const framework = await getFramework();
+  let blankMap;
+  let blankMapData;
 
   switch (framework) {
     case 'SDK-React' :
       // get blank version
-      let blankMap = path.join(path.resolve(), COMPONENT_REACT_LIB_PATH, SDK_LOCAL_COMPONENT_MAP_FILENAME);
+      blankMap = path.join(path.resolve(), COMPONENT_REACT_LIB_PATH, SDK_LOCAL_REACT_COMPONENT_MAP_FILENAME);
 
-      let blankMapData = fs.readFileSync(blankMap, { encoding: 'utf8' });
+      blankMapData = fs.readFileSync(blankMap, { encoding: 'utf8' });
 
       // store blank version in sdk-local-component-map.js
-      fs.writeFileSync(pegaLocalComponentMapPath, blankMapData, { encoding: 'utf8' });
+      fs.writeFileSync(pegaLocalReactComponentMapPath, blankMapData, { encoding: 'utf8' });
 
       break;
     case 'SDK-Angular' :
+      // get blank version
+      blankMap = path.join(path.resolve(), COMPONENT_ANGULAR_LIB_PATH, SDK_LOCAL_ANGULAR_COMPONENT_MAP_FILENAME);
+
+      blankMapData= fs.readFileSync(blankMap, { encoding: 'utf8' });
+
+      // store blank version in sdk-local-component-map.js
+      fs.writeFileSync(pegaLocalAngularComponentMapPath, blankMapData, { encoding: 'utf8' });
       break;
     case 'WebComponents' :
       break;
@@ -190,3 +321,82 @@ export const clearComponentMap = async () =>  {
 
 };
 
+export const isComponentInMap = (componentName, framework) => {
+
+  let isInMap = true;
+
+  switch (framework) {
+
+    case "SDK-React":
+      const mapData = fs.readFileSync(pegaLocalAngularComponentMapPath, { encoding: 'utf8' });
+      const componentPascal = convertIntoPascalCase(componentName)
+
+
+      if (mapDataAng.indexOf(componentName) < 0) {
+        isInMap = false;
+      }
+      if (mapDataAng.indexOf(componentPascal) < 0) {
+        isInMap = false;
+      }
+
+      break;
+    case "SDK-Angular":
+      const mapDataAng = fs.readFileSync(pegaLocalAngularComponentMapPath, { encoding: 'utf8' });
+      const componentPascalAng = convertIntoPascalCase(componentName);
+      const componentKebabAng = convertIntoKebabCase(componentPascalAng);
+
+      if (mapDataAng.indexOf(componentName) < 0) {
+        isInMap = false;
+      }
+      if (mapDataAng.indexOf(componentPascalAng) < 0) {
+        isInMap = false;
+      }
+      if (mapDataAng.indexOf(componentKebabAng) < 0) {
+        isInMap = false;
+      }
+
+      break;
+    case "SDK-WebComponents":
+      // need to handle this
+      isInMap = false;
+      break
+  }
+
+  return isInMap;
+
+};
+
+export const isComponentMapEmpty = (framework) => {
+  let isEmpty = false;
+  let blankMap;
+  let blankMapData;
+  let mapData;
+
+  switch (framework) {
+    case "SDK-React":
+      blankMap = path.join(path.resolve(), COMPONENT_REACT_LIB_PATH, SDK_LOCAL_REACT_COMPONENT_MAP_FILENAME);
+      blankMapData = fs.readFileSync(blankMap, { encoding: 'utf8' });
+      mapData = fs.readFileSync(pegaLocalAngularComponentMapPath, { encoding: 'utf8' });
+
+      if (mapData === blankMapData) {
+        isEmpty = true;
+      }
+
+      break;
+    case "SDK-Angular":
+      blankMap = path.join(path.resolve(), COMPONENT_ANGULAR_LIB_PATH, SDK_LOCAL_ANGULAR_COMPONENT_MAP_FILENAME);
+      blankMapData= fs.readFileSync(blankMap, { encoding: 'utf8' });
+      mapData = fs.readFileSync(pegaLocalAngularComponentMapPath, { encoding: 'utf8' });
+
+      if (mapData === blankMapData) {
+        isEmpty = true;
+      }
+
+      break;
+    case "SDK-WebComponents":
+      break;
+  }
+
+  return isEmpty;
+};
+

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

@@ -2,15 +2,18 @@ import inquirer from 'inquirer';
 import Listr from 'listr';
 import chalk from 'chalk';
 
-import { showVersion, getOptionsCategory, getComponentsObj } from '../../util.js';
+import { showVersion, getOptionsCategory, getComponentsObj, getFramework, convertIntoKebabCase, convertIntoPascalCase } from '../../util.js';
 import { updateComponentMap  } from '../map/map.js';
 import { getBuildCategory } from './helper.js';
 
 
 
+
 export default async options => {
   showVersion();
 
+  const framework = await getFramework();
+
   const catQuestion = await getBuildCategory(options);
   const catAnswers = await inquirer.prompt(catQuestion);
 
@@ -23,7 +26,7 @@ export default async options => {
   const components = await getComponentsObj(false, category);
 
 
-  var componentKey;
+  let componentKey;
 
   const customTasks = new Listr(
     [
@@ -44,6 +47,20 @@ export default async options => {
   for (var index in components) {
     componentKey = components[index].value;
     console.log(chalk.bold.green("Mapping: " + components[index].name));
+
+    switch (framework) {
+      case "SDK-Angular":
+        // componentKey is in Pascal case, which is associated, need to convert to Kabab case
+        let arComp = componentKey.split("/");
+        arComp[1] = convertIntoKebabCase(convertIntoPascalCase(arComp[1]));
+        componentKey = arComp.join("/");
+        break;
+      case "SDK-React":
+        break;
+      case "SDK-WebComponents":
+        break;
+    }
+
     await customTasks.run().catch(err => {
         console.log(chalk.bold.red(err.toString()));
     });

package/src/tasks/override/index.js

@@ -8,21 +8,26 @@ import ncp from 'ncp';
 import chalk from 'chalk';
 import { updateComponentMap  } from '../map/map.js';
 
-import { checkPathAccess, showVersion, getPegaConfig } from '../../util.js';
 import {
+  checkPathAccess,
+  showVersion,
+  getPegaConfig,
+  convertIntoKebabCase,
+  getFramework,
   getComponentDirectoryPath,
   getComponents,
   getComponentDefaults
 } from '../../util.js';
 
-import { COMPONENT_SCHEMA, 
-  CATEGORY_OVERRIDE, 
-  SDK_CONFIG_JSON_FILENAME, 
-  DXCB_CONFIG, 
+import { COMPONENT_SCHEMA,
+  CATEGORY_OVERRIDE,
+  SDK_CONFIG_JSON_FILENAME,
+  DXCB_CONFIG,
   DXCB_COMPONENT_DEFAULTS,
   CUSTOM_TEMPLATES,
   OVERRIDE_TEMPLATE_PATH,
-  OVERRIDE_REACT_LIB_PATH } from '../../constants.js';
+  OVERRIDE_REACT_LIB_PATH,
+  OVERRIDE_ANGULAR_LIB_PATH } from '../../constants.js';
 
 const pegaConfigJsonPath = path.join(path.resolve(), SDK_CONFIG_JSON_FILENAME);
 
@@ -76,7 +81,20 @@ const checkAndCreateConfigComponentKey = async (targetDirectory) => {
 
 const getListAvailableComponents = async (type) => {
   const components = await getComponents(false, CATEGORY_OVERRIDE);
-  const fullList = COMPONENT_SCHEMA.overrideComponent[type];
+  let fullList;
+  const framework = await getFramework();
+  switch (framework) {
+    case "SDK-Angular":
+      fullList = COMPONENT_SCHEMA.overrideAngularComponent[type];
+      break;
+    case "SDK-React":
+      fullList = COMPONENT_SCHEMA.overrideReactComponent[type];
+      break;
+    case "SDK-WebComponents":
+      fullList = COMPONENT_SCHEMA.overrideWCComponent[type];
+      break;
+  }
+
   let availList = [];
   for (var el in fullList) {
 
@@ -99,6 +117,15 @@ const getListAvailableComponents = async (type) => {
   return availList;
 }
 
+const adjustAngularComponentName = (componentName) => {
+  if (componentName.indexOf("/") >= 0) {
+    componentName = componentName.split("/")[1];
+  }
+
+
+  return componentName;
+}
+
 
 const validateCompile = async (
   {
@@ -113,15 +140,30 @@ const validateCompile = async (
     process.exit(1);
   }
 
-  let pegaConfig =
-  await getPegaConfig();
+  const originalComponentName = componentName;
+
+  let pegaConfig = await getPegaConfig();
 
   // will need to put a case statement here checking framework
-  let templateParentDir = OVERRIDE_REACT_LIB_PATH;
+  const framework = await getFramework();
+  let templateParentDir = "";
+
+  switch (framework) {
+    case "SDK-Angular":
+      templateParentDir = OVERRIDE_ANGULAR_LIB_PATH;
+      componentName = adjustAngularComponentName(componentName);
+      componentName = convertIntoKebabCase(componentName);
+      break;
+    case "SDK-React":
+      templateParentDir = OVERRIDE_REACT_LIB_PATH;
+      break;
+    case "SDK-WebComponents":
+      break;
+  }
 
   if (pegaConfig[DXCB_CONFIG] &&
     pegaConfig[DXCB_CONFIG][CUSTOM_TEMPLATES] &&
-    pegaConfig[DXCB_CONFIG][CUSTOM_TEMPLATES][OVERRIDE_TEMPLATE_PATH] && 
+    pegaConfig[DXCB_CONFIG][CUSTOM_TEMPLATES][OVERRIDE_TEMPLATE_PATH] &&
     pegaConfig[DXCB_CONFIG][CUSTOM_TEMPLATES][OVERRIDE_TEMPLATE_PATH] != "") {
     templateParentDir = pegaConfig[DXCB_CONFIG][CUSTOM_TEMPLATES][OVERRIDE_TEMPLATE_PATH];
   }
@@ -221,74 +263,10 @@ export default async options => {
   const widgetList = await getListAvailableComponents("widget");
   const infraList = await getListAvailableComponents("infra");
 
-  const questions = [
-    {
-      name: 'type',
-      type: 'rawlist',
-      message: 'Enter type of component',
-      choices: COMPONENT_SCHEMA.overrideType,
-      when (propmtType) {
-        return promptType === null;
-      }
-    },
-    {
-      name: 'componentName',
-      type: 'rawlist',
-      message: 'Enter component to be overridden',
-      choices: formsList,
-      pageSize: 15,
-      when(answers) {
-        return formsList.length > 0 && (answers.type === 'field' || promptType === 'field');
-      }
-    },
-    {
-      name: 'componentName',
-      type: 'rawlist',
-      message: 'Enter component to be overridden',
-      choices: desList,
-      pageSize: 15,
-      when(answers) {
-        return desList.length > 0 && (answers.type === 'designSystemExtension' || promptType === 'designSystemExtension');
-      }
-    },
-    {
-      name: 'componentName',
-      type: 'rawlist',
-      message: 'Enter component to be overridden',
-      choices: infraList,
-      pageSize: 15,
-      when(answers) {
-        return infraList.length > 0 && (answers.type === 'infra'  || promptType === 'infra');
-      }
-    },
-    {
-      name: 'componentName',
-      type: 'rawlist',
-      message: 'Enter component to be overridden',
-      choices: templateList,
-      pageSize: 15,
-      when(answers) {
-        return templateList.length > 0 && (answers.type === 'template' || promptType === 'template');
-      }
-    },
-    {
-      name: 'componentName',
-      type: 'rawlist',
-      message: 'Enter component to be overridden',
-      choices: widgetList,
-      pageSize: 15,
-      when(answers) {
-        return widgetList.length > 0 && (answers.type === 'widget'  || promptType === 'widget');
-      }
-    },
+  if (options.params.length >= 5) {
+    let componentName = options.params[4];
+    let type;
 
-  ];
-
-  await inquirer.prompt(questions).then(async answers => {
-    let {
-      componentName,
-      type
-    } = answers;
     if (promptType) type = promptType;
 
     await validateCompile(
@@ -298,6 +276,89 @@ export default async options => {
       },
       options
     );
-  });
+  }
+  else {
+    const questions = [
+      {
+        name: 'type',
+        type: 'rawlist',
+        message: 'Enter type of component',
+        choices: COMPONENT_SCHEMA.overrideType,
+        when (propmtType) {
+          return promptType === null;
+        }
+      },
+      {
+        name: 'componentName',
+        type: 'rawlist',
+        message: 'Enter component to be overridden',
+        choices: formsList,
+        pageSize: 15,
+        when(answers) {
+          return formsList.length > 0 && (answers.type === 'field' || promptType === 'field');
+        }
+      },
+      {
+        name: 'componentName',
+        type: 'rawlist',
+        message: 'Enter component to be overridden',
+        choices: desList,
+        pageSize: 15,
+        when(answers) {
+          return desList.length > 0 && (answers.type === 'designSystemExtension' || promptType === 'designSystemExtension');
+        }
+      },
+      {
+        name: 'componentName',
+        type: 'rawlist',
+        message: 'Enter component to be overridden',
+        choices: infraList,
+        pageSize: 15,
+        when(answers) {
+          return infraList.length > 0 && (answers.type === 'infra'  || promptType === 'infra');
+        }
+      },
+      {
+        name: 'componentName',
+        type: 'rawlist',
+        message: 'Enter component to be overridden',
+        choices: templateList,
+        pageSize: 15,
+        when(answers) {
+          return templateList.length > 0 && (answers.type === 'template' || promptType === 'template');
+        }
+      },
+      {
+        name: 'componentName',
+        type: 'rawlist',
+        message: 'Enter component to be overridden',
+        choices: widgetList,
+        pageSize: 15,
+        when(answers) {
+          return widgetList.length > 0 && (answers.type === 'widget'  || promptType === 'widget');
+        }
+      },
+
+    ];
+
+    await inquirer.prompt(questions).then(async answers => {
+      let {
+        componentName,
+        type
+      } = answers;
+      if (promptType) type = promptType;
+
+      await validateCompile(
+        {
+          componentName,
+          type
+        },
+        options
+      );
+    });
+
+  }
+
+
 
 };