(feat) Various UI mods (#119)

* (feat) Various UI mods

* Fix lint issues in tests

* More fixes

.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', () => {