@pega/custom-dx-components 0.24.12 → 0.24.14

package/package.json

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

package/src/tasks/build-all/helper.js

@@ -56,11 +56,17 @@ export const zipComponent = async (componentKey) => {
   const srcDirectory = await getComponentDirectoryPath(componentKey);
   const buildDirectory = await path.join(path.resolve(), 'dist/components', componentKey);
   const configJson = `${srcDirectory}/config.json`;
+  const localizationJson = `${srcDirectory}/localizations.json`;
 
   const zip = new AdmZip();
 
   zip.addLocalFolder(srcDirectory, 'src/');
   zip.addLocalFile(configJson);
+
+  if (fs.existsSync(localizationJson)) {
+    zip.addLocalFile(localizationJson);
+  }
+
   zip.addLocalFolder(buildDirectory);
   const zipContent = zip.toBuffer().toString('base64');
 

package/src/tasks/build-comp/helper.js

@@ -46,13 +46,21 @@ export const zipComponent = async (componentKey) => {
   const buildDirectory = await path.join(path.resolve(), 'dist/components', componentKey);
   const configJson = `${srcDirectory}/config.json`;
 
+  const localizationJson = `${srcDirectory}/localizations.json`;
+
   const zip = new AdmZip();
 
   zip.addLocalFolder(srcDirectory, 'src/');
   zip.addLocalFile(configJson);
+
+  if (fs.existsSync(localizationJson)) {
+    zip.addLocalFile(localizationJson);
+  }
+
   zip.addLocalFolder(buildDirectory);
   const zipContent = zip.toBuffer().toString('base64');
 
+
   const configContent = Buffer.from(fs.readFileSync(`${srcDirectory}/config.json`)).toString();
   if (fs.existsSync('dist/components')) {
     fs.rm('dist/components', { recursive: true }, err => {

package/src/tasks/create/templates/Constellation/Template/DETAILS/{DetailsRender.tsx → DetailsRender.tsx.mustache}

@@ -13,7 +13,7 @@ const DetailsRender = (props: DetailsRenderProps) => {
 
   const displayCompArr: ReactElement[] = [];
 
-  Object.values(kids).forEach((value: any) => {
+  Object.values(kids).forEach((value: any, i :number) => {
     const { type } = value.getPConnect().getRawMetadata();
     const { hideLabel, variant, testId, label } = value
       .getPConnect()
@@ -21,6 +21,7 @@ const DetailsRender = (props: DetailsRenderProps) => {
 
     let displayComp;
     const key = JSON.stringify(value.getPConnect());
+    const key1 = key.concat(`-${i}`);
 
     if (type === 'reference') {
       const refElement = value.getPConnect().getComponent();
@@ -30,23 +31,19 @@ const DetailsRender = (props: DetailsRenderProps) => {
       const element = value.getPConnect().getComponent();
       const displayEl = <Fragment key={key}>{element}</Fragment>;
 
-      const fvlStyle = {
-        myColGap: {
-          columnGap: '0'
-        }
-      };
-
-      // const myEl = <div>boo</div>;
+{{! pick new delimiters for mustache }}
+{{=<% %>=}}
       displayComp = (
-        <Fragment key={key}>
+        <Fragment key={key1}>
           <FieldValueList
-            style={fvlStyle.myColGap}
+            style={{ columnGap: '0'}}
             variant={hideLabel ? 'stacked' : variant}
             data-testid={testId}
             fields={[{ id: '1', name: hideLabel ? '' : label, value: displayEl }]}
           />
         </Fragment>
       );
+<%={{ }}=%>     {{! revert delimiters for mustache }}
 
       displayCompArr.push(displayComp);
     }

package/src/tasks/create/templates/Constellation/Template/DETAILS/{HighlightRender.tsx → HighlightRender.tsx.mustache}

@@ -1,10 +1,14 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import React from 'react';
 import { FieldValueList, Text } from '@pega/cosmos-react-core';
+import type { PConnProps } from './PConnProps';
 
-const HighlightRender = (data: any) => {
-  const { getPConnect } = data.props;
-  const { field } = data;
+interface HighlightRenderProps extends PConnProps {
+  field?: any;
+}
+
+const HighlightRender = (props: HighlightRenderProps) => {
+  const { getPConnect, field } = props;
 
   field.config['displayMode'] = 'DISPLAY_ONLY';
 
@@ -16,20 +20,14 @@ const HighlightRender = (data: any) => {
 
   const configProps = getPConnect().resolveConfigProps(field.config);
 
-  // field.config = configProps;
-
+  // @ts-ignore
   const reactField = getPConnect().createComponent(field);
-  // const reactField = field.getPConnect().getComponent();
-
-  const styles = {
-    myWidth: {
-      width: 'auto'
-    }
-  };
 
   return (
+{{! pick new delimiters for mustache }}
+{{=<% %>=}}
     <FieldValueList
-      style={styles.myWidth}
+      style={{ width: 'auto' }}
       variant='stacked'
       data-testid={field.testId}
       fields={[
@@ -44,6 +42,7 @@ const HighlightRender = (data: any) => {
         }
       ]}
     />
+<%={{ }}=%>     {{! revert delimiters for mustache }}
   );
 };
 

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

@@ -20,6 +20,10 @@ const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
 export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
+const Region = props => {
+  return <></>;
+};
+
 const renderField = resolvedProps => {
   const {
     displayAsStatus = false,
@@ -124,20 +128,36 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
         setInheritedProp: () => {
           /* nothing */
         },
-        resolveConfigProps: () => {
-          /* nothing */
+        resolveConfigProps: config => {
+          return config;
         }
       };
     }
   };
 
-  const regionAChildren = pyReviewRaw.children[0].children.map(child => {
-    return props.getPConnect().createComponent(child);
-  });
-
   return (
     <>
-      <{{COMPONENT_CLASS_NAME}} {...props} {...args}>{regionAChildren}</{{COMPONENT_CLASS_NAME}}>
+      <{{COMPONENT_CLASS_NAME}} {...props} {...args}>
+        <Region
+          {...{
+            getPConnect: () => ({
+              setInheritedProp: () => {},
+              getChildren: () =>
+                pyReviewRaw.children[0].children.map((child, index) => {
+                  return {
+                    getPConnect: () => ({
+                      getRawMetadata: () => pyReviewRaw.children[0].children[index],
+                      getConfigProps: () => {},
+                      resolveConfigProps: () => regionChildrenResolved[index],
+                      getComponent: config =>
+                        props.getPConnect().createComponent(pyReviewRaw.children[0].children[index])
+                    })
+                  };
+                })
+            })
+          }}
+        />
+      </{{COMPONENT_CLASS_NAME}}>
     </>
   );
 };

package/src/tasks/create/templates/Constellation/Template/DETAILS/index.tsx.mustache

@@ -1,10 +1,10 @@
-import { Fragment } from 'react';
-import { Grid, Flex, FieldGroup, withConfiguration } from '@pega/cosmos-react-core';
+import { Fragment, Children, ReactElement } from 'react';
+import { Grid, Flex, FieldGroup, withConfiguration, GridContainerProps } from '@pega/cosmos-react-core';
 import type { PConnFieldProps } from './PConnProps';
 import DetailsRender from './DetailsRender';
 import HighlightRender from './HighlightRender';
 
-import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
+import Styled{{COMPONENT_CLASS_NAME}}Wrapper, { StyledDetailsGridContainer, StyledHighlightedFieldsHrLine } from './styles';
 
 // includes in bundle
 import { getAllFields } from './utils';
@@ -21,33 +21,30 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
 // any default values in config.pros should be set in defaultProps at bottom of this file
 function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
 
-  const { getPConnect, children, label, showLabel = true, showHighlightedData = false  } = props;
+  const { getPConnect, label, showLabel = true, showHighlightedData = false  } = props;
   const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
 
-  // update children with readonly
-  // eslint-disable-next-line guard-for-in
-  for (const index in children) {
-    const kid = children[index];
-    kid.props.getPConnect().setInheritedProp('readOnly', true);
-    kid.props.getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
+  // storybook doesn't get children of 1 as an array of 1
+  let { children } = props;
+  if (!Array.isArray(children)) {
+    children = Children.toArray(children);
   }
 
+  // update children with readonly
+  Children.toArray(children).forEach(child => {
+    // @ts-ignore
+    child.props.getPConnect().setInheritedProp('readOnly', true);
+    // @ts-ignore
+    child.props.getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
+  });
+
   const numRegions = getAllFields(getPConnect)?.length;
   const gridRepeat = "repeat(".concat(numRegions).concat(", 1fr)");
-  const gridContainer = { colGap: 0, 'margin-line-start': 0 };
-  // @ts-ignore
+
+  const gridContainer: GridContainerProps = { colGap: 0 };
   gridContainer.cols = gridRepeat;
-  // @ts-ignore
   gridContainer.alignItems = 'start';
 
-  const gridHighlightContainer = { "gap": 2};
-  // @ts-ignore
-  gridHighlightContainer.cols = gridRepeat;
-  // @ts-ignore
-  gridHighlightContainer.alignItems = 'flex-start';
-  // @ts-ignore
-  gridHighlightContainer.pad = [0, 0, 2, 0];
-
   // Set up highlighted data to pass in return if is set to show, need raw metadata to pass to createComponent
   let highlightedDataArr = [];
   if (showHighlightedData) {
@@ -55,17 +52,10 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
     const { highlightedData = [] } = getPConnect().getRawMetadata().config;
     // @ts-ignore
     highlightedDataArr = highlightedData.map((field) => {
-
-    return <HighlightRender field={field} props={props} />;
+      return <HighlightRender field={field} getPConnect={props.getPConnect} />;
     });
   }
 
-  const hrStyle = {
-    line: {
-      margin: '0.75rem 0',
-      opacity: '50%'
-    }
-  };
 
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
@@ -79,15 +69,18 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
               container={{ direction: 'row', alignItems: 'normal', colGap: 10 }}
               data-testid={`highlighted-column-count-${numRegions}`}
             >
-              {highlightedDataArr.map((child: any, i: number) => (
+              {highlightedDataArr.map((child: ReactElement, i: number) => (
                 <Fragment key={`hf-${i + 1}`}>{child}</Fragment>
               ))}
             </Flex>
-            <hr style={hrStyle.line} />
+            <StyledHighlightedFieldsHrLine />
           </>
       )}
-      <Grid container={gridContainer} data-testid={`column-count-${numRegions}`} >
-       {children.map((child: any, i: number) => (
+      <Grid
+        as={StyledDetailsGridContainer}
+        container={gridContainer}
+        data-testid={`column-count-${numRegions}`} >
+       {children.map((child: ReactElement, i: number) => (
 
         <Flex
             // @ts-ignore

package/src/tasks/create/templates/Constellation/Template/DETAILS/mock.ts.mustache

@@ -17,7 +17,7 @@ export const pyReviewRaw = {
         config: {
           value: '@P .pyStatusWork',
           label: '@L Work Status',
-          displayMode: 'STACKED_LARGE_VAL',
+          hideLabel: true,
           displayAsStatus: true,
           key: 'pyStatusWork'
         }
@@ -27,7 +27,7 @@ export const pyReviewRaw = {
         config: {
           value: '@P .pyID',
           label: '@L Case ID',
-          displayMode: 'STACKED_LARGE_VAL',
+          hideLabel: true,
           key: 'pyID'
         }
       },
@@ -36,7 +36,7 @@ export const pyReviewRaw = {
         config: {
           value: '@P .pxCreateDateTime',
           label: '@L Create date/time',
-          displayMode: 'STACKED_LARGE_VAL',
+          hideLabel: true,
           key: 'pxCreateDateTime'
         }
       },
@@ -44,9 +44,9 @@ export const pyReviewRaw = {
         type: 'UserReference',
         config: {
           label: '@L Create Operator',
+          hideLabel: true,
           value: '@USER .pxCreateOperator',
           placeholder: 'Select...',
-          displayMode: 'STACKED_LARGE_VAL',
           key: 'pxCreateOperator'
         }
       }
@@ -120,7 +120,6 @@ export const pyReviewResolved = {
       config: {
         value: 'New',
         label: 'Work Status',
-        displayMode: 'STACKED_LARGE_VAL',
         displayAsStatus: true
       }
     },
@@ -128,16 +127,14 @@ export const pyReviewResolved = {
       type: 'TextInput',
       config: {
         value: 'M-1002',
-        label: 'Case ID',
-        displayMode: 'STACKED_LARGE_VAL'
+        label: 'Case ID'
       }
     },
     {
       type: 'DateTime',
       config: {
         value: '2022-12-11T20:06:27.232Z',
-        label: 'Create date/time',
-        displayMode: 'STACKED_LARGE_VAL'
+        label: 'Create date/time'
       }
     },
     {
@@ -148,8 +145,7 @@ export const pyReviewResolved = {
           userId: 'conns',
           userName: 'Sara Connor'
         },
-        placeholder: 'Select...',
-        displayMode: 'STACKED_LARGE_VAL'
+        placeholder: 'Select...'
       }
     }
   ],
@@ -159,22 +155,25 @@ export const pyReviewResolved = {
 export const regionChildrenResolved = [
   {
     readOnly: true,
-    value: '',
+    value: 'Deadline',
     label: 'SLA Deadline',
+    hideLabel: true,
     displayMode: 'LABELS_LEFT',
     key: 'SLA Deadline'
   },
   {
     readOnly: true,
-    value: '',
+    value: 'Goal',
     label: 'SLA Goal',
+    hideLabel: true,
     displayMode: 'LABELS_LEFT',
     key: 'SLA Goal'
   },
   {
     readOnly: true,
-    value: '',
+    value: 'Start Time',
     label: 'SLA Start Time',
+    hideLabel: true,
     listType: 'associated',
     datasource: [
       {

package/src/tasks/create/templates/Constellation/Template/DETAILS/styles.ts.mustache

@@ -6,3 +6,19 @@ export default styled.div(() => {
     margin: 0px 0;
   `;
 });
+
+export const StyledDetailsGridContainer = styled.div(() => {
+  return css`
+    margin-line-start: 1;
+  `;
+});
+
+
+export const StyledHighlightedFieldsHrLine = styled.hr(() => {
+  return css`
+    line: {
+      margin: '0.75rem 0';
+      opacity: '50%'
+    }
+  `;
+});

package/src/tasks/create/templates/Constellation/Template/DETAILS-region/{DetailsRender.tsx → DetailsRender.tsx.mustache}

@@ -13,7 +13,7 @@ const DetailsRender = (props: DetailsRenderProps) => {
 
   const displayCompArr: ReactElement[] = [];
 
-  Object.values(kids).forEach((value: any) => {
+  Object.values(kids).forEach((value: any, i :number) => {
     const { type } = value.getPConnect().getRawMetadata();
     const { hideLabel, variant, testId, label } = value
       .getPConnect()
@@ -21,6 +21,7 @@ const DetailsRender = (props: DetailsRenderProps) => {
 
     let displayComp;
     const key = JSON.stringify(value.getPConnect());
+    const key1 = key.concat(`-${i}`);
 
     if (type === 'reference') {
       const refElement = value.getPConnect().getComponent();
@@ -30,23 +31,19 @@ const DetailsRender = (props: DetailsRenderProps) => {
       const element = value.getPConnect().getComponent();
       const displayEl = <Fragment key={key}>{element}</Fragment>;
 
-      const fvlStyle = {
-        myColGap: {
-          columnGap: '0'
-        }
-      };
-
-      // const myEl = <div>boo</div>;
+{{! pick new delimiters for mustache }}
+{{=<% %>=}}
       displayComp = (
-        <Fragment key={key}>
+        <Fragment key={key1}>
           <FieldValueList
-            style={fvlStyle.myColGap}
+            style={{ columnGap: '0'}}
             variant={hideLabel ? 'stacked' : variant}
             data-testid={testId}
             fields={[{ id: '1', name: hideLabel ? '' : label, value: displayEl }]}
           />
         </Fragment>
       );
+<%={{ }}=%>     {{! revert delimiters for mustache }}
 
       displayCompArr.push(displayComp);
     }

package/src/tasks/create/templates/Constellation/Template/DETAILS-region/{HighlightRender.tsx → HighlightRender.tsx.mustache}

@@ -1,10 +1,14 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import React from 'react';
 import { FieldValueList, Text } from '@pega/cosmos-react-core';
+import type { PConnProps } from './PConnProps';
 
-const HighlightRender = (data: any) => {
-  const { getPConnect } = data.props;
-  const { field } = data;
+interface HighlightRenderProps extends PConnProps {
+  field?: any;
+}
+
+const HighlightRender = (props: HighlightRenderProps) => {
+  const { getPConnect, field } = props;
 
   field.config['displayMode'] = 'DISPLAY_ONLY';
 
@@ -16,20 +20,14 @@ const HighlightRender = (data: any) => {
 
   const configProps = getPConnect().resolveConfigProps(field.config);
 
-  // field.config = configProps;
-
+  // @ts-ignore
   const reactField = getPConnect().createComponent(field);
-  // const reactField = field.getPConnect().getComponent();
-
-  const styles = {
-    myWidth: {
-      width: 'auto'
-    }
-  };
 
   return (
+{{! pick new delimiters for mustache }}
+{{=<% %>=}}
     <FieldValueList
-      style={styles.myWidth}
+      style={{ width: 'auto' }}
       variant='stacked'
       data-testid={field.testId}
       fields={[
@@ -44,6 +42,7 @@ const HighlightRender = (data: any) => {
         }
       ]}
     />
+<%={{ }}=%>     {{! revert delimiters for mustache }}
   );
 };
 

package/src/tasks/create/templates/Constellation/Template/DETAILS-region/demo.stories.tsx.mustache

@@ -18,6 +18,11 @@ const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
 
 export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
+
+const Region = props => {
+  return <></>;
+};
+
 const renderField = resolvedProps => {
   const {
     displayAsStatus = false,
@@ -122,24 +127,54 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
         setInheritedProp: () => {
           /* nothing */
         },
-        resolveConfigProps: () => {
-          /* nothing */
+        resolveConfigProps: config => {
+          return config;
         }
       };
     }
   };
 
-  const regionAChildren = pyReviewRaw.children[0].children.map(child => {
-    return props.getPConnect().createComponent(child);
-  });
-  const regionBChildren = pyReviewRaw.children[1].children.map(child => {
-    return props.getPConnect().createComponent(child);
-  });
 
   return (
     <{{COMPONENT_CLASS_NAME}} {...props} {...args}>
-      {regionAChildren}
-      {regionBChildren}
+        <Region
+          {...{
+            getPConnect: () => ({
+              setInheritedProp: () => {},
+              getChildren: () =>
+                pyReviewRaw.children[0].children.map((child, index) => {
+                  return {
+                    getPConnect: () => ({
+                      getRawMetadata: () => pyReviewRaw.children[0].children[index],
+                      getConfigProps: () => {},
+                      resolveConfigProps: () => regionChildrenResolved[index],
+                      getComponent: config =>
+                        props.getPConnect().createComponent(pyReviewRaw.children[0].children[index])
+                    })
+                  };
+                })
+            })
+          }}
+        />
+        <Region
+          {...{
+            getPConnect: () => ({
+              setInheritedProp: () => {},
+              getChildren: () =>
+                pyReviewRaw.children[1].children.map((child, index) => {
+                  return {
+                    getPConnect: () => ({
+                      getRawMetadata: () => pyReviewRaw.children[1].children[index],
+                      getConfigProps: () => {},
+                      resolveConfigProps: () => regionChildrenResolved[index],
+                      getComponent: config =>
+                        props.getPConnect().createComponent(pyReviewRaw.children[1].children[index])
+                    })
+                  };
+                })
+            })
+          }}
+        />
     </{{COMPONENT_CLASS_NAME}}>
   );
 };