(chore) ungrade carbon

package.json

@@ -40,7 +40,7 @@
     "url": "https://github.com/openmrs/openmrs-esm-template-app/issues"
   },
   "dependencies": {
-    "@carbon/react": "^1.33.1",
+    "@carbon/react": "^1.68.0",
     "lodash-es": "^4.17.21"
   },
   "peerDependencies": {
@@ -74,6 +74,7 @@
     "dotenv": "^16.0.3",
     "eslint": "^8.50.0",
     "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-jest-dom": "^5.4.0",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react-hooks": "^4.6.2",
     "husky": "^8.0.3",

src/boxes/extensions/box.scss

@@ -2,9 +2,9 @@
  * necessary. Here, the extensions set only their colors.
  * Their sizes and other general features of their display
  * is controlled by the slot. */
- 
- @import "~@openmrs/esm-styleguide/src/vars";
- 
+
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
  .blue {
   background-color: darkblue;
 }
@@ -20,4 +20,4 @@
   @include brand-01(background-color);
   color: white;
   padding: 8px;
-}
+}

src/boxes/slot/boxes.scss

@@ -6,24 +6,24 @@
  * `> * > *` is used to target the outermost DOM node of
  * the extension.
  */
- @use '@carbon/styles/scss/spacing';
+ @use '@carbon/layout';
 
 .box > * > * {
-  height: spacing.$spacing-10;
-  width: spacing.$spacing-10;
+  height: layout.$spacing-10;
+  width: layout.$spacing-10;
 }
 
 .boxes {
-  margin: spacing.$spacing-07 0;
+  margin: layout.$spacing-07 0;
   display: flex;
-  gap: spacing.$spacing-05;
+  gap: layout.$spacing-05;
 }
 
 .container {
   max-width: 50rem;
-  margin-top: spacing.$spacing-09;
+  margin-top: layout.$spacing-09;
 
   > * + * {
-    margin-top: spacing.$spacing-06;
+    margin-top: layout.$spacing-06;
   }
 }

src/greeter/greeter.scss

@@ -1,11 +1,11 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
+@use '@carbon/layout';
+@use '@carbon/type';
 
 .container {
   max-width: 50rem;
 
   > * + * {
-    margin-top: spacing.$spacing-05;
+    margin-top: layout.$spacing-05;
   }
 }
 

src/greeter/greeter.test.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { useConfig } from '@openmrs/esm-framework';
-import { Config } from '../config-schema';
+import { getDefaultsFromConfigSchema, useConfig } from '@openmrs/esm-framework';
+import { Config, configSchema } from '../config-schema';
 import Greeter from './greeter.component';
 
-const mockUseConfig = useConfig as jest.Mock;
+const mockUseConfig = jest.mocked(useConfig<Config>);
 
 it('displays the expected default text', () => {
   const config: Config = { casualGreeting: false, whoToGreet: ['World'] };

src/patient-getter/patient-getter.scss

@@ -1,11 +1,11 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
+@use '@carbon/layout';
+@use '@carbon/type';
 
 .container {
-  margin-top: spacing.$spacing-09;
+  margin-top: layout.$spacing-09;
 
   > * + * {
-    margin-top: spacing.$spacing-06;
+    margin-top: layout.$spacing-06;
   }
 }
 

src/resources/resources.scss

@@ -1,38 +1,38 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
+@use '@carbon/layout';
+@use '@carbon/type';
 
 .container {
-  padding: spacing.$spacing-07;
+  padding: layout.$spacing-07;
 }
 
 .heading {
   @include type.type-style('heading-04');
-  margin: spacing.$spacing-05 0;
+  margin: layout.$spacing-05 0;
 }
 
 .explainer {
   display: block;
 }
 
 .resources {
-  margin-top: spacing.$spacing-10;
-  margin-bottom: spacing.$spacing-09;
+  margin-top: layout.$spacing-10;
+  margin-bottom: layout.$spacing-09;
 
   > * + * {
-    margin-right: spacing.$spacing-05; 
+    margin-right: layout.$spacing-05;
   }
 }
 
 .cardsContainer {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
-  column-gap: spacing.$spacing-06;
-  margin-top: spacing.$spacing-07;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  column-gap: layout.$spacing-06;
+  margin-top: layout.$spacing-07;
   max-width: 75%;
 }
 
 .card {
-  margin: spacing.$spacing-03 0;
+  margin: layout.$spacing-03 0;
   display: flex;
   align-items: center;
 
@@ -41,7 +41,7 @@
   }
 
   svg {
-    margin-left: spacing.$spacing-02;
+    margin-left: layout.$spacing-02;
   }
 }
 
@@ -53,7 +53,7 @@
 .title {
   display: flex;
   align-items: center;
-  margin-bottom: spacing.$spacing-05;
+  margin-bottom: layout.$spacing-05;
 
   h4 {
     @include type.type-style('heading-02');

src/root.scss

@@ -1,15 +1,15 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
+@use '@carbon/layout';
+@use '@carbon/type';
 
 .container {
-  padding: spacing.$spacing-07;
+  padding: layout.$spacing-07;
 }
 
 .welcome {
   @include type.type-style('heading-04');
-  margin: spacing.$spacing-05 0; 
+  margin: layout.$spacing-05 0;
 }
 
 .explainer {
-  margin-bottom: 2rem;
+  margin-bottom: layout.$spacing-07;
 }

src/root.test.tsx

@@ -34,7 +34,7 @@ import Root from './root.component';
  * mock file. This line just tells TypeScript that the object is, in
  * fact, a mock, and so will have methods like `mockReturnValue`.
  */
-const mockUseConfig = useConfig as jest.Mock;
+const mockUseConfig = jest.mocked(useConfig<Config>);
 
 it('renders a landing page for the Template app', () => {
   const config: Config = { casualGreeting: false, whoToGreet: ['World'] };

tsconfig.json

@@ -14,7 +14,8 @@
       "es2015.promise",
       "es2016.array.include",
       "es2018",
-      "es2020"
+      "es2020",
+      "es2022",
     ],
     "resolveJsonModule": true,
     "noEmit": true,