(chore) Extend ESLint configuration

.eslintignore

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

.eslintrc

@@ -1,34 +1,54 @@
 {
+  "env": {
+    "node": true
+  },
+  "extends": ["eslint:recommended", "plugin:prettier/recommended", "plugin:@typescript-eslint/recommended"],
   "parser": "@typescript-eslint/parser",
-  "plugins": ["@typescript-eslint"],
-  "extends": ["ts-react-important-stuff", "plugin:prettier/recommended"],
+  "plugins": ["@typescript-eslint", "react-hooks"],
   "rules": {
-    "curly": ["error", "all"],
+    // Disabling these rules for now just to keep the diff small. I'll enable them one by one as we go.
+    "@typescript-eslint/ban-ts-comment": "off",
+    "@typescript-eslint/ban-types": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-unused-vars": "off",
+    "@typescript-eslint/no-var-requires": "off",
+    "@typescript-eslint/triple-slash-reference": "off",
+    // Use `import type` instead of `import` for type imports https://typescript-eslint.io/blog/consistent-type-imports-and-exports-why-and-how
+    "@typescript-eslint/consistent-type-imports": [
+      "error",
+      {
+        "fixStyle": "inline-type-imports"
+      }
+    ],
+    "prefer-const": "off",
+    "no-console": ["error", { "allow": ["warn", "error"] }],
+    "no-unsafe-optional-chaining": "off",
+    "no-explicit-any": "off",
+    "no-extra-boolean-cast": "off",
+    "no-prototype-builtins": "off",
+    "no-useless-escape": "off",
     "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'`"
-          },
-          {
-            "group": ["@import '~carbon-components/src/globals/scss/vars'"],
-            "message": "Import from `@carbon/styles/scss`. e.g. `@use '@carbon/styles/scss/type'`"
           }
         ]
       }

.husky/pre-commit

@@ -3,5 +3,6 @@
 
 set -e  # die on error
 
-npx pretty-quick --staged
 yarn run extract-translations
+yarn prettier && npx lint-staged
+

jest.config.js

@@ -34,7 +34,7 @@ module.exports = {
       lines: 80,
     },
   },
-  setupFilesAfterEnv: [path.resolve(__dirname, 'tools', 'setupTests.ts')],
+  setupFilesAfterEnv: [path.resolve(__dirname, 'tools', 'setup-tests.ts')],
   testPathIgnorePatterns: [path.resolve(__dirname, 'e2e')],
   testEnvironment: 'jsdom',
   testEnvironmentOptions: {

package.json

@@ -41,28 +41,27 @@
     "@types/uuid": "^8.3.0",
     "@types/webpack-env": "^1.16.0",
     "@types/yup": "^0.29.11",
-    "@typescript-eslint/eslint-plugin": "^4.15.1",
-    "@typescript-eslint/parser": "^4.15.1",
+    "@typescript-eslint/eslint-plugin": "^6.13.2",
+    "@typescript-eslint/parser": "^6.13.2",
     "babel-preset-minify": "^0.5.1",
     "concurrently": "^5.3.0",
     "cross-env": "^7.0.3",
     "css-loader": "^6.8.1",
     "dayjs": "^1.8.36",
     "dotenv": "^16.0.3",
-    "eslint": "^7.20.0",
-    "eslint-config-prettier": "^8.2.0",
-    "eslint-config-ts-react-important-stuff": "^3.0.0",
-    "eslint-plugin-prettier": "^3.3.1",
-    "husky": "^8.0.1",
+    "eslint": "^8.55.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "husky": "^8.0.3",
     "i18next": "^21.10.0",
     "i18next-parser": "^6.6.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "openmrs": "next",
-    "prettier": "^2.4.1",
-    "pretty-quick": "^2.0.2",
+    "prettier": "^3.1.1",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-i18next": "^11.18.6",
@@ -76,5 +75,8 @@
     "webpack": "^5.74.0",
     "webpack-cli": "^4.10.0"
   },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx}": "eslint --cache --fix"
+  },
   "packageManager": "[email protected]"
 }

