@pega/dx-component-builder-sdk 0.242.5 → 0.242.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/package.json +1 -1
  2. package/src/tasks/create/templates/SDK-React/template/FORM-region/demo.stories.tsx.mustache +27 -12
  3. package/tests/assets/sdk-r/components/create/override-sdk/designSystemExtension/FieldValueList/FieldValueList.tsx +2 -2
  4. package/tests/assets/sdk-r/components/create/override-sdk/field/Phone/Phone.tsx +5 -5
  5. package/tests/assets/sdk-r/components/create/override-sdk/infra/NavBar/NavBar.css +1 -0
  6. package/tests/assets/sdk-r/components/create/override-sdk/template/ListView/ListView.tsx +29 -28
  7. package/tests/assets/sdk-r/components/create/override-sdk/template/SimpleTableManual/SimpleTableManual.tsx +10 -5
  8. package/tests/assets/sdk-r/components/createAll/custom-sdk/template/Pega_DXIL_MyTwoColumnForm/demo.stories.tsx +28 -13
  9. package/tests/assets/sdk-r/components/createAll/override-sdk/designSystemExtension/FieldValueList/FieldValueList.tsx +2 -2
  10. package/tests/assets/sdk-r/components/createAll/override-sdk/field/Phone/Phone.tsx +5 -5
  11. package/tests/assets/sdk-r/components/createAll/override-sdk/infra/NavBar/NavBar.css +1 -0
  12. package/tests/assets/sdk-r/components/createAll/override-sdk/template/ListView/ListView.tsx +29 -28
  13. package/tests/assets/sdk-r/components/createAll/override-sdk/template/SimpleTableManual/SimpleTableManual.tsx +10 -5
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pega/dx-component-builder-sdk",
3
- "version": "0.242.5",
3
+ "version": "0.242.6",
4
4
  "description": "Utility for building custom UI components",
5
5
  "bin": "./bin/index.js",
