@pega/dx-component-builder-sdk 0.24.1 → 0.24.2

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 (88) hide show
  1. package/package.json +1 -1
  2. package/src/tasks/create/templates/Constellation/field/Icon-Button-URL/demo.stories.tsx.mustache +1 -1
  3. package/src/tasks/create/templates/Constellation/field/Picklist/index.tsx.mustache +0 -1
  4. package/src/tasks/create/templates/Constellation/field/Picklist-Autocomplete/date.ts.mustache +15 -37
  5. package/src/tasks/create/templates/Constellation/template/DETAILS/HighlightRender.tsx.mustache +2 -2
  6. package/src/tasks/create/templates/Constellation/template/DETAILS-region/HighlightRender.tsx.mustache +2 -2
  7. package/src/tasks/create/templates/Constellation/template/DETAILS-region/index.tsx.mustache +1 -1
  8. package/src/tasks/create/templates/SDK-Angular/field/Boolean/boolean.component.html.mustache +19 -18
  9. package/src/tasks/create/templates/SDK-Angular/field/Boolean/boolean.component.ts.mustache +127 -44
  10. package/src/tasks/create/templates/SDK-Angular/field/Icon-Button-URL/demo.stories.tsx.mustache +36 -15
  11. package/src/tasks/create/templates/SDK-Angular/field/Icon-Button-URL/icon-button-url.component.html.mustache +40 -0
  12. package/src/tasks/create/templates/SDK-Angular/field/Icon-Button-URL/{text-url.component.scss.mustache → icon-button-url.component.scss.mustache} +4 -0
  13. package/src/tasks/create/templates/SDK-Angular/field/Icon-Button-URL/icon-button-url.component.ts.mustache +195 -0
  14. package/src/tasks/create/templates/SDK-Angular/field/Icon-Button-URL/mock.ts.mustache +32 -12
  15. package/src/tasks/create/templates/SDK-Angular/field/Text-URL/text-url.component.html.mustache +1 -0
  16. package/src/tasks/create/templates/SDK-Angular/field/Text-URL/text-url.component.ts.mustache +2 -0
  17. package/src/tasks/create/templates/SDK-Angular/field/TimeOfDay/time-of-day.component.html.mustache +1 -0
  18. package/src/tasks/create/templates/SDK-Angular/field/TimeOfDay/time-of-day.component.ts.mustache +2 -0
  19. package/src/tasks/create/templates/SDK-Angular/template/FORM-region/form.component.scss.mustache +1 -1
  20. package/src/tasks/create/templates/SDK-Angular/widget/CASE/case.component.ts.mustache +2 -2
  21. package/src/tasks/create/templates/SDK-Angular/widget/PAGE/page.component.html.mustache +1 -1
  22. package/src/tasks/create/templates/SDK-React/field/Boolean/demo.stories.tsx.mustache +1 -1
  23. package/src/tasks/create/templates/SDK-React/field/Boolean/mock.ts.mustache +8 -8
  24. package/src/tasks/create/templates/SDK-React/field/Date/index.tsx.mustache +2 -2
  25. package/src/tasks/create/templates/SDK-React/field/Date/mock.ts.mustache +7 -7
  26. package/src/tasks/create/templates/SDK-React/field/DateTime/demo.stories.tsx.mustache +1 -1
  27. package/src/tasks/create/templates/SDK-React/field/DateTime/index.tsx.mustache +2 -3
  28. package/src/tasks/create/templates/SDK-React/field/DateTime/mock.ts.mustache +6 -6
  29. package/src/tasks/create/templates/SDK-React/field/Decimal/index.tsx.mustache +51 -35
  30. package/src/tasks/create/templates/SDK-React/field/Decimal/mock.ts.mustache +1 -1
  31. package/src/tasks/create/templates/SDK-React/field/Decimal-Currency/config.json.mustache +1 -1
  32. package/src/tasks/create/templates/SDK-React/field/Decimal-Currency/demo.stories.tsx.mustache +1 -1
  33. package/src/tasks/create/templates/SDK-React/field/Decimal-Currency/index.tsx.mustache +47 -37
  34. package/src/tasks/create/templates/SDK-React/field/Decimal-Currency/mock.ts.mustache +1 -1
  35. package/src/tasks/create/templates/SDK-React/field/Decimal-Percentage/config.json.mustache +1 -1
  36. package/src/tasks/create/templates/SDK-React/field/Decimal-Percentage/index.tsx.mustache +36 -21
  37. package/src/tasks/create/templates/SDK-React/field/Decimal-Percentage/mock.ts.mustache +1 -1
  38. package/src/tasks/create/templates/SDK-React/field/Icon-Button-URL/demo.stories.tsx.mustache +58 -25
  39. package/src/tasks/create/templates/SDK-React/field/Icon-Button-URL/index.tsx.mustache +134 -53
  40. package/src/tasks/create/templates/SDK-React/field/Icon-Button-URL/mock.ts.mustache +2 -14
  41. package/src/tasks/create/templates/SDK-React/field/Integer/config.json.mustache +1 -1
  42. package/src/tasks/create/templates/SDK-React/field/Integer/index.tsx.mustache +19 -20
  43. package/src/tasks/create/templates/SDK-React/field/Integer/mock.ts.mustache +1 -1
  44. package/src/tasks/create/templates/SDK-React/field/Picklist/index.tsx.mustache +26 -26
  45. package/src/tasks/create/templates/SDK-React/field/Picklist-RadioButtons/mock.ts.mustache +0 -1
  46. package/src/tasks/create/templates/SDK-React/field/Text/config.json.mustache +1 -1
  47. package/src/tasks/create/templates/SDK-React/field/Text/index.tsx.mustache +0 -1
  48. package/src/tasks/create/templates/SDK-React/field/Text/mock.ts.mustache +1 -1
  49. package/src/tasks/create/templates/SDK-React/field/Text-Email/config.json.mustache +1 -1
  50. package/src/tasks/create/templates/SDK-React/field/Text-Email/mock.ts.mustache +1 -1
  51. package/src/tasks/create/templates/SDK-React/field/Text-Input/config.json.mustache +1 -1
  52. package/src/tasks/create/templates/SDK-React/field/Text-Input/index.tsx.mustache +0 -1
  53. package/src/tasks/create/templates/SDK-React/field/Text-Input/mock.ts.mustache +1 -1
  54. package/src/tasks/create/templates/SDK-React/field/Text-Paragraph/index.tsx.mustache +1 -3
  55. package/src/tasks/create/templates/SDK-React/field/Text-Paragraph/mock.ts.mustache +1 -1
  56. package/src/tasks/create/templates/SDK-React/field/Text-Phone/index.tsx.mustache +1 -2
  57. package/src/tasks/create/templates/SDK-React/field/Text-URL/index.tsx.mustache +1 -2
  58. package/src/tasks/create/templates/SDK-React/field/Text-URL/mock.ts.mustache +1 -1
  59. package/src/tasks/create/templates/SDK-React/field/TimeOfDay/demo.stories.tsx.mustache +4 -4
  60. package/src/tasks/create/templates/SDK-React/field/TimeOfDay/index.tsx.mustache +0 -2
  61. package/src/tasks/create/templates/SDK-React/field/TimeOfDay/mock.ts.mustache +6 -6
  62. package/src/tasks/create/templates/SDK-React/template/DETAILS/demo.stories.tsx.mustache +1 -4
  63. package/src/tasks/create/templates/SDK-React/template/DETAILS/index.tsx.mustache +3 -8
  64. package/src/tasks/create/templates/SDK-React/template/DETAILS/mock.ts.mustache +181 -165
  65. package/src/tasks/create/templates/SDK-React/template/DETAILS-region/demo.stories.tsx.mustache +1 -3
  66. package/src/tasks/create/templates/SDK-React/template/DETAILS-region/index.tsx.mustache +3 -8
  67. package/src/tasks/create/templates/SDK-React/template/DETAILS-region/mock.ts.mustache +207 -163
  68. package/src/tasks/create/templates/SDK-React/template/FORM/config.json.mustache +1 -1
  69. package/src/tasks/create/templates/SDK-React/template/FORM/demo.stories.tsx.mustache +0 -1
  70. package/src/tasks/create/templates/SDK-React/template/FORM/index.tsx.mustache +14 -16
  71. package/src/tasks/create/templates/SDK-React/template/FORM/utils.ts.mustache +1 -1
  72. package/src/tasks/create/templates/SDK-React/template/FORM-region/demo.stories.tsx.mustache +0 -2
  73. package/src/tasks/create/templates/SDK-React/template/FORM-region/mock.ts.mustache +121 -122
  74. package/src/tasks/create/templates/SDK-React/template/PAGE/OneColumn.tsx.mustache +12 -13
  75. package/src/tasks/create/templates/SDK-React/template/PAGE/demo.stories.tsx.mustache +1 -1
  76. package/src/tasks/create/templates/SDK-React/template/PAGE/index.tsx.mustache +3 -5
  77. package/src/tasks/create/templates/SDK-React/template/PAGE/mock.ts.mustache +8 -9
  78. package/src/tasks/create/templates/SDK-React/widget/CASE/config.json.mustache +2 -2
  79. package/src/tasks/create/templates/SDK-React/widget/CASE/demo.stories.tsx.mustache +0 -1
  80. package/src/tasks/create/templates/SDK-React/widget/CASE/index.tsx.mustache +3 -3
  81. package/src/tasks/create/templates/SDK-React/widget/PAGE/config.json.mustache +43 -43
  82. package/src/tasks/create/templates/SDK-React/widget/PAGE/mock.ts.mustache +1 -1
  83. package/src/tasks/create/templates/SDK-React/widget/PAGE-CASE/demo.stories.tsx.mustache +1 -2
  84. package/src/tasks/create/templates/SDK-React/widget/PAGE-CASE/index.tsx.mustache +0 -1
  85. package/src/tasks/create/templates/SDK-React/widget/PAGE-CASE/mock.ts.mustache +0 -1
  86. package/src/tasks/create/templates/SDK-Angular/field/Icon-Button-URL/text-url.component.html.mustache +0 -29
  87. package/src/tasks/create/templates/SDK-Angular/field/Icon-Button-URL/text-url.component.ts.mustache +0 -179
  88. /package/src/tasks/create/templates/SDK-Angular/field/Icon-Button-URL/{text-url.component.spec.ts.mustache → icon-button-url.component.spec.ts.mustache} +0 -0
