@cc-openmrs/cc-esm-active-prescriptions 1.0.64 → 1.0.67

package/package.json

@@ -1,86 +1,85 @@
 {
   "name": "@cc-openmrs/cc-esm-active-prescriptions",
-  "version": "1.0.64",
+  "version": "1.0.67",
   "license": "MPL-2.0",
-  "description": "An OpenMRS seed application for building microfrontends",
-  "browser": "dist/openmrs-esm-template-app.js",
+  "description": "An OpenMRS frontend module for managing patient lists in the Patient Chart",
+  "browser": "dist/openmrs-esm-patient-lists-app.js",
   "main": "src/index.ts",
   "source": true,
   "scripts": {
     "start": "openmrs develop",
     "serve": "webpack serve --mode=development",
-    "build": "webpack --mode production",
+    "build": "webpack --mode production --color",
     "analyze": "webpack --mode=production --env analyze=true",
-    "lint": "eslint src --ext js,jsx,ts,tsx --max-warnings 0",
-    "prettier": "prettier --write \"src/**/*.{ts,tsx}\" --list-different",
+    "lint": "cross-env eslint src --ext js,jsx,ts,tsx --fix --max-warnings=0",
+    "prettier": "prettier --write \"src/**/*.{ts,tsx}\"",
     "typescript": "tsc",
-    "test": "jest --config jest.config.js --passWithNoTests",
-    "verify": "turbo lint typescript coverage",
+    "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 ./tools/i18next-parser.config.js",
-    "test-e2e": "playwright test"
+    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/**/*.modal.tsx' 'src/**/*.extension.tsx' 'src/**/*.workspace.tsx' 'src/**/*.hook.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/openmrs/openmrs-esm-template-app.git"
-  },
-  "homepage": "https://github.com/openmrs/openmrs-esm-template-app#readme",
+  "homepage": "https://github.com/openmrs/openmrs-esm-patient-chart#readme",
   "publishConfig": {
     "access": "public"
   },
-  "bugs": {
-    "url": "https://github.com/openmrs/openmrs-esm-template-app/issues"
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/openmrs/openmrs-esm-patient-chart.git"
   },
-  "openmrs": {
-    "frontendModuleName": "@cc-openmrs/cc-esm-active-prescriptions",
-    "routes": "src/routes.json"
+  "bugs": {
+    "url": "https://github.com/openmrs/openmrs-esm-patient-chart/issues"
   },
   "dependencies": {
-    "@carbon/react": "^1.83.0",
-    "lodash-es": "^4.17.21"
+    "@carbon/react": "^1.83.0"
   },
   "peerDependencies": {
     "@openmrs/esm-framework": "9.x",
+    "@openmrs/esm-patient-common-lib": "12.x",
     "dayjs": "1.x",
     "react": "18.x",
     "react-i18next": "16.x",
     "react-router-dom": "6.x",
-    "rxjs": "6.x"
+    "rxjs": "6.x",
+    "swr": "2.x"
   },
   "devDependencies": {
     "@openmrs/esm-framework": "next",
-    "@openmrs/esm-styleguide": "next",
-    "@playwright/test": "^1.52.0",
-    "@swc/cli": "^0.3.12",
-    "@swc/core": "^1.3.68",
-    "@swc/jest": "^0.2.36",
+    "@playwright/test": "^1.51.1",
+    "@swc/cli": "^0.1.62",
+    "@swc/core": "^1.3.89",
+    "@swc/jest": "^0.2.29",
     "@testing-library/dom": "^10.1.0",
     "@testing-library/jest-dom": "^6.4.5",
-    "@testing-library/react": "^15.0.6",
+    "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^14.5.2",
-    "@types/jest": "^29.5.12",
-    "@types/react": "^18.3.21",
+    "@types/fhir": "^0.0.31",
+    "@types/jest": "^29.5.11",
+    "@types/lodash-es": "^4.17.9",
+    "@types/react": "^18.3.2",
     "@types/react-dom": "^18.3.0",
-    "@types/react-router": "^5.1.20",
-    "@types/react-router-dom": "^5.3.3",
-    "@types/webpack-env": "^1.18.1",
-    "@typescript-eslint/eslint-plugin": "^7.8.0",
-    "@typescript-eslint/parser": "^7.8.0",
-    "dayjs": "^1.11.13",
-    "dotenv": "^16.0.3",
-    "eslint": "^8.50.0",
-    "eslint-config-prettier": "^8.8.0",
+    "@types/webpack-env": "^1.18.8",
+    "@typescript-eslint/eslint-plugin": "^8.0.0",
+    "@typescript-eslint/parser": "^8.0.0",
+    "babel-preset-minify": "^0.5.2",
+    "concurrently": "^8.2.1",
+    "cross-env": "^7.0.3",
+    "css-loader": "^6.6.0",
+    "d3-selection": "^3.0.0",
+    "dayjs": "^1.11.10",
+    "dotenv": "^16.3.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jest-dom": "^5.4.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-playwright": "^0.16.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-testing-library": "^6.2.2",
     "husky": "^8.0.3",
     "i18next": "^25.0.0",
     "i18next-parser": "^9.3.0",
@@ -88,20 +87,19 @@
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "lint-staged": "^15.2.2",
+    "lint-staged": "^14.0.1",
+    "lodash": "^4.17.23",
     "openmrs": "next",
-    "prettier": "^3.3.3",
+    "prettier": "^3.0.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-i18next": "^16.0.0",
-    "react-router-dom": "^6.14.1",
+    "react-router-dom": "^6.16.0",
     "rxjs": "^6.6.7",
+    "sass": "^1.54.3",
+    "swc-loader": "^0.2.3",
+    "swr": "2.2.5",
     "turbo": "^2.5.2",
     "typescript": "^5.0.0"
-  },
-  "lint-staged": {
-    "packages/**/src/**/*.{ts,tsx}": "eslint --cache --fix --max-warnings 0",
-    "*.{css,scss,ts,tsx}": "prettier --write --list-different"
-  },
-  "packageManager": "yarn@4.10.3"
+  }
 }