6
6
  "scripts": {
package/src/tasks/create/templates/SDK-React/template/FORM-region/demo.stories.tsx.mustache CHANGED
@@ -2,7 +2,7 @@ import { useState } from 'react';
2
2
  import type { Meta, StoryObj } from '@storybook/react';
3
3
 
4
4
  import { TextField } from '@mui/material';
5
- import MuiPhoneNumber from 'material-ui-phone-number';
5
+ import { MuiTelInput } from 'mui-tel-input';
6
6
  import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
7
7
  import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
8
8
  import dayjs from 'dayjs';
@@ -23,8 +23,14 @@ export default meta;
23
23
  type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
24
24
 
25
25
  const renderField = resolvedProps => {
26
- const { displayMode, value = '', label = '', onChange } = resolvedProps;
26
+ const { displayMode, value = '', label = '', onChange, required, disabled, helperText, placeholder, validatemessage, status, testId } = resolvedProps;
27
27
 
28
+ const helperTextToDisplay = validatemessage || helperText;
29
+ let testProp = {};
30
+
31
+ testProp = {
32
+ 'data-test-id': testId
33
+ };
28
34
  const variant = displayMode === 'DISPLAY_ONLY' ? 'inline' : 'stacked';
29
35
  let val: any = '';
30
36
 
@@ -66,18 +72,27 @@ const renderField = resolvedProps => {
66
72
  if (label === 'First Name' || label === 'Last Name' || label === 'Middle Name')
67
73
  val = <TextField value={value} fullWidth size='small' variant='outlined' style={{ fontSize: '14px' }} label={label} onChange={onChange} />;
68
74
 
75
+ const disableDropdown = true;
69
76
  if (label === 'Phone Number')
70
77
  val = (
71
- <MuiPhoneNumber
72
- value={value}
73
- fullWidth
74
- variant='outlined'
75
- size='small'
76
- style={{ fontSize: '14px' }}
77
- defaultCountry='us'
78
- label={label}
79
- onChange={onChange}
80
- />
78
+ <MuiTelInput
79
+ fullWidth
80
+ helperText={helperTextToDisplay}
81
+ placeholder={placeholder ?? ''}
82
+ size='small'
83
+ defaultCountry='US'
84
+ required={required}
85
+ disabled={disabled}
86
+ onChange={onChange}
87
+ error={status === 'error'}
88
+ label={label}
89
+ value={value}
90
+ InputProps={{
91
+ readOnly: true,
92
+ inputProps: { ...testProp }
93
+ }}
94
+ disableDropdown={disableDropdown}
95
+ />
81
96
  );
82
97
  <%={{ }}=%> {{! revert delimiters for mustache }}
83
98
 
package/tests/assets/sdk-r/components/create/override-sdk/designSystemExtension/FieldValueList/FieldValueList.tsx CHANGED
@@ -51,7 +51,7 @@ export default function FieldValueList(props: FieldValueListProps) {
51
51
 
52
52
  function getGridItemLabel() {
53
53
  return (
54
- <Grid item xs={variant === 'stacked' ? 12 : 6} className={variant === 'stacked' ? classes.noPaddingBottom : ''}>
54
+ <Grid item xs={variant === 'stacked' ? 12 : 4} className={variant === 'stacked' ? classes.noPaddingBottom : ''}>
55
55
  <Typography variant='body2' component='span' className={`${classes.fieldLabel}`}>
56
56
  {name}
57
57
  </Typography>
@@ -63,7 +63,7 @@ export default function FieldValueList(props: FieldValueListProps) {
63
63
  const formattedValue = formatItemValue(value);
64
64
 
65
65
  return (
66
- <Grid item xs={variant === 'stacked' ? 12 : 6} className={variant === 'stacked' ? classes.noPaddingTop : ''}>
66
+ <Grid item xs={variant === 'stacked' ? 12 : 8} className={variant === 'stacked' ? classes.noPaddingTop : ''}>
67
67
  {isHtml ? (
68
68
  // eslint-disable-next-line react/no-danger
69
69
  <div dangerouslySetInnerHTML={{ __html: formattedValue }} />
package/tests/assets/sdk-r/components/create/override-sdk/field/Phone/Phone.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import { useEffect, useState } from 'react';
2
- import MuiPhoneNumber from 'material-ui-phone-number';
2
+ import { MuiTelInput } from 'mui-tel-input';
3
3
 
4
4
  import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
5
5
  import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
@@ -57,12 +57,12 @@ export default function Phone(props: PhoneProps) {
57
57
  const disableDropdown = true;
58
58
  return (
59
59
  <div>
60
- <MuiPhoneNumber
60
+ <MuiTelInput
61
61
  fullWidth
62
62
  helperText={helperTextToDisplay}
63
63
  placeholder={placeholder ?? ''}
64
64
  size='small'
65
- defaultCountry='us'
65
+ defaultCountry='US'
66
66
  required={required}
67
67
  disabled={disabled}
68
68
  onChange={onChange}
@@ -91,13 +91,13 @@ export default function Phone(props: PhoneProps) {
91
91
  };
92
92
 
93
93
  return (
94
- <MuiPhoneNumber
94
+ <MuiTelInput
95
95
  fullWidth
96
96
  variant='outlined'
97
97
  helperText={helperTextToDisplay}
98
98
  placeholder={placeholder ?? ''}
99
99
  size='small'
100
- defaultCountry='us'
100
+ defaultCountry='US'
101
101
  required={required}
102
102
  disabled={disabled}
103
103
  onChange={handleChange}
package/tests/assets/sdk-r/components/create/override-sdk/infra/NavBar/NavBar.css CHANGED
@@ -165,4 +165,5 @@
165
165
 
166
166
  .scrollable {
167
167
  overflow-y: scroll !important;
168
+ min-height: 200px !important;
168
169
  }
package/tests/assets/sdk-r/components/create/override-sdk/template/ListView/ListView.tsx CHANGED
@@ -1034,34 +1034,35 @@ export default function ListView(props: ListViewProps) {
1034
1034
  </TableRow>
1035
1035
  </TableHead>
1036
1036
  <TableBody>
1037
- {stableSort(arRows, getComparator(order, orderBy))
1038
- .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
1039
- .map(row => {
1040
- return (
1041
- <TableRow key={row.pxRefObjectInsName || row.pyID}>
1042
- {arColumns.map(column => {
1043
- const value = row[column.id];
1044
- return (
1045
- <TableCell key={column.id} align={column.align} className={classes.cell}>
1046
- {_showButton(column.id, row) || column.displayAsLink ? (
1047
- <Link
1048
- component='button'
1049
- onClick={() => {
1050
- _listViewClick(row, column);
1051
- }}
1052
- underline='hover'
1053
- >
1054
- {column.format && typeof value === 'number' ? column.format(value) : value}
1055
- </Link>
1056
- ) : (
1057
- <>{column.format && typeof value === 'number' ? column.format(value) : value || '---'}</>
1058
- )}
1059
- </TableCell>
1060
- );
1061
- })}
1062
- </TableRow>
1063
- );
1064
- })}
1037
+ {arRows &&
1038
+ stableSort(arRows, getComparator(order, orderBy))
1039
+ .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
1040
+ .map(row => {
1041
+ return (
1042
+ <TableRow key={row.pxRefObjectInsName || row.pyID}>
1043
+ {arColumns.map(column => {
1044
+ const value = row[column.id];
1045
+ return (
1046
+ <TableCell key={column.id} align={column.align} className={classes.cell}>
1047
+ {_showButton(column.id, row) || column.displayAsLink ? (
1048
+ <Link
1049
+ component='button'
1050
+ onClick={() => {
1051
+ _listViewClick(row, column);
1052
+ }}
1053
+ underline='hover'
1054
+ >
1055
+ {column.format && typeof value === 'number' ? column.format(value) : value}
1056
+ </Link>
1057
+ ) : (
1058
+ <>{column.format && typeof value === 'number' ? column.format(value) : value || '---'}</>
1059
+ )}
1060
+ </TableCell>
1061
+ );
1062
+ })}
1063
+ </TableRow>
1064
+ );
1065
+ })}
1065
1066
  </TableBody>
1066
1067
  </Table>
1067
1068
  </TableContainer>
package/tests/assets/sdk-r/components/create/override-sdk/template/SimpleTableManual/SimpleTableManual.tsx CHANGED
@@ -258,11 +258,16 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
258
258
  function generateRowsData() {
259
259
  // if referenceList is empty and dataPageName property value exists then make a datapage fetch call and get the list of data.
260
260
  if (!referenceList.length && dataPageName) {
261
- getDataPage(dataPageName, parameters, context).then(listData => {
262
- const data = formatRowsData(listData);
263
- myRows = data;
264
- setRowData(data);
265
- });
261
+ getDataPage(dataPageName, parameters, context)
262
+ .then(listData => {
263
+ const data = formatRowsData(listData);
264
+ myRows = data;
265
+ setRowData(data);
266
+ })
267
+ .catch(e => {
268
+ // eslint-disable-next-line no-console
269
+ console.log(e);
270
+ });
266
271
  } else {
267
272
  // The referenceList prop has the JSON data for each row to be displayed
268
273
  // in the table. So, iterate over referenceList to create the dataRows that
package/tests/assets/sdk-r/components/createAll/custom-sdk/template/Pega_DXIL_MyTwoColumnForm/demo.stories.tsx CHANGED
@@ -2,7 +2,7 @@ import { useState } from 'react';
2
2
  import type { Meta, StoryObj } from '@storybook/react';
3
3
 
4
4
  import { TextField } from '@mui/material';
5
- import MuiPhoneNumber from 'material-ui-phone-number';
5
+ import { MuiTelInput } from 'mui-tel-input';
6
6
  import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
7
7
  import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
8
8
  import dayjs from 'dayjs';
@@ -23,11 +23,17 @@ export default meta;
23
23
  type Story = StoryObj<typeof PegaDxilMyTwoColumnForm>;
24
24
 
25
25
  const renderField = resolvedProps => {
26
- const { displayMode, value = '', label = '', onChange } = resolvedProps;
26
+ const { displayMode, value = '', label = '', onChange, required, disabled, helperText, placeholder, validatemessage, status, testId } = resolvedProps;
27
27
 
28
+ const helperTextToDisplay = validatemessage || helperText;
29
+ let testProp = {};
30
+
31
+ testProp = {
32
+ 'data-test-id': testId
33
+ };
28
34
  const variant = displayMode === 'DISPLAY_ONLY' ? 'inline' : 'stacked';
29
35
  let val: any = '';
30
-
36
+
31
37
  if (label === 'Service Date')
32
38
  val = (
33
39
  <LocalizationProvider dateAdapter={AdapterDayjs}>
@@ -64,18 +70,27 @@ const renderField = resolvedProps => {
64
70
  if (label === 'First Name' || label === 'Last Name' || label === 'Middle Name')
65
71
  val = <TextField value={value} fullWidth size='small' variant='outlined' style={{ fontSize: '14px' }} label={label} onChange={onChange} />;
66
72
 
73
+ const disableDropdown = true;
67
74
  if (label === 'Phone Number')
68
75
  val = (
69
- <MuiPhoneNumber
70
- value={value}
71
- fullWidth
72
- variant='outlined'
73
- size='small'
74
- style={{ fontSize: '14px' }}
75
- defaultCountry='us'
76
- label={label}
77
- onChange={onChange}
78
- />
76
+ <MuiTelInput
77
+ fullWidth
78
+ helperText={helperTextToDisplay}
79
+ placeholder={placeholder ?? ''}
80
+ size='small'
81
+ defaultCountry='US'
82
+ required={required}
83
+ disabled={disabled}
84
+ onChange={onChange}
85
+ error={status === 'error'}
86
+ label={label}
87
+ value={value}
88
+ InputProps={{
89
+ readOnly: true,
90
+ inputProps: { ...testProp }
91
+ }}
92
+ disableDropdown={disableDropdown}
93
+ />
79
94
  );
80
95
 
81
96
  if (variant === 'inline') {
package/tests/assets/sdk-r/components/createAll/override-sdk/designSystemExtension/FieldValueList/FieldValueList.tsx CHANGED
@@ -51,7 +51,7 @@ export default function FieldValueList(props: FieldValueListProps) {
51
51
 
52
52
  function getGridItemLabel() {
53
53
  return (
54
- <Grid item xs={variant === 'stacked' ? 12 : 6} className={variant === 'stacked' ? classes.noPaddingBottom : ''}>
54
+ <Grid item xs={variant === 'stacked' ? 12 : 4} className={variant === 'stacked' ? classes.noPaddingBottom : ''}>
55
55
  <Typography variant='body2' component='span' className={`${classes.fieldLabel}`}>
56
56
  {name}
57
57
  </Typography>
@@ -63,7 +63,7 @@ export default function FieldValueList(props: FieldValueListProps) {
63
63
  const formattedValue = formatItemValue(value);
64
64
 
65
65
  return (
66
- <Grid item xs={variant === 'stacked' ? 12 : 6} className={variant === 'stacked' ? classes.noPaddingTop : ''}>
66
+ <Grid item xs={variant === 'stacked' ? 12 : 8} className={variant === 'stacked' ? classes.noPaddingTop : ''}>
67
67
  {isHtml ? (
68
68
  // eslint-disable-next-line react/no-danger
69
69
  <div dangerouslySetInnerHTML={{ __html: formattedValue }} />
package/tests/assets/sdk-r/components/createAll/override-sdk/field/Phone/Phone.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import { useEffect, useState } from 'react';
2
- import MuiPhoneNumber from 'material-ui-phone-number';
2
+ import { MuiTelInput } from 'mui-tel-input';
3
3
 
4
4
  import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
5
5
  import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
@@ -57,12 +57,12 @@ export default function Phone(props: PhoneProps) {
57
57
  const disableDropdown = true;
58
58
  return (
59
59
  <div>
60
- <MuiPhoneNumber
60
+ <MuiTelInput
61
61
  fullWidth
62
62
  helperText={helperTextToDisplay}
63
63
  placeholder={placeholder ?? ''}
64
64
  size='small'
65
- defaultCountry='us'
65
+ defaultCountry='US'
66
66
  required={required}
67
67
  disabled={disabled}
68
68
  onChange={onChange}
@@ -91,13 +91,13 @@ export default function Phone(props: PhoneProps) {
91
91
  };
92
92
 
93
93
  return (
94
- <MuiPhoneNumber
94
+ <MuiTelInput
95
95
  fullWidth
96
96
  variant='outlined'
97
97
  helperText={helperTextToDisplay}
98
98
  placeholder={placeholder ?? ''}
99
99
  size='small'
100
- defaultCountry='us'
100
+ defaultCountry='US'
101
101
  required={required}
102
102
  disabled={disabled}
103
103
  onChange={handleChange}
package/tests/assets/sdk-r/components/createAll/override-sdk/infra/NavBar/NavBar.css CHANGED
@@ -165,4 +165,5 @@
165
165
 
166
166
  .scrollable {
167
167
  overflow-y: scroll !important;
168
+ min-height: 200px !important;
168
169
  }
package/tests/assets/sdk-r/components/createAll/override-sdk/template/ListView/ListView.tsx CHANGED
@@ -1034,34 +1034,35 @@ export default function ListView(props: ListViewProps) {
1034
1034
  </TableRow>
1035
1035
  </TableHead>
1036
1036
  <TableBody>
1037
- {stableSort(arRows, getComparator(order, orderBy))
1038
- .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
1039
- .map(row => {
1040
- return (
1041
- <TableRow key={row.pxRefObjectInsName || row.pyID}>
1042
- {arColumns.map(column => {
1043
- const value = row[column.id];
1044
- return (
1045
- <TableCell key={column.id} align={column.align} className={classes.cell}>
1046
- {_showButton(column.id, row) || column.displayAsLink ? (
1047
- <Link
1048
- component='button'
1049
- onClick={() => {
1050
- _listViewClick(row, column);
1051
- }}
1052
- underline='hover'
1053
- >
1054
- {column.format && typeof value === 'number' ? column.format(value) : value}
1055
- </Link>
1056
- ) : (
1057
- <>{column.format && typeof value === 'number' ? column.format(value) : value || '---'}</>
1058
- )}
1059
- </TableCell>
1060
- );
1061
- })}
1062
- </TableRow>
1063
- );
1064
- })}
1037
+ {arRows &&
1038
+ stableSort(arRows, getComparator(order, orderBy))
1039
+ .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
1040
+ .map(row => {
1041
+ return (
1042
+ <TableRow key={row.pxRefObjectInsName || row.pyID}>
1043
+ {arColumns.map(column => {
1044
+ const value = row[column.id];
1045
+ return (
1046
+ <TableCell key={column.id} align={column.align} className={classes.cell}>
1047
+ {_showButton(column.id, row) || column.displayAsLink ? (
1048
+ <Link
1049
+ component='button'
1050
+ onClick={() => {
1051
+ _listViewClick(row, column);
1052
+ }}
1053
+ underline='hover'
1054
+ >
1055
+ {column.format && typeof value === 'number' ? column.format(value) : value}
1056
+ </Link>
1057
+ ) : (
1058
+ <>{column.format && typeof value === 'number' ? column.format(value) : value || '---'}</>
1059
+ )}
1060
+ </TableCell>
1061
+ );
1062
+ })}
1063
+ </TableRow>
1064
+ );
1065
+ })}
1065
1066
  </TableBody>
1066
1067
  </Table>
1067
1068
  </TableContainer>
package/tests/assets/sdk-r/components/createAll/override-sdk/template/SimpleTableManual/SimpleTableManual.tsx CHANGED
@@ -258,11 +258,16 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
258
258
  function generateRowsData() {
259
259
  // if referenceList is empty and dataPageName property value exists then make a datapage fetch call and get the list of data.
260
260
  if (!referenceList.length && dataPageName) {
261
- getDataPage(dataPageName, parameters, context).then(listData => {
262
- const data = formatRowsData(listData);
263
- myRows = data;
264
- setRowData(data);
265
- });
261
+ getDataPage(dataPageName, parameters, context)
262
+ .then(listData => {
263
+ const data = formatRowsData(listData);
264
+ myRows = data;
265
+ setRowData(data);
266
+ })
267
+ .catch(e => {
268
+ // eslint-disable-next-line no-console
269
+ console.log(e);
270
+ });
266
271
  } else {
267
272
  // The referenceList prop has the JSON data for each row to be displayed
268
273
  // in the table. So, iterate over referenceList to create the dataRows that