@@ -18,4 +18,4 @@ export const fieldMetadata = {
18
18
  type: 'Integer',
19
19
  displayAs: 'pxInteger',
20
20
  label: 'Integer sample'
21
- };
21
+ };
@@ -62,6 +62,7 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
62
62
  // Duplicated runtime code from React SDK
63
63
 
64
64
  // props passed in combination of props from property panel (config.json) and run time props from Constellation
65
+ // eslint-disable-next-line sonarjs/cognitive-complexity
65
66
  export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
66
67
  // Get emitted components from map (so we can get any override that may exist)
67
68
  const FieldValueList = getComponentFromMap('FieldValueList');
@@ -212,32 +213,31 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
212
213
  // So, hold off on rendering anything until options are available...
213
214
  return options.length === 0 ? null : (
214
215
  <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
215
- <TextField
216
- fullWidth
217
- variant={readOnly ? 'standard' : 'outlined'}
218
- helperText={helperTextToDisplay}
219
- placeholder={thePConn.getLocalizedValue(placeholder, '', '')} // 2nd and 3rd args empty string until typedef marked correctly
220
- size='small'
221
- required={required}
222
- disabled={disabled}
223
- onChange={!readOnly ? handleChange : undefined}
224
- error={status === 'error'}
225
- label={label}
226
- value={value === '' && !readOnly ? placeholder : value}
227
- select
228
- {{! pick new delimiters for mustache }}
229
- {{=<% %>=}}
230
- InputProps={{ ...readOnlyProp, ...testProp }}
231
- <%={{ }}=%> {{! revert delimiters for mustache }}
232
- >
233
- {options.map((option: any) => (
234
- <MenuItem key={option.key} value={option.key}>
235
- {/* @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv' */}
236
- {thePConn.getLocalizedValue(option.value, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName))}
237
- </MenuItem>
238
- ))}
239
- </TextField>
216
+ <TextField
217
+ fullWidth
218
+ variant={readOnly ? 'standard' : 'outlined'}
219
+ helperText={helperTextToDisplay}
220
+ placeholder={thePConn.getLocalizedValue(placeholder, '', '')} // 2nd and 3rd args empty string until typedef marked correctly
221
+ size='small'
222
+ required={required}
223
+ disabled={disabled}
224
+ onChange={!readOnly ? handleChange : undefined}
225
+ error={status === 'error'}
226
+ label={label}
227
+ value={value === '' && !readOnly ? placeholder : value}
228
+ select
229
+ {{! pick new delimiters for mustache }}
230
+ {{=<% %>=}}
231
+ InputProps={{ ...readOnlyProp, ...testProp }}
232
+ <%={{ }}=%> {{! revert delimiters for mustache }}
233
+ >
234
+ {options.map((option: any) => (
235
+ <MenuItem key={option.key} value={option.key}>
236
+ {/* @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv' */}
237
+ {thePConn.getLocalizedValue(option.value, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName))}
238
+ </MenuItem>
239
+ ))}
240
+ </TextField>
240
241
  </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
