@pega/dx-component-builder-sdk 23.1.15 → 24.1.11

package/src/tasks/create/templates/SDK-React/field/Icon-Button-URL/demo.stories.tsx.mustache

@@ -0,0 +1,91 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import {{COMPONENT_CLASS_NAME}} from './index';
+import { configProps } from './mock';
+
+const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
+  title: '{{COMPONENT_CLASS_NAME}}',
+  component: {{COMPONENT_CLASS_NAME}},
+  excludeStories: /.*Data$/
+};
+
+export default meta;
+type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
+
+if (!window.PCore) {
+  window.PCore = {} as any;
+}
+
+const statelistData = {
+  data: [
+    {
+      pyLabel: 'Massachusetts',
+      pyStateCode: 'MA'
+    },
+    {
+      pyLabel: 'Rhode Island',
+      pyStateCode: 'RI'
+    },
+    {
+      pyLabel: 'Connecticut',
+      pyStateCode: 'CT'
+    }
+  ]
+};
+
+window.PCore.getDataPageUtils = (() => {
+  return {
+    getDataAsync: () => {
+      return new Promise(resolve => {
+        resolve(statelistData);
+      });
+    }
+  };
+}) as any;
+
+export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
+  const props = {
+    countryCode: configProps.countryCode,
+    getPConnect: () => {
+      return {
+        getValue: value => {
+          return value;
+        },
+        getContextName: () => {
+          return 'app/primary_1';
+        },
+        getLocalizedValue: value => {
+          return value;
+        },
+        getActionsApi: () => {
+          return {
+            updateFieldValue: () => {
+              /* nothing */
+            },
+            triggerFieldChange: () => {
+              /* nothing */
+            }
+          };
+        },
+        ignoreSuggestion: () => {
+          /* nothing */
+        },
+        acceptSuggestion: () => {
+          /* nothing */
+        },
+        setInheritedProps: () => {
+          /* nothing */
+        },
+        resolveConfigProps: () => {
+          /* nothing */
+        }
+      };
+    }
+  };
+
+  return <{{COMPONENT_CLASS_NAME}} {...props} {...args} />;
+};
+
+Base{{COMPONENT_CLASS_NAME}}.args = {
+  countryCode: configProps.countryCode
+};

package/src/tasks/create/templates/SDK-React/field/Icon-Button-URL/index.tsx.mustache

