@pega/custom-dx-components 0.23.6 → 0.23.8

package/src/tasks/create/templates/Constellation/Template/DETAILS-region/styles.js.mustache

@@ -1,7 +1,14 @@
-import styled, { css } from 'styled-components';
+// utilizing theming, comment out, if want individual style
+import styled from 'styled-components';
+import { Configuration } from '@pega/cosmos-react-core';
 
-export default styled.div(() => {
-  return css`
-    margin: 0px 0px;
-  `;
-});
+export default styled(Configuration)``;
+
+// individual style, comment out above, and uncomment here and add styles
+// import styled, { css } from 'styled-components';
+//
+// export default styled.div(() => {
+//  return css`
+//    margin: 0px 0;
+//  `;
+// });

package/src/tasks/create/templates/Constellation/Template/FORM/styles.js.mustache

@@ -1,7 +1,14 @@
-import styled, { css } from 'styled-components';
+// utilizing theming, comment out, if want individual style
+import styled from 'styled-components';
+import { Configuration } from '@pega/cosmos-react-core';
 
-export default styled.div(() => {
-  return css`
-    margin: 0px 0px;
-  `;
-});
+export default styled(Configuration)``;
+
+// individual style, comment out above, and uncomment here and add styles
+// import styled, { css } from 'styled-components';
+//
+// export default styled.div(() => {
+//  return css`
+//    margin: 0px 0;
+//  `;
+// });

package/src/tasks/create/templates/Constellation/Template/FORM-region/styles.js.mustache

@@ -1,7 +1,14 @@
-import styled, { css } from 'styled-components';
+// utilizing theming, comment out, if want individual style
+import styled from 'styled-components';
+import { Configuration } from '@pega/cosmos-react-core';
 
-export default styled.div(() => {
-  return css`
-    margin: 0px 0px;
-  `;
-});
+export default styled(Configuration)``;
+
+// individual style, comment out above, and uncomment here and add styles
+// import styled, { css } from 'styled-components';
+//
+// export default styled.div(() => {
+//  return css`
+//    margin: 0px 0;
+//  `;
+// });

package/src/tasks/create/templates/Constellation/Template/PAGE/styles.js.mustache

@@ -1,7 +1,14 @@
-import styled, { css } from 'styled-components';
+// utilizing theming, comment out, if want individual style
+import styled from 'styled-components';
+import { Configuration } from '@pega/cosmos-react-core';
 
-export default styled.div(() => {
-  return css`
-    margin: 0px 0px;
-  `;
-});
+export default styled(Configuration)``;
+
+// individual style, comment out above, and uncomment here and add styles
+// import styled, { css } from 'styled-components';
+//
+// export default styled.div(() => {
+//  return css`
+//    margin: 0px 0;
+//  `;
+// });

package/src/tasks/create/templates/Constellation/Widget/CASE/styles.js.mustache

@@ -1,7 +1,14 @@
-import styled, { css } from 'styled-components';
+// utilizing theming, comment out, if want individual style
+import styled from 'styled-components';
+import { Configuration } from '@pega/cosmos-react-core';
 
-export default styled.div(() => {
-  return css`
-    margin: 0px 0;
-  `;
-});
+export default styled(Configuration)``;
+
+// individual style, comment out above, and uncomment here and add styles
+// import styled, { css } from 'styled-components';
+//
+// export default styled.div(() => {
+//  return css`
+//    margin: 0px 0;
+//  `;
+// });

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

@@ -1,7 +1,14 @@
-import styled, { css } from 'styled-components';
+// utilizing theming, comment out, if want individual style
+import styled from 'styled-components';
+import { Configuration } from '@pega/cosmos-react-core';
 
-export default styled.div(() => {
-  return css`
-    margin: 0px 0;
-  `;
-});
+export default styled(Configuration)``;
+
+// individual style, comment out above, and uncomment here and add styles
+// import styled, { css } from 'styled-components';
+//
+// export default styled.div(() => {
+//  return css`
+//    margin: 0px 0;
+//  `;
+// });

