@openmrs/esm-dispensing-app 1.0.0-pre.33 → 1.0.0-pre.41

package/.github/workflows/node.js.yml

@@ -51,9 +51,9 @@ jobs:
         with:
           node-version: "16.x"
           registry-url: "https://registry.npmjs.org"
-      - run: npm install
+      - run: yarn
       - run: sed -i -e "s/\(\"version\":\\s\+\"\([0-9]\+\.\?\)\+\)/\1-pre.${{ github.run_number }}/" 'package.json'
-      - run: npm publish --access public --tag next
+      - run: yarn publish --access public --tag next
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
 

package/jest.config.json

@@ -6,10 +6,10 @@
     "/node_modules/(?!@openmrs)"
   ],
   "moduleNameMapper": {
-    "^@carbon/icons-react/es/(.*)$": "@carbon/icons-react/lib/$1",
-    "^carbon-components-react/es/(.*)$": "carbon-components-react/lib/$1",
     "@openmrs/esm-framework": "@openmrs/esm-framework/mock",
-    "\\.(s?css)$": "identity-obj-proxy"
+    "\\.(s?css)$": "identity-obj-proxy",
+    "^lodash-es/(.*)$": "lodash/$1",
+    "^uuid$": "<rootDir>/node_modules/uuid/dist/index.js"
   },
   "setupFilesAfterEnv": [
     "<rootDir>/src/setup-tests.ts"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-dispensing-app",
-  "version": "1.0.0-pre.33",
+  "version": "1.0.0-pre.41",
   "license": "MPL-2.0",
   "description": "Medication dispensing application",
   "browser": "dist/openmrs-esm-dispensing-app.js",
@@ -41,34 +41,30 @@
     "url": "https://github.com/openmrs/openmrs-esm-dispensing/issues"
   },
   "dependencies": {
-    "@carbon/icons-react": "^10.18.0",
-    "carbon-components-react": "^7.25.0",
+    "@carbon/react": "^1.9.0",
     "lodash-es": "^4.17.15",
     "swr": "^1.3.0"
   },
   "peerDependencies": {
-    "@openmrs/esm-framework": "^3.14.0-pre",
-    "carbon-components": "10.x",
-    "carbon-icons": "7.x",
+    "@openmrs/esm-framework": "4.x",
     "dayjs": "1.x",
-    "react": "16.x",
+    "react": "18.x",
+    "react-dom": "18.x",
     "react-i18next": "11.x",
-    "react-router-dom": "5.x",
+    "react-router-dom": "6.x",
     "rxjs": "6.x"
   },
   "devDependencies": {
-    "@openmrs/esm-framework": "latest",
+    "@openmrs/esm-framework": "next",
     "@swc/core": "^1.2.189",
     "@swc/jest": "^0.2.21",
-    "@testing-library/dom": "^7.31.2",
-    "@testing-library/jest-dom": "^5.13.0",
-    "@testing-library/react": "^11.2.7",
-    "@testing-library/user-event": "^13.1.9",
-    "@types/carbon-components-react": "^7.34.0",
-    "@types/carbon__icons-react": "^10.31.0",
-    "@types/jest": "^26.0.23",
-    "@types/react": "^16.14.5",
-    "@types/react-dom": "^16.9.14",
+    "@testing-library/dom": "^8.16.0",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.3.0",
+    "@testing-library/user-event": "^14.2.1",
+    "@types/jest": "^28.1.4",
+    "@types/react": "^18.0.14",
+    "@types/react-dom": "^18.0.5",
     "@types/react-router": "^5.1.14",
     "@types/react-router-dom": "^5.1.7",
     "@types/webpack-env": "^1.16.0",
@@ -80,19 +76,20 @@
     "eslint-plugin-prettier": "^3.4.0",
     "husky": "^6.0.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^27.0.4",
-    "jest-cli": "^27.0.4",
-    "openmrs": "latest",
+    "jest": "^28.1.2",
+    "jest-cli": "^28.1.2",
+    "jest-environment-jsdom": "^28.1.2",
+    "openmrs": "next",
     "prettier": "^2.3.0",
     "pretty-quick": "^3.1.0",
-    "react": "^16.13.1",
-    "react-dom": "^16.14.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-i18next": "^11.7.0",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "^6.3.0",
     "rxjs": "^6.5.4",
     "typescript": "^4.3.2"
   },
   "resolutions": {
-    "**/@types/react": "^16.14.5"
+    "**/@types/react": "^18.0.14"
   }
 }

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