@@ -0,0 +1,160 @@
+import { useEffect, useState } from 'react';
+import { Tooltip, IconButton, Link } from '@material-ui/core';
+import Table from '@material-ui/core/Table';
+import TableBody from '@material-ui/core/TableBody';
+import TableCell from '@material-ui/core/TableCell';
+import TableContainer from '@material-ui/core/TableContainer';
+import TableHead from '@material-ui/core/TableHead';
+import TableRow from '@material-ui/core/TableRow';
+import Paper from '@material-ui/core/Paper';
+
+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';
+
+// IMPORTANT
+// import LanguageIcon from '@mui/icons-material/Language';
+import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
+import LanguageIcon from '@material-ui/icons/Language';
+import FormatListNumberedIcon from '@material-ui/icons/FormatListNumbered';
+
+interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
+  // If any, enter additional props that only exist on this componentName
+  countryCode: string;
+}
+
+export const textFormatter = (value: string, validUrl: string) => {
+  return <Link href={validUrl}>{value}</Link>;
+};
+
+// props passed in combination of props from property panel (config.json) and run time props from Constellation
+export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const TextContent = getComponentFromMap('TextContent');
+
+  const { value, displayMode, countryCode = 'USA', getPConnect, testId } = props;
+  const [stateList, setStateList] = useState<any[]>([]);
+  const [showTable, setShowTable] = useState(false);
+  const [validUrl, setValidUrl] = useState('about:blank');
+  const PConnect = getPConnect();
+
+  // toggle showing table and getting table data
+  function showHideTable() {
+    setShowTable(prevShowTable => !prevShowTable);
+  }
+
+  // check if url is valid (simple)
+  function validateUrl(href: string) {
+    return /^(?:(?:(?:https?|ftp):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})))(?::\d{2,5})?(?:[/?#]\S*)?$/i.test(
+      href
+    );
+  }
+
+  // Testing to see if value entered is valid url, if not can't use it.
+  // Reason for this code is that you can NOT pass to Link component
+  // a bad url, or it will error out.
+  // For example: Since the value is the property field,
+  // it could be entered from another component and thus as it is
+  // entered (typed in), it won't be valid until it is all entered.
+  // NOTE: can't have a blank value for the url as the Link element will error out
+  // in App studio preview
+  useEffect(() => {
+    if (validateUrl(value as string)) {
+      setValidUrl(value as string);
+    } else {
+      setValidUrl('about:blank');
+    }
+  }, [value]);
+
+  // going to get data for worklist to put into a table
+  // data comes from calling a PCore function to get
+  // get data from a data page and a PConnect function
+  // to get getContextName
+  useEffect(() => {
+    const dataViewName = 'D_pyStateList';
+    const context = PConnect.getContextName();
+    const params = { pyCountry: countryCode };
+
+    // only retrieve table data if table is shown
+    if (showTable) {
+      PCore.getDataPageUtils()
+        .getDataAsync(dataViewName, context, params, null, null)
+        // @ts-ignore
+        .then((response: any) => {
+          // table requires an index or will get setExtraStackFrame error
+          setStateList(
+            response.data.map((entry: any, index: number) => {
+              // mapping the data into the column names
+              // MUST have an id/index or will get a setExtraStackFrame error
+              // put a key in the table
+              return {
+                stateName: entry.pyLabel,
+                stateCode: entry.pyStateCode,
+                id: index
+              };
+            })
+          );
+        })
+        .catch((error: any) => {
+          // eslint-disable-next-line no-console
+          console.log(error);
+        });
+    }
+  }, [PConnect, countryCode, showTable]);
+
+  // when DISPLAY_ONLY, in this example we will just show the URL.
+  if (displayMode === 'DISPLAY_ONLY') {
+    const displayComp = textFormatter(validUrl, validUrl);
+    return <Styled{{COMPONENT_CLASS_NAME}}Wrapper> {displayComp} </Styled{{COMPONENT_CLASS_NAME}}Wrapper>;
+  }
+
+  const localLabel = ''
+    .concat(PConnect.getLocalizedValue('State list for', '', ''))
+    .concat(PConnect.getLocalizedValue(` ${countryCode}`, '', ''))
+    .concat(' ');
+
+  return (
+    <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+      {{! pick new delimiters for mustache }}
+      {{=<% %>=}}
+      <div style={{ display: 'flex' }} data-testid={testId}>
+        <ArrowForwardIcon />
+        <TextContent displayAs='body' content={localLabel} />
+        <Tooltip title={PConnect.getLocalizedValue('Click to show/hide state list', '', '')}>
+          <IconButton onClick={showHideTable} style={{ padding: '0 0.25rem' }}>
+            <FormatListNumberedIcon />
+          </IconButton>
+        </Tooltip>
+        {
+          // eslint-disable-next-line jsx-a11y/control-has-associated-label
+          <a href={validUrl} style={{ padding: '0 0.25rem' }}>
+            <LanguageIcon />
+          </a>
+        }
+      </div>
+      {showTable && (
+        <TableContainer component={Paper}>
+          <Table aria-label="{PConnect.getLocalizedValue('State list', '', '')}">
+            <TableHead>
+              <TableRow>
+                <TableCell>{PConnect.getLocalizedValue('State name', '', '')}</TableCell>
+                <TableCell>{PConnect.getLocalizedValue('State code', '', '')}</TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {stateList.map(row => (
+                <TableRow key={row.stateName}>
+                  <TableCell component='th' scope='row'>
+                    {row.stateName}
+                  </TableCell>
+                  <TableCell>{row.stateCode}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </TableContainer>
+      )}
+      <%={{ }}=%>     {{! revert delimiters for mustache }}
+    </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+  );
+}

package/src/tasks/create/templates/SDK-React/field/Icon-Button-URL/mock.ts.mustache

@@ -0,0 +1,4 @@
+// eslint-disable-next-line import/prefer-default-export
+export const configProps = {
+  countryCode: 'USA'
+};

package/src/tasks/create/templates/SDK-React/field/Icon-Button-URL/styles.js.mustache

@@ -0,0 +1,7 @@
+import styled, { css } from 'styled-components';
+
+export default styled.div(() => {
+  return css`
+    margin: 0px 0;
+  `;
+});

package/src/tasks/create/templates/SDK-React/field/Integer/config.json.mustache

@@ -10,7 +10,7 @@
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},
   "icon": "images/pz-integer-active.svg",
- "properties": [
+  "properties": [
     {
       "name": "label",
       "label": "Field label",

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

@@ -73,26 +73,25 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
 
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-    <TextField
-      fullWidth
-      variant={readOnly ? 'standard' : 'outlined'}
-      helperText={helperTextToDisplay}
-      placeholder={placeholder ?? ''}
-      size='small'
-      required={required}
-      disabled={disabled}
-      onChange={intOnChange}
-      onBlur={!readOnly ? onBlur : undefined}
-      error={status === 'error'}
-      label={label}
-      value={value}
-      type='text'
-      {{! pick new delimiters for mustache }}
-      {{=<% %>=}}
-      inputProps={{ inputMode: 'numeric', pattern: '[0-9]*', ...testProp }}
-      <%={{ }}=%>     {{! revert delimiters for mustache }}
-    />
+      <TextField
+        fullWidth
+        variant={readOnly ? 'standard' : 'outlined'}
+        helperText={helperTextToDisplay}
+        placeholder={placeholder ?? ''}
+        size='small'
+        required={required}
+        disabled={disabled}
+        onChange={intOnChange}
+        onBlur={!readOnly ? onBlur : undefined}
+        error={status === 'error'}
+        label={label}
+        value={value}
+        type='text'
+        {{! pick new delimiters for mustache }}
+        {{=<% %>=}}
+        inputProps={{ inputMode: 'numeric', pattern: '[0-9]*', ...testProp }}
+        <%={{ }}=%>     {{! revert delimiters for mustache }}
+      />
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }
-

package/src/tasks/create/templates/SDK-React/field/Integer/mock.ts.mustache

@@ -18,4 +18,4 @@ export const fieldMetadata = {
   type: 'Integer',
   displayAs: 'pxInteger',
   label: 'Integer sample'
-};
+};

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

@@ -62,6 +62,7 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
 // Duplicated runtime code from React SDK
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
+// eslint-disable-next-line sonarjs/cognitive-complexity
 export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   // Get emitted components from map (so we can get any override that may exist)
   const FieldValueList = getComponentFromMap('FieldValueList');
@@ -212,32 +213,31 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   //  So, hold off on rendering anything until options are available...
   return options.length === 0 ? null : (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-    <TextField
-      fullWidth
-      variant={readOnly ? 'standard' : 'outlined'}
-      helperText={helperTextToDisplay}
-      placeholder={thePConn.getLocalizedValue(placeholder, '', '')} // 2nd and 3rd args empty string until typedef marked correctly
-      size='small'
-      required={required}
-      disabled={disabled}
-      onChange={!readOnly ? handleChange : undefined}
-      error={status === 'error'}
-      label={label}
-      value={value === '' && !readOnly ? placeholder : value}
-      select
-      {{! pick new delimiters for mustache }}
-      {{=<% %>=}}
-      InputProps={{ ...readOnlyProp, ...testProp }}
-      <%={{ }}=%>     {{! revert delimiters for mustache }}
-    >
-      {options.map((option: any) => (
-        <MenuItem key={option.key} value={option.key}>
-          {/* @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv'  */}
-          {thePConn.getLocalizedValue(option.value, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName))}
-        </MenuItem>
-      ))}
-    </TextField>
+      <TextField
+        fullWidth
+        variant={readOnly ? 'standard' : 'outlined'}
+        helperText={helperTextToDisplay}
+        placeholder={thePConn.getLocalizedValue(placeholder, '', '')} // 2nd and 3rd args empty string until typedef marked correctly
+        size='small'
+        required={required}
+        disabled={disabled}
+        onChange={!readOnly ? handleChange : undefined}
+        error={status === 'error'}
+        label={label}
+        value={value === '' && !readOnly ? placeholder : value}
+        select
+        {{! pick new delimiters for mustache }}
+        {{=<% %>=}}
+        InputProps={{ ...readOnlyProp, ...testProp }}
+        <%={{ }}=%>     {{! revert delimiters for mustache }}
+      >
+        {options.map((option: any) => (
+          <MenuItem key={option.key} value={option.key}>
+            {/* @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv'  */}
+            {thePConn.getLocalizedValue(option.value, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName))}
+          </MenuItem>
+        ))}
+      </TextField>
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }
-

