From 7d42d4835906ea80bc364eb00ecf2d6806fa6c5e Mon Sep 17 00:00:00 2001 From: elishabantana Date: Fri, 29 Nov 2024 12:17:16 +0300 Subject: [PATCH 1/4] Bumped carbon version in dispensing --- package.json | 2 +- src/components/medication-card.scss | 6 +- .../medication-dispense-review.scss | 16 +- src/components/medication-event.scss | 6 +- src/components/patient-details.scss | 8 +- src/dispensing-tiles/dispensing-tile.scss | 14 +- src/dispensing-tiles/dispensing-tiles.scss | 10 +- src/forms/forms.scss | 6 +- src/forms/overlay/overlay.scss | 60 ++- src/history/history-and-comments.scss | 6 +- src/pharmacy-header/pharmacy-header.scss | 8 +- src/prescriptions/prescription-details.scss | 6 +- src/prescriptions/prescription-expanded.scss | 8 +- src/prescriptions/prescriptions.scss | 62 ++- src/root.scss | 6 +- yarn.lock | 415 ++++++++++++------ 16 files changed, 450 insertions(+), 189 deletions(-) diff --git a/package.json b/package.json index 3e5b697..6c7848e 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,7 @@ "url": "https://github.com/openmrs/openmrs-esm-dispensing/issues" }, "dependencies": { - "@carbon/react": "1.12.0", + "@carbon/react": "1.71.0", "classnames": "^2.5.1", "lodash-es": "^4.17.21" }, diff --git a/src/components/medication-card.scss b/src/components/medication-card.scss index 632af2d..ad4739b 100644 --- a/src/components/medication-card.scss +++ b/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'; +@use '@carbon/layout'; +@use '@carbon/type'; +@use '@openmrs/esm-styleguide/src/vars' as *; .medicationTile { display: flex; diff --git a/src/components/medication-dispense-review.scss b/src/components/medication-dispense-review.scss index 83243e8..af33502 100644 --- a/src/components/medication-dispense-review.scss +++ b/src/components/medication-dispense-review.scss @@ -1,6 +1,6 @@ -@use '@carbon/styles/scss/spacing'; -@use '@carbon/styles/scss/type'; -@import '~@openmrs/esm-styleguide/src/vars'; +@use '@carbon/layout'; +@use '@carbon/type'; +@use '@openmrs/esm-styleguide/src/vars' as *; .medicationDispenseReviewContainer { display: flex; @@ -17,7 +17,7 @@ display: flex; flex-direction: row; flex: 1; - gap: spacing.$spacing-05; + gap: layout.$spacing-05; } .substitutionReason { @@ -43,8 +43,8 @@ .formGroup { display: flex; - margin-bottom: spacing.$spacing-02; - padding: spacing.$spacing-05; + margin-bottom: layout.$spacing-02; + padding: layout.$spacing-05; } :global(.omrs-breakpoint-lt-desktop) .formGroup > span { @@ -83,13 +83,13 @@ } :global(.omrs-breakpoint-lt-desktop) .buttonGroup { - padding: spacing.$spacing-05 spacing.$spacing-06; + padding: layout.$spacing-05 layout.$spacing-06; background-color: $ui-02; } .buttonGroup button { max-width: none; width: 50%; - height: spacing.$spacing-10; + height: layout.$spacing-10; align-items: flex-start; } diff --git a/src/components/medication-event.scss b/src/components/medication-event.scss index 96edb38..e18af9b 100644 --- a/src/components/medication-event.scss +++ b/src/components/medication-event.scss @@ -1,6 +1,6 @@ -@use '@carbon/styles/scss/spacing'; -@use '@carbon/styles/scss/type'; -@import '~@openmrs/esm-styleguide/src/vars'; +@use '@carbon/layout'; +@use '@carbon/type'; +@use '@openmrs/esm-styleguide/src/vars' as *; .medicationName { font-size: 15px !important; diff --git a/src/components/patient-details.scss b/src/components/patient-details.scss index 7f36846..533f053 100644 --- a/src/components/patient-details.scss +++ b/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'; +@use '@carbon/layout'; +@use '@carbon/type'; +@use '@openmrs/esm-styleguide/src/vars' as *; .patientDetailsContainer > div { margin-bottom: 1rem; @@ -57,7 +57,7 @@ } .patientNameRow { - margin-top: spacing.$spacing-05; + margin-top: layout.$spacing-05; } .flexRow { diff --git a/src/dispensing-tiles/dispensing-tile.scss b/src/dispensing-tiles/dispensing-tile.scss index f7d762c..48aa6aa 100644 --- a/src/dispensing-tiles/dispensing-tile.scss +++ b/src/dispensing-tiles/dispensing-tile.scss @@ -1,20 +1,20 @@ -@use '@carbon/styles/scss/spacing'; -@use '@carbon/styles/scss/type'; -@import '~@openmrs/esm-styleguide/src/vars'; +@use '@carbon/layout'; +@use '@carbon/type'; +@use '@openmrs/esm-styleguide/src/vars' as *; .tileContainer { border: 0.0625rem solid $ui-03; flex-grow: 1; height: 7.875rem; - padding: 0 spacing.$spacing-05; - margin: spacing.$spacing-03 spacing.$spacing-03; + padding: 0 layout.$spacing-05; + margin: layout.$spacing-03 layout.$spacing-03; } .tileHeader { display: flex; justify-content: space-between; align-items: center; - margin-bottom: spacing.$spacing-03; + margin-bottom: layout.$spacing-03; } .headerLabel { @@ -35,7 +35,7 @@ .headerLabelContainer { display: flex; align-items: center; - height: spacing.$spacing-07; + height: layout.$spacing-07; } .arrowIcon { diff --git a/src/dispensing-tiles/dispensing-tiles.scss b/src/dispensing-tiles/dispensing-tiles.scss index 3d83eb9..16d4985 100644 --- a/src/dispensing-tiles/dispensing-tiles.scss +++ b/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'; +@use '@carbon/layout'; +@use '@carbon/type'; +@use '@openmrs/esm-styleguide/src/vars' as *; .cardContainer { background-color: $ui-02; display: flex; justify-content: space-between; - padding: 0 spacing.$spacing-05 spacing.$spacing-10 spacing.$spacing-03; + padding: 0 layout.$spacing-05 layout.$spacing-10 layout.$spacing-03; flex-flow: row wrap; - margin-top: -spacing.$spacing-03; + margin-top: -layout.$spacing-03; } diff --git a/src/forms/forms.scss b/src/forms/forms.scss index 5879c2e..6bc8134 100644 --- a/src/forms/forms.scss +++ b/src/forms/forms.scss @@ -1,6 +1,6 @@ -@use '@carbon/styles/scss/spacing'; -@use '@carbon/styles/scss/type'; -@import '~@openmrs/esm-styleguide/src/vars'; +@use '@carbon/layout'; +@use '@carbon/type'; +@use '@openmrs/esm-styleguide/src/vars' as *; // TO DO Move this styles to style - guide // https://github.com/openmrs/openmrs-esm-core/blob/master/packages/framework/esm-styleguide/src/_vars.scss diff --git a/src/forms/overlay/overlay.scss b/src/forms/overlay/overlay.scss index 9eca21e..9a50328 100644 --- a/src/forms/overlay/overlay.scss +++ b/src/forms/overlay/overlay.scss @@ -1,11 +1,57 @@ -@use '@carbon/styles/scss/spacing'; -@use '@carbon/styles/scss/type'; -@import '~@openmrs/esm-styleguide/src/vars'; -@import '../../root.scss'; +@use '@carbon/layout'; +@use '@carbon/type'; +@use '@openmrs/esm-styleguide/src/vars' as *; + +.productiveHeading01 { + @include type.type-style('heading-01'); +} + +.productiveHeading02 { + @include type.type-style('heading-02'); +} + +.productiveHeading03 { + @include type.type-style('heading-03'); +} + +.productiveHeading04 { + @include type.type-style('heading-04'); +} + +.bodyLong01 { + @include type.type-style('body-01'); +} + +.bodyShort01 { + @include type.type-style('body-compact-01'); +} + +.bodyShort02 { + @include type.type-style('body-compact-02'); +} + +.text02 { + color: $text-02; +} + +.label01 { + @include type.type-style('label-01'); +} + +.modal { + position: fixed; + width: 100vw; + height: 100vh; + display: grid; + background-color: rgba(0, 0, 0, 0.5); + z-index: 9000; + justify-items: center; + align-items: center; +} .desktopOverlay { position: fixed; - top: spacing.$spacing-09; + top: layout.$spacing-09; width: 37rem; right: 0; bottom: 0; @@ -37,7 +83,7 @@ } & > div { - margin-top: spacing.$spacing-09; + margin-top: layout.$spacing-09; } } @@ -66,7 +112,7 @@ .headerContent { @include type.type-style('heading-compact-02'); - padding: 0 spacing.$spacing-05; + padding: 0 layout.$spacing-05; color: $ui-05; } diff --git a/src/history/history-and-comments.scss b/src/history/history-and-comments.scss index 6b92e7e..5cbbabb 100644 --- a/src/history/history-and-comments.scss +++ b/src/history/history-and-comments.scss @@ -1,6 +1,6 @@ -@use '@carbon/styles/scss/spacing'; -@use '@carbon/styles/scss/type'; -@import '~@openmrs/esm-styleguide/src/vars'; +@use '@carbon/layout'; +@use '@carbon/type'; +@use '@openmrs/esm-styleguide/src/vars' as *; .historyAndCommentsContainer { max-width: 80%; diff --git a/src/pharmacy-header/pharmacy-header.scss b/src/pharmacy-header/pharmacy-header.scss index 52236ed..5d655e2 100644 --- a/src/pharmacy-header/pharmacy-header.scss +++ b/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'; +@use '@carbon/layout'; +@use '@carbon/type'; +@use '@openmrs/esm-styleguide/src/vars' as *; .header { @include type.type-style('body-compact-02'); color: $text-02; - height: spacing.$spacing-12; + height: layout.$spacing-12; background-color: $ui-02; display: flex; justify-content: space-between; diff --git a/src/prescriptions/prescription-details.scss b/src/prescriptions/prescription-details.scss index db4048f..d921703 100644 --- a/src/prescriptions/prescription-details.scss +++ b/src/prescriptions/prescription-details.scss @@ -1,6 +1,6 @@ -@use '@carbon/styles/scss/spacing'; -@use '@carbon/styles/scss/type/index'; -@import '~@openmrs/esm-styleguide/src/vars'; +@use '@carbon/layout'; +@use '@carbon/type/index'; +@use '@openmrs/esm-styleguide/src/vars' as *; .prescriptionTile { width: 100%; diff --git a/src/prescriptions/prescription-expanded.scss b/src/prescriptions/prescription-expanded.scss index 4005652..3d877da 100644 --- a/src/prescriptions/prescription-expanded.scss +++ b/src/prescriptions/prescription-expanded.scss @@ -1,11 +1,11 @@ -@use '@carbon/styles/scss/spacing'; -@use '@carbon/styles/scss/type'; -@import '~@openmrs/esm-styleguide/src/vars'; +@use '@carbon/layout'; +@use '@carbon/type'; +@use '@openmrs/esm-styleguide/src/vars' as *; .expandedTabsParentContainer { display: flex; flex-direction: column; - margin-bottom: spacing.$spacing-05; + margin-bottom: layout.$spacing-05; } .expandedTabsContainer { diff --git a/src/prescriptions/prescriptions.scss b/src/prescriptions/prescriptions.scss index 336d3bf..20969da 100644 --- a/src/prescriptions/prescriptions.scss +++ b/src/prescriptions/prescriptions.scss @@ -1,7 +1,53 @@ -@use '@carbon/styles/scss/spacing'; -@use '@carbon/styles/scss/type'; -@import '~@openmrs/esm-styleguide/src/vars'; -@import '../root.scss'; +@use '@carbon/layout'; +@use '@carbon/type'; +@use '@openmrs/esm-styleguide/src/vars' as *; + +.productiveHeading01 { + @include type.type-style('heading-01'); +} + +.productiveHeading02 { + @include type.type-style('heading-02'); +} + +.productiveHeading03 { + @include type.type-style('heading-03'); +} + +.productiveHeading04 { + @include type.type-style('heading-04'); +} + +.bodyLong01 { + @include type.type-style('body-01'); +} + +.bodyShort01 { + @include type.type-style('body-compact-01'); +} + +.bodyShort02 { + @include type.type-style('body-compact-02'); +} + +.text02 { + color: $text-02; +} + +.label01 { + @include type.type-style('label-01'); +} + +.modal { + position: fixed; + width: 100vw; + height: 100vh; + display: grid; + background-color: rgba(0, 0, 0, 0.5); + z-index: 9000; + justify-items: center; + align-items: center; +} title { width: 6.938rem; @@ -36,7 +82,7 @@ title { .prescriptionTabs { grid-column: 'span 2'; - padding: 0 spacing.$spacing-05; + padding: 0 layout.$spacing-05; } .newListButton { @@ -66,7 +112,7 @@ title { grid-row: 3 / 4; grid-column: 1 / 2; height: 100%; - margin: 0 spacing.$spacing-05; + margin: 0 layout.$spacing-05; background-color: $ui-01; border: 0.5px solid #e0e0e0; @@ -148,7 +194,7 @@ title { display: flex; justify-content: center; align-items: center; - padding: spacing.$spacing-09; + padding: layout.$spacing-09; text-align: center; background-color: $ui-02; } @@ -161,7 +207,7 @@ title { .filterEmptyStateContent { @include type.type-style('heading-compact-02'); color: $text-02; - margin-bottom: spacing.$spacing-03; + margin-bottom: layout.$spacing-03; } .filterEmptyStateHelper { diff --git a/src/root.scss b/src/root.scss index bb71cf4..12404d8 100644 --- a/src/root.scss +++ b/src/root.scss @@ -1,6 +1,6 @@ -@use '@carbon/styles/scss/spacing'; -@use '@carbon/styles/scss/type'; -@import '~@openmrs/esm-styleguide/src/vars'; +@use '@carbon/layout'; +@use '@carbon/type'; +@use '@openmrs/esm-styleguide/src/vars' as *; .productiveHeading01 { @include type.type-style('heading-01'); diff --git a/yarn.lock b/yarn.lock index eda98ac..1173c0c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1264,7 +1264,7 @@ __metadata: languageName: node linkType: hard -"@babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.14.5, @babel/runtime@npm:^7.17.2, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.19.0, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.9.1, @babel/runtime@npm:^7.9.2": +"@babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.14.5, @babel/runtime@npm:^7.17.2, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.19.0, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.9.2": version: 7.23.2 resolution: "@babel/runtime@npm:7.23.2" dependencies: @@ -1282,6 +1282,15 @@ __metadata: languageName: node linkType: hard +"@babel/runtime@npm:^7.24.5, @babel/runtime@npm:^7.24.7": + version: 7.26.0 + resolution: "@babel/runtime@npm:7.26.0" + dependencies: + regenerator-runtime: "npm:^0.14.0" + checksum: 10/9f4ea1c1d566c497c052d505587554e782e021e6ccd302c2ad7ae8291c8e16e3f19d4a7726fb64469e057779ea2081c28b7dbefec6d813a22f08a35712c0f699 + languageName: node + linkType: hard + "@babel/template@npm:^7.18.10, @babel/template@npm:^7.18.6, @babel/template@npm:^7.3.3": version: 7.18.10 resolution: "@babel/template@npm:7.18.10" @@ -1374,6 +1383,15 @@ __metadata: languageName: node linkType: hard +"@carbon/colors@npm:^11.28.0": + version: 11.28.0 + resolution: "@carbon/colors@npm:11.28.0" + dependencies: + "@ibm/telemetry-js": "npm:^1.5.0" + checksum: 10/557419fe3a6bda7ba8e8936662ffd7599003dc05d849811ffd19fd0d52762f9f3100e5ae2193486b5bcaed46e1cd65c6683c4bee48a1a9bc80c330c7c6d691ca + languageName: node + linkType: hard + "@carbon/feature-flags@npm:^0.16.0": version: 0.16.0 resolution: "@carbon/feature-flags@npm:0.16.0" @@ -1390,19 +1408,12 @@ __metadata: languageName: node linkType: hard -"@carbon/feature-flags@npm:^0.8.0": - version: 0.8.0 - resolution: "@carbon/feature-flags@npm:0.8.0" - checksum: 10/fb015948021e145463dc1a65fff725659665c250e2bfe17c1d2187c905c9366d6e20eb50e59b8ee2080b50b2b0809a0ddd644cb5d08106d0f835422eb25b9e2b - languageName: node - linkType: hard - -"@carbon/grid@npm:^11.20.0": - version: 11.20.0 - resolution: "@carbon/grid@npm:11.20.0" +"@carbon/feature-flags@npm:^0.24.0": + version: 0.24.0 + resolution: "@carbon/feature-flags@npm:0.24.0" dependencies: - "@carbon/layout": "npm:^11.19.0" - checksum: 10/4969b7adc14122d9f1f62982af1b9b3b062ff3f9daea67c80e6e545af8928ead6acd7484c7aae16e6033af0c4f7b14cc102eaddbeec447f4c8f761d7ca94598a + "@ibm/telemetry-js": "npm:^1.5.0" + checksum: 10/abfe35e02d45208e64ead6e22c76c1f97c3099013bb0f0bbca46893c33f4571c9c6f0a2cacc6e8b5cd78aa90696beef89145b7bfc06fcab06c8ca3ff7cd11e02 languageName: node linkType: hard @@ -1416,10 +1427,13 @@ __metadata: languageName: node linkType: hard -"@carbon/icon-helpers@npm:^10.44.0": - version: 10.44.0 - resolution: "@carbon/icon-helpers@npm:10.44.0" - checksum: 10/39416c98510815f235ff9189161521e952a7800ac968b58c1c2764da1a1b730e13447b595a9a30bff34de74414eeea35c723422524cfb42f4a583e5c576aa90a +"@carbon/grid@npm:^11.29.0": + version: 11.29.0 + resolution: "@carbon/grid@npm:11.29.0" + dependencies: + "@carbon/layout": "npm:^11.28.0" + "@ibm/telemetry-js": "npm:^1.5.0" + checksum: 10/27dfde60051e5db01d7f0c7f76adfa7f9c4df3e9fdff9bf3ed3e999221b9110959db162aaa06ac054474af79c6c8a47dcfd0e1112f5171342938fb9c4c02657d languageName: node linkType: hard @@ -1432,6 +1446,15 @@ __metadata: languageName: node linkType: hard +"@carbon/icon-helpers@npm:^10.54.0": + version: 10.54.0 + resolution: "@carbon/icon-helpers@npm:10.54.0" + dependencies: + "@ibm/telemetry-js": "npm:^1.5.0" + checksum: 10/558988f429fd42e2a03fcf5fbf97cb3fee3a75a41cce9d93a1eefa1978498bd4445b8de622ede66e60e48dc46459f1af83dfe767ba5bd8eb6f436e8307618f27 + languageName: node + linkType: hard + "@carbon/icons-react@npm:^11.26.0": version: 11.45.0 resolution: "@carbon/icons-react@npm:11.45.0" @@ -1445,20 +1468,20 @@ __metadata: languageName: node linkType: hard -"@carbon/icons-react@npm:^11.7.0": - version: 11.28.0 - resolution: "@carbon/icons-react@npm:11.28.0" +"@carbon/icons-react@npm:^11.53.0": + version: 11.53.0 + resolution: "@carbon/icons-react@npm:11.53.0" dependencies: - "@carbon/icon-helpers": "npm:^10.44.0" - "@carbon/telemetry": "npm:0.1.0" + "@carbon/icon-helpers": "npm:^10.54.0" + "@ibm/telemetry-js": "npm:^1.5.0" prop-types: "npm:^15.7.2" peerDependencies: react: ">=16" - checksum: 10/f3bda33643982d18bf0f12049b8eaaf0cf53875958c5d72af1f966bd93556c864879cc2f89892c5580773403e47ceb6b4b8890350e60750b6a1b04a2761a19a2 + checksum: 10/32eafc698024b3228e8d42c151f22384fdd82206e7259023a92994b19d268c171a0ed8ff85a00718d2ef7bc1fbaccce584e3ea4c7a766ef1b464eccd8fb4537b languageName: node linkType: hard -"@carbon/layout@npm:^11.19.0, @carbon/layout@npm:^11.5.0": +"@carbon/layout@npm:^11.19.0": version: 11.19.0 resolution: "@carbon/layout@npm:11.19.0" checksum: 10/8ce12c5fa34dfb0d915e7379e2a6b2652a2cff35692b4799a2ddb50ec808b8d211599b5b7f2dc21afa9d8c0ec950bf8a2011556598aa86227c4ea16dac33eaa1 @@ -1474,10 +1497,12 @@ __metadata: languageName: node linkType: hard -"@carbon/motion@npm:^11.15.0": - version: 11.15.0 - resolution: "@carbon/motion@npm:11.15.0" - checksum: 10/b2b85ca949bb363b56594afae00a2a27a88586eb0970567ef7b9718e654440f7b42718aedf7fe1d6b21f64883367929eed4667cb8c07eace117c1720f6428f2b +"@carbon/layout@npm:^11.28.0": + version: 11.28.0 + resolution: "@carbon/layout@npm:11.28.0" + dependencies: + "@ibm/telemetry-js": "npm:^1.5.0" + checksum: 10/4ce8fbe84aa869121e0c83ae81c6beeeee87162165fd452fc51012715a3bf3ebb4e096dd4fb9a6f64ef45855d680e0953f13a79978cad855c0c64450a884e554 languageName: node linkType: hard @@ -1490,36 +1515,46 @@ __metadata: languageName: node linkType: hard -"@carbon/react@npm:1.12.0": - version: 1.12.0 - resolution: "@carbon/react@npm:1.12.0" +"@carbon/motion@npm:^11.24.0": + version: 11.24.0 + resolution: "@carbon/motion@npm:11.24.0" dependencies: - "@babel/runtime": "npm:^7.18.3" - "@carbon/feature-flags": "npm:^0.8.0" - "@carbon/icons-react": "npm:^11.7.0" - "@carbon/layout": "npm:^11.5.0" - "@carbon/styles": "npm:^1.12.0" - "@carbon/telemetry": "npm:0.1.0" - classnames: "npm:2.3.1" + "@ibm/telemetry-js": "npm:^1.5.0" + checksum: 10/ac358bf2a09ea7d77aae5dbe92abafaef817012abd0bb25a5ef33a77e7d88d32c33d796511f7e36a443ce32b7441eacea40869e2552042143fe3262cb8c4ea3d + languageName: node + linkType: hard + +"@carbon/react@npm:1.71.0": + version: 1.71.0 + resolution: "@carbon/react@npm:1.71.0" + dependencies: + "@babel/runtime": "npm:^7.24.7" + "@carbon/feature-flags": "npm:^0.24.0" + "@carbon/icons-react": "npm:^11.53.0" + "@carbon/layout": "npm:^11.28.0" + "@carbon/styles": "npm:^1.70.0" + "@floating-ui/react": "npm:^0.26.0" + "@ibm/telemetry-js": "npm:^1.5.0" + classnames: "npm:2.5.1" copy-to-clipboard: "npm:^3.3.1" - downshift: "npm:5.2.1" - flatpickr: "npm:4.6.9" + downshift: "npm:9.0.8" + flatpickr: "npm:4.6.13" invariant: "npm:^2.2.3" lodash.debounce: "npm:^4.0.8" lodash.findlast: "npm:^4.5.0" - lodash.isequal: "npm:^4.5.0" lodash.omit: "npm:^4.5.0" lodash.throttle: "npm:^4.1.1" prop-types: "npm:^15.7.2" - react-is: "npm:^17.0.2" + react-fast-compare: "npm:^3.2.2" + react-is: "npm:^18.2.0" + tabbable: "npm:^6.2.0" use-resize-observer: "npm:^6.0.0" - wicg-inert: "npm:^3.1.1" window-or-global: "npm:^1.0.1" peerDependencies: - react: ^16.8.6 || ^17.0.1 - react-dom: ^16.8.6 || ^17.0.1 + react: ^16.8.6 || ^17.0.1 || ^18.2.0 + react-dom: ^16.8.6 || ^17.0.1 || ^18.2.0 sass: ^1.33.0 - checksum: 10/f83113d30830b88ec99f52994e562661e7d870ad2f301a0dfc10871d1893351939f2e7af925cd761b0de976869cf981da181a2fef8439373e8f6729b715f7366 + checksum: 10/27bff8291c8a4d066c6839fa3521aef1461f1628ec09b47304f75286ed982128ec0f9a5f99ea7a99cfc508ce1941d5a11cc0797effa25b8749c49160cad9587c languageName: node linkType: hard @@ -1556,27 +1591,6 @@ __metadata: languageName: node linkType: hard -"@carbon/styles@npm:^1.12.0": - version: 1.40.0 - resolution: "@carbon/styles@npm:1.40.0" - dependencies: - "@carbon/colors": "npm:^11.19.0" - "@carbon/feature-flags": "npm:^0.16.0" - "@carbon/grid": "npm:^11.20.0" - "@carbon/layout": "npm:^11.19.0" - "@carbon/motion": "npm:^11.15.0" - "@carbon/themes": "npm:^11.25.0" - "@carbon/type": "npm:^11.24.0" - "@ibm/plex": "npm:6.0.0-next.6" - peerDependencies: - sass: ^1.33.0 - peerDependenciesMeta: - sass: - optional: true - checksum: 10/26f0a05674a755467d9d8ee6af6cdf06e3ff9d8fec8adf8ba6f0dd1fd750b4b7fe559f6b1aea77222861c258bbd4f223e77b26d5d677a45d679eed9f43453500 - languageName: node - linkType: hard - "@carbon/styles@npm:^1.37.0": version: 1.61.0 resolution: "@carbon/styles@npm:1.61.0" @@ -1599,6 +1613,36 @@ __metadata: languageName: node linkType: hard +"@carbon/styles@npm:^1.70.0": + version: 1.70.0 + resolution: "@carbon/styles@npm:1.70.0" + dependencies: + "@carbon/colors": "npm:^11.28.0" + "@carbon/feature-flags": "npm:^0.24.0" + "@carbon/grid": "npm:^11.29.0" + "@carbon/layout": "npm:^11.28.0" + "@carbon/motion": "npm:^11.24.0" + "@carbon/themes": "npm:^11.43.0" + "@carbon/type": "npm:^11.33.0" + "@ibm/plex": "npm:6.0.0-next.6" + "@ibm/plex-mono": "npm:0.0.3-alpha.0" + "@ibm/plex-sans": "npm:0.0.3-alpha.0" + "@ibm/plex-sans-arabic": "npm:0.0.3-alpha.0" + "@ibm/plex-sans-devanagari": "npm:0.0.3-alpha.0" + "@ibm/plex-sans-hebrew": "npm:0.0.3-alpha.0" + "@ibm/plex-sans-thai": "npm:0.0.3-alpha.0" + "@ibm/plex-sans-thai-looped": "npm:0.0.3-alpha.0" + "@ibm/plex-serif": "npm:0.0.3-alpha.0" + "@ibm/telemetry-js": "npm:^1.5.0" + peerDependencies: + sass: ^1.33.0 + peerDependenciesMeta: + sass: + optional: true + checksum: 10/6a6c7c6c8c226b95bcac86633db516bb7099a4bb203bf68cced7f259ceaf0e0ff0c205e620be02abf2424e380c752ff57ebd9179ac2d242ccc252a36ad2b1532 + languageName: node + linkType: hard + "@carbon/telemetry@npm:0.1.0, @carbon/telemetry@npm:~0.1.0": version: 0.1.0 resolution: "@carbon/telemetry@npm:0.1.0" @@ -1608,18 +1652,6 @@ __metadata: languageName: node linkType: hard -"@carbon/themes@npm:^11.25.0": - version: 11.25.0 - resolution: "@carbon/themes@npm:11.25.0" - dependencies: - "@carbon/colors": "npm:^11.19.0" - "@carbon/layout": "npm:^11.19.0" - "@carbon/type": "npm:^11.24.0" - color: "npm:^4.0.0" - checksum: 10/236ee22b8859790e2ff9979c4a1e431c2849ba94c2c8328b7c53a991e66ec92a02264e9fccd80ef52b56894d4868369ede03391a05a2ab94c55b8fa7f129c7c7 - languageName: node - linkType: hard - "@carbon/themes@npm:^11.37.0": version: 11.37.1 resolution: "@carbon/themes@npm:11.37.1" @@ -1633,13 +1665,16 @@ __metadata: languageName: node linkType: hard -"@carbon/type@npm:^11.24.0": - version: 11.24.0 - resolution: "@carbon/type@npm:11.24.0" +"@carbon/themes@npm:^11.43.0": + version: 11.43.0 + resolution: "@carbon/themes@npm:11.43.0" dependencies: - "@carbon/grid": "npm:^11.20.0" - "@carbon/layout": "npm:^11.19.0" - checksum: 10/9e358d6fa5755a5e1972c32d2760e4a2de0833ca502a4b407b5a0b7f7964a4cf43e62292f85188b73e7243cf185af08cac53a03b90f873965a2e333331daec9b + "@carbon/colors": "npm:^11.28.0" + "@carbon/layout": "npm:^11.28.0" + "@carbon/type": "npm:^11.33.0" + "@ibm/telemetry-js": "npm:^1.5.0" + color: "npm:^4.0.0" + checksum: 10/ffbe3316dcdd3920a2e5139e550a1195734f591b3de1d79b41f8ca606c85ae0365660d9cc79b1562e82730c860fb7b001da1e3101ca49ca9e99867bfa8d7e50f languageName: node linkType: hard @@ -1654,6 +1689,17 @@ __metadata: languageName: node linkType: hard +"@carbon/type@npm:^11.33.0": + version: 11.33.0 + resolution: "@carbon/type@npm:11.33.0" + dependencies: + "@carbon/grid": "npm:^11.29.0" + "@carbon/layout": "npm:^11.28.0" + "@ibm/telemetry-js": "npm:^1.5.0" + checksum: 10/bbaa5f9bafd6b47e2b65fe03333e4c70999bdca5a227365a2ff39cafc0b9a0dca4df41b85ea53c36ecb355090cdb43ec8c6aa43a398b9089162938b5c6b35167 + languageName: node + linkType: hard + "@carbon/utils-position@npm:^1.1.4": version: 1.1.4 resolution: "@carbon/utils-position@npm:1.1.4" @@ -1710,6 +1756,58 @@ __metadata: languageName: node linkType: hard +"@floating-ui/core@npm:^1.6.0": + version: 1.6.8 + resolution: "@floating-ui/core@npm:1.6.8" + dependencies: + "@floating-ui/utils": "npm:^0.2.8" + checksum: 10/87d52989c3d2cc80373bc153b7a40814db3206ce7d0b2a2bdfb63e2ff39ffb8b999b1b0ccf28e548000ebf863bf16e2bed45eab4c4d287a5dbe974ef22368d82 + languageName: node + linkType: hard + +"@floating-ui/dom@npm:^1.0.0": + version: 1.6.12 + resolution: "@floating-ui/dom@npm:1.6.12" + dependencies: + "@floating-ui/core": "npm:^1.6.0" + "@floating-ui/utils": "npm:^0.2.8" + checksum: 10/5c8e5fdcd3843140a606ab6dc6c12ad740f44e66b898966ef877393faaede0bbe14586e1049e2c2f08856437da8847e884a2762e78275fefa65a5a9cd71e580d + languageName: node + linkType: hard + +"@floating-ui/react-dom@npm:^2.1.2": + version: 2.1.2 + resolution: "@floating-ui/react-dom@npm:2.1.2" + dependencies: + "@floating-ui/dom": "npm:^1.0.0" + peerDependencies: + react: ">=16.8.0" + react-dom: ">=16.8.0" + checksum: 10/2a67dc8499674e42ff32c7246bded185bb0fdd492150067caf9568569557ac4756a67787421d8604b0f241e5337de10762aee270d9aeef106d078a0ff13596c4 + languageName: node + linkType: hard + +"@floating-ui/react@npm:^0.26.0": + version: 0.26.28 + resolution: "@floating-ui/react@npm:0.26.28" + dependencies: + "@floating-ui/react-dom": "npm:^2.1.2" + "@floating-ui/utils": "npm:^0.2.8" + tabbable: "npm:^6.0.0" + peerDependencies: + react: ">=16.8.0" + react-dom: ">=16.8.0" + checksum: 10/7f8e6b27db48b68ca94756687af21857be04e7360ac922d7c8e22411f2895df6384af7bd40f4b48663d3cc5809bb5c6574cd9c9ea15543ec747b9a8e1c8c3008 + languageName: node + linkType: hard + +"@floating-ui/utils@npm:^0.2.8": + version: 0.2.8 + resolution: "@floating-ui/utils@npm:0.2.8" + checksum: 10/3e3ea3b2de06badc4baebdf358b3dbd77ccd9474a257a6ef237277895943db2acbae756477ec64de65a2a1436d94aea3107129a1feeef6370675bf2b161c1abc + languageName: node + linkType: hard + "@formatjs/ecma402-abstract@npm:1.17.2": version: 1.17.2 resolution: "@formatjs/ecma402-abstract@npm:1.17.2" @@ -1821,6 +1919,62 @@ __metadata: languageName: node linkType: hard +"@ibm/plex-mono@npm:0.0.3-alpha.0": + version: 0.0.3-alpha.0 + resolution: "@ibm/plex-mono@npm:0.0.3-alpha.0" + checksum: 10/fbdfb70762dead35bd12fd69344133f3290bd4ede4fd3607f6949e80e3c516190e772afc5f8ba060426911bf1b89744f02e7b0fdd25cca818086f3ce312fcad4 + languageName: node + linkType: hard + +"@ibm/plex-sans-arabic@npm:0.0.3-alpha.0": + version: 0.0.3-alpha.0 + resolution: "@ibm/plex-sans-arabic@npm:0.0.3-alpha.0" + checksum: 10/c390dd9788a36f4cb2abb2fcf63deb2a3c8b9e7aa8a7e6263ff6484b2fe99044258e2daeb36e7c0b0eeaea17e4128a8ce567208458f851ee6b05ec8c54f84edb + languageName: node + linkType: hard + +"@ibm/plex-sans-devanagari@npm:0.0.3-alpha.0": + version: 0.0.3-alpha.0 + resolution: "@ibm/plex-sans-devanagari@npm:0.0.3-alpha.0" + checksum: 10/ef3cd967100210a822bea7b36c5ac54f915a319d5e23fa1175ea63d0405c826023f241d54b4f7beb5928603fbe01a5bae22839dad6922330bb84921eb289d193 + languageName: node + linkType: hard + +"@ibm/plex-sans-hebrew@npm:0.0.3-alpha.0": + version: 0.0.3-alpha.0 + resolution: "@ibm/plex-sans-hebrew@npm:0.0.3-alpha.0" + checksum: 10/e67ed6e081dbf9a522eca8e35471a329c788e6a03042df89649b034eaa2e66898bc44b72c0c0f57d93d24b37796cfc92729cee7754eb83ec2cd27f1fa9bdeea6 + languageName: node + linkType: hard + +"@ibm/plex-sans-thai-looped@npm:0.0.3-alpha.0": + version: 0.0.3-alpha.0 + resolution: "@ibm/plex-sans-thai-looped@npm:0.0.3-alpha.0" + checksum: 10/11272b1353611fed07788a870793ca6f45c644f47faa99880d5278552a7acd85b0696ca02336b7aa8e29bf5d6353538d322149cb8b6b2e65985c38f0af6359fe + languageName: node + linkType: hard + +"@ibm/plex-sans-thai@npm:0.0.3-alpha.0": + version: 0.0.3-alpha.0 + resolution: "@ibm/plex-sans-thai@npm:0.0.3-alpha.0" + checksum: 10/baac49d77d2075ee6ecbd5ed22d938b1afca898e5d8d9948f079613d2be011216acf52a6ae555e3cf732d8aa60b7b89b1eaef4380590a66270d7b166067a271a + languageName: node + linkType: hard + +"@ibm/plex-sans@npm:0.0.3-alpha.0": + version: 0.0.3-alpha.0 + resolution: "@ibm/plex-sans@npm:0.0.3-alpha.0" + checksum: 10/5b0b0521dbeb7c32eb13a932b53baef0013b96d5d39547b35c69a991707a3f75cec37383c9f239229fdedfb91fda8c8005f25fdddcb900937d6de7dbd456175a + languageName: node + linkType: hard + +"@ibm/plex-serif@npm:0.0.3-alpha.0": + version: 0.0.3-alpha.0 + resolution: "@ibm/plex-serif@npm:0.0.3-alpha.0" + checksum: 10/462dcf33937f50f5a0ecf320f1d930c612e92293aa40dda08c05f6630d8795e4233023bb4f8ed3d340d2dbbd82a4b7ec5ae5e511f4260b16ff9ade6f481e48e8 + languageName: node + linkType: hard + "@ibm/plex@npm:6.0.0-next.6": version: 6.0.0-next.6 resolution: "@ibm/plex@npm:6.0.0-next.6" @@ -2911,7 +3065,7 @@ __metadata: version: 0.0.0-use.local resolution: "@openmrs/esm-dispensing-app@workspace:." dependencies: - "@carbon/react": "npm:1.12.0" + "@carbon/react": "npm:1.71.0" "@openmrs/esm-framework": "npm:next" "@swc/core": "npm:^1.7.14" "@swc/jest": "npm:^0.2.36" @@ -7201,13 +7355,6 @@ __metadata: languageName: node linkType: hard -"classnames@npm:2.3.1": - version: 2.3.1 - resolution: "classnames@npm:2.3.1" - checksum: 10/28fec94a815d5f570fa6cb4baaa4a7ae1466db3c8f704802f1330180db45d3b85ef8ae612f521fb37ce2cab1c3040d1d78061697b62987bc2909f26d1ad4321f - languageName: node - linkType: hard - "classnames@npm:2.3.2": version: 2.3.2 resolution: "classnames@npm:2.3.2" @@ -7215,7 +7362,7 @@ __metadata: languageName: node linkType: hard -"classnames@npm:^2.5.1": +"classnames@npm:2.5.1, classnames@npm:^2.5.1": version: 2.5.1 resolution: "classnames@npm:2.5.1" checksum: 10/58eb394e8817021b153bb6e7d782cfb667e4ab390cb2e9dac2fc7c6b979d1cc2b2a733093955fc5c94aa79ef5c8c89f11ab77780894509be6afbb91dddd79d15 @@ -7495,13 +7642,6 @@ __metadata: languageName: node linkType: hard -"compute-scroll-into-view@npm:^1.0.13": - version: 1.0.17 - resolution: "compute-scroll-into-view@npm:1.0.17" - checksum: 10/9c7b730442081a812dba2d7d26a66968f0f3fdbba94b3cb60637808e8ba9afb33f9aa0997f71d3c2cebc71762c4145dc4b2bf5b814e0ff6d05215aa22f7c5ad2 - languageName: node - linkType: hard - "compute-scroll-into-view@npm:^2.0.4": version: 2.0.4 resolution: "compute-scroll-into-view@npm:2.0.4" @@ -7509,6 +7649,13 @@ __metadata: languageName: node linkType: hard +"compute-scroll-into-view@npm:^3.1.0": + version: 3.1.0 + resolution: "compute-scroll-into-view@npm:3.1.0" + checksum: 10/cc5211d49bced5ad23385da5c2eaf69b6045628581b0dcb9f4dd407bfee51bbd26d2bce426be26edf2feaf8c243706f5a7c3759827d89cc5a01a5cf7d299a5eb + languageName: node + linkType: hard + "concat-map@npm:0.0.1": version: 0.0.1 resolution: "concat-map@npm:0.0.1" @@ -8625,20 +8772,6 @@ __metadata: languageName: node linkType: hard -"downshift@npm:5.2.1": - version: 5.2.1 - resolution: "downshift@npm:5.2.1" - dependencies: - "@babel/runtime": "npm:^7.9.1" - compute-scroll-into-view: "npm:^1.0.13" - prop-types: "npm:^15.7.2" - react-is: "npm:^16.13.1" - peerDependencies: - react: ">=0.14.9" - checksum: 10/5ea8784bedca4106ab38a64dbd429785e2a0c682f9d2b3fe84681223426702b3a03333fb05f5759c766197cb4c917eeb21471e8f8c65163d7b2c94761c27cb19 - languageName: node - linkType: hard - "downshift@npm:8.1.0": version: 8.1.0 resolution: "downshift@npm:8.1.0" @@ -8654,6 +8787,21 @@ __metadata: languageName: node linkType: hard +"downshift@npm:9.0.8": + version: 9.0.8 + resolution: "downshift@npm:9.0.8" + dependencies: + "@babel/runtime": "npm:^7.24.5" + compute-scroll-into-view: "npm:^3.1.0" + prop-types: "npm:^15.8.1" + react-is: "npm:18.2.0" + tslib: "npm:^2.6.2" + peerDependencies: + react: ">=16.12.0" + checksum: 10/9dc4577e780c54742ba4dde11f481f0d839f001b309200fbe4db112385b227ccd9cd2ef97d9e995379fa70249f0664a562240e415b9966f18c8a5cb7ce435f2c + languageName: node + linkType: hard + "duplexer@npm:^0.1.2": version: 0.1.2 resolution: "duplexer@npm:0.1.2" @@ -9432,6 +9580,13 @@ __metadata: languageName: node linkType: hard +"flatpickr@npm:4.6.13": + version: 4.6.13 + resolution: "flatpickr@npm:4.6.13" + checksum: 10/0e32f2fbd427aa8d838da8fb0cf2e56b65efc22783dcebcc32c11b7fbb6bbc8c3532f9410915f3acb7dc0feebb49202bea03e49cc80b9d4d11b3bdce49488bc0 + languageName: node + linkType: hard + "flatpickr@npm:4.6.9": version: 4.6.9 resolution: "flatpickr@npm:4.6.9" @@ -13896,7 +14051,7 @@ __metadata: languageName: node linkType: hard -"prop-types@npm:^15.7.2": +"prop-types@npm:^15.7.2, prop-types@npm:^15.8.1": version: 15.8.1 resolution: "prop-types@npm:15.8.1" dependencies: @@ -14115,6 +14270,13 @@ __metadata: languageName: node linkType: hard +"react-fast-compare@npm:^3.2.2": + version: 3.2.2 + resolution: "react-fast-compare@npm:3.2.2" + checksum: 10/a6826180ba75cefba1c8d3ac539735f9b627ca05d3d307fe155487f5d0228d376dac6c9708d04a283a7b9f9aee599b637446635b79c8c8753d0b4eece56c125c + languageName: node + linkType: hard + "react-i18next@npm:^11.18.6, react-i18next@npm:^11.7.0": version: 11.18.6 resolution: "react-i18next@npm:11.18.6" @@ -14133,6 +14295,13 @@ __metadata: languageName: node linkType: hard +"react-is@npm:18.2.0, react-is@npm:^18.0.0, react-is@npm:^18.2.0": + version: 18.2.0 + resolution: "react-is@npm:18.2.0" + checksum: 10/200cd65bf2e0be7ba6055f647091b725a45dd2a6abef03bf2380ce701fd5edccee40b49b9d15edab7ac08a762bf83cb4081e31ec2673a5bfb549a36ba21570df + languageName: node + linkType: hard + "react-is@npm:^16.13.1": version: 16.13.1 resolution: "react-is@npm:16.13.1" @@ -14147,13 +14316,6 @@ __metadata: languageName: node linkType: hard -"react-is@npm:^18.0.0, react-is@npm:^18.2.0": - version: 18.2.0 - resolution: "react-is@npm:18.2.0" - checksum: 10/200cd65bf2e0be7ba6055f647091b725a45dd2a6abef03bf2380ce701fd5edccee40b49b9d15edab7ac08a762bf83cb4081e31ec2673a5bfb549a36ba21570df - languageName: node - linkType: hard - "react-router-dom@npm:^6.3.0": version: 6.3.0 resolution: "react-router-dom@npm:6.3.0" @@ -15627,6 +15789,13 @@ __metadata: languageName: node linkType: hard +"tabbable@npm:^6.0.0, tabbable@npm:^6.2.0": + version: 6.2.0 + resolution: "tabbable@npm:6.2.0" + checksum: 10/980fa73476026e99dcacfc0d6e000d41d42c8e670faf4682496d30c625495e412c4369694f2a15cf1e5252d22de3c396f2b62edbe8d60b5dadc40d09e3f2dde3 + languageName: node + linkType: hard + "tapable@npm:^1.0.0": version: 1.1.3 resolution: "tapable@npm:1.1.3" From 225f1dfb10420d8b272e667629c0b06e9f399b9c Mon Sep 17 00:00:00 2001 From: Dennis Kigen Date: Mon, 2 Dec 2024 22:12:30 +0300 Subject: [PATCH 2/4] Tweaks --- src/components/action-buttons.scss | 6 +- ...onent.test.tsx => action-buttons.test.tsx} | 32 +- src/components/medication-card.component.tsx | 17 +- src/components/medication-card.scss | 19 +- ...nent.test.tsx => medication-card.test.tsx} | 19 +- .../medication-dispense-review.scss | 20 +- src/components/medication-event.component.tsx | 4 +- src/components/medication-event.scss | 17 +- src/components/patient-details.component.tsx | 10 +- src/components/patient-details.scss | 16 +- .../dispensing-dashboard.component.tsx | 13 +- .../dispensing-tile.component.tsx | 37 +- src/dispensing-tiles/dispensing-tile.scss | 2 +- .../dispensing-tiles.component.tsx | 2 +- .../dispensing-tiles.resource.tsx | 8 +- src/dispensing.test.tsx | 22 - src/forms/close-dispense-form.component.tsx | 54 +- src/forms/dispense-form.component.tsx | 2 +- src/forms/forms.scss | 71 +-- ...ication-dispense-review.component.test.tsx | 143 ----- .../medication-dispense-review.component.tsx | 410 +++++++------ src/forms/medication-dispense-review.test.tsx | 572 ++++++++++++++++++ src/forms/overlay/overlay.component.tsx | 3 +- src/forms/overlay/overlay.scss | 61 +- src/forms/pause-dispense-form.component.tsx | 54 +- .../stock-dispense.component.tsx | 2 +- .../history-and-comments.component.tsx | 16 +- src/history/history-and-comments.scss | 55 +- src/hooks/useOverlay.tsx | 2 +- src/index.ts | 2 +- src/location/location.resource.tsx | 6 +- .../medication-dispense.resource.test.tsx | 2 +- .../medication-dispense.resource.tsx | 10 +- .../medication-request.resource.tsx | 12 +- src/medication/medication.resource.tsx | 2 +- .../pharmacy-header.component.tsx | 2 +- src/pharmacy-header/pharmacy-header.scss | 15 +- .../prescription-details.component.tsx | 9 +- .../prescription-expanded.component.tsx | 4 +- src/prescriptions/prescription-expanded.scss | 6 +- .../prescription-tab-lists.component.tsx | 12 +- src/prescriptions/prescriptions.scss | 74 +-- src/root.scss | 50 -- src/utils.ts | 4 +- tsconfig.json | 5 +- 45 files changed, 1077 insertions(+), 827 deletions(-) rename src/components/{action-buttons.component.test.tsx => action-buttons.test.tsx} (87%) rename src/components/{medication-card.component.test.tsx => medication-card.test.tsx} (50%) delete mode 100644 src/forms/medication-dispense-review.component.test.tsx create mode 100644 src/forms/medication-dispense-review.test.tsx delete mode 100644 src/root.scss diff --git a/src/components/action-buttons.scss b/src/components/action-buttons.scss index c133916..c29f1dc 100644 --- a/src/components/action-buttons.scss +++ b/src/components/action-buttons.scss @@ -1,5 +1,7 @@ +@use '@carbon/layout'; + .actionBtns { float: right; - margin-left: 1rem; - margin-top: 2rem; + margin-left: layout.$spacing-05; + margin-top: layout.$spacing-07; } diff --git a/src/components/action-buttons.component.test.tsx b/src/components/action-buttons.test.tsx similarity index 87% rename from src/components/action-buttons.component.test.tsx rename to src/components/action-buttons.test.tsx index 1371d1a..063797e 100644 --- a/src/components/action-buttons.component.test.tsx +++ b/src/components/action-buttons.test.tsx @@ -1,16 +1,22 @@ -import { render } from '@testing-library/react'; import React from 'react'; -import ActionButtons from './action-buttons.component'; +import { render, screen } from '@testing-library/react'; +import { getDefaultsFromConfigSchema, useConfig } from '@openmrs/esm-framework'; +import { configSchema, type PharmacyConfig } from '../config-schema'; import { type MedicationRequest, MedicationRequestStatus } from '../types'; -import { useConfig } from '@openmrs/esm-framework'; +import ActionButtons from './action-buttons.component'; -const mockedUseConfig = useConfig as jest.Mock; +const mockedUseConfig = jest.mocked(useConfig); const mockPatientUuid = '558494fe-5850-4b34-a3bf-06550334ba4a'; const mockEncounterUuid = '7aee7123-9e50-4f72-a636-895d77a63e98'; -describe('Action Buttons Component tests', () => { +const defaultPharmacyConfig: PharmacyConfig = { + ...getDefaultsFromConfigSchema(configSchema), +}; + +describe('ActionButtons', () => { beforeEach(() => { mockedUseConfig.mockReturnValue({ + ...defaultPharmacyConfig, medicationRequestExpirationPeriodInDays: 90, actionButtons: { pauseButton: { @@ -27,7 +33,7 @@ describe('Action Buttons Component tests', () => { }); }); - test('component should render dispense button if active medication', () => { + test('renders all the action buttons for an active medication request', () => { // status = active, and validity period start set to current datetime const medicationRequest: MedicationRequest = { resourceType: 'MedicationRequest', @@ -124,18 +130,21 @@ describe('Action Buttons Component tests', () => { }, }; - const { getByText, container } = render( + render( , ); - expect(getByText('Dispense')).toBeInTheDocument(); + + expect(screen.getByRole('button', { name: /dispense/i })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: /pause/i })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: /close/i })).toBeInTheDocument(); }); // status = active, but validity period start time years in the past - test('component should not render dispense button if expired medication', () => { + test('should not render the dispense button if the medication request is expired', () => { // status = active, and validity period start set to current datetime const medicationRequest: MedicationRequest = { resourceType: 'MedicationRequest', @@ -232,13 +241,14 @@ describe('Action Buttons Component tests', () => { }, }; - const { queryByText, container } = render( + render( , ); - expect(queryByText('Dispense')).not.toBeInTheDocument(); + + expect(screen.queryByRole('button', { name: /dispense/i })).not.toBeInTheDocument(); }); }); diff --git a/src/components/medication-card.component.tsx b/src/components/medication-card.component.tsx index efd7a71..db54727 100644 --- a/src/components/medication-card.component.tsx +++ b/src/components/medication-card.component.tsx @@ -1,20 +1,29 @@ import React from 'react'; -import { Tile } from '@carbon/react'; +import { IconButton, Tile } from '@carbon/react'; import { Edit } from '@carbon/react/icons'; +import { useTranslation } from 'react-i18next'; import { type MedicationReferenceOrCodeableConcept } from '../types'; -import styles from './medication-card.scss'; import { getMedicationDisplay } from '../utils'; +import styles from './medication-card.scss'; const MedicationCard: React.FC<{ medication: MedicationReferenceOrCodeableConcept; - editAction?: Function; + editAction?: () => void; }> = ({ medication, editAction }) => { + const { t } = useTranslation(); + return (

{getMedicationDisplay(medication)}

- {editAction && } + {editAction && ( + + + + + + )} ); }; diff --git a/src/components/medication-card.scss b/src/components/medication-card.scss index ad4739b..4ffbe36 100644 --- a/src/components/medication-card.scss +++ b/src/components/medication-card.scss @@ -3,18 +3,23 @@ @use '@openmrs/esm-styleguide/src/vars' as *; .medicationTile { + background-color: white; + border-left: layout.$spacing-02 solid var(--brand-03); + color: $text-02; display: flex; flex-direction: row; justify-content: space-between; + margin: layout.$spacing-01 0 layout.$spacing-05 layout.$spacing-05; + padding: 0 layout.$spacing-05; width: 100%; - margin: 2px 0 8px; - padding: 0 8px 0 8px; - background-color: #fff; - border-left: 4px solid var(--brand-03); - color: $text-02; - margin-bottom: 1rem !important; } .medicationName { - font-size: 15px !important; + font-size: layout.$spacing-05 !important; +} + +.editButton { + :global(.cds--tooltip-content) { + color: white !important; + } } diff --git a/src/components/medication-card.component.test.tsx b/src/components/medication-card.test.tsx similarity index 50% rename from src/components/medication-card.component.test.tsx rename to src/components/medication-card.test.tsx index dbb3455..9b3804f 100644 --- a/src/components/medication-card.component.test.tsx +++ b/src/components/medication-card.test.tsx @@ -1,10 +1,10 @@ import React from 'react'; -import { render } from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; import { type MedicationReferenceOrCodeableConcept } from '../types'; import MedicationCard from './medication-card.component'; -describe('Medication Card Component tests', () => { - test('component should render medication card without edit action button', () => { +describe('MedicationCardComponent', () => { + test('renders the medication card without the edit action button', () => { const medication: MedicationReferenceOrCodeableConcept = { medicationReference: { display: 'Some Medication', @@ -13,9 +13,10 @@ describe('Medication Card Component tests', () => { }, }; - const { getByText, container } = render(); - expect(getByText('Some Medication')).toBeInTheDocument(); - expect(container.querySelector('svg')).not.toBeInTheDocument(); + render(); + + expect(screen.getByText('Some Medication')).toBeInTheDocument(); + expect(screen.queryByRole('button')).not.toBeInTheDocument(); }); test('component should render medication card with edit action button', () => { @@ -29,8 +30,8 @@ describe('Medication Card Component tests', () => { const action = () => 0; - const { getByText, container } = render(); - expect(getByText('Some Medication')).toBeInTheDocument(); - expect(container.querySelector('svg')).toBeInTheDocument(); + render(); + expect(screen.getByText('Some Medication')).toBeInTheDocument(); + expect(screen.queryByRole('button')).toBeInTheDocument(); }); }); diff --git a/src/components/medication-dispense-review.scss b/src/components/medication-dispense-review.scss index af33502..a39ad53 100644 --- a/src/components/medication-dispense-review.scss +++ b/src/components/medication-dispense-review.scss @@ -55,15 +55,17 @@ flex: 3; } -.formGroup span { - @extend .productiveHeading02; +.formGroup { + span { + @extend .productiveHeading02; + } } .patientInfo { position: sticky; z-index: 1000; background-color: $ui-02; - top: 3rem; + top: layout.$spacing-09; overflow-y: auto; } @@ -87,9 +89,11 @@ background-color: $ui-02; } -.buttonGroup button { - max-width: none; - width: 50%; - height: layout.$spacing-10; - align-items: flex-start; +.buttonGroup { + button { + max-width: none; + width: 50%; + height: layout.$spacing-10; + align-items: flex-start; + } } diff --git a/src/components/medication-event.component.tsx b/src/components/medication-event.component.tsx index 8ca5eef..3202e53 100644 --- a/src/components/medication-event.component.tsx +++ b/src/components/medication-event.component.tsx @@ -1,6 +1,6 @@ import React from 'react'; +import { useTranslation } from 'react-i18next'; import { type DosageInstruction, type MedicationDispense, type MedicationRequest, type Quantity } from '../types'; -import styles from './medication-event.scss'; import { getDosageInstruction, getQuantity, @@ -8,7 +8,7 @@ import { getMedicationDisplay, getMedicationReferenceOrCodeableConcept, } from '../utils'; -import { useTranslation } from 'react-i18next'; +import styles from './medication-event.scss'; // can render MedicationRequest or MedicationDispense const MedicationEvent: React.FC<{ diff --git a/src/components/medication-event.scss b/src/components/medication-event.scss index e18af9b..6f0d5ba 100644 --- a/src/components/medication-event.scss +++ b/src/components/medication-event.scss @@ -3,16 +3,21 @@ @use '@openmrs/esm-styleguide/src/vars' as *; .medicationName { - font-size: 15px !important; -} - -.bodyLong01 { - font-size: 13px !important; + font-size: layout.$spacing-05 !important; } .dosage, .quantity, .refills { - color: #525252; + color: $text-02; font-weight: bold; } + +.bodyLong01 { + @include type.type-style('body-01'); + font-size: 13px !important; +} + +.label01 { + @include type.type-style('label-01'); +} diff --git a/src/components/patient-details.component.tsx b/src/components/patient-details.component.tsx index edc66ef..f0111fc 100644 --- a/src/components/patient-details.component.tsx +++ b/src/components/patient-details.component.tsx @@ -1,19 +1,17 @@ -import React, { useEffect } from 'react'; -import { useTranslation } from 'react-i18next'; +import React, { useCallback, useEffect, useMemo, useState } from 'react'; import { attach, detach, ExtensionSlot, type PatientUuid, usePatient } from '@openmrs/esm-framework'; import styles from './patient-details.scss'; const PatientDetails: React.FC<{ patientUuid: PatientUuid; }> = ({ patientUuid }) => { - const { t } = useTranslation(); const { patient } = usePatient(patientUuid); const patientName = patient; - const patientPhotoSlotState = React.useMemo(() => ({ patientUuid, patientName }), [patientUuid, patientName]); + const patientPhotoSlotState = useMemo(() => ({ patientUuid, patientName }), [patientUuid, patientName]); - const [showContactDetails, setShowContactDetails] = React.useState(false); - const toggleContactDetails = React.useCallback((event: MouseEvent) => { + const [showContactDetails, setShowContactDetails] = useState(false); + const toggleContactDetails = useCallback((event: MouseEvent) => { event.stopPropagation(); setShowContactDetails((value) => !value); }, []); diff --git a/src/components/patient-details.scss b/src/components/patient-details.scss index 533f053..e60fa2f 100644 --- a/src/components/patient-details.scss +++ b/src/components/patient-details.scss @@ -3,11 +3,11 @@ @use '@openmrs/esm-styleguide/src/vars' as *; .patientDetailsContainer > div { - margin-bottom: 1rem; + margin-bottom: layout.$spacing-05; } .container { - border-bottom: 0.063rem solid $ui-03; + border-bottom: 1px solid $ui-03; background-color: $ui-02; display: grid; grid-template-columns: 1fr auto; @@ -21,13 +21,13 @@ .patientName { @include type.type-style('heading-03'); - margin-right: 0.25rem; + margin-right: layout.$spacing-02; } .patientAvatar { - width: 5rem; - height: 5rem; - margin: 1rem; + width: layout.$spacing-11; + height: layout.$spacing-11; + margin: layout.$spacing-05; border-radius: 1px; } @@ -40,7 +40,7 @@ .patientInfo { width: 100%; - padding-right: 1rem; + padding-right: layout.$spacing-05; } .demographics { @@ -73,7 +73,7 @@ } .tooltipPadding { - padding: 0.25rem; + padding: layout.$spacing-02; } .tooltipSmallText { diff --git a/src/dashboard/dispensing-dashboard.component.tsx b/src/dashboard/dispensing-dashboard.component.tsx index 7602349..86d31ba 100644 --- a/src/dashboard/dispensing-dashboard.component.tsx +++ b/src/dashboard/dispensing-dashboard.component.tsx @@ -1,15 +1,16 @@ import React from 'react'; +import { useTranslation } from 'react-i18next'; import { InlineNotification } from '@carbon/react'; -import Overlay from '../forms/overlay/overlay.component'; -import { PharmacyHeader } from '../pharmacy-header/pharmacy-header.component'; -import PrescriptionTabLists from '../prescriptions/prescription-tab-lists.component'; import { useConfig } from '@openmrs/esm-framework'; -import { useTranslation } from 'react-i18next'; import { type PharmacyConfig } from '../config-schema'; +import { PharmacyHeader } from '../pharmacy-header/pharmacy-header.component'; +import PrescriptionTabLists from '../prescriptions/prescription-tab-lists.component'; +import Overlay from '../forms/overlay/overlay.component'; export default function DispensingDashboard() { - const config = useConfig(); const { t } = useTranslation(); + const config = useConfig(); + if (config.dispenseBehavior.restrictTotalQuantityDispensed && config.dispenseBehavior.allowModifyingPrescription) { return (
@@ -24,7 +25,7 @@ export default function DispensingDashboard() { ); } else { return ( -
+
{/* */} diff --git a/src/dispensing-tiles/dispensing-tile.component.tsx b/src/dispensing-tiles/dispensing-tile.component.tsx index 892a60d..c141f7b 100644 --- a/src/dispensing-tiles/dispensing-tile.component.tsx +++ b/src/dispensing-tiles/dispensing-tile.component.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { useTranslation } from 'react-i18next'; import { Tile, Button } from '@carbon/react'; import { ArrowRight } from '@carbon/react/icons'; +import { ResponsiveWrapper } from '@openmrs/esm-framework'; import styles from './dispensing-tile.scss'; interface DispensingTileProps { @@ -15,24 +16,26 @@ const DispensingTile: React.FC = ({ label, value, headerLab const { t } = useTranslation(); return ( - -
-
- - {children} + + +
+
+ + {children} +
+
- -
-
- -

{value}

-
- +
+ +

{value}

+
+ + ); }; diff --git a/src/dispensing-tiles/dispensing-tile.scss b/src/dispensing-tiles/dispensing-tile.scss index 48aa6aa..ccf7524 100644 --- a/src/dispensing-tiles/dispensing-tile.scss +++ b/src/dispensing-tiles/dispensing-tile.scss @@ -3,7 +3,7 @@ @use '@openmrs/esm-styleguide/src/vars' as *; .tileContainer { - border: 0.0625rem solid $ui-03; + border: 1px solid $ui-03; flex-grow: 1; height: 7.875rem; padding: 0 layout.$spacing-05; diff --git a/src/dispensing-tiles/dispensing-tiles.component.tsx b/src/dispensing-tiles/dispensing-tiles.component.tsx index d3f6eef..c247094 100644 --- a/src/dispensing-tiles/dispensing-tiles.component.tsx +++ b/src/dispensing-tiles/dispensing-tiles.component.tsx @@ -7,7 +7,7 @@ import styles from './dispensing-tiles.scss'; const DispensingTiles: React.FC = () => { const { t } = useTranslation(); - const { metrics, isError, isLoading } = useMetrics(); + const { metrics, error, isLoading } = useMetrics(); if (isLoading) { return ; diff --git a/src/dispensing-tiles/dispensing-tiles.resource.tsx b/src/dispensing-tiles/dispensing-tiles.resource.tsx index dfcea8f..1a26df3 100644 --- a/src/dispensing-tiles/dispensing-tiles.resource.tsx +++ b/src/dispensing-tiles/dispensing-tiles.resource.tsx @@ -3,23 +3,23 @@ import useSWRImmutable from 'swr/immutable'; import { type FetchResponse, openmrsFetch } from '@openmrs/esm-framework'; // NOT CURRENTLY USED - export function useMetrics() { const metrics = { orders: 43, orders_for_home_delivery: 4, missed_collections: 12, }; - const { data, error } = useSWR<{ data: { results: {} } }, Error>(`/ws/rest/v1/queue?`, openmrsFetch); + const { data, error, isLoading } = useSWR<{ data: { results: {} } }, Error>(`/ws/rest/v1/queue?`, openmrsFetch); return { metrics: metrics, - isError: error, - isLoading: !data && !error, + error, + isLoading, }; } export function useServices() { + // TODO: Move to config file const serviceConceptSetUuid = '330c0ec6-0ac7-4b86-9c70-29d76f0ae20a'; const apiUrl = `/ws/rest/v1/concept/${serviceConceptSetUuid}`; const { data } = useSWRImmutable(apiUrl, openmrsFetch); diff --git a/src/dispensing.test.tsx b/src/dispensing.test.tsx index a425b55..153edc9 100644 --- a/src/dispensing.test.tsx +++ b/src/dispensing.test.tsx @@ -1,25 +1,3 @@ -/** - * This is the root test for this page. It simply checks that the page - * renders. If the components of your page are highly interdependent, - * (e.g., if the `Hello` component had state that communicated - * information between `Greeter` and `PatientGetter`) then you might - * want to do most of your testing here. If those components are - * instead quite independent (as is the case in this example), then - * it would make more sense to test those components independently. - * - * The key thing to remember, always, is: write tests that behave like - * users. They should *look* for elements by their visual - * characteristics, *interact* with them, and (mostly) *assert* based - * on things that would be visually apparent to a user. - * - * To learn more about how we do testing, see the following resources: - * https://kentcdodds.com/blog/how-to-know-what-to-test - * https://kentcdodds.com/blog/testing-implementation-details - * https://kentcdodds.com/blog/common-mistakes-with-react-testing-library - * - * Kent C. Dodds is the inventor of `@testing-library`: - * https://testing-library.com/docs/guiding-principles - */ import React from 'react'; import { render } from '@testing-library/react'; import Dispensing from './dispensing.component'; diff --git a/src/forms/close-dispense-form.component.tsx b/src/forms/close-dispense-form.component.tsx index cb8c649..31a79bd 100644 --- a/src/forms/close-dispense-form.component.tsx +++ b/src/forms/close-dispense-form.component.tsx @@ -2,20 +2,20 @@ import React, { useEffect, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { ExtensionSlot, + ResponsiveWrapper, showNotification, showToast, useConfig, - useLayoutType, usePatient, } from '@openmrs/esm-framework'; import { Button, ComboBox, InlineLoading } from '@carbon/react'; import { saveMedicationDispense, useReasonForCloseValueSet } from '../medication-dispense/medication-dispense.resource'; import { closeOverlay } from '../hooks/useOverlay'; -import styles from './forms.scss'; import { updateMedicationRequestFulfillerStatus } from '../medication-request/medication-request.resource'; import { type MedicationDispense, MedicationDispenseStatus, MedicationRequestFulfillerStatus } from '../types'; import { type PharmacyConfig } from '../config-schema'; import { getUuidFromReference, revalidate } from '../utils'; +import styles from './forms.scss'; interface CloseDispenseFormProps { medicationDispense: MedicationDispense; @@ -31,9 +31,8 @@ const CloseDispenseForm: React.FC = ({ encounterUuid, }) => { const { t } = useTranslation(); - const config = useConfig(); - const isTablet = useLayoutType() === 'tablet'; const { patient, isLoading } = usePatient(patientUuid); + const config = useConfig(); // Keep track of medication dispense payload const [medicationDispensePayload, setMedicationDispensePayload] = useState(); @@ -152,29 +151,30 @@ const CloseDispenseForm: React.FC = ({ )} {patient && }
- item?.text} - initialSelectedItem={{ - id: medicationDispense.statusReasonCodeableConcept?.coding[0]?.code, - text: medicationDispense.statusReasonCodeableConcept?.text, - }} - onChange={({ selectedItem }) => { - setMedicationDispensePayload({ - ...medicationDispensePayload, - statusReasonCodeableConcept: { - coding: [ - { - code: selectedItem?.id, - }, - ], - }, - }); - }} - /> + + item?.text} + initialSelectedItem={{ + id: medicationDispense.statusReasonCodeableConcept?.coding[0]?.code, + text: medicationDispense.statusReasonCodeableConcept?.text, + }} + onChange={({ selectedItem }) => { + setMedicationDispensePayload({ + ...medicationDispensePayload, + statusReasonCodeableConcept: { + coding: [ + { + code: selectedItem?.id, + }, + ], + }, + }); + }} + /> +