@@ -1,6 +1,6 @@
-import { OverflowMenuVertical16 } from "@carbon/icons-react";
-import { Button, Form, TextInput } from "carbon-components-react";
 import React from "react";
+import { Button, Form, TextInput } from "@carbon/react";
+import { OverflowMenuVertical } from "@carbon/react/icons";
 import { useTranslation } from "react-i18next";
 import styles from "./history-and-comments.scss";
 
@@ -19,7 +19,10 @@ const HistoryAndComments: React.FC = () => {
         <Button kind="primary" tabIndex={0} type="submit">
           {t("post", "Post")}
         </Button>
-        <Button kind="ghost" renderIcon={OverflowMenuVertical16}>
+        <Button
+          kind="ghost"
+          renderIcon={(props) => <OverflowMenuVertical size={16} />}
+        >
           {t("addItem", "Add item")}
         </Button>
       </Form>

package/src/components/history-and-comments.scss

@@ -20,7 +20,7 @@
     min-height: 2.5rem !important;
   }
 
-  form :global(.bx--btn--ghost) {
+  form :global(.cds--btn--ghost) {
     width: 8rem !important;
   }
 }

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

@@ -2,7 +2,7 @@ import React from "react";
 import { DosageInstruction, MedicationRequest } from "../types";
 import styles from "./medication-card.scss";
 import { getDosageInstruction } from "../utils";
