From 11445502607fe2e32b9f5954010c7c3d1b02376f Mon Sep 17 00:00:00 2001 From: Brandon Istenes Date: Mon, 25 Apr 2022 18:32:27 -0700 Subject: [PATCH 1/7] Refactored left nav MVP --- .../side-menu-panel.component.tsx | 23 ++------- .../esm-styleguide/src/declarations.d.ts | 2 + .../framework/esm-styleguide/src/index.ts | 1 + .../esm-styleguide/src/left-nav/index.tsx | 49 +++++++++++++++++++ .../src/left-nav/left-nav.module.scss | 34 +++++++++++++ .../framework/esm-styleguide/src/public.ts | 1 + .../shell/esm-app-shell/webpack.config.js | 16 +++--- 7 files changed, 99 insertions(+), 27 deletions(-) create mode 100644 packages/framework/esm-styleguide/src/left-nav/index.tsx create mode 100644 packages/framework/esm-styleguide/src/left-nav/left-nav.module.scss diff --git a/packages/apps/esm-primary-navigation-app/src/components/navbar-header-panels/side-menu-panel.component.tsx b/packages/apps/esm-primary-navigation-app/src/components/navbar-header-panels/side-menu-panel.component.tsx index f1025e49f..653e05ef5 100644 --- a/packages/apps/esm-primary-navigation-app/src/components/navbar-header-panels/side-menu-panel.component.tsx +++ b/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; @@ -35,23 +34,7 @@ const SideMenuPanel: React.FC = ({ return window.addEventListener("popstate", hidePanel); }, [hidePanel]); - return ( - expanded && ( - - - - - ) - ); + return expanded && ; }; export default SideMenuPanel; diff --git a/packages/framework/esm-styleguide/src/declarations.d.ts b/packages/framework/esm-styleguide/src/declarations.d.ts index fb4ce7e1d..716840f47 100644 --- a/packages/framework/esm-styleguide/src/declarations.d.ts +++ b/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"; diff --git a/packages/framework/esm-styleguide/src/index.ts b/packages/framework/esm-styleguide/src/index.ts index dd90aaab6..e69b4a29e 100644 --- a/packages/framework/esm-styleguide/src/index.ts +++ b/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(); diff --git a/packages/framework/esm-styleguide/src/left-nav/index.tsx b/packages/framework/esm-styleguide/src/left-nav/index.tsx new file mode 100644 index 000000000..c178d0916 --- /dev/null +++ b/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("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( + (props, ref) => { + const { slotName, basePath } = useStore(leftNavStore); + + return ( + + + {slotName ? ( + + ) : null} + + ); + } +); diff --git a/packages/framework/esm-styleguide/src/left-nav/left-nav.module.scss b/packages/framework/esm-styleguide/src/left-nav/left-nav.module.scss new file mode 100644 index 000000000..b1f687a3c --- /dev/null +++ b/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); +} diff --git a/packages/framework/esm-styleguide/src/public.ts b/packages/framework/esm-styleguide/src/public.ts index 0805617d4..ac5b9c19c 100644 --- a/packages/framework/esm-styleguide/src/public.ts +++ b/packages/framework/esm-styleguide/src/public.ts @@ -10,3 +10,4 @@ export { ToastType, ToastNotificationMeta, } from "./toasts/toast.component"; +export * from "./left-nav"; diff --git a/packages/shell/esm-app-shell/webpack.config.js b/packages/shell/esm-app-shell/webpack.config.js index dda96d67a..740752930 100644 --- a/packages/shell/esm-app-shell/webpack.config.js +++ b/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, From 5f0d564fcfbfbcf8f285cfe4ae9e435a0e71fb09 Mon Sep 17 00:00:00 2001 From: Brandon Istenes Date: Mon, 25 Apr 2022 18:33:27 -0700 Subject: [PATCH 2/7] Docs --- packages/framework/esm-framework/docs/API.md | 54 ++++++++++++++++++++ 1 file changed, 54 insertions(+) diff --git a/packages/framework/esm-framework/docs/API.md b/packages/framework/esm-framework/docs/API.md index 54fab69db..6c3bb066b 100644 --- a/packages/framework/esm-framework/docs/API.md +++ b/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` From 209260a24471c908a7aaf4f14718effc9c1c5fb7 Mon Sep 17 00:00:00 2001 From: Brandon Istenes Date: Mon, 25 Apr 2022 18:53:09 -0700 Subject: [PATCH 3/7] Add mock --- packages/framework/esm-framework/mock.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/framework/esm-framework/mock.tsx b/packages/framework/esm-framework/mock.tsx index 7f358e74f..be0383713 100644 --- a/packages/framework/esm-framework/mock.tsx +++ b/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().mockReturnValue("left nav menu"); +export const setLeftNav = jest.fn(); +export const unsetLeftNav = jest.fn(); From 0144ba43c0add3fc378a5083b117d946c79ba0d4 Mon Sep 17 00:00:00 2001 From: Brandon Istenes Date: Mon, 25 Apr 2022 18:53:23 -0700 Subject: [PATCH 4/7] Clean up --- .../navbar-header-panels/side-menu-panel.component.tsx | 6 ------ packages/framework/esm-framework/mock.tsx | 2 +- 2 files changed, 1 insertion(+), 7 deletions(-) diff --git a/packages/apps/esm-primary-navigation-app/src/components/navbar-header-panels/side-menu-panel.component.tsx b/packages/apps/esm-primary-navigation-app/src/components/navbar-header-panels/side-menu-panel.component.tsx index 653e05ef5..4476240ce 100644 --- a/packages/apps/esm-primary-navigation-app/src/components/navbar-header-panels/side-menu-panel.component.tsx +++ b/packages/apps/esm-primary-navigation-app/src/components/navbar-header-panels/side-menu-panel.component.tsx @@ -11,12 +11,6 @@ const SideMenuPanel: React.FC = ({ 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) => { diff --git a/packages/framework/esm-framework/mock.tsx b/packages/framework/esm-framework/mock.tsx index be0383713..f734b2474 100644 --- a/packages/framework/esm-framework/mock.tsx +++ b/packages/framework/esm-framework/mock.tsx @@ -298,6 +298,6 @@ export const showNotification = jest.fn(); export const showToast = jest.fn(); export const showModal = jest.fn(); -export const LeftNavMenu = jest.fn().mockReturnValue("left nav menu"); +export const LeftNavMenu = jest.fn(); export const setLeftNav = jest.fn(); export const unsetLeftNav = jest.fn(); From 050552af01bb7fca601e639a0fa9e1d19406c80f Mon Sep 17 00:00:00 2001 From: Brandon Istenes Date: Mon, 25 Apr 2022 19:15:44 -0700 Subject: [PATCH 5/7] Fixup --- packages/apps/esm-devtools-app/src/declarations.d.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/apps/esm-devtools-app/src/declarations.d.tsx b/packages/apps/esm-devtools-app/src/declarations.d.tsx index 7ea0a6965..712eee978 100644 --- a/packages/apps/esm-devtools-app/src/declarations.d.tsx +++ b/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; +} From a6817ae9ac3c9d775fa52092fdabd8a25771ed9a Mon Sep 17 00:00:00 2001 From: Brandon Istenes Date: Tue, 26 Apr 2022 08:09:06 -0700 Subject: [PATCH 6/7] Fixup --- .../navbar-header-panels/side-menu-panel.component.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/apps/esm-primary-navigation-app/src/components/navbar-header-panels/side-menu-panel.component.tsx b/packages/apps/esm-primary-navigation-app/src/components/navbar-header-panels/side-menu-panel.component.tsx index 4476240ce..423fb8f4b 100644 --- a/packages/apps/esm-primary-navigation-app/src/components/navbar-header-panels/side-menu-panel.component.tsx +++ b/packages/apps/esm-primary-navigation-app/src/components/navbar-header-panels/side-menu-panel.component.tsx @@ -28,7 +28,7 @@ const SideMenuPanel: React.FC = ({ return window.addEventListener("popstate", hidePanel); }, [hidePanel]); - return expanded && ; + return expanded && ; }; export default SideMenuPanel; From 9ee41f9d1cefbb2df6fbaea16bf7cbb91c54f6f7 Mon Sep 17 00:00:00 2001 From: Brandon Istenes Date: Tue, 26 Apr 2022 09:36:05 -0700 Subject: [PATCH 7/7] Add SCSS support to esm-framework webpack --- packages/framework/esm-framework/webpack.config.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/framework/esm-framework/webpack.config.js b/packages/framework/esm-framework/webpack.config.js index df48b7484..42f0f3348 100644 --- a/packages/framework/esm-framework/webpack.config.js +++ b/packages/framework/esm-framework/webpack.config.js @@ -19,10 +19,18 @@ module.exports = (env) => ({ exclude: /(node_modules|bower_components)/, use: "swc-loader", }, + { + test: /\.s?css$/, + use: [ + { loader: require.resolve("style-loader") }, + { loader: require.resolve("css-loader") }, + { loader: require.resolve("sass-loader") }, + ], + }, ], }, resolve: { - extensions: [".ts", ".js", ".tsx", ".jsx"], + extensions: [".ts", ".js", ".tsx", ".jsx", ".scss"], }, plugins: [ new SystemJSPublicPathWebpackPlugin(),