@pega/custom-dx-components 0.23.19 → 0.23.21

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyText/demo.stories.jsx

@@ -1,8 +1,8 @@
+/* eslint-disable react/jsx-no-useless-fragment */
 import { useState } from 'react';
 import { withKnobs } from '@storybook/addon-knobs';
 
-import { stateProps, configProps } from './mock.stories';
-
+import { stateProps, configProps } from './mock';
 import PegaDxilMyText from './index.jsx';
 
 export default {
@@ -11,8 +11,7 @@ export default {
   component: PegaDxilMyText
 };
 
-export const basePegaDxilMyText = () => {
-  // eslint-disable-next-line react-hooks/rules-of-hooks
+export const BasePegaDxilMyText = () => {
   const [value, setValue] = useState(configProps.value);
 
   const props = {
@@ -32,13 +31,23 @@ export const basePegaDxilMyText = () => {
             updateFieldValue: (propName, theValue) => {
               setValue(theValue);
             },
-            triggerFieldChange: () => {/* nothing */}
+            triggerFieldChange: () => {
+              /* nothing */
+            }
           };
         },
-        ignoreSuggestion: () => {/* nothing */},
-        acceptSuggestion: () => {/* nothing */},
-        setInheritedProps: () => {/* nothing */},
-        resolveConfigProps: () => {/* nothing */}
+        ignoreSuggestion: () => {
+          /* nothing */
+        },
+        acceptSuggestion: () => {
+          /* nothing */
+        },
+        setInheritedProps: () => {
+          /* nothing */
+        },
+        resolveConfigProps: () => {
+          /* nothing */
+        }
       };
     }
   };

package/tests/assets/components/createAll/{Launchpad/Pega_DXIL_MyText/mock.stories.js → Constellation/Pega_DXIL_MyText/mock.js}

