(chore) Configure prettier

.eslintrc

@@ -4,10 +4,8 @@
   },
   "extends": [
     "eslint:recommended",
-    "plugin:prettier/recommended",
     "plugin:@typescript-eslint/recommended",
-    "plugin:@typescript-eslint/recommended-requiring-type-checking",
-    "prettier"
+    "plugin:@typescript-eslint/recommended-requiring-type-checking"
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {

__mocks__/react-i18next.js

@@ -1,43 +1,38 @@
 /** At present, this entire mock is boilerplate. */
 
-const React = require("react");
-const reactI18next = require("react-i18next");
+const React = require('react');
+const reactI18next = require('react-i18next');
 
-const hasChildren = (node) =>
-  node && (node.children || (node.props && node.props.children));
+const hasChildren = (node) => node && (node.children || (node.props && node.props.children));
 
-const getChildren = (node) =>
-  node && node.children ? node.children : node.props && node.props.children;
+const getChildren = (node) => (node && node.children ? node.children : node.props && node.props.children);
 
 const renderNodes = (reactNodes) => {
-  if (typeof reactNodes === "string") {
+  if (typeof reactNodes === 'string') {
     return reactNodes;
   }
 
   return Object.keys(reactNodes).map((key, i) => {
     const child = reactNodes[key];
     const isElement = React.isValidElement(child);
 
-    if (typeof child === "string") {
+    if (typeof child === 'string') {
       return child;
     }
     if (hasChildren(child)) {
       const inner = renderNodes(getChildren(child));
       return React.cloneElement(child, { ...child.props, key: i }, inner);
     }
-    if (typeof child === "object" && !isElement) {
-      return Object.keys(child).reduce(
-        (str, childKey) => `${str}${child[childKey]}`,
-        ""
-      );
+    if (typeof child === 'object' && !isElement) {
+      return Object.keys(child).reduce((str, childKey) => `${str}${child[childKey]}`, '');
     }
 
     return child;
   });
 };
 
 const useMock = [(k) => k, {}];
-useMock.t = (k, o) => (o && o.defaultValue) || (typeof o === "string" ? o : k);
+useMock.t = (k, o) => (o && o.defaultValue) || (typeof o === 'string' ? o : k);
 useMock.i18n = {};
 
 module.exports = {

package.json

@@ -68,9 +68,7 @@
     "concurrently": "^6.5.1",
     "css-loader": "^6.8.1",
     "eslint": "^8.49.0",
-    "eslint-config-prettier": "^8.10.0",
     "eslint-config-react-app": "^7.0.1",
-    "eslint-plugin-prettier": "^4.2.1",
     "husky": "^8.0.3",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^28.1.3",

prettier.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  bracketSpacing: true,
+  printWidth: 120,
+  semi: true,
+  singleQuote: true,
+  tabWidth: 2,
+  trailingComma: 'all',
+};

src/CancelModal.tsx

@@ -1,12 +1,6 @@
-import {
-  Button,
-  ComposedModal,
-  ModalBody,
-  ModalFooter,
-  ModalHeader,
-} from "@carbon/react";
-import React from "react";
-import { useTranslation } from "react-i18next";
+import { Button, ComposedModal, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 const CancelModal = ({ open, setOpen, context }) => {
   const { t } = useTranslation();
@@ -23,22 +17,22 @@ const CancelModal = ({ open, setOpen, context }) => {
 
   return (
     <ComposedModal open={open}>
-      <ModalHeader>{t("areYouSure", "Are you sure?")}</ModalHeader>
+      <ModalHeader>{t('areYouSure', 'Are you sure?')}</ModalHeader>
       <ModalBody>
         {t(
-          "cancelExplanation",
-          "You will lose any unsaved changes on the current form. Do you want to discard the current session?"
+          'cancelExplanation',
+          'You will lose any unsaved changes on the current form. Do you want to discard the current session?',
         )}
       </ModalBody>
       <ModalFooter>
         <Button kind="secondary" onClick={onCancel}>
-          {t("cancel", "Cancel")}
+          {t('cancel', 'Cancel')}
         </Button>
         <Button kind="danger" onClick={onDiscard}>
-          {t("discard", "Discard")}
+          {t('discard', 'Discard')}
         </Button>
         <Button kind="primary" onClick={onSaveAndClose}>
-          {t("saveSession", "Save Session")}
+          {t('saveSession', 'Save Session')}
         </Button>
       </ModalFooter>
     </ComposedModal>

src/CompleteModal.tsx

@@ -1,12 +1,6 @@
-import {
-  Button,
-  ComposedModal,
-  ModalBody,
-  ModalFooter,
-  ModalHeader,
-} from "@carbon/react";
-import React from "react";
-import { useTranslation } from "react-i18next";
+import { Button, ComposedModal, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 const CompleteModal = ({ open, setOpen, context, validateFirst = false }) => {
   const { t } = useTranslation();
@@ -24,19 +18,14 @@ const CompleteModal = ({ open, setOpen, context, validateFirst = false }) => {
 
   return (
     <ComposedModal open={open}>
-      <ModalHeader>{t("areYouSure", "Are you sure?")}</ModalHeader>
-      <ModalBody>
-        {t(
-          "saveExplanation",
-          "Do you want to save the current form and exit the workflow?"
-        )}
-      </ModalBody>
+      <ModalHeader>{t('areYouSure', 'Are you sure?')}</ModalHeader>
+      <ModalBody>{t('saveExplanation', 'Do you want to save the current form and exit the workflow?')}</ModalBody>
       <ModalFooter>
         <Button kind="secondary" onClick={onCancel}>
-          {t("cancel", "Cancel")}
+          {t('cancel', 'Cancel')}
         </Button>
         <Button kind="primary" onClick={onComplete}>
-          {t("complete", "Complete")}
+          {t('complete', 'Complete')}
         </Button>
       </ModalFooter>
     </ComposedModal>

src/FormBootstrap.tsx

@@ -1,7 +1,7 @@
-import React, { useContext, useEffect, useState } from "react";
-import { detach, ExtensionSlot } from "@openmrs/esm-framework";
-import useGetPatient from "./hooks/useGetPatient";
-import GroupFormWorkflowContext from "./context/GroupFormWorkflowContext";
+import React, { useContext, useEffect, useState } from 'react';
+import { detach, ExtensionSlot } from '@openmrs/esm-framework';
+import useGetPatient from './hooks/useGetPatient';
+import GroupFormWorkflowContext from './context/GroupFormWorkflowContext';
 
 export interface Order {
   uuid: string;
@@ -131,7 +131,7 @@ const FormBootstrap = ({
   const { activeSessionMeta } = useContext(GroupFormWorkflowContext);
 
   useEffect(() => {
-    return () => detach("form-widget-slot", "form-widget-slot");
+    return () => detach('form-widget-slot', 'form-widget-slot');
   });
 
   // FIXME This should not be necessary
@@ -150,13 +150,13 @@ const FormBootstrap = ({
         <ExtensionSlot
           name="form-widget-slot"
           state={{
-            view: "form",
+            view: 'form',
             formUuid,
-            visitUuid: visitUuid ?? "",
-            visitTypeUuid: visitTypeUuid ?? "",
+            visitUuid: visitUuid ?? '',
+            visitTypeUuid: visitTypeUuid ?? '',
             patientUuid,
             patient,
-            encounterUuid: encounterUuid ?? "",
+            encounterUuid: encounterUuid ?? '',
             closeWorkspace: () => undefined,
             handlePostResponse: (encounter) => {
               handlePostResponse(encounter);

src/Root.tsx

@@ -1,11 +1,9 @@
-import React from "react";
-import { BrowserRouter, Route, Routes } from "react-router-dom";
-import { appPath } from "./constant";
-const FormsPage = React.lazy(() => import("./forms-page"));
-const FormEntryWorkflow = React.lazy(() => import("./form-entry-workflow"));
-const GroupFormEntryWorkflow = React.lazy(
-  () => import("./group-form-entry-workflow")
-);
+import React from 'react';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import { appPath } from './constant';
+const FormsPage = React.lazy(() => import('./forms-page'));
+const FormEntryWorkflow = React.lazy(() => import('./form-entry-workflow'));
+const GroupFormEntryWorkflow = React.lazy(() => import('./group-form-entry-workflow'));
 
 const Root = () => {
   return (
@@ -14,10 +12,7 @@ const Root = () => {
         <Routes>
           <Route path="/" element={<FormsPage />} />
           <Route path="/form/:formUuid" element={<FormEntryWorkflow />} />
-          <Route
-            path="/groupform/:formUuid"
-            element={<GroupFormEntryWorkflow />}
-          />
+          <Route path="/groupform/:formUuid" element={<GroupFormEntryWorkflow />} />
         </Routes>
       </BrowserRouter>
     </main>