@pega/custom-dx-components 0.242.16 → 0.242.18

package/src/tasks/create/templates/Constellation/Template/FORM/demo.stories.tsx.mustache

@@ -1,11 +1,10 @@
-
 /* eslint-disable react/jsx-no-useless-fragment */
 // @ts-nocheck
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import {{COMPONENT_CLASS_NAME}} from './index';
-import { DateInput, Input, FieldValueList, Text } from '@pega/cosmos-react-core';
+import { DateInput, Input, FieldValueList, Text, EmptyState } from '@pega/cosmos-react-core';
 import { PhoneInput as CosmosPhone } from '@pega/cosmos-react-core';
 import { pyReviewRaw, regionChildrenResolved } from './mock';
 
@@ -22,7 +21,7 @@ export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
 const renderField = resolvedProps => {
-  const { displayMode, value = '', label = '', key } = resolvedProps;
+  const { displayMode, value = '', label = '', key, readOnly } = resolvedProps;
 
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const [inputValue, setInputValue] = useState(value);
@@ -74,7 +73,8 @@ const renderField = resolvedProps => {
         key={key}
         onChange={e => {
           setInputValue(e.target.value);
-        }} />
+        }}
+      />
     );
   }
 
@@ -131,6 +131,44 @@ const renderField = resolvedProps => {
       </Text>
     );
   }