package/src/tasks/create/templates/Constellation/Widget/PAGE-CASE/styles.js.mustache

@@ -1,7 +1,14 @@
-import styled, { css } from 'styled-components';
+// utilizing theming, comment out, if want individual style
+import styled from 'styled-components';
+import { Configuration } from '@pega/cosmos-react-core';
 
-export default styled.div(() => {
-  return css`
-    margin: 0px 0;
-  `;
-});
+export default styled(Configuration)``;
+
+// individual style, comment out above, and uncomment here and add styles
+// import styled, { css } from 'styled-components';
+//
+// export default styled.div(() => {
+//  return css`
+//    margin: 0px 0;
+//  `;
+// });

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

@@ -22,51 +22,32 @@ import {
   sanitize,
   validateSemver
 } from '../../util.js';
-import {
-  COMPONENT_SCHEMA,
-  COMPONENTS_DIRECTORY_PATH,
-  TASKS_CONFIG_JSON_FILENAME,
-  COMPONENTS_PATH,
-  CATEGORY_CONSTELLATION
- } from '../../constants.js';
+import { COMPONENT_SCHEMA, COMPONENTS_DIRECTORY_PATH, TASKS_CONFIG_JSON_FILENAME, COMPONENTS_PATH, CATEGORY_CONSTELLATION } from '../../constants.js';
 
 const pegaConfigJsonPath = path.join(path.resolve(), TASKS_CONFIG_JSON_FILENAME);
 
 const copy = promisify(ncp);
 
