@pega/custom-dx-components 0.24.16 → 0.25.1

package/src/tasks/create/templates/Launchpad/Field/Icon-Button-URL/create-nonce.ts.mustache

@@ -0,0 +1,6 @@
+/* eslint-disable camelcase */
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/src/tasks/create/templates/Launchpad/Field/Icon-Button-URL/demo.stories.tsx.mustache

@@ -1,10 +1,9 @@
 
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import type { Meta, StoryObj } from '@storybook/react';
 
 import {{COMPONENT_CLASS_NAME}} from './index';
-import { stateProps, configProps } from './mock';
+import { configProps } from './mock';
 
 const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
   title: '{{COMPONENT_CLASS_NAME}}',
@@ -51,18 +50,18 @@ window.PCore.getDataPageUtils = () => {
   };
 };
 
-export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
+export const Base{{COMPONENT_CLASS_NAME}}: Story = (args: any) => {
 
   const props = {
     getPConnect: () => {
       return {
-        getValue: value => {
+        getValue: (value: any) => {
           return value;
         },
         getContextName: () => {
           return 'app/primary_1';
         },
-        getLocalizedValue: value => {
+        getLocalizedValue: (value: any) => {
           return value;
         },
         getActionsApi: () => {

package/src/tasks/create/templates/Launchpad/Field/Icon-Button-URL/index.tsx.mustache

@@ -10,6 +10,7 @@ import {
   URLDisplay
 } from '@pega/cosmos-react-core';
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 // IMPORTANT
 // To use Icons, need to individually import the icon file form @pega/cosmos-react-core (see path below)
@@ -117,7 +118,6 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
     if (showTable) {
       PCore.getDataPageUtils()
         .getDataAsync(dataViewName, context, params, null, null)
-        // @ts-ignore
         .then((response: any) => {
           setIsLoading(false);
           // table requires an index or will get setExtraStackFrame error

package/src/tasks/create/templates/Launchpad/Field/Icon-Button-URL/mock.ts.mustache

@@ -1,5 +1,4 @@
 
-// @ts-nocheck
 export const configProps = {
 
 };

package/src/tasks/create/templates/Launchpad/Widget/CASE/create-nonce.ts.mustache

@@ -0,0 +1,6 @@
+/* eslint-disable camelcase */
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/src/tasks/create/templates/Launchpad/Widget/CASE/demo.stories.tsx.mustache

@@ -1,6 +1,4 @@
-
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import type { Meta, StoryObj } from '@storybook/react';
 
 import {{COMPONENT_CLASS_NAME}} from './index';
@@ -30,7 +28,7 @@ window.PCore.getConstants = () => {
 
 window.PCore.getLocaleUtils = () => {
   return {
-    getLocaleValue: value => {
+    getLocaleValue: (value: any) => {
       return value;
     }
   };
@@ -46,20 +44,20 @@ window.PCore.getDataApiUtils = () => {
   };
 };
 
-export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
+export const Base{{COMPONENT_CLASS_NAME}}: Story = (args: any) => {
 
   const props = {
     label: 'Case history',
 
     getPConnect: () => {
       return {
-        getValue: value => {
+        getValue: (value: any) => {
           return value;
         },
         getContextName: () => {
           return 'app/primary_1';
         },
-        getLocalizedValue: value => {
+        getLocalizedValue: (value: any) => {
           return value;
         },
         getActionsApi: () => {

package/src/tasks/create/templates/Launchpad/Widget/CASE/index.tsx.mustache

@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react';
 import { Table, Text, withConfiguration } from '@pega/cosmos-react-core';
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
@@ -29,13 +30,10 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   ];
 
   useEffect(() => {
-    // @ts-ignore
-    const payload = { dataViewParameters: [{ ObjectID: caseID }] };
+    const payload = { dataViewParameters: { ObjectID: caseID } };
     PCore.getDataApiUtils()
-      // @ts-ignore
       .getData('ObjectHistory', payload, context)
-      // @ts-ignore
-      .then((response) => {
+      .then((response: any) => {
         setIsLoading(false);
         if (response.data.data !== null) {
           setHistory(

package/src/tasks/create/templates/Launchpad/Widget/CASE/mock.ts.mustache

@@ -1,4 +1,4 @@
-// @ts-nocheck
+
 const historyData = {
   data: {
     fetchDateTime: '2023-01-18T12:04:56.517Z',

package/src/tasks/create/templates/Launchpad/Widget/PAGE/create-nonce.ts.mustache

@@ -0,0 +1,6 @@
+/* eslint-disable camelcase */
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/src/tasks/create/templates/Launchpad/Widget/PAGE/demo.stories.tsx.mustache

@@ -1,6 +1,4 @@
-
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import type { Meta, StoryObj } from '@storybook/react';
 
 import {{COMPONENT_CLASS_NAME}} from './index';
@@ -64,19 +62,19 @@ window.PCore.getDataApiUtils = () => {
 
 
 
-export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
+export const Base{{COMPONENT_CLASS_NAME}}: Story = (args: any) => {
 
   const props = {
     ...configProps,
     getPConnect: () => {
       return {
-        getValue: value => {
+        getValue: (value: any) => {
           return value;
         },
         getContextName: () => {
           return 'app/primary_1';
         },
-        getLocalizedValue: value => {
+        getLocalizedValue: (value: any) => {
           return value;
         },
         getActionsApi: () => {

package/src/tasks/create/templates/Launchpad/Widget/PAGE/index.tsx.mustache

@@ -2,13 +2,14 @@ import { useEffect, useState } from 'react';
 import { withConfiguration, Table } from '@pega/cosmos-react-core';
 import { AppAnnouncement as PegaAppAnnouncement } from '@pega/cosmos-react-work';
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
 // interface for props
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   // If any, enter additional props that only exist on TextInput here
-    datasource: Array<any>;
+    datasource: any;
     header: string;
     description: string;
     whatsnewlink: string;
@@ -27,10 +28,8 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   const context = PConnect.getContextName();
 
   let details = [];
-  // @ts-ignore
   if (datasource && datasource.source) {
-    // @ts-ignore
-    details = datasource.source.map((item) => {
+    details = datasource.source.map((item: any) => {
       return item.name;
     });
   }
@@ -51,7 +50,6 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
 
     PCore.getDataApiUtils()
       .getData(dataViewName, {}, context)
-      // @ts-ignore
       .then((response: any) => {
         setIsLoading(false);
         if (response.data.data !== null) {

package/src/tasks/create/templates/Launchpad/Widget/PAGE/mock.ts.mustache

@@ -1,5 +1,4 @@
 
-// @ts-nocheck
 const configProps = {
   label: 'App announcement',
   header: 'Announcements',

package/src/tasks/create/templates/Launchpad/Widget/PAGE-CASE/Avatar.tsx.mustache

@@ -22,8 +22,8 @@ function Avatar(props: {{COMPONENT_CLASS_NAME}}AvatarProps) {
   // TODO Below if conditions can be removed once we have apis to get worklist/mywork info
   // This is non CaseView case (Dashboard, MyWork etc)
   if (!metaObj) {
-    userName = PCore.getEnvironmentInfo().getOperatorName();
-    userIdentifier = PCore.getEnvironmentInfo().getOperatorIdentifier();
+    userName = PCore.getEnvironmentInfo().getOperatorName() ?? "";
+    userIdentifier = PCore.getEnvironmentInfo().getOperatorIdentifier() ?? "";
   } else {
     userName = metaObj.name;
     userIdentifier = metaObj.ID;
@@ -46,8 +46,7 @@ function Avatar(props: {{COMPONENT_CLASS_NAME}}AvatarProps) {
     const currentState = PCore.getMessagingServiceManager().getUserPresence().getUserState(userIdentifier);
     const [userState, setUserState]: any  = useState(currentState === 'online' ? 'active' : 'inactive');
 
-    // @ts-ignore
-    const handleUserStateChange = ({ state }) => {
+    const handleUserStateChange = ({ state } : any) => {
       setUserState(state === 'online' ? 'active' : 'inactive');
     };
 
@@ -61,7 +60,6 @@ function Avatar(props: {{COMPONENT_CLASS_NAME}}AvatarProps) {
         PCore.getMessagingServiceManager().getUserPresence().unsubscribe(userIdentifier, subId);
       };
     }, [userIdentifier, handleUserStateChange]);
-    // @ts-ignore
     return <CosmosAvatar name={userName} imageSrc={imageBlobUrl as React.SetStateAction<any>} status={userState} />;
   }
 

package/src/tasks/create/templates/Launchpad/Widget/PAGE-CASE/create-nonce.ts.mustache

@@ -0,0 +1,6 @@
+/* eslint-disable camelcase */
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/src/tasks/create/templates/Launchpad/Widget/PAGE-CASE/demo.stories.tsx.mustache

@@ -1,5 +1,4 @@
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import type { Meta, StoryObj } from '@storybook/react';
 
 import {{COMPONENT_CLASS_NAME}} from './index';
@@ -21,7 +20,7 @@ if (!window.PCore) {
 
 window.PCore.getLocaleUtils = () => {
   return {
-    getLocaleValue: value => {
+    getLocaleValue: (value: any) => {
       return value;
     }
   };
@@ -37,7 +36,7 @@ window.PCore.getUserApi = () => {
   };
 };
 
-export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
+export const Base{{COMPONENT_CLASS_NAME}}: Story = (args: any) => {
 
   const props = {
     label: configProps.label,

package/src/tasks/create/templates/Launchpad/Widget/PAGE-CASE/index.tsx.mustache

@@ -1,6 +1,7 @@
 import { Fragment } from 'react';
 import { DateTimeDisplay, Card, CardHeader, CardContent, Flex, withConfiguration } from '@pega/cosmos-react-core';
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 // includes in bundle
 import Operator from './Operator';

package/src/tasks/create/templates/Launchpad/Widget/PAGE-CASE/mock.ts.mustache

@@ -1,4 +1,3 @@
-// @ts-nocheck
 export const configProps = {
   label: 'Create operator',
   createLabel: 'Created',

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

@@ -15,12 +15,18 @@ import { checkPathAccess, showVersion ,
   getComponentDirectoryPath,
   getPegaServerConfig,
   getComponents,
-  getComponentDefaults,
   sanitize,
-  validateSemver
+  validateSemver,
+  updateComponentDefaultLibrary,
+  updateComponentDefaultVersion,
+  copyFileToShared,
+  getLibraryBased,
+  addDebugLog,
+  checkLibraryAndArchives,
+  getConfigDefaults
 } 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, SHARED_FILE_NAMES } from '../../constants.js';
 
 export const DXCB_CONFIG_INTERNAL_JSON_FILENAME = 'src/dxcb.config.json';
 
@@ -28,6 +34,8 @@ const pegaConfigJsonPath = path.join(path.resolve(), TASKS_CONFIG_JSON_FILENAME)
 
 const copy = promisify(ncp);
 
+
+
 const copyComponentTemplate = async (options) => {
   if (options.targetDirectory) {
     return copy(options.templateDirectory, options.targetDirectory, {
@@ -47,10 +55,11 @@ const copyComponentTemplate = async (options) => {
 
 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);
+  const isLibraryBased =  getLibraryBased();
 
   const isTemplate = type === 'Template';
 
@@ -99,6 +108,7 @@ export const compileMustacheTemplates = async (
     allowedApplications = [].concat(allowedApplications);
   }
 
+
   allowedApplications = allowedApplications.filter((el) => !!el.trim()).map((el) => el.trim());
   files.forEach((file) => {
     const filePath = path.join(componentDirectory, file);
@@ -114,14 +124,46 @@ export const compileMustacheTemplates = async (
       ALLOWEDAPPS: JSON.stringify(allowedApplications),
       TYPE: type,
       SUB_TYPE: JSON.stringify(mustacheSubType),
-      DESCRIPTION: description || componentLabel,
+      DESCRIPTION: description,
       IS_TEMPLATE: isTemplate,
       IS_PICKLIST: isPicklist,
       IS_BOOLEAN: isBool,
       IS_PHONE: isPhone
     });
-    fs.writeFileSync(filePath, output);
-    fs.renameSync(filePath, filePath.replace('.mustache', ''));
+
+    const realFileName = file.replace('.mustache', '');
+    if ( isLibraryBased) {
+      if (SHARED_FILE_NAMES.includes(realFileName)) {
+        // write to shared
+        copyFileToShared(realFileName, output);
+
+        // delete file from main components
+        fs.rmSync(filePath);
+      }
+      else if (realFileName.includes(".tsx") || realFileName.includes(".ts") ) {
+        // going to search for shared file names an change the import path
+        let newOutput = output;
+        for (const index in SHARED_FILE_NAMES) {
+          const sFileName = SHARED_FILE_NAMES[index].split(".")[0];
+          const orgPath = "./".concat(sFileName);
+          const newPath = "../shared/".concat(sFileName);
+
+          newOutput = newOutput.replaceAll(orgPath, newPath);
+        }
+        fs.writeFileSync(filePath, newOutput);
+        fs.renameSync(filePath, filePath.replace('.mustache', ''));
+      }
+      else {
+        fs.writeFileSync(filePath, output);
+        fs.renameSync(filePath, filePath.replace('.mustache', ''));
+      }
+
+    }
+    else {
+      fs.writeFileSync(filePath, output);
+      fs.renameSync(filePath, filePath.replace('.mustache', ''));
+    }
+
   });
 };
 
@@ -134,8 +176,7 @@ export const validateCompile = async (
     sSubType = subtype.join('-');
   }
 
-  // await checkPathAccess(pegaConfigInternalJsonPath);
-
+  const isLibraryBased =  getLibraryBased();
   framework = convertIntoPascalCase(CATEGORY_CONSTELLATION);
 
   const templateParentDir = `./templates/${framework}`;
@@ -148,6 +189,25 @@ export const validateCompile = async (
   const isLaunchpad = defaultPegaServerConfig.serverType === 'launchpad';
   const originalFramework = framework;
 
+  // check of library or version has changed from default, if so, update componentDefaults
+  const componentDefaults = getConfigDefaults();
+  if (componentDefaults.library == null || componentDefaults.library !== library) {
+    await updateComponentDefaultLibrary(library);
+  }
+
+  // library based, get version from defaults
+  if (isLibraryBased) {
+    version = componentDefaults.version;
+    if (defaultPegaServerConfig.devBuild) {
+      version = version.concat("-dev");
+    }
+  }
+  else {
+    if (componentDefaults.version == null || componentDefaults.version !== version) {
+      await updateComponentDefaultVersion(version);
+    }
+  }
+
   if (isLaunchpad) {
     framework = "Launchpad";
 
@@ -167,12 +227,8 @@ export const validateCompile = async (
 
   }
 
-
-
   const componentKey = `${organization}_${library}_${componentName}`;
-
   const targetDirectory = await getComponentDirectoryPath(componentKey);
-
   const components = await getComponents(false);
 
   if (components.includes(componentKey)) {
@@ -204,6 +260,8 @@ export const validateCompile = async (
 };
 
 export const validateCompileAll = async ({ prefix, library, version, allowedApplications, organization }, options) => {
+  const defaultPegaServerConfig = await getPegaServerConfig();
+
   // eslint-disable-next-line no-restricted-syntax, guard-for-in
   for (const fieldIdx in COMPONENT_SCHEMA.subtype.field) {
     const type = 'Field';
@@ -301,7 +359,12 @@ export const validateCompileAll = async ({ prefix, library, version, allowedAppl
 
 
 export default async (options) => {
-  showVersion();
+  await showVersion();
+  await checkLibraryAndArchives();
+
+  const isLibraryBased =  getLibraryBased();
+
+addDebugLog("createAll", "", "+");
 
   await checkPathAccess(pegaConfigJsonPath);
 
@@ -319,7 +382,7 @@ export default async (options) => {
   ({ library } = componentData);
   let { organization } = JSON.parse(fs.readFileSync(path.resolve('package.json'), 'utf8'));
 
-  const componentDefaults = await getComponentDefaults();
+  const componentDefaults = getConfigDefaults();
   componentDefaults.library = library;
 
   if (options.params.length >= 8) {
@@ -356,7 +419,8 @@ export default async (options) => {
             return true;
           }
           return 'Please provide semver compatible version e.g 0.0.1';
-        }
+        },
+        when: () => !isLibraryBased
       },
       {
         name: 'library',
@@ -372,17 +436,26 @@ export default async (options) => {
             return true;
           }
           return 'Only alphanumeric values are allowed, starting with alphabets';
-        }
+        },
+        when: () => !isLibraryBased
       },
       {
         name: 'allowedApplications',
         message: 'Please enter the application names to be supported (comma-separated). ',
-        suffix: 'Keep empty for all applications'
+        suffix: 'Keep empty for all applications',
+        when: () => !isLibraryBased
       }
     ];
 
     await inquirer.prompt(questions).then(async (answers) => {
       ({library} = answers);
+
+      if (isLibraryBased) {
+        // library comes from config
+        const orgLib = getConfigDefaults();
+        library = orgLib.library;
+      }
+
       const { version, allowedApplications } = answers;
       let { prefix } = answers;
       prefix = prefix.replace(/[^a-zA-Z0-9 ]/g, '');
@@ -398,4 +471,6 @@ export default async (options) => {
       );
     });
   }
+
+addDebugLog("createAll", "END", "-");
 };

package/src/tasks/create-lib/helper.js

@@ -0,0 +1,112 @@
+
+import chalk from 'chalk';
+
+import {
+  sanitize,
+  validateSemver,
+  getLibraryArchiveDirectories,
+  addDebugLog,
+  getConfigDefaults,
+  getComponents,
+  updateConfigVersion
+} from '../../util.js';
+
+
+export const updateAllComponentsConfig = async( newVersion ) => {
+addDebugLog("updateAllComponentsConfig", `newVersion: ${newVersion}`, "");
+  const componentList = await getComponents();
+  const orgLib =  getConfigDefaults();
+  // const currentOrgLib = `${orgLib.organization}_${orgLib.library}`;
+  const currentOrgLib = orgLib.currentOrgLib;
+
+  for (const index in componentList) {
+    const componentKey = componentList[index];
+    await updateConfigVersion(componentKey, newVersion, currentOrgLib);
+
+  }
+};
+
+export const getCurrentOrOriginalQuestion = async () => {
+addDebugLog("getCurrentOrOriginal", "", "");
+
+  return [
+    {
+      name: 'currentOrOriginal',
+      type: 'rawlist',
+      message: 'Current config changes or original defaults ?',
+      default: 'Original',
+      choices: ['Current', 'Original']
+    }
+  ];
+}
+
+export const getOkToProceedQuestion = async () => {
+addDebugLog("getCreateLibComponentQuestions", "", "");
+
+  return [
+    {
+      name: 'okToContinue',
+      type: 'confirm',
+      message: 'Ok to continue ?',
+      default: true
+    }
+  ];
+
+}
+
+export const getCreateLibComponentQuestions = async (libraryName = "") => {
+addDebugLog("getCreateLibComponentQuestions", "", "");
+  const archDirectories = await getLibraryArchiveDirectories();
+  const orgLib = getConfigDefaults();
+
+
+  return [
+    {
+      name: 'libraryName',
+      message: 'Enter libray name',
+      default: libraryName,
+      validate: value => {
+        /* value should not be empty
+        It should not have spaces
+        It should not start with a number
+        Only case-insensitive alphanumeric values are allowed
+      */
+        if (value && !/^\d/.test(value) && value === sanitize(value)) {
+          if (archDirectories && archDirectories.length > 0) {
+            const newOrgLib = `${orgLib.organization}_${value}`;
+            if (archDirectories.includes(newOrgLib)) {
+              return `Library ${value} already exists.`;
+            }
+            else {
+              return true;
+            }
+          }
+          else {
+            return true;
+          }
+
+        }
+        else {
+          return 'Only alphanumeric values are allowed, starting with alphabets, no spaces.';
+        }
+      }
+    },
+    {
+      name: 'version',
+      message: 'Enter version ',
+      default: '0.0.1',
+      validate: value => {
+        if (validateSemver(value)) {
+          return true;
+        }
+        return 'Please provide semver compatible version e.g 0.0.1';
+      }
+    },
+    {
+      name: 'permBuild',
+      type: 'confirm',
+      message: `Version to be ${chalk.bold.yellow('PERMANENT')} upon publish `,
+      default: false
+    }
+  ];
+};