@openmrs/esm-implementer-tools-app 5.3.3-pre.1237 → 5.3.3-pre.1247

package/src/store.ts

@@ -1,4 +1,4 @@
-import { createGlobalStore } from "@openmrs/esm-framework";
+import { createGlobalStore } from '@openmrs/esm-framework';
 
 export interface ImplementerToolsStore {
   activeItemDescription?: ActiveItemDescription;
@@ -18,19 +18,16 @@ export interface ActiveItemDescription {
   source?: string;
 }
 
-export const implementerToolsStore = createGlobalStore<ImplementerToolsStore>(
-  "implementer-tools",
-  {
-    activeItemDescription: undefined,
-    configPathBeingEdited: null,
-    isOpen: getIsImplementerToolsOpen(),
-    hasAlert: false,
-    openTabIndex: 0,
-    isConfigToolbarOpen: getIsConfigToolbarOpen(),
-    isUIEditorEnabled: getIsUIEditorEnabled(),
-    isJsonModeEnabled: getIsJsonModeEnabled(),
-  }
-);
+export const implementerToolsStore = createGlobalStore<ImplementerToolsStore>('implementer-tools', {
+  activeItemDescription: undefined,
+  configPathBeingEdited: null,
+  isOpen: getIsImplementerToolsOpen(),
+  hasAlert: false,
+  openTabIndex: 0,
+  isConfigToolbarOpen: getIsConfigToolbarOpen(),
+  isUIEditorEnabled: getIsUIEditorEnabled(),
+  isJsonModeEnabled: getIsJsonModeEnabled(),
+});
 
 export const setHasAlert = (value: boolean) =>
   implementerToolsStore.setState((state) => ({
@@ -79,55 +76,33 @@ implementerToolsStore.subscribe((state) => {
 });
 
 function getIsImplementerToolsOpen(): boolean {
-  return (
-    JSON.parse(
-      localStorage.getItem("openmrs:openmrsImplementerToolsAreOpen") || "false"
-    ) ?? false
-  );
+  return JSON.parse(localStorage.getItem('openmrs:openmrsImplementerToolsAreOpen') || 'false') ?? false;
 }
 
 function setIsImplementerToolsOpen(value: boolean): void {
-  localStorage.setItem(
-    "openmrs:openmrsImplementerToolsAreOpen",
-    JSON.stringify(value)
-  );
+  localStorage.setItem('openmrs:openmrsImplementerToolsAreOpen', JSON.stringify(value));
 }
 
 function getIsConfigToolbarOpen(): boolean {
-  return (
-    JSON.parse(
-      localStorage.getItem("openmrs:openmrsImplementerToolsConfigOpen") ||
-        "true"
-    ) ?? true
-  );
+  return JSON.parse(localStorage.getItem('openmrs:openmrsImplementerToolsConfigOpen') || 'true') ?? true;
 }
 
 function setIsConfigToolbarOpen(value: boolean): void {
-  localStorage.setItem(
-    "openmrs:openmrsImplementerToolsConfigOpen",
-    JSON.stringify(value)
-  );
+  localStorage.setItem('openmrs:openmrsImplementerToolsConfigOpen', JSON.stringify(value));
 }
 
 function getIsUIEditorEnabled(): boolean {
-  return (
-    JSON.parse(localStorage.getItem("openmrs:isUIEditorEnabled") || "false") ??
-    false
-  );
+  return JSON.parse(localStorage.getItem('openmrs:isUIEditorEnabled') || 'false') ?? false;
 }
 
 function setIsUIEditorEnabled(enabled: boolean) {
-  localStorage.setItem("openmrs:isUIEditorEnabled", JSON.stringify(enabled));
+  localStorage.setItem('openmrs:isUIEditorEnabled', JSON.stringify(enabled));
 }
 
 function getIsJsonModeEnabled(): boolean {
-  return (
-    JSON.parse(
-      localStorage.getItem("openmrs:getIsJsonModeEnabled") || "false"
-    ) ?? false
-  );
+  return JSON.parse(localStorage.getItem('openmrs:getIsJsonModeEnabled') || 'false') ?? false;
 }
 
 function setIsJsonModeEnabled(enabled: boolean) {
-  localStorage.setItem("openmrs:getIsJsonModeEnabled", JSON.stringify(enabled));
+  localStorage.setItem('openmrs:getIsJsonModeEnabled', JSON.stringify(enabled));
 }

package/src/types.ts

@@ -1,4 +1,4 @@
-import type { OpenmrsAppRoutes } from "@openmrs/esm-framework";
+import type { OpenmrsAppRoutes } from '@openmrs/esm-framework';
 
 export type FrontendModule = OpenmrsAppRoutes & {
   name: string;

package/src/ui-editor/extension-overlay.component.tsx

@@ -1,6 +1,6 @@
-import React, { useEffect, useState } from "react";
-import { Portal } from "./portal";
-import styles from "./styles.css";
+import React, { useEffect, useState } from 'react';
+import { Portal } from './portal';
+import styles from './styles.css';
 
 export interface ExtensionOverlayProps {
   extensionName: string;
@@ -9,27 +9,19 @@ export interface ExtensionOverlayProps {
   domElement: HTMLElement | null;
 }
 
-export function ExtensionOverlay({
-  extensionName,
-  slotModuleName,
-  slotName,
-  domElement,
-}: ExtensionOverlayProps) {
+export function ExtensionOverlay({ extensionName, slotModuleName, slotName, domElement }: ExtensionOverlayProps) {
   const [overlayDomElement, setOverlayDomElement] = useState<HTMLElement>();
 
   useEffect(() => {
     if (domElement) {
-      const newOverlayDomElement = document.createElement("div");
+      const newOverlayDomElement = document.createElement('div');
       domElement.parentElement?.appendChild(newOverlayDomElement);
       setOverlayDomElement(newOverlayDomElement);
     }
   }, [domElement]);
 
   return overlayDomElement ? (
-    <Portal
-      key={`extension-overlay-${slotModuleName}-${slotName}-${extensionName}`}
-      el={overlayDomElement}
-    >
+    <Portal key={`extension-overlay-${slotModuleName}-${slotName}-${extensionName}`} el={overlayDomElement}>
       <Content extensionId={extensionName} />
     </Portal>
   ) : null;

package/src/ui-editor/portal.tsx

@@ -1,4 +1,4 @@
-import { createPortal } from "react-dom";
+import { createPortal } from 'react-dom';
 
 export function Portal({ el, children }) {
   return el ? createPortal(children, el) : null;

package/src/ui-editor/ui-editor.tsx

@@ -1,15 +1,11 @@
-import React from "react";
-import styles from "./styles.css";
-import {
-  getExtensionInternalStore,
-  useStore,
-  useStoreWithActions,
-} from "@openmrs/esm-framework/src/internal";
-import { Button } from "@carbon/react";
-import { Close } from "@carbon/react/icons";
-import { Portal } from "./portal";
-import { ExtensionOverlay } from "./extension-overlay.component";
-import { ImplementerToolsStore, implementerToolsStore } from "../store";
+import React from 'react';
+import styles from './styles.css';
+import { getExtensionInternalStore, useStore, useStoreWithActions } from '@openmrs/esm-framework/src/internal';
+import { Button } from '@carbon/react';
+import { Close } from '@carbon/react/icons';
+import { Portal } from './portal';
+import { ExtensionOverlay } from './extension-overlay.component';
+import { ImplementerToolsStore, implementerToolsStore } from '../store';
 
 export default function UiEditor() {
   const { slots, extensions } = useStore(getExtensionInternalStore());
@@ -23,7 +19,7 @@ export default function UiEditor() {
             <Portal
               key={`slot-overlay-${slotInfo.moduleName}-${slotName}`}
               el={document.querySelector(
-                `*[data-extension-slot-name="${slotName}"][data-extension-slot-module-name="${slotInfo.moduleName}"]`
+                `*[data-extension-slot-name="${slotName}"][data-extension-slot-module-name="${slotInfo.moduleName}"]`,
               )}
             >
               <SlotOverlay slotName={slotName} />
@@ -32,22 +28,19 @@ export default function UiEditor() {
         : null}
       {extensions
         ? Object.entries(extensions).map(([extensionName, extensionInfo]) =>
-            Object.entries(extensionInfo.instances).map(
-              ([slotModuleName, bySlotName]) =>
-                Object.entries(bySlotName).map(
-                  ([slotName, extensionInstance]) => (
-                    <ExtensionOverlay
-                      key={slotName}
-                      extensionName={extensionName}
-                      slotModuleName={slotModuleName}
-                      slotName={slotName}
-                      domElement={document.querySelector(
-                        `*[data-extension-slot-name="${slotName}"][data-extension-slot-module-name="${slotModuleName}"] *[data-extension-id="${extensionInstance.id}"]`
-                      )}
-                    />
-                  )
-                )
-            )
+            Object.entries(extensionInfo.instances).map(([slotModuleName, bySlotName]) =>
+              Object.entries(bySlotName).map(([slotName, extensionInstance]) => (
+                <ExtensionOverlay
+                  key={slotName}
+                  extensionName={extensionName}
+                  slotModuleName={slotModuleName}
+                  slotName={slotName}
+                  domElement={document.querySelector(
+                    `*[data-extension-slot-name="${slotName}"][data-extension-slot-module-name="${slotModuleName}"] *[data-extension-id="${extensionInstance.id}"]`,
+                  )}
+                />
+              )),
+            ),
           )
         : null}
     </>
@@ -58,7 +51,7 @@ export function SlotOverlay({ slotName }) {
   return (
     <>
       <div className={styles.slotOverlay}></div>
-      <div className={styles.slotName}>{"Slot: " + slotName}</div>
+      <div className={styles.slotName}>{'Slot: ' + slotName}</div>
     </>
   );
 }
@@ -70,10 +63,7 @@ const actions = {
 };
 
 export function ExitButton() {
-  const { toggleIsUIEditorEnabled } = useStoreWithActions(
-    implementerToolsStore,
-    actions
-  );
+  const { toggleIsUIEditorEnabled } = useStoreWithActions(implementerToolsStore, actions);
   return (
     <Button
       className={styles.exitButton}

package/webpack.config.js

@@ -1 +1 @@
-module.exports = require("openmrs/default-webpack-config");
+module.exports = require('openmrs/default-webpack-config');