-const copyComponentTemplate = async options => {
+const copyComponentTemplate = async (options) => {
   if (options.targetDirectory) {
     return copy(options.templateDirectory, options.targetDirectory, {
       clobber: false
     });
-  }
-  else {
+  } else {
     return copy(options.templateDirectoryConstellation, options.targetDirectoryConstellation, {
       clobber: false,
       filter: (fileName) => {
         // filter out the file config.json or config.json.mustache
-        if (fileName.indexOf("config.json") >= 0) return false;
+        if (fileName.indexOf('config.json') >= 0) return false;
         else return true;
       }
     });
   }
-
 };
 
 export const compileMustacheTemplates = async (
   componentDirectory,
-  {
-    componentKey,
-    componentName,
-    componentLabel,
-    library,
-    version,
-    type,
-    subtype,
-    description,
-    organization,
-    allowedApplications
-  }
+  { componentKey, componentName, componentLabel, library, version, type, subtype, description, organization, allowedApplications }
 ) => {
   const files = fs.readdirSync(componentDirectory);
   const componentClassName = convertIntoPascalCase(componentKey);
@@ -83,19 +64,18 @@ export const compileMustacheTemplates = async (
   let mustacheSubType = subtype;
 
   // overrides
-  if (typeof(mustacheSubType) == "string") {
+  if (typeof mustacheSubType == 'string') {
     switch (mustacheSubType) {
-      case "FORM-region" :
-        mustacheSubType = "FORM";
+      case 'FORM-region':
+        mustacheSubType = 'FORM';
         break;
-      case "DETAILS-region" :
-        mustacheSubType = "DETAILS";
+      case 'DETAILS-region':
+        mustacheSubType = 'DETAILS';
         break;
-      case "Text-Input" :
-        mustacheSubType = "Text";
+      case 'Text-Input':
+        mustacheSubType = 'Text';
         break;
     }
-
   }
 
   if (allowedApplications.trim() === '') {
@@ -107,8 +87,8 @@ export const compileMustacheTemplates = async (
     allowedApplications = [].concat(allowedApplications);
   }
 
-  allowedApplications = allowedApplications.filter(el => !!el.trim()).map(el => el.trim());
-  files.forEach(file => {
+  allowedApplications = allowedApplications.filter((el) => !!el.trim()).map((el) => el.trim());
+  files.forEach((file) => {
     const filePath = path.join(componentDirectory, file);
 
     const output = compileMustacheTemplate(filePath, {
@@ -133,27 +113,14 @@ export const compileMustacheTemplates = async (
   });
 };
 
-
-export const validateCompileAll = async (
-  {
-    prefix,
-    library,
-    version,
-    allowedApplications,
-    organization
-  },
-  options,
-
-) => {
-
-
+export const validateCompileAll = async ({ prefix, library, version, allowedApplications, organization }, options) => {
   for (let fieldIdx in COMPONENT_SCHEMA.subtype.field) {
-    const type = "Field";
+    const type = 'Field';
     const subtype = COMPONENT_SCHEMA.subtype.field[fieldIdx].value;
     const prefixNoSpace = prefix.replace(/\s+/g, '');
     const componentNameNoSpace = COMPONENT_SCHEMA.subtype.field[fieldIdx].name.replace(/\s+/g, '');
-    const componentName = "".concat(prefixNoSpace).concat(componentNameNoSpace);
-    const componentLabel = "".concat(prefix).concat(" ").concat(COMPONENT_SCHEMA.subtype.field[fieldIdx].name);
+    const componentName = ''.concat(prefixNoSpace).concat(componentNameNoSpace);
+    const componentLabel = ''.concat(prefix).concat(' ').concat(COMPONENT_SCHEMA.subtype.field[fieldIdx].name);
     const description = componentLabel;
 
     await validateCompile(
@@ -169,23 +136,23 @@ export const validateCompileAll = async (
         allowedApplications
       },
       options
-    )
+    );
   }
 
   for (let templateIdx in COMPONENT_SCHEMA.subtype.template) {
-    const type = "Template";
+    const type = 'Template';
     const subtype = COMPONENT_SCHEMA.subtype.template[templateIdx].value;
     const prefixNoSpace = prefix.replace(/\s+/g, '');
-    let templateNameOriginal  = COMPONENT_SCHEMA.subtype.template[templateIdx].name;
-    let templateName =  convertIntoPascalCase(COMPONENT_SCHEMA.subtype.template[templateIdx].name);
+    let templateNameOriginal = COMPONENT_SCHEMA.subtype.template[templateIdx].name;
+    let templateName = convertIntoPascalCase(COMPONENT_SCHEMA.subtype.template[templateIdx].name);
     let templateLabel = convertIntoPascalCase(COMPONENT_SCHEMA.subtype.template[templateIdx].name);
-    if (templateNameOriginal.indexOf("region") >= 0) {
-      let templateNameBase = convertIntoPascalCase(templateNameOriginal.replace(" region", ""));
-      templateName = "TwoColumn".concat(templateNameBase);
-      templateLabel = "Two Column ".concat(templateNameBase);
+    if (templateNameOriginal.indexOf('region') >= 0) {
+      let templateNameBase = convertIntoPascalCase(templateNameOriginal.replace(' region', ''));
+      templateName = 'TwoColumn'.concat(templateNameBase);
+      templateLabel = 'Two Column '.concat(templateNameBase);
     }
-    const componentName = "".concat(prefixNoSpace).concat(templateName);
-    const componentLabel = "".concat(prefix).concat(" ").concat(templateLabel);
+    const componentName = ''.concat(prefixNoSpace).concat(templateName);
+    const componentLabel = ''.concat(prefix).concat(' ').concat(templateLabel);
     const description = componentLabel;
 
     await validateCompile(
@@ -201,22 +168,21 @@ export const validateCompileAll = async (
         allowedApplications
       },
       options
-    )
+    );
   }
 
-
   for (let widgetIdx in COMPONENT_SCHEMA.subtype.widget) {
-    const type = "Widget";
+    const type = 'Widget';
     const subtype = COMPONENT_SCHEMA.subtype.widget[widgetIdx].value;
     const prefixNoSpace = prefix.replace(/\s+/g, '');
-    let widgetNameOriginal  = COMPONENT_SCHEMA.subtype.widget[widgetIdx].name;
-    let widgetName = convertIntoPascalCase(COMPONENT_SCHEMA.subtype.widget[widgetIdx].name).concat("Widget");
-    let widgetLabel = convertIntoPascalCase(COMPONENT_SCHEMA.subtype.widget[widgetIdx].name).concat(" Widget");
-    if (widgetName.indexOf("&") >= 0) {
-      widgetName = convertIntoPascalCase(widgetNameOriginal.replace(" & ", ""));
+    let widgetNameOriginal = COMPONENT_SCHEMA.subtype.widget[widgetIdx].name;
+    let widgetName = convertIntoPascalCase(COMPONENT_SCHEMA.subtype.widget[widgetIdx].name).concat('Widget');
+    let widgetLabel = convertIntoPascalCase(COMPONENT_SCHEMA.subtype.widget[widgetIdx].name).concat(' Widget');
+    if (widgetName.indexOf('&') >= 0) {
+      widgetName = convertIntoPascalCase(widgetNameOriginal.replace(' & ', ''));
     }
-    const componentName = "".concat(prefixNoSpace).concat(widgetName);
-    const componentLabel = "".concat(prefix).concat(" ").concat(widgetLabel);
+    const componentName = ''.concat(prefixNoSpace).concat(widgetName);
+    const componentLabel = ''.concat(prefix).concat(' ').concat(widgetLabel);
     const description = componentLabel;
 
     await validateCompile(
@@ -232,32 +198,17 @@ export const validateCompileAll = async (
         allowedApplications
       },
       options
-    )
+    );
   }
-
-
-}
-
+};
 
 export const validateCompile = async (
-  {
-    library,
-    organization,
-    componentName,
-    componentLabel,
-    version,
-    framework,
-    type,
-    subtype,
-    description,
-    allowedApplications
-  },
+  { library, organization, componentName, componentLabel, version, framework, type, subtype, description, allowedApplications },
   options
 ) => {
-
   let sSubType = subtype;
   if (Array.isArray(subtype)) {
-    sSubType = subtype.join("-");
+    sSubType = subtype.join('-');
   }
 
   const typeLC = type.toLowerCase();
@@ -269,10 +220,9 @@ export const validateCompile = async (
   let pegaConfig = await getPegaConfig();
   let templateParentDir = `./templates/${framework}`;
 
-
   const templateDir = `${templateParentDir}/${type}/${sSubType}`;
   let templateDirectory = fileURLToPath(new URL(templateDir, import.meta.url));
-  templateDirectory = templateDirectory.replace( path.sep + "create-all", path.sep + "create");
+  templateDirectory = templateDirectory.replace(path.sep + 'create-all', path.sep + 'create');
 
   const componentKey = `${organization}_${library}_${componentName}`;
 
@@ -280,7 +230,6 @@ export const validateCompile = async (
 
   const components = await getComponents(false);
 
-
   if (components.includes(componentKey)) {
     console.log(chalk.red(`${componentKey} component already exists in ${targetDirectory}`));
 
@@ -306,14 +255,10 @@ export const validateCompile = async (
     allowedApplications
   });
 
-
   console.log(chalk.green(`created ${componentKey} component in ${targetDirectory}`));
-
-
-
 };
 
-export default async options => {
+export default async (options) => {
   showVersion();
 
   await checkPathAccess(pegaConfigJsonPath);
@@ -322,9 +267,7 @@ export default async options => {
   data = data && JSON.parse(data);
 
   if (!data[COMPONENTS_DIRECTORY_PATH]) {
-    console.error(
-      `${chalk.red.bold('ERROR')} Could not able find components directory path in config.json`
-    );
+    console.error(`${chalk.red.bold('ERROR')} Could not able find components directory path in config.json`);
     process.exit(1);
   }
 
@@ -336,7 +279,6 @@ export default async options => {
   let componentDefaults = await getComponentDefaults();
   componentDefaults.library = library;
 
-
   if (options.params.length >= 8) {
     const prefix = options.params[3];
     const version = options.params[4];
@@ -356,8 +298,7 @@ export default async options => {
       },
       options
     );
-  }
-  else {
+  } else {
     const questions = [
       {
         name: 'prefix',
@@ -367,7 +308,7 @@ export default async options => {
         name: 'version',
         message: 'Enter component version',
         default: componentDefaults.version,
-        validate: value => {
+        validate: (value) => {
           if (validateSemver(value)) {
             return true;
           }
@@ -378,7 +319,7 @@ export default async options => {
         name: 'library',
         message: 'Enter library name (required)',
         default: componentDefaults.library,
-        validate: value => {
+        validate: (value) => {
           /* value should not be empty
             It should not have spaces
             It should not start with a number
@@ -397,13 +338,10 @@ export default async options => {
       }
     ];
 
-    await inquirer.prompt(questions).then(async answers => {
-      const {
-        prefix,
-        library,
-        version,
-        allowedApplications
-      } = answers;
+    await inquirer.prompt(questions).then(async (answers) => {
+      const { library, version, allowedApplications } = answers;
+      let { prefix } = answers;
+      prefix = prefix.replace(/[^a-zA-Z0-9 ]/g, '');
       await validateCompileAll(
         {
           prefix,
@@ -416,7 +354,4 @@ export default async options => {
       );
     });
   }
-
-
-
 };

package/src/tasks/init/index.js

@@ -124,8 +124,12 @@ export default async (options) => {
         task: () => execPromise('npm i --force --production=false', { cwd: options.targetDirectory })
       },
       {
-        title: 'Installing components dependencies',
+        title: 'Installing tasks dependencies',
         task: () => execPromise('npm i --force --production=false', { cwd: options.componentDirectory })
+      },
+      {
+        title: 'Installing quick run',
+        task: () => execPromise('npm i -g npm-quick-run', { cwd: options.targetDirectory })
       }
     ],
     {

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

@@ -4,6 +4,7 @@
   "description": "{{description}}",
   "organization": "{{organization}}",
   "main": "src/index.js",
+  "type": "module",
   "scripts": {
     "startStorybook": "start-storybook --port 6040 --quiet",
     "lint": "run-p -cl lint:*",
@@ -64,7 +65,7 @@
   },
   "devDependencies": {
     "@pega/configs": "^0.5.3",
-    "@pega/custom-dx-components": "^0.23.6",
+    "@pega/custom-dx-components": "^0.23.8",
     "@pega/eslint-config": "^0.3.2",
     "@storybook/addon-actions": "^6.5.12",
     "@storybook/addon-essentials": "^6.5.12",
@@ -91,7 +92,6 @@
     "eslint-plugin-sonarjs": "^0.11.0",
     "jest": "^29.3.1",
     "jest-environment-jsdom": "^29.3.1",
-    "npm-quick-run": "^1.18.0",
     "npm-run-all": "^4.1.5",
     "prettier": "2.7.1",
     "stylelint": "^14.11.0",

package/src/tasks/init/template/test/assets/components/createAll/Pega_DXIL_MyBoolean/config.json

@@ -1,7 +1,7 @@
 {
   "name": "Pega_DXIL_MyBoolean",
-  "label": "My  Boolean",
-  "description": "My  Boolean",
+  "label": "My Boolean",
+  "description": "My Boolean",
   "organization": "Pega",
   "version": "0.0.1",
   "library": "DXIL",

package/src/tasks/init/template/test/assets/components/createAll/Pega_DXIL_MyBoolean/styles.js

@@ -1,7 +1,14 @@
-import styled, { css } from 'styled-components';
+// utilizing theming, comment out, if want individual style
+import styled from 'styled-components';
+import { Configuration } from '@pega/cosmos-react-core';
 
-export default styled.div(() => {
-  return css`
-    margin: 0px 0px;
-  `;
-});
+export default styled(Configuration)``;
+
+// individual style, comment out above, and uncomment here and add styles
+// import styled, { css } from 'styled-components';
+//
+// export default styled.div(() => {
+//  return css`
+//    margin: 0px 0;
+//  `;
+// });

package/src/tasks/init/template/test/assets/components/createAll/Pega_DXIL_MyCaseWidget/config.json

@@ -1,7 +1,7 @@
 {
   "name": "Pega_DXIL_MyCaseWidget",
-  "label": "My  Case Widget",
-  "description": "My  Case Widget",
+  "label": "My Case Widget",
+  "description": "My Case Widget",
   "organization": "Pega",
   "version": "0.0.1",
   "library": "DXIL",

package/src/tasks/init/template/test/assets/components/createAll/Pega_DXIL_MyCaseWidget/styles.js

@@ -1,7 +1,14 @@
-import styled, { css } from 'styled-components';
+// utilizing theming, comment out, if want individual style
+import styled from 'styled-components';
+import { Configuration } from '@pega/cosmos-react-core';
 
-export default styled.div(() => {
-  return css`
-    margin: 0px 0;
-  `;
-});
+export default styled(Configuration)``;
+
+// individual style, comment out above, and uncomment here and add styles
+// import styled, { css } from 'styled-components';
+//
+// export default styled.div(() => {
+//  return css`
+//    margin: 0px 0;
+//  `;
+// });

package/src/tasks/init/template/test/assets/components/createAll/Pega_DXIL_MyCurrency/config.json

@@ -1,7 +1,7 @@
 {
   "name": "Pega_DXIL_MyCurrency",
-  "label": "My  Currency",
-  "description": "My  Currency",
+  "label": "My Currency",
+  "description": "My Currency",
   "organization": "Pega",
   "version": "0.0.1",
   "library": "DXIL",

package/src/tasks/init/template/test/assets/components/createAll/Pega_DXIL_MyCurrency/styles.js

@@ -1,7 +1,14 @@
-import styled, { css } from 'styled-components';
+// utilizing theming, comment out, if want individual style
+import styled from 'styled-components';
+import { Configuration } from '@pega/cosmos-react-core';
 
-export default styled.div(() => {
-  return css`
-    margin: 0px 0px;
-  `;
-});
+export default styled(Configuration)``;
+
+// individual style, comment out above, and uncomment here and add styles
+// import styled, { css } from 'styled-components';
+//
+// export default styled.div(() => {
+//  return css`
+//    margin: 0px 0;
+//  `;
+// });

package/src/tasks/init/template/test/assets/components/createAll/Pega_DXIL_MyDate/config.json

@@ -1,7 +1,7 @@
 {
   "name": "Pega_DXIL_MyDate",
-  "label": "My  Date",
-  "description": "My  Date",
+  "label": "My Date",
+  "description": "My Date",
   "organization": "Pega",
   "version": "0.0.1",
   "library": "DXIL",

package/src/tasks/init/template/test/assets/components/createAll/Pega_DXIL_MyDate/styles.js

@@ -1,7 +1,14 @@
-import styled, { css } from 'styled-components';
+// utilizing theming, comment out, if want individual style
+import styled from 'styled-components';
+import { Configuration } from '@pega/cosmos-react-core';
 
-export default styled.div(() => {
-  return css`
-    margin: 0px 0px;
-  `;
-});
+export default styled(Configuration)``;
+
+// individual style, comment out above, and uncomment here and add styles
+// import styled, { css } from 'styled-components';
+//
+// export default styled.div(() => {
+//  return css`
+//    margin: 0px 0;
+//  `;
+// });