(chore) Separate linting and formatting concerns (#104)

.eslintrc

@@ -1,29 +1,62 @@
 {
- "extends": [],
+ "env": {
+ "node": true
+ },
+ "extends": [
+ "eslint:recommended",
+ "plugin:@typescript-eslint/recommended",
+ "plugin:@typescript-eslint/recommended-requiring-type-checking"
+ ],
  "parser": "@typescript-eslint/parser",
- "plugins": ["unused-imports"],
- "ignorePatterns": ["**/*.test.tsx"],
+ "parserOptions": {
+ "project": true,
+ "tsconfigRootDir": "__dirname"
+ },
+ "plugins": ["@typescript-eslint", "unused-imports"],
+ "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/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"
+ }
+ ],
+ "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'`"
  }
  ]

.husky/pre-commit

@@ -3,4 +3,4 @@
 
 set -e # die on error
 
-yarn pretty-quick --staged
+npx lint-staged

package.json

@@ -11,7 +11,6 @@
  "serve": "webpack serve --mode=development",
  "build": "webpack --mode production",
  "analyze": "webpack --mode=production --env.analyze=true",
- "prettier": "prettier --write \"src/**/*.{ts,tsx}\" --list-different --ignore-unknown",
  "lint": "eslint src --ext js,jsx,ts,tsx",
  "test": "jest --config jest.config.js",
  "typescript": "tsc",
@@ -67,20 +66,20 @@
  "@types/react-router": "^5.1.14",
  "@types/react-router-dom": "^5.1.7",
  "@types/webpack-env": "^1.16.0",
+ "@typescript-eslint/eslint-plugin": "^7.5.0",
  "@typescript-eslint/parser": "^7.5.0",
  "concurrently": "^6.2.0",
  "dayjs": "1.x",
- "eslint": "^7.27.0",
- "eslint-config-prettier": "^8.3.0",
+ "eslint": "^8.57.0",
  "eslint-plugin-unused-imports": "^2.0.0",
  "husky": "^6.0.0",
  "identity-obj-proxy": "^3.0.0",
  "jest": "^28.1.2",
  "jest-cli": "^28.1.2",
  "jest-environment-jsdom": "^28.1.2",
+ "lint-staged": "^15.2.2",
  "openmrs": "next",
- "prettier": "^2.3.0",
- "pretty-quick": "^3.1.0",
+ "prettier": "^3.2.5",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-i18next": "^11.7.0",
@@ -90,5 +89,11 @@
  "typescript": "^4.3.2",
  "webpack": "^5.88.0"
  },
+ "lint-staged": {
+ "*.{js,jsx,ts,tsx}": [
+ "eslint --cache --fix",
+ "prettier --cache --write --ignore-unknown --list-different"
+ ]
+ },
  "packageManager": "[email protected]"
 }

src/components/action-buttons.component.tsx

@@ -3,14 +3,14 @@ import { Button } from '@carbon/react';
 import { useConfig, useSession } from '@openmrs/esm-framework';
 import styles from './action-buttons.scss';
 import { useTranslation } from 'react-i18next';
-import { MedicationDispenseStatus, MedicationRequestBundle, MedicationRequestStatus } from '../types';
-import { PharmacyConfig } from '../config-schema';
+import { MedicationDispenseStatus, type MedicationRequestBundle, MedicationRequestStatus } from '../types';
 import { launchOverlay } from '../hooks/useOverlay';
 import {
  computeMedicationRequestStatus,
  computeQuantityRemaining,
  getMostRecentMedicationDispenseStatus,
 } from '../utils';
+import { type PharmacyConfig } from '../config-schema';
 import DispenseForm from '../forms/dispense-form.component';
 import { initiateMedicationDispenseBody } from '../medication-dispense/medication-dispense.resource';
 import PauseDispenseForm from '../forms/pause-dispense-form.component';
