(chore) Upgrade carbon

.gitignore

@@ -67,6 +67,7 @@ dist/
 
 # Intellij integration
 *.iml
+.idea
 
 # ignores for Yarn v3 w/o PNP
 .pnp.*

jest.config.js

@@ -18,7 +18,6 @@ module.exports = {
   transformIgnorePatterns: ['/node_modules/(?!@openmrs)'],
   moduleNameMapper: {
     '@openmrs/esm-framework': '@openmrs/esm-framework/mock',
-    '@openmrs/esm-utils': '@openmrs/esm-framework/mock',
     '\\.(s?css)$': 'identity-obj-proxy',
     '^lodash-es/(.*)$': 'lodash/$1',
     'lodash-es': 'lodash',

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 "@carbon/layout";
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
  .blue {
   background-color: darkblue;
 }
@@ -19,5 +19,5 @@
 .brand {
   @include brand-01(background-color);
   color: white;
-  padding: 8px;
-}
+  padding: layout.$spacing-03;
+}

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/declarations.d.ts

@@ -1,4 +1,3 @@
-declare module '@carbon/react';
 declare module '*.css';
 declare module '*.scss';
 declare module '*.png';

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

@@ -4,7 +4,7 @@ import { useConfig } from '@openmrs/esm-framework';
 import { Config } 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,