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

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>

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>
   );