@pega/custom-dx-components 25.1.13 → 26.1.10-alpha-0.1

package/README.md

@@ -33,7 +33,7 @@ For more info [here](https://pega-dev.zoominsoftware.io/bundle/constellation-dx-
 
 Ensure you have access to the following in your system:
 
-- Pega Infinity Server version 25.1 or later
+- Pega Infinity Server version 26.1 or later
 
 - Git version 2.30 or later
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/custom-dx-components",
-  "version": "25.1.13",
+  "version": "26.1.10-alpha-0.1",
   "description": "Utility for building custom UI components",
   "bin": "./bin/index.js",
   "keywords": [

package/src/cli.js

@@ -19,6 +19,7 @@ import {
   deleteVersion,
   importArchive,
   exportArchive,
+  exportRC,
   importComponent,
   initProject,
   listComponents,
@@ -84,6 +85,7 @@ const TASKS = {
   DELETE_VERSION: 'deleteVersion',
   IMPORT_ARCHIVE: 'importArchive',
   EXPORT_ARCHIVE: 'exportArchive',
+  EXPORT_RC: 'exportRC',
   IMPORT_COMP: 'importComponent',
   AUTHENTICATE: 'authenticate',
   UPGRADE: 'upgrade',
@@ -234,6 +236,10 @@ export default async (args = []) => {
       exportArchive(options);
       break;
     }
+    case TASKS.EXPORT_RC: {
+      exportRC(options);
+      break;
+    }
     case TASKS.IMPORT_COMP: {
       importComponent(options);
       break;
@@ -287,4 +293,4 @@ export default async (args = []) => {
       break;
     }
   }
-};
+}

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

@@ -62,6 +62,13 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = (args: any) => {
         getContextName: () => {
           return 'app/primary_1';
         },
+        getLocalizationService:() => {
+          return {
+            getLocalizedText: (value: any) => {
+              return value;
+            }
+          }
+        },
         getLocalizedValue: (value: any) => {
           return value;
         },

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

@@ -78,8 +78,8 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
 
    // setting up columns for the work list table
   const columns = [
-    { renderer: 'stateName', label: PConnect.getLocalizedValue('State name', '', '') },
-    { renderer: 'stateCode', label: PConnect.getLocalizedValue('State code', '', '') }
+    { renderer: 'stateName', label: PConnect.getLocalizationService().getLocalizedText('State name') },
+    { renderer: 'stateCode', label: PConnect.getLocalizationService().getLocalizedText('State code') }
   ];
 
   // toggle showing table and getting table data
@@ -172,12 +172,12 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
       />
       <Label style={{ margin: '0.1rem' }}>
         {' '}
-        {PConnect.getLocalizedValue('State list for', '', '')}{' '}
-        {PConnect.getLocalizedValue(`${countryCode}`, '', '')}{' '}
+        {PConnect.getLocalizationService().getLocalizedText('State list for')}{' '}
+        {PConnect.getLocalizationService().getLocalizedText(`${countryCode}`)}{' '}
       </Label>
       <Button
         icon
-        label={PConnect.getLocalizedValue('Click to show/hide state list', '', '')}
+        label={PConnect.getLocalizationService().getLocalizedText('Click to show/hide state list')}
         variant='link'
         compact={false}
         onClick={showHideTable}
@@ -202,11 +202,11 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
     </div>
       {showTable && (
         <Table
-          title={PConnect.getLocalizedValue('State list', '', '')}
+          title={PConnect.getLocalizationService().getLocalizedText('State list')}
           columns={columns}
           data={statelist}
           loading={isLoading}
-          loadingMessage={PConnect.getLocalizedValue('Loading state list', '', '')}
+          loadingMessage={PConnect.getLocalizationService().getLocalizedText('Loading state list')}
         />
       )}
 <%={{ }}=%>     {{! revert delimiters for mustache }}

package/src/tasks/create/templates/Constellation/Field/Picklist/demo.stories.tsx.mustache

@@ -31,6 +31,13 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = (args: any) => {
         getStateProps: () => {
           return stateProps;
         },
+        getLocalizationService:() => {
+          return {
+            getLocalizedText: (value: any) => {
+              return value;
+            }
+          }
+        },
         getLocalizedValue: (val: any) => {
           return val;
         },

package/src/tasks/create/templates/Constellation/Field/Picklist/index.tsx.mustache

@@ -94,7 +94,7 @@ const pushPlaceholderOption = (placeholder: string, listSourceItems: Array<any>,
   if (placeholder) {
     items.push(
       <Option key={placeholder} value=''>
-        {pConnect.getLocalizedValue(placeholder)}
+        {pConnect.getLocalizationService().getLocalizedText(placeholder)}
       </Option>
     );
   } else if (!listSourceItems) {
@@ -167,6 +167,8 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   const configProps = pConnect.getConfigProps();
   const items: Array<any> = [];
   const isDatapage = listType === 'datapage';
+  const isDatapageLocale = localeContext === 'datapage';
+
   let listSourceItems = isDatapage ? configProps.listOutput : datasource;
 
   if (isDatapage && typeof datasource === 'object' && !Array.isArray(listSourceItems)) {
@@ -202,17 +204,19 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
     items.push(
       // @ts-ignore
       <Option key={item.key} value={item.key}>
-        {isDatapage
-          ? pConnect.getLocalizedValue(
-              item.text,
-              localePath,
-              pConnect.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName)
-            )
-          : pConnect.getLocalizedValue(
-              item.value,
-              localePath,
-              pConnect.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName)
-            )}
+          {isDatapageLocale
+            ? pConnect
+                .getLocalizationService()
+                .getLocalizedDataPage(
+                  item.value ? item.value.toString() : '',
+                  localeName,
+                  localePath
+                )
+            : pConnect
+                .getLocalizationService(
+                  pConnect.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName)
+                )
+                .getLocalizedText(item.value ? item.value.toString() : '')}
       </Option>
     );
   });

package/src/tasks/create/templates/Constellation/Field/Picklist-Autocomplete/demo.stories.tsx.mustache

@@ -38,6 +38,13 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = (args: any) => {
         getContextName: () => {
           return 'app/primary_1';
         },
+        getLocalizationService:() => {
+          return {
+            getLocalizedText: (value: any) => {
+              return value;
+            }
+          }
+        },
         getLocalizedValue: (val: any) => {
           return val;
         },

package/src/tasks/create/templates/Constellation/Field/Picklist-Autocomplete/index.tsx.mustache

@@ -1128,7 +1128,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
           selected: item.items ? undefined : !!item.selected || item.id === selected?.id
         })),
         onItemClick: selectItem,
