(feat) O3-3774: Add implementation for the Nav Group

packages/apps/esm-primary-navigation-app/src/components/generic-link/generic-link.component.tsx

@@ -20,6 +20,6 @@ export interface GenericLinkConfig {
 }
 
 export default function GenericLink() {
-  const config = useConfig() as GenericLinkConfig;
+  const config = useConfig<GenericLinkConfig>();
   return <ConfigurableLink to={config.target}>{config.title}</ConfigurableLink>;
 }

packages/apps/esm-primary-navigation-app/src/components/nav-group/nav-group.component.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Accordion, AccordionItem } from '@carbon/react';
+import { ExtensionSlot, useConfig, Type } from '@openmrs/esm-framework';
+
+export const navGroupFeatureName = 'Nav Group';
+
+export const navGroupConfigSchema = {
+  title: {
+    _type: Type.String,
+    _description: 'The title of the nav group.',
+    _default: 'My Group',
+  },
+  slotName: {
+    _type: Type.String,
+    _description: 'The name of the slot to create, which links can be added to.',
+  },
+  isExpanded: {
+    _type: Type.Boolean,
+    _description: 'The boolean to determine whether the nav group is expanded or not.',
+    _default: false,
+  },
+};
+
+export interface NavGroupConfig {
+  title: string;
+  slotName: string;
+  isExpanded?: boolean;
+}
+
+interface NavGroupProps {
+  basePath?: string;
+}
+
+export function NavGroup({ basePath }: NavGroupProps) {
+  const { t } = useTranslation();
+  const { title, isExpanded, slotName } = useConfig<NavGroupConfig>();
+
+  return (
+    <Accordion>
+      <AccordionItem open={isExpanded} title={t(title)}>
+        <ExtensionSlot name={slotName ?? `nav-group-${title}`} state={{ basePath }} />
+      </AccordionItem>
+    </Accordion>
+  );
+}

packages/apps/esm-primary-navigation-app/src/index.ts

@@ -14,6 +14,7 @@ import primaryNavRootComponent from './root.component';
 import userPanelComponent from './components/user-panel-switcher-item/user-panel-switcher.component';
 import changeLanguageLinkComponent from './components/change-language/change-language-link.extension';
 import offlineBannerComponent from './components/offline-banner/offline-banner.component';
+import { NavGroup, navGroupConfigSchema } from './components/nav-group/nav-group.component';
 import genericLinkComponent, { genericLinkConfigSchema } from './components/generic-link/generic-link.component';
 
 export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
