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

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

@@ -112,7 +112,7 @@ const {{COMPONENT_CLASS_NAME}} = props => {
       }
     }
 
-    {{! pick new delimiteres for mustache }}
+    {{! pick new delimiters for mustache }}
     {{=<% %>=}}
 
     const displayComp =
@@ -141,7 +141,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/Integer/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/Picklist/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/Text/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/Text-Email/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/Text-Input/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/Text-Paragraph/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/Text-Phone/index.jsx.mustache

@@ -14,7 +14,6 @@ import handleEvent from "./event-utils";
 import { suggestionsHandler } from './suggestions-handler';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
-import { } from "@pega/cosmos-react-core";
 
 export const formatExists = (formatterVal) => {
     const formatterValues = [

package/src/tasks/create/templates/Constellation/field/Text-Phone/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/Text-URL/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/TimeOfDay/styles.js.mustache

@@ -0,0 +1,14 @@
+// utilizing theming, comment out, if want individual style
+import styled from 'styled-components';
+import { Configuration } from '@pega/cosmos-react-core';
+
+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/{TimeofDay → TimeOfDay}/time-of-day.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/template/DETAILS/demo.stories.jsx.mustache

@@ -14,6 +14,7 @@ const renderField = resolvedProps => {
     displayMode,
     value = '',
     label = '',
+    key,
     // eslint-disable-next-line react-hooks/rules-of-hooks
     theme = useTheme()
   } = resolvedProps;
@@ -22,7 +23,7 @@ const renderField = resolvedProps => {
 
   let val =
     value !== '' ? (
-      <Text variant='h1' as='span'>
+      <Text variant='h1' as='span' key={key}>
         {value}
       </Text>
     ) : (
@@ -30,13 +31,22 @@ const renderField = resolvedProps => {
     );
 
   if (label === 'Create date/time')
-    val = <DateTimeDisplay value={value} variant='datetime' format='long' clockFormat={null} />;
+    val = (
+      <DateTimeDisplay
+        value={value}
+        variant='datetime'
+        format='long'
+        clockFormat={null}
+        key={key}
+      />
+    );
 
-  if (displayAsStatus === true) val = <StatusWorkRenderer value={value} />;
+  if (displayAsStatus === true) val = <StatusWorkRenderer value={value} key={key} />;
 
   if (label === 'Create Operator')
     val = (
       <Button
+        key={key}
         variant='link'
         style={
           label !== null
@@ -49,15 +59,19 @@ const renderField = resolvedProps => {
     );
 
   if (variant === 'inline') {
-    val = value || <span aria-hidden='true'>&ndash;&ndash;</span>;
+    val = value || (
+      <span aria-hidden='true' key={key}>
+        &ndash;&ndash;
+      </span>
+    );
   } else {
     val = (
-      <Text variant='h1' as='span'>
+      <Text variant='h1' as='span' key={key}>
         {val}
       </Text>
     );
   }
-  return <FieldValueList variant={variant} fields={[{ name: label, value: val }]} />;
+  return <FieldValueList variant={variant} fields={[{ name: label, value: val }]} key={key} />;
 };
 
 export const base{{COMPONENT_CLASS_NAME}} = () => {

package/src/tasks/create/templates/Constellation/template/DETAILS/index.jsx.mustache

@@ -46,7 +46,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
 
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-    {{! pick new delimiteres for mustache }}
+    {{! pick new delimiters for mustache }}
     {{=<% %>=}}
     <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
       {showHighlightedData && highlightedDataArr.length > 0 && (
@@ -65,7 +65,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
        ))}
       </Grid>
     </FieldGroup>
-    <%={{ }}=%>     {{! revert delimiteres for mustache }}
+    <%={{ }}=%>     {{! revert delimiters for mustache }}
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 

package/src/tasks/create/templates/Constellation/template/DETAILS/mock.stories.js.mustache

@@ -15,7 +15,8 @@ export const pyReviewRaw = {
           value: '@P .pyStatusWork',
           label: '@L Work Status',
           displayMode: 'STACKED_LARGE_VAL',
-          displayAsStatus: true
+          displayAsStatus: true,
+          key: 'pyStatusWork'
         }
       },
       {
@@ -23,7 +24,8 @@ export const pyReviewRaw = {
         config: {
           value: '@P .pyID',
           label: '@L Case ID',
-          displayMode: 'STACKED_LARGE_VAL'
+          displayMode: 'STACKED_LARGE_VAL',
+          key: 'pyID'
         }
       },
       {
@@ -31,7 +33,8 @@ export const pyReviewRaw = {
         config: {
           value: '@P .pxCreateDateTime',
           label: '@L Create date/time',
-          displayMode: 'STACKED_LARGE_VAL'
+          displayMode: 'STACKED_LARGE_VAL',
+          key: 'pxCreateDateTime'
         }
       },
       {
@@ -40,7 +43,8 @@ export const pyReviewRaw = {
           label: '@L Create Operator',
           value: '@USER .pxCreateOperator',
           placeholder: 'Select...',
-          displayMode: 'STACKED_LARGE_VAL'
+          displayMode: 'STACKED_LARGE_VAL',
+          key: 'pxCreateOperator'
         }
       }
     ],
@@ -72,14 +76,16 @@ export const pyReviewRaw = {
           config: {
             value: '@P .pySLADeadline',
             label: '@L SLA Deadline'
-          }
+          },
+          key: '1'
         },
         {
           type: 'DateTime',
           config: {
             value: '@P .pySLAGoal',
             label: '@L SLA Goal'
-          }
+          },
+          key: '2'
         },
         {
           type: 'RadioButtons',
@@ -88,7 +94,8 @@ export const pyReviewRaw = {
             label: '@L SLA Start Time',
             listType: 'associated',
             datasource: '@ASSOCIATED .pySLAStartTime'
-          }
+          },
+          key: '3'
         }
       ]
     }
