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

package/src/tasks/create/templates/Constellation/Template/FORM-region/demo.stories.jsx.mustache

@@ -11,58 +11,13 @@ export default {
   component: {{COMPONENT_CLASS_NAME}}
 };
 
-const Template = args => {
-  const regionAChildren = pyReviewRaw.children[0].children.map(child => {
-    return Primary.args.getPConnect().createComponent(child);
-  });
-  const regionBChildren = pyReviewRaw.children[1].children.map(child => {
-    return Primary.args.getPConnect().createComponent(child);
-  });
-
-  return (
-    <{{COMPONENT_CLASS_NAME}} {...args}>
-      {regionAChildren}
-      {regionBChildren}
-    </{{COMPONENT_CLASS_NAME}}>
-  );
-};
-
-export const Primary = Template.bind({});
-
-Primary.args = {
-  template: 'DefaultForm',
-  getPConnect: () => {
-    return {
-      getChildren: () => {
-        return pyReviewRaw.children;
-      },
-      createComponent: config => {
-        switch (config.config.value) {
-          case '@P .FirstName':
-            return renderField(regionChildrenResolved[0]);
-          case '@P .MiddleName':
-            return renderField(regionChildrenResolved[1]);
-          case '@P .LastName':
-            return renderField(regionChildrenResolved[2]);
-          case '@P .Email':
-            return renderField(regionChildrenResolved[3]);
-          case '@P .PhoneNumber':
-            return renderField(regionChildrenResolved[4]);
-          case '@P .ServiceDate':
-            return renderField(regionChildrenResolved[5]);
-        }
-      }
-    };
-  }
-};
-
 const renderField = resolvedProps => {
   const { displayMode, value = '', label = '' } = resolvedProps;
 
   const variant = displayMode === 'LABELS_LEFT' ? 'inline' : 'stacked';
 
   let val =
-    value != '' ? (
+    value !== '' ? (
       <Text variant='h1' as='span'>
         {value}
       </Text>
@@ -98,3 +53,48 @@ const renderField = resolvedProps => {
   }
   return <FieldValueList variant={variant} fields={[{ name: label, value: val }]} />;
 };
+
+
+export const base{{COMPONENT_CLASS_NAME}} = () => {
+  const props = {
+    template: 'DefaultForm',
+    getPConnect: () => {
+      return {
+        getChildren: () => {
+          return pyReviewRaw.children;
+        },
+        createComponent: config => {
+          // eslint-disable-next-line default-case
+          switch (config.config.value) {
+            case '@P .FirstName':
+              return renderField(regionChildrenResolved[0]);
+            case '@P .MiddleName':
+              return renderField(regionChildrenResolved[1]);
+            case '@P .LastName':
+              return renderField(regionChildrenResolved[2]);
+            case '@P .Email':
+              return renderField(regionChildrenResolved[3]);
+            case '@P .PhoneNumber':
+              return renderField(regionChildrenResolved[4]);
+            case '@P .ServiceDate':
+              return renderField(regionChildrenResolved[5]);
+          }
+        }
+      };
+    }
+  };
+
+  const regionAChildren = pyReviewRaw.children[0].children.map(child => {
+    return props.getPConnect().createComponent(child);
+  });
+  const regionBChildren = pyReviewRaw.children[1].children.map(child => {
+    return props.getPConnect().createComponent(child);
+  });
+
+  return (
+    <{{COMPONENT_CLASS_NAME}} {...props}>
+      {regionAChildren}
+      {regionBChildren}
+    </{{COMPONENT_CLASS_NAME}}>
+  );
+};

package/src/tasks/create/templates/Constellation/Template/PAGE/demo.stories.jsx.mustache

@@ -44,8 +44,8 @@ export const base{{COMPONENT_CLASS_NAME}} = () => {
                 resolve({});
               });
             },