@@ -26,6 +27,7 @@ const options = {
 export function startupApp() {
   defineConfigSchema(moduleName, configSchema);
   defineExtensionConfigSchema('link', genericLinkConfigSchema);
+  defineExtensionConfigSchema('global-nav-group', navGroupConfigSchema);
 
   setupOfflineSync(userPropertyChange, [], syncUserLanguagePreference);
 }
@@ -49,6 +51,8 @@ export const linkComponent = getSyncLifecycle(genericLinkComponent, {
   moduleName,
 });
 
+export const navGroup = getSyncLifecycle(NavGroup, options);
+
 export const changeLanguageModal = getAsyncLifecycle(
   () => import('./components/change-language/change-language.modal'),
   options,

packages/apps/esm-primary-navigation-app/src/routes.json

@@ -49,6 +49,12 @@
       "component": "linkComponent",
       "online": true,
       "offline": true
+    },
+    {
+      "name": "nav-group",
+      "component": "navGroup",
+      "online": true,
+      "offline": true
     }
   ],
   "modals": [

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

@@ -1984,7 +1984,7 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-styleguide/src/left-nav/index.tsx:31](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/left-nav/index.tsx#L31)
+[packages/framework/esm-styleguide/src/left-nav/index.tsx:30](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/left-nav/index.tsx#L30)
 
 ___
 
@@ -6256,7 +6256,7 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-styleguide/src/left-nav/index.tsx:19](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/left-nav/index.tsx#L19)
+[packages/framework/esm-styleguide/src/left-nav/index.tsx:18](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/left-nav/index.tsx#L18)
 
 ___
 
@@ -6505,7 +6505,7 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-styleguide/src/left-nav/index.tsx:23](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/left-nav/index.tsx#L23)
+[packages/framework/esm-styleguide/src/left-nav/index.tsx:22](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/left-nav/index.tsx#L22)
 
 ___
 
@@ -7028,7 +7028,7 @@ ___
 
 ### useOpenmrsSWR
 
-▸ **useOpenmrsSWR**<`DataType`, `ErrorType`\>(`key`, `options?`): `SWRResponse`<[`FetchResponse`](interfaces/FetchResponse.md)<`DataType`\>, `ErrorType`, `undefined` \| `Partial`<`PublicConfiguration`<[`FetchResponse`](interfaces/FetchResponse.md)<`DataType`\>, `ErrorType`, `BareFetcher`<[`FetchResponse`](interfaces/FetchResponse.md)<`DataType`\>\>\>\>\>
+▸ **useOpenmrsSWR**<`DataType`, `ErrorType`\>(`key`, `options?`): `SWRResponse`<[`FetchResponse`](interfaces/FetchResponse.md)<`DataType`\>, `ErrorType`, `undefined` \| `SWRConfiguration`<[`FetchResponse`](interfaces/FetchResponse.md)<`DataType`\>, `ErrorType`, `BareFetcher`<[`FetchResponse`](interfaces/FetchResponse.md)<`DataType`\>\>\>\>
 
 **`beta`**
 
@@ -7081,7 +7081,7 @@ function MyComponent() {
 
 #### Returns
 
-`SWRResponse`<[`FetchResponse`](interfaces/FetchResponse.md)<`DataType`\>, `ErrorType`, `undefined` \| `Partial`<`PublicConfiguration`<[`FetchResponse`](interfaces/FetchResponse.md)<`DataType`\>, `ErrorType`, `BareFetcher`<[`FetchResponse`](interfaces/FetchResponse.md)<`DataType`\>\>\>\>\>
+`SWRResponse`<[`FetchResponse`](interfaces/FetchResponse.md)<`DataType`\>, `ErrorType`, `undefined` \| `SWRConfiguration`<[`FetchResponse`](interfaces/FetchResponse.md)<`DataType`\>, `ErrorType`, `BareFetcher`<[`FetchResponse`](interfaces/FetchResponse.md)<`DataType`\>\>\>\>
 
 #### Defined in
 

packages/framework/esm-framework/docs/interfaces/OpenmrsDatePickerProps.md

@@ -144,7 +144,7 @@ Omit.autoFocus
 
 #### Defined in
 
-node_modules/@react-types/shared/src/events.d.ts:116
+node_modules/@react-types/shared/src/events.d.ts:120
 
 ___
 
@@ -160,7 +160,7 @@ Omit.children
 
 #### Defined in
 
-node_modules/react-aria-components/dist/types.d.ts:54
+node_modules/react-aria-components/dist/types.d.ts:56
 
 ___
 
@@ -544,7 +544,7 @@ Omit.shouldCloseOnSelect
 
 #### Defined in
 
-node_modules/@react-stately/datepicker/dist/types.d.ts:12
+node_modules/@react-stately/datepicker/dist/types.d.ts:21
 
 ___
 
@@ -590,7 +590,7 @@ Omit.slot
 
 #### Defined in
 
-node_modules/react-aria-components/dist/types.d.ts:71
+node_modules/react-aria-components/dist/types.d.ts:73
 
 ___
 
@@ -606,7 +606,7 @@ Omit.style
 
 #### Defined in
 
-node_modules/react-aria-components/dist/types.d.ts:48
+node_modules/react-aria-components/dist/types.d.ts:50
 
 ___
 
@@ -626,7 +626,7 @@ Omit.validationBehavior
 
 #### Defined in
 
-node_modules/react-aria-components/dist/types.d.ts:82
+node_modules/react-aria-components/dist/types.d.ts:84
 
 ___
 
@@ -690,7 +690,7 @@ Omit.onBlur
 
 #### Defined in
 
-node_modules/@react-types/shared/src/events.d.ts:81
+node_modules/@react-types/shared/src/events.d.ts:85
 
 ___
 
@@ -760,7 +760,7 @@ Omit.onFocus
 
 #### Defined in
 
-node_modules/@react-types/shared/src/events.d.ts:79
+node_modules/@react-types/shared/src/events.d.ts:83
 
 ___
 
@@ -786,7 +786,7 @@ Omit.onFocusChange
 
 #### Defined in
 
-node_modules/@react-types/shared/src/events.d.ts:83
+node_modules/@react-types/shared/src/events.d.ts:87
 
 ___
 
@@ -812,7 +812,7 @@ Omit.onKeyDown
 
 #### Defined in
 
-node_modules/@react-types/shared/src/events.d.ts:72
+node_modules/@react-types/shared/src/events.d.ts:76
 
 ___
 
@@ -838,7 +838,7 @@ Omit.onKeyUp
 
 #### Defined in
 
-node_modules/@react-types/shared/src/events.d.ts:74
+node_modules/@react-types/shared/src/events.d.ts:78
 
 ___
 

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

@@ -1,4 +1,4 @@
-import { defineConfigSchema } from '@openmrs/esm-config';
+import { defineConfigSchema, defineExtensionConfigSchema } from '@openmrs/esm-config';
 import { setupLogo } from './logo';
 import { setupIcons } from './icons/icon-registration';
 import { setupBranding } from './brand';

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

@@ -2,7 +2,6 @@
 import React from 'react';
 import { ExtensionSlot, useStore } from '@openmrs/esm-react-utils';
 import { createGlobalStore } from '@openmrs/esm-state';
-import type { SideNavProps } from '@carbon/react';
 import { SideNav } from '@carbon/react';
 import styles from './left-nav.module.scss';