Fixed trailingComma and other formatting issues

Author: Sharma

.prettierrc.js

@@ -1,7 +1,8 @@
 // Prettier config options: https://prettier.io/docs/en/options.html
 // Shared front-end config: https://git.pega.io/projects/FE/repos/configs/browse/packages/prettier-config/index.json
 
-module.exports = import('@pega/prettier-config').then(pegaPrettierConfig => ({
+module.exports = import('@pega/prettier-config').then((pegaPrettierConfig) => ({
   ...pegaPrettierConfig.default,
-  printWidth: 150
+  printWidth: 150,
+  trailingComma: 'none'
 }));

.storybook/main.ts

@@ -20,7 +20,7 @@ const config = {
   ],
   framework: '@storybook/react-webpack5',
 
-  webpackFinal: async config => {
+  webpackFinal: async (config) => {
     if (config.resolve?.alias) {
       config.resolve.alias['@pega/react-sdk-components/lib/bridge/react_pconnect'] = path.resolve(__dirname, '../__mocks__/react_pconnect.jsx');
       config.resolve.alias['@pega/react-sdk-components/lib/components/designSystemExtension/DetailsFields'] = path.resolve(

__mocks__/DetailsFields.jsx

@@ -7,7 +7,7 @@ import { format } from '@pega/react-sdk-components/lib/components/helpers/format
 
 import createPConnectComponent from './react_pconnect';
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   root: {
     paddingRight: theme.spacing(1),
     paddingLeft: theme.spacing(1),

__mocks__/state-utils.tsx

@@ -1,7 +1,7 @@
 import { connect, Provider, shallowEqual } from 'react-redux';
 
 const connectToState = (mapStateToProps = () => {}) => {
-  return Component => {
+  return (Component) => {
     const ConnectedComponent = connect(mapStateToProps, null, null, {
       areStatePropsEqual: (next, prev: any) => {
         // Compare visibility

scripts/copy-configs.js

@@ -59,15 +59,15 @@ function gatherConfigFiles() {
   // Look for an process any Custom component configs
   const jsFilesCustom = fg.sync(`${COMPONENTS_ROOT_SOURCE}/${COMPONENTS_CUSTOM_DIR}/**/${CONFIG_NAME}`);
 
-  jsFilesCustom.forEach(file => {
+  jsFilesCustom.forEach((file) => {
     // console.log(`${LOG_PRELUDE} found file: ${file}`);
     copyConfigRelatedFile(file);
   });
 
   // Look for an process any override component configs
   const jsFilesOverride = fg.sync(`${COMPONENTS_ROOT_SOURCE}/${COMPONENTS_OVERRIDE_DIR}/**/${CONFIG_NAME}`);
 
-  jsFilesOverride.forEach(file => {
+  jsFilesOverride.forEach((file) => {
     // console.log(`${LOG_PRELUDE} found file: ${file}`);
     copyConfigRelatedFile(file);
   });
@@ -76,7 +76,7 @@ function gatherConfigFiles() {
 function gatherConfigExtFiles() {
   const jsFiles = fg.sync(`${COMPONENTS_ROOT_SOURCE}/**/${CONFIG_EXT_NAME}`);
 
-  jsFiles.forEach(file => {
+  jsFiles.forEach((file) => {
     // console.log(`${LOG_PRELUDE} found file: ${file}`);
     copyConfigRelatedFile(file);
   });

src/samples/Embedded/Header/index.tsx

@@ -1,7 +1,7 @@
 import { Typography } from '@mui/material';
 import { makeStyles } from '@mui/styles';
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   embeddedHeader: {
     display: 'flex',
     alignItems: 'center',

src/samples/Embedded/ResolutionScreen/index.tsx

@@ -1,6 +1,6 @@
 import makeStyles from '@mui/styles/makeStyles';
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   resolutionPart: {
     display: 'flex',
     flexDirection: 'row'

src/samples/Embedded/ShoppingOptionCard/index.tsx

@@ -1,6 +1,6 @@
 import makeStyles from '@mui/styles/makeStyles';
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   swatchHeader: {
     display: 'flex',
     flexDirection: 'row',

src/samples/Embedded/index.tsx

@@ -36,14 +36,14 @@ export default function Embedded() {
     }
   };
 
-  const initializeRootContainerProps = renderObj => {
+  const initializeRootContainerProps = (renderObj) => {
     const { props } = renderObj;
 
     setRootProps(props);
   };
 
   const startMashup = () => {
-    PCore.onPCoreReady(async renderObj => {
+    PCore.onPCoreReady(async (renderObj) => {
       // Check that we're seeing the PCore version we expect
       compareSdkPCoreVersions();
 

src/samples/FullPortal/InvalidPortal.tsx

@@ -16,7 +16,7 @@ export default function InvalidPortal({ defaultPortal, portals, onSelect }) {
         Please select one of the portals available to the operator's access group:
       </div>
       <div className='portals-list'>
-        {portals.map(portal => (
+        {portals.map((portal) => (
           <div key={portal} className='portal-list-item' onClick={() => onSelect(portal)}>
             {portal}
           </div>