package/src/declarations.d.ts

@@ -1,5 +1,4 @@
-declare module '*.css';
-declare module '*.scss';
-declare module '*.png';
-
-declare type SideNavProps = object;
+declare module '*.scss' {
+	const content: { [className: string]: string };
+	export default content;
+}

package/src/prescriptions-actions/prescriptions-action-button.component.tsx

@@ -1,22 +1,18 @@
-import React, { useCallback } from 'react';
-import { launchWorkspace } from '@openmrs/esm-framework';
-import { Events } from '@carbon/react/icons';
-import { ActionMenuButton } from '@openmrs/esm-styleguide';
+import React, { type ComponentProps } from 'react';
+import { ActionMenuButton2, EventsIcon } from '@openmrs/esm-framework';
 import { useTranslation } from 'react-i18next';
 
-const handleClick = () => launchWorkspace('active-prescriptions');
-
 const PrescriptionsActionButton: React.FC = () => {
   const { t } = useTranslation();
   const label = t('activePrescriptions', 'Active prescriptions');
 
   return (
-    <ActionMenuButton
-      getIcon={(props) => <Events {...props} />}
+    <ActionMenuButton2
+      icon={(props: ComponentProps<typeof EventsIcon>) => <EventsIcon {...props} />}
       label={label}
-      iconDescription={label}
-      handler={handleClick}
-      type="active-prescriptions"
+      workspaceToLaunch={{
+        workspaceName: 'active-prescriptions-workspace',
+      }}
     />
   );
 };

package/src/root.component.tsx

@@ -11,7 +11,7 @@
 import React, { useMemo, useState } from 'react';
 import { PrescriptionService, PrescriptionPayload } from './prescriptions.service';
 import useSWR from 'swr';