@@ -24,7 +24,7 @@ interface ActionButtonsProps {
 
 const ActionButtons: React.FC<ActionButtonsProps> = ({ medicationRequestBundle, patientUuid, encounterUuid }) => {
  const { t } = useTranslation();
- const config = useConfig() as PharmacyConfig;
+ const config = useConfig<PharmacyConfig>();
  const session = useSession();
  const mostRecentMedicationDispenseStatus: MedicationDispenseStatus = getMostRecentMedicationDispenseStatus(
  medicationRequestBundle.dispenses,

src/components/medication-card.component.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Tile } from '@carbon/react';
 import { Edit } from '@carbon/react/icons';
-import { MedicationReferenceOrCodeableConcept } from '../types';
+import { type MedicationReferenceOrCodeableConcept } from '../types';
 import styles from './medication-card.scss';
 import { getMedicationDisplay } from '../utils';
 

src/components/medication-event.component.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DosageInstruction, MedicationDispense, MedicationRequest, Quantity } from '../types';
+import { type DosageInstruction, type MedicationDispense, type MedicationRequest, type Quantity } from '../types';
 import styles from './medication-event.scss';
 import {
  getDosageInstruction,

src/components/patient-details.component.tsx

@@ -1,13 +1,12 @@
 import React, { useEffect } from 'react';
-import { attach, detach, ExtensionSlot, PatientUuid, useConfig, usePatient } from '@openmrs/esm-framework';
-import styles from './patient-details.scss';
 import { useTranslation } from 'react-i18next';
+import { attach, detach, ExtensionSlot, type PatientUuid, usePatient } from '@openmrs/esm-framework';
+import styles from './patient-details.scss';
 
 const PatientDetails: React.FC<{
  patientUuid: PatientUuid;
 }> = ({ patientUuid }) => {
  const { t } = useTranslation();
- const config = useConfig();
  const { patient } = usePatient(patientUuid);
 
  const patientName = patient;

src/config-schema.ts

@@ -123,7 +123,7 @@ export const configSchema = {
  },
 };
 
-export type PharmacyConfig = {
+export interface PharmacyConfig {
  appName: string;
  actionButtons: {
  pauseButton: {
@@ -162,4 +162,4 @@ export type PharmacyConfig = {
  uuid: string;
  };
  };
-};
+}

src/dashboard/dispensing-dashboard.component.tsx

@@ -3,12 +3,12 @@ import { InlineNotification } from '@carbon/react';
 import Overlay from '../forms/overlay/overlay.component';
 import { PharmacyHeader } from '../pharmacy-header/pharmacy-header.component';
 import PrescriptionTabLists from '../prescriptions/prescription-tab-lists.component';
-import { PharmacyConfig } from '../config-schema';
 import { useConfig } from '@openmrs/esm-framework';
 import { useTranslation } from 'react-i18next';
+import { type PharmacyConfig } from '../config-schema';
 
 export default function DispensingDashboard() {
- const config = useConfig() as PharmacyConfig;
+ const config = useConfig<PharmacyConfig>();
  const { t } = useTranslation();
  if (config.dispenseBehavior.restrictTotalQuantityDispensed && config.dispenseBehavior.allowModifyingPrescription) {
  return (

src/dispensing-tiles/dispensing-tiles.resource.tsx

@@ -1,6 +1,6 @@
 import useSWR from 'swr';
 import useSWRImmutable from 'swr/immutable';
-import { FetchResponse, openmrsFetch } from '@openmrs/esm-framework';
+import { type FetchResponse, openmrsFetch } from '@openmrs/esm-framework';
 
 // NOT CURRENTLY USED
 

src/forms/close-dispense-form.component.tsx

@@ -12,9 +12,9 @@ import { Button, ComboBox, InlineLoading } from '@carbon/react';
 import { saveMedicationDispense, useReasonForCloseValueSet } from '../medication-dispense/medication-dispense.resource';
 import { closeOverlay } from '../hooks/useOverlay';
 import styles from './forms.scss';
-import { PharmacyConfig } from '../config-schema';
 import { updateMedicationRequestFulfillerStatus } from '../medication-request/medication-request.resource';
-import { MedicationDispense, MedicationDispenseStatus, MedicationRequestFulfillerStatus } from '../types';
+import { type MedicationDispense, MedicationDispenseStatus, MedicationRequestFulfillerStatus } from '../types';
+import { type PharmacyConfig } from '../config-schema';
 import { getUuidFromReference, revalidate } from '../utils';
 
 interface CloseDispenseFormProps {
@@ -31,7 +31,7 @@ const CloseDispenseForm: React.FC<CloseDispenseFormProps> = ({
  encounterUuid,
 }) => {
  const { t } = useTranslation();
- const config = useConfig() as PharmacyConfig;
+ const config = useConfig<PharmacyConfig>();
  const isTablet = useLayoutType() === 'tablet';
  const { patient, isLoading } = usePatient(patientUuid);
 

src/forms/dispense-form.component.tsx

@@ -11,8 +11,7 @@ import {
 import { Button, FormLabel, InlineLoading } from '@carbon/react';
 import styles from './forms.scss';
 import { closeOverlay } from '../hooks/useOverlay';
-import { MedicationDispense, MedicationDispenseStatus, MedicationRequestBundle } from '../types';
-import { PharmacyConfig } from '../config-schema';
+import { type MedicationDispense, MedicationDispenseStatus, type MedicationRequestBundle } from '../types';
 import { saveMedicationDispense } from '../medication-dispense/medication-dispense.resource';
 import MedicationDispenseReview from './medication-dispense-review.component';
 import {
@@ -22,6 +21,7 @@ import {
  revalidate,
 } from '../utils';
 import { updateMedicationRequestFulfillerStatus } from '../medication-request/medication-request.resource';
+import { type PharmacyConfig } from '../config-schema';
 
 interface DispenseFormProps {
  medicationDispense: MedicationDispense;
@@ -43,7 +43,7 @@ const DispenseForm: React.FC<DispenseFormProps> = ({
  const { t } = useTranslation();
  const isTablet = useLayoutType() === 'tablet';
  const { patient, isLoading } = usePatient(patientUuid);
- const config = useConfig() as PharmacyConfig;
+ const config = useConfig<PharmacyConfig>();
 
  // Keep track of medication dispense payload
  const [medicationDispensePayload, setMedicationDispensePayload] = useState<MedicationDispense>();

src/forms/medication-dispense-review.component.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Medication, MedicationDispense } from '../types';
+import { type Medication, type MedicationDispense } from '../types';
 import MedicationCard from '../components/medication-card.component';
 import { TextArea, ComboBox, Dropdown, NumberInput } from '@carbon/react';
 import { useLayoutType, useConfig, useSession, userHasAccess } from '@openmrs/esm-framework';
@@ -8,13 +8,13 @@ import { getConceptCodingUuid, getMedicationReferenceOrCodeableConcept, getOpenM
 import styles from '../components/medication-dispense-review.scss';
 import { useMedicationCodeableConcept, useMedicationFormulations } from '../medication/medication.resource';
 import { useMedicationRequest } from '../medication-request/medication-request.resource';
-import { PharmacyConfig } from '../config-schema';
 import {
  useOrderConfig,
  useSubstitutionReasonValueSet,
  useSubstitutionTypeValueSet,
 } from '../medication-dispense/medication-dispense.resource';
 import { PRIVILEGE_CREATE_DISPENSE_MODIFY_DETAILS } from '../constants';
+import { type PharmacyConfig } from '../config-schema';
 
 interface MedicationDispenseReviewProps {
  medicationDispense: MedicationDispense;
@@ -28,7 +28,7 @@ const MedicationDispenseReview: React.FC<MedicationDispenseReviewProps> = ({
  quantityRemaining,
 }) => {
  const { t } = useTranslation();
- const config = useConfig() as PharmacyConfig;
+ const config = useConfig<PharmacyConfig>();
  const session = useSession();
  const [isEditingFormulation, setIsEditingFormulation] = useState(false);
  const [isSubstitution, setIsSubstitution] = useState(false);
@@ -141,8 +141,8 @@ const MedicationDispenseReview: React.FC<MedicationDispenseReviewProps> = ({
  existingMedicationCodeableConceptUuid
  ? existingMedicationCodeableConceptUuid
  : medicationCodeableConceptUuid
- ? medicationCodeableConceptUuid
- : null,
+  ? medicationCodeableConceptUuid
+  : null,
  );
 
  // get the medication request associated with this dispense event

src/forms/pause-dispense-form.component.tsx

@@ -12,10 +12,10 @@ import { Button, ComboBox, InlineLoading } from '@carbon/react';
 import { saveMedicationDispense, useReasonForPauseValueSet } from '../medication-dispense/medication-dispense.resource';
 import { closeOverlay } from '../hooks/useOverlay';
 import styles from './forms.scss';
-import { PharmacyConfig } from '../config-schema';
 import { updateMedicationRequestFulfillerStatus } from '../medication-request/medication-request.resource';
 import { getUuidFromReference, revalidate } from '../utils';
-import { MedicationDispense, MedicationDispenseStatus, MedicationRequestFulfillerStatus } from '../types';
+import { type MedicationDispense, MedicationDispenseStatus, MedicationRequestFulfillerStatus } from '../types';
+import { type PharmacyConfig } from '../config-schema';
 
 interface PauseDispenseFormProps {
  medicationDispense: MedicationDispense;
@@ -31,7 +31,7 @@ const PauseDispenseForm: React.FC<PauseDispenseFormProps> = ({
  encounterUuid,
 }) => {
  const { t } = useTranslation();
- const config = useConfig() as PharmacyConfig;
+ const config = useConfig<PharmacyConfig>();
  const isTablet = useLayoutType() === 'tablet';
  const { patient, isLoading } = usePatient(patientUuid);
 

src/history/history-and-comments.component.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { DataTableSkeleton, OverflowMenu, OverflowMenuItem, Tag, Tile } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
-import { formatDatetime, parseDate, Session, useConfig, userHasAccess, useSession } from '@openmrs/esm-framework';
+import { formatDatetime, parseDate, type Session, useConfig, userHasAccess, useSession } from '@openmrs/esm-framework';
 import styles from './history-and-comments.scss';
 import {
  updateMedicationRequestFulfillerStatus,
@@ -10,9 +10,8 @@ import {
 import { deleteMedicationDispense } from '../medication-dispense/medication-dispense.resource';
 import MedicationEvent from '../components/medication-event.component';
 import { launchOverlay } from '../hooks/useOverlay';
-import { PharmacyConfig } from '../config-schema';
 import DispenseForm from '../forms/dispense-form.component';
-import { MedicationDispense, MedicationDispenseStatus, MedicationRequestBundle } from '../types';
+import { type MedicationDispense, MedicationDispenseStatus, type MedicationRequestBundle } from '../types';
 import {
  PRIVILEGE_DELETE_DISPENSE,
  PRIVILEGE_DELETE_DISPENSE_THIS_PROVIDER_ONLY,
@@ -30,14 +29,15 @@ import {
 } from '../utils';
 import PauseDispenseForm from '../forms/pause-dispense-form.component';
 import CloseDispenseForm from '../forms/close-dispense-form.component';
+import { type PharmacyConfig } from '../config-schema';
 
 const HistoryAndComments: React.FC<{
  encounterUuid: string;
  patientUuid: string;
 }> = ({ encounterUuid, patientUuid }) => {
  const { t } = useTranslation();
  const session = useSession();
- const config = useConfig() as PharmacyConfig;
+ const config = useConfig<PharmacyConfig>();
  const { medicationRequestBundles, prescriptionDate, isError, isLoading } = usePrescriptionDetails(
  encounterUuid,
  config.refreshInterval,

src/location/location.resource.tsx

@@ -1,7 +1,7 @@
 import useSWR from 'swr';
 import { fhirBaseUrl, openmrsFetch } from '@openmrs/esm-framework';
-import { LocationResponse, SimpleLocation } from '../types';
-import { PharmacyConfig } from '../config-schema';
+import { type LocationResponse, type SimpleLocation } from '../types';
+import { type PharmacyConfig } from '../config-schema';
 
 export function useLocationForFiltering(config: PharmacyConfig) {
  const { data, error } = useSWR<{ data: LocationResponse }, Error>(

src/medication-dispense/medication-dispense.resource.tsx

@@ -1,7 +1,13 @@
-import { fhirBaseUrl, openmrsFetch, Session } from '@openmrs/esm-framework';
+import { fhirBaseUrl, openmrsFetch, type Session } from '@openmrs/esm-framework';
 import dayjs from 'dayjs';
 import useSWR from 'swr';
-import { MedicationDispense, MedicationDispenseStatus, MedicationRequest, OrderConfig, ValueSet } from '../types';
+import {
+ type MedicationDispense,
+ MedicationDispenseStatus,
+ type MedicationRequest,
+ type OrderConfig,
+ type ValueSet,
+} from '../types';
 
 export function saveMedicationDispense(
  medicationDispense: MedicationDispense,