@openmrs/esm-dispensing-app 1.0.0-pre.4 → 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/.husky/pre-commit

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

package/.husky/pre-push

@@ -3,6 +3,4 @@
 
 set -e  # die on error
 
-npm run lint
-npm run test
-npm run typescript
+yarn verify

package/jest.config.json

@@ -1,15 +1,15 @@
 {
   "transform": {
-    "^.+\\.tsx?$": "babel-jest"
+    "^.+\\.tsx?$": "@swc/jest"
   },
   "transformIgnorePatterns": [
     "/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.4",
+  "version": "1.0.0-pre.41",
   "license": "MPL-2.0",
   "description": "Medication dispensing application",
   "browser": "dist/openmrs-esm-dispensing-app.js",
@@ -11,18 +11,14 @@
     "serve": "webpack serve --mode=development",
     "build": "webpack --mode production",
     "analyze": "webpack --mode=production --env.analyze=true",
-    "lint": "eslint src --ext js,jsx,ts,tsx",
     "prettier": "prettier --write \"src/**/*.{ts,tsx}\"",
-    "typescript": "tsc",
+    "lint": "eslint src --ext js,jsx,ts,tsx",
     "test": "jest --config jest.config.json",
-    "coverage": "npm run test -- --coverage",
+    "typescript": "tsc",
+    "verify": "concurrently 'yarn:lint' 'yarn:test' 'yarn:typescript'",
+    "coverage": "yarn test --coverage",
     "prepare": "husky install"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "pretty-quick --staged && concurrently 'npm:lint' 'npm:test' 'npm:typescript'"
-    }
-  },
   "browserslist": [
     "extends browserslist-config-openmrs"
   ],
@@ -45,44 +41,34 @@
     "url": "https://github.com/openmrs/openmrs-esm-dispensing/issues"
   },
   "dependencies": {
-    "@carbon/icons-react": "^10.18.0",
-    "carbon-components-react": "^7.25.0",
-    "lodash-es": "^4.17.15"
+    "@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": {
-    "@babel/core": "^7.14.3",
-    "@babel/plugin-proposal-class-properties": "^7.13.0",
-    "@babel/preset-env": "^7.14.4",
-    "@babel/preset-react": "^7.13.13",
-    "@babel/preset-typescript": "^7.13.0",
-    "@babel/runtime": "^7.14.0",
     "@openmrs/esm-framework": "next",
-    "@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.13.1",
-    "@types/react-dom": "^16.9.14",
+    "@swc/core": "^1.2.189",
+    "@swc/jest": "^0.2.21",
+    "@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",
     "@typescript-eslint/parser": "^4.26.0",
-    "babel-eslint": "^10.1.0",
-    "babel-jest": "^27.0.2",
-    "babel-preset-minify": "^0.5.1",
     "concurrently": "^6.2.0",
     "eslint": "^7.27.0",
     "eslint-config-prettier": "^8.3.0",
@@ -90,16 +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",
+    "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": "^18.0.14"
   }
 }

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

@@ -0,0 +1,33 @@
+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";
+
+const HistoryAndComments: React.FC = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div className={styles.commentsContainer}>
+      <Form>
+        <TextInput
+          id="test2"
+          invalidText="Invalid error message."
+          placeholder="Add note"
+          labelText={""}
+        />
+        <Button kind="primary" tabIndex={0} type="submit">
+          {t("post", "Post")}
+        </Button>
+        <Button
+          kind="ghost"
+          renderIcon={(props) => <OverflowMenuVertical size={16} />}
+        >
+          {t("addItem", "Add item")}
+        </Button>
+      </Form>
+    </div>
+  );
+};
+
+export default HistoryAndComments;

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

@@ -0,0 +1,26 @@
+.commentsContainer {
+  max-width: 80%;
+
+  form {
+    display: flex;
+    flex-flow: row wrap;
+    align-items: center;
+  }
+
+  form input {
+    vertical-align: middle;
+    margin: 0 10px 0 0;
+    padding: 10px;
+    border: 1px solid #8d8d8d !important;
+    background-color: white;
+  }
+  form button {
+    width: 90px;
+    height: 20px;
+    min-height: 2.5rem !important;
+  }
+
+  form :global(.cds--btn--ghost) {
+    width: 8rem !important;
+  }
+}

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