package/src/tasks/create/templates/SDK-React/field/Picklist-RadioButtons/mock.ts.mustache

@@ -42,7 +42,6 @@ export const rawMetadata = {
   }
 };
 
-
 export const stateProps = {
   value: '.PicklistRadioButtonsSample',
   placeholder: 'Select...',

package/src/tasks/create/templates/SDK-React/field/Text/config.json.mustache

@@ -10,7 +10,7 @@
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},
   "icon": "images/pz-url-active.svg",
-   "properties": [
+  "properties": [
     {
       "name": "label",
       "label": "Field label",

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

@@ -101,4 +101,3 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }
-

package/src/tasks/create/templates/SDK-React/field/Text/mock.ts.mustache

@@ -13,4 +13,4 @@ export const configProps = {
   status: '',
   hideLabel: false,
   validatemessage: ''
-};
+};

package/src/tasks/create/templates/SDK-React/field/Text-Email/config.json.mustache

@@ -10,7 +10,7 @@
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},
   "icon": "images/pz-email-active.svg",
- "properties": [
+  "properties": [
     {
       "name": "label",
       "label": "Field label",

package/src/tasks/create/templates/SDK-React/field/Text-Email/mock.ts.mustache

@@ -12,4 +12,4 @@ export const configProps = {
   disabled: false,
   displayMode: '',
   validatemessage: ''
-};
+};

package/src/tasks/create/templates/SDK-React/field/Text-Input/config.json.mustache

@@ -10,7 +10,7 @@
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},
   "icon": "images/pz-url-active.svg",
-   "properties": [
+  "properties": [
     {
       "name": "label",
       "label": "Field label",

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

@@ -101,4 +101,3 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }
-

package/src/tasks/create/templates/SDK-React/field/Text-Input/mock.ts.mustache

@@ -19,4 +19,4 @@ export const fieldMetadata = {
   maxLength: 256,
   displayAs: 'pxTextInput',
   label: 'TextInput Sample'
-};
+};

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

@@ -9,7 +9,6 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   fieldMetadata?: any;
 }
 
-
 // Duplicated runtime code from React SDK
 
 // 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}}
         InputProps={{ ...readOnlyProp, inputProps: { maxLength, ...testProp } }}
         <%={{ }}=%>     {{! revert delimiters for mustache }}
       />
-     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+    </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }
-

package/src/tasks/create/templates/SDK-React/field/Text-Paragraph/mock.ts.mustache

@@ -19,4 +19,4 @@ export const fieldMetadata = {
   displayAs: 'pxTextArea',
   label: 'Paragraph sample',
   maxLength: 256
-};
+};

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

@@ -1,7 +1,9 @@
 import MuiPhoneNumber from 'material-ui-phone-number';
+import { useEffect, useState } from 'react';
 
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
@@ -17,6 +19,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   const FieldValueList = getComponentFromMap('FieldValueList');
 
   const {
+    getPConnect,
     label,
     required,
     disabled,
@@ -24,7 +27,6 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     validatemessage,
     status,
     onChange,
-    onBlur,
     readOnly,
     testId,
     helperText,
@@ -32,6 +34,14 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     hideLabel,
     placeholder
   } = props;
+
+  const pConn = getPConnect();
+  const actions = pConn.getActionsApi();
+  const propName = (pConn.getStateProps() as any).value;
+
+  const [inputValue, setInputValue] = useState(value);
+  useEffect(() => setInputValue(value), [value]);
+
   const helperTextToDisplay = validatemessage || helperText;
 
   let testProp = {};
@@ -73,21 +83,20 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
             <%={{ }}=%>     {{! revert delimiters for mustache }}
             disableDropdown={disableDropdown}
           />
-         </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+        </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
       </div>
     );
   }
 
   const handleChange = inputVal => {
-    let phoneValue = inputVal && inputVal.replace(/\D+/g, '');
-    phoneValue = `+${phoneValue}`;
-    onChange({ value: phoneValue });
+    setInputValue(inputVal);
   };
 
   const handleBlur = event => {
     const phoneValue = event?.target?.value;
-    event.target.value = `+${phoneValue && phoneValue.replace(/\D+/g, '')}`;
-    onBlur(event);
+    let phoneNumber = phoneValue.split(' ').slice(1).join();
+    phoneNumber = phoneNumber ? `+${phoneValue && phoneValue.replace(/\D+/g, '')}` : '';
+    handleEvent(actions, 'changeNblur', propName, phoneNumber);
   };
 
   return (
@@ -105,7 +114,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
         onBlur={!readOnly ? handleBlur : undefined}
         error={status === 'error'}
         label={label}
-        value={value}
+        value={inputValue}
         {{! pick new delimiters for mustache }}
         {{=<% %>=}}
         InputProps={{ ...testProp }}
@@ -114,4 +123,3 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }
-

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

@@ -73,7 +73,6 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
         InputProps={{ inputProps: { ...testProp } }}
         <%={{ }}=%>     {{! revert delimiters for mustache }}
       />
-     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+    </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }
-

package/src/tasks/create/templates/SDK-React/field/Text-URL/mock.ts.mustache

@@ -13,4 +13,4 @@ export const configProps = {
   status: '',
   hideLabel: false,
   validatemessage: ''
-};
+};

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

@@ -4,14 +4,14 @@ import type { Meta, StoryObj } from '@storybook/react';
 import {{COMPONENT_CLASS_NAME}} from './index';
 import { configProps, stateProps } from './mock';
 
-const meta: Meta<typeof {{COMPONENT_CLASS_NAME}} > = {
-  title: '{{COMPONENT_CLASS_NAME}} ',
-  component: {{COMPONENT_CLASS_NAME}} ,
+const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
+  title: '{{COMPONENT_CLASS_NAME}}',
+  component: {{COMPONENT_CLASS_NAME}},
   excludeStories: /.*Data$/
 };
 
 export default meta;
-type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}} >;
+type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
 export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
   const [value, setValue] = useState(configProps.value);

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

@@ -11,7 +11,6 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   // If any, enter additional props that only exist on this componentName
 }
 
-
 // Duplicated runtime code from React SDK
 
 // 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}}
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }
-

package/src/tasks/create/templates/SDK-React/field/TimeOfDay/mock.ts.mustache

@@ -1,8 +1,8 @@
 export const configProps = {
-  value: "",
-  label: "Time Sample",
-  helperText: "Time Helper Text",
-  testId: "time-12345678",
+  value: '',
+  label: 'Time Sample',
+  helperText: 'Time Helper Text',
+  testId: 'time-12345678',
   disabled: false,
   required: false,
   readOnly: false,
@@ -13,6 +13,6 @@ export const configProps = {
 };
 
 export const stateProps = {
-  value: ".TimeSample",
+  value: '.TimeSample',
   hasSuggestions: false
-};
+};