@pega/dx-component-builder-sdk 0.1.47 → 0.1.48

package/src/tasks/bundle/builderReact/paths.js

@@ -0,0 +1,50 @@
+import path from 'path';
+import fs from 'fs';
+
+// Make sure any symlinks in the project folder are resolved:
+// https://github.com/facebook/create-react-app/issues/637
+const appDirectory = fs.realpathSync(process.cwd());
+const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
+
+const buildPath = 'dist/components';
+
+export const moduleFileExtensions = [
+  'web.mjs',
+  'mjs',
+  'web.js',
+  'js',
+  'web.ts',
+  'ts',
+  'web.tsx',
+  'tsx',
+  'json',
+  'web.jsx',
+  'jsx'
+];
+
+// Resolve file paths in the same order as webpack
+const resolveModule = (resolveFn, filePath) => {
+  const extension = moduleFileExtensions.find(ext =>
+    fs.existsSync(resolveFn(`${filePath}.${ext}`))
+  );
+
+  if (extension) {
+    return resolveFn(`${filePath}.${extension}`);
+  }
+
+  return resolveFn(`${filePath}.js`);
+};
+
+// config after eject: we're in ./config/
+export default {
+  dotenv: resolveApp('.env'),
+  appPath: resolveApp('.'),
+  appBuild: resolveApp(buildPath),
+  appPublic: resolveApp('public'),
+  appIndexJs: resolveModule(resolveApp, 'src/index'),
+  appPackageJson: resolveApp('package.json'),
+  appSrc: [resolveApp('src/components'), resolveApp('src/app/_components')],
+  appTsConfig: resolveApp('constellation-comp-config/tsconfig.build.json'),
+  appJsConfig: resolveApp('jsconfig.json'),
+  appNodeModules: resolveApp('node_modules')
+};

package/src/tasks/bundle/{builder → builderReact}/webpack.config.js