@@ -151,13 +158,15 @@ export const regionChildrenResolved = [
     readOnly: true,
     value: '',
     label: 'SLA Deadline',
-    displayMode: 'LABELS_LEFT'
+    displayMode: 'LABELS_LEFT',
+    key: 'SLA Deadline'
   },
   {
     readOnly: true,
     value: '',
     label: 'SLA Goal',
-    displayMode: 'LABELS_LEFT'
+    displayMode: 'LABELS_LEFT',
+    key: 'SLA Goal'
   },
   {
     readOnly: true,
@@ -174,6 +183,7 @@ export const regionChildrenResolved = [
         value: 'Current Date Time'
       }
     ],
-    displayMode: 'LABELS_LEFT'
+    displayMode: 'LABELS_LEFT',
+    key: 'SLA Start Time'
   }
 ];

package/src/tasks/create/templates/Constellation/template/DETAILS/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/DETAILS-region/demo.stories.jsx.mustache

@@ -14,6 +14,7 @@ const renderField = resolvedProps => {
     displayMode,
     value = '',
     label = '',
+    key,
     // eslint-disable-next-line react-hooks/rules-of-hooks
     theme = useTheme()
   } = resolvedProps;
@@ -22,7 +23,7 @@ const renderField = resolvedProps => {
 
   let val =
     value !== '' ? (
-      <Text variant='h1' as='span'>
+      <Text variant='h1' as='span' key={key}>
         {value}
       </Text>
     ) : (
@@ -30,9 +31,17 @@ const renderField = resolvedProps => {
     );
 
   if (label === 'Create date/time')
-    val = <DateTimeDisplay value={value} variant='datetime' format='long' clockFormat={null} />;
+    val = (
+      <DateTimeDisplay
+        value={value}
+        variant='datetime'
+        format='long'
+        clockFormat={null}
+        key={key}
+      />
+    );
 
-  if (displayAsStatus === true) val = <StatusWorkRenderer value={value} />;
+  if (displayAsStatus === true) val = <StatusWorkRenderer value={value} key={key} />;
 
   if (label === 'Create Operator')
     val = (
@@ -43,24 +52,28 @@ const renderField = resolvedProps => {
             ? { width: 'max-content', height: theme.components.input.height }
             : undefined
         }
+        key={key}
       >
         {value.userName}
       </Button>
     );
 
   if (variant === 'inline') {
-    val = value || <span aria-hidden='true'>&ndash;&ndash;</span>;
+    val = value || (
+      <span aria-hidden='true' key={key}>
+        &ndash;&ndash;
+      </span>
+    );
   } else {
     val = (
-      <Text variant='h1' as='span'>
+      <Text variant='h1' as='span' key={key}>
         {val}
       </Text>
     );
   }
-  return <FieldValueList variant={variant} fields={[{ name: label, value: val }]} />;
+  return <FieldValueList variant={variant} fields={[{ name: label, value: val }]} key={key} />;
 };
 
-
 export const base{{COMPONENT_CLASS_NAME}} = () => {
   const props = {
     template: 'MyCo_MyComponents_NewDetailsTemplate',

package/src/tasks/create/templates/Constellation/template/DETAILS-region/index.jsx.mustache

@@ -46,7 +46,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
 
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-    {{! pick new delimiteres for mustache }}
+    {{! pick new delimiters for mustache }}
     {{=<% %>=}}
     <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
       {showHighlightedData && highlightedDataArr.length > 0 && (
@@ -65,7 +65,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
        ))}
       </Grid>
     </FieldGroup>
-    <%={{ }}=%>     {{! revert delimiteres for mustache }}
+    <%={{ }}=%>     {{! revert delimiters for mustache }}
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );