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

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyIconButtonURL/demo.stories.tsx

@@ -0,0 +1,91 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import PegaDxilMyIconButtonUrl from './index';
+import { configProps } from './mock';
+
+const meta: Meta<typeof PegaDxilMyIconButtonUrl> = {
+  title: 'PegaDxilMyIconButtonUrl',
+  component: PegaDxilMyIconButtonUrl,
+  excludeStories: /.*Data$/
+};
+
+export default meta;
+type Story = StoryObj<typeof PegaDxilMyIconButtonUrl>;
+
+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 BasePegaDxilMyIconButtonUrl: 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 <PegaDxilMyIconButtonUrl {...props} {...args} />;
+};
+
+BasePegaDxilMyIconButtonUrl.args = {
+  countryCode: configProps.countryCode
+};

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyIconButtonURL/index.tsx

@@ -0,0 +1,157 @@
+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 StyledPegaDxilMyIconButtonUrlWrapper 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 PegaDxilMyIconButtonUrlProps 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 PegaDxilMyIconButtonUrl(props: PegaDxilMyIconButtonUrlProps) {
+  // 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 <StyledPegaDxilMyIconButtonUrlWrapper> {displayComp} </StyledPegaDxilMyIconButtonUrlWrapper>;
+  }
+
+  const localLabel = ''
+    .concat(PConnect.getLocalizedValue('State list for', '', ''))
+    .concat(PConnect.getLocalizedValue(` ${countryCode}`, '', ''))
+    .concat(' ');
+
+  return (
+    <StyledPegaDxilMyIconButtonUrlWrapper>
+      <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>
+      )}
+    </StyledPegaDxilMyIconButtonUrlWrapper>
+  );
+}

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyIconButtonURL/mock.ts

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

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyIconButtonURL/styles.js

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

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyInteger/config.json

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

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyInteger/index.tsx

@@ -73,23 +73,22 @@ export default function PegaDxilMyInteger(props: PegaDxilMyIntegerProps) {
 
   return (
     <StyledPegaDxilMyIntegerWrapper>
-    <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'
-      inputProps={{ inputMode: 'numeric', pattern: '[0-9]*', ...testProp }}
-    />
+      <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'
+        inputProps={{ inputMode: 'numeric', pattern: '[0-9]*', ...testProp }}
+      />
     </StyledPegaDxilMyIntegerWrapper>
   );
 }
-

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyInteger/mock.ts

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

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyParagraph/index.tsx

@@ -9,7 +9,6 @@ interface PegaDxilMyParagraphProps 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
@@ -80,7 +79,6 @@ export default function PegaDxilMyParagraph(props: PegaDxilMyParagraphProps) {
         value={value}
         InputProps={{ ...readOnlyProp, inputProps: { maxLength, ...testProp } }}
       />
-     </StyledPegaDxilMyParagraphWrapper>
+    </StyledPegaDxilMyParagraphWrapper>
   );
 }
-

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyParagraph/mock.ts

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

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyPercentage/config.json

@@ -10,7 +10,7 @@
   "type": "Field",
   "subtype": "Decimal-Percentage",
   "icon": "images/pz-text-input-active.svg",
- "properties": [
+  "properties": [
     {
       "name": "label",
       "label": "Field label",

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyPercentage/index.tsx

@@ -1,5 +1,6 @@
-import CurrencyTextField from '@unicef/material-ui-currency-textfield';
-
+import { TextField } from '@material-ui/core';
+import { NumericFormat } from 'react-number-format';
+import { 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 { getCurrencyCharacters, getCurrencyOptions } from '@pega/react-sdk-components/lib/components/field/Currency/currency-utils.js';
@@ -7,13 +8,15 @@ import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event
 import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
 import StyledPegaDxilMyPercentageWrapper from './styles';
 
-/* Using @unicef/material-ui-currency-textfield component here, since it allows formatting decimal values,
+/* Using react-number-format component here, since it allows formatting decimal values,
 as per the locale.
 */
 
 interface PegaDxilMyPercentageProps extends PConnFieldProps {
   // If any, enter additional props that only exist on this componentName
-  currencyISOCode: string;
+  currencyISOCode?: string;
+  showGroupSeparators?: string;
+  decimalPrecision?: number;
 }
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
@@ -37,9 +40,13 @@ export default function PegaDxilMyPercentage(props: PegaDxilMyPercentageProps) {
     helperText,
     displayMode,
     hideLabel,
-    placeholder
+    placeholder,
+    showGroupSeparators,
+    decimalPrecision
   } = props;
 
+  const [values, setValues] = useState(value.toString());
+
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
   const propName = (pConn.getStateProps() as any).value;
@@ -48,7 +55,11 @@ export default function PegaDxilMyPercentage(props: PegaDxilMyPercentageProps) {
   const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
   const formattedValue = format(value, pConn.getComponentName().toLowerCase(), theCurrencyOptions);
 
-  // console.log(`Percentage: label: ${label} value: ${value}`);
+  let readOnlyProp = {}; // Note: empty if NOT ReadOnly
+
+  if (readOnly) {
+    readOnlyProp = { readOnly: true };
+  }
 
   if (displayMode === 'LABELS_LEFT') {
     return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} />;
@@ -68,13 +79,18 @@ export default function PegaDxilMyPercentage(props: PegaDxilMyPercentageProps) {
   const theCurrDec = theSymbols.theDecimalIndicator;
   const theCurrSep = theSymbols.theDigitGroupSeparator;
 
-  function PercentageOnBlur(event, inValue) {
-    handleEvent(actions, 'changeNblur', propName, inValue !== '' ? Number(inValue) : inValue);
+  function PercentageOnBlur() {
+    handleEvent(actions, 'changeNblur', propName, values);
   }
 
+  const handleChange = val => {
+    setValues(val.value);
+  };
+
   return (
     <StyledPegaDxilMyPercentageWrapper>
-      <CurrencyTextField
+      <NumericFormat
+        valueIsNumericString
         fullWidth
         variant={readOnly ? 'standard' : 'outlined'}
         helperText={helperTextToDisplay}
@@ -82,20 +98,19 @@ export default function PegaDxilMyPercentage(props: PegaDxilMyPercentageProps) {
         size='small'
         required={required}
         disabled={disabled}
-        readOnly={!!readOnly}
         error={status === 'error'}
         label={label}
-        value={value}
-        type='text'
-        outputFormat='number'
-        textAlign='left'
-        InputProps={{
-          inputProps: { ...testProp }
+        value={values}
+        onValueChange={val => {
+          handleChange(val);
         }}
-        currencySymbol=''
-        decimalCharacter={theCurrDec}
-        digitGroupSeparator={theCurrSep}
         onBlur={!readOnly ? PercentageOnBlur : undefined}
+        decimalSeparator={theCurrDec}
+        thousandSeparator={showGroupSeparators ? theCurrSep : ''}
+        decimalScale={decimalPrecision}
+        suffix='%'
+        InputProps={{ ...readOnlyProp, inputProps: { ...testProp } }}
+        customInput={TextField}
       />
     </StyledPegaDxilMyPercentageWrapper>
   );

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyPercentage/mock.ts

@@ -18,4 +18,4 @@ export const fieldMetadata = {
   type: 'Decimal',
   displayAs: 'pxPercentage',
   label: 'Percentage sample'
-};
+};

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyPhone/index.tsx

@@ -70,7 +70,7 @@ export default function PegaDxilMyPhone(props: PegaDxilMyPhoneProps) {
             }}
             disableDropdown={disableDropdown}
           />
-         </StyledPegaDxilMyPhoneWrapper>
+        </StyledPegaDxilMyPhoneWrapper>
       </div>
     );
   }
@@ -108,4 +108,3 @@ export default function PegaDxilMyPhone(props: PegaDxilMyPhoneProps) {
     </StyledPegaDxilMyPhoneWrapper>
   );
 }
-

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyPicklist/index.tsx

@@ -62,6 +62,7 @@ interface PegaDxilMyPicklistProps 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 PegaDxilMyPicklist(props: PegaDxilMyPicklistProps) {
   // Get emitted components from map (so we can get any override that may exist)
   const FieldValueList = getComponentFromMap('FieldValueList');
@@ -212,29 +213,28 @@ export default function PegaDxilMyPicklist(props: PegaDxilMyPicklistProps) {
   //  So, hold off on rendering anything until options are available...
   return options.length === 0 ? null : (
     <StyledPegaDxilMyPicklistWrapper>
-    <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
-      InputProps={{ ...readOnlyProp, ...testProp }}
-    >
-      {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
+        InputProps={{ ...readOnlyProp, ...testProp }}
+      >
+        {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>
     </StyledPegaDxilMyPicklistWrapper>
   );
 }
-

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyRadiobuttons/mock.ts

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

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyText/config.json

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

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyText/index.tsx

@@ -98,4 +98,3 @@ export default function PegaDxilMyText(props: PegaDxilMyTextProps) {
     </StyledPegaDxilMyTextWrapper>
   );
 }
-

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyText/mock.ts

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

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyTextInput/config.json

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

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyTextInput/index.tsx

@@ -98,4 +98,3 @@ export default function PegaDxilMyTextInput(props: PegaDxilMyTextInputProps) {
     </StyledPegaDxilMyTextInputWrapper>
   );
 }
-

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyTextInput/mock.ts

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

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyTimeOfDay/demo.stories.tsx

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

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyTimeOfDay/index.tsx

@@ -11,7 +11,6 @@ interface PegaDxilMyTimeOfDayProps 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
@@ -84,4 +83,3 @@ export default function PegaDxilMyTimeOfDay(props: PegaDxilMyTimeOfDayProps) {
     </StyledPegaDxilMyTimeOfDayWrapper>
   );
 }
-

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyTimeOfDay/mock.ts

@@ -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
-};
+};