@kenyaemr/esm-bed-management-app 1.0.1-pre.7 → 8.0.2

package/package.json

@@ -1,112 +1,54 @@
 {
   "name": "@kenyaemr/esm-bed-management-app",
-  "version": "1.0.1-pre.7",
-  "license": "MPL-2.0",
-  "description": "A frontend module for managing beds in UgandaEMR+",
-  "browser": "dist/esm-kenyaemr-bed-management-app.js",
+  "version": "8.0.2",
+  "description": "Bed management app for OpenMRS 3",
+  "browser": "dist/openmrs-esm-bed-management-app.js",
   "main": "src/index.ts",
   "source": true,
+  "license": "MPL-2.0",
+  "homepage": "https://github.com/openmrs/openmrs-esm-patient-management#readme",
   "scripts": {
     "start": "openmrs develop",
     "serve": "webpack serve --mode=development",
+    "debug": "npm run serve",
     "build": "webpack --mode production",
-    "analyze": "webpack --mode=production --env analyze=true",
-    "lint": "TIMING=1 eslint src --ext js,jsx,ts,tsx",
-    "prettier": "prettier --write \"src/**/*.{ts,tsx}\"",
-    "typescript": "tsc",
-    "test": "jest --config jest.config.js --passWithNoTests",
-    "verify": "turbo lint typescript coverage",
+    "analyze": "webpack --mode=production --env.analyze=true",
+    "lint": "cross-env eslint src --ext ts,tsx",
+    "test": "cross-env TZ=UTC jest --config jest.config.js --verbose false --passWithNoTests --color",
+    "test:watch": "cross-env TZ=UTC jest --watch --config jest.config.js --color",
     "coverage": "yarn test --coverage",
-    "prepare": "husky install",
-    "extract-translations": "i18next 'src/**/*.component.tsx' --config ./i18next-parser.config.js"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "pretty-quick --staged && yarn verify"
-    }
+    "typescript": "tsc",
+    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/**/*.extension.tsx' 'src/**/*modal.tsx' 'src/**/*.workspace.tsx' 'src/index.ts' --config ../../tools/i18next-parser.config.js"
   },
   "browserslist": [
     "extends browserslist-config-openmrs"
   ],
   "keywords": [
-    "openmrs",
-    "microfrontends"
+    "openmrs"
   ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/mets-programme/esm-ugandaemr-bed-management-app.git"
-  },
-  "homepage": "https://github.com/mets-programme/esm-ugandaemr-bed-management-app#readme",
   "publishConfig": {
     "access": "public"
   },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/openmrs/openmrs-esm-patient-management.git"
+  },
   "bugs": {
-    "url": "https://github.com/mets-programme/esm-ugandaemr-bed-management-app/issues"
+    "url": "https://github.com/openmrs/openmrs-esm-patient-management/issues"
   },
   "dependencies": {
-    "@carbon/react": "^1.33.1",
-    "@hookform/resolvers": "^3.3.1",
-    "@openmrs/openmrs-form-engine-lib": "^1.0.0-pre.44",
-    "classnames": "^2.3.2",
-    "dayjs": "^1.11.9",
-    "lodash-es": "^4.17.21",
-    "react-hook-form": "^7.47.0",
-    "react-image-annotate": "^1.8.0",
-    "zod": "^3.22.2"
+    "@carbon/react": "~1.37.0",
+    "lodash-es": "^4.17.15"
   },
   "peerDependencies": {
-    "@openmrs/esm-framework": "*",
-    "@openmrs/openmrs-form-engine-lib": "5.x",
+    "@openmrs/esm-framework": "5.x",
+    "dayjs": "1.x",
     "react": "18.x",
     "react-i18next": "11.x",
     "react-router-dom": "6.x",
-    "rxjs": "6.x"
+    "swr": "2.x"
   },
   "devDependencies": {
-    "@openmrs/esm-framework": "next",
-    "@openmrs/esm-patient-common-lib": "next",
-    "@openmrs/esm-styleguide": "next",
-    "@swc/cli": "^0.1.62",
-    "@swc/core": "^1.3.68",
-    "@swc/jest": "^0.2.26",
-    "@testing-library/dom": "^8.20.1",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^14.4.3",
-    "@types/jest": "^28.1.8",
-    "@types/react": "^18.2.14",
-    "@types/react-dom": "^18.2.6",
-    "@types/react-router": "^5.1.20",
-    "@types/react-router-dom": "^5.3.3",
-    "@types/webpack-env": "^1.18.1",
-    "@typescript-eslint/eslint-plugin": "^5.61.0",
-    "@typescript-eslint/parser": "^5.61.0",
-    "css-loader": "^6.8.1",
-    "eslint": "^8.44.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-config-ts-react-important-stuff": "^3.0.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "husky": "^8.0.0",
-    "i18next": "^23.2.8",
-    "i18next-parser": "^8.0.0",
-    "identity-obj-proxy": "^3.0.0",
-    "jest": "^28.1.3",
-    "jest-cli": "^28.1.3",
-    "jest-environment-jsdom": "^28.1.3",
-    "openmrs": "next",
-    "prettier": "^2.8.8",
-    "pretty-quick": "^3.1.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-i18next": "^11.18.6",
-    "react-router-dom": "^6.14.1",
-    "rxjs": "^6.6.7",
-    "swc-loader": "^0.2.3",
-    "turbo": "^1.10.7",
-    "typescript": "^4.9.5",
-    "webpack": "^5.88.1",
-    "webpack-cli": "^5.1.4"
-  },
-  "packageManager": "yarn@3.6.3",
-  "stableVersion": "1.0.0"
+    "webpack": "^5.74.0"
+  }
 }

