(chore) Various tooling updates and tweaks

.eslintignore

@@ -1,5 +1,2 @@
-src/**/*.test.tsx
-src/**/*.spec.tsx
 **/*.d.ts
 **/node_modules/**/*
-__mocks__/*

.eslintrc

@@ -1,32 +1,69 @@
 {
-  "extends": ["ts-react-important-stuff", "plugin:prettier/recommended"],
+  "env": {
+    "node": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
   "parser": "@typescript-eslint/parser",
-  "ignorePatterns": ["**/*.test.tsx"],
+  "parserOptions": {
+    "project": true,
+    "tsconfigRootDir": "__dirname"
+  },
+  "plugins": ["@typescript-eslint", "import", "react-hooks"],
+  "root": true,
   "rules": {
+    // The following rules need `noImplicitAny` to be set to `true` in our tsconfig. They are too restrictive for now, but should be reconsidered in future
+    "@typescript-eslint/ban-types": "off",
+    "@typescript-eslint/ban-ts-comment": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-floating-promises": "off",
+    "@typescript-eslint/no-unsafe-argument": "off",
+    "@typescript-eslint/no-unsafe-assignment": "off",
+    "@typescript-eslint/no-unsafe-call": "off",
+    "@typescript-eslint/no-unsafe-member-access": "off",
+    "@typescript-eslint/no-unsafe-return": "off",
+    "@typescript-eslint/no-unused-vars": "off",
+    "@typescript-eslint/unbound-method": "off",
+    "@typescript-eslint/consistent-type-definitions": "off",
+    "@typescript-eslint/consistent-type-exports": "error",
+    // Use `import type` instead of `import` for type imports
+    "@typescript-eslint/consistent-type-imports": [
+      "error",
+      {
+        "fixStyle": "inline-type-imports"
+      }
+    ],
+    "import/no-duplicates": "error",
+    "no-console": ["error", { "allow": ["warn", "error"] }],
     "no-restricted-imports": [
       "error",
       {
         "paths": [
+          // These two rules ensure that we're importing lodash and lodash-es correctly. Not doing so can bloat our bundle size significantly.
           {
             "name": "lodash",
-            "message": "Import specific methods from `lodash-es`. e.g. `import map from 'lodash-es/map'`"
+            "message": "Import specific methods from `lodash`. e.g. `import map from 'lodash/map'`"
           },
           {
             "name": "lodash-es",
-            "message": "Import specific methods from `lodash-es`. e.g. `import map from 'lodash-es/map'`"
-          }
-        ],
-        "patterns": [
+            "importNames": ["default"],
+            "message": "Import specific methods from `lodash-es`. e.g. `import { map } from 'lodash-es'`"
+          },
+          // These two rules ensure that we're importing Carbon components and icons from the correct packages (after v10). May be removed in the future.
           {
-            "group": ["carbon-components-react"],
+            "name": "carbon-components-react",
             "message": "Import from `@carbon/react` directly. e.g. `import { Toggle } from '@carbon/react'`"
           },
           {
-            "group": ["@carbon/icons-react"],
+            "name": "@carbon/icons-react",
             "message": "Import from `@carbon/react/icons`. e.g. `import { ChevronUp } from '@carbon/react/icons'`"
           }
         ]
       }
-    ]
+    ],
+    "react-hooks/exhaustive-deps": "warn",
+    "react-hooks/rules-of-hooks": "error"
   }
 }

.yarnrc.yml

@@ -8,4 +8,4 @@ plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-outdated.cjs
     spec: "https://mskelton.dev/yarn-outdated/v3"
 
-yarnPath: .yarn/releases/yarn-4.4.0.cjs
+yarnPath: .yarn/releases/yarn-4.5.3.cjs

README.md

@@ -1,6 +1,6 @@
-# OpenMRS 3.x Laboratory ESM
+# openmrs-esm-laboratory-app
 
