@pega/custom-dx-components 2.0.19 → 2.0.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/custom-dx-components",
-  "version": "2.0.19",
+  "version": "2.0.21",
   "description": "Utility for building custom UI components",
   "bin": "./bin/index.js",
   "scripts": {

package/src/tasks/create/index.js

@@ -175,15 +175,15 @@ 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[9];
+    const description = options.params[9];
 
     await validateCompile(
       {
@@ -201,6 +201,50 @@ export default async options => {
   } else {
     const componentDefaults = await getComponentDefaults();
     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)',
@@ -258,57 +302,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/Text-URL/index.jsx.mustache

@@ -3,7 +3,7 @@ import { Input, FieldValueList, Text } from "@pega/cosmos-react-core";
 import PropTypes from "prop-types";
 
 // includes in bundle
-import {formatExists,textFormatter, urlFormatter, suggestionHandler} from "./text-url";
+import {formatExists,textFormatter, urlFormatter} from "./text-url.jsx";
 import handleEvent from "./event-utils";
 import { suggestionsHandler } from './suggestions-handler';
 

package/src/tasks/create/templates/Constellation/Field/Text-URL/{text-url.js.mustache → text-url.jsx.mustache}

@@ -1,4 +1,5 @@
-import {EmailDisplay, PhoneDisplay, URLDisplay } from "@pega/cosmos-react-core";
+import { useState, useRef, React} from "react";
+import { EmailDisplay, PhoneDisplay, URLDisplay, Image, Button, Lightbox } from '@pega/cosmos-react-core';
 
 export const formatExists = (formatterVal) => {
     const formatterValues = [

package/src/tasks/init/index.js

@@ -140,7 +140,7 @@ export default async options => {
     '\n',
     `Inside that directory, you can run several commands:`,
     '\n\n',
-    `${chalk.blueBright('npm start')}`,
+    `${chalk.blueBright('npm run start-storybook')}`,
     `\n  Start Storybook in development mode`,
     '\n\n',
     `${chalk.blueBright('npm run create')}`,
@@ -158,7 +158,7 @@ export default async options => {
     '\n\n',
     `${chalk.blueBright('cd')} ${chalk.bold(projectName)}`,
     '\n',
-    `${chalk.blueBright('npm start')}`,
+    `${chalk.blueBright('npm run start-storybook')}`,
     '\n'
   );
   return true;

package/src/tasks/init/template/package.json.mustache

@@ -5,7 +5,7 @@
   "organization": "{{organization}}",
   "main": "src/index.js",
   "scripts": {
-    "start": "start-storybook --port 6040 --quiet",
+    "start-storybook": "start-storybook --port 6040 --quiet",
     "build": "tsc -b tsconfig.build.json",
     "lint": "run-p -cl lint:*",
     "fix": "run-p -cl fix:*",
@@ -54,7 +54,7 @@
   },
   "devDependencies": {
     "@pega/configs": "^0.3.4",
-    "@pega/custom-dx-components": "^2.0.19",
+    "@pega/custom-dx-components": "^2.0.21",
     "@pega/eslint-config": "^0.3.2",
     "@storybook/addon-actions": "^6.5.12",
     "@storybook/addon-essentials": "^6.5.12",