@pega/dx-component-builder-sdk 0.23.14 → 0.23.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/dx-component-builder-sdk",
-  "version": "0.23.14",
+  "version": "0.23.15",
   "description": "Utility for building custom UI components",
   "bin": "./bin/index.js",
   "scripts": {

package/src/constants.js

@@ -692,6 +692,10 @@ export const COMPONENT_SCHEMA = {
         name: 'Email',
         value: 'Email'
       },
+      {
+        name: 'Field Group',
+        value: 'Group'
+      },
       {
         name: 'Integer',
         value: 'Integer'
@@ -762,6 +766,10 @@ export const COMPONENT_SCHEMA = {
         name: 'Case Create Stage',
         value: 'CaseCreateStage'
       },
+      {
+        name: 'Field Group',
+        value: 'FieldGroup'
+      },
       {
         name: 'Material Case Summary',
         value: 'MaterialCaseSummary'

package/src/tasks/create/templates/SDK-Angular/field/Boolean/boolean.component.html.mustache

@@ -1,5 +1,9 @@
 <div *ngIf="displayMode$; else noDisplayMode">
-  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
+  <component-mapper
+    *ngIf="bVisible$ !== false"
+    name="FieldValueList"
+    [props]="{ label$: caption$, value$: value$ ? trueLabel$ : falseLabel$, displayMode$ }"
+  ></component-mapper>
 </div>
 <ng-template #noDisplayMode>
   <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">

package/src/tasks/create/templates/SDK-Angular/field/Boolean/boolean.component.ts.mustache

@@ -13,6 +13,8 @@ interface {{COMPONENT_CLASS_NAME}}Props extends Omit<PConnFieldProps, 'value'> {
   // Everything from PConnFieldProps except value and change type of value to boolean
   value: boolean;
   caption?: string;
+  trueLabel?: string;
+  falseLabel?: string;
 }
 
 @Component({
@@ -45,6 +47,8 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
   bHasForm$ = true;
   componentReference = '';
   helperText: string;
+  trueLabel$?: string;
+  falseLabel$?: string;
 
   fieldControl = new FormControl('', null);
 
@@ -116,6 +120,8 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
 
     this.caption$ = this.configProps$.caption;
     this.helperText = this.configProps$.helperText;
+    this.trueLabel$ = this.configProps$.trueLabel;
+    this.falseLabel$ = this.configProps$.falseLabel;
 
     // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
     setTimeout(() => {

package/src/tasks/create/templates/SDK-Angular/field/Date/date.component.html.mustache

@@ -1,5 +1,9 @@
 <div *ngIf="displayMode$; else noDisplayMode">
-  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
+  <component-mapper
+    *ngIf="bVisible$ !== false"
+    name="FieldValueList"
+    [props]="{ label$, value$: getFormattedValue(), displayMode$ }"
+  ></component-mapper>
 </div>
 {{! pick new delimiters for mustache }}
 {{=<% %>=}}

package/src/tasks/create/templates/SDK-Angular/field/Date/date.component.ts.mustache

@@ -14,6 +14,7 @@ import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { dateFormatInfoDefault, getDateFormatInfo } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
+import { format } from '@pega/angular-sdk-components';
 
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   // If any, enter additional props that only exist on Date here
@@ -242,4 +243,10 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
     }
     return errMessage;
   }
+
+  getFormattedValue() {
+    return format(this.value$, 'date', {
+      format: this.theDateFormat.dateFormatString
+    });
+  }
 }

package/src/tasks/create/templates/SDK-Angular/template/DETAILS/details.component.ts.mustache

@@ -75,7 +75,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
       fields?.forEach(field => {
         const thePConn = field.getPConnect();
         const theCompType = thePConn.getComponentName().toLowerCase();
-        if (theCompType === 'reference') {
+        if (theCompType === 'reference' || theCompType === 'group') {
           const configProps = thePConn.getConfigProps();
           configProps.readOnly = true;
           configProps.displayMode = 'LABELS_LEFT';
@@ -88,6 +88,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
           };
           const viewContConfig = {
             meta: {
+              ...thePConn.getMetadata(),
               type: theCompType,
               config: configProps
             },

package/src/tasks/create/templates/SDK-Angular/template/FORM/form.component.scss.mustache

@@ -1,27 +1,31 @@
 .psdk-default-form-one-column {
   display: grid;
   grid-template-columns: repeat(1, minmax(0, 1fr));
-  gap: calc(1rem);
+  column-gap: calc(1rem);
 }
 
 .psdk-default-form-two-column {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  gap: calc(1rem);
+  column-gap: calc(1rem);
 }
 
 .psdk-default-form-three-column {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: calc(1rem);
+  column-gap: calc(1rem);
+}
+
+.psdk-default-form-three-column .grid-column {
+  grid-column: 1 / span 3;
 }
 
 .psdk-default-form-two-column .grid-column {
   grid-column: 1 / span 2;
 }
 
-.psdk-default-form-three-column .grid-column {
-  grid-column: 1 / span 3;
+.psdk-default-form-one-column .grid-column {
+  grid-column: 1;
 }
 
 .template-title-container {
@@ -29,3 +33,8 @@
   font-weight: 600;
   margin: 10px 0px;
 }
+
+.psdk-default-form-instruction-text {
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
+}

package/src/tasks/create/templates/SDK-React/field/Boolean/demo.stories.tsx.mustache

@@ -14,7 +14,7 @@ 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 => {
   const [value, setValue] = useState(configProps.value);
 
   const props = {
@@ -35,12 +35,16 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = (args) => {
             updateFieldValue: (propName, theValue) => {
               setValue(theValue);
             },
-            triggerFieldChange: () => { /* nothing */}
+            triggerFieldChange: () => {
+              /* nothing */
+            }
           };
         },
         getValidationApi: () => {
           return {
-            validate: () => { /* nothing */}
+            validate: () => {
+              /* nothing */
+            }
           };
         }
       };
@@ -60,5 +64,5 @@ Base{{COMPONENT_CLASS_NAME}}.args = {
   status: configProps.status,
   hideLabel: configProps.hideLabel,
   displayMode: configProps.displayMode,
-  validatemessage: configProps.validatemessage,
+  validatemessage: configProps.validatemessage
 };

package/src/tasks/create/templates/SDK-React/field/Date/demo.stories.tsx.mustache

@@ -9,21 +9,21 @@ window.PCore = {
   ...window.PCore,
   getLocaleUtils: (): any => {
     return {
-      getLocaleValue: (value) => {
+      getLocaleValue: value => {
         return value;
       }
-    }
+    };
   },
   getEnvironmentInfo: (): any => {
-  return {
-    getUseLocale: () => {
-      return 'en-GB';
-    },
-    getLocale: () => {
-      return 'en-GB';
-    }
-  };
- }
+    return {
+      getUseLocale: () => {
+        return 'en-GB';
+      },
+      getLocale: () => {
+        return 'en-GB';
+      }
+    };
+  }
 };
 
 const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
@@ -35,7 +35,7 @@ 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 => {
   const [value, setValue] = useState(configProps.value);
 
   const props = {
@@ -47,7 +47,9 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = (args) => {
             updateFieldValue: (propName, theValue) => {
               setValue(theValue);
             },
-            triggerFieldChange: () => {/* nothing */}
+            triggerFieldChange: () => {
+              /* nothing */
+            }
           };
         },
         getStateProps: () => {
@@ -60,7 +62,7 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = (args) => {
     }
   };
 
-  return <{{COMPONENT_CLASS_NAME}} {...props} {...args} />
+  return <{{COMPONENT_CLASS_NAME}} {...props} {...args} />;
 };
 
 Base{{COMPONENT_CLASS_NAME}}.args = {
@@ -73,5 +75,5 @@ Base{{COMPONENT_CLASS_NAME}}.args = {
   status: configProps.status,
   hideLabel: configProps.hideLabel,
   displayMode: configProps.displayMode,
-  validatemessage: configProps.validatemessage,
+  validatemessage: configProps.validatemessage
 };

package/src/tasks/create/templates/SDK-React/field/DateTime/demo.stories.tsx.mustache

@@ -4,19 +4,18 @@ import type { Meta, StoryObj } from '@storybook/react';
 import {{COMPONENT_CLASS_NAME}} from './index';
 import { configProps, stateProps } from './mock';
 
-
 window.PCore = {
   ...window.PCore,
   getEnvironmentInfo: (): any => {
-  return {
-    getUseLocale: () => {
-      return 'en-GB';
-    },
-    getLocale: () => {
-      return 'en-GB';
-    }
-  };
-}
+    return {
+      getUseLocale: () => {
+        return 'en-GB';
+      },
+      getLocale: () => {
+        return 'en-GB';
+      }
+    };
+  }
 };
 
 const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
@@ -28,7 +27,7 @@ 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 => {
   const [value, setValue] = useState(configProps.value);
 
   const props = {
@@ -40,7 +39,9 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = (args) => {
             updateFieldValue: (propName, theValue) => {
               setValue(theValue);
             },
-            triggerFieldChange: () => {/* nothing */}
+            triggerFieldChange: () => {
+              /* nothing */
+            }
           };
         },
         getStateProps: () => {
@@ -53,7 +54,7 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = (args) => {
     }
   };
 
-  return <{{COMPONENT_CLASS_NAME}} {...props} {...args} />
+  return <{{COMPONENT_CLASS_NAME}} {...props} {...args} />;
 };
 
 Base{{COMPONENT_CLASS_NAME}}.args = {
@@ -66,5 +67,5 @@ Base{{COMPONENT_CLASS_NAME}}.args = {
   status: configProps.status,
   hideLabel: configProps.hideLabel,
   displayMode: configProps.displayMode,
-  validatemessage: configProps.validatemessage,
+  validatemessage: configProps.validatemessage
 };

package/src/tasks/create/templates/SDK-React/field/Decimal/demo.stories.tsx.mustache

@@ -7,15 +7,15 @@ import { configProps, fieldMetadata } from './mock';
 window.PCore = {
   ...window.PCore,
   getEnvironmentInfo: (): any => {
-  return {
-    getUseLocale: () => {
-      return 'en-GB';
-    },
-    getLocale: () => {
-      return 'en-GB';
-    }
-  };
-}
+    return {
+      getUseLocale: () => {
+        return 'en-GB';
+      },
+      getLocale: () => {
+        return 'en-GB';
+      }
+    };
+  }
 };
 
 const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
@@ -27,7 +27,7 @@ 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 => {
   const [value, setValue] = useState(configProps.value);
 
   const props = {
@@ -41,7 +41,9 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = (args) => {
             updateFieldValue: (propName, theValue) => {
               setValue(theValue?.toString());
             },
-            triggerFieldChange: () => {/* nothing */}
+            triggerFieldChange: () => {
+              /* nothing */
+            }
           };
         },
         getStateProps: () => {
@@ -60,7 +62,7 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = (args) => {
     }
   };
 
-  return <{{COMPONENT_CLASS_NAME}} {...props} {...args} />
+  return <{{COMPONENT_CLASS_NAME}} {...props} {...args} />;
 };
 
 Base{{COMPONENT_CLASS_NAME}}.args = {
@@ -73,6 +75,5 @@ Base{{COMPONENT_CLASS_NAME}}.args = {
   status: configProps.status,
   hideLabel: configProps.hideLabel,
   displayMode: configProps.displayMode,
-  validatemessage: configProps.validatemessage,
+  validatemessage: configProps.validatemessage
 };
-

package/src/tasks/create/templates/SDK-React/field/Decimal/index.tsx.mustache

@@ -3,7 +3,7 @@ import CurrencyTextField from '@unicef/material-ui-currency-textfield';
 
 import { getCurrencyCharacters, getCurrencyOptions } from '@pega/react-sdk-components/lib/components/field/Currency/currency-utils.js';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
-import { format } from "@pega/react-sdk-components/lib/components/helpers/formatters";
+import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';

package/src/tasks/create/templates/SDK-React/field/Decimal-Currency/demo.stories.tsx.mustache

@@ -7,14 +7,14 @@ import { configProps, fieldMetadata } from './mock';
 window.PCore = {
   ...window.PCore,
   getEnvironmentInfo: (): any => {
-  return {
-    getUseLocale: () => {
-      return 'en-GB';
-    },
-    getLocale: () => {
-      return 'en-GB';
-    }
-  };
+    return {
+      getUseLocale: () => {
+        return 'en-GB';
+      },
+      getLocale: () => {
+        return 'en-GB';
+      }
+    };
 }
 };
 
@@ -27,7 +27,7 @@ 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 => {
   const [value, setValue] = useState(configProps.value);
 
   const props = {
@@ -41,7 +41,9 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = (args) => {
             updateFieldValue: (propName, theValue) => {
               setValue(theValue?.toString());
             },
-            triggerFieldChange: () => {/* nothing */}
+            triggerFieldChange: () => {
+              /* nothing */
+            }
           };
         },
         getStateProps: () => {
@@ -60,7 +62,7 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = (args) => {
     }
   };
 
-  return <{{COMPONENT_CLASS_NAME}} {...props} {...args} />
+  return <{{COMPONENT_CLASS_NAME}} {...props} {...args} />;
 };
 
 Base{{COMPONENT_CLASS_NAME}}.args = {
@@ -73,5 +75,5 @@ Base{{COMPONENT_CLASS_NAME}}.args = {
   status: configProps.status,
   hideLabel: configProps.hideLabel,
   displayMode: configProps.displayMode,
-  validatemessage: configProps.validatemessage,
+  validatemessage: configProps.validatemessage
 };

package/src/tasks/create/templates/SDK-React/field/Decimal-Percentage/demo.stories.tsx.mustache

@@ -13,7 +13,7 @@ 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 => {
   const [value, setValue] = useState(configProps.value);
 
   const props = {
@@ -55,5 +55,5 @@ Base{{COMPONENT_CLASS_NAME}}.args = {
   status: configProps.status,
   hideLabel: configProps.hideLabel,
   displayMode: configProps.displayMode,
-  validatemessage: configProps.validatemessage,
+  validatemessage: configProps.validatemessage
 };

package/src/tasks/create/templates/SDK-React/field/Integer/demo.stories.tsx.mustache

@@ -13,7 +13,7 @@ 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 => {
   const [value, setValue] = useState(configProps.value);
 
   const props = {
@@ -42,7 +42,7 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = (args) => {
     }
   };
 
-  return <{{COMPONENT_CLASS_NAME}} {...props} {...args}/>;
+  return <{{COMPONENT_CLASS_NAME}} {...props} {...args} />;
 };
 
 Base{{COMPONENT_CLASS_NAME}}.args = {
@@ -55,5 +55,5 @@ Base{{COMPONENT_CLASS_NAME}}.args = {
   status: configProps.status,
   hideLabel: configProps.hideLabel,
   displayMode: configProps.displayMode,
-  validatemessage: configProps.validatemessage,
+  validatemessage: configProps.validatemessage
 };

package/src/tasks/create/templates/SDK-React/field/Picklist/demo.stories.tsx.mustache

@@ -13,7 +13,7 @@ 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 => {
   const [value, setValue] = useState(configProps.value);
 
   const props = {
@@ -72,6 +72,5 @@ Base{{COMPONENT_CLASS_NAME}}.args = {
   status: configProps.status,
   hideLabel: configProps.hideLabel,
   displayMode: configProps.displayMode,
-  validatemessage: configProps.validatemessage,
+  validatemessage: configProps.validatemessage
 };
-

package/src/tasks/create/templates/SDK-React/field/Picklist-Autocomplete/demo.stories.tsx.mustache

@@ -13,7 +13,7 @@ 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 => {
   const [value, setValue] = useState(configProps.value);
 
   const props = {
@@ -72,5 +72,5 @@ Base{{COMPONENT_CLASS_NAME}}.args = {
   status: configProps.status,
   hideLabel: configProps.hideLabel,
   displayMode: configProps.displayMode,
-  validatemessage: configProps.validatemessage, 
-}
+  validatemessage: configProps.validatemessage
+};

package/src/tasks/create/templates/SDK-React/field/Picklist-RadioButtons/demo.stories.tsx.mustache

@@ -13,7 +13,7 @@ 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 => {
   const [value, setValue] = useState(configProps.value);
 
   const props = {
@@ -46,7 +46,9 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = (args) => {
         },
         getValidationApi: () => {
           return {
-            validate: () => {/* nothing */}
+            validate: () => {
+              /* nothing */
+            }
           };
         },
         getCaseInfo: () => {
@@ -79,5 +81,5 @@ Base{{COMPONENT_CLASS_NAME}}.args = {
   status: configProps.status,
   hideLabel: configProps.hideLabel,
   displayMode: configProps.displayMode,
-  validatemessage: configProps.validatemessage, 
-}
+  validatemessage: configProps.validatemessage
+};

package/src/tasks/create/templates/SDK-React/field/Text/demo.stories.tsx.mustache

@@ -14,7 +14,7 @@ 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 => {
   const [value, setValue] = useState(configProps.value);
 
   const props = {
@@ -34,8 +34,12 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = (args) => {
         }
       };
     },
-    onChange: (event) => { setValue(event.target.value); },
-    onBlur: () => { return configProps.value; }
+    onChange: event => {
+      setValue(event.target.value);
+    },
+    onBlur: () => {
+      return configProps.value;
+    }
   };
 
   return <{{COMPONENT_CLASS_NAME}} {...props} {...args} />;
@@ -51,5 +55,5 @@ Base{{COMPONENT_CLASS_NAME}}.args = {
   status: configProps.status,
   hideLabel: configProps.hideLabel,
   displayMode: configProps.displayMode,
-  validatemessage: configProps.validatemessage,
+  validatemessage: configProps.validatemessage
 };

package/src/tasks/create/templates/SDK-React/field/Text-Email/demo.stories.tsx.mustache

@@ -13,7 +13,7 @@ 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 => {
   const [value, setValue] = useState(configProps.value);
 
   const props = {
@@ -33,8 +33,12 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = (args) => {
         }
       };
     },
-    onChange: (event) => { setValue(event.target.value); },
-    onBlur: () => { return configProps.value; }
+    onChange: event => {
+      setValue(event.target.value);
+    },
+    onBlur: () => {
+      return configProps.value;
+    }
   };
   return <{{COMPONENT_CLASS_NAME}} {...props} {...args} />;
 };
@@ -49,5 +53,5 @@ Base{{COMPONENT_CLASS_NAME}}.args = {
   status: configProps.status,
   hideLabel: configProps.hideLabel,
   displayMode: configProps.displayMode,
-  validatemessage: configProps.validatemessage,
+  validatemessage: configProps.validatemessage
 };

package/src/tasks/create/templates/SDK-React/field/Text-Input/demo.stories.tsx.mustache

@@ -14,7 +14,7 @@ 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 => {
   const [value, setValue] = useState(configProps.value);
 
   const props = {
@@ -35,8 +35,12 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = (args) => {
         }
       };
     },
-    onChange: (event) => { setValue(event.target.value); },
-    onBlur: () => { return configProps.value; }
+    onChange: event => {
+      setValue(event.target.value);
+    },
+    onBlur: () => {
+      return configProps.value;
+    }
   };
 
   return <{{COMPONENT_CLASS_NAME}} {...props} {...args} />;
@@ -52,5 +56,5 @@ Base{{COMPONENT_CLASS_NAME}}.args = {
   status: configProps.status,
   hideLabel: configProps.hideLabel,
   displayMode: configProps.displayMode,
-  validatemessage: configProps.validatemessage,
+  validatemessage: configProps.validatemessage
 };