Create unified left nav system

packages/apps/esm-devtools-app/src/declarations.d.tsx

@@ -8,3 +8,8 @@ declare module "*.css" {
   const styles: any;
   export default styles;
 }
+
+declare module "*.scss" {
+  const styles: any;
+  export default styles;
+}

packages/apps/esm-primary-navigation-app/src/components/navbar-header-panels/side-menu-panel.component.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useMemo, useRef } from "react";
-import styles from "./side-menu-panel.component.scss";
-import { ExtensionSlot, usePatient } from "@openmrs/esm-framework";
-import { SideNav, SideNavProps } from "carbon-components-react";
+import { LeftNavMenu, usePatient } from "@openmrs/esm-framework";
+import { SideNavProps } from "carbon-components-react";
 
 interface SideMenuPanelProps extends SideNavProps {
   hidePanel: () => void;
@@ -12,12 +11,6 @@ const SideMenuPanel: React.FC<SideMenuPanelProps> = ({
   hidePanel,
 }) => {
   const menuRef = useRef(null);
-  const { patientUuid } = usePatient();
-  const patientChartBasePath = `${window.spaBase}/patient/:patientUuid/chart`;
-  const basePath = useMemo(
-    () => patientChartBasePath.replace(":patientUuid", patientUuid),
-    [patientUuid]
-  );
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
@@ -35,23 +28,7 @@ const SideMenuPanel: React.FC<SideMenuPanelProps> = ({
     return window.addEventListener("popstate", hidePanel);
   }, [hidePanel]);
 
-  return (
-    expanded && (
-      <SideNav
-        ref={menuRef}
-        expanded
-        aria-label="Menu"
-        isChildOfHeader={expanded}
-        className={styles.link}
-      >
-        <ExtensionSlot extensionSlotName="global-nav-menu-slot" />
-        <ExtensionSlot
-          extensionSlotName="patient-chart-dashboard-slot"
-          state={{ basePath }}
-        />
-      </SideNav>
-    )
-  );
+  return expanded && <LeftNavMenu ref={menuRef} isChildOfHeader={expanded} />;
 };
 
 export default SideMenuPanel;

packages/framework/esm-framework/docs/API.md

@@ -139,11 +139,13 @@
 
 ### UI Functions
 
+- [setLeftNav](API.md#setleftnav)
 - [showModal](API.md#showmodal)
 - [showNotification](API.md#shownotification)
 - [showToast](API.md#showtoast)
 - [subscribeNotificationShown](API.md#subscribenotificationshown)
 - [subscribeToastShown](API.md#subscribetoastshown)
+- [unsetLeftNav](API.md#unsetleftnav)
 - [useBodyScrollLock](API.md#usebodyscrolllock)
 - [useLayoutType](API.md#uselayouttype)
 - [useOnClickOutside](API.md#useonclickoutside)
@@ -656,6 +658,18 @@ ___
 
 [packages/framework/esm-api/src/openmrs-backend-dependencies.ts:1](https://github.com/openmrs/openmrs-esm-core/blob/master/packages/framework/esm-api/src/openmrs-backend-dependencies.ts#L1)
 
+___
+
+## UI Variables
+
+### LeftNavMenu
+
+• **LeftNavMenu**: `ForwardRefExoticComponent`<`SideNavProps` & `RefAttributes`<`HTMLElement`\>\>
+
+#### Defined in
+
+[packages/framework/esm-styleguide/src/left-nav/index.tsx:30](https://github.com/openmrs/openmrs-esm-core/blob/master/packages/framework/esm-styleguide/src/left-nav/index.tsx#L30)
+
 ## API Functions
 
 ### fetchCurrentPatient
@@ -3316,6 +3330,26 @@ ___
 
 ## UI Functions
 
+### setLeftNav
+
+▸ **setLeftNav**(`__namedParameters`): `void`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `__namedParameters` | `Object` |
+
+#### Returns
+
+`void`
+
+#### Defined in
+
+[packages/framework/esm-styleguide/src/left-nav/index.tsx:18](https://github.com/openmrs/openmrs-esm-core/blob/master/packages/framework/esm-styleguide/src/left-nav/index.tsx#L18)
+
+___
+
 ### showModal
 
 ▸ **showModal**(`extensionId`, `props?`, `onClose?`): () => `void`
@@ -3444,6 +3478,26 @@ ___
 
 ___
 
+### unsetLeftNav
+
+▸ **unsetLeftNav**(`name`): `void`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `name` | `any` |
+
+#### Returns
+
+`void`
+
+#### Defined in
+
+[packages/framework/esm-styleguide/src/left-nav/index.tsx:22](https://github.com/openmrs/openmrs-esm-core/blob/master/packages/framework/esm-styleguide/src/left-nav/index.tsx#L22)
+
+___
+
 ### useBodyScrollLock
 
 ▸ **useBodyScrollLock**(`active`): `void`

packages/framework/esm-framework/mock.tsx

@@ -297,3 +297,7 @@ export const useVisitTypes = jest.fn(() => []);
 export const showNotification = jest.fn();
 export const showToast = jest.fn();
 export const showModal = jest.fn();
+
+export const LeftNavMenu = jest.fn();
+export const setLeftNav = jest.fn();
+export const unsetLeftNav = jest.fn();

packages/framework/esm-styleguide/src/declarations.d.ts

@@ -2,3 +2,5 @@ declare module "*.svg" {
   const content: string;
   export = content;
 }
+declare module "*.css";
+declare module "*.scss";

packages/framework/esm-styleguide/src/index.ts

@@ -7,6 +7,7 @@ export * from "./spinner";
 export * from "./notifications";
 export * from "./toasts";
 export * from "./modals";
+export * from "./left-nav";
 
 setupBranding();
 setupLogo();

packages/framework/esm-styleguide/src/left-nav/index.tsx

@@ -0,0 +1,49 @@
+/** @module @category UI */
+import React from "react";
+import { ExtensionSlot, useStore } from "@openmrs/esm-react-utils";
+import { createGlobalStore } from "@openmrs/esm-state";
+import { SideNav, SideNavProps } from "carbon-components-react";
+import styles from "./left-nav.module.scss";
+
+interface LeftNavStore {
+  slotName: string | null;
+  basePath: string;
+}
+
+const leftNavStore = createGlobalStore<LeftNavStore>("left-nav", {
+  slotName: null,
+  basePath: window.spaBase,
+});
+
+export function setLeftNav({ name, basePath }) {
+  leftNavStore.setState({ slotName: name, basePath });
+}
+
+export function unsetLeftNav(name) {
+  if (leftNavStore.getState().slotName == name) {
+    leftNavStore.setState({ slotName: null });
+  }
+}
+
+type LeftNavMenuProps = SideNavProps;
+
+export const LeftNavMenu = React.forwardRef<HTMLElement, LeftNavMenuProps>(
+  (props, ref) => {
+    const { slotName, basePath } = useStore(leftNavStore);
+
+    return (
+      <SideNav
+        ref={ref}
+        expanded
+        aria-label="Left navigation"
+        className={styles.link}
+        {...props}
+      >
+        <ExtensionSlot extensionSlotName="global-nav-menu-slot" />
+        {slotName ? (
+          <ExtensionSlot extensionSlotName={slotName} state={{ basePath }} />
+        ) : null}
+      </SideNav>
+    );
+  }
+);

packages/framework/esm-styleguide/src/left-nav/left-nav.module.scss

@@ -0,0 +1,34 @@
+@import "../vars";
+@import "carbon-components/scss/globals/scss/typography.scss";
+@import "~carbon-components/scss/globals/scss/_spacing.scss";
+
+.link > div a:nth-child(1) {
+  height: 3rem;
+  padding: 1.5rem 0 1.5rem 1.2rem;
+  color: $ui-04;
+  border-left: 0.25rem solid transparent;
+  @include carbon--type-style("productive-heading-01");
+}
+
+:global(.omrs-breakpoint-gt-tablet) .link > div {
+  padding-top: 1rem;
+}
+
+:global(.omrs-breakpoint-gt-tablet) .link > div a:nth-child(1) {
+  height: 2rem;
+  color: $ui-04;
+  padding: 0 0 0 1rem;
+}
+
+.link > div a:nth-child(1):hover {
+  background-color: $ui-03;
+  color: $ui-05;
+  border-left: var(--brand-01);
+}
+
+.link > div a:nth-child(1):focus {
+  background-color: $ui-03;
+  outline: none;
+  color: $ui-05;
+  border-left: var(--brand-01);
+}

packages/framework/esm-styleguide/src/public.ts

@@ -10,3 +10,4 @@ export {
   ToastType,
   ToastNotificationMeta,
 } from "./toasts/toast.component";
+export * from "./left-nav";

packages/shell/esm-app-shell/webpack.config.js

@@ -68,10 +68,6 @@ module.exports = (env, argv = {}) => {
   const mode = argv.mode || process.env.NODE_ENV || production;
   const outDir = mode === production ? "dist" : "lib";
   const isProd = mode === "production";
-  const styleLoader = isProd
-    ? { loader: require.resolve(MiniCssExtractPlugin.loader) }
-    : { loader: require.resolve("style-loader") };
-  const cssLoader = { loader: require.resolve("css-loader") };
   const appPatterns = [];
   const coreImportmap = {
     imports: {},
@@ -140,8 +136,14 @@ module.exports = (env, argv = {}) => {
     module: {
       rules: [
         {
-          test: /\.css$/,
-          use: [styleLoader, cssLoader],
+          test: /\.s?css$/,
+          use: [
+            isProd
+              ? { loader: require.resolve(MiniCssExtractPlugin.loader) }
+              : { loader: require.resolve("style-loader") },
+            { loader: require.resolve("css-loader") },
+            { loader: require.resolve("sass-loader") },
+          ],
         },
         {
           test: /\.(woff|woff2|png)?$/,
@@ -174,7 +176,7 @@ module.exports = (env, argv = {}) => {
     },
     resolve: {
       mainFields: ["module", "main"],
-      extensions: [".ts", ".tsx", ".js", ".jsx"],
+      extensions: [".ts", ".tsx", ".js", ".jsx", ".css", ".scss"],
       fallback: {
         http: false,
         stream: false,