(refactor) Remove unused styles and style imports + add eslint rules

.eslintrc

@@ -1,4 +1,33 @@
 {
+  "parser": "@typescript-eslint/parser",
+  "plugins": [
+    "@typescript-eslint"
+  ],
   "extends": ["ts-react-important-stuff", "plugin:prettier/recommended"],
-  "parser": "@typescript-eslint/parser"
+  "rules": {
+    "no-restricted-imports": [
+      "error",
+      {
+        "paths": [
+          {
+            "name": "lodash",
+            "message": "Import specific methods from `lodash`. e.g. `import map from 'lodash/map'`"
+          },
+          {
+            "name": "lodash-es",
+            "importNames": ["default"],
+            "message": "Import specific methods from `lodash-es`. e.g. `import { map } from 'lodash-es'`"
+          },
+          {
+            "name": "carbon-components-react",
+            "message": "Import from `@carbon/react` directly. e.g. `import { Toggle } from '@carbon/react'`"
+          },
+          {
+            "name": "@carbon/icons-react",
+            "message": "Import from `@carbon/react/icons`. e.g. `import { ChevronUp } from '@carbon/react/icons'`"
+          }
+        ]
+      }
+    ]
+  }
 }

jest.config.js

@@ -16,8 +16,6 @@ module.exports = {
   transformIgnorePatterns: ['/node_modules/(?!@openmrs)'],
   moduleNameMapper: {
     '\\.(s?css)$': 'identity-obj-proxy',
-    '^@carbon/icons-react/es/(.*)$': '@carbon/icons-react/lib/$1',
-    '^carbon-components-react/es/(.*)$': 'carbon-components-react/lib/$1',
     '@openmrs/esm-framework': '@openmrs/esm-framework/mock',
     'react-i18next': '<rootDir>/__mocks__/react-i18next.js',
     'lodash-es': 'lodash',

src/hooks/useFormJson.test.tsx

@@ -26,38 +26,54 @@ const mockOpenmrsFetch = openmrsFetch as jest.Mock;
 mockOpenmrsFetch.mockImplementation(jest.fn());
 
 // parent form
-when(mockOpenmrsFetch).calledWith(buildPath(PARENT_FORM_NAME)).mockResolvedValue({ data: { results: [nestedForm1Skeleton] } });
-when(mockOpenmrsFetch).calledWith(buildPath(PARENT_FORM_UUID)).mockResolvedValue({ data:  nestedForm1Skeleton } );
-when(mockOpenmrsFetch).calledWith(buildPath(PARENT_FORM_SCHEMA_VALUE_REF)).mockResolvedValue({ data: nestedForm1Body });
+when(mockOpenmrsFetch)
+  .calledWith(buildPath(PARENT_FORM_NAME))
+  .mockResolvedValue({ data: { results: [nestedForm1Skeleton] } });
+when(mockOpenmrsFetch)
+  .calledWith(buildPath(PARENT_FORM_UUID))
+  .mockResolvedValue({ data: nestedForm1Skeleton });
+when(mockOpenmrsFetch)
+  .calledWith(buildPath(PARENT_FORM_SCHEMA_VALUE_REF))
+  .mockResolvedValue({ data: nestedForm1Body });
 
 // sub form
-when(mockOpenmrsFetch).calledWith(buildPath(SUB_FORM_NAME)).mockResolvedValue({ data: { results: [nestedForm2Skeleton] } });
-when(mockOpenmrsFetch).calledWith(buildPath(SUB_FORM_UUID)).mockResolvedValue({ data: nestedForm2Skeleton  });
-when(mockOpenmrsFetch).calledWith(buildPath(SUB_FORM_SCHEMA_VALUE_REF)).mockResolvedValue({ data: nestedForm2Body });
+when(mockOpenmrsFetch)
+  .calledWith(buildPath(SUB_FORM_NAME))
+  .mockResolvedValue({ data: { results: [nestedForm2Skeleton] } });
+when(mockOpenmrsFetch)
+  .calledWith(buildPath(SUB_FORM_UUID))
+  .mockResolvedValue({ data: nestedForm2Skeleton });
+when(mockOpenmrsFetch)
+  .calledWith(buildPath(SUB_FORM_SCHEMA_VALUE_REF))
+  .mockResolvedValue({ data: nestedForm2Body });
 
 // mini form
-when(mockOpenmrsFetch).calledWith(buildPath(MINI_FORM_NAME)).mockResolvedValue({ data: { results: [miniFormSkeleton] } });
-when(mockOpenmrsFetch).calledWith(buildPath(MINI_FORM_UUID)).mockResolvedValue({ data: miniFormSkeleton });
-when(mockOpenmrsFetch).calledWith(buildPath(MINI_FORM_SCHEMA_VALUE_REF)).mockResolvedValue({ data: miniFormBody });
+when(mockOpenmrsFetch)
+  .calledWith(buildPath(MINI_FORM_NAME))
+  .mockResolvedValue({ data: { results: [miniFormSkeleton] } });
+when(mockOpenmrsFetch)
+  .calledWith(buildPath(MINI_FORM_UUID))
+  .mockResolvedValue({ data: miniFormSkeleton });
+when(mockOpenmrsFetch)
+  .calledWith(buildPath(MINI_FORM_SCHEMA_VALUE_REF))
+  .mockResolvedValue({ data: miniFormBody });
 
 describe('useFormJson', () => {
-
-
   it('should fetch basic form by name', async () => {
     let hook = null;
     await act(async () => {
-        hook = renderHook(() => useFormJson(MINI_FORM_NAME, null, null, null));
+      hook = renderHook(() => useFormJson(MINI_FORM_NAME, null, null, null));
     });
 
     expect(hook.result.current.isLoading).toBe(false);
     expect(hook.result.current.error).toBe(undefined);
-    expect(hook.result.current.formJson.name).toBe(MINI_FORM_NAME)
+    expect(hook.result.current.formJson.name).toBe(MINI_FORM_NAME);
   });
 
   it('should fetch basic form by UUID', async () => {
     let hook = null;
     await act(async () => {
-        hook = renderHook(() => useFormJson(MINI_FORM_UUID, null, null, null));
+      hook = renderHook(() => useFormJson(MINI_FORM_UUID, null, null, null));
     });
 
     expect(hook.result.current.isLoading).toBe(false);
@@ -68,9 +84,9 @@ describe('useFormJson', () => {
   fit('should load form with nested subforms', async () => {
     let hook = null;
     await act(async () => {
-        hook = renderHook(() => useFormJson(PARENT_FORM_NAME, null, null, null));
+      hook = renderHook(() => useFormJson(PARENT_FORM_NAME, null, null, null));
     });
-    
+
     expect(hook.result.current.isLoading).toBe(false);
     expect(hook.result.current.error).toBe(undefined);
     expect(hook.result.current.formJson.name).toBe(PARENT_FORM_NAME);
@@ -82,20 +98,20 @@ describe('useFormJson', () => {
   it('should load subforms for raw form json', async () => {
     let hook = null;
     await act(async () => {
-        hook = renderHook(() => useFormJson(null, nestedForm1Body, null, null));
+      hook = renderHook(() => useFormJson(null, nestedForm1Body, null, null));
     });
-    
+
     expect(hook.result.current.isLoading).toBe(false);
     expect(hook.result.current.error).toBe(undefined);
     expect(hook.result.current.formJson.name).toBe(PARENT_FORM_NAME);
-    
+
     // verify subforms
     verifyEmbeddedForms(hook.result.current.formJson);
   });
 });
 
 function buildPath(path: string) {
-    return when((url: string) => url.includes(path));
+  return when((url: string) => url.includes(path));
 }
 
 function verifyEmbeddedForms(formJson) {
@@ -105,4 +121,4 @@ function verifyEmbeddedForms(formJson) {
   const nestedSubform = formJson.pages[2].subform.form;
   expect(nestedSubform.name).toBe(MINI_FORM_NAME);
   expect(nestedSubform.pages.length).toBe(1);
-}
+}

src/ohri-form.scss

@@ -73,10 +73,10 @@ aside[class*='-esm-patient-chart__workspace-window__container__'] {
 }
 
 aside[class*='-esm-patient-chart__workspace-window__container__'] > div {
-    display: flex;
-    bottom: 0;
+  display: flex;
+  bottom: 0;
 }
 
 aside[class*='-esm-patient-chart__workspace-window__container__'] > div > div {
-    flex-grow: 1;
+  flex-grow: 1;
 }

src/overrides.scss

@@ -1,3 +1,3 @@
 .cds--overflow-menu {
-    visibility: hidden !important;
-  }
+  visibility: hidden !important;
+}

src/root.scss

@@ -1,105 +1,31 @@
-@import "~carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/type/styles";
-@import "~carbon-components/src/globals/scss/vendor/@carbon/layout/scss/generated/spacing";
-@import "~carbon-components/src/globals/scss/vendor/@carbon/layout/scss/generated/layout";
-@import "carbon-components/scss/globals/scss/typography.scss";
-@import "~@openmrs/esm-styleguide/src/vars";
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
 
-$ui-01: #f4f4f4;
-$ui-02: #ffffff;
-$ui-03: #e0e0e0;
-$ui-05: #161616;
-$ui-background: #ffffff;
-$color-gray-70: #525252;
-$color-blue-60-2: #0f62fe;
-$color-yellow-50: #feecae;
-$inverse-support-03: #f1c21b;
-$warning-background: #fff8e1;
-$openmrs-background-grey: #f4f4f4;
-$danger: #da1e28;
-$interactive-01: #0f62fe;
 $brand-teal-01: #3197D9;
 $ohri-input-width: 22.313rem;
 $ohri-home-background: #ededed;
 $button-primary: #0078A6;
 
-.productiveHeading01 {
-  @include carbon--type-style("productive-heading-01");
-}
-
-.productiveHeading02 {
-  @include carbon--type-style("productive-heading-02");
-}
-
-.productiveHeading03 {
-  @include carbon--type-style("productive-heading-03");
-}
-
-.productiveHeading04 {
-  @include carbon--type-style("productive-heading-04");
-}
-
-.productiveHeading05 {
-  @include carbon--type-style("productive-heading-05");
-}
-
-.productiveHeading06 {
-  @include carbon--type-style("productive-heading-06");
-}
-
-.bodyShort01 {
-  @include carbon--type-style("body-short-01");
-}
-
-.helperText01 {
-  @include carbon--type-style("helper-text-01");
-}
-
-.bodyShort02 {
-  @include carbon--type-style("body-short-02");
-}
-
-.bodyLong01 {
-  @include carbon--type-style("body-long-01");
-}
-
-.bodyLong02 {
-  @include carbon--type-style("body-long-02");
-}
-
-.label01 {
-  @include carbon--type-style("label-01");
-}
-
-.text01 {
-  color: $text-01;
-}
-
-.text02 {
-  color: $text-02;
-}
-
 aside {
-   background-color: $ui-02 !important;
+  background-color: $ui-02 !important;
+}
+
+.ohriForm {
+  :global(.tab-12rem) > button {
+    width: 12rem !important;
+  }
+
+  :global(.tab-14rem) > button {
+    width: 14rem !important;
+  }
+
+  :global(.tab-16rem) > button {
+    width: 16rem !important;
+  }
+
+  :global(.cds--overflow-menu) > div {
+    width: 15rem !important;
+  }  
 }
 
-// Login Overrides
-
-div[class*='-esm-login__styles__center'] > img {
-  width: 140px; // design has 120px
-}
-
-:global(.tab-12rem) > button {
-  width: 12rem !important;
-}
-
-:global(.tab-14rem) > button {
-  width: 14rem !important;
-}
-
-:global(.tab-16rem) > button {
-  width: 16rem !important;
-}
-
-:global(.cds--overflow-menu) > div {
-  width: 15rem !important;
-}