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

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

@@ -200,12 +200,14 @@
 ### UI Functions
 
 - [CustomOverflowMenu](API.md#customoverflowmenu)
+- [GenericNavGroup](API.md#genericnavgroup)
 - [PatientBannerActionsMenu](API.md#patientbanneractionsmenu)
 - [PatientBannerContactDetails](API.md#patientbannercontactdetails)
 - [PatientBannerPatientInfo](API.md#patientbannerpatientinfo)
 - [PatientBannerToggleContactDetailsButton](API.md#patientbannertogglecontactdetailsbutton)
 - [PatientPhoto](API.md#patientphoto)
 - [isDesktop](API.md#isdesktop)
+- [registerNavGroup](API.md#registernavgroup)
 - [setLeftNav](API.md#setleftnav)
 - [showActionableNotification](API.md#showactionablenotification)
 - [showModal](API.md#showmodal)
@@ -219,6 +221,7 @@
 - [unsetLeftNav](API.md#unsetleftnav)
 - [useBodyScrollLock](API.md#usebodyscrolllock)
 - [useLayoutType](API.md#uselayouttype)
+- [useNavGroups](API.md#usenavgroups)
 - [useOnClickOutside](API.md#useonclickoutside)
 - [usePagination](API.md#usepagination)
 - [usePatientPhoto](API.md#usepatientphoto)
@@ -1984,7 +1987,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:32](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/left-nav/index.tsx#L32)
 
 ___
 
@@ -2058,6 +2061,29 @@ This provides a light background for form inputs on tablets, in accordance with
 
 ___
 
+### genericNavGroupConfigSchema
+
+• `Const` **genericNavGroupConfigSchema**: `Object`
+
+#### Type declaration
+
+| Name | Type |
+| :------ | :------ |
+| `slotName` | { `_default`: `string` = 'my-group-nav-slot'; `_description`: `string` = 'The name of the slot to create, which links can be added to.'; `_type`: [`Type`](enums/Type.md) = Type.String } |
+| `slotName._default` | `string` |
+| `slotName._description` | `string` |
+| `slotName._type` | [`Type`](enums/Type.md) |
+| `title` | { `_default`: `string` = 'My Group'; `_description`: `string` = 'The title of the nav group.'; `_type`: [`Type`](enums/Type.md) = Type.String } |
+| `title._default` | `string` |
+| `title._description` | `string` |
+| `title._type` | [`Type`](enums/Type.md) |
+
+#### Defined in
+
+[packages/framework/esm-styleguide/src/left-nav/generic-nav-group.component.tsx:7](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/left-nav/generic-nav-group.component.tsx#L7)
+
+___
+
 ## Workspace Variables
 
 ### ActionMenuButton
@@ -6116,6 +6142,26 @@ ___
 
 ___
 
+### GenericNavGroup
+
+▸ **GenericNavGroup**(`__namedParameters`): `Element`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `__namedParameters` | `GenericNavGroupProps` |
+
+#### Returns
+
+`Element`
+
+#### Defined in
+
+[packages/framework/esm-styleguide/src/left-nav/generic-nav-group.component.tsx:29](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/left-nav/generic-nav-group.component.tsx#L29)
+
+___
+
 ### PatientBannerActionsMenu
 
 ▸ **PatientBannerActionsMenu**(`__namedParameters`): `Element`
@@ -6240,6 +6286,26 @@ ___
 
 ___
 
+### registerNavGroup
+
+▸ **registerNavGroup**(`slotName`): `void`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `slotName` | `string` |
+
+#### Returns
+
+`void`
+
+#### Defined in
+
+[packages/framework/esm-styleguide/src/left-nav/nav-group.ts:13](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/left-nav/nav-group.ts#L13)
+
+___
+
 ### setLeftNav
 
 ▸ **setLeftNav**(`__namedParameters`): `void`
@@ -6256,7 +6322,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:20](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/left-nav/index.tsx#L20)
 
 ___
 
@@ -6505,7 +6571,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:24](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/left-nav/index.tsx#L24)
 
 ___
 
@@ -6543,6 +6609,52 @@ ___
 
 ___
 
+### useNavGroups
+
+▸ **useNavGroups**(): `T`
+
+#### Returns
+
+`T`
+
+#### Defined in
+
+[packages/framework/esm-styleguide/src/left-nav/nav-group.ts:18](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/left-nav/nav-group.ts#L18)
+
+▸ **useNavGroups**(`actions`): `T` & [`BoundActions`](API.md#boundactions)
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `actions` | [`Actions`](API.md#actions)<`NavGroupStoreState`\> |
+
+#### Returns
+
+`T` & [`BoundActions`](API.md#boundactions)
+
+#### Defined in
+
+[packages/framework/esm-styleguide/src/left-nav/nav-group.ts:18](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/left-nav/nav-group.ts#L18)
+
+▸ **useNavGroups**(`actions?`): `T` & [`BoundActions`](API.md#boundactions)
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `actions?` | [`Actions`](API.md#actions)<`NavGroupStoreState`\> |
+
+#### Returns
+
+`T` & [`BoundActions`](API.md#boundactions)
+
+#### Defined in
+
+[packages/framework/esm-styleguide/src/left-nav/nav-group.ts:18](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/left-nav/nav-group.ts#L18)
+
+___
+
 ### useOnClickOutside
 
 ▸ **useOnClickOutside**<`T`\>(`handler`, `active?`): `RefObject`<`T`\>

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

@@ -0,0 +1,30 @@
+[@openmrs/esm-framework](../API.md) / GenericNavGroupConfig
+
+# Interface: GenericNavGroupConfig
+
+## Table of contents
+
+### UI Properties
+
+- [slotName](GenericNavGroupConfig.md#slotname)
+- [title](GenericNavGroupConfig.md#title)
+
+## UI Properties
+
+### slotName
+
+• **slotName**: `string`
+
+#### Defined in
+
+[packages/framework/esm-styleguide/src/left-nav/generic-nav-group.component.tsx:22](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/left-nav/generic-nav-group.component.tsx#L22)
+
+___
+
+### title
+
+• **title**: `string`
+
+#### Defined in
+
+[packages/framework/esm-styleguide/src/left-nav/generic-nav-group.component.tsx:21](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/left-nav/generic-nav-group.component.tsx#L21)

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { DashboardGroupExtension } from './DashboardGroupExtension';
+
+export const createDashboardGroup = ({
+  title,
+  slotName,
+  isExpanded,
+}: {
+  title: string;
+  slotName: string;
+  isExpanded?: boolean;
+}) => {
+  const DashboardGroup = ({ basePath }: { basePath: string }) => {
+    return <DashboardGroupExtension title={title} slotName={slotName} basePath={basePath} isExpanded={isExpanded} />;
+  };
+  return DashboardGroup;
+};

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

@@ -0,0 +1,26 @@
+/** @module @category UI */
+import React, { useEffect } from 'react';
+import { ExtensionSlot } from '@openmrs/esm-react-utils';
+import { Accordion, AccordionItem } from '@carbon/react';
+import { registerNavGroup } from './nav-group';
+
+export interface DashboardGroupExtensionProps {
+  title: string;
+  slotName?: string;
+  basePath: string;
+  isExpanded?: boolean;
+}
+
+export const DashboardGroupExtension = ({ title, slotName, basePath, isExpanded }: DashboardGroupExtensionProps) => {
+  useEffect(() => {
+    registerNavGroup(slotName ?? title);
+  }, [slotName]);
+
+  return (
+    <Accordion>
+      <AccordionItem open={isExpanded ?? true} title={title} style={{ border: 'none' }}>
+        <ExtensionSlot name={slotName ?? title} state={{ basePath }} />
+      </AccordionItem>
+    </Accordion>
+  );
+};

packages/framework/esm-styleguide/src/left-nav/generic-nav-group.component.tsx

@@ -0,0 +1,32 @@
+/** @module @category UI */
+import React from 'react';
+import { useConfig } from '@openmrs/esm-react-utils';
+import { Type } from '@openmrs/esm-config';
+import { DashboardGroupExtension } from './DashboardGroupExtension';
+
+export const genericNavGroupConfigSchema = {
+  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.',
+    _default: 'my-group-nav-slot',
+  },
+};
+
+export interface GenericNavGroupConfig {
+  title: string;
+  slotName: string;
+}
+
+interface GenericNavGroupProps {
+  basePath: string;
+}
+
+export function GenericNavGroup({ basePath }: GenericNavGroupProps) {
+  const config = useConfig<GenericNavGroupConfig>();
+  return <DashboardGroupExtension title={config.title} slotName={config.slotName} basePath={basePath} />;
+}

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

@@ -2,10 +2,11 @@
 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';
 
+export * from './nav-group';
+
 interface LeftNavStore {
   slotName: string | null;
   basePath: string;

packages/framework/esm-styleguide/src/left-nav/nav-group.ts

@@ -0,0 +1,18 @@
+/** @module @category UI */
+import { createGlobalStore } from '@openmrs/esm-state';
+import { createUseStore } from '@openmrs/esm-react-utils';
+
+export * from './generic-nav-group.component';
+
+interface NavGroupStoreState {
+  navGroups: string[];
+}
+
+const navGroupStore = createGlobalStore<NavGroupStoreState>('nav-groups', { navGroups: [] });
+
+export function registerNavGroup(slotName: string) {
+  const store = navGroupStore.getState();
+  navGroupStore.setState({ navGroups: [slotName, ...store.navGroups] });
+}
+
+export const useNavGroups = createUseStore(navGroupStore);