241
242
  );
242
243
  }
243
-
@@ -42,7 +42,6 @@ export const rawMetadata = {
42
42
  }
43
43
  };
44
44
 
45
-
46
45
  export const stateProps = {
47
46
  value: '.PicklistRadioButtonsSample',
48
47
  placeholder: 'Select...',
@@ -10,7 +10,7 @@
10
10
  "type": "{{TYPE}}",
11
11
  "subtype": {{{SUB_TYPE}}},
12
12
  "icon": "images/pz-url-active.svg",
13
- "properties": [
13
+ "properties": [
14
14
  {
15
15
  "name": "label",
16
16
  "label": "Field label",
@@ -101,4 +101,3 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
101
101
  </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
102
102
  );
103
103
  }
104
-
@@ -13,4 +13,4 @@ export const configProps = {
13
13
  status: '',
14
14
  hideLabel: false,
15
15
  validatemessage: ''
16
- };
16
+ };
@@ -10,7 +10,7 @@
10
10
  "type": "{{TYPE}}",
11
11
  "subtype": {{{SUB_TYPE}}},
12
12
  "icon": "images/pz-email-active.svg",
13
- "properties": [
13
+ "properties": [
14
14
  {
15
15
  "name": "label",
16
16
  "label": "Field label",
@@ -12,4 +12,4 @@ export const configProps = {
12
12
  disabled: false,
13
13
  displayMode: '',
14
14
  validatemessage: ''
15
- };
15
+ };
@@ -10,7 +10,7 @@
10
10
  "type": "{{TYPE}}",
11
11
  "subtype": {{{SUB_TYPE}}},
12
12
  "icon": "images/pz-url-active.svg",
13
- "properties": [
13
+ "properties": [
14
14
  {
15
15
  "name": "label",
16
16
  "label": "Field label",
@@ -101,4 +101,3 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
101
101
  </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
102
102
  );
103
103
  }
104
-
@@ -19,4 +19,4 @@ export const fieldMetadata = {
19
19
  maxLength: 256,
20
20
  displayAs: 'pxTextInput',
21
21
  label: 'TextInput Sample'
22
- };
22
+ };
@@ -9,7 +9,6 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
9
9
  fieldMetadata?: any;
10
10
  }
11
11
 
12
-
13
12
  // Duplicated runtime code from React SDK
14
13
 
15
14
  // props passed in combination of props from property panel (config.json) and run time props from Constellation
@@ -83,7 +82,6 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
83
82
  InputProps={{ ...readOnlyProp, inputProps: { maxLength, ...testProp } }}
84
83
  <%={{ }}=%> {{! revert delimiters for mustache }}
85
84
  />
86
- </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
85
+ </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
87
86
  );
88
87
  }
