@pega/dx-component-builder-sdk 0.23.18 → 0.23.20

package/tests/assets/sdk-r/components/create/override-sdk/template/WideNarrowDetails/config-ext.json

@@ -1,9 +1,9 @@
 {
-  "componentKey": "WideNarrowDetails",
-  "name": "WideNarrowDetails",
-  "label": "Details (Wide-narrow)",
-  "description": "Details (Wide-narrow) template",
-  "type": "Template",
-  "subtype": "DETAILS",
-  "properties": []
-}
+    "componentKey": "WideNarrowDetails",
+    "name": "WideNarrowDetails",
+    "label": "Details (Wide-narrow)",
+    "description": "Details (Wide-narrow) template",
+    "type": "Template",
+    "subtype": "DETAILS",
+    "properties": []
+}

package/tests/assets/sdk-r/components/create/override-sdk/template/WideNarrowForm/config-ext.json

@@ -1,9 +1,9 @@
 {
-  "componentKey": "WideNarrowForm",
-  "name": "WideNarrowForm",
-  "label": "Wide-narrow",
-  "description": "WideNarrow Template",
-  "type": "Template",
-  "subtype": "FORM",
-  "properties": []
-}
+    "componentKey": "WideNarrowForm",
+    "name": "WideNarrowForm",
+    "label": "Wide-narrow",
+    "description": "WideNarrow Template",
+    "type": "Template",
+    "subtype": "FORM",
+    "properties": []
+}

package/tests/assets/sdk-r/components/create/override-sdk/template/WideNarrowPage/config-ext.json

@@ -1,9 +1,9 @@
 {
-  "componentKey": "WideNarrowPage",
-  "name": "WideNarrowPage",
-  "label": "Wide-narrow",
-  "description": "Wide-narrow Page Template",
-  "type": "Template",
-  "subtype": "PAGE",
-  "properties": []
-}
+    "componentKey": "WideNarrowPage",
+    "name": "WideNarrowPage",
+    "label": "Wide-narrow",
+    "description": "Wide-narrow Page Template",
+    "type": "Template",
+    "subtype": "PAGE",
+    "properties": []
+}

package/tests/assets/sdk-r/components/create/override-sdk/widget/AppAnnouncement/config-ext.json

@@ -1,9 +1,9 @@
 {
-  "componentKey": "AppAnnouncement",
-  "name": "AppAnnouncement",
-  "label": "App announcement",
-  "description": "App announcement widget",
-  "type": "Widget",
-  "subtype": "PAGE",
-  "properties": []
-}
+    "componentKey": "AppAnnouncement",
+    "name": "AppAnnouncement",
+    "label": "App announcement",
+    "description": "App announcement widget",
+    "type": "Widget",
+    "subtype": "PAGE",
+    "properties": []
+}

package/tests/assets/sdk-r/components/create/override-sdk/widget/Attachment/Attachment.tsx

@@ -6,11 +6,7 @@ import { CircularProgress, IconButton, Menu, MenuItem, Button } from '@material-
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 import download from 'downloadjs';
 
-import {
-  buildFilePropsFromResponse,
-  getIconFromFileType,
-  validateMaxSize
-} from '@pega/react-sdk-components/lib/components/helpers/attachmentHelpers';
+import { buildFilePropsFromResponse, getIconFromFileType, validateMaxSize } from '@pega/react-sdk-components/lib/components/helpers/attachmentHelpers';
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 import { isInfinity23OrHigher } from '@pega/react-sdk-components/lib/components/helpers/common-utils';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';

package/tests/assets/sdk-r/components/create/override-sdk/widget/CaseHistory/config-ext.json

@@ -1,9 +1,9 @@
 {
-  "componentKey": "CaseHistory",
-  "name": "CaseHistory",
-  "label": "Case history",
-  "description": "Case history widget",
-  "type": "Widget",
-  "subtype": "CASE",
-  "properties": []
-}
+    "componentKey": "CaseHistory",
+    "name": "CaseHistory",
+    "label": "Case history",
+    "description": "Case history widget",
+    "type": "Widget",
+    "subtype": "CASE",
+    "properties": []
+}

package/tests/assets/sdk-r/components/create/override-sdk/widget/FileUtility/config-ext.json

@@ -1,9 +1,9 @@
 {
-  "componentKey": "FileUtility",
-  "name": "FileUtility",
-  "label": "Attachments",
-  "description": "Attachments",
-  "type": "Widget",
-  "subtype": "CASE",
-  "properties": []
-}
+    "componentKey": "FileUtility",
+    "name": "FileUtility",
+    "label": "Attachments",
+    "description": "Attachments",
+    "type": "Widget",
+    "subtype": "CASE",
+    "properties": []
+}

package/tests/assets/sdk-r/components/create/override-sdk/widget/Followers/config-ext.json