packages/esm-active-visits-app/src/active-visits-widget/active-visits.component.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState, useCallback, MouseEvent, AnchorHTMLAttributes } from 'react';
+import React, { useMemo, useState, useCallback, type MouseEvent, type AnchorHTMLAttributes } from 'react';
 import {
   DataTable,
   DataTableSkeleton,

packages/esm-active-visits-app/src/active-visits-widget/active-visits.resource.tsx

@@ -5,9 +5,9 @@ import isToday from 'dayjs/plugin/isToday';
 import last from 'lodash-es/last';
 import {
   openmrsFetch,
-  Visit,
+  type Visit,
   useSession,
-  FetchResponse,
+  type FetchResponse,
   formatDatetime,
   parseDate,
   useConfig,

packages/esm-active-visits-app/src/visits-summary/visit-detail.component.tsx

@@ -2,7 +2,7 @@ import React, { useMemo, useState } from 'react';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import { ContentSwitcher, DataTableSkeleton, Switch } from '@carbon/react';
-import { Encounter, useVisit } from './visit.resource';
+import { type Encounter, useVisit } from './visit.resource';
 import { formatTime, formatDatetime, parseDate } from '@openmrs/esm-framework';
 import EncounterList from './visits-components/encounter-list.component';
 import VisitSummary from './visits-components/visit-summary.component';

packages/esm-active-visits-app/src/visits-summary/visit.resource.ts

@@ -1,4 +1,4 @@
-import { openmrsFetch, Visit } from '@openmrs/esm-framework';
+import { openmrsFetch, type Visit } from '@openmrs/esm-framework';
 import useSWR from 'swr';
 
 export interface Encounter {

packages/esm-active-visits-app/src/visits-summary/visits-components/encounter-list.component.tsx

@@ -15,7 +15,7 @@ import {
   TableExpandedRow,
 } from '@carbon/react';
 import { useLayoutType, isDesktop } from '@openmrs/esm-framework';
-import { Observation } from '../visit.resource';
+import { type Observation } from '../visit.resource';
 import EncounterObservations from './encounter-observations.component';
 import styles from '../visit-detail-overview.scss';
 

packages/esm-active-visits-app/src/visits-summary/visits-components/encounter-observations.component.tsx

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import { SkeletonText } from '@carbon/react';
-import { Observation } from '../visit.resource';
+import { type Observation } from '../visit.resource';
 import styles from '../visit-detail-overview.scss';
 
 interface EncounterObservationsProps {

packages/esm-active-visits-app/src/visits-summary/visits-components/medications-summary.component.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import capitalize from 'lodash-es/capitalize';
 import { useTranslation } from 'react-i18next';
 import { formatTime, parseDate } from '@openmrs/esm-framework';
-import { OrderItem, getDosage } from '../visit.resource';
+import { type OrderItem, getDosage } from '../visit.resource';
 import styles from '../visit-detail-overview.scss';
 
 interface MedicationSummaryProps {

packages/esm-active-visits-app/src/visits-summary/visits-components/tests-summary.component.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import classNames from 'classnames';
 import { ExtensionSlot } from '@openmrs/esm-framework';
-import { Encounter } from '../visit.resource';
+import { type Encounter } from '../visit.resource';
 import styles from '../visit-detail-overview.scss';
 
 const TestsSummary = ({ patientUuid, encounters }: { patientUuid: string; encounters: Array<Encounter> }) => {

packages/esm-active-visits-app/src/visits-summary/visits-components/visit-summary.component.tsx

@@ -2,11 +2,11 @@ import React, { useState, useMemo } from 'react';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import { Tab, Tabs, TabList, TabPanel, TabPanels, Tag } from '@carbon/react';
-import { OpenmrsResource, formatTime, parseDate } from '@openmrs/esm-framework';
+import { type OpenmrsResource, formatTime, parseDate } from '@openmrs/esm-framework';
 import NotesSummary from './notes-summary.component';
 import MedicationSummary from './medications-summary.component';
 import TestsSummary from './tests-summary.component';
-import { Order, Encounter, Note, Observation, OrderItem } from '../visit.resource';
+import { type Order, type Encounter, type Note, type Observation, type OrderItem } from '../visit.resource';
 import styles from '../visit-detail-overview.scss';
 
 interface DiagnosisItem {

packages/esm-appointments-app/src/admin/appointment-services/appointment-services.component.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Button, ButtonSet, Dropdown, Layer, SelectItem, TextInput, TimePicker, TimePickerSelect } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
-import { Form, Formik, FormikHelpers } from 'formik';
+import { Form, Formik, type FormikHelpers } from 'formik';
 import { validationSchema } from './appointment-services-validation';
 import { useAppointmentServices } from './appointment-services-hook';
 import { showNotification, showToast, useLocations } from '@openmrs/esm-framework';

packages/esm-appointments-app/src/appointments-calendar/calendar-view.component.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import DailyCalendarView from './daily/daily-calendar-view.component';
 import MonthlyCalendarView from './monthly/monthly-calendar-view.component';
 import WeeklyCalendarView from './weekly/weekly-calendar-view.component';
-import { CalendarType } from '../types';
+import { type CalendarType } from '../types';
 
 const CalendarView: React.FC<{
   calendarView: CalendarType;

packages/esm-appointments-app/src/appointments-calendar/daily/daily-calendar-view.component.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import dayjs, { Dayjs } from 'dayjs';
+import dayjs, { type Dayjs } from 'dayjs';
 import isBetween from 'dayjs/plugin/isBetween';
 import styles from './daily-calendar.scss';
-import { CalendarType } from '../../types';
+import { type CalendarType } from '../../types';
 import { dailyHours } from '../../helpers';
 import DailyHeader from './daily-header.component';
 import DailyWorkloadView from './daily-view-workload.component';

packages/esm-appointments-app/src/appointments-calendar/daily/daily-header.component.tsx

@@ -1,9 +1,9 @@
 import { Button } from '@carbon/react';
-import dayjs, { Dayjs } from 'dayjs';
+import dayjs, { type Dayjs } from 'dayjs';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { type CalendarType } from '../../types';
 import styles from './daily-header.scss';
-import { CalendarType } from '../../types';
 
 const Format = {
   monthly: 'month',

packages/esm-appointments-app/src/appointments-calendar/daily/daily-view-workload.component.tsx

@@ -6,7 +6,7 @@ import { navigate, useLayoutType } from '@openmrs/esm-framework';
 import { useTranslation } from 'react-i18next';
 import { spaBasePath } from '../../constants';
 import { isSameMonth } from '../../helpers';
-import { CalendarType } from '../../types';
+import { type CalendarType } from '../../types';
 
 interface WeeklyCellProps {
   type: CalendarType;
@@ -30,8 +30,8 @@ const DailyWorkloadView: React.FC<WeeklyCellProps> = ({ type, dateTime, currentD
           type === 'daily'
             ? 'weekly-cell'
             : isSameMonth(dateTime, currentDate)
-            ? 'monthly-cell'
-            : 'monthly-cell-disabled'
+              ? 'monthly-cell'
+              : 'monthly-cell-disabled'
         ]
       }>
       {type === 'daily' ? (

packages/esm-appointments-app/src/appointments-calendar/daily/daily-view-workload.test.tsx

@@ -4,7 +4,7 @@ import userEvent from '@testing-library/user-event';
 import { render, screen } from '@testing-library/react';
 import { navigate } from '@openmrs/esm-framework';
 import { spaBasePath } from '../../constants';
-import { CalendarType } from '../../types';
+import { type CalendarType } from '../../types';
 import DailyWorkloadView from './daily-view-workload.component';
 
 jest.mock('@openmrs/esm-framework', () => ({

packages/esm-appointments-app/src/appointments-calendar/monthly/monthly-calendar-view.component.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import dayjs, { Dayjs } from 'dayjs';
+import dayjs, { type Dayjs } from 'dayjs';
 import isBetween from 'dayjs/plugin/isBetween';
-import { CalendarType } from '../../types';
+import { type CalendarType } from '../../types';
 import { monthDays } from '../../helpers/functions';
 import MonthlyViewWorkload from './monthly-view-workload.component';
 import MonthlyHeader from './monthly-header.module';

packages/esm-appointments-app/src/appointments-calendar/monthly/monthly-header.module.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import dayjs, { Dayjs } from 'dayjs';
+import { type Dayjs } from 'dayjs';
 import styles from './monthly-header.module.scss';
 import { Button } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
-import { CalendarType } from '../../types';
+import { type CalendarType } from '../../types';
 import DaysOfWeekCard from '../daily/days-of-week.component';
 
 const Format = {
@@ -38,9 +38,7 @@ function MonthlyHeader({
         </Button>
       </div>
       <div className={styles.workLoadCard}>
-        {daysInWeek?.map((day, i) => (
-          <DaysOfWeekCard key={`${day}-${i}`} dayOfWeek={day} />
-        ))}
+        {daysInWeek?.map((day, i) => <DaysOfWeekCard key={`${day}-${i}`} dayOfWeek={day} />)}
       </div>
     </>
   );

packages/esm-appointments-app/src/appointments-calendar/weekly/weekly-calendar-view.component.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import dayjs, { Dayjs } from 'dayjs';
+import dayjs, { type Dayjs } from 'dayjs';
 import isBetween from 'dayjs/plugin/isBetween';
 import styles from './weekly-calendar.scss';
-import { CalendarType } from '../../types';
+import { type CalendarType } from '../../types';
 import { isSameMonth, weekAllDays, weekDays } from '../../helpers';
 import WeeklyWorkloadView from './weekly-view-workload.component';
 import WeeklyHeader from './weekly-header.component';
@@ -51,8 +51,8 @@ const WeeklyCalendarView: React.FC<WeeklyCalendarViewProps> = ({
                       type === 'weekly'
                         ? 'weekly-cell'
                         : isSameMonth(dateTime, currentDate)
-                        ? 'monthly-cell'
-                        : 'monthly-cell-disabled'
+                          ? 'monthly-cell'
+                          : 'monthly-cell-disabled'
                     ]
                   }>
                   {type === 'weekly' ? (

packages/esm-appointments-app/src/appointments-calendar/weekly/weekly-header.component.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Button } from '@carbon/react';
-import { Dayjs } from 'dayjs';
+import { type Dayjs } from 'dayjs';
 import { useTranslation } from 'react-i18next';
 import { weekDays } from '../../helpers';
 import type { CalendarType } from '../../types';
@@ -37,10 +37,10 @@ function WeeklyHeader({
           {type === 'monthly'
             ? currentDate.format(monthFormat)
             : type === 'daily'
-            ? currentDate.format(dateFormat)
-            : `${currentDate.startOf('week').format(dateFormat)} - ${currentDate
-                .endOf('week')
-                .format(dateFormat)} , ${currentDate.format(yearFormat)}`}
+              ? currentDate.format(dateFormat)
+              : `${currentDate.startOf('week').format(dateFormat)} - ${currentDate
+                  .endOf('week')
+                  .format(dateFormat)} , ${currentDate.format(yearFormat)}`}
         </span>
         <Button size="sm" onClick={() => setCurrentDate(currentDate.add(1, Format[type]))} kind="tertiary">
           {t('next', 'Next')}

packages/esm-appointments-app/src/appointments-calendar/weekly/weekly-view-workload.component.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import classNames from 'classnames';
-import dayjs, { Dayjs } from 'dayjs';
+import dayjs, { type Dayjs } from 'dayjs';
 import { navigate, useLayoutType } from '@openmrs/esm-framework';
 import { useTranslation } from 'react-i18next';
 
 import { spaBasePath } from '../../constants';
 import { isSameMonth } from '../../helpers';
-import { CalendarType } from '../../types';
+import { type CalendarType } from '../../types';
 import styles from './weekly-workload-module.scss';
 
 interface WeeklyCellProps {
@@ -32,8 +32,8 @@ const WeeklyWorkloadView: React.FC<WeeklyCellProps> = ({ type, dateTime, current
           type === 'weekly'
             ? 'weekly-cell'
             : isSameMonth(dateTime, currentDate)
-            ? 'monthly-cell'
-            : 'monthly-cell-disabled'
+              ? 'monthly-cell'
+              : 'monthly-cell-disabled'
         ]
       }>
       {type === 'weekly' ? (