@@ -0,0 +1,55 @@
+import React from "react";
+import { DosageInstruction, MedicationRequest } from "../types";
+import styles from "./medication-card.scss";
+import { getDosageInstruction } from "../utils";
+import { Tile } from "@carbon/react";
+import { useTranslation } from "react-i18next";
+
+const MedicationCard: React.FC<{ medication: MedicationRequest }> = ({
+  medication,
+}) => {
+  const { t } = useTranslation();
+  const dosageInstruction: DosageInstruction = getDosageInstruction(
+    medication.dosageInstruction
+  );
+
+  return (
+    <Tile className={styles.medicationTile}>
+      <div>
+        <p className={styles.medicationName}>
+          <strong>{medication.medicationReference?.display}</strong>
+        </p>
+        <p className={styles.bodyLong01}>
+          <span className={styles.label01}>
+            {t("dose", "Dose").toUpperCase()}
+          </span>{" "}
+          {dosageInstruction && (
+            <>
+              <span className={styles.dosage}>
+                {dosageInstruction.doseAndRate &&
+                  dosageInstruction?.doseAndRate.map((doseAndRate) => {
+                    return (
+                      <>
+                        {doseAndRate?.doseQuantity?.value}{" "}
+                        {doseAndRate?.doseQuantity?.unit}
+                      </>
+                    );
+                  })}
+              </span>{" "}
+              &mdash; {dosageInstruction?.route?.text} &mdash;{" "}
+              {dosageInstruction?.timing?.code?.text}{" "}
+              {dosageInstruction?.timing?.repeat?.duration
+                ? "for " +
+                  dosageInstruction?.timing?.repeat?.duration +
+                  " " +
+                  dosageInstruction?.timing?.repeat?.durationUnit
+                : " "}
+            </>
+          )}
+        </p>
+      </div>
+    </Tile>
+  );
+};
+
+export default MedicationCard;

package/src/components/medication-card.scss

@@ -0,0 +1,26 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import "~@openmrs/esm-styleguide/src/vars";
+
+.medicationTile {
+  width: 100%;
+  margin: 2px 0 8px;
+  padding: 0 48px 0 0;
+  background-color: #fff;
+  border-left: 4px solid #007d79;
+  color: $text-02;
+  margin-bottom: 1rem !important;
+}
+
+.medicationName {
+  font-size: 15px !important;
+}
+
+.bodyLong01 {
+  font-size: 13px !important;
+}
+
+.dosage {
+  color: #525252;
+  font-weight: bold;
+}

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

@@ -0,0 +1,65 @@
+import React from "react";
+import { PatientUuid } from "@openmrs/esm-framework";
+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";
+import PatientDetails from "./patient-details.component";
+import PrescriptionDetails from "./prescription-details.component";
+
+interface TabItem {
+  name: string;
+  component: JSX.Element;
+}
+
+const OrderExpanded: React.FC<{
+  encounterUuid: string;
+  patientUuid: PatientUuid;
+}> = ({ encounterUuid, patientUuid }) => {
+  const { t } = useTranslation();
+
+  const tabs: TabItem[] = [
+    {
+      name: t("prescriptionDetails", "Prescription details"),
+      component: (
+        <PrescriptionDetails
+          encounterUuid={encounterUuid}
+          patientUuid={patientUuid}
+        />
+      ),
+    },
+    {
+      name: t("historyComments", "History and comments"),
+      component: <HistoryAndComments />,
+    },
+    {
+      name: t("patientDetails", "Patient details"),
+      component: <PatientDetails patientUuid={patientUuid} />,
+    },
+    // {
+    //   name: t("billing", "Billing"),
+    //   component: <div>Billing</div>,
+    // },
+  ];
+
+  return (
+    <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>
+  );
+};
+
+export default OrderExpanded;

package/src/components/order-expanded.scss