+
+  if (readOnly) {
+    return (
+      <EmptyState
+        key={Math.random()}
+        getPConnect={() => {
+          return {
+            getChildren: () => {
+              return [
+                {
+                  getPConnect: () => {
+                    return {
+                      getRawMetadata: () => {
+                        return {};
+                      },
+                      resolveConfigProps: props => {
+                        return props;
+                      },
+                      getConfigProps: () => {
+                        return {
+                          value: '',
+                          label: label,
+                          displayMode: 'LABELS_LEFT'
+                        };
+                      },
+                      getComponent: () => {
+                        return val;
+                      }
+                    };
+                  }
+                }
+              ];
+            }
+          };
+        }}
+      ></EmptyState>
+    );
+  }
   return (
     <FieldValueList
       variant={variant}
@@ -141,7 +179,10 @@ const renderField = resolvedProps => {
 };
 
 export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
+  const { readOnly } = args;
+
   const props = {
+    readOnly: readOnly,
     getPConnect: () => {
       return {
         getChildren: () => {
@@ -154,17 +195,41 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
           // eslint-disable-next-line default-case
           switch (config.config.value) {
             case '@P .FirstName':
-              return renderField(regionChildrenResolved[0]);
+              return renderField({
+                ...regionChildrenResolved[0],
+                displayMode: readOnly ? 'LABELS_LEFT' : '',
+                readOnly
+              });
             case '@P .MiddleName':
-              return renderField(regionChildrenResolved[1]);
+              return renderField({
+                ...regionChildrenResolved[1],
+                displayMode: readOnly ? 'LABELS_LEFT' : '',
+                readOnly
+              });
             case '@P .LastName':
-              return renderField(regionChildrenResolved[2]);
+              return renderField({
+                ...regionChildrenResolved[2],
+                displayMode: readOnly ? 'LABELS_LEFT' : '',
+                readOnly
+              });
             case '@P .Email':
-              return renderField(regionChildrenResolved[3]);
+              return renderField({
+                ...regionChildrenResolved[3],
+                displayMode: readOnly ? 'LABELS_LEFT' : '',
+                readOnly
+              });
             case '@P .PhoneNumber':
-              return renderField(regionChildrenResolved[4]);
+              return renderField({
+                ...regionChildrenResolved[4],
+                displayMode: readOnly ? 'LABELS_LEFT' : '',
+                readOnly
+              });
             case '@P .ServiceDate':
-              return renderField(regionChildrenResolved[5]);
+              return renderField({
+                ...regionChildrenResolved[5],
+                displayMode: readOnly ? 'LABELS_LEFT' : '',
+                readOnly
+              });
           }
         }
       };
@@ -183,6 +248,7 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
 };
 
 Base{{COMPONENT_CLASS_NAME}}.args = {
+  readOnly: false,
   showLabel: true,
   label: 'Form template',
   NumCols: 1,

package/src/tasks/create/templates/Constellation/Template/FORM/index.tsx.mustache

@@ -24,12 +24,14 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   const nCols = parseInt(NumCols, 10);
 
 
-  if (readOnly && readOnly === true && displayMode && displayMode === 'DISPLAY_ONLY') {
+  if (readOnly && readOnly === true || displayMode && displayMode === 'DISPLAY_ONLY') {
     const numRegions = '1';
     const gridRepeat = 'repeat('.concat(numRegions).concat(', 1fr)');
     const gridContainer = { colGap: 0, 'margin-line-start': 0 };
     // @ts-ignore
     gridContainer.cols = gridRepeat;
+    // @ts-ignore
+    gridContainer.gap = 2;
 
     return (
       <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
@@ -67,8 +69,6 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
 <%={{ }}=%>     {{! revert delimiters for mustache }}
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
-
-
 }
 
 export default withConfiguration({{COMPONENT_CLASS_NAME}});

package/src/tasks/create/templates/Constellation/Template/FORM-region/demo.stories.tsx.mustache

@@ -1,5 +1,3 @@
-
-
 // @ts-nocheck
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
@@ -22,14 +20,13 @@ export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
 const renderField = resolvedProps => {
-  const { displayMode, value = '', label = '', key } = resolvedProps;
+  const { displayMode, value = '', label = '', key, readOnly } = resolvedProps;
 
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const [inputValue, setInputValue] = useState(value);
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const [phoneValue, setPhoneValue] = useState('+16397975093');
 
-
   const variant = displayMode === 'LABELS_LEFT' ? 'inline' : 'stacked';
 
   let val =
@@ -131,6 +128,30 @@ const renderField = resolvedProps => {
       </Text>
     );
   }
+  if (readOnly) {
+    return {
+      getPConnect: () => {
+        return {
+          getRawMetadata: () => {
+            return {};
+          },
+          resolveConfigProps: props => {
+            return props;
+          },
+          getConfigProps: () => {
+            return {
+              value: '',
+              label: label,
+              displayMode: 'LABELS_LEFT'
+            };
+          },
+          getComponent: () => {
+            return val;
+          }
+        };
+      }
+    };
+  }
   return (
     <FieldValueList
       variant={variant}
@@ -144,7 +165,10 @@ const renderField = resolvedProps => {
 };
 
 export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
+  const { readOnly } = args;
+
   const props = {
+    readOnly: readOnly,
     getPConnect: () => {
       return {
         getChildren: () => {
@@ -157,39 +181,92 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
           // eslint-disable-next-line default-case
           switch (config.config.value) {
             case '@P .FirstName':
-              return renderField(regionChildrenResolved[0]);
+              return renderField({
+                ...regionChildrenResolved[0],
+                readOnly,
+                displayMode: readOnly ? 'LABELS_LEFT' : ''
+              });
             case '@P .MiddleName':
-              return renderField(regionChildrenResolved[1]);
+              return renderField({
+                ...regionChildrenResolved[1],
+                readOnly,
+                displayMode: readOnly ? 'LABELS_LEFT' : ''
+              });
             case '@P .LastName':
-              return renderField(regionChildrenResolved[2]);
+              return renderField({
+                ...regionChildrenResolved[2],
+                readOnly,
+                displayMode: readOnly ? 'LABELS_LEFT' : ''
+              });
             case '@P .Email':
-              return renderField(regionChildrenResolved[3]);
+              return renderField({
+                ...regionChildrenResolved[3],
+                readOnly,
+                displayMode: readOnly ? 'LABELS_LEFT' : ''
+              });
             case '@P .PhoneNumber':
-              return renderField(regionChildrenResolved[4]);
+              return renderField({
+                ...regionChildrenResolved[4],
+                readOnly,
+                displayMode: readOnly ? 'LABELS_LEFT' : ''
+              });
             case '@P .ServiceDate':
-              return renderField(regionChildrenResolved[5]);
+              return renderField({
+                ...regionChildrenResolved[5],
+                readOnly,
+                displayMode: readOnly ? 'LABELS_LEFT' : ''
+              });
           }
         }
       };
     }
   };
 
-  const regionAChildren = pyReviewRaw.children[0].children.map(child => {
-    return props.getPConnect().createComponent(child);
-  });
-  const regionBChildren = pyReviewRaw.children[1].children.map(child => {
-    return props.getPConnect().createComponent(child);
-  });
+  const regionAChildren = readOnly
+    ? {
+        props: {
+          getPConnect: () => {
+            return {
+              getChildren: () => {
+                return pyReviewRaw.children[0].children.map(child => {
+                  return props.getPConnect().createComponent(child);
+                });
+              }
+            };
+          }
+        }
+      }
+    : pyReviewRaw.children[0].children.map(child => {
+        return props.getPConnect().createComponent(child);
+      });
+
+  const regionBChildren = readOnly
+    ? {
+        props: {
+          getPConnect: () => {
+            return {
+              getChildren: () => {
+                return pyReviewRaw.children[1].children.map(child => {
+                  return props.getPConnect().createComponent(child);
+                });
+              }
+            };
+          }
+        }
+      }
+    : pyReviewRaw.children[1].children.map(child => {
+        return props.getPConnect().createComponent(child);
+      });
 
   return (
     <{{COMPONENT_CLASS_NAME}} {...props} {...args}>
-      {regionAChildren}
-      {regionBChildren}
+      {[regionAChildren, regionBChildren]}
     </{{COMPONENT_CLASS_NAME}}>
   );
 };
 
 Base{{COMPONENT_CLASS_NAME}}.args = {
+  readOnly: false,
   showLabel: true,
   label: 'Form Region template',
 };

package/src/tasks/create/templates/Constellation/Template/FORM-region/index.tsx.mustache

@@ -32,7 +32,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   // @ts-ignore
   flexContainer.gap = 2;
 
-  if (readOnly && readOnly === true && displayMode && displayMode === 'DISPLAY_ONLY') {
+  if (readOnly && readOnly === true || displayMode && displayMode === 'DISPLAY_ONLY') {
     return (
       <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
 {{! pick new delimiters for mustache }}

package/src/tasks/create/templates/Constellation/Template/PAGE/demo.stories.tsx.mustache

@@ -1,7 +1,6 @@
 
 /* eslint-disable react/jsx-no-useless-fragment */
 /* eslint-disable react/no-unstable-nested-components */
-// @ts-nocheck
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { AppAnnouncement as PegaAppAnnouncement } from '@pega/cosmos-react-work';
@@ -18,14 +17,14 @@ const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
 export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
-export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
+export const Base{{COMPONENT_CLASS_NAME}}: Story = (args: any) => {
   if (!window.PCore) {
     window.PCore = {};
   }
 
   window.PCore.getLocaleUtils = () => {
     return {
-      getLocaleValue: val => {
+      getLocaleValue: (val: any) => {
         return val;
       }
     };
@@ -59,13 +58,13 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
         getComponentName: () => {
           return '';
         },
-        getLocalizedValue: value => {
+        getLocalizedValue: (value: any) => {
           return value;
         },
         getRawMetadata: () => {
           return pyHome1Raw;
         },
-        createComponent: config => {
+        createComponent: (config: any) => {
           if (config.type === 'AppAnnouncement') {
             return (
               <PegaAppAnnouncement

package/src/tasks/create/templates/Constellation/Template/PAGE/index.tsx.mustache

@@ -54,7 +54,6 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
 
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
     <OneColumn
-      // @ts-ignore
       a={useConfigurableLayout ? <ConfigurableLayout items={layoutItemsA} /> : childArray[0]}
       title={title}
       icon={tempIcon?.replace('pi pi-', '')}

package/src/tasks/create/templates/Constellation/Template/PAGE/mock.ts.mustache

@@ -1,5 +1,3 @@
-
-// @ts-nocheck
 export const pyHome1Raw = {
   name: 'pyHome1',
   type: 'View',

package/src/tasks/create/templates/Constellation/Template/PAGE/utils.ts.mustache

@@ -2,7 +2,7 @@ import { createUID } from '@pega/cosmos-react-core';
 
 // import { LazyMap as LazyComponentMap } from '../../components_map';
 
-const LazyComponentMap = {};
+const LazyComponentMap: any = {};
 
 /**
  * Given the PConnect object of a Template component, retrieve the children
@@ -53,47 +53,40 @@ export function getAllFields(pConnect: Function) {
 export function prepareComponentInCaseSummary(configObject: any, getPConnect: Function, displayMode: string) {
   const { config, children } = configObject;
   let { type } = configObject;
-  const caseSummaryComponentObject = {};
+  const caseSummaryComponentObject: any = {};
   let showAddressLabel = true;
   if (config && config.value === '@P .pyStatusWork') {
     config.displayAsStatus = true;
     type = 'TextInput'; // force the type to be TextInput for status field.
     // As TextInput is loaded forcefully sometimes, TextInput component might not be available in lazy map.
     // Load TextInput if it is not available.
-    // @ts-ignore
     if (!LazyComponentMap[type]) {
       PCore.getAssetLoader().getLoader('component-loader')([type]);
     }
   }
 
-  // @ts-ignore
   caseSummaryComponentObject.name = getPConnect().resolveConfigProps({
     label: config.label
   }).label;
   if (type === 'CaseOperator') {
-     // @ts-ignore
     switch (caseSummaryComponentObject.name) {
       case 'Create operator':
-         // @ts-ignore
         caseSummaryComponentObject.name = getPConnect().resolveConfigProps({
           createLabel: config.createLabel
         }).createLabel;
         break;
       case 'Update operator':
-         // @ts-ignore
         caseSummaryComponentObject.name = getPConnect().resolveConfigProps({
           updateLabel: config.updateLabel
         }).updateLabel;
         break;
       default:
-         // @ts-ignore
         caseSummaryComponentObject.name = getPConnect().resolveConfigProps({
           resolveLabel: config.resolveLabel
         }).resolveLabel;
         break;
     }
   } else if (type === 'Checkbox') {
-     // @ts-ignore
     caseSummaryComponentObject.name = getPConnect().resolveConfigProps({
       label: config.caption
     }).label;
@@ -115,10 +108,8 @@ export function prepareComponentInCaseSummary(configObject: any, getPConnect: Fu
     createdComponent.props.getPConnect().setInheritedProp('showAddressLabel', showAddressLabel);
   }
   // createdComponent.props.getPConnect().setInheritedProp("hideLabel", true);
-   // @ts-ignore
   caseSummaryComponentObject.value = createdComponent;
   if (type === 'reference') {
-     // @ts-ignore
     caseSummaryComponentObject.name = createdComponent.props.getPConnect().getInheritedProps().label;
   }
 
@@ -188,16 +179,13 @@ export function getLayoutDataFromRegion(regionData: object[]) {
 export function getIsAssignmentView(pConnect: Function) {
   // Get caseInfo content from the store which contains the view info about the current assignment/step
   // TODO To be replaced with pConnect.getCaseInfo().getCurrentAssignmentView when it's available
-   // @ts-ignore
-  const assignmentViewClass = pConnect.getValue(PCore.getConstants().CASE_INFO.CASE_INFO_CLASSID);
-   // @ts-ignore
-  const assignmentViewName = pConnect.getValue(PCore.getConstants().CASE_INFO.ASSIGNMENTACTION_ID);
+  const assignmentViewClass = pConnect().getValue(PCore.getConstants().CASE_INFO.CASE_INFO_CLASSID);
+  const assignmentViewName = pConnect().getValue(PCore.getConstants().CASE_INFO.ASSIGNMENTACTION_ID);
 
   const assignmentViewId = `${assignmentViewName}!${assignmentViewClass}`;
 
   // Get the info about the current view from pConnect
-   // @ts-ignore
-  const currentViewId = `${pConnect.getCurrentView()}!${pConnect.getCurrentClassID()}`;
+  const currentViewId = `${pConnect().getCurrentView()}!${pConnect().getCurrentClassID()}`;
 
   return assignmentViewId === currentViewId;
 }
@@ -208,8 +196,7 @@ export function getIsAssignmentView(pConnect: Function) {
  * @param {string} [instructions="casestep"] 'casestep', 'none', or the html content of a Rule-UI-Paragraph rule (processed via core's paragraph annotation handler)
  */
 export function getInstructions(pConnect: Function, instructions: string = 'casestep') {
-   // @ts-ignore
-  const caseStepInstructions = pConnect.getValue(PCore.getConstants().CASE_INFO.INSTRUCTIONS);
+  const caseStepInstructions = pConnect().getValue(PCore.getConstants().CASE_INFO.INSTRUCTIONS);
 
   // Determine if this view is the current assignment/step view
   const isCurrentAssignmentView = getIsAssignmentView(pConnect);

package/src/tasks/create/templates/Constellation/Widget/CASE/demo.stories.tsx.mustache

@@ -1,6 +1,4 @@
-
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import type { Meta, StoryObj } from '@storybook/react';
 
 import {{COMPONENT_CLASS_NAME}} from './index';
@@ -30,7 +28,7 @@ window.PCore.getConstants = () => {
 
 window.PCore.getLocaleUtils = () => {
   return {
-    getLocaleValue: value => {
+    getLocaleValue: (value: any) => {
       return value;
     }
   };
@@ -46,19 +44,19 @@ window.PCore.getDataApiUtils = () => {
   };
 };
 
-export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
+export const Base{{COMPONENT_CLASS_NAME}}: Story = (args: any) => {
 
   const props = {
 
     getPConnect: () => {
       return {
-        getValue: value => {
+        getValue: (value: any) => {
           return value;
         },
         getContextName: () => {
           return 'app/primary_1';
         },
-        getLocalizedValue: value => {
+        getLocalizedValue: (value: any) => {
           return value;
         },
         getActionsApi: () => {

package/src/tasks/create/templates/Constellation/Widget/CASE/index.tsx.mustache

@@ -31,13 +31,10 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   ];
 
   useEffect(() => {
-    // @ts-ignore
     const payload = { dataViewParameters: [{ CaseInstanceKey: caseID }] };
     PCore.getDataApiUtils()
-      // @ts-ignore
       .getData('D_pyWorkHistory', payload, context)
-      // @ts-ignore
-      .then((response) => {
+      .then((response: any) => {
         setIsLoading(false);
         if (response.data.data !== null) {
           setHistory(

package/src/tasks/create/templates/Constellation/Widget/CASE/mock.ts.mustache

@@ -1,4 +1,3 @@
-// @ts-nocheck
 const historyData = {
   data: {
     fetchDateTime: '2023-01-18T12:04:56.517Z',

package/src/tasks/create/templates/Constellation/Widget/PAGE/demo.stories.tsx.mustache

@@ -1,6 +1,5 @@
 
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import type { Meta, StoryObj } from '@storybook/react';
 
 import {{COMPONENT_CLASS_NAME}} from './index';
@@ -63,19 +62,19 @@ window.PCore.getDataApiUtils = () => {
 
 
 
-export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
+export const Base{{COMPONENT_CLASS_NAME}}: Story = (args: any) => {
 
   const props = {
     ...configProps,
     getPConnect: () => {
       return {
-        getValue: value => {
+        getValue: (value: any) => {
           return value;
         },
         getContextName: () => {
           return 'app/primary_1';
         },
-        getLocalizedValue: value => {
+        getLocalizedValue: (value: any) => {
           return value;
         },
         getActionsApi: () => {

package/src/tasks/create/templates/Constellation/Widget/PAGE/index.tsx.mustache

@@ -8,7 +8,7 @@ import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 // interface for props
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   // If any, enter additional props that only exist on TextInput here
-    datasource: Array<any>;
+    datasource: any;
     header: string;
     description: string;
     whatsnewlink: string;
@@ -27,10 +27,8 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   const context = PConnect.getContextName();
 
   let details = [];
-  // @ts-ignore
   if (datasource && datasource.source) {
-    // @ts-ignore
-    details = datasource.source.map((item) => {
+    details = datasource.source.map((item: { name: any; }) => {
       return item.name;
     });
   }
@@ -50,9 +48,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   useEffect(() => {
 
     PCore.getDataApiUtils()
-      // @ts-ignore
       .getData(dataViewName, {}, context)
-      // @ts-ignore
       .then((response: any) => {
         setIsLoading(false);
         if (response.data.data !== null) {

package/src/tasks/create/templates/Constellation/Widget/PAGE-CASE/Avatar.tsx.mustache

@@ -46,22 +46,19 @@ function Avatar(props: {{COMPONENT_CLASS_NAME}}AvatarProps) {
     const currentState = PCore.getMessagingServiceManager().getUserPresence().getUserState(userIdentifier);
     const [userState, setUserState]: any  = useState(currentState === 'online' ? 'active' : 'inactive');
 
-    // @ts-ignore
-    const handleUserStateChange = ({ state }) => {
+    const handleUserStateChange = ({ state }: any) => {
       setUserState(state === 'online' ? 'active' : 'inactive');
     };
 
     useEffect(() => {
       const subId = PCore.getMessagingServiceManager()
         .getUserPresence()
-        // @ts-ignore
-        .subscribe(userIdentifier, handleUserStateChange);
+        .subscribe(userIdentifier, handleUserStateChange, '');
 
       return function cleanup() {
         PCore.getMessagingServiceManager().getUserPresence().unsubscribe(userIdentifier, subId);
       };
     }, [userIdentifier, handleUserStateChange]);
-    // @ts-ignore
     return <CosmosAvatar name={userName} imageSrc={imageBlobUrl as React.SetStateAction<any>} status={userState} />;
   }
 

package/src/tasks/create/templates/Constellation/Widget/PAGE-CASE/demo.stories.tsx.mustache

@@ -1,5 +1,4 @@
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import type { Meta, StoryObj } from '@storybook/react';
 
 import {{COMPONENT_CLASS_NAME}} from './index';
@@ -21,7 +20,7 @@ if (!window.PCore) {
 
 window.PCore.getLocaleUtils = () => {
   return {
-    getLocaleValue: value => {
+    getLocaleValue: (value: any) => {
       return value;
     }
   };
@@ -37,7 +36,7 @@ window.PCore.getUserApi = () => {
   };
 };
 
-export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
+export const Base{{COMPONENT_CLASS_NAME}}: Story = (args: any) => {
 
   const props = {
     label: configProps.label,