(feat) Support for automatically overriding routes and Carbonize devt…

…ools (#816) Co-authored-by: Dennis Kigen <kigen.work@gmail.com>
openmrs · Dec 12, 2023 · 6e2e2f2 · 6e2e2f2
1 parent d5547e0
commit 6e2e2f2
Show file tree

Hide file tree

Showing 42 changed files with 1,325 additions and 108 deletions.
diff --git a/packages/apps/esm-devtools-app/jest.config.js b/packages/apps/esm-devtools-app/jest.config.js
@@ -1,11 +1,13 @@
 module.exports = {
   transform: {
-    '\\.tsx?$': ['@swc/jest'],
+    "\\.(m?j|t)sx?$": ["@swc/jest"],
   },
   setupFiles: ['<rootDir>/src/setup-tests.tsx'],
   moduleNameMapper: {
-    '\\.(css)$': 'identity-obj-proxy',
-    '@openmrs/esm-framework': '@openmrs/esm-framework/mock.tsx',
+    "lodash-es": "lodash",
+    "\\.(s?css)$": "identity-obj-proxy",
+    "@openmrs/esm-framework": "@openmrs/esm-framework/mock.tsx",
+    dexie: require.resolve("dexie"),
   },
   globals: {
     System: {

diff --git a/packages/apps/esm-devtools-app/package.json b/packages/apps/esm-devtools-app/package.json
@@ -40,16 +40,19 @@
     "@openmrs/esm-framework": "*",
     "react": "18.x",
     "react-dom": "18.x",
+    "react-i18next": "11.x",
     "rxjs": "6.x"
   },
   "devDependencies": {
     "@openmrs/esm-framework": "^5.3.2",
     "@openmrs/webpack-config": "^5.3.2",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "react-i18next": "^11.18.6",
     "webpack": "^5.88.0"
   },
   "dependencies": {
-    "@carbon/react": "~1.37.0"
+    "@carbon/react": "1.37.0",
+    "fuzzy": "^0.1.3"
   }
 }
diff --git a/packages/apps/esm-devtools-app/src/declarations.d.ts b/packages/apps/esm-devtools-app/src/declarations.d.ts
@@ -1,19 +1,5 @@
 declare module '@carbon/react';
-
-declare namespace JSX {
-  interface IntrinsicElements {
-    'import-map-overrides-list': any;
-  }
-}
-
-declare module '*.css' {
-  const styles: any;
-  export default styles;
-}
-
-declare module '*.scss' {
-  const styles: any;
-  export default styles;
-}
+declare module '*.css';
+declare module '*.scss';
 
 declare type SideNavProps = {};
diff --git a/packages/apps/esm-devtools-app/src/devtools/devtools-popup.component.tsx b/packages/apps/esm-devtools-app/src/devtools/devtools-popup.component.tsx
@@ -1,15 +1,23 @@
 import React from 'react';
+import { Button } from '@carbon/react';
+import { Close } from '@carbon/react/icons';
 import ImportMap from './import-map.component';
-import styles from './devtools-popup.styles.css';
+import styles from './devtools-popup.styles.scss';
 
 export default function DevToolsPopup(props: DevToolsPopupProps) {
   return (
     <div className={styles.popup}>
       <ImportMap toggleOverridden={props.toggleOverridden} />
       <div className={styles.farRight}>
-        <button onClick={props.close} className={styles.closeButton}>
-          {'\u24e7'}
-        </button>
+        <Button
+          className={styles.closeButton}
+          kind="secondary"
+          renderIcon={(props) => <Close size={16} {...props} />}
+          iconDescription="Close"
+          onClick={props.close}
+          hasIconOnly
+          size="sm"
+        />
       </div>
     </div>
   );

diff --git a/...pp/src/devtools/devtools-popup.styles.css → ...p/src/devtools/devtools-popup.styles.scss b/...pp/src/devtools/devtools-popup.styles.css → ...p/src/devtools/devtools-popup.styles.scss
@@ -1,18 +1,16 @@
+@import '~@openmrs/esm-styleguide/src/vars';
+
 .popup {
   position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 50%;
-  z-index: 100000;
-  background-color: black;
-  color: white;
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
+  z-index: 8000;
+  background-color: $ui-03;
+  border-top: 2px solid $ui-05;
+  color: $color-gray-100;
   box-sizing: border-box;
-  font-family: sans serif;
-  overflow-y: auto;
 }
 
 .tabs {
@@ -40,28 +38,7 @@
 }
 
 .closeButton {
-  border: none;
-  margin: 0;
-  padding: 0;
-  width: auto;
-  overflow: visible;
-  height: inherit;
-  background: transparent;
-
-  /* inherit font & color from ancestor */
-  color: inherit;
-  font: inherit;
-  text-align: inherit;
-
-  /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
-  line-height: normal;
-
-  /* Corrects font smoothing for webkit */
-  -webkit-font-smoothing: inherit;
-  -moz-osx-font-smoothing: inherit;
-
-  /* Corrects inability to style clickable `input` types in iOS */
-  -webkit-appearance: none;
+  align-items: center;
 }
 
 .closeButton:focus {

diff --git a/packages/apps/esm-devtools-app/src/devtools/devtools.component.tsx b/packages/apps/esm-devtools-app/src/devtools/devtools.component.tsx
@@ -22,7 +22,9 @@ function DevTools() {
         className={classNames(styles.devtoolsTriggerButton, {
           [styles.overridden]: isOverridden,
         })}
-      />
+      >
+        {'{\u00B7\u00B7\u00B7}'}
+      </div>
       {devToolsOpen && <DevToolsPopup close={toggleDevTools} toggleOverridden={toggleOverridden} />}
     </>
   );

diff --git a/packages/apps/esm-devtools-app/src/devtools/devtools.styles.css b/packages/apps/esm-devtools-app/src/devtools/devtools.styles.css
@@ -1,12 +1,15 @@
 .devtoolsTriggerButton {
-  z-index: 100000;
+  z-index: 7900;
   background-color: #c6c6c6;
   height: 40px !important;
   width: 40px !important;
   bottom: 10px;
   right: 8px;
   position: fixed;
-  border-radius: 2px;
+  border-radius: 5px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .overridden {