-        emptyText: pConn.getLocalizedValue('No items'),
+        emptyText: pConn.getLocalizationService().getLocalizedText('No items'),
         loading,
         loadMore,
         footer: createNewRecord ? (

package/src/tasks/create/templates/Constellation/Field/Picklist-RadioButtons/demo.stories.tsx.mustache

@@ -34,6 +34,13 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = (args: any) => {
         getPageReference: () => {
           return 'caseInfo.content';
         },
+        getLocalizationService:() => {
+          return {
+            getLocalizedText: (value: any) => {
+              return value;
+            }
+          }
+        },
         getLocalizedValue: (val: any) => {
           return val;
         },

package/src/tasks/create/templates/Constellation/Field/Picklist-RadioButtons/index.tsx.mustache

@@ -106,6 +106,8 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
 
   const items: Array<any> = [];
   const isDatapage = listType === 'datapage';
+  const isDatapageLocale = localeContext === 'datapage';
+
   const listSource = isDatapage ? configProps.listOutput : datasource;
   let autoFocusProp = additionalProps?.autoFocus
     ? {
@@ -138,11 +140,19 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
         id={`${fullReference}.${item.key}`}
         value={item.key}
         key={`${fullReference}.${item.key}`}
-        label={pConn.getLocalizedValue(
-          isDatapage ? item.text : item.value,
-          localePath,
-          pConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName)
-        )}
+        label={isDatapageLocale
+            ? pConn
+                .getLocalizationService()
+                .getLocalizedDataPage(
+                  item.value ? item.value.toString() : '',
+                  localeName,
+                  localePath
+                )
+            : pConn
+                .getLocalizationService(
+                  pConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName)
+                )
+                .getLocalizedText(item.value ? item.value.toString() : '')}
         name={fullReference}
       />
     );

package/src/tasks/create/templates/Constellation/Template/PAGE/GetNextWork.tsx.mustache

@@ -38,7 +38,7 @@ export default function GetNextWork(props: {{COMPONENT_CLASS_NAME}}WorkProps) {
 
   return (
     <Button variant={variant} onClick={getNextWork}>
-      {getPConnect().getLocalizedValue('Get next work', '', '')}
+      {getPConnect().getLocalizationService().getLocalizedText('Get next work')}
     </Button>
   );
 }

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