@@ -125,7 +125,8 @@ export default (
         name: componentKey,
         type: 'umd',
         export: 'default'
-      }
+      },
+      publicPath: ''
     },
     optimization: {
       minimize: isEnvProduction,
@@ -175,7 +176,7 @@ export default (
               include: paths.appSrc,
               loader: 'ts-loader',
               options: {
-                configFile: 'tsconfig.build.json'
+                configFile: paths.appTsConfig
               },
               exclude: /node_modules/
             },
@@ -184,7 +185,7 @@ export default (
               test: /\.(ts|tsx)$/,
               loader: 'ts-loader',
               options: {
-                configFile: 'tsconfig.build.json'
+                configFile: paths.appTsConfig
               },
               exclude: /node_modules/
             },
@@ -318,7 +319,7 @@ export default (
       }),
 
       new webpack.optimize.LimitChunkCountPlugin({
-        maxChunks: 5
+        maxChunks: 1
       }),
       new webpack.optimize.MinChunkSizePlugin({
         minChunkSize: 100000 // Minimum number of characters

package/src/tasks/bundle/index.js

@@ -3,13 +3,14 @@ import fs from 'fs';
 import { stat } from 'fs/promises';
 
 import { BUILD_CONFIG_JSON_FILENAME, CATEGORY_CUSTOM } from '../../constants.js';
-import { getComponentDirectoryPath } from '../../util.js';
+import { getComponentDirectoryPath, getFramework, removeComponentPrefix } from '../../util.js';
 
-import buildComponent from './builder/index.js';
+import buildReactComponent from './builderReact/index.js';
+import buildAngularComponent from './builderAngular/index.js';
 
 const extensions = ['ts', 'tsx', 'js', 'jsx'];
 
-const bundleComponent = async (componentKey, sourceMap, devBuild, category = CATEGORY_CUSTOM) => {
+export const bundleReactComponent = async (componentKey, sourceMap, devBuild, category = CATEGORY_CUSTOM) => {
   const componentDirectory = await getComponentDirectoryPath(componentKey, category);
 
   const idx = (
@@ -57,7 +58,7 @@ const bundleComponent = async (componentKey, sourceMap, devBuild, category = CAT
   };
 
   globals = { ...globals, ...defaultGlobals };
-  await buildComponent({
+  await buildReactComponent({
     inputFile,
     outputFile,
     componentKey,
@@ -68,4 +69,62 @@ const bundleComponent = async (componentKey, sourceMap, devBuild, category = CAT
   });
 };
 
-export default bundleComponent;
+export const bundleAngularComponent = async (componentKey, sourceMap, devBuild, category = CATEGORY_CUSTOM) => {
+  const componentDirectory = await getComponentDirectoryPath(componentKey, category);
+
+  componentKey = removeComponentPrefix(componentKey);
+
+  const idx = (
+    await Promise.all(
+      extensions.map(ext => 
+        stat(path.join(componentDirectory, `${componentKey}.component.${ext}`))
+          .then(() => true)
+          .catch(() => false)
+      )
+    )
+  ).findIndex(exists => exists);
+  
+
+  if (idx === -1) throw new Error('Index file not found.');
+
+  // remove sub folder, component goes in dist directory without it
+  // if (componentKey.indexOf("/") >=0) {
+  //   const arKey = componentKey.split("/");
+  //   componentKey = arKey[arKey.length - 1];
+  // }
+
+  const inputFile = path.join(componentDirectory, `${componentKey}.component.${extensions[idx]}`);
+  const outputFile = `${componentKey}.js`;
+
+  let buildConfig = {};
+
+  if (fs.existsSync(BUILD_CONFIG_JSON_FILENAME)) {
+    buildConfig = JSON.parse(fs.readFileSync(BUILD_CONFIG_JSON_FILENAME, 'utf8'));
+  }
+
+  let externals = buildConfig.externals || [];
+  externals = {
+    PCore: 'PCore',
+    ...buildConfig.externals
+  };
+
+  let globals = buildConfig.globals || {};
+
+  const defaultGlobals = {
+    PCore: 'PCore',
+    ...buildConfig.globals
+  };
+  
+  globals = { ...globals, ...defaultGlobals };
+  await buildAngularComponent({
+    inputFile,
+    outputFile,
+    componentKey,
+    externals,
+    globals,
+    sourceMap,
+    devBuild
+  });
+};
+
+

package/src/tasks/create/index.js

@@ -8,8 +8,10 @@ import inquirer from 'inquirer';
 import ncp from 'ncp';
 import chalk from 'chalk';
 
-import { checkPathAccess, showVersion, getFramework } from '../../util.js';
-import { CATEGORY_CONSTELLATION, 
+import { checkPathAccess, 
+  showVersion, 
+  getFramework} from '../../util.js';
+import { CATEGORY_CONSTELLATION, CATEGORY_CUSTOM,
   SDK_CONFIG_JSON_FILENAME,
   DXCB_CONFIG, 
   DXCB_COMPONENT_DEFAULTS,
@@ -25,6 +27,7 @@ const pegaConfigInternalJsonPath = path.join(path.resolve(), DXCB_CONFIG_INTERNA
 
 import {
   convertIntoPascalCase,
+  convertIntoKebabCase,
   compileMustacheTemplate,
   getComponentDirectoryPath,
   getPegaConfig,
@@ -110,8 +113,12 @@ export const compileMustacheTemplates = async (
     allowedApplications = [].concat(allowedApplications);
   }
 
+  const componentKeyKebab = convertIntoKebabCase(convertIntoPascalCase(componentKey));
+  const framework = await getFramework();
+
   allowedApplications = allowedApplications.filter(el => !!el.trim()).map(el => el.trim());
   files.forEach(file => {
+
     const filePath = path.join(componentDirectory, file);
 
     const output = compileMustacheTemplate(filePath, {
@@ -119,6 +126,7 @@ export const compileMustacheTemplates = async (
       COMPONENT_NAME: componentName,
       COMPONENT_LABEL: componentLabel,
       COMPONENT_CLASS_NAME: componentClassName,
+      COMPONENT_CLASS_NAME_KEBAB: componentKeyKebab,
       ORGANIZATION: organization,
       VERSION: version,
       LIBRARY: library,
@@ -132,7 +140,24 @@ export const compileMustacheTemplates = async (
       IS_PHONE: isPhone
     });
     fs.writeFileSync(filePath, output);
-    fs.renameSync(filePath, filePath.replace('.mustache', ''));
+
+    switch (framework) {
+      case "SDK-React":
+        fs.renameSync(filePath, filePath.replace('.mustache', ''));
+        break;
+      case "SDK-Angular":
+        let newFilePath = filePath.replace('.mustache', '');
+        const typeAng = convertIntoKebabCase(convertIntoPascalCase(mustacheSubType)).concat(".component");
+        newFilePath = newFilePath.replace(typeAng, componentKeyKebab.concat(".component"));
+
+        fs.renameSync(filePath, newFilePath);
+        break;
+      case "SDK-WebComponents":
+        fs.renameSync(filePath, filePath.replace('.mustache', ''));
+        break;
+    }
+
+    
   });
 };
 
@@ -185,17 +210,29 @@ export const validateCompile = async (
 
   const componentKey = `${organization}_${library}_${componentName}`;
 
+  let targetDirectory = "";
+  switch (framework) {
+    case "SDK-React":
+      targetDirectory = await getComponentDirectoryPath(join(typeLC, "/",componentKey));
+      break;
+    case "SDK-Angular":
+      let componentKeyAng = convertIntoKebabCase(convertIntoPascalCase(componentKey));
+      targetDirectory = await getComponentDirectoryPath(join(typeLC, "/",componentKeyAng));
+      break;
+    case "SDK-WebComponents":
+      break;
+  }
  
-  const targetDirectory = await getComponentDirectoryPath(join(typeLC, "/",componentKey));
+  //const targetDirectory = await getComponentDirectoryPath(join(typeLC, "/",componentKey));
   const targetDirectoryConstellation = await getComponentDirectoryPath(join(typeLC, "/",componentKey), CATEGORY_CONSTELLATION);
 
-  const components = await getComponents(false);
+  const components = await getComponents(false, CATEGORY_CUSTOM, false);
 
   if (!onlyCompanion) {
     if (components.includes(componentKey)) {
       console.log(chalk.red(`${componentKey} component already exists in ${targetDirectory}`));
 
-      let componentsConstellation = await getComponents(false, CATEGORY_CONSTELLATION);
+      let componentsConstellation = await getComponents(false, CATEGORY_CONSTELLATION, false);
       if (components.includes(componentKey)) {
         console.log(chalk.red(`${componentKey} associated component already exists in ${targetDirectoryConstellation}`));
       }
@@ -203,7 +240,7 @@ export const validateCompile = async (
       return;
     }
     // test for constellation
-    const componentsConstellation = await getComponents(false, CATEGORY_CONSTELLATION);
+    const componentsConstellation = await getComponents(false, CATEGORY_CONSTELLATION, false);
     if (componentsConstellation.includes(componentKey)) {
       console.log(chalk.red(`${componentKey} associated component already exists in ${targetDirectoryConstellation}`));
       return;
@@ -211,7 +248,7 @@ export const validateCompile = async (
   }
   else {
     // test for constellation
-    const componentsConstellation = await getComponents(false, CATEGORY_CONSTELLATION);
+    const componentsConstellation = await getComponents(false, CATEGORY_CONSTELLATION, false);
     if (componentsConstellation.includes(componentKey)) {
       console.log(chalk.red(`${componentKey} associated component already exists in ${targetDirectoryConstellation}`));
       return;
@@ -270,14 +307,18 @@ export const validateCompile = async (
 export default async options => {
   showVersion();
 
-  if (options.params[9]) {
+  const framework = await getFramework();
+
+  if (options.params.length >= 12) {
     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[8];
-    const description = options.params[9];
+    const version = options.params[7];
+    const library = options.params[8];
+    const allowedApplications = options.params[9];
+    const description = options.params[10];
+    const organization = options.params[11];
 
     await validateCompile(
       {
@@ -289,6 +330,7 @@ export default async options => {
         type,
         subtype,
         description,
+        allowedApplications,
         organization
       },
       options

package/src/tasks/create/templates/Constellation/field/Boolean/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/field/Date/DateFormatter.js.mustache

@@ -1,13 +1,13 @@
 import dayjs from 'dayjs';
-import relativeTime from 'dayjs/plugin/relativeTime';
-import localizedFormat from 'dayjs/plugin/localizedFormat';
-import utc from 'dayjs/plugin/utc';
-import tzone from 'dayjs/plugin/timezone';
+import relativeTime from 'dayjs/plugin/relativeTime.js';
+import localizedFormat from 'dayjs/plugin/localizedFormat.js';
+import utc from 'dayjs/plugin/utc.js';
+import timezone from 'dayjs/plugin/timezone.js';
 
 dayjs.extend(relativeTime);
 dayjs.extend(localizedFormat);
 dayjs.extend(utc);
-dayjs.extend(tzone);
+dayjs.extend(timezone);
 
 const types = ['fromNow', 'customFormat'];
 
@@ -16,12 +16,12 @@ const types = ['fromNow', 'customFormat'];
 // value should be in ISO 8601 format.
 function DateFormatter(
   value,
-  { type = types[1], format = "DD/MM/YYYY", timezone } = {}
+  { type = types[1], format = "DD/MM/YYYY", tzone } = {}
 ) {
   if (!value) return value;
   switch (type) {
     case types[1]:
-      if (timezone) return dayjs(value).tz(timezone).format(format);
+      if (tzone) return dayjs(value).tz(tzone).format(format);
       return dayjs(value).format(format);
     case types[0]:
       return dayjs(value).from(dayjs());

package/src/tasks/create/templates/Constellation/field/Date/date.js.mustache

@@ -1,16 +1,16 @@
 /* eslint-disable no-undef */
 import dayjs from 'dayjs';
-import DateFormatter from './DateFormatter';
+import DateFormatter from './DateFormatter.js';
 
-const relativeTime = require('dayjs/plugin/relativeTime');
-const utc = require('dayjs/plugin/utc');
-const localizedFormat = require('dayjs/plugin/localizedFormat');
-const tzone = require('dayjs/plugin/timezone');
+import relativeTime from 'dayjs/plugin/relativeTime.js';
+import localizedFormat from 'dayjs/plugin/localizedFormat.js';
+import utc from 'dayjs/plugin/utc.js';
+import timezone from 'dayjs/plugin/timezone.js';
 
 dayjs.extend(relativeTime);
 dayjs.extend(localizedFormat);
 dayjs.extend(utc);
-dayjs.extend(tzone);
+dayjs.extend(timezone);
 
 function isIsoDate(str) {
   if (!/\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z/.test(str)) return false;
@@ -372,8 +372,8 @@ export const getDateTimeOptions = (withSeconds, is12h = false) => {
   };
 };
 
-export function getCurrentTimezone(timezone) {
-  if (timezone) return timezone;
+export function getCurrentTimezone(tzone) {
+  if (tzone) return tzone;
   return PCore?.getLocaleUtils?.().getTimeZoneInUse?.();
 }
 

package/src/tasks/create/templates/Constellation/field/Date/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/field/DateTime/date-time.js.mustache

@@ -1,25 +1,25 @@
 import dayjs from "dayjs";
-import relativeTime from "dayjs/plugin/relativeTime";
-import localizedFormat from "dayjs/plugin/localizedFormat";
-import utc from "dayjs/plugin/utc";
-import tzone from "dayjs/plugin/timezone";
+import relativeTime from 'dayjs/plugin/relativeTime.js';
+import localizedFormat from 'dayjs/plugin/localizedFormat.js';
+import utc from 'dayjs/plugin/utc.js';
+import timezone from 'dayjs/plugin/timezone.js';
 
 dayjs.extend(relativeTime);
 dayjs.extend(localizedFormat);
 dayjs.extend(utc);
-dayjs.extend(tzone);
+dayjs.extend(timezone);
 
 const types = ["fromNow", "customFormat"];
 
 // value should be in ISO 8601 format.
 function DateFormatter(
   value,
-  { type = types[1], format = "DD/MM/YYYY", timezone, fieldType } = {}
+  { type = types[1], format = "DD/MM/YYYY", tzone, fieldType } = {}
 ) {
   if (!value) return value;
   switch (type) {
     case types[1]:
-      if (timezone && fieldType !== 'Date') return dayjs(value).tz(timezone).format(format); // Date only value should be formatted without timezone
+      if (tzone && fieldType !== 'Date') return dayjs(value).tz(tzone).format(format); // Date only value should be formatted without timezone
       return dayjs(value).format(format);
     case types[0]:
       return dayjs(value).from(dayjs());
@@ -74,9 +74,9 @@ export default {
         })
       : value;
   },
-  convertFromTimezone: (value, timezone) =>
-  value && timezone
-  ? dayjs.tz(value, timezone).utc().format("YYYY-MM-DDTHH:mm:ss[Z]")
+  convertFromTimezone: (value, tzone) =>
+  value && tzone
+  ? dayjs.tz(value, tzone).utc().format("YYYY-MM-DDTHH:mm:ss[Z]")
   : value,
   Date: (value, options) =>
     DateFormatter(value, { type: "customFormat", ...options }),

package/src/tasks/create/templates/Constellation/field/DateTime/date-utils.js.mustache

@@ -1,13 +1,14 @@
 /* eslint-disable no-undef */
 import dayjs from "dayjs";
-
-const relativeTime = require("dayjs/plugin/relativeTime");
+import relativeTime from 'dayjs/plugin/relativeTime.js';
+import localizedFormat from 'dayjs/plugin/localizedFormat.js';
+import utc from 'dayjs/plugin/utc.js';
+import timezone from 'dayjs/plugin/timezone.js';
 
 dayjs.extend(relativeTime);
-
-const utc = require("dayjs/plugin/utc");
-
+dayjs.extend(localizedFormat);
 dayjs.extend(utc);
+dayjs.extend(timezone);
 
 /**
  * Return relative time in fromNow for the given datetime

package/src/tasks/create/templates/Constellation/field/DateTime/date.js.mustache

@@ -1,11 +1,14 @@
 /* eslint-disable no-undef */
 import dayjs from 'dayjs';
-
-const relativeTime = require('dayjs/plugin/relativeTime');
-const utc = require('dayjs/plugin/utc');
+import relativeTime from 'dayjs/plugin/relativeTime.js';
+import localizedFormat from 'dayjs/plugin/localizedFormat.js';
+import utc from 'dayjs/plugin/utc.js';
+import timezone from 'dayjs/plugin/timezone.js';
 
 dayjs.extend(relativeTime);
+dayjs.extend(localizedFormat);
 dayjs.extend(utc);
+dayjs.extend(timezone);
 
 export const datetimedisplayformatter = (formatter) => {
   const objectvalues = {};

package/src/tasks/create/templates/Constellation/field/DateTime/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/field/Decimal/index.jsx.mustache

@@ -100,7 +100,7 @@ const {{COMPONENT_CLASS_NAME}} = props => {
     }
 
 
-    {{! pick new delimiteres for mustache }}
+    {{! pick new delimiters for mustache }}
     {{=<% %>=}}
 
     const displayComp =
@@ -128,7 +128,7 @@ const {{COMPONENT_CLASS_NAME}} = props => {
         />
       );
 
-    <%={{ }}=%>     {{! revert delimiteres for mustache }}
+    <%={{ }}=%>     {{! revert delimiters for mustache }}
 
     switch (displayMode) {
       case 'DISPLAY_ONLY': {

package/src/tasks/create/templates/Constellation/field/Decimal/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/field/Decimal-Currency/index.jsx.mustache

@@ -95,7 +95,7 @@ const {{COMPONENT_CLASS_NAME}} = props => {
 
     const displayValue = !value && value !== 0 ? undefined : Number(currencyValue);
 
-    {{! pick new delimiteres for mustache }}
+    {{! pick new delimiters for mustache }}
     {{=<% %>=}}
 
     displayComp = (
@@ -151,7 +151,7 @@ const {{COMPONENT_CLASS_NAME}} = props => {
       );
     }
 
-    <%={{ }}=%>     {{! revert delimiteres for mustache }}
+    <%={{ }}=%>     {{! revert delimiters for mustache }}
 
     switch (displayMode) {
       case 'DISPLAY_ONLY': {

package/src/tasks/create/templates/Constellation/field/Decimal-Currency/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/field/Decimal-Percentage/index.jsx.mustache

@@ -101,7 +101,7 @@ const {{COMPONENT_CLASS_NAME}} = props => {
       }
     }
 
-    {{! pick new delimiteres for mustache }}
+    {{! pick new delimiters for mustache }}
     {{=<% %>=}}
 
     displayComp = (
@@ -132,7 +132,7 @@ const {{COMPONENT_CLASS_NAME}} = props => {
       );
     }
 
-    <%={{ }}=%>     {{! revert delimiteres for mustache }}
+    <%={{ }}=%>     {{! revert delimiters for mustache }}
 
     return displayMode === 'DISPLAY_ONLY' ? (
       <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
@@ -149,7 +149,7 @@ const {{COMPONENT_CLASS_NAME}} = props => {
     );
   }
 
-  {{! pick new delimiteres for mustache }}
+  {{! pick new delimiters for mustache }}
   {{=<% %>=}}
 
   if (displayMode === 'STACKED_LARGE_VAL') {
@@ -164,7 +164,7 @@ const {{COMPONENT_CLASS_NAME}} = props => {
       />
     );
 
-  <%={{ }}=%>     {{! revert delimiteres for mustache }}
+  <%={{ }}=%>     {{! revert delimiters for mustache }}
 
     return (
       <Styled{{COMPONENT_CLASS_NAME}}Wrapper>