From 9be3a437305ac8979c9a6a1c9440c9e54a7d8f6f Mon Sep 17 00:00:00 2001 From: kyampeire Hadijah <30952856+hadijahkyampeire@users.noreply.github.com> Date: Sun, 29 Sep 2024 13:25:54 +0300 Subject: [PATCH] (feat) O3-3774: Add implementation for the Nav Group (#1116) * Add nav group extension * Update docs * clean up * Remove unnecessary components * update docs * clean up * update t * define feature name for nav group * update docs * make group title translatable * update docs * tweak title translation and slot name * update api docs * register the global nav group extension * update docs * clean up * PR reviews * Update docs * Move nav group to primary-navigation-app --------- Co-authored-by: Ian --- .../generic-link/generic-link.component.tsx | 2 +- .../nav-group/nav-group.component.tsx | 46 +++++++++++++++++++ .../esm-primary-navigation-app/src/index.ts | 4 ++ .../src/routes.json | 6 +++ packages/framework/esm-framework/docs/API.md | 6 +-- .../framework/esm-styleguide/src/index.ts | 2 +- .../esm-styleguide/src/left-nav/index.tsx | 1 - 7 files changed, 61 insertions(+), 6 deletions(-) create mode 100644 packages/apps/esm-primary-navigation-app/src/components/nav-group/nav-group.component.tsx diff --git a/packages/apps/esm-primary-navigation-app/src/components/generic-link/generic-link.component.tsx b/packages/apps/esm-primary-navigation-app/src/components/generic-link/generic-link.component.tsx index d6ebf342b..5dabfa779 100644 --- a/packages/apps/esm-primary-navigation-app/src/components/generic-link/generic-link.component.tsx +++ b/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(); return {config.title}; } diff --git a/packages/apps/esm-primary-navigation-app/src/components/nav-group/nav-group.component.tsx b/packages/apps/esm-primary-navigation-app/src/components/nav-group/nav-group.component.tsx new file mode 100644 index 000000000..f3e94bb84 --- /dev/null +++ b/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(); + + return ( + + + + + + ); +} diff --git a/packages/apps/esm-primary-navigation-app/src/index.ts b/packages/apps/esm-primary-navigation-app/src/index.ts index 882887c85..176836ebc 100644 --- a/packages/apps/esm-primary-navigation-app/src/index.ts +++ b/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, diff --git a/packages/apps/esm-primary-navigation-app/src/routes.json b/packages/apps/esm-primary-navigation-app/src/routes.json index 09196526e..1d463ba04 100644 --- a/packages/apps/esm-primary-navigation-app/src/routes.json +++ b/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": [ diff --git a/packages/framework/esm-framework/docs/API.md b/packages/framework/esm-framework/docs/API.md index 468de07e9..0446d2244 100644 --- a/packages/framework/esm-framework/docs/API.md +++ b/packages/framework/esm-framework/docs/API.md @@ -2078,7 +2078,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) ___ @@ -6819,7 +6819,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) ___ @@ -7068,7 +7068,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) ___ diff --git a/packages/framework/esm-styleguide/src/index.ts b/packages/framework/esm-styleguide/src/index.ts index 952baa677..fad7ff00e 100644 --- a/packages/framework/esm-styleguide/src/index.ts +++ b/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'; diff --git a/packages/framework/esm-styleguide/src/left-nav/index.tsx b/packages/framework/esm-styleguide/src/left-nav/index.tsx index 34f26f412..9c289fa3a 100644 --- a/packages/framework/esm-styleguide/src/left-nav/index.tsx +++ b/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';