@@ -61,6 +61,13 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = (args: any) => {
         getComponentName: () => {
           return '';
         },
+        getLocalizationService:() => {
+          return {
+            getLocalizedText: (value: any) => {
+              return value;
+            }
+          }
+        },
         getLocalizedValue: (value: any) => {
           return value;
         },

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

@@ -56,6 +56,13 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = (args: any) => {
         getContextName: () => {
           return 'app/primary_1';
         },
+        getLocalizationService:() => {
+          return {
+            getLocalizedText: (value: any) => {
+              return value;
+            }
+          }
+        },
         getLocalizedValue: (value: any) => {
           return value;
         },

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

@@ -26,9 +26,9 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   const context = pConn.getContextName();
 
   const columns = [
-    { renderer: 'date', label: pConn.getLocalizedValue('Date', '', '') },
-    { renderer: 'description', label: pConn.getLocalizedValue('Description', '', '') },
-    { renderer: 'user', label: pConn.getLocalizedValue('Performed by', '','') }
+    { renderer: 'date', label: pConn.getLocalizationService().getLocalizedText('Date') },
+    { renderer: 'description', label: pConn.getLocalizationService().getLocalizedText('Description') },
+    { renderer: 'user', label: pConn.getLocalizationService().getLocalizedText('Performed by') }
   ];
 
   useEffect(() => {
@@ -63,11 +63,11 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
     <Table
-      title={pConn.getLocalizedValue(label, '', '')}
+      title={pConn.getLocalizationService().getLocalizedText(label)}
       columns={columns}
       data={history}
       loading={isLoading}
-      loadingMessage={pConn.getLocalizedValue('Loading case history', '', '')}
+      loadingMessage={pConn.getLocalizationService().getLocalizedText('Loading case history')}
     />
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );

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

@@ -74,6 +74,13 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = (args: any) => {
         getContextName: () => {
           return 'app/primary_1';
         },
+        getLocalizationService:() => {
+          return {
+            getLocalizedText: (value: any) => {
+              return value;
+            }
+          }
+        },
         getLocalizedValue: (value: any) => {
           return value;
         },

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

@@ -36,10 +36,10 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
 
   // setting up columns for the work list table
   const columns = [
-    { renderer: 'caseType', label: PConnect.getLocalizedValue('Case type', '', '') },
-    { renderer: 'insKey', label: PConnect.getLocalizedValue('Key', '', '') },
-    { renderer: 'status', label: PConnect.getLocalizedValue('Status', '', '') },
-    { renderer: 'stage', label: PConnect.getLocalizedValue('Stage', '', '') }
+    { renderer: 'caseType', label: PConnect.getLocalizationService().getLocalizedText('Case type') },
+    { renderer: 'insKey', label: PConnect.getLocalizationService().getLocalizedText('Key') },
+    { renderer: 'status', label: PConnect.getLocalizationService().getLocalizedText('Status') },
+    { renderer: 'stage', label: PConnect.getLocalizationService().getLocalizedText('Stage') }
   ];
 
   const myRef = useRef(null);
@@ -96,11 +96,11 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
     />
     <br />
     <Table
-      title={PConnect.getLocalizedValue('Work list', '', '')}
+      title={PConnect.getLocalizationService().getLocalizedText('Work list')}
       columns={columns}
       data={worklist}
       loading={isLoading}
-      loadingMessage={PConnect.getLocalizedValue('Loading Work list', '', '')}
+      loadingMessage={PConnect.getLocalizationService().getLocalizedText('Loading Work list')}
     />
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );

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

@@ -62,6 +62,13 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = (args: any) => {
         getContextName: () => {
           return 'app/primary_1';
         },
+        getLocalizationService:() => {
+          return {
+            getLocalizedText: (value: any) => {
+              return value;
+            }
+          }
+        },
         getLocalizedValue: (value: any) => {
           return value;
         },

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

@@ -75,8 +75,8 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
 
    // setting up columns for the work list table
   const columns = [
-    { renderer: 'countryName', label: PConnect.getLocalizedValue('Country Name', '', '') },
-    { renderer: 'shortName', label: PConnect.getLocalizedValue('Abbreviation', '', '') }
+    { renderer: 'countryName', label: PConnect.getLocalizationService().getLocalizedText('Country Name') },
+    { renderer: 'shortName', label: PConnect.getLocalizationService().getLocalizedText('Abbreviation') }
   ];
 
   // toggle showing table and getting table data
@@ -171,11 +171,11 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
       />
       <Label style={{ margin: '0.1rem' }}>
         {' '}
-        {PConnect.getLocalizedValue('List of countries', '', '')}{' '}
+        {PConnect.getLocalizationService().getLocalizedText('List of countries')}{' '}
       </Label>
       <Button
         icon
-        label={PConnect.getLocalizedValue('Click to show/hide country list', '', '')}
+        label={PConnect.getLocalizationService().getLocalizedText('Click to show/hide country list')}
         variant='link'
         compact={false}
         onClick={showHideTable}
@@ -200,11 +200,11 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
     </div>
       {showTable && (
         <Table
-          title={PConnect.getLocalizedValue('State list', '', '')}
+          title={PConnect.getLocalizationService().getLocalizedText('State list')}
           columns={columns}
           data={countrylist}
           loading={isLoading}
-          loadingMessage={PConnect.getLocalizedValue('Loading country list', '', '')}
+          loadingMessage={PConnect.getLocalizationService().getLocalizedText('Loading country list')}
         />
       )}
 <%={{ }}=%>     {{! revert delimiters for mustache }}

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

@@ -58,6 +58,13 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = (args: any) => {
         getContextName: () => {
           return 'app/primary_1';
         },
+        getLocalizationService:() => {
+          return {
+            getLocalizedText: (value: any) => {
+              return value;
+            }
+          }
+        },
         getLocalizedValue: (value: any) => {
           return value;
         },

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

@@ -24,9 +24,9 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   const context = pConn.getContextName();
 
   const columns = [
-    { renderer: 'date', label: pConn.getLocalizedValue('Date', '', '') },
-    { renderer: 'description', label: pConn.getLocalizedValue('Description', '', '') },
-    { renderer: 'user', label: pConn.getLocalizedValue('Performed by', '','') }
+    { renderer: 'date', label: pConn.getLocalizationService().getLocalizedText('Date') },
+    { renderer: 'description', label: pConn.getLocalizationService().getLocalizedText('Description') },
+    { renderer: 'user', label: pConn.getLocalizationService().getLocalizedText('Performed by') }
   ];
 
   useEffect(() => {
@@ -61,11 +61,11 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
     <Table
-      title={pConn.getLocalizedValue(label, '', '')}
+      title={pConn.getLocalizationService().getLocalizedText(label)}
       columns={columns}
       data={history}
       loading={isLoading}
-      loadingMessage={pConn.getLocalizedValue('Loading case history', '', '')}
+      loadingMessage={pConn.getLocalizationService().getLocalizedText('Loading case history')}
     />
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );

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

@@ -76,6 +76,13 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = (args: any) => {
         getContextName: () => {
           return 'app/primary_1';
         },
+        getLocalizationService:() => {
+          return {
+            getLocalizedText: (value: any) => {
+              return value;
+            }
+          }
+        },
         getLocalizedValue: (value: any) => {
           return value;
         },

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

@@ -36,10 +36,10 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
 
   // setting up columns for the work list table
   const columns = [
-    { renderer: 'caseType', label: PConnect.getLocalizedValue('Case type', '', '') },
-    { renderer: 'insKey', label: PConnect.getLocalizedValue('Key', '', '') },
-    { renderer: 'status', label: PConnect.getLocalizedValue('Status', '', '') },
-    { renderer: 'stage', label: PConnect.getLocalizedValue('Stage', '', '') }
+    { renderer: 'caseType', label: PConnect.getLocalizationService().getLocalizedText('Case type') },
+    { renderer: 'insKey', label: PConnect.getLocalizationService().getLocalizedText('Key') },
+    { renderer: 'status', label: PConnect.getLocalizationService().getLocalizedText('Status') },
+    { renderer: 'stage', label: PConnect.getLocalizationService().getLocalizedText('Stage') }
   ];
 
   // going to get data for worklist to put into a table
@@ -93,11 +93,11 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
     />
     <br />
     <Table
-      title={PConnect.getLocalizedValue('Work list', '', '')}
+      title={PConnect.getLocalizationService().getLocalizedText('Work list')}
       columns={columns}
       data={worklist}
       loading={isLoading}
-      loadingMessage={PConnect.getLocalizedValue('Loading Work list', '', '')}
+      loadingMessage={PConnect.getLocalizationService().getLocalizedText('Loading Work list')}
     />
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );