fixed prettier formatting

.prettierignore

@@ -0,0 +1,8 @@
+**/.git
+**/.github
+**/.vscode
+**/.svn
+**/.hg
+**/*.md
+**/*.svg
+**/assets

.prettierrc.js

@@ -1,8 +1,9 @@
+// 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
+
+const pegaPrettierConfig = require('@pega/prettier-config');
+
 module.exports = {
-  ...require("@pega/prettier-config"),
-  "overrides": [
-    {
-      excludeFiles: [ "package.json", "sdk-config.json" ]
-    }
-  ]
-}
+  ...pegaPrettierConfig,
+  printWidth: 150
+};

.storybook/main.js

@@ -1,4 +1,4 @@
-const path = require("path");
+const path = require('path');
 
 /** @type { import('@storybook/react-webpack5').StorybookConfig } */
 const config = {
@@ -7,16 +7,19 @@ const config = {
   framework: {
     name: '@storybook/react-webpack5'
   },
-  webpackFinal: (config) => {
+  webpackFinal: config => {
     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(__dirname, '../__mocks__/DetailsFields.js');
+    config.resolve.alias['@pega/react-sdk-components/lib/components/designSystemExtension/DetailsFields'] = path.resolve(
+      __dirname,
+      '../__mocks__/DetailsFields.js'
+    );
     config.module.rules.push({
       test: /\.(d.ts)$/,
-      loader: 'null-loader',
+      loader: 'null-loader'
     });
     config.module.rules.push({
       test: /\.(map)$/,
-      loader: 'null-loader',
+      loader: 'null-loader'
     });
     return config;
   }

.storybook/preview.js

@@ -2,8 +2,6 @@ import { getSdkComponentMap } from '@pega/react-sdk-components/lib/bridge/helper
 
 getSdkComponentMap();
 
-
-
 /** @type { import('@storybook/react').Preview } */
 const preview = {
   parameters: {

.vscode/settings.json

@@ -10,32 +10,30 @@
 
   "editor.insertSpaces": true,
   "editor.tabSize": 2,
-  "editor.formatOnSave": false,
+  "editor.formatOnSave": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "editor.codeActionsOnSave": [
-    /*"source.fixAll.eslint"*/
-  ],
+  "editor.codeActionsOnSave": ["source.fixAll.eslint"],
 
   "[javascript]": {
-    "editor.formatOnSave": false
+    "editor.formatOnSave": true
   },
   "[javascriptreact]": {
-    "editor.formatOnSave": false
+    "editor.formatOnSave": true
   },
   "[typescript]": {
-    "editor.formatOnSave": false
+    "editor.formatOnSave": true
   },
   "[typescriptreact]": {
-    "editor.formatOnSave": false
+    "editor.formatOnSave": true
   },
   "[json]": {
-    "editor.formatOnSave": false
+    "editor.formatOnSave": true
   },
   "[jsonc]": {
-    "editor.formatOnSave": false
+    "editor.formatOnSave": true
   },
   "[html]": {
-    "editor.formatOnSave": false
+    "editor.formatOnSave": true
   },
   "[markdown]": {
     "editor.formatOnSave": false
@@ -50,9 +48,6 @@
 
   "eslint.enable": true,
   "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
-
-  "jest.pathToJest": "npm test --",
-
-  "json.schemas": [
-  ]
+  "eslint.workingDirectories": [{ "pattern": "." }],
+  "prettier.configPath": ".prettierrc.js"
 }

__mocks__/DetailsFields.jsx

@@ -0,0 +1,139 @@
+import React, { createElement, isValidElement } from 'react';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
+import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters/index';
+
+import createPConnectComponent from './react_pconnect';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    paddingRight: theme.spacing(1),
+    paddingLeft: theme.spacing(1),
+    paddingTop: theme.spacing(1),
+    paddingBottom: theme.spacing(1),
+    marginRight: theme.spacing(1),
+    marginLeft: theme.spacing(1),
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1)
+  },
+  fieldLabel: {
+    display: 'block',
+    fontWeight: 400,
+    color: theme.palette.text.secondary
+  },
+  fieldValue: {
+    fontWeight: 400,
+    color: theme.palette.text.primary
+  }
+}));
+
+export default function DetailsFields(props) {
+  // const componentName = "DetailsFields";
+  const { fields = [] } = props;
+  const classes = useStyles();
+  const fieldComponents = [];
+
+  fields?.forEach((field, index) => {
+    const thePConn = field.getPConnect();
+    const theCompType = thePConn.getComponentName().toLowerCase();
+    const { label } = thePConn.getConfigProps();
+    const configObj = thePConn?.getReferencedView();
+    configObj.config.readOnly = true;
+    configObj.config.displayMode = 'LABELS_LEFT';
+    const propToUse = { ...thePConn.getInheritedProps() };
+    configObj.config.label = theCompType === 'reference' ? propToUse?.label : label;
+    fieldComponents.push({
+      type: theCompType,
+      label,
+      // eslint-disable-next-line react/no-array-index-key
+      value: <React.Fragment key={index}>{createElement(createPConnectComponent(), thePConn.getReferencedViewPConnect())}</React.Fragment>
+    });
+  });
+
+  function getGridItemLabel(field, keyVal) {
+    const dispValue = field.label;
+
+    return (
+      <Grid item xs={6} key={keyVal}>
+        <Typography variant='body2' component='span' className={`${classes.fieldLabel}`}>
+          {dispValue}
+        </Typography>
+      </Grid>
+    );
+  }
+
+  function formatItemValue(inField) {
+    const { type, value } = inField;
+    let formattedVal = value;
+
+    // eslint-disable-next-line sonarjs/no-small-switch
+    switch (type) {
+      case 'date':
+        formattedVal = format(value, type);
+        break;
+
+      default:
+        // No match means we return the value as we received it
+        break;
+    }
+
+    // Finally, if the value is undefined or an empty string, we want to display it as "---"
+    if (formattedVal === undefined || formattedVal === '') {
+      formattedVal = '---';
+    }
+
+    return formattedVal;
+  }
+
+  function getGridItemValue(field, keyVal) {
+    const formattedValue = formatItemValue(field);
+
+    return (
+      <Grid item xs={6} key={keyVal}>
+        <Typography variant='body2' component='span' className={classes.fieldValue}>
+          {formattedValue}
+        </Typography>
+      </Grid>
+    );
+  }
+
+  function getGridItem(field, keyVal) {
+    return (
+      <Grid item xs={12} key={keyVal}>
+        <Typography variant='body2' component='span' className={classes.fieldValue}>
+          {field?.value}
+        </Typography>
+      </Grid>
+    );
+  }
+
+  function getGridItems() {
+    return fieldComponents.map((field, index) => {
+      if (field?.type === 'reference') {
+        return field?.value;
+      }
+      if (isValidElement(field?.value)) {
+        return (
+          // eslint-disable-next-line react/no-array-index-key
+          <Grid container spacing={1} style={{ padding: '4px 0px' }} key={index}>
+            {getGridItem(field, `${index}-item`)}
+          </Grid>
+        );
+      }
+      return (
+        // eslint-disable-next-line react/no-array-index-key
+        <Grid container spacing={1} style={{ padding: '4px 0px' }} key={index}>
+          {getGridItemLabel(field, `${index}-label`)}
+          {getGridItemValue(field, `${index}-value`)}
+        </Grid>
+      );
+    });
+  }
+
+  return <>{getGridItems()}</>;
+}
+
+export function decorator(story) {
+  return story();
+}