@pega/dx-component-builder-sdk 24.1.10 → 24.1.11

package/tests/assets/sdk-a/components/createAll/custom-constellation/field/Pega_DXIL_MyCurrency/demo.stories.tsx

@@ -1,33 +1,27 @@
 
 /* eslint-disable react/jsx-no-useless-fragment */
 // @ts-nocheck
-import { withKnobs } from '@storybook/addon-knobs';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { configProps, fieldMetadata, stateProps } from './mock';
 
 import PegaDxilMyCurrency from './index';
 
-export default {
+const meta: Meta<typeof PegaDxilMyCurrency> = {
   title: 'PegaDxilMyCurrency',
-  decorators: [withKnobs],
-  component: PegaDxilMyCurrency
+  component: PegaDxilMyCurrency,
+  excludeStories: /.*Data$/
 };
 
-export const BasePegaDxilMyCurrency = () => {
+export default meta;
+type Story = StoryObj<typeof PegaDxilMyCurrency>;
+
+export const BasePegaDxilMyCurrency: Story = args => {
 
   const props = {
     value: Number(configProps.value),
-    placeholder: configProps.placeholder,
-    label: configProps.label,
-    helperText: configProps.helperText,
-    showGroupSeparators: configProps.showGroupSeparators,
-    allowDecimals: configProps.allowDecimals,
-    currencyISOCode: configProps.currencyISOCode,
-    alwaysShowISOCode: configProps.alwaysShowISOCode,
     hasSuggestions: configProps.hasSuggestions,
-    testId: configProps.testId,
     fieldMetadata,
-
     getPConnect: () => {
       return {
         getStateProps: () => {
@@ -50,7 +44,26 @@ export const BasePegaDxilMyCurrency = () => {
 
   return (
     <>
-      <PegaDxilMyCurrency {...props} />
+      <PegaDxilMyCurrency {...props} {...args} />
     </>
   );
 };
+
+BasePegaDxilMyCurrency.args = {
+  label: configProps.label,
+  placeholder: configProps.placeholder,
+  helperText: configProps.helperText,
+  showGroupSeparators: configProps.showGroupSeparators,
+  allowDecimals: configProps.allowDecimals,
+  currencyISOCode: configProps.currencyISOCode,
+  alwaysShowISOCode: configProps.alwaysShowISOCode,
+  testId: configProps.testId,
+  readOnly: configProps.readOnly,
+  disabled: configProps.disabled,
+  required: configProps.required,
+  status: configProps.status,
+  hideLabel: configProps.hideLabel,
+  displayMode: configProps.displayMode,
+  variant: configProps.variant,
+  validatemessage: configProps.validatemessage
+};

package/tests/assets/sdk-a/components/createAll/custom-constellation/field/Pega_DXIL_MyCurrency/index.tsx

@@ -6,11 +6,13 @@ import {
   NumberDisplay,
   FieldValueList,
   Text,
-  useAfterInitialEffect
+  useAfterInitialEffect,
+  withConfiguration
 } from '@pega/cosmos-react-core';
-import PropTypes from 'prop-types';
+
 
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 // includes in bundle
 import handleEvent from './event-utils';
@@ -30,7 +32,6 @@ interface PegaDxilMyCurrencyProps extends PConnFieldProps {
   allowDecimals: boolean;
   currencyISOCode: string;
   alwaysShowISOCode: boolean;
-  isoCodeSelection: string;
   additionalProps: any;
   showGroupSeparators: boolean;
   currencyDisplay: 'symbol' | 'code' | 'name' | undefined;
@@ -56,36 +57,37 @@ const formatValue = (value: any) => {
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
 // any default values in config.pros should be set in defaultProps at bottom of this file
-export default function PegaDxilMyCurrency(props: PegaDxilMyCurrencyProps) {
+function PegaDxilMyCurrency(props: PegaDxilMyCurrencyProps) {
   const {
     getPConnect,
-    value,
+    value = 0,
     placeholder,
     validatemessage,
     label,
-    hideLabel,
+    hideLabel = false,
     helperText,
     testId,
-    allowDecimals,
-    currencyISOCode,
-    alwaysShowISOCode,
+    allowDecimals = true,
+    currencyISOCode = 'USD',
+    alwaysShowISOCode = false,
     displayMode,
-    additionalProps,
+    additionalProps = {},
     variant,
-    formatter,
-    negative,
-    notation,
-    isTableFormatter,
-    hasSuggestions
+    formatter = 'defaultCurrency',
+    negative = 'minus-sign',
+    notation = 'standard',
+    isTableFormatter = false,
+    hasSuggestions = false
   } = props;
-  let { currencyDisplay } = props;
+  let { currencyDisplay = 'symbol' } = props;
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
   const stateProps = pConn.getStateProps() as StateProps;
   const propName: string = stateProps.value;
   const [currencyValue, setCurrencyValue] = useState(() => formatValue(value));
 
-  let { readOnly, required, disabled } = props;
+  let { readOnly = false, required = false, disabled = false } = props;
+  let { showGroupSeparators = false } = props;
 
   [readOnly, required, disabled] = [readOnly, required, disabled].map(
     (prop) => prop === true || (typeof prop === 'string' && prop === 'true')
@@ -108,7 +110,7 @@ export default function PegaDxilMyCurrency(props: PegaDxilMyCurrencyProps) {
     setCurrencyValue(formatValue(value));
   }, [value]);
 
-  const { decimalPrecision, currencyDecimalPrecision } = props;
+  const { decimalPrecision, currencyDecimalPrecision = 'auto' } = props;
   let noOfDecimals: number = parseInt(decimalPrecision, 10);
   if (Number.isNaN(noOfDecimals)) noOfDecimals = 0;
   let noOfFractionDigits =
@@ -120,7 +122,7 @@ export default function PegaDxilMyCurrency(props: PegaDxilMyCurrencyProps) {
     displayMode === 'DISPLAY_ONLY'
   ) {
     let displayComp;
-    let { showGroupSeparators } = props;
+    // let { showGroupSeparators = false } = props;
     if (displayMode === 'LABELS_LEFT' && isTableFormatter) {
       noOfFractionDigits = undefined;
       showGroupSeparators = true;
@@ -188,7 +190,7 @@ export default function PegaDxilMyCurrency(props: PegaDxilMyCurrencyProps) {
 
     switch (displayMode) {
       case 'DISPLAY_ONLY': {
-        return (<StyledPegaDxilMyCurrencyWrapper> displayComp </StyledPegaDxilMyCurrencyWrapper>) ;
+        return (<StyledPegaDxilMyCurrencyWrapper> {displayComp} </StyledPegaDxilMyCurrencyWrapper>) ;
       }
       case 'LABELS_LEFT': {
         return (
@@ -242,6 +244,7 @@ export default function PegaDxilMyCurrency(props: PegaDxilMyCurrencyProps) {
       showDecimal={allowDecimals}
       currencyISOCode={currencyISOCode}
       alwaysShowISOCode={alwaysShowISOCode}
+      showGroupSeparators={showGroupSeparators}
       placeholder={placeholder}
       disabled={disabled}
       readOnly={readOnly}
@@ -274,60 +277,6 @@ export default function PegaDxilMyCurrency(props: PegaDxilMyCurrencyProps) {
   );
 }
 
-PegaDxilMyCurrency.defaultProps = {
-  value: 0,
-  placeholder: '',
-  validatemessage: '',
-  helperText: '',
-  hideLabel: false,
-  disabled: false,
-  readOnly: false,
-  required: false,
-  decimalPrecision: null,
-  allowDecimals: true,
-  currencyISOCode: 'USD',
-  isoCodeSelection: 'constant',
-  testId: '',
-  displayMode: null,
-  additionalProps: {},
-  variant: 'inline',
-  showGroupSeparators: false,
-  formatter: 'defaultCurrency',
-  currencyDisplay: 'symbol',
-  negative: 'minus-sign',
-  notation: 'standard',
-  currencyDecimalPrecision: 'auto',
-  isTableFormatter: false,
-  alwaysShowISOCode: false,
-  hasSuggestions: false
-};
 
-PegaDxilMyCurrency.propTypes = {
-  value: PropTypes.number,
-  placeholder: PropTypes.string,
-  label: PropTypes.string.isRequired,
-  decimalPrecision: PropTypes.number,
-  allowDecimals: PropTypes.bool,
-  currencyISOCode: PropTypes.string,
-  isoCodeSelection: PropTypes.string,
-  hideLabel: PropTypes.bool,
-  getPConnect: PropTypes.func.isRequired,
-  validatemessage: PropTypes.string,
-  helperText: PropTypes.string,
-  disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  readOnly: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  required: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  testId: PropTypes.string,
-  displayMode: PropTypes.string,
-  additionalProps: PropTypes.objectOf(PropTypes.any),
-  variant: PropTypes.string,
-  showGroupSeparators: PropTypes.bool,
-  formatter: PropTypes.string,
-  currencyDisplay: PropTypes.string,
-  negative: PropTypes.string,
-  notation: PropTypes.string,
-  currencyDecimalPrecision: PropTypes.string,
-  isTableFormatter: PropTypes.bool,
-  alwaysShowISOCode: PropTypes.bool,
-  hasSuggestions: PropTypes.bool
-};
+
+export default withConfiguration(PegaDxilMyCurrency);

package/tests/assets/sdk-a/components/createAll/custom-constellation/field/Pega_DXIL_MyCurrency/mock.ts

@@ -3,13 +3,23 @@
 export const configProps = {
   value: '',
   label: 'Currency Sample',
+  placeholder: 'Currency Placeholder',
   currencyISOCode: 'USD',
   allowDecimals: true,
+  showGroupSeparators: true,
   alwaysShowISOCode: true,
   placeholder: 'Currency Placeholder',
   helperText: 'Currency Helper Text',
   testId: 'currency-12345678',
-  hasSuggestions: false
+  hasSuggestions: false,
+  displayMode: '',
+  variant: '',
+  hideLabel: false,
+  readOnly: false,
+  required: false,
+  disabled: false,
+  status: '',
+  validatemessage: ''
 };
 
 export const stateProps = {

package/tests/assets/sdk-a/components/createAll/custom-constellation/field/Pega_DXIL_MyCurrency/styles.ts

@@ -1,15 +1,8 @@
-
-// 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;
-//  `;
-// });
+import styled, { css } from 'styled-components';
+
+export default styled.div(() => {
+  return css`
+    margin: 0px 0;
+  `;
+});

package/tests/assets/sdk-a/components/createAll/custom-constellation/field/Pega_DXIL_MyDate/{DateFormatter.js → DateFormatter.ts}

@@ -15,8 +15,8 @@ const types = ['fromNow', 'customFormat'];
 
 // value should be in ISO 8601 format.
 function DateFormatter(
-  value,
-  { type = types[1], format = "DD/MM/YYYY", tzone } = {}
+  value: any,
+  { type = types[1], format = "DD/MM/YYYY", tzone = null } = {}
 ) {
   if (!value) return value;
   switch (type) {
@@ -31,7 +31,7 @@ function DateFormatter(
 }
 
 // value should be in hh:mm:ss format (00:00:00 - 23:59:59).
-function TimeFormatter(value, options) {
+function TimeFormatter(value: any, options: any) {
   if (!value) return value;
   const { locale = "en-US" } = options;
   const timeOnlyRegex = /^(?:[01]\d|2[0123]):(?:[012345]\d):(?:[012345]\d)$/;
@@ -49,10 +49,10 @@ function TimeFormatter(value, options) {
 }
 
 export default {
-  Date: (value, options) => DateFormatter(value, { type: 'customFormat', ...options }),
-  'Date-Time-Default': (value, options) =>
+  Date: (value: any, options: any) => DateFormatter(value, { type: 'customFormat', ...options }),
+  'Date-Time-Default': (value: any, options: any) =>
     DateFormatter(value, { ...options, type: 'customFormat', format: 'lll' }),
-  'Time-Default': (value, options) =>
+  'Time-Default': (value: any, options: any) =>
     TimeFormatter(value, {
       ...options,
       type: 'customFormat',

package/tests/assets/sdk-a/components/createAll/custom-constellation/field/Pega_DXIL_MyDate/FormattedText.tsx

@@ -0,0 +1,20 @@
+import { FieldValueList } from '@pega/cosmos-react-core';
+
+import { format } from './date';
+
+export default function FormattedText(props: any) {
+  const { formatType = 'none', label, value, testId, hideLabel, variant = 'stacked', additionalProps = {} } = props;
+
+  let text = value;
+
+  text = format(text, formatType, additionalProps);
+
+  const fields = [
+    {
+      id: label.toLowerCase(),
+      name: hideLabel ? '' : label,
+      value: text
+    }
+  ];
+  return <FieldValueList variant={variant} fields={fields} data-testid={testId} />;
+}

package/tests/assets/sdk-a/components/createAll/custom-constellation/field/Pega_DXIL_MyDate/create-nonce.ts

@@ -0,0 +1,5 @@
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/tests/assets/sdk-a/components/createAll/custom-constellation/field/Pega_DXIL_MyDate/{date.js → date.ts}

@@ -1,6 +1,6 @@
-/* eslint-disable no-undef */
+// @ts-nocheck
 import dayjs from 'dayjs';
-import DateFormatter from './DateFormatter.js';
+import DateFormatter from './DateFormatter';
 
 import relativeTime from 'dayjs/plugin/relativeTime.js';
 import localizedFormat from 'dayjs/plugin/localizedFormat.js';
@@ -47,6 +47,7 @@ function getDateObject(text) {
 }
 
 function parseDateInISO(value) {
+  // eslint-disable-next-line prefer-regex-literals
   const isMilliSeconds = new RegExp('^[0-9]+$').exec(value);
   if (isMilliSeconds) {
     const date = new Date(parseInt(value, 10));

package/tests/assets/sdk-a/components/createAll/custom-constellation/field/Pega_DXIL_MyDate/demo.stories.tsx

@@ -1,16 +1,19 @@
 
 /* eslint-disable react/jsx-no-useless-fragment */
 // @ts-nocheck
-import { withKnobs } from '@storybook/addon-knobs';
+import type { Meta, StoryObj } from '@storybook/react';
 import { configProps, stateProps } from './mock';
 import PegaDxilMyDate from './index';
 
-export default {
+const meta: Meta<typeof PegaDxilMyDate> = {
   title: 'PegaDxilMyDate',
-  decorators: [withKnobs],
-  component: PegaDxilMyDate
+  component: PegaDxilMyDate,
+  excludeStories: /.*Data$/
 };
 
+export default meta;
+type Story = StoryObj<typeof PegaDxilMyDate>;
+
 if (!window.PCore) {
   window.PCore = {};
 }
@@ -26,8 +29,11 @@ window.PCore.getEnvironmentInfo = () => {
   };
 };
 
-export const BasePegaDxilMyDate = () => {
+export const BasePegaDxilMyDate: Story = args => {
   const props = {
+    value: configProps.value,
+    additionalProps: configProps.additionalProps,
+    hasSuggestions: configProps.hasSuggestions,
     getPConnect: () => {
       return {
         getActionsApi: () => {
@@ -51,29 +57,30 @@ export const BasePegaDxilMyDate = () => {
         acceptSuggestion: () => {/* nothing */},
         clearErrorMessages: () => {/* nothing */}
       };
-    },
-    value: configProps.value,
-    validatemessage: configProps.validatemessage,
-    label: configProps.label,
-    hideLabel: configProps.hideLabel,
-    helperText: configProps.helperText,
-    nextYearRange: configProps.nextYearRange,
-    previousYearRange: configProps.previousYearRange,
-    showWeekNumber: configProps.showWeekNumber,
-    testId: configProps.testId,
-    showAsFormattedText: configProps.showAsFormattedText,
-    additionalProps: configProps.additionalProps,
-    displayMode: configProps.displayMode,
-    variant: configProps.variant,
-    hasSuggestions: configProps.hasSuggestions,
-    disabled: configProps.disabled,
-    readOnly: configProps.readOnly,
-    required: configProps.required
+    }
   };
 
   return (
     <>
-      <PegaDxilMyDate {...props} />
+      <PegaDxilMyDate {...props} {...args} />
     </>
   );
 };
+
+BasePegaDxilMyDate.args = {
+  label: configProps.label,
+  helperText: configProps.helperText,
+  showWeekNumber: configProps.showWeekNumber,
+  testId: configProps.testId,
+  readOnly: configProps.readOnly,
+  disabled: configProps.disabled,
+  required: configProps.required,
+  status: configProps.status,
+  hideLabel: configProps.hideLabel,
+  nextYearRange: configProps.nextYearRange,
+  previousYearRange: configProps.previousYearRange,
+  showAsFormattedText: configProps.showAsFormattedText,
+  displayMode: configProps.displayMode,
+  variant: configProps.variant,
+  validatemessage: configProps.validatemessage
+};

package/tests/assets/sdk-a/components/createAll/custom-constellation/field/Pega_DXIL_MyDate/index.tsx

@@ -1,9 +1,9 @@
 import { useEffect, useState } from 'react';
-import { DateInput, FieldValueList, DateTimeDisplay, Text,  } from '@pega/cosmos-react-core';
-import PropTypes from 'prop-types';
-import FormattedText from "./FormattedText.jsx";
+import { DateInput, FieldValueList, DateTimeDisplay, Text, withConfiguration } from '@pega/cosmos-react-core';
+import FormattedText from "./FormattedText";
 
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 import StyledPegaDxilMyDateWrapper from './styles';
 
@@ -16,7 +16,7 @@ import {
   getMinDate,
   datetimeFireChangeBlurEvents,
   getDateFormat
-} from "./date.js";
+} from "./date";
 import { suggestionsHandler } from './suggestions-handler';
 import type { DateTimeFormat, DateTimeVariant } from '@pega/cosmos-react-core/lib/components/DateTime/DateTime.types.js';
 
@@ -42,7 +42,7 @@ interface StateProps {
 }
 
 interface ConfigProps {
-  formatter?: string;
+  formatter?: string | undefined;
 }
 
 interface ActionsProps {
@@ -53,33 +53,33 @@ interface ActionsProps {
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
 // any default values in config.pros should be set in defaultProps at bottom of this file
-export default function PegaDxilMyDate (props: PegaDxilMyDateProps)  {
+function PegaDxilMyDate (props: PegaDxilMyDateProps)  {
   const {
     getPConnect,
     value,
     validatemessage,
     label,
-    hideLabel,
-    helperText,
+    hideLabel = false,
+    helperText = '',
     nextYearRange,
     previousYearRange,
-    showWeekNumber,
+    showWeekNumber = false,
     testId,
-    showAsFormattedText,
-    additionalProps,
+    showAsFormattedText = false,
+    additionalProps = {},
     displayMode,
-    variant,
-    hasSuggestions
+    variant = 'inline',
+    hasSuggestions = false
    } = props;
 
-  let {formatter} = props;
+  let {formatter = 'defaultDate' } = props;
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
   const actionsProps = pConn.getActionsApi() as unknown as ActionsProps;
   const stateProps = pConn.getStateProps() as StateProps;
   const propName: string = stateProps.value;
 
- let { readOnly, required, disabled } = props;
+ let { readOnly = false, required = false, disabled = false } = props;
   [readOnly, required, disabled] = [readOnly, required, disabled].map(
     (prop) => prop === true || (typeof prop === "string" && prop === "true")
   );
@@ -156,13 +156,14 @@ export default function PegaDxilMyDate (props: PegaDxilMyDateProps)  {
         const runtimeformatter = configProps?.formatter;
 
         if (formatter !== runtimeformatter) {
-          formatter = runtimeformatter;
+          formatter = runtimeformatter!;
         }
      }
 
 
     if (formatter !== "" && formatExists(formatter)){
-        const {variantVal,formatVal} = datetimedisplayformatter(formatter);
+        // @ts-ignore
+        const {variantVal, formatVal} = datetimedisplayformatter(formatter);
         variantValue = variantVal;
         formatValue = formatVal;
     }
@@ -175,7 +176,7 @@ export default function PegaDxilMyDate (props: PegaDxilMyDateProps)  {
     );
     switch(displayMode){
       case 'DISPLAY_ONLY': {
-        return ( <StyledPegaDxilMyDateWrapper> displayComp </StyledPegaDxilMyDateWrapper>);
+        return ( <StyledPegaDxilMyDateWrapper> {displayComp} </StyledPegaDxilMyDateWrapper>);
       }
       case "LABELS_LEFT" : {
         return (
@@ -259,45 +260,4 @@ export default function PegaDxilMyDate (props: PegaDxilMyDateProps)  {
 }
 
 
-
-PegaDxilMyDate.defaultProps = {
-  value: undefined,
-  validatemessage: "",
-  helperText: "",
-  hideLabel: false,
-  disabled: false,
-  readOnly: false,
-  required: false,
-  showWeekNumber: false,
-  nextYearRange: "",
-  previousYearRange: "",
-  testId: "",
-  showAsFormattedText: false,
-  additionalProps: {},
-  displayMode: null,
-  variant: "inline",
-  formatter: "defaultDate",
-  hasSuggestions: false
-};
-
-PegaDxilMyDate.propTypes = {
-  value: PropTypes.string,
-  label: PropTypes.string.isRequired,
-  hideLabel: PropTypes.bool,
-  getPConnect: PropTypes.func.isRequired,
-  validatemessage: PropTypes.string,
-  helperText: PropTypes.string,
-  disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  readOnly: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  required: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  showWeekNumber: PropTypes.bool,
-  nextYearRange: PropTypes.string,
-  previousYearRange: PropTypes.string,
-  testId: PropTypes.string,
-  showAsFormattedText: PropTypes.bool,
-  additionalProps: PropTypes.objectOf(PropTypes.any),
-  displayMode: PropTypes.string,
-  variant: PropTypes.string,
-  formatter: PropTypes.string,
-  hasSuggestions: PropTypes.bool
-};
+export default withConfiguration(PegaDxilMyDate);

package/tests/assets/sdk-a/components/createAll/custom-constellation/field/Pega_DXIL_MyDate/mock.ts

@@ -16,7 +16,8 @@ export const configProps = {
   hasSuggestions: false,
   readOnly: false,
   required: false,
-  disabled: false
+  disabled: false,
+  status: ''
 };
 
 export const stateProps = {

package/tests/assets/sdk-a/components/createAll/custom-constellation/field/Pega_DXIL_MyDate/styles.ts

@@ -1,15 +1,8 @@
-
-// 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;
-//  `;
-// });
+import styled, { css } from 'styled-components';
+
+export default styled.div(() => {
+  return css`
+    margin: 0px 0;
+  `;
+});

package/tests/assets/sdk-a/components/createAll/custom-constellation/field/Pega_DXIL_MyDateTime/create-nonce.ts

@@ -0,0 +1,5 @@
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}