@@ -1,9 +1,9 @@
 {
-  "componentKey": "Followers",
-  "name": "Followers",
-  "label": "Followers",
-  "description": "Followers",
-  "type": "Widget",
-  "subtype": "CASE",
-  "properties": []
-}
+    "componentKey": "Followers",
+    "name": "Followers",
+    "label": "Followers",
+    "description": "Followers",
+    "type": "Widget",
+    "subtype": "CASE",
+    "properties": []
+}

package/tests/assets/sdk-r/components/create/override-sdk/widget/ToDo/config-ext.json

@@ -1,9 +1,9 @@
 {
-  "componentKey": "Todo",
-  "name": "Todo",
-  "label": "Todo",
-  "description": "My worklist widget",
-  "type": "Widget",
-  "subtype": "PAGE",
-  "properties": []
-}
+    "componentKey": "Todo",
+    "name": "Todo",
+    "label": "Todo",
+    "description": "My worklist widget",
+    "type": "Widget",
+    "subtype": "PAGE",
+    "properties": []
+}

package/tests/assets/sdk-r/components/createAll/_components.md

@@ -0,0 +1,6 @@
+# The **components** directory
+
+The **src/components** directory contains the code for the components you want to use with the **React SDK**.
+
+When you run the **npm run  create** or **npm run override** commands to create new components, the generated code that
+you can use as a starting point for your component development will be placed in component-specific folders inside **src/components**.

package/tests/assets/sdk-r/components/createAll/custom-constellation/field/Pega_DXIL_MyBoolean/Boolean.ts

@@ -0,0 +1,35 @@
+function Boolean(value: any, { allowEmpty = true, tick = '', cross = '' } = {}) {
+  if (
+    (!allowEmpty && !value) ||
+    value === false ||
+    value?.toString()?.toLowerCase() === 'false' ||
+    value === 0 ||
+    value === '0'
+  ) {
+    return cross || '';
+  }
+  if (
+    value === true ||
+    value?.toString()?.toLowerCase() === 'true' ||
+    value === 1 ||
+    value === '1'
+  ) {
+    return tick || '';
+  }
+  if (
+    allowEmpty &&
+    (value === 'null' || value === '' || value === null || typeof value === 'undefined')
+  ) {
+    return '––';
+  }
+  return value;
+}
+
+export default {
+  TrueFalse: (value: any, options: Object) =>
+    Boolean(value, {
+      ...options,
+      tick: 'True',
+      cross: 'False'
+    })
+};

package/tests/assets/sdk-r/components/createAll/custom-constellation/field/Pega_DXIL_MyBoolean/demo.stories.tsx

@@ -1,38 +1,29 @@
+
 /* eslint-disable react/jsx-no-useless-fragment */
 // @ts-nocheck
 import { useState } from 'react';
-import { withKnobs } from '@storybook/addon-knobs';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { configProps, stateProps } from './mock';
 
 import PegaDxilMyBoolean from './index';
 