89
-
@@ -19,4 +19,4 @@ export const fieldMetadata = {
19
19
  displayAs: 'pxTextArea',
20
20
  label: 'Paragraph sample',
21
21
  maxLength: 256
22
- };
22
+ };
@@ -73,7 +73,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
73
73
  <%={{ }}=%> {{! revert delimiters for mustache }}
74
74
  disableDropdown={disableDropdown}
75
75
  />
76
- </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
76
+ </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
77
77
  </div>
78
78
  );
79
79
  }
@@ -114,4 +114,3 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
114
114
  </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
115
115
  );
116
116
  }
117
-
@@ -73,7 +73,6 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
73
73
  InputProps={{ inputProps: { ...testProp } }}
74
74
  <%={{ }}=%> {{! revert delimiters for mustache }}
75
75
  />
76
- </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
76
+ </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
77
77
  );
78
78
  }
79
-
@@ -13,4 +13,4 @@ export const configProps = {
13
13
  status: '',
14
14
  hideLabel: false,
15
15
  validatemessage: ''
16
- };
16
+ };
@@ -4,14 +4,14 @@ import type { Meta, StoryObj } from '@storybook/react';
4
4
  import {{COMPONENT_CLASS_NAME}} from './index';
5
5
  import { configProps, stateProps } from './mock';