-            updateFieldValue: () => {},
-            triggerFieldChange: () => {}
+            updateFieldValue: () => {/* nothing */},
+            triggerFieldChange: () => {/* nothing */}
           };
         },
         getChildren: () => {
@@ -61,31 +61,30 @@ export const base{{COMPONENT_CLASS_NAME}} = () => {
           return pyHome1Raw;
         },
         createComponent: config => {
-          switch (config.type) {
-            case 'AppAnnouncement':
-              return (
-                <PegaAppAnnouncement
-                  heading='Announcements'
-                  description={configProps.description}
-                  whatsNewLink={configProps.whatsnewlink}
-                  image={configProps.image.replace(/ /g, '+')}
-                  datasource={configProps.datasource}
-                  label={configProps.label}
-                  getPConnect={() => {
-                    return {
-                      getChildren: () => {
-                        return pyHome1Resolved.children;
-                      }
-                    };
-                  }}
-                />
-              );
+          if (config.type === 'AppAnnouncement') {
+            return (
+              <PegaAppAnnouncement
+                heading='Announcements'
+                description={configProps.description}
+                whatsNewLink={configProps.whatsnewlink}
+                image={configProps.image.replace(/ /g, '+')}
+                datasource={configProps.datasource}
+                label={configProps.label}
+                getPConnect={() => {
+                  return {
+                    getChildren: () => {
+                      return pyHome1Resolved.children;
+                    }
+                  };
+                }}
+              />
+            );
           }
         },
-        ignoreSuggestion: () => {},
-        acceptSuggestion: () => {},
-        setInheritedProps: () => {},
-        resolveConfigProps: () => {}
+        ignoreSuggestion: () => {/* nothing */},
+        acceptSuggestion: () => {/* nothing */},
+        setInheritedProps: () => {/* nothing */},
+        resolveConfigProps: () => {/* nothing */}
       };
     }
   };

package/src/tasks/create/templates/Constellation/Widget/CASE/demo.stories.jsx.mustache

@@ -2,7 +2,7 @@ import { withKnobs } from '@storybook/addon-knobs';
 
 import {{COMPONENT_CLASS_NAME}} from './index.jsx';
 
