(chore) Configure prettier

.eslintrc

@@ -1,5 +1,5 @@
 {
-  "extends": ["ts-react-important-stuff", "plugin:prettier/recommended"],
+  "extends": ["ts-react-important-stuff"],
   "parser": "@typescript-eslint/parser",
   "ignorePatterns": ["**/*.test.tsx"],
   "rules": {

.husky/pre-commit

@@ -4,5 +4,5 @@
 set -e  # die on error
 
 yarn turbo extract-translations
-yarn pretty-quick --staged
+yarn prettier && npx lint-staged
 yarn turbo document --since main

e2e/core/index.ts

@@ -1 +1 @@
-export * from "./test";
+export * from './test';

e2e/core/test.ts

@@ -1,4 +1,4 @@
-import { test as base } from "@playwright/test";
+import { test as base } from '@playwright/test';
 
 // This file sets up our custom test harness using the custom fixtures.
 // See https://playwright.dev/docs/test-fixtures#creating-a-fixture for details.

e2e/pages/index.ts

@@ -1 +1 @@
-export * from "./login-page";
+export * from './login-page';

e2e/pages/login-page.ts

@@ -1,4 +1,4 @@
-import { Page } from "@playwright/test";
+import { Page } from '@playwright/test';
 
 export class LoginPage {
   constructor(readonly page: Page) {}

e2e/specs/login.spec.ts

@@ -1,42 +1,38 @@
-import { test } from "../core";
-import { expect } from "@playwright/test";
-import { LoginPage } from "../pages";
+import { test } from '../core';
+import { expect } from '@playwright/test';
+import { LoginPage } from '../pages';
 
-test("Should login as Admin", async ({ page }) => {
+test('Should login as Admin', async ({ page }) => {
   const loginPage = new LoginPage(page);
 
-  await test.step("When I goto the login page", async () => {
+  await test.step('When I goto the login page', async () => {
     await loginPage.goto();
   });
 
-  await test.step("And I enter the username", async () => {
-    await page
-      .locator("#username")
-      .fill(`${process.env.E2E_USER_ADMIN_USERNAME}`);
-    await page.getByText("Continue").click();
+  await test.step('And I enter the username', async () => {
+    await page.locator('#username').fill(`${process.env.E2E_USER_ADMIN_USERNAME}`);
+    await page.getByText('Continue').click();
   });
 
-  await test.step("And I enter the password", async () => {
-    await page
-      .locator("#password")
-      .fill(`${process.env.E2E_USER_ADMIN_PASSWORD}`);
+  await test.step('And I enter the password', async () => {
+    await page.locator('#password').fill(`${process.env.E2E_USER_ADMIN_PASSWORD}`);
   });
 
-  await test.step("And I click login buttion", async () => {
-    await page.getByText("Log in").click();
+  await test.step('And I click login buttion', async () => {
+    await page.getByText('Log in').click();
   });
 
-  await test.step("And I choose the location", async () => {
-    await page.getByText("Outpatient clinic").click();
-    await page.getByText("Confirm").click();
+  await test.step('And I choose the location', async () => {
+    await page.getByText('Outpatient clinic').click();
+    await page.getByText('Confirm').click();
   });
 
-  await test.step("Then I should be logged in", async () => {
+  await test.step('Then I should be logged in', async () => {
     await expect(page).toHaveURL(`${process.env.E2E_BASE_URL}/spa/home`);
   });
 
-  await test.step("Then I logged out", async () => {
-    await page.getByRole("button", { name: "Users" }).click();
-    await page.getByText("Logout").click();
+  await test.step('Then I logged out', async () => {
+    await page.getByRole('button', { name: 'Users' }).click();
+    await page.getByText('Logout').click();
   });
 });

package.json

@@ -19,7 +19,7 @@
     "build:apps": "turbo run build --filter='@openmrs/*-app'",
     "setup": "yarn install && turbo run build",
     "verify": "turbo run lint && turbo run test && turbo run typescript",
-    "prettier": "prettier \"packages/**/src/**/*\" --write",
+    "prettier": "prettier --config prettier.config.js --write \"packages/**/*.{ts,tsx,css,scss}\" \"e2e/**/*.ts\"",
     "postinstall": "husky install",
     "test": "cross-env TZ=UTC jest --config jest.config.json --verbose false --passWithNoTests",
     "test-watch": "cross-env TZ=UTC jest --watch --config jest.config.json",
@@ -56,10 +56,10 @@
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
+    "lint-staged": "^15.2.0",
     "openmrs": "workspace:*",
     "postcss": "^8.4.6",
-    "prettier": "^2.0.5",
-    "pretty-quick": "^3.0.0",
+    "prettier": "^3.1.0",
     "swc-loader": "^0.2.3",
     "systemjs-webpack-interop": "^2.3.7",
     "timezone-mock": "^1.2.2",
@@ -71,6 +71,9 @@
     "typescript": "~4.6.4",
     "webpack": "^5.88.0"
   },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx}": "eslint --cache --fix"
+  },
   "resolutions": {
     "minipass": "3.3.5"
   },

packages/apps/esm-devtools-app/jest.config.js

@@ -1,19 +1,19 @@
 module.exports = {
   transform: {
-    "\\.tsx?$": ["@swc/jest"],
+    '\\.tsx?$': ['@swc/jest'],
   },
-  setupFiles: ["<rootDir>/src/setup-tests.tsx"],
+  setupFiles: ['<rootDir>/src/setup-tests.tsx'],
   moduleNameMapper: {
-    "\\.(css)$": "identity-obj-proxy",
-    "@openmrs/esm-framework": "@openmrs/esm-framework/mock.tsx",
+    '\\.(css)$': 'identity-obj-proxy',
+    '@openmrs/esm-framework': '@openmrs/esm-framework/mock.tsx',
   },
   globals: {
     System: {
       Node: null,
     },
   },
-  testEnvironment: "jsdom",
+  testEnvironment: 'jsdom',
   testEnvironmentOptions: {
-    url: "http://localhost/",
+    url: 'http://localhost/',
   },
 };

packages/apps/esm-devtools-app/src/declarations.d.ts

@@ -1,17 +1,17 @@
-declare module "@carbon/react";
+declare module '@carbon/react';
 
 declare namespace JSX {
   interface IntrinsicElements {
-    "import-map-overrides-list": any;
+    'import-map-overrides-list': any;
   }
 }
 
-declare module "*.css" {
+declare module '*.css' {
   const styles: any;
   export default styles;
 }
 
-declare module "*.scss" {
+declare module '*.scss' {
   const styles: any;
   export default styles;
 }

packages/apps/esm-devtools-app/src/devtools/devtools-popup.component.tsx

@@ -1,14 +1,14 @@
-import React from "react";
-import ImportMap from "./import-map.component";
-import styles from "./devtools-popup.styles.css";
+import React from 'react';
+import ImportMap from './import-map.component';
+import styles from './devtools-popup.styles.css';
 
 export default function DevToolsPopup(props: DevToolsPopupProps) {
   return (
     <div className={styles.popup}>
       <ImportMap toggleOverridden={props.toggleOverridden} />
       <div className={styles.farRight}>
         <button onClick={props.close} className={styles.closeButton}>
-          {"\u24e7"}
+          {'\u24e7'}
         </button>
       </div>
     </div>

packages/apps/esm-devtools-app/src/devtools/devtools.component.test.tsx

@@ -1,6 +1,6 @@
-import React from "react";
-import Root from "./devtools.component";
-import { render } from "@testing-library/react";
+import React from 'react';
+import Root from './devtools.component';
+import { render } from '@testing-library/react';
 
 describe(`<Root />`, () => {
   it(`renders without dying`, () => {

packages/apps/esm-devtools-app/src/devtools/devtools.component.tsx

@@ -1,12 +1,11 @@
-import React, { useState } from "react";
-import classNames from "classnames";
-import { importMapOverridden } from "./import-map.component";
-import DevToolsPopup from "./devtools-popup.component";
-import styles from "./devtools.styles.css";
+import React, { useState } from 'react';
+import classNames from 'classnames';
+import { importMapOverridden } from './import-map.component';
+import DevToolsPopup from './devtools-popup.component';
+import styles from './devtools.styles.css';
 
 export default function Root(props) {
-  return window.spaEnv === "development" ||
-    Boolean(localStorage.getItem("openmrs:devtools")) ? (
+  return window.spaEnv === 'development' || Boolean(localStorage.getItem('openmrs:devtools')) ? (
     <DevTools {...props} />
   ) : null;
 }
@@ -24,12 +23,7 @@ function DevTools() {
           [styles.overridden]: isOverridden,
         })}
       />
-      {devToolsOpen && (
-        <DevToolsPopup
-          close={toggleDevTools}
-          toggleOverridden={toggleOverridden}
-        />
-      )}
+      {devToolsOpen && <DevToolsPopup close={toggleDevTools} toggleOverridden={toggleOverridden} />}
     </>
   );
 

packages/apps/esm-devtools-app/src/devtools/import-map.component.tsx

@@ -1,19 +1,12 @@
-import React, { useRef, useEffect } from "react";
-import styles from "./import-map.styles.css";
+import React, { useRef, useEffect } from 'react';
+import styles from './import-map.styles.css';
 
 export default function ImportMap(props: ImportMapProps) {
   const importMapListRef = useRef<HTMLElement>(null);
 
   useEffect(() => {
-    window.addEventListener(
-      "import-map-overrides:change",
-      handleImportMapChange
-    );
-    return () =>
-      window.removeEventListener(
-        "import-map-overrides:change",
-        handleImportMapChange
-      );
+    window.addEventListener('import-map-overrides:change', handleImportMapChange);
+    return () => window.removeEventListener('import-map-overrides:change', handleImportMapChange);
 
     function handleImportMapChange(evt) {
       props.toggleOverridden(importMapOverridden());
@@ -22,23 +15,17 @@ export default function ImportMap(props: ImportMapProps) {
 
   return (
     <div className={styles.importMap}>
-      <import-map-overrides-list
-        ref={importMapListRef}
-      ></import-map-overrides-list>
+      <import-map-overrides-list ref={importMapListRef}></import-map-overrides-list>
     </div>
   );
 }
 
 export function importMapOverridden(): boolean {
-  return (
-    Object.keys(window.importMapOverrides.getOverrideMap().imports).length > 0
-  );
+  return Object.keys(window.importMapOverrides.getOverrideMap().imports).length > 0;
 }
 
 export function isOverriddenInImportMap(esmName: string): boolean {
-  return window.importMapOverrides
-    .getOverrideMap()
-    .imports.hasOwnProperty(esmName);
+  return window.importMapOverrides.getOverrideMap().imports.hasOwnProperty(esmName);
 }
 
 type ImportMapProps = {

packages/apps/esm-devtools-app/src/index.ts

@@ -1,13 +1,10 @@
-import { getAsyncLifecycle } from "@openmrs/esm-framework";
+import { getAsyncLifecycle } from '@openmrs/esm-framework';
 
 export const importTranslation = () => Promise.resolve();
 
 const options = {
-  featureName: "devtools",
-  moduleName: "@openmrs/esm-devtools-app",
+  featureName: 'devtools',
+  moduleName: '@openmrs/esm-devtools-app',
 };
 
-export const devtools = getAsyncLifecycle(
-  () => import("./devtools/devtools.component"),
-  options
-);
+export const devtools = getAsyncLifecycle(() => import('./devtools/devtools.component'), options);

packages/apps/esm-devtools-app/webpack.config.js

@@ -1 +1 @@
-module.exports = require("openmrs/default-webpack-config");
+module.exports = require('openmrs/default-webpack-config');

packages/apps/esm-implementer-tools-app/__mocks__/react-i18next.js

@@ -1,41 +1,36 @@
-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 = {
@@ -50,5 +45,5 @@ module.exports = {
   setDefaults: reactI18next.setDefaults,
   getDefaults: reactI18next.getDefaults,
   setI18n: reactI18next.setI18n,
-  getI18n: reactI18next.getI18n
+  getI18n: reactI18next.getI18n,
 };

packages/apps/esm-implementer-tools-app/jest.config.js

@@ -1,18 +1,18 @@
 module.exports = {
   transform: {
-    "^.+\\.tsx?$": ["@swc/jest"],
+    '^.+\\.tsx?$': ['@swc/jest'],
   },
   globals: {
     System: {},
   },
   moduleNameMapper: {
-    "lodash-es": "lodash",
-    "\\.(s?css)$": "identity-obj-proxy",
-    "@openmrs/esm-framework": "@openmrs/esm-framework/mock.tsx",
-    dexie: require.resolve("dexie"),
+    'lodash-es': 'lodash',
+    '\\.(s?css)$': 'identity-obj-proxy',
+    '@openmrs/esm-framework': '@openmrs/esm-framework/mock.tsx',
+    dexie: require.resolve('dexie'),
   },
-  testEnvironment: "jsdom",
+  testEnvironment: 'jsdom',
   testEnvironmentOptions: {
-    url: "http://localhost/",
+    url: 'http://localhost/',
   },
 };