@@ -0,0 +1,46 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import "~@openmrs/esm-styleguide/src/vars";
+
+
+.expandedTabsContainer {
+  display: flex;
+  flex-direction: row;
+
+  :global(.cds--tabs) {
+    margin: 1rem 0;
+    width: 20%;
+    max-height: 8rem !important;
+  }
+
+  :global(.cds--tab--list) {
+    flex-direction: column !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(.cds--tabs__nav-item--selected) {
+      border-bottom: 0px !important;
+      border-left: 3px solid var(--brand-03) !important;
+  }
+
+  &:global(.cds--tabs--scrollable .cds--tabs--scrollable__nav-item+.cds--tabs--scrollable__nav-item) {
+    margin-left: 0rem !important;
+  }
+
+  >ul {
+    flex-direction: column !important;
+  }
+
+  >ul>li button {
+    width: 12rem !important;
+  }
+}

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

@@ -0,0 +1,106 @@
+import React, { useEffect } from "react";
+import {
+  attach,
+  ConfigurableLink,
+  detach,
+  ExtensionSlot,
+  formatDate,
+  interpolateString,
+  parseDate,
+  PatientUuid,
+  useConfig,
+  usePatient,
+} from "@openmrs/esm-framework";
+import styles from "./patient-details.scss";
+import { useTranslation } from "react-i18next";
+import { Patient } from "../types";
+
+const PatientDetails: React.FC<{
+  patientUuid: PatientUuid;
+}> = ({ patientUuid }) => {
+  const { t } = useTranslation();
+  const config = useConfig();
+  const { patient } = usePatient(patientUuid);
+
+  const patientName = patient;
+  const patientPhotoSlotState = React.useMemo(
+    () => ({ patientUuid, patientName }),
+    [patientUuid, patientName]
+  );
+
+  const [showContactDetails, setShowContactDetails] = React.useState(false);
+  const toggleContactDetails = React.useCallback((event: MouseEvent) => {
+    event.stopPropagation();
+    setShowContactDetails((value) => !value);
+  }, []);
+
+  const patientAvatar = (
+    <div className={styles.patientAvatar} role="img">
+      <ExtensionSlot
+        extensionSlotName="patient-photo-slot"
+        state={patientPhotoSlotState}
+      />
+    </div>
+  );
+
+  const getGender = (gender) => {
+    switch (gender) {
+      case "M":
+        return t("male", "Male");
+      case "F":
+        return t("female", "Female");
+      case "O":
+        return t("other", "Other");
+      case "U":
+        return t("unknown", "Unknown");
+      default:
+        return gender;
+    }
+  };
+
+  useEffect(() => {
+    attach("dispensing-patient-banner-slot", "patient-banner");
+    attach("dispensing-patient-vitals-slot", "vitals-overview-widget");
+    attach("dispensing-patient-allergies-slot", "allergies-overview-widget");
+
+    return () => {
+      detach("dispensing-patient-banner-slot", "patient-banner");
+      detach("dispensing-patient-vitals-slot", "vitals-overview-widget");
+      detach("dispensing-patient-allergies-slot", "allergies-overview-widget");
+    };
+  }, []);
+
+  return (
+    <div>
+      {patient && (
+        <div className={styles.patientDetailsContainer}>
+          <ExtensionSlot
+            extensionSlotName="dispensing-patient-banner-slot"
+            state={{
+              patient,
+              patientUuid: patientUuid,
+            }}
+          />
+
+          <ExtensionSlot
+            extensionSlotName="dispensing-patient-vitals-slot"
+            state={{
+              patient,
+              patientUuid: patientUuid,
+            }}
+          />
+
+          <ExtensionSlot
+            extensionSlotName="dispensing-patient-allergies-slot"
+            state={{
+              patient,
+              patientUuid: patientUuid,
+            }}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default PatientDetails;

package/src/components/patient-details.scss

@@ -0,0 +1,97 @@
+@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;
+  display: grid;
+  grid-template-columns: 1fr auto;
+}
+
+.patientBanner {
+  text-decoration: none;
+  display: grid;
+  grid-template-columns: auto 1fr;
+}
+
+.patientName {
+  @include type.type-style('heading-03');
+  margin-right: 0.25rem;
+}
+
+.patientAvatar {
+  width: 5rem;
+  height: 5rem;
+  margin: 1rem;
+  border-radius: 1px;
+}
+
+.patientAvatarButton {
+  cursor: pointer;
+  border: none;
+  padding: 0px;
+  background: none;
+}
+
+.patientInfo {
+  width: 100%;
+  padding-right: 1rem;
+}
+
+.demographics {
+  @include type.type-style('body-compact-02');
+  color: $text-02;
+  margin-top: 0.375rem;
+}
+
+.row {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+.patientNameRow {
+  margin-top: spacing.$spacing-05;
+}
+
+.flexRow {
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+}
+
+.identifiers {
+  @include type.type-style('body-compact-02');
+  color: $ui-04;
+  margin-top: 0.375rem;
+}
+
+.tooltipPadding {
+  padding: 0.25rem;
+}
+
+.tooltipSmallText {
+  font-size: 80%;
+}
+
+.actionsButtonText {
+  @include type.type-style('body-compact-01');
+  color: $interactive-01;
+}
+
+:global(.cds--tooltip--definition .cds--tooltip__trigger) {
+  border-bottom: none;
+}
+
+.buttonCol {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-end;
+}