-import { historyData } from './mock.stories';
+import historyData from './mock.stories';
 
 export default {
   title: '{{COMPONENT_CLASS_NAME}}',
@@ -58,14 +58,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/Widget/CASE/mock.stories.js.mustache

@@ -1,4 +1,4 @@
-export const historyData = {
+const historyData = {
   data: {
     fetchDateTime: '2023-01-18T12:04:56.517Z',
     pxObjClass: 'Pega-API-DataExploration-Data',
@@ -387,3 +387,4 @@ export const historyData = {
   },
   request: {}
 };
+export default historyData;

package/src/tasks/create/templates/Constellation/Widget/PAGE/demo.stories.jsx.mustache

@@ -3,7 +3,7 @@ import { withKnobs } from '@storybook/addon-knobs';
 import {{COMPONENT_CLASS_NAME}} from './index.jsx';
 
 
-import { configProps } from './mock.stories';
+import configProps from './mock.stories';
 
 export default {
   title: '{{COMPONENT_CLASS_NAME}}',

package/src/tasks/create/templates/Constellation/Widget/PAGE/mock.stories.js.mustache

@@ -1,4 +1,4 @@
-export const configProps = {
+const configProps = {
   label: 'App announcement',
   header: 'Announcements',
   description: 'Welcome to MediaCo Application for testing SDK frameworks.',
@@ -20,3 +20,4 @@ export const configProps = {
     fields: {}
   }
 };
+export default configProps;

package/src/tasks/create/templates/Constellation/Widget/PAGE-CASE/demo.stories.jsx.mustache

@@ -48,14 +48,14 @@ export const base{{COMPONENT_CLASS_NAME}} = () => {
       return {
         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/SDK-React/Field/Date/index.tsx.mustache

@@ -1,9 +1,9 @@
 import React from 'react';
 import { KeyboardDatePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';
 import DayjsUtils from '@date-io/dayjs';
-import TextInput from '@pega/react-sdk-components/lib/components/forms/TextInput';
+import TextInput from '@pega/react-sdk-components/lib/components/field/TextInput';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
-import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtensions/FieldValueList';
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 import PropTypes from 'prop-types';
 
 

package/src/tasks/create/templates/SDK-React/Field/DateTime/index.tsx.mustache

@@ -1,9 +1,9 @@
 import React from 'react';
 import { KeyboardDateTimePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';
 import DayjsUtils from '@date-io/dayjs';
-import TextInput from '@pega/react-sdk-components/lib/components/forms/TextInput';
+import TextInput from '@pega/react-sdk-components/lib/components/field/TextInput';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
-import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtensions/FieldValueList';
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 import PropTypes from 'prop-types';
 
 

package/src/tasks/create/templates/SDK-React/Field/Decimal/index.tsx.mustache

@@ -1,8 +1,8 @@
 /* eslint-disable react/no-unused-prop-types */
 import React from 'react';
 import { TextField } from '@material-ui/core';
-import TextInput from '@pega/react-sdk-components/lib/components/forms/TextInput';
-import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtensions/FieldValueList';
+import TextInput from '@pega/react-sdk-components/lib/components/fields/TextInput';
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 import PropTypes from 'prop-types';
 
 

package/src/tasks/create/templates/SDK-React/Field/Decimal-Currency/index.tsx.mustache

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-unused-prop-types */
 import React, { useState, useEffect } from 'react';
 import CurrencyTextField from '@unicef/material-ui-currency-textfield';
-import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtensions/FieldValueList';
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import PropTypes from 'prop-types';
 

package/src/tasks/create/templates/SDK-React/Field/Decimal-Percentage/index.tsx.mustache

@@ -2,8 +2,8 @@
 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import { TextField } from '@material-ui/core';
-import TextInput from '@pega/react-sdk-components/lib/components/forms/TextInput';
-import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtensions/FieldValueList';
+import TextInput from '@pega/react-sdk-components/lib/components/field/TextInput';
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 import PropTypes from 'prop-types';
 
 

package/src/tasks/create/templates/SDK-React/Field/Integer/index.tsx.mustache

@@ -1,8 +1,8 @@
 /* eslint-disable react/no-unused-prop-types */
 import React from 'react';
 import { TextField } from '@material-ui/core';
-import TextInput from '@pega/react-sdk-components/lib/components/forms/TextInput';
-import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtensions/FieldValueList';
+import TextInput from '@pega/react-sdk-components/lib/components/field/TextInput';
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 import PropTypes from 'prop-types';
 
 

package/src/tasks/create/templates/SDK-React/Field/Text/index.tsx.mustache

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-unused-prop-types */
 import React from 'react';
 import { TextField } from '@material-ui/core';
-import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtensions/FieldValueList';
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 import PropTypes from 'prop-types';
 
 

package/src/tasks/create/templates/SDK-React/Field/Text-Email/index.tsx.mustache

@@ -2,8 +2,8 @@
 import React from 'react';
 import { TextField, InputAdornment } from '@material-ui/core';
 import MailOutlineIcon from '@material-ui/icons/MailOutline';
-import TextInput from '@pega/react-sdk-components/lib/components/forms/TextInput';
-import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtensions/FieldValueList';
+import TextInput from '@pega/react-sdk-components/lib/components/field/TextInput';
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 import PropTypes from 'prop-types';
 
 

package/src/tasks/create/templates/SDK-React/Field/Text-Input/index.tsx.mustache

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-unused-prop-types */
 import React from 'react';
 import { TextField } from '@material-ui/core';
-import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtensions/FieldValueList';
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 import PropTypes from 'prop-types';
 
 

package/src/tasks/create/templates/SDK-React/Field/Text-Paragraph/index.tsx.mustache

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-unused-prop-types */
 import React from 'react';
 import { TextField } from '@material-ui/core';
-import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtensions/FieldValueList';
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 import PropTypes from 'prop-types';
 
 

package/src/tasks/create/templates/SDK-React/Field/Text-Phone/index.tsx.mustache

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-unused-prop-types */
 import React from 'react';
 import MuiPhoneNumber from 'material-ui-phone-number';
-import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtensions/FieldValueList';
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 import PropTypes from 'prop-types';
 
 

package/src/tasks/create/templates/SDK-React/Field/Text-URL/index.tsx.mustache

@@ -1,8 +1,8 @@
 /* eslint-disable react/no-unused-prop-types */
 import React from 'react';
 import { TextField } from '@material-ui/core';
-import TextInput from '@pega/react-sdk-components/lib/components/forms/TextInput';
-import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtensions/FieldValueList';
+import TextInput from '@pega/react-sdk-components/lib/components/field/TextInput';
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 import PropTypes from 'prop-types';
 
 

package/src/tasks/create/templates/SDK-React/Field/TimeofDay/index.tsx.mustache

@@ -1,10 +1,10 @@
 import React from 'react';
-import TextInput from '@pega/react-sdk-components/lib/components/forms/TextInput';
+import TextInput from '@pega/react-sdk-components/lib/components/field/TextInput';
 import { KeyboardTimePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';
 import DayjsUtils from '@date-io/dayjs';
 import dayjs from 'dayjs';
 import AccessTimeIcon from '@material-ui/icons/AccessTime';
-import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtensions/FieldValueList';
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 import PropTypes from 'prop-types';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';

package/src/tasks/create/templates/SDK-React/Template/DETAILS/index.tsx.mustache

@@ -2,7 +2,7 @@
 import React from "react";
 // import PropTypes from "prop-types";
 import Grid from '@material-ui/core/Grid';
-import DetailsFields from '@pega/react-sdk-components/lib/components/designSystemExtensions/DetailsFields';
+import DetailsFields from '@pega/react-sdk-components/lib/components/designSystemExtension/DetailsFields';
 
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';

package/src/tasks/create/templates/SDK-React/Template/DETAILS-region/index.tsx.mustache

@@ -2,7 +2,7 @@
 import React from "react";
 // import PropTypes from "prop-types";
 import Grid from '@material-ui/core/Grid';
-import DetailsFields from '@pega/react-sdk-components/lib/components/designSystemExtensions/DetailsFields';
+import DetailsFields from '@pega/react-sdk-components/lib/components/designSystemExtension/DetailsFields';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 

package/src/tasks/delete/helper.js

@@ -57,6 +57,7 @@ export const deleteLocalComponents = async (sourceOfComponents, category = CATEG
       {
         name: 'componentKey',
         type: 'rawlist',
+        pageSize: 15,
         message: 'Select component to delete',
         choices: localComponents
       },

package/src/tasks/index.js

@@ -11,4 +11,5 @@ export { default as validate } from './validator/index.js';
 export { default as authenticate } from './authenticate/index.js';
 export { default as upgrade } from './upgrade/index.js';
 export { default as buildComponent } from './build/index.js';
+export { default as buildAllComponents } from './build-all/index.js';
 export { default as generateMissingCompanions } from './generate-missing-companions/index.js';

package/src/tasks/map/map.js

@@ -11,11 +11,12 @@ import {
 import {
   COMPONENTS_DIRECTORY_PATH,
   DXCB_CONFIG_JSON_FILENAME,
-  CATEGORY_CUSTOM
+  CATEGORY_CUSTOM,
+  CATEGORY_CONSTELLATION,
+  COMPONENT_DIRECTORY_PREFIX_CUSTOM
 } from '../../constants.js';
 
 export const SDK_LOCAL_COMPONENT_MAP_FILENAME = "sdk-local-component-map.js";
-export const COMPONENT_PATH = "./src/components";
 export const IMPORT_END_TAG = "/*import end";
 export const MAP_END_TAG = "/*map end";
 
@@ -23,7 +24,7 @@ export const updateComponentMap = async (componentKey, category = CATEGORY_CUSTO
 
   const pegaConfigJsonPath = path.join(path.resolve(), DXCB_CONFIG_JSON_FILENAME);
   const pegaLocalComponentMapPath = path.join(path.resolve(), SDK_LOCAL_COMPONENT_MAP_FILENAME);
-  const categoryDirectory = join("/", category.toLowerCase());
+  const categoryDirectory = (category === CATEGORY_CONSTELLATION) ? join("/", COMPONENT_DIRECTORY_PREFIX_CUSTOM + category.toLowerCase()) : join("/", category.toLowerCase());
 
   const componentNameNoPrefix = removeComponentPrefix(componentKey);
   const componentName = convertIntoPascalCase(componentNameNoPrefix);
@@ -73,7 +74,7 @@ export const updateComponentMap = async (componentKey, category = CATEGORY_CUSTO
 
 export const deleteFromComponentMap = async (componentKey, category = CATEGORY_CUSTOM) =>  {
   const pegaLocalComponentMapPath = path.join(path.resolve(), SDK_LOCAL_COMPONENT_MAP_FILENAME);
-  const categoryDirectory = join("/", category.toLowerCase());
+  const categoryDirectory = (category === CATEGORY_CONSTELLATION) ? join("/", COMPONENT_DIRECTORY_PREFIX_CUSTOM + category.toLowerCase()) : join("/", category.toLowerCase());
   const pegaConfigJsonPath = path.join(path.resolve(), DXCB_CONFIG_JSON_FILENAME);
 
   const componentNameNoPrefix = removeComponentPrefix(componentKey);

package/src/tasks/override/index.js

@@ -39,6 +39,43 @@ const copyComponentTemplate = async options => {
 };
 
 
+const checkAndCreateConfigComponentKey = async (targetDirectory) => {
+
+  const configFile = path.join(targetDirectory, "config-ext.json");
+  try {
+    const configData = fs.readFileSync(path.resolve(configFile), 'utf8');
+    let configObj = JSON.parse(configData);
+
+    let writeUpdate = false;
+    if (!configObj.componentKey || !configObj.label) {
+      const name = configObj.name;
+
+      if (!configObj.componentKey) {
+        const componentKey = name;
+        configObj = { componentKey, ...configObj };
+      }
+
+      if (!configObj.label) {
+        const label = name;
+        configObj = { label, ...configObj };
+      }
+
+
+      // stringify "4", makes the json string look like JSON in the file
+      const configContent = JSON.stringify(configObj, null, 4);
+
+      // update file
+      fs.writeFileSync(configFile, configContent, { encoding: 'utf8' });
+    }
+
+  }
+  catch (err) {
+    // no config-ext.json file, so no update, which is ok
+    console.log(chalk.yellow("Component has no config file for extension."));
+  }
+}
+
+
 const getListAvailableComponents = async (type) => {
   const components = await getComponents(false, CATEGORY_OVERRIDE);
   const fullList = COMPONENT_SCHEMA.overrideComponent[type];
@@ -102,6 +139,8 @@ const validateCompile = async (
     overrideDirectory
   });
 
+  await checkAndCreateConfigComponentKey(targetDirectory);
+
 
   console.log(chalk.green(`> Created ${componentKey} component in ${targetDirectory}`));
 
@@ -120,22 +159,22 @@ export default async options => {
     let inputType = options.params[3];
 
     switch (inputType.toLowerCase()) {
-      case "forms" :
+      case "field" :
       case "f" :
-        promptType = "forms";
+        promptType = "field";
         break;
-      case "templates" :
+      case "template" :
       case "t" :
-        promptType = "templates";
+        promptType = "template";
         break;
-      case "widgets" :
+      case "widget" :
       case "w" :
-        promptType = "widgets";
+        promptType = "widget";
         break;
-      case "designsystemextensions" :
+      case "designsystemextension" :
       case "des" :
       case "d" :
-        promptType = "designSystemExtensions";
+        promptType = "designSystemExtension";
         break;
       case "infra" :
       case "i" :
@@ -156,10 +195,10 @@ export default async options => {
   let componentDefaults = await getComponentDefaults();
   componentDefaults.library = library;
 
-  const formsList = await getListAvailableComponents("forms");
-  const desList = await getListAvailableComponents("designSystemExtensions");
-  const templateList = await getListAvailableComponents("templates");
-  const widgetList = await getListAvailableComponents("widgets");
+  const formsList = await getListAvailableComponents("field");
+  const desList = await getListAvailableComponents("designSystemExtension");
+  const templateList = await getListAvailableComponents("template");
+  const widgetList = await getListAvailableComponents("widget");
   const infraList = await getListAvailableComponents("infra");
 
   const questions = [
@@ -179,7 +218,7 @@ export default async options => {
       choices: formsList,
       pageSize: 15,
       when(answers) {
-        return answers.type === 'forms' || promptType === 'forms';
+        return answers.type === 'field' || promptType === 'field';
       }
     },
     {
@@ -189,7 +228,7 @@ export default async options => {
       choices: desList,
       pageSize: 15,
       when(answers) {
-        return answers.type === 'designSystemExtensions' || promptType === 'designSystemExtensions';
+        return answers.type === 'designSystemExtension' || promptType === 'designSystemExtension';
       }
     },
     {
@@ -209,7 +248,7 @@ export default async options => {
       choices: templateList,
       pageSize: 15,
       when(answers) {
-        return answers.type === 'templates' || promptType === 'templates';
+        return answers.type === 'template' || promptType === 'template';
       }
     },
     {
@@ -219,7 +258,7 @@ export default async options => {
       choices: widgetList,
       pageSize: 15,
       when(answers) {
-        return answers.type === 'widgets'  || promptType === 'widgets';
+        return answers.type === 'widget'  || promptType === 'widget';
       }
     },