-A frontend module for managing laboratory requests and queues built on O3.
+An O3 frontend module for managing laboratory requests and queues.
 
 For more information, please refer to the [OpenMRS 3.x Frontend Documentation](https://o3-docs.openmrs.org/).
 
@@ -45,4 +45,4 @@ yarn run test
 ```
 
 # ⚠️ Important Notice: Dependency
-As of this [PR](https://github.com/openmrs/openmrs-esm-laboratory-app/pull/87) some features of the `@openmrs/esm-laboratory-app` are dependent on `@openmrs/esm-patient-lab-order` package. Please keep that in mind as you are implementing the module.
+As of this [PR](https://github.com/openmrs/openmrs-esm-laboratory-app/pull/87) some features of the `@openmrs/esm-laboratory-app` are dependent on `@openmrs/esm-patient-lab-order` package. Please keep that in mind as you are implementing the module.

i18next-parser.config.js

@@ -26,10 +26,8 @@ module.exports = {
   lexers: {
     hbs: ['HandlebarsLexer'],
     handlebars: ['HandlebarsLexer'],
-
     htm: ['HTMLLexer'],
     html: ['HTMLLexer'],
-
     mjs: ['JavascriptLexer'],
     js: ['JavascriptLexer'], // if you're writing jsx inside .js files, change this to JsxLexer
     ts: ['JavascriptLexer'],

jest.config.js

@@ -1,16 +1,18 @@
 module.exports = {
+  clearMocks: true,
   transform: {
-    "^.+\\.tsx?$": ["@swc/jest"],
+    '^.+\\.tsx?$': ['@swc/jest'],
   },
-  transformIgnorePatterns: ["/node_modules/(?!@openmrs)"],
+  transformIgnorePatterns: ['/node_modules/(?!@openmrs)'],
   moduleNameMapper: {
-    "@openmrs/esm-framework": "@openmrs/esm-framework/mock",
-    "\\.(s?css)$": "identity-obj-proxy",
-    "^lodash-es/(.*)$": "lodash/$1",
+    '@openmrs/esm-framework': '@openmrs/esm-framework/mock',
+    '\\.(s?css)$': 'identity-obj-proxy',
+    '^lodash-es/(.*)$': 'lodash/$1',
+    '^lodash-es$': 'lodash',
   },
-  setupFilesAfterEnv: ["<rootDir>/src/setup-tests.ts"],
-  testEnvironment: "jsdom",
+  setupFilesAfterEnv: ['<rootDir>/src/setup-tests.ts'],
+  testEnvironment: 'jsdom',
   testEnvironmentOptions: {
-    url: "http://localhost/",
+    url: 'http://localhost/',
   },
 };

package.json

@@ -2,7 +2,7 @@
   "name": "@openmrs/esm-laboratory-app",
   "version": "1.0.0",
   "license": "MPL-2.0",
-  "description": "Laboratory microfrontend for OpenMRS 3.x",
+  "description": "An O3 frontend module for managing laboratory requests and queues",
   "browser": "dist/openmrs-esm-laboratory-app.js",
   "main": "src/index.ts",
   "source": true,
@@ -40,7 +40,8 @@
     "url": "https://github.com/openmrs/openmrs-esm-laboratory/issues"
   },
   "lint-staged": {
-    "*.{js,jsx,ts,tsx}": "eslint --cache --fix"
+    "*.{ts,tsx}": "eslint --cache --fix --max-warnings 0",
+    "*.{css,scss,ts,tsx}": "prettier --write --list-different"
   },
   "dependencies": {
     "@carbon/react": "^1.14.0",
@@ -70,14 +71,14 @@
     "@types/react-router": "^5.1.20",
     "@types/react-router-dom": "^5.3.3",
     "@types/webpack-env": "^1.18.1",
-    "@typescript-eslint/parser": "^5.59.9",
+    "@typescript-eslint/eslint-plugin": "^8.17.0",
+    "@typescript-eslint/parser": "^8.17.0",
     "concurrently": "^7.6.0",
     "css-loader": "^6.8.1",
     "dayjs": "^1.11.11",
-    "eslint": "^8.42.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-config-ts-react-important-stuff": "^3.0.0",
-    "eslint-plugin-prettier": "^4.2.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
     "file-saver": "^2.0.5",
     "husky": "^8.0.0",
     "i18next-parser": "^6.6.0",
@@ -95,13 +96,13 @@
     "react-i18next": "^11.18.6",
     "react-router-dom": "^6.11.2",
     "swc-loader": "^0.2.3",
-    "turbo": "^2.2.3",
+    "turbo": "^2.3.3",
     "typescript": "^4.9.5",
     "webpack": "^5.88.1",
     "webpack-cli": "^5.1.3"
   },
   "resolutions": {
     "@carbon/react": "1.14.0"
   },
-  "packageManager": "yarn@4.4.0"
+  "packageManager": "yarn@4.5.3"
 }

src/components/loader/loader.scss

@@ -1,9 +1,9 @@
-@use '@carbon/styles/scss/spacing';
-@import '@openmrs/esm-styleguide/src/vars';
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .loading {
   display: flex;
   background-color: $openmrs-background-grey;
   justify-content: center;
-  min-height: spacing.$spacing-09;
+  min-height: layout.$spacing-09;
 }

src/components/orders-table/list-order-details.component.tsx

@@ -1,24 +1,22 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import {
-  Tag,
-  StructuredListWrapper,
-  StructuredListRow,
-  StructuredListCell,
-  StructuredListBody,
-  Button,
   Accordion,
   AccordionItem,
+  StructuredListBody,
+  StructuredListCell,
+  StructuredListRow,
+  StructuredListWrapper,
+  Tag,
 } from '@carbon/react';
 import capitalize from 'lodash-es/capitalize';
-import { ListOrdersDetailsProps } from '../../types';
+import { ExtensionSlot } from '@openmrs/esm-framework';
+import { type ListOrdersDetailsProps } from '../../types';
 import styles from './list-order-details.scss';
-import { ExtensionSlot, useLayoutType } from '@openmrs/esm-framework';
-import { Edit } from '@carbon/react/icons';
+
 const ListOrderDetails: React.FC<ListOrdersDetailsProps> = (props) => {
   const { t } = useTranslation();
   const orders = props.groupedOrders?.orders;
-  const isTablet = useLayoutType() === 'tablet';
 
   return (
     <div>

src/components/orders-table/list-order-details.scss

@@ -1,7 +1,8 @@
-@use '@carbon/layout';
 @use '@carbon/colors';
-@use '@openmrs/esm-styleguide/src/vars' as *;
+@use '@carbon/layout';
 @use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
 .buttonSection {
   display: flex;
   justify-content: space-between;
@@ -12,9 +13,11 @@
 }
 
 .nameOrder {
+  // TODO: Prefer type styles over scales as mentioned here: https://carbondesignsystem.com/elements/typography/code/#type-scale
   font-size: type.type-scale(2);
   margin-left: layout.$spacing-04;
 }
+
 .testOrder {
   font-size: type.type-scale(2);
   font-weight: bold;
@@ -66,9 +69,11 @@
   padding: 0;
   margin-bottom: layout.$spacing-03;
 }
+
 .orderNumber {
   font-size: type.type-scale(2);
 }
+
 .orderStatus {
   font-size: type.type-scale(2);
 }
@@ -82,9 +87,11 @@
   text-align: justify;
   font-size: type.type-scale(1);
 }
+
 .urgencyStatus {
   font-size: type.type-scale(2);
 }
+
 .instructionLabel {
   font-weight: bold;
   font-size: type.type-scale(2);
@@ -94,6 +101,7 @@
   text-align: center;
   margin-bottom: layout.$spacing-03;
 }
+
 .accordionTitle {
   font-weight: bold;
 }

src/components/orders-table/order-detail.scss

@@ -0,0 +1,18 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.bodyLong01 {
+  @include type.type-style('body-01');
+}
+
+.label01 {
+  @include type.type-style('label-01');
+}
+
+.displayValue {
+  color: $text-02;
+  font-weight: bold;
+  width: layout.$spacing-05;
+  height: layout.$spacing-05;
+}

src/components/orders-table/orders-data-table.component.tsx

@@ -1,3 +1,4 @@
+import React, { useMemo, useState } from 'react';
 import {
   DataTable,
   DataTableSkeleton,
@@ -19,15 +20,14 @@ import {
   TableToolbarSearch,
   Tile,
 } from '@carbon/react';
-import { formatDate, parseDate, usePagination } from '@openmrs/esm-framework';
-import { Order } from '@openmrs/esm-patient-common-lib';
-import React, { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { formatDate, parseDate, usePagination } from '@openmrs/esm-framework';
+import { type Order } from '@openmrs/esm-patient-common-lib';
 import { useLabOrders, useSearchGroupedResults } from '../../laboratory-resource';
-import { FulfillerStatus, OrdersDataTableProps } from '../../types';
+import type { FulfillerStatus, OrdersDataTableProps } from '../../types';
+import { OrdersDateRangePicker } from './orders-date-range-picker';
 import ListOrderDetails from './list-order-details.component';
 import styles from './orders-data-table.scss';
-import { OrdersDateRangePicker } from './orders-date-range-picker';
 
 const OrdersDataTable: React.FC<OrdersDataTableProps> = (props) => {
   const { t } = useTranslation();

src/components/orders-table/orders-data-table.resource.ts

@@ -1,4 +1,4 @@
-import { Order } from '@openmrs/esm-patient-common-lib';
+import { type Order } from '@openmrs/esm-patient-common-lib';
 import { useMemo } from 'react';
 
 interface CustomOrder extends Omit<Order, 'orderer' | 'patient'> {