-import { Tile } from "carbon-components-react";
+import { Tile } from "@carbon/react";
 import { useTranslation } from "react-i18next";
 
 const MedicationCard: React.FC<{ medication: MedicationRequest }> = ({

package/src/components/medication-card.scss

@@ -1,5 +1,5 @@
-@import 'carbon-components/css/carbon-components.css';
-@import 'carbon-components/scss/globals/scss/typography.scss';
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
 @import "~@openmrs/esm-styleguide/src/vars";
 
 .medicationTile {

package/src/components/order-expanded.component.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { PatientUuid } from "@openmrs/esm-framework";
-import { Tab, Tabs } from "carbon-components-react";
+import { Tab, Tabs, TabList, TabPanels, TabPanel } from "@carbon/react";
 import { useTranslation } from "react-i18next";
 import HistoryAndComments from "./history-and-comments.component";
 import styles from "./order-expanded.scss";
@@ -43,13 +43,20 @@ const OrderExpanded: React.FC<{
   ];
 
   return (
-    <div className={styles.expandedContainer}>
-      <Tabs className={styles.tabsContainer}>
-        {tabs.map((tab: TabItem, index: number) => (
-          <Tab key={index} label={tab.name} className={styles.orderTabs}>
-            {tab.component}
-          </Tab>
-        ))}
+    <div className={styles.expandedTabsContainer}>
+      <Tabs>
+        <TabList>
+          {tabs.map((tab: TabItem, index: number) => (
+            <Tab key={index} className={styles.orderTabs}>
+              {tab.name}
+            </Tab>
+          ))}
+        </TabList>
+        <TabPanels>
+          {tabs.map((tab: TabItem) => (
+            <TabPanel>{tab.component}</TabPanel>
+          ))}
+        </TabPanels>
       </Tabs>
     </div>
   );

package/src/components/order-expanded.scss

@@ -1,57 +1,46 @@
-@import 'carbon-components/css/carbon-components.css';
-@import 'carbon-components/scss/globals/scss/typography.scss';
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
 @import "~@openmrs/esm-styleguide/src/vars";
 
 
-.prescriptionContainer {
+.expandedTabsContainer {
   display: flex;
   flex-direction: row;
-  width: 100%;
-}
-
-:global(.bx--tab-content) {
-  width: 100% !important;
-}
 
-:global(.bx--child-row-inner-container) > div {
-  display: flex;
-  flex-direction: row;
-}
-
-.tabsContainer {
-  margin: 1rem 0;
-  width: 20%;
-
-  &:global(.bx--tabs--scrollable .bx--tabs--scrollable__nav-item+.bx--tabs--scrollable__nav-item) {
-    margin-left: 0rem !important;
+  :global(.cds--tabs) {
+    margin: 1rem 0;
+    width: 20%;
+    max-height: 8rem !important;
   }
 
-  > ul {
+  :global(.cds--tab--list) {
     flex-direction: column !important;
   }
 
-  > ul > li button {
-    width: 12rem !important;
+  :global(.cds--tab-content) {
+    margin: 1rem 0;
+    width: 100% !important;
+  }
+
+  :global(.cds--tabs__nav-link) {
+    border-bottom: 0 !important;
+    border-left: 3px solid $ui-03 !important;
   }
 
-  :global(.bx--tabs--scrollable__nav-item--selected) {
+  :global(.cds--tabs__nav-item--selected) {
       border-bottom: 0px !important;
       border-left: 3px solid var(--brand-03) !important;
   }
-}
 
-.orderTabs {
-  flex-direction: row;
+  &:global(.cds--tabs--scrollable .cds--tabs--scrollable__nav-item+.cds--tabs--scrollable__nav-item) {
+    margin-left: 0rem !important;
+  }
 
-  button {
-    border-bottom: 0 !important;
-    border-left: 3px solid $ui-03 !important;
+  >ul {
+    flex-direction: column !important;
   }
 
-  button,
-  button:focus,
-  button:active {
-    outline: 0 !important;
-    outline-offset: 0 !important;
+  >ul>li button {
+    width: 12rem !important;
   }
 }

package/src/components/patient-details.scss

@@ -1,18 +1,11 @@
-@import 'carbon-components/css/carbon-components.css';
-@import 'carbon-components/scss/globals/scss/typography.scss';
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
 @import "~@openmrs/esm-styleguide/src/vars";
 
-
 .patientDetailsContainer > div {
   margin-bottom: 1rem;
 }
 
-
-
-
-
-
-
 .container {
   border-bottom: 0.063rem solid $ui-03;
   background-color: $ui-02;
@@ -27,9 +20,8 @@
 }
 
 .patientName {
-  @include carbon--type-style('productive-heading-03');
+  @include type.type-style('heading-03');
   margin-right: 0.25rem;
-  color: $text-01;
 }
 
 .patientAvatar {
@@ -52,7 +44,7 @@
 }
 
 .demographics {
-  @include carbon--type-style('body-short-02');
+  @include type.type-style('body-compact-02');
   color: $text-02;
   margin-top: 0.375rem;
 }
@@ -65,7 +57,7 @@
 }
 
 .patientNameRow {
-  margin-top: $spacing-05;
+  margin-top: spacing.$spacing-05;
 }
 
 .flexRow {
@@ -75,7 +67,7 @@
 }
 
 .identifiers {
-  @include carbon--type-style('body-short-02');
+  @include type.type-style('body-compact-02');
   color: $ui-04;
   margin-top: 0.375rem;
 }
@@ -89,11 +81,11 @@
 }
 
 .actionsButtonText {
-  @include carbon--type-style('body-short-01');
+  @include type.type-style('body-compact-01');
   color: $interactive-01;
 }
 
-:global(.bx--tooltip--definition .bx--tooltip__trigger) {
+:global(.cds--tooltip--definition .cds--tooltip__trigger) {
   border-bottom: none;
 }
 

package/src/components/prescription-details.component.tsx

@@ -1,7 +1,7 @@
-import { DataTableSkeleton, Tile } from "carbon-components-react";
+import { DataTableSkeleton, Tile } from "@carbon/react";
 import React, { useEffect, useState } from "react";
 import styles from "./prescription-details.scss";
-import { WarningFilled24 } from "@carbon/icons-react";
+import { WarningFilled } from "@carbon/react/icons";
 import {
   useOrderDetails,
   usePatientAllergies,
@@ -32,7 +32,7 @@ const PrescriptionDetails: React.FC<{
         <Tile className={styles.allergiesTile}>
           <div className={styles.allergesContent}>
             <div>
-              <WarningFilled24 className={styles.allergiesIcon} />
+              <WarningFilled size={24} className={styles.allergiesIcon} />
               <p>
                 <span style={{ fontWeight: "bold" }}>
                   {totalAllergies} allergies

package/src/components/prescription-details.scss

@@ -1,5 +1,5 @@
-@import 'carbon-components/css/carbon-components.css';
-@import 'carbon-components/scss/globals/scss/typography.scss';
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
 @import "~@openmrs/esm-styleguide/src/vars";
 
 .prescriptionContainer {
@@ -8,13 +8,13 @@
   width: 100%;
   margin-bottom: 1rem;
 
-  &:global(.bx--tile) {
+  &:global(.cds--tile) {
     min-height: 3rem !important;
     padding-left: 10px !important;
   }
 }
 
-.prescriptionContainer > :global(.bx--tile) {
+.prescriptionContainer > :global(.cds--tile) {
   min-height: 3rem !important;
   padding-left: 10px !important;
   margin: auto;

package/src/constants.ts

@@ -1,3 +1,3 @@
 export const spaRoot = window["getOpenmrsSpaBase"];
 export const basePath = "/dispensing";
-export const dispensingBasePath = `${window.spaBase}${basePath}`;
+export const spaBasePath = `${window.spaBase}${basePath}`;

package/src/dispensing-link.tsx

@@ -1,12 +1,12 @@
 import React from "react";
 import { ConfigurableLink } from "@openmrs/esm-framework";
 import { useTranslation } from "react-i18next";
-import { dispensingBasePath } from "./constants";
+import { spaBasePath } from "./constants";
 
 export default function DispensingLink() {
   const { t } = useTranslation();
   return (
-    <ConfigurableLink to={dispensingBasePath}>
+    <ConfigurableLink to={spaBasePath}>
       {t("dispensing", "Dispensing")}
     </ConfigurableLink>
   );

package/src/dispensing-tiles/dispensing-tile.component.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { Tile, Button } from "carbon-components-react";
-import ArrowRight16 from "@carbon/icons-react/es/arrow--right/16";
+import { Tile, Button } from "@carbon/react";
+import { ArrowRight } from "@carbon/react/icons";
 import styles from "./dispensing-tile.scss";
 
 interface DispensingTileProps {
@@ -28,7 +28,9 @@ const DispensingTile: React.FC<DispensingTileProps> = ({
         </div>
         <Button
           kind="ghost"
-          renderIcon={ArrowRight16}
+          renderIcon={(props) => (
+            <ArrowRight size={16} className={styles.arrowIcon} />
+          )}
           iconDescription={t("view", "View")}
         >
           {t("view", "View")}

package/src/dispensing-tiles/dispensing-tile.scss

@@ -1,39 +1,43 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
 @import "~@openmrs/esm-styleguide/src/vars";
-@import "~carbon-components/src/globals/scss/vars";
-@import "~carbon-components/src/globals/scss/mixins";
 
 .tileContainer {
   border: 0.0625rem solid $ui-03;
   flex-grow: 1;
   height: 7.875rem;
-  padding: 0 $spacing-05;
-  margin: $spacing-03 $spacing-03;
+  padding: 0 spacing.$spacing-05;
+  margin: spacing.$spacing-03 spacing.$spacing-03;
 }
 
 .tileHeader {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: $spacing-03;  
+  margin-bottom: spacing.$spacing-03;
 }
 
 .headerLabel {
-  @include carbon--type-style("productive-heading-01");
+  @include type.type-style("heading-01");
   color: $text-02;
 }
 
 .totalsLabel {
-  @include carbon--type-style("label-01");
+  @include type.type-style("label-01");
   color: $text-02;
 }
 
 .totalsValue {
-  @include carbon--type-style("productive-heading-04");
+  @include type.type-style("heading-04");
   color: $ui-05;
 }
 
 .headerLabelContainer {
   display: flex;
   align-items: center;
-  height: $spacing-07;
+  height: spacing.$spacing-07;
+}
+
+.arrowIcon {
+  fill: var(--cds-link-primary, #0f62fe) !important;
 }

package/src/dispensing-tiles/dispensing-tiles.component.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { DataTableSkeleton } from "carbon-components-react";
+import { DataTableSkeleton } from "@carbon/react";
 import { useMetrics } from "./dispensing-tiles.resource";
 import DispensingTile from "./dispensing-tile.component";
 import styles from "./dispensing-tiles.scss";

package/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 "~carbon-components/src/globals/scss/vars";
-@import "~carbon-components/src/globals/scss/mixins";
 
 .cardContainer {
   background-color: $ui-02 ;
   display: flex;
   justify-content: space-between;
-  padding: 0 $spacing-05 $spacing-10 $spacing-03; 
+  padding: 0 spacing.$spacing-05 spacing.$spacing-10 spacing.$spacing-03;
   flex-flow: row wrap;
-  margin-top: -$spacing-03;
+  margin-top: - spacing.$spacing-03;
 }

package/src/dispensing.component.tsx

@@ -1,12 +1,11 @@
 import React from "react";
-import styles from "./dispensing.scss";
 import { PharmacyHeader } from "./pharmacy-header/pharmacy-header.component";
 import DispensingTiles from "./dispensing-tiles/dispensing-tiles.component";
 import PrescriptionTabLists from "./prescriptions/prescription-tab-lists.component";
 
 export default function Dispensing() {
   return (
-    <div className={`omrs-main-content ${styles.dispensingContainer}`}>
+    <div className={`omrs-main-content`}>
       <PharmacyHeader />
       <DispensingTiles />
       <PrescriptionTabLists />

package/src/index.ts

@@ -37,7 +37,7 @@ function setupOpenMRS() {
     ],
     extensions: [
       {
-        id: "appointments-link",
+        id: "dispensing-link",
         slot: "app-menu-slot",
         load: getAsyncLifecycle(() => import("./dispensing-link"), options),
         online: true,

package/src/medication-request/medication-request.resource.tsx

@@ -62,8 +62,12 @@ interface FHIREncounterOrder {
   status: string;
 }
 
-export function useOrders(pageSize: number = 10, pageOffset: number = 0) {
-  const url = `/ws/fhir2/R4/Encounter?_getpagesoffset=${pageOffset}&_count=${pageSize}&_revinclude=MedicationRequest:encounter&_has:MedicationRequest:encounter:intent=order&_tag=http%3A%2F%2Ffhir.openmrs.org%2Fext%2Fencounter-tag%7Cencounter`;
+export function useOrders(
+  pageSize: number = 10,
+  pageOffset: number = 0,
+  patientSearchTerm: string = ""
+) {
+  const url = `/ws/fhir2/R4/Encounter?_getpagesoffset=${pageOffset}&_count=${pageSize}&subject.name=${patientSearchTerm}&_revinclude=MedicationRequest:encounter&_has:MedicationRequest:encounter:intent=order&_tag=http%3A%2F%2Ffhir.openmrs.org%2Fext%2Fencounter-tag%7Cencounter`;
   const { data, error } = useSWR<
     { data: FHIRMedicationRequestResponse },
     Error

package/src/pharmacy-header/pharmacy-header.component.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-import Calendar16 from "@carbon/icons-react/es/calendar/16";
-import Location16 from "@carbon/icons-react/es/location/16";
+import { Calendar, Location } from "@carbon/react/icons";
 import { useConfig, useSession, formatDate } from "@openmrs/esm-framework";
 import { PharmacyConfig } from "../config-schema";
 import PharmacyIllustration from "./pharmacy-illustration.component";
@@ -18,14 +17,14 @@ export const PharmacyHeader: React.FC = () => {
       <div className={styles["left-justified-items"]}>
         <PharmacyIllustration />
         <div className={styles["page-labels"]}>
-          <Location16 />
+          <Location size={16} />
           <span className={styles.value}>{userLocation}</span>
           <p className={styles["page-name"]}>{t("appName", config.appName)} </p>
         </div>
       </div>
       <div className={styles["right-justified-items"]}>
         <div className={styles["date-and-location"]}>
-          <Calendar16 />
+          <Calendar size={16} />
           <span className={styles.value}>
             {formatDate(new Date(), { mode: "standard" })}
           </span>

package/src/pharmacy-header/pharmacy-header.scss

@@ -1,11 +1,11 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
 @import '~@openmrs/esm-styleguide/src/vars';
-@import '~carbon-components/src/globals/scss/vars';
-@import '~carbon-components/src/globals/scss/mixins';
 
 .header {
-  @include carbon--type-style('body-short-02');
+  @include type.type-style('body-compact-02');
   color: $text-02;
-  height: $spacing-12;
+  height: spacing.$spacing-12;
   background-color: $ui-02;
   border: 1px solid $ui-03;
   border-left: 0px;
@@ -21,14 +21,13 @@
 }
 
 .right-justified-items {
-  @include carbon--type-style('body-short-02');
+  @include type.type-style('body-compact-02');
   color: $text-02;
   padding-top: 1rem;
 }
 
 .page-name {
-  @include carbon--type-style('productive-heading-04');
-  color: $text-01;
+  @include type.type-style('heading-04');
 }
 
 .page-labels {
@@ -54,5 +53,5 @@
 }
 
 .view {
-  @include carbon--type-style('label-01');
+  @include type.type-style('label-01');
 }