-import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { openmrsFetch, restBaseUrl, Workspace2 } from '@openmrs/esm-framework';
 import {
   Checkbox,
   ComboBox,
@@ -240,127 +240,127 @@ const Root: React.FC<RootProps> = ({ patientUuid, patient }) => {
   };
 
   return (
-    <div className={styles.workspace}>
-      <div className={styles.header}>
-        <h2>{t('activePrescriptionsWorkspaceTitle', 'Prescrições ativas')}</h2>
-        <p className={styles.subtitle}>
-          {t(
-            'activePrescriptionsHelper',
-            'Revise o contexto do paciente, escolha os detalhes da visita e adicione os medicamentos à prescrição.',
-          )}
-        </p>
-      </div>
+    <Workspace2 title={t('activePrescriptionsWorkspaceTitle', 'Prescrições ativas')} hasUnsavedChanges={false}>
+      <div className={styles.workspace}>
+        <div className={styles.header}>
+          <h2>{t('activePrescriptionsWorkspaceTitle', 'Prescrições ativas')}</h2>
+          <p className={styles.subtitle}>
+            {t(
+              'activePrescriptionsHelper',
+              'Revise o contexto do paciente, escolha os detalhes da visita e adicione os medicamentos à prescrição.',
+            )}
+          </p>
+        </div>
 
-      <section className={styles.section}>
-        <p className={styles.fieldLabel}>{t('visitTimingLabel', 'A visita é')}</p>
-        <Tabs
-          selectedIndex={activeTab === 'new' ? 0 : 1}
-          onChange={({ selectedIndex }) => setActiveTab(selectedIndex === 0 ? 'new' : 'past')}
-        >
-          <TabList aria-label={t('visitTimingLabel', 'A visita é')}>
-            <Tab>{t('visitTimingNew', 'Nova')}</Tab>
-            <Tab>{t('visitTimingPast', 'No passado')}</Tab>
-          </TabList>
-          <TabPanels>
-            <TabPanel className={styles.tabContent}>
-              <div className={styles.fieldGroup}>
-                <ComboBox
-                  id="visit-location"
-                  items={locationItems}
-                  itemToString={(item) => item?.display ?? ''}
-                  selectedItem={selectedLocation}
-                  onChange={({ selectedItem }) => setSelectedLocation((selectedItem as Location) ?? null)}
-                  placeholder={t('visitLocationPlaceholder', 'Selecione o local')}
-                  titleText={t('visitLocationHeading', 'Local da visita')}
-                  helperText={t('visitLocationHelper', 'Selecione onde a visita ocorrerá.')}
-                />
-              </div>
+        <section className={styles.section}>
+          <p className={styles.fieldLabel}>{t('visitTimingLabel', 'A visita é')}</p>
+          <Tabs
+            selectedIndex={activeTab === 'new' ? 0 : 1}
+            onChange={({ selectedIndex }) => setActiveTab(selectedIndex === 0 ? 'new' : 'past')}
+          >
+            <TabList aria-label={t('visitTimingLabel', 'A visita é')}>
+              <Tab>{t('visitTimingNew', 'Nova')}</Tab>
+              <Tab>{t('visitTimingPast', 'No passado')}</Tab>
+            </TabList>
+            <TabPanels>
+              <TabPanel className={styles.tabContent}>
+                <div className={styles.fieldGroup}>
+                  <ComboBox
+                    id="visit-location"
+                    items={locationItems}
+                    itemToString={(item) => item?.display ?? ''}
+                    selectedItem={selectedLocation}
+                    onChange={({ selectedItem }) => setSelectedLocation((selectedItem as Location) ?? null)}
+                    placeholder={t('visitLocationPlaceholder', 'Selecione o local')}
+                    titleText={t('visitLocationHeading', 'Local da visita')}
+                    helperText={t('visitLocationHelper', 'Selecione onde a visita ocorrerá.')}
+                  />
+                </div>
 
-              <div className={styles.fieldGroup}>
-                <TextInput
-                  id="insurance-policy"
-                  labelText={t('insurancePolicyNumberLabel', 'Número da apólice (opcional)')}
-                  placeholder={t('insurancePolicyNumberPlaceholder', 'Digite o número da apólice')}
-                  value={policyNumber}
-                  onChange={(event) => setPolicyNumber(event.target.value)}
-                />
-              </div>
-              <div className={styles.fieldGroup}>
-                <Checkbox
-                  id="sign-prescription-checkbox"
-                  labelText={t('signPrescriptionLabel', 'Assinar digitalmente a prescrição')}
-                  checked={digitallySigned}
-                  onChange={() => setDigitallySigned((prev) => !prev)}
-                />
-                <Checkbox
-                  id="print-prescription-checkbox"
-                  labelText={t('printPrescriptionLabel', 'Imprimir a prescrição')}
-                  checked={printRequested}
-                  onChange={() => setPrintRequested((prev) => !prev)}
-                />
-              </div>
+                <div className={styles.fieldGroup}>
+                  <TextInput
+                    id="insurance-policy"
+                    labelText={t('insurancePolicyNumberLabel', 'Número da apólice (opcional)')}
+                    placeholder={t('insurancePolicyNumberPlaceholder', 'Digite o número da apólice')}
+                    value={policyNumber}
+                    onChange={(event) => setPolicyNumber(event.target.value)}
+                  />
+                </div>
+                <div className={styles.fieldGroup}>
+                  <Checkbox
+                    id="sign-prescription-checkbox"
+                    labelText={t('signPrescriptionLabel', 'Assinar digitalmente a prescrição')}
+                    checked={digitallySigned}
+                    onChange={() => setDigitallySigned((prev) => !prev)}
+                  />
+                  <Checkbox
+                    id="print-prescription-checkbox"
+                    labelText={t('printPrescriptionLabel', 'Imprimir a prescrição')}
+                    checked={printRequested}
+                    onChange={() => setPrintRequested((prev) => !prev)}
+                  />
+                </div>
 
-              {/* Lista de medicamentos adicionados */}
-              <div className={styles.fieldGroup}>
-                <h3>{t('medicationsList', 'Medicamentos adicionados')}</h3>
-                {medications.length === 0 ? (
-                  <p>{t('noMedicationsAdded', 'Nenhum medicamento adicionado ainda.')}</p>
-                ) : (
-                  <ul className={styles.medicationsList}>
-                    {medications.map((med, idx) => (
-                      <li key={idx} className={styles.medicationItem}>
-                        <span>
-                          <b>{med.drugName}</b> - {med.dosage} {med.unit} - {med.frequency}
-                        </span>
-                        <button type="button" onClick={() => openEditMedication(idx)}>
-                          {t('edit', 'Editar')}
-                        </button>
-                        <button type="button" onClick={() => handleRemoveMedication(idx)}>
-                          {t('remove', 'Remover')}
-                        </button>
-                      </li>
-                    ))}
-                  </ul>
-                )}
-                <button type="button" onClick={openAddMedication} className={styles.addMedicationBtn}>
-                  {t('addMedication', '+ Adicionar medicamento')}
-                </button>
-              </div>
+                <div className={styles.fieldGroup}>
+                  <h3>{t('medicationsList', 'Medicamentos adicionados')}</h3>
+                  {medications.length === 0 ? (
+                    <p>{t('noMedicationsAdded', 'Nenhum medicamento adicionado ainda.')}</p>
+                  ) : (
+                    <ul className={styles.medicationsList}>
+                      {medications.map((med, idx) => (
+                        <li key={idx} className={styles.medicationItem}>
+                          <span>
+                            <b>{med.drugName}</b> - {med.dosage} {med.unit} - {med.frequency}
+                          </span>
+                          <button type="button" onClick={() => openEditMedication(idx)}>
+                            {t('edit', 'Editar')}
+                          </button>
+                          <button type="button" onClick={() => handleRemoveMedication(idx)}>
+                            {t('remove', 'Remover')}
+                          </button>
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+                  <button type="button" onClick={openAddMedication} className={styles.addMedicationBtn}>
+                    {t('addMedication', '+ Adicionar medicamento')}
+                  </button>
+                </div>
 
-              {/* Tela sobreposta para adicionar/editar medicamento */}
-              {showAddMedication && (
-                <div className={styles.overlayForm}>
-                  <div className={styles.overlayContent}>
-                    <h3>
-                      {editIndex === null
-                        ? t('addMedication', 'Adicionar medicamento')
-                        : t('editMedication', 'Editar medicamento')}
-                    </h3>
-                    <MedicationForm
-                      initialData={editIndex !== null ? medications[editIndex] : undefined}
-                      onSubmit={editIndex === null ? handleAddMedication : handleEditMedication}
-                      onCancel={() => {
-                        setShowAddMedication(false);
-                        setEditIndex(null);
-                      }}
-                      t={t}
-                    />
+                {showAddMedication && (
+                  <div className={styles.overlayForm}>
+                    <div className={styles.overlayContent}>
+                      <h3>
+                        {editIndex === null
+                          ? t('addMedication', 'Adicionar medicamento')
+                          : t('editMedication', 'Editar medicamento')}
+                      </h3>
+                      <MedicationForm
+                        initialData={editIndex !== null ? medications[editIndex] : undefined}
+                        onSubmit={editIndex === null ? handleAddMedication : handleEditMedication}
+                        onCancel={() => {
+                          setShowAddMedication(false);
+                          setEditIndex(null);
+                        }}
+                        t={t}
+                      />
+                    </div>
                   </div>
-                </div>
-              )}
-            </TabPanel>
-            <TabPanel className={styles.tabContent}>
-              <InlineNotification
-                lowContrast
-                kind="info"
-                title={t('inPastTabPlaceholderTitle', 'Receitas históricas em breve')}
-                subtitle={t('inPastTabPlaceholderSubtitle', 'Volte para Nova para gerenciar medicamentos atuais.')}
-              />
-            </TabPanel>
-          </TabPanels>
-        </Tabs>
-      </section>
-    </div>
+                )}
+              </TabPanel>
+              <TabPanel className={styles.tabContent}>
+                <InlineNotification
+                  lowContrast
+                  kind="info"
+                  title={t('inPastTabPlaceholderTitle', 'Receitas históricas em breve')}
+                  subtitle={t('inPastTabPlaceholderSubtitle', 'Volte para Nova para gerenciar medicamentos atuais.')}
+                />
+              </TabPanel>
+            </TabPanels>
+          </Tabs>
+        </section>
+      </div>
+    </Workspace2>
   );
 };
 

package/src/routes.json

@@ -19,21 +19,22 @@
       "name": "Brand box",
       "component": "blueBox",
       "slot": "Boxes"
-    },
-    {
-      "name": "prescriptions-action-menu",
-      "component": "prescriptionsActionButton",
-      "slot": "action-menu-patient-chart-items-slot"
     }
   ],
-  "workspaces": [
+  "workspaces2": [
     {
-      "name": "active-prescriptions",
-      "title": "activePrescriptionsWorkspaceTitle",
+      "name": "active-prescriptions-workspace",
       "component": "root",
-      "type": "active-prescriptions",
-      "canHide": false,
-      "width": "wider"
+      "window": "active-prescriptions-workspace"
+    }
+  ],
+  "workspaceWindows2": [
+    {
+      "name": "active-prescriptions-workspace",
+      "group": "patient-chart",
+      "icon": "prescriptionsActionButton",
+      "width": "wider",
+      "order": 4
     }
   ]
 }