-export default {
+const meta: Meta<typeof PegaDxilMyBoolean> = {
   title: 'PegaDxilMyBoolean',
-  decorators: [withKnobs],
-  component: PegaDxilMyBoolean
+  component: PegaDxilMyBoolean,
+  excludeStories: /.*Data$/
 };
 
-export const BasePegaDxilMyBoolean = () => {
+export default meta;
+type Story = StoryObj<typeof PegaDxilMyBoolean>;
+
+export const BasePegaDxilMyBoolean: Story = args => {
 
   const [value, setValue] = useState(configProps.value);
 
   const props = {
     value,
-    label: configProps.label,
-    helperText: configProps.helperText,
-    caption: configProps.caption,
-    validatemessage: configProps.validatemessage,
-    hideLabel: configProps.hideLabel,
-    testId: configProps.testId,
     additionalProps: configProps.additionalProps,
-    displayMode: configProps.displayMode,
-    variant: configProps.variant,
-    trueLabel: configProps.trueLabel,
-    falseLabel: configProps.falseLabel,
-    disabled: configProps.disabled,
-    readOnly: configProps.readOnly,
-    required: configProps.required,
     getPConnect: () => {
       return {
         getStateProps: () => {
@@ -57,7 +48,24 @@ export const BasePegaDxilMyBoolean = () => {
 
   return (
     <>
-      <PegaDxilMyBoolean {...props} />
+      <PegaDxilMyBoolean {...props} {...args} />
     </>
   );
-};
+};
+
+BasePegaDxilMyBoolean.args = {
+  label: configProps.label,
+  helperText: configProps.helperText,
+  caption: configProps.caption,
+  testId: configProps.testId,
+  readOnly: configProps.readOnly,
+  disabled: configProps.disabled,
+  required: configProps.required,
+  status: configProps.status,
+  hideLabel: configProps.hideLabel,
+  trueLabel: configProps.trueLabel,
+  falseLabel: configProps.falseLabel,
+  displayMode: configProps.displayMode,
+  variant: configProps.variant,
+  validatemessage: configProps.validatemessage
+};

package/tests/assets/sdk-r/components/createAll/custom-constellation/field/Pega_DXIL_MyBoolean/index.tsx

@@ -2,10 +2,9 @@ import {
   Checkbox as CosmosCheckbox,
   CheckboxGroup,
   FieldValueList,
-  Text
+  Text,
+  withConfiguration
 } from "@pega/cosmos-react-core";
-import PropTypes from "prop-types";
-
 
 import type { PConnFieldProps } from './PConnProps';
 
@@ -40,19 +39,19 @@ 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 PegaDxilMyBoolean(props: PegaDxilMyBooleanProps) {
+function PegaDxilMyBoolean(props: PegaDxilMyBooleanProps) {
   const {
     getPConnect,
-    value,
-    label,
-    helperText,
+    value = false,
+    label = '',
+    helperText = '',
     caption,
     validatemessage,
     hideLabel,
     testId,
-    additionalProps,
+    additionalProps = {},
     displayMode,
-    variant,
+    variant = 'inline',
     trueLabel,
     falseLabel
   } = props;
@@ -62,7 +61,7 @@ export default function PegaDxilMyBoolean(props: PegaDxilMyBooleanProps) {
   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')
   );
@@ -105,7 +104,7 @@ export default function PegaDxilMyBoolean(props: PegaDxilMyBooleanProps) {
   }
 
   if (displayMode === 'DISPLAY_ONLY') {
-    return ( <StyledPegaDxilMyBooleanWrapper> displayComponent </StyledPegaDxilMyBooleanWrapper>);
+    return ( <StyledPegaDxilMyBooleanWrapper> {displayComponent} </StyledPegaDxilMyBooleanWrapper>);
   }
 
   if (displayMode === "LABELS_LEFT") {
@@ -161,40 +160,4 @@ export default function PegaDxilMyBoolean(props: PegaDxilMyBooleanProps) {
 };
 
 
-PegaDxilMyBoolean.defaultProps = {
-  validatemessage: '',
-  value: false,
-  label: '',
-  hideLabel: false,
-  helperText: '',
-  disabled: false,
-  readOnly: false,
-  required: false,
-  testId: '',
-  additionalProps: {},
-  displayMode: null,
-  variant: 'inline',
-  displayValue: 'Yes/No',
-  trueLabel: '',
-  falseLabel: ''
-};
-
-PegaDxilMyBoolean.propTypes = {
-  getPConnect: PropTypes.func.isRequired,
-  validatemessage: PropTypes.string,
-  label: PropTypes.string,
-  hideLabel: PropTypes.bool,
-  helperText: PropTypes.string,
-  value: PropTypes.bool,
-  caption: PropTypes.string.isRequired,
-  disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  readOnly: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  required: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  testId: PropTypes.string,
-  additionalProps: PropTypes.objectOf(PropTypes.any),
-  displayMode: PropTypes.string,
-  variant: PropTypes.string,
-  displayValue: PropTypes.string,
-  trueLabel: PropTypes.string,
-  falseLabel: PropTypes.string
-};
+export default withConfiguration(PegaDxilMyBoolean);

package/tests/assets/sdk-r/components/createAll/custom-constellation/field/Pega_DXIL_MyBoolean/mock.ts

@@ -14,7 +14,8 @@ export const configProps = {
   falseLabel: 'False',
   disabled: false,
   readOnly: false,
-  required: true
+  required: true,
+  status: ''
 };
 
 export const stateProps = {

package/tests/assets/sdk-r/components/createAll/custom-constellation/field/Pega_DXIL_MyBoolean/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-r/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-r/components/createAll/custom-constellation/field/Pega_DXIL_MyCurrency/index.tsx

@@ -6,9 +6,10 @@ import {
   NumberDisplay,
   FieldValueList,
   Text,
-  useAfterInitialEffect
+  useAfterInitialEffect,
+  withConfiguration
 } from '@pega/cosmos-react-core';
-import PropTypes from 'prop-types';
+
 
 import type { PConnFieldProps } from './PConnProps';
 
@@ -30,7 +31,6 @@ interface PegaDxilMyCurrencyProps extends PConnFieldProps {
   allowDecimals: boolean;
   currencyISOCode: string;
   alwaysShowISOCode: boolean;
-  isoCodeSelection: string;
   additionalProps: any;
   showGroupSeparators: boolean;
   currencyDisplay: 'symbol' | 'code' | 'name' | undefined;
@@ -56,36 +56,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 +109,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 +121,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 +189,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 +243,7 @@ export default function PegaDxilMyCurrency(props: PegaDxilMyCurrencyProps) {
       showDecimal={allowDecimals}
       currencyISOCode={currencyISOCode}
       alwaysShowISOCode={alwaysShowISOCode}
+      showGroupSeparators={showGroupSeparators}
       placeholder={placeholder}
       disabled={disabled}
       readOnly={readOnly}
@@ -274,60 +276,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);