6
6
 
7
- const meta: Meta<typeof {{COMPONENT_CLASS_NAME}} > = {
8
- title: '{{COMPONENT_CLASS_NAME}} ',
9
- component: {{COMPONENT_CLASS_NAME}} ,
7
+ const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
8
+ title: '{{COMPONENT_CLASS_NAME}}',
9
+ component: {{COMPONENT_CLASS_NAME}},
10
10
  excludeStories: /.*Data$/
11
11
  };
12
12
 
13
13
  export default meta;
14
- type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}} >;
14
+ type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
15
15
 
16
16
  export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
17
17
  const [value, setValue] = useState(configProps.value);
@@ -11,7 +11,6 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
11
11
  // If any, enter additional props that only exist on this componentName
12
12
  }
13
13
 
14
-
15
14
  // Duplicated runtime code from React SDK
16
15
 
17
16
  // props passed in combination of props from property panel (config.json) and run time props from Constellation
@@ -87,4 +86,3 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
87
86
  </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
88
87
  );
89
88
  }
90
-
@@ -1,8 +1,8 @@
1
1
  export const configProps = {
2
- value: "",
3
- label: "Time Sample",
4
- helperText: "Time Helper Text",
5
- testId: "time-12345678",
2
+ value: '',
3
+ label: 'Time Sample',
4
+ helperText: 'Time Helper Text',
5
+ testId: 'time-12345678',
6
6
  disabled: false,
7
7
  required: false,
8
8
  readOnly: false,
@@ -13,6 +13,6 @@ export const configProps = {
13
13
  };
14
14
 
15
15
  export const stateProps = {
16
- value: ".TimeSample",
16
+ value: '.TimeSample',
17
17
  hasSuggestions: false
18
- };
18
+ };
@@ -78,7 +78,4 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
78
78
  return <{{COMPONENT_CLASS_NAME}} {...props} {...args} />;
79
79
  };
80
80
 
81
- Base{{COMPONENT_CLASS_NAME}}.args = {
82
- label: 'Details',
83
- showLabel: true
84
- };
81
+ Base{{COMPONENT_CLASS_NAME}}.args = {};
@@ -5,12 +5,10 @@ import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react
5
5
  import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
6
6
  import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
7
7
 
8
- import Styled{{COMPONENT_CLASS_NAME}}Wrapper from "./styles";
8
+ import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
9
9
 
10
10
  interface {{COMPONENT_CLASS_NAME}}Props extends PConnProps {
11
11
  // If any, enter additional props that only exist on this component
12
- label: string;
13
- showLabel: boolean;
14
12
  showHighlightedData: boolean;
15
13
  }
16
14
  // Duplicated runtime code from React SDK
@@ -19,10 +17,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
19
17
  // Get emitted components from map (so we can get any override that may exist)
20
18
  const FieldGroup = getComponentFromMap('FieldGroup');
21
19
 
22
- const { label, showLabel, getPConnect, showHighlightedData } = props;
23
-
24
- // Get the inherited props from the parent to determine label settings
25
- const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
20
+ const { getPConnect, showHighlightedData } = props;
26
21
 
27
22
  // Set display mode prop and re-create the children so this part of the dom tree renders
28
23
  // in a readonly (display) mode instead of a editable
@@ -57,7 +52,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
57
52
  <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
58
53
  {{! pick new delimiters for mustache }}
59
54
  {{=<% %>=}}
60
- <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
55
+ <FieldGroup>
61
56
  {showHighlightedData && highlightedDataArr.length > 0 && (
62
57
  <Grid container spacing={1} style={{ padding: '0 0 1em' }}>
63
58
  {highlightedDataArr.map((child, i) => (