refactor: enhance navbar context and item matching logic (#11)

* refactor: enhance navbar context and item matching logic

- Update NavbarContext to allow setExpandedItems to accept a function for state updates.
- Refactor Navbar component to utilize useRef for settings and improve useEffect for path behavior.
- Optimize navigation item matching logic to return the best matching item based on path scores.

* chore: update package json version to 0.0.11

Author: garcia-victor-fin

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guardiafinance/design-system",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "type": "module",
   "exports": {
     ".": {

src/components/navbar/navbar-context.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, type ReactNode, useState } from 'react';
+import { createContext, useContext, type ReactNode, useState } from 'react';
 import { SidebarProvider } from '../sidebar';
 
 export interface NavbarState {
@@ -13,7 +13,7 @@ export interface NavbarContextValue {
     setActiveItem: (item: string | null) => void;
     setState: (state: NavbarState) => void;
     toggleExpandedItem: (itemTitle: string) => void;
-    setExpandedItems: (items: string[]) => void;
+    setExpandedItems: (items: string[] | ((prev: string[]) => string[])) => void;
 }
 
 const NavbarContext = createContext<NavbarContextValue | null>(null);
@@ -54,8 +54,11 @@ export function NavbarProvider({
         }));
     };
 
-    const setExpandedItems = (items: string[]) => {
-        setState(prev => ({ ...prev, expandedItems: items }));
+    const setExpandedItems = (items: string[] | ((prev: string[]) => string[])) => {
+        setState(prev => ({
+            ...prev,
+            expandedItems: typeof items === 'function' ? items(prev.expandedItems) : items,
+        }));
     };
 
     const contextValue: NavbarContextValue = {
@@ -91,4 +94,4 @@ export function useNavbarContext(): NavbarContextValue {
 export function useNavbarControl() {
     const context = useContext(NavbarContext);
     return context;
-}
+}

src/components/navbar/navbar.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 import { useNavigate, useLocation } from "react-router";
 import {
     Sidebar,
@@ -53,26 +53,40 @@ function NavbarInternal({
     const activeNavigationArea = navbarContext.state.activeArea || defaultActiveArea;
     const activeItem = navbarContext.state.activeItem;
 
-    useEffect(() => {
-        if (settings.allowDefaultPathBehavior === true) {
-            const { activeArea, activeItem: currentActiveItem } = getActiveStatesFromPath(settings, location.pathname);
-            navbarContext.setActiveArea(activeArea);
-            navbarContext.setActiveItem(currentActiveItem);
+    const settingsRef = useRef(settings);
+    settingsRef.current = settings;
 
-            match(currentActiveItem)
-                .with(P.string, () => {
-                    const expandableParent = findExpandableParentByChildPath(settings, location.pathname);
-                    match(expandableParent)
-                        .with(P.string, (parent) => {
-                            if (!navbarContext.state.expandedItems.includes(parent)) {
-                                navbarContext.setExpandedItems([...navbarContext.state.expandedItems, parent]);
-                            }
-                        })
-                        .otherwise(() => { });
-                })
-                .otherwise(() => { });
+    useEffect(() => {
+        const s = settingsRef.current;
+        if (s.allowDefaultPathBehavior !== true) {
+            return;
         }
-    }, [location.pathname, settings]);
+
+        const { activeArea, activeItem: currentActiveItem } = getActiveStatesFromPath(
+            s,
+            location.pathname
+        );
+        navbarContext.setActiveArea(activeArea);
+        navbarContext.setActiveItem(currentActiveItem);
+
+        match(currentActiveItem)
+            .with(P.string, () => {
+                const expandableParent = findExpandableParentByChildPath(s, location.pathname);
+                match(expandableParent)
+                    .with(P.string, (parent) => {
+                        navbarContext.setExpandedItems((prev) =>
+                            prev.includes(parent) ? prev : [...prev, parent]
+                        );
+                    })
+                    .otherwise(() => { });
+            })
+            .otherwise(() => { });
+    }, [
+        location.pathname,
+        settings.routePrefix,
+        settings.defaultActiveArea,
+        settings.allowDefaultPathBehavior,
+    ]);
 
     const handleItemClick = (item: MenuItemType) => {
         if ('children' in item) {
@@ -281,4 +295,4 @@ export function Navbar(props: NavbarProps) {
     );
 }
 
-export default Navbar;
+export default Navbar;

src/components/navbar/utils.tsx

@@ -160,46 +160,57 @@ export const matchPathPattern = (pathname: string, pattern: string): boolean =>
 };
 
 export const matchesNavigationItem = (pathname: string, item: NavigationItem): boolean => {
+    return navigationItemMatchScore(pathname, item) > 0;
+};
+
+const EXACT_PATH_SCORE = 1_000_000;
+const PATTERN_SCORE = 100_000;
+
+const navigationItemMatchScore = (pathname: string, item: NavigationItem): number => {
     if (item.path && pathname === item.path) {
-        return true;
+        return EXACT_PATH_SCORE + item.path.length;
     }
 
     if (item.pathPattern && matchPathPattern(pathname, item.pathPattern)) {
-        return true;
+        return PATTERN_SCORE;
     }
 
     if (item.path && pathname.startsWith(item.path + '/')) {
-        return true;
+        return item.path.length;
     }
 
-    return false;
+    return 0;
 };
 
 export const findNavigationItemByPath = (config: NavbarConfiguration, path: string): NavigationItem | null => {
     const strippedPath = stripRoutePrefix(path, config.routePrefix);
+    let best: NavigationItem | null = null;
+    let bestScore = -1;
+
+    const consider = (candidate: NavigationItem) => {
+        const score = navigationItemMatchScore(strippedPath, candidate);
+        if (score > bestScore) {
+            bestScore = score;
+            best = candidate;
+        }
+    };
 
     for (const area of config.areas) {
         for (const section of area.sections) {
             for (const item of section.items) {
-                const result = match(item)
+                match(item)
                     .with({ children: P.array(P.any) }, (expandableItem) => {
                         for (const child of expandableItem.children) {
-                            if (matchesNavigationItem(strippedPath, child)) {
-                                return child;
-                            }
+                            consider(child);
                         }
-                        return null;
                     })
-                    .with({ icon: P.any }, (regularItem) =>
-                        matchesNavigationItem(strippedPath, regularItem) ? regularItem : null
-                    )
-                    .otherwise(() => null);
-
-                if (result) return result;
+                    .with({ icon: P.any }, (regularItem) => consider(regularItem))
+                    .otherwise(() => { });
             }
         }
     }
-    return null;
+
+    return bestScore > 0 ? best : null;
 };
 
 export const getAllNavigationPaths = (config: NavbarConfiguration): string[] => {
@@ -260,23 +271,20 @@ export const getActiveStatesFromPath = (config: NavbarConfiguration, pathname: s
 };
 
 export const findExpandableParentByChildPath = (config: NavbarConfiguration, childPath: string): string | null => {
-    const strippedPath = stripRoutePrefix(childPath, config.routePrefix);
+    const found = findNavigationItemByPath(config, childPath);
+    if (!found) {
+        return null;
+    }
 
     for (const area of config.areas) {
         for (const section of area.sections) {
             for (const item of section.items) {
-                const result = match(item)
-                    .with({ children: P.array(P.any) }, (expandableItem) => {
-                        for (const child of expandableItem.children) {
-                            if (matchesNavigationItem(strippedPath, child)) {
-                                return expandableItem.title;
-                            }
-                        }
-                        return null;
-                    })
-                    .otherwise(() => null);
-
-                if (result) return result;
+                if (
+                    isExpandableItem(item) &&
+                    item.children.some((child) => child === found)
+                ) {
+                    return item.title;
+                }
             }
         }
     }