package/src/__mocks__/react-i18next.js

@@ -1,15 +1,13 @@
 /** At present, this entire mock is boilerplate. */
-import "react";
-import "react-i18next";
+import 'react';
+const reactI18next = require('react-i18next');
 
-const hasChildren = (node) =>
-  node && (node.children || (node.props && node.props.children));
+const hasChildren = (node) => node && (node.children || (node.props && node.props.children));
 
-const getChildren = (node) =>
-  node && node.children ? node.children : node.props && node.props.children;
+const getChildren = (node) => (node && node.children ? node.children : node.props && node.props.children);
 
 const renderNodes = (reactNodes) => {
-  if (typeof reactNodes === "string") {
+  if (typeof reactNodes === 'string') {
     return reactNodes;
   }
 
@@ -17,18 +15,15 @@ const renderNodes = (reactNodes) => {
     const child = reactNodes[key];
     const isElement = React.isValidElement(child);
 
-    if (typeof child === "string") {
+    if (typeof child === 'string') {
       return child;
     }
     if (hasChildren(child)) {
       const inner = renderNodes(getChildren(child));
       return React.cloneElement(child, { ...child.props, key: i }, inner);
     }
-    if (typeof child === "object" && !isElement) {
-      return Object.keys(child).reduce(
-        (str, childKey) => `${str}${child[childKey]}`,
-        ""
-      );
+    if (typeof child === 'object' && !isElement) {
+      return Object.keys(child).reduce((str, childKey) => `${str}${child[childKey]}`, '');
     }
 
     return child;
@@ -36,7 +31,16 @@ const renderNodes = (reactNodes) => {
 };
 
 const useMock = [(k) => k, {}];
-useMock.t = (k, o) => (o && o.defaultValue) || (typeof o === "string" ? o : k);
+useMock.t = (key, defaultValue, options = {}) => {
+  let translatedString = defaultValue;
+  Object.keys(options).forEach((key) => {
+    if (key != 'interpolation') {
+      translatedString = defaultValue.replace(`{{${key}}}`, `${options[key]}`);
+    }
+  });
+
+  return translatedString ?? key;
+};
 useMock.i18n = {};
 
 module.exports = {

package/src/admin-card-link.component.tsx

@@ -1,20 +1,17 @@
-import React from "react";
-import { useTranslation } from "react-i18next";
-import { Layer, ClickableTile } from "@carbon/react";
-import { ArrowRight } from "@carbon/react/icons";
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Layer, ClickableTile } from '@carbon/react';
+import { ArrowRight } from '@carbon/react/icons';
 
 const BedManagementAdminCardLink: React.FC = () => {
   const { t } = useTranslation();
-  const header = t("manageBeds", "Manage Beds");
+  const header = t('manageBeds', 'Manage Beds');
   return (
     <Layer>
-      <ClickableTile
-        href={window.getOpenmrsSpaBase() + "bed-management/summary"}
-        rel="noopener noreferrer"
-      >
+      <ClickableTile href={window.getOpenmrsSpaBase() + 'bed-management'} rel="noopener noreferrer">
         <div>
           <div className="heading">{header}</div>
-          <div className="content">{t("bedManagement", "Bed Management")}</div>
+          <div className="content">{t('bedManagement', 'Bed Management')}</div>
         </div>
         <div className="iconWrapper">
           <ArrowRight size={16} />

package/src/bed-administration/bed-administration-form.component.tsx

@@ -1,8 +1,8 @@
-import React, { useState } from "react";
-import capitalize from "lodash-es/capitalize";
-import { z } from "zod";
-import { useForm, Controller } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
+import React, { useState } from 'react';
+import capitalize from 'lodash-es/capitalize';
+import { z } from 'zod';
+import { useForm, Controller } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
 import {
   Button,
   ComboBox,
@@ -19,18 +19,18 @@ import {
   TextArea,
   TextInput,
   InlineNotification,
-} from "@carbon/react";
-import { useTranslation } from "react-i18next";
-import { Location } from "@openmrs/esm-framework";
-import type { BedType, InitialData } from "../types";
-import { BedAdministrationData } from "./bed-administration-types";
+} from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { getCoreTranslation, type Location } from '@openmrs/esm-framework';
+import type { BedType, BedFormData } from '../types';
+import { type BedAdministrationData } from './bed-administration-types';
 
 const numberInString = z.string().transform((val, ctx) => {
   const parsed = parseInt(val);
   if (isNaN(parsed) || parsed < 1) {
     ctx.addIssue({
       code: z.ZodIssueCode.custom,
-      message: "Please enter a valid number",
+      message: 'Please enter a valid number',
     });
     return z.NEVER;
   }
@@ -38,19 +38,15 @@ const numberInString = z.string().transform((val, ctx) => {
 });
 
 const BedAdministrationSchema = z.object({
-  bedId: z.string().min(5).max(255),
+  bedId: z.string().max(255),
   description: z.string().max(255),
   bedRow: numberInString,
   bedColumn: numberInString,
   location: z
     .object({ display: z.string(), uuid: z.string() })
-    .refine((value) => value.display != "", "Please select a valid location"),
-  occupancyStatus: z
-    .string()
-    .refine((value) => value != "", "Please select a valid occupied status"),
-  bedType: z
-    .string()
-    .refine((value) => value != "", "Please select a valid bed type"),
+    .refine((value) => value.display != '', 'Please select a valid location'),
+  occupancyStatus: z.string().refine((value) => value != '', 'Please select a valid occupied status'),
+  bedType: z.string().refine((value) => value != '', 'Please select a valid bed type'),
 });
 
 interface BedAdministrationFormProps {
@@ -61,7 +57,7 @@ interface BedAdministrationFormProps {
   handleCreateQuestion?: (formData: BedAdministrationData) => void;
   headerTitle: string;
   occupancyStatuses: string[];
-  initialData: InitialData;
+  initialData: BedFormData;
 }
 
 interface ErrorType {
@@ -79,19 +75,13 @@ const BedAdministrationForm: React.FC<BedAdministrationFormProps> = ({
   initialData,
 }) => {
   const { t } = useTranslation();
-  const [occupancyStatus, setOccupancyStatus] = useState(
-    capitalize(initialData.status)
-  );
-  const [selectedBedType] = useState(initialData.bedType.name);
+  const [occupancyStatus, setOccupancyStatus] = useState(capitalize(initialData.status));
+  const [selectedBedType] = useState(initialData.bedType?.name ?? '');
   const [showErrorNotification, setShowErrorNotification] = useState(false);
-  const [formStateError, setFormStateError] = useState("");
+  const [formStateError, setFormStateError] = useState('');
 
   const filterLocationNames = (location) => {
-    return (
-      location.item.display
-        ?.toLowerCase()
-        .includes(location?.inputValue?.toLowerCase()) ?? []
-    );
+    return location.item.display?.toLowerCase().includes(location?.inputValue?.toLowerCase()) ?? [];
   };
 
   const {
@@ -99,16 +89,16 @@ const BedAdministrationForm: React.FC<BedAdministrationFormProps> = ({
     control,
     formState: { isDirty },
   } = useForm<BedAdministrationData>({
-    mode: "all",
+    mode: 'all',
     resolver: zodResolver(BedAdministrationSchema),
     defaultValues: {
-      bedId: initialData.bedNumber || "",
-      description: initialData.description || "",
-      bedRow: initialData.row.toString() || "0",
-      bedColumn: initialData.column.toString() || "0",
-      location: initialData.location || {},
-      occupancyStatus: capitalize(initialData.status) || occupancyStatus,
-      bedType: initialData.bedType.name || "",
+      bedId: initialData.bedNumber ?? '',
+      description: initialData.bedType?.description ?? '',
+      bedRow: initialData.row.toString() ?? '0',
+      bedColumn: initialData.column.toString() ?? '0',
+      location: initialData.location ?? {},
+      occupancyStatus: capitalize(initialData.status) ?? occupancyStatus,
+      bedType: initialData.bedType?.name ?? '',
     },
   });
 
@@ -126,16 +116,12 @@ const BedAdministrationForm: React.FC<BedAdministrationFormProps> = ({
   };
 
   return (
-    <ComposedModal
-      open={showModal}
-      onClose={() => onModalChange(false)}
-      preventCloseOnClickOutside
-    >
+    <ComposedModal open={showModal} onClose={() => onModalChange(false)} preventCloseOnClickOutside>
       <ModalHeader title={headerTitle} />
-      <Form onSubmit={handleSubmit(onSubmit, onError)}>
-        <ModalBody hasScrollingContent>
+      <ModalBody hasScrollingContent>
+        <Form>
           <Stack gap={3}>
-            <FormGroup legendText={""}>
+            <FormGroup legendText={''}>
               <Controller
                 name="bedId"
                 control={control}
@@ -143,8 +129,8 @@ const BedAdministrationForm: React.FC<BedAdministrationFormProps> = ({
                   <>
                     <TextInput
                       id="bedId"
-                      labelText={t("bedId", "Bed number")}
-                      placeholder={t("bedIdPlaceholder", "e.g. BMW-201")}
+                      labelText={t('bedId', 'Bed number')}
+                      placeholder={t('bedIdPlaceholder', 'e.g. BMW-201')}
                       invalidText={fieldState.error?.message}
                       {...field}
                     />
@@ -163,12 +149,9 @@ const BedAdministrationForm: React.FC<BedAdministrationFormProps> = ({
                       rows={2}
                       id="description"
                       invalidText={fieldState?.error?.message}
-                      labelText={t("description", "Bed description")}
+                      labelText={t('description', 'Bed description')}
                       {...field}
-                      placeholder={t(
-                        "description",
-                        "Enter the bed description"
-                      )}
+                      placeholder={t('description', 'Enter the bed description')}
                     />
                   </>
                 )}
@@ -213,27 +196,21 @@ const BedAdministrationForm: React.FC<BedAdministrationFormProps> = ({
               <Controller
                 name="location"
                 control={control}
-                render={({
-                  fieldState,
-                  field: { onChange, onBlur, value, ref },
-                }) => (
+                render={({ fieldState, field: { onChange, onBlur, value, ref } }) => (
                   <ComboBox
-                    aria-label={t("location", "Location")}
+                    aria-label={t('location', 'Location')}
                     shouldFilterItem={filterLocationNames}
                     id="location"
-                    label={t("location", "Location")}
+                    label={t('location', 'Location')}
                     invalidText={fieldState?.error?.message}
                     items={allLocations}
                     onBlur={onBlur}
                     ref={ref}
                     selectedItem={value}
                     onChange={({ selectedItem }) => onChange(selectedItem)}
-                    itemToString={(location) => location?.display ?? ""}
-                    placeholder={t(
-                      "selectBedLocation",
-                      "Select a bed location"
-                    )}
-                    titleText={t("bedLocation", "Location")}
+                    itemToString={(location) => location?.display ?? ''}
+                    placeholder={t('selectBedLocation', 'Select a bed location')}
+                    titleText={t('bedLocation', 'Location')}
                   />
                 )}
               />
@@ -246,21 +223,17 @@ const BedAdministrationForm: React.FC<BedAdministrationFormProps> = ({
                 render={({ field, fieldState }) => (
                   <Select
                     id="occupancyStatus"
-                    labelText={t("occupancyStatus", "Occupied Status")}
+                    labelText={t('occupancyStatus', 'Occupied Status')}
                     invalidText={fieldState.error?.message}
                     defaultValue={occupancyStatus}
                     onChange={(event) => setOccupancyStatus(event.target.value)}
                     value={occupancyStatus}
-                    {...field}
-                  >
-                    <SelectItem
-                      text={t("chooseOccupiedStatus", "Choose occupied status")}
-                      value=""
-                    />
+                    {...field}>
+                    <SelectItem text={t('chooseOccupiedStatus', 'Choose occupied status')} value="" />
                     {occupancyStatuses.map((occupancyStatus, index) => (
                       <SelectItem
-                        text={t("occupancyStatus", `${occupancyStatus}`)}
-                        value={t("occupancyStatus", `${occupancyStatus}`)}
+                        text={t('occupancyStatus', `${occupancyStatus}`)}
+                        value={t('occupancyStatus', `${occupancyStatus}`)}
                         key={`occupancyStatus-${index}`}
                       />
                     ))}
@@ -276,20 +249,13 @@ const BedAdministrationForm: React.FC<BedAdministrationFormProps> = ({
                 render={({ field }) => (
                   <Select
                     id="bedType"
-                    labelText={t("bedType", "Bed type")}
-                    invalidText={t("required", "Required")}
+                    labelText={t('bedType', 'Bed type')}
+                    invalidText={t('required', 'Required')}
                     defaultValue={selectedBedType}
-                    {...field}
-                  >
-                    <SelectItem
-                      text={t("chooseBedtype", "Choose a bed type")}
-                    />
+                    {...field}>
+                    <SelectItem text={t('chooseBedtype', 'Choose a bed type')} />
                     {availableBedTypes.map((bedType, index) => (
-                      <SelectItem
-                        text={bedType.name}
-                        value={bedType.name}
-                        key={`bedType-${index}`}
-                      >
+                      <SelectItem text={bedType.name} value={bedType.name} key={`bedType-${index}`}>
                         {bedType.name}
                       </SelectItem>
                     ))}
@@ -300,25 +266,25 @@ const BedAdministrationForm: React.FC<BedAdministrationFormProps> = ({
             {showErrorNotification && (
               <InlineNotification
                 lowContrast
-                title={t("error", "Error")}
-                style={{ minWidth: "100%", margin: "0rem", padding: "0rem" }}
+                title={t('error', 'Error')}
+                style={{ minWidth: '100%', margin: '0', padding: '0' }}
                 role="alert"
                 kind="error"
-                subtitle={t("pleaseFillField", formStateError) + "."}
+                subtitle={t('pleaseFillField', formStateError) + '.'}
                 onClose={() => setShowErrorNotification(false)}
               />
             )}
           </Stack>
-        </ModalBody>
-        <ModalFooter>
-          <Button onClick={() => onModalChange(false)} kind="secondary">
-            {t("cancel", "Cancel")}
-          </Button>
-          <Button disabled={!isDirty} type="submit">
-            <span>{t("save", "Save")}</span>
-          </Button>
-        </ModalFooter>
-      </Form>
+        </Form>
+      </ModalBody>
+      <ModalFooter>
+        <Button onClick={() => onModalChange(false)} kind="secondary">
+          {getCoreTranslation('cancel', 'Cancel')}
+        </Button>
+        <Button disabled={!isDirty} onClick={handleSubmit(onSubmit, onError)}>
+          <span>{t('save', 'Save')}</span>
+        </Button>
+      </ModalFooter>
     </ComposedModal>
   );
 };