@@ -1,3 +1,5 @@
+/* eslint-disable storybook/default-exports */
+/* eslint-disable storybook/prefer-pascal-case */
 export const configProps = {
   value: '',
   label: 'Text Sample',

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyText/styles.js

@@ -1,3 +1,4 @@
+
 // utilizing theming, comment out, if want individual style
 import styled from 'styled-components';
 import { Configuration } from '@pega/cosmos-react-core';

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyTextInput/StatusWork.jsx

@@ -1,25 +1,25 @@
-import { Status } from "@pega/cosmos-react-core";
+import { Status } from '@pega/cosmos-react-core';
 
 export default function StatusWorkRenderer({ value }) {
-  let variant = "info";
+  let variant = 'info';
 
-  const warnStrings = ["fail", "cancel", "reject", "revoke", "stopped", "warn"];
-  const infoStrings = ["open", "hold", "info", "new"];
-  const successStrings = ["resolved", "completed", "success"];
-  const pendingStrings = ["pending"];
+  const warnStrings = ['fail', 'cancel', 'reject', 'revoke', 'stopped', 'warn'];
+  const infoStrings = ['open', 'hold', 'info', 'new'];
+  const successStrings = ['resolved', 'completed', 'success'];
+  const pendingStrings = ['pending'];
 
-  if (new RegExp(warnStrings.join("|"), "i").test(value)) {
-    variant = "warn";
-  } else if (new RegExp(infoStrings.join("|"), "i").test(value)) {
-    variant = "info";
-  } else if (new RegExp(successStrings.join("|"), "i").test(value)) {
-    variant = "success";
-  } else if (new RegExp(pendingStrings.join("|"), "i").test(value)) {
-    variant = "pending";
+  if (new RegExp(warnStrings.join('|'), 'i').test(value)) {
+    variant = 'warn';
+  } else if (new RegExp(infoStrings.join('|'), 'i').test(value)) {
+    variant = 'info';
+  } else if (new RegExp(successStrings.join('|'), 'i').test(value)) {
+    variant = 'success';
+  } else if (new RegExp(pendingStrings.join('|'), 'i').test(value)) {
+    variant = 'pending';
   }
 
   return (
-    <Status type="rectangle" variant={variant}>
+    <Status type='rectangle' variant={variant}>
       {value}
     </Status>
   );

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyTextInput/demo.stories.jsx

@@ -1,8 +1,10 @@
+/* eslint-disable storybook/prefer-pascal-case */
+/* eslint-disable react/jsx-no-useless-fragment */
 import { withKnobs } from '@storybook/addon-knobs';
 
 import PegaDxilMyTextInput from './index.jsx';
 
-import { stateProps, fieldMetadata, configProps } from './mock.stories';
+import { stateProps, fieldMetadata, configProps } from './mock';
 
 export default {
   title: 'PegaDxilMyTextInput',
@@ -10,8 +12,7 @@ export default {
   component: PegaDxilMyTextInput
 };
 
-export const basePegaDxilMyTextInput = () => {
-
+export const BasePegaDxilMyTextInput = () => {
   const props = {
     value: configProps.value,
     placeholder: configProps.placeholder,
@@ -28,14 +29,26 @@ export const basePegaDxilMyTextInput = () => {
         },
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {/* nothing */},
-            triggerFieldChange: () => {/* nothing */}
+            updateFieldValue: () => {
+              /* nothing */
+            },
+            triggerFieldChange: () => {
+              /* nothing */
+            }
           };
         },
-        ignoreSuggestion: () => {/* nothing */},
-        acceptSuggestion: () => {/* nothing */},
-        setInheritedProps: () => {/* nothing */},
-        resolveConfigProps: () => {/* nothing */}
+        ignoreSuggestion: () => {
+          /* nothing */
+        },
+        acceptSuggestion: () => {
+          /* nothing */
+        },
+        setInheritedProps: () => {
+          /* nothing */
+        },
+        resolveConfigProps: () => {
+          /* nothing */
+        }
       };
     }
   };

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyTextInput/index.jsx

@@ -100,7 +100,7 @@ const PegaDxilMyTextInput = props => {
     } else if (!hasSuggestions && status !== 'success') {
       setStatus(validatemessage !== '' ? 'error' : undefined);
     }
-  }, [validatemessage, hasSuggestions]);
+  }, [validatemessage, hasSuggestions, status]);
 
   const onResolveSuggestionHandler = (accepted) => {
     suggestionsHandler(accepted, pConn, setStatus);

package/{src/tasks/create/templates/Constellation/Field/Text-Input/mock.stories.js.mustache → tests/assets/components/createAll/Constellation/Pega_DXIL_MyTextInput/mock.js}

@@ -1,3 +1,5 @@
+/* eslint-disable storybook/default-exports */
+/* eslint-disable storybook/prefer-pascal-case */
 export const configProps = {
   value: '',
   label: 'TextInput Sample',

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyTextInput/styles.js

@@ -1,3 +1,4 @@
+
 // utilizing theming, comment out, if want individual style
 import styled from 'styled-components';
 import { Configuration } from '@pega/cosmos-react-core';

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyTextInput/suggestions-handler.js

@@ -1,4 +1,3 @@
-/* eslint-disable import/prefer-default-export */
 export const suggestionsHandler = (accepted, pConn, setStatus) => {
   if (accepted) {
     pConn.acceptSuggestion();

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyTimeOfDay/demo.stories.jsx

@@ -1,5 +1,8 @@
+/* eslint-disable storybook/prefer-pascal-case */
+/* eslint-disable react/jsx-no-useless-fragment */
 import { withKnobs } from '@storybook/addon-knobs';
-import { configProps, stateProps } from './mock.stories';
+
+import { configProps, stateProps } from './mock';
 import PegaDxilMyTimeOfDay from './index.jsx';
 
 export default {
@@ -8,19 +11,25 @@ export default {
   component: PegaDxilMyTimeOfDay
 };
 
-export const basePegaDxilMyTimeOfDay = () => {
+export const BasePegaDxilMyTimeOfDay = () => {
   const props = {
     getPConnect: () => {
       return {
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {/* nothing */},
-            triggerFieldChange: () => {/* nothing */}
+            updateFieldValue: () => {
+              /* nothing */
+            },
+            triggerFieldChange: () => {
+              /* nothing */
+            }
           };
         },
         getValidationApi: () => {
           return {
-            validate: () => {/* nothing */}
+            validate: () => {
+              /* nothing */
+            }
           };
         },
         getStateProps: () => {
@@ -29,8 +38,12 @@ export const basePegaDxilMyTimeOfDay = () => {
         getConfigProps: () => {
           return configProps;
         },
-        ignoreSuggestion: () => {/* nothing */},
-        clearErrorMessages: () => {/* nothing */}
+        ignoreSuggestion: () => {
+          /* nothing */
+        },
+        clearErrorMessages: () => {
+          /* nothing */
+        }
       };
     },
     value: configProps.value,

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyTimeOfDay/index.jsx

@@ -58,7 +58,7 @@ const PegaDxilMyTimeOfDay = props => {
     } else if (!hasSuggestions && status !== 'success') {
       setStatus(validatemessage !== '' ? 'error' : undefined);
     }
-  }, [validatemessage, hasSuggestions]);
+  }, [validatemessage, hasSuggestions, status]);
 
   const onResolveSuggestionHandler = (accepted) => {
     suggestionsHandler(accepted, pConn, setStatus);

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyTimeOfDay/{mock.stories.js → mock.js}

@@ -1,3 +1,5 @@
+/* eslint-disable storybook/default-exports */
+/* eslint-disable storybook/prefer-pascal-case */
 export const configProps = {
   value: '13:30',
   validatemessage: '',

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyTimeOfDay/styles.js

@@ -1,3 +1,4 @@
+
 // utilizing theming, comment out, if want individual style
 import styled from 'styled-components';
 import { Configuration } from '@pega/cosmos-react-core';

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyTimeOfDay/suggestions-handler.js

@@ -1,4 +1,3 @@
-/* eslint-disable import/prefer-default-export */
 export const suggestionsHandler = (accepted, pConn, setStatus) => {
   if (accepted) {
     pConn.acceptSuggestion();

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyTimeOfDay/time-of-day.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-undef */
 import dayjs from "dayjs";
 import relativeTime from 'dayjs/plugin/relativeTime.js';
 import localizedFormat from 'dayjs/plugin/localizedFormat.js';

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyTwoColumnDetails/demo.stories.jsx

@@ -1,6 +1,7 @@
+/* eslint-disable storybook/prefer-pascal-case */
 import { Text, FieldValueList, Button, DateTimeDisplay, useTheme } from '@pega/cosmos-react-core';
 import PegaDxilMyTwoColumnDetails from './index';
-import { pyReviewRaw, pyReviewResolved, regionChildrenResolved } from './mock.stories';
+import { pyReviewRaw, pyReviewResolved, regionChildrenResolved } from './mock';
 import StatusWorkRenderer from './StatusWork.jsx';
 
 export default {
@@ -74,7 +75,7 @@ const renderField = resolvedProps => {
   return <FieldValueList variant={variant} fields={[{ name: label, value: val }]} key={key} />;
 };
 
-export const basePegaDxilMyTwoColumnDetails = () => {
+export const BasePegaDxilMyTwoColumnDetails = () => {
   const props = {
     template: 'MyCo_MyComponents_NewDetailsTemplate',
     showHighlightedData: true,
@@ -95,7 +96,6 @@ export const basePegaDxilMyTwoColumnDetails = () => {
           return pyReviewRaw.config.inheritedProps;
         },
         createComponent: config => {
-          // eslint-disable-next-line default-case
           switch (config.config.value) {
             case '@P .pyStatusWork':
               return renderField(pyReviewResolved.highlightedData[0].config);

package/tests/assets/components/createAll/{Launchpad/Pega_DXIL_MyTwoColumnDetails/mock.stories.js → Constellation/Pega_DXIL_MyTwoColumnDetails/mock.js}

@@ -1,3 +1,5 @@
+/* eslint-disable storybook/default-exports */
+/* eslint-disable storybook/prefer-pascal-case */
 export const pyReviewRaw = {
   name: 'pyReview',
   type: 'View',

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyTwoColumnDetails/styles.js

@@ -1,3 +1,4 @@
+
 // utilizing theming, comment out, if want individual style
 import styled from 'styled-components';
 import { Configuration } from '@pega/cosmos-react-core';

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyTwoColumnDetails/utils.js

@@ -1,5 +1,3 @@
-/* eslint-disable no-undef */
-
 
 
 /**
@@ -139,9 +137,7 @@ export function getInstructions(pConnect, instructions = 'casestep') {
 
   // If the annotation wasn't processed correctly, don't return any instruction text
   if (instructions?.startsWith('@PARAGRAPH')) {
-     /* eslint-disable no-console */
     console.error('@PARAGRAPH annotation was not processed. Hiding custom instructions.');
-     /* eslint-enable no-console */
     return undefined;
   }
 

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyTwoColumnForm/demo.stories.jsx

@@ -1,11 +1,12 @@
 /* eslint-disable react-hooks/rules-of-hooks */
+/* eslint-disable storybook/prefer-pascal-case */
 import { useState } from 'react';
 import { withKnobs } from '@storybook/addon-knobs';
 
 import PegaDxilMyTwoColumnForm from './index.jsx';
 import { DateInput, Input, FieldValueList, Text } from '@pega/cosmos-react-core';
 import { PhoneInput as CosmosPhone } from '@pega/cosmos-react-core';
-import { pyReviewRaw, regionChildrenResolved } from './mock.stories';
+import { pyReviewRaw, regionChildrenResolved } from './mock';
 
 export default {
   title: 'PegaDxilMyTwoColumnForm',
@@ -19,7 +20,6 @@ const renderField = resolvedProps => {
   const [inputValue, setInputValue] = useState(value);
   const [phoneValue, setPhoneValue] = useState('+16397975093');
 
-
   const variant = displayMode === 'LABELS_LEFT' ? 'inline' : 'stacked';
 
   let val =
@@ -38,7 +38,6 @@ const renderField = resolvedProps => {
       ''
     );
 
-
   if (label === 'Service Date')
     val = (
       <DateInput
@@ -50,7 +49,7 @@ const renderField = resolvedProps => {
           const trimmedDate = date ? date.substring(0, date.indexOf('T')) : date;
           setInputValue(trimmedDate);
         }}
-      ></DateInput>
+      />
     );
 
   if (label === 'Email')
@@ -63,7 +62,7 @@ const renderField = resolvedProps => {
         onChange={e => {
           setInputValue(e.target.value);
         }}
-      ></Input>
+      />
     );
 
   if (label === 'First Name' || label === 'Last Name' || label === 'Middle Name')
@@ -75,7 +74,7 @@ const renderField = resolvedProps => {
         onChange={e => {
           setInputValue(e.target.value);
         }}
-      ></Input>
+      />
     );
 
   if (label === 'Phone Number')
@@ -88,10 +87,9 @@ const renderField = resolvedProps => {
         onChange={phoneVal => {
           setPhoneValue(phoneVal);
         }}
-      ></CosmosPhone>
+      />
     );
 
-
   if (variant === 'inline') {
     val = value || (
       <span
@@ -130,7 +128,7 @@ const renderField = resolvedProps => {
   );
 };
 
-export const basePegaDxilMyTwoColumnForm = () => {
+export const BasePegaDxilMyTwoColumnForm = () => {
   const props = {
     template: 'DefaultForm',
     getPConnect: () => {
@@ -142,7 +140,6 @@ export const basePegaDxilMyTwoColumnForm = () => {
           return pyReviewRaw.config.inheritedProps;
         },
         createComponent: config => {
-          // eslint-disable-next-line default-case
           switch (config.config.value) {
             case '@P .FirstName':
               return renderField(regionChildrenResolved[0]);

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyTwoColumnForm/{mock.stories.js → mock.js}

@@ -1,3 +1,5 @@
+/* eslint-disable storybook/default-exports */
+/* eslint-disable storybook/prefer-pascal-case */
 export const pyReviewRaw = {
   name: 'CollectInformation',
   type: 'View',

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyTwoColumnForm/styles.js

@@ -1,3 +1,4 @@
+
 // utilizing theming, comment out, if want individual style
 import styled from 'styled-components';
 import { Configuration } from '@pega/cosmos-react-core';

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyURL/demo.stories.jsx

@@ -1,7 +1,9 @@
+/* eslint-disable storybook/prefer-pascal-case */
+/* eslint-disable react/jsx-no-useless-fragment */
 import { withKnobs } from '@storybook/addon-knobs';
 
 import PegaDxilMyUrl from './index.jsx';
-import { stateProps, configProps } from './mock.stories';
+import { stateProps, configProps } from './mock';
 
 export default {
   title: 'PegaDxilMyUrl',
@@ -9,8 +11,7 @@ export default {
   component: PegaDxilMyUrl
 };
 
-export const basePegaDxilMyUrl = () => {
-
+export const BasePegaDxilMyUrl = () => {
   const props = {
     value: configProps.value,
     placeholder: configProps.placeholder,
@@ -26,14 +27,26 @@ export const basePegaDxilMyUrl = () => {
         },
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {/* nothing */},
-            triggerFieldChange: () => {/* nothing */}
+            updateFieldValue: () => {
+              /* nothing */
+            },
+            triggerFieldChange: () => {
+              /* nothing */
+            }
           };
         },
-        ignoreSuggestion: () => {/* nothing */},
-        acceptSuggestion: () => {/* nothing */},
-        setInheritedProps: () => {/* nothing */},
-        resolveConfigProps: () => {/* nothing */}
+        ignoreSuggestion: () => {
+          /* nothing */
+        },
+        acceptSuggestion: () => {
+          /* nothing */
+        },
+        setInheritedProps: () => {
+          /* nothing */
+        },
+        resolveConfigProps: () => {
+          /* nothing */
+        }
       };
     }
   };

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyURL/index.jsx

@@ -66,7 +66,7 @@ const PegaDxilMyUrl = props => {
     } else if (!hasSuggestions && status !== 'success') {
       setStatus(validatemessage !== '' ? 'error' : undefined);
     }
-  }, [validatemessage, hasSuggestions]);
+  }, [validatemessage, hasSuggestions, status]);
 
   let displayComp = null;
   if (displayMode) {

package/tests/assets/components/createAll/{Launchpad/Pega_DXIL_MyURL/mock.stories.js → Constellation/Pega_DXIL_MyURL/mock.js}

@@ -1,3 +1,5 @@
+/* eslint-disable storybook/default-exports */
+/* eslint-disable storybook/prefer-pascal-case */
 export const configProps = {
   value: '',
   label: 'URL Sample',

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyURL/styles.js

@@ -1,3 +1,4 @@
+
 // utilizing theming, comment out, if want individual style
 import styled from 'styled-components';
 import { Configuration } from '@pega/cosmos-react-core';

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyURL/suggestions-handler.js

@@ -1,4 +1,3 @@
-/* eslint-disable import/prefer-default-export */
 export const suggestionsHandler = (accepted, pConn, setStatus) => {
   if (accepted) {
     pConn.acceptSuggestion();

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyURL/text-url.jsx

@@ -1,3 +1,5 @@
+
+/* eslint-disable react/jsx-fragments */
 import { useState, useRef, React} from "react";
 import { EmailDisplay, PhoneDisplay, URLDisplay, Image, Button, Lightbox } from '@pega/cosmos-react-core';
 

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyAutocomplete/component-constants.js

@@ -0,0 +1,5 @@
+export default {
+  PROPERTY_REFERENCE: 'propertyRef',
+  WORK_BASKET: 'workbasket',
+  WORK_QUEUE: 'workqueue'
+};

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyAutocomplete/config.json

@@ -0,0 +1,115 @@
+{
+  "name": "Pega_DXIL_MyAutocomplete",
+  "label": "My Autocomplete",
+  "description": "My Autocomplete",
+  "organization": "Pega",
+  "version": "0.0.1",
+  "library": "DXIL",
+  "allowedApplications": [],
+  "componentKey": "Pega_DXIL_MyAutocomplete",
+  "type": "Field",
+  "subtype": "Picklist",
+  "icon": "images/pz-dropdown-active.svg",
+  "properties": [
+    {
+      "name": "label",
+      "label": "Field label",
+      "format": "TEXT",
+      "required": true
+    },
+    {
+      "name": "readOnly",
+      "label": "Edit mode",
+      "format": "READONLY"
+    },
+    {
+      "label": "Column settings",
+      "format": "GROUP",
+      "visibility": "@VIEWTYPE == 'MultiRecordDisplayAsTable'",
+      "properties": [
+        {
+          "name": "columnWidth",
+          "label": "Column width",
+          "format": "SELECT",
+          "source": [
+            {
+              "key": "auto",
+              "value": "Auto"
+            },
+            {
+              "key": "custom",
+              "value": "Custom"
+            }
+          ]
+        },
+        {
+          "name": "width",
+          "label": "Width (px)",
+          "format": "NUMBER",
+          "visibility": "$this.columnWidth == 'custom'"
+        }
+      ]
+    },
+    {
+      "label": "Input settings",
+      "format": "GROUP",
+      "visibility": "(!readOnly = true)",
+      "properties": [
+        {
+          "name": "placeholder",
+          "label": "Placeholder",
+          "format": "TEXT"
+        },
+        {
+          "name": "helperText",
+          "label": "Helper text",
+          "format": "TEXT"
+        }
+      ]
+    },
+    {
+      "label": "Conditions",
+      "format": "GROUP",
+      "properties": [
+        {
+          "name": "required",
+          "label": "Required",
+          "format": "REQUIRED",
+          "visibility": "(!readOnly = true)"
+        },
+        {
+          "name": "disabled",
+          "label": "Disabled",
+          "format": "DISABLED",
+          "visibility": "(!readOnly = true)"
+        },
+        {
+          "name": "visibility",
+          "label": "Visibility",
+          "format": "VISIBILITY"
+        }
+      ]
+    },
+    {
+      "label": "Advanced",
+      "format": "GROUP",
+      "collapsible": true,
+      "properties": [
+        {
+          "name": "testId",
+          "label": "Test ID",
+          "format": "TEXT",
+          "ignorePattern": "[^-_\\p{N}\\p{L}]",
+          "includeAnnotations": false
+        }
+      ]
+    }
+  ],
+  "defaultConfig": {
+    "label": "@L $this.label",
+    "placeholder": "@L Select...",
+    "listType": "associated",
+    "datasource": "@ASSOCIATED .$this.name",
+    "deferDatasource": true
+  }
+}