(feat) Various UI mods

.eslintignore

@@ -1,2 +1,2 @@
-src/**/*.test.tsx
-**/*.d.tsx
+**/dist/*
+**/node_modules/*

.eslintrc

@@ -17,6 +17,7 @@
   "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",

.prettierignore

@@ -8,7 +8,5 @@ node_modules/
 yarn.lock
 
 # by file type
-**/*.css
-**/*.scss
 **/*.md
 **/*.json

package.json

@@ -41,6 +41,7 @@
   },
   "dependencies": {
     "@carbon/react": "1.12.0",
+    "classnames": "^2.5.1",
     "lodash-es": "^4.17.21"
   },
   "peerDependencies": {

src/components/action-buttons.component.test.tsx

@@ -1,7 +1,7 @@
 import { render } from '@testing-library/react';
 import React from 'react';
 import ActionButtons from './action-buttons.component';
-import { MedicationRequest, MedicationRequestStatus } from '../types';
+import { type MedicationRequest, MedicationRequestStatus } from '../types';
 import { useConfig } from '@openmrs/esm-framework';
 
 const mockedUseConfig = useConfig as jest.Mock;

src/components/action-buttons.component.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import { Button } from '@carbon/react';
-import { useConfig, useSession } from '@openmrs/esm-framework';
-import styles from './action-buttons.scss';
 import { useTranslation } from 'react-i18next';
+import { useConfig, useSession } from '@openmrs/esm-framework';
 import { MedicationDispenseStatus, type MedicationRequestBundle, MedicationRequestStatus } from '../types';
 import { launchOverlay } from '../hooks/useOverlay';
 import {
@@ -11,10 +10,11 @@ import {
   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 DispenseForm from '../forms/dispense-form.component';
 import PauseDispenseForm from '../forms/pause-dispense-form.component';
 import CloseDispenseForm from '../forms/close-dispense-form.component';
+import styles from './action-buttons.scss';
 
 interface ActionButtonsProps {
   medicationRequestBundle: MedicationRequestBundle;

src/components/medication-card.component.test.tsx

@@ -1,6 +1,6 @@
-import { render } from '@testing-library/react';
 import React from 'react';
-import { MedicationReferenceOrCodeableConcept } from '../types';
+import { render } from '@testing-library/react';
+import { type MedicationReferenceOrCodeableConcept } from '../types';
 import MedicationCard from './medication-card.component';
 
 describe('Medication Card Component tests', () => {

src/components/medication-card.scss

@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import "~@openmrs/esm-styleguide/src/vars";
+@import '~@openmrs/esm-styleguide/src/vars';
 
 .medicationTile {
   display: flex;
@@ -18,4 +18,3 @@
 .medicationName {
   font-size: 15px !important;
 }
-

src/components/medication-dispense-review.scss

@@ -8,8 +8,8 @@
   padding-bottom: 10px;
 
   :global(.cds--css-grid) {
-    padding-left:0 !important;
-    padding-right:0 !important;
+    padding-left: 0 !important;
+    padding-right: 0 !important;
   }
 }
 
@@ -21,7 +21,7 @@
 }
 
 .substitutionReason {
-  width:100%;
+  width: 100%;
 }
 
 .substitutionType {
@@ -47,11 +47,11 @@
   padding: spacing.$spacing-05;
 }
 
-:global(.omrs-breakpoint-lt-desktop) .formGroup>span {
+:global(.omrs-breakpoint-lt-desktop) .formGroup > span {
   flex: 1;
 }
 
-:global(.omrs-breakpoint-lt-desktop) .formGroup>div {
+:global(.omrs-breakpoint-lt-desktop) .formGroup > div {
   flex: 3;
 }
 

src/components/medication-event.scss

@@ -1,7 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import "~@openmrs/esm-styleguide/src/vars";
-
+@import '~@openmrs/esm-styleguide/src/vars';
 
 .medicationName {
   font-size: 15px !important;
@@ -11,7 +10,9 @@
   font-size: 13px !important;
 }
 
-.dosage, .quantity, .refills {
+.dosage,
+.quantity,
+.refills {
   color: #525252;
   font-weight: bold;
 }

src/components/patient-details.scss

@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import "~@openmrs/esm-styleguide/src/vars";
+@import '~@openmrs/esm-styleguide/src/vars';
 
 .patientDetailsContainer > div {
   margin-bottom: 1rem;
@@ -85,7 +85,6 @@
   color: $interactive-01;
 }
 
-
 .buttonCol {
   display: flex;
   flex-direction: column;

src/config-schema.ts

@@ -123,9 +123,10 @@ export const configSchema = {
   },
   enableStockDispense: {
     _type: Type.Boolean,
-    _description: 'Enable or disable stock deduction during the dispensing process. Requires the stock management module to be installed and configured.',
+    _description:
+      'Enable or disable stock deduction during the dispensing process. Requires the stock management module to be installed and configured.',
     _default: false,
-},
+  },
 };
 
 export interface PharmacyConfig {

src/declarations.d.tsx → src/declarations.d.ts

@@ -2,4 +2,3 @@ declare module '*.css';
 declare module '*.scss';
 declare module '*.svg';
 declare module '@carbon/react';
-

src/dispensing-tiles/dispensing-tile.scss

@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import "~@openmrs/esm-styleguide/src/vars";
+@import '~@openmrs/esm-styleguide/src/vars';
 
 .tileContainer {
   border: 0.0625rem solid $ui-03;
@@ -18,17 +18,17 @@
 }
 
 .headerLabel {
-  @include type.type-style("heading-01");
+  @include type.type-style('heading-01');
   color: $text-02;
 }
 
 .totalsLabel {
-  @include type.type-style("label-01");
+  @include type.type-style('label-01');
   color: $text-02;
 }
 
 .totalsValue {
-  @include type.type-style("heading-04");
+  @include type.type-style('heading-04');
   color: $ui-05;
 }
 

src/dispensing-tiles/dispensing-tiles.scss

@@ -1,12 +1,12 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import "~@openmrs/esm-styleguide/src/vars";
+@import '~@openmrs/esm-styleguide/src/vars';
 
 .cardContainer {
-  background-color: $ui-02 ;
+  background-color: $ui-02;
   display: flex;
   justify-content: space-between;
   padding: 0 spacing.$spacing-05 spacing.$spacing-10 spacing.$spacing-03;
   flex-flow: row wrap;
-  margin-top: - spacing.$spacing-03;
+  margin-top: -spacing.$spacing-03;
 }

src/forms/dispense-form.component.tsx

@@ -1,34 +1,27 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import {
-  ExtensionSlot,
-  showNotification,
-  showToast,
-  useConfig,
-  useLayoutType,
-  usePatient,
-} from '@openmrs/esm-framework';
 import { Button, FormLabel, InlineLoading } from '@carbon/react';
-import styles from './forms.scss';
+import { ExtensionSlot, showNotification, showToast, useConfig, usePatient } from '@openmrs/esm-framework';
 import { closeOverlay } from '../hooks/useOverlay';
 import {
   type MedicationDispense,
   MedicationDispenseStatus,
   type MedicationRequestBundle,
   type InventoryItem,
 } from '../types';
-import { saveMedicationDispense } from '../medication-dispense/medication-dispense.resource';
-import MedicationDispenseReview from './medication-dispense-review.component';
 import {
   computeNewFulfillerStatusAfterDispenseEvent,
   getFulfillerStatus,
   getUuidFromReference,
   revalidate,
 } from '../utils';
-import { updateMedicationRequestFulfillerStatus } from '../medication-request/medication-request.resource';
 import { type PharmacyConfig } from '../config-schema';
-import StockDispense from './stock-dispense/stock-dispense.component';
 import { createStockDispenseRequestPayload, sendStockDispenseRequest } from './stock-dispense/stock.resource';
+import { saveMedicationDispense } from '../medication-dispense/medication-dispense.resource';
+import { updateMedicationRequestFulfillerStatus } from '../medication-request/medication-request.resource';
+import MedicationDispenseReview from './medication-dispense-review.component';
+import StockDispense from './stock-dispense/stock-dispense.component';
+import styles from './forms.scss';
 
 interface DispenseFormProps {
   medicationDispense: MedicationDispense;
@@ -48,7 +41,6 @@ const DispenseForm: React.FC<DispenseFormProps> = ({
   quantityRemaining,
 }) => {
   const { t } = useTranslation();
-  const isTablet = useLayoutType() === 'tablet';
   const { patient, isLoading } = usePatient(patientUuid);
   const config = useConfig<PharmacyConfig>();
 
@@ -184,7 +176,7 @@ const DispenseForm: React.FC<DispenseFormProps> = ({
   }, [patient, patientUuid]);
 
   return (
-    <div className="">
+    <div>
       <div className={styles.formWrapper}>
         {isLoading && (
           <InlineLoading

src/forms/forms.scss

@@ -25,11 +25,11 @@ $color-blue-30: #a6c8ff;
   padding: spacing.$spacing-05;
 }
 
-:global(.omrs-breakpoint-lt-desktop) .formGroup>span {
+:global(.omrs-breakpoint-lt-desktop) .formGroup > span {
   flex: 1;
 }
 
-:global(.omrs-breakpoint-lt-desktop) .formGroup>div {
+:global(.omrs-breakpoint-lt-desktop) .formGroup > div {
   flex: 3;
 }
 
@@ -60,7 +60,7 @@ $color-blue-30: #a6c8ff;
 .frequencyAndDay {
   display: flex;
 
-  >div {
+  > div {
     margin-right: 0.5rem;
   }
 }
@@ -69,7 +69,7 @@ $color-blue-30: #a6c8ff;
   display: flex;
   flex-direction: column;
 
-  >div {
+  > div {
     margin-bottom: 1rem;
   }
 }
@@ -109,43 +109,43 @@ $color-blue-30: #a6c8ff;
   width: 60%;
 }
 
-.contentSwitcherWrapper>div>button {
+.contentSwitcherWrapper > div > button {
   background-color: $ui-02;
 }
 
-.contentSwitcherWrapper>div button:first-child {
+.contentSwitcherWrapper > div button:first-child {
   border-top: 1px solid $color-blue-30;
   border-bottom: 1px solid $color-blue-30;
   border-left: 1px solid $color-blue-30;
   border-right: none;
   border-radius: spacing.$spacing-02 0 0px spacing.$spacing-02;
 }
 
-.contentSwitcherWrapper>div button:last-child {
+.contentSwitcherWrapper > div button:last-child {
   border-top: 1px solid $color-blue-30;
   border-bottom: 1px solid $color-blue-30;
   border-right: 1px solid $color-blue-30;
   border-left: none;
   border-radius: 0px spacing.$spacing-02 spacing.$spacing-02 0px;
 }
 
-.contentSwitcherWrapper>div>button[aria-selected='true'],
-.contentSwitcherWrapper>div>button[aria-selected='true']:first-child {
+.contentSwitcherWrapper > div > button[aria-selected='true'],
+.contentSwitcherWrapper > div > button[aria-selected='true']:first-child {
   background-color: $color-blue-10;
   color: $color-blue-60-2;
   border-color: $color-blue-60-2;
   border-right: 1px solid $color-blue-60-2;
 }
 
-.contentSwitcherWrapper>div>button[aria-selected='true'],
-.contentSwitcherWrapper>div>button[aria-selected='true']:last-child {
+.contentSwitcherWrapper > div > button[aria-selected='true'],
+.contentSwitcherWrapper > div > button[aria-selected='true']:last-child {
   background-color: $color-blue-10;
   color: $color-blue-60-2;
   border-color: $color-blue-60-2;
   border-left: 1px solid $color-blue-60-2;
 }
 
-.contentSwitcherWrapper>div>button[aria-selected='true']:focus {
+.contentSwitcherWrapper > div > button[aria-selected='true']:focus {
   box-shadow: none;
 }
 

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

@@ -1,6 +1,6 @@
-import { render } from '@testing-library/react';
 import React from 'react';
-import { MedicationDispense, MedicationDispenseStatus } from '../types';
+import { render } from '@testing-library/react';
+import { type MedicationDispense, MedicationDispenseStatus } from '../types';
 import MedicationDispenseReview from './medication-dispense-review.component';
 
 jest.mock('@openmrs/esm-framework', () => {