@orsetra/shared-ui 1.1.1 → 1.1.3

package/components/layout/index.ts

@@ -1,6 +1,6 @@
 // Layout components exports
 export { MainSidebar, type SidebarMode } from './sidebar/main-sidebar'
-export { menuItems, menuLabels, type MainMenuItem, type SubMenuItem, type SidebarMenus } from './sidebar/data'
+export { resolveIcon, type MainMenuItem, type SubMenuItem, type SidebarMenus, type MenuApiResponse, type ApiMenuData, type ApiMainMenuItem, type ApiSubMenuItem, type ApiSubMenu } from './sidebar/data'
 export { 
   Sidebar,
   SidebarContent,

package/components/layout/layout-container.tsx

@@ -4,7 +4,7 @@ import { useState, useEffect } from "react"
 import { usePathname } from "next/navigation"
 import { MainSidebar, type SidebarMode } from "./sidebar/main-sidebar"
 import { Sidebar, SidebarProvider, useSidebar } from "./sidebar/sidebar"
-import { type SidebarMenus } from "./sidebar/data"
+import { type SidebarMenus, type MainMenuItem, type MenuApiResponse, resolveIcon } from "./sidebar/data"
 import { UserMenu, Button, type UserMenuConfig } from "../ui"
 import { getMenuFromPath } from "../../lib/menu-utils"
 import { useIsMobile } from "../../hooks/use-mobile"
@@ -13,22 +13,67 @@ import { Menu } from "lucide-react"
 interface LayoutContainerProps {
   main_base_url: string
   children: React.ReactNode
-  sidebarMenus: SidebarMenus
+  sidebarMenus?: SidebarMenus
   user?: { profile?: { email?: string; preferred_username?: string } } | null
   onSignOut?: () => void
   mode?: SidebarMode
   userMenuConfig?: UserMenuConfig
+  fetchMenus?: () => Promise<MenuApiResponse>
+  getSidebarMode?: (pathname: string) => SidebarMode
+  getCurrentMenu?: (pathname: string) => string
 }
 
-function LayoutContent({ children, sidebarMenus, user, onSignOut, mode = 'expanded', userMenuConfig, main_base_url }: LayoutContainerProps) {
+function LayoutContent({ children, sidebarMenus = {}, user, onSignOut, mode = 'expanded', userMenuConfig, main_base_url, fetchMenus, getSidebarMode, getCurrentMenu }: LayoutContainerProps) {
   const pathname = usePathname()
   const { setOpen } = useSidebar()
   const isMobile = useIsMobile()
   const [isMainSidebarOpen, setIsMainSidebarOpen] = useState(false)
   const [currentMenu, setCurrentMenu] = useState<string>("overview")
-  const isMinimized = mode === 'minimized'
+  
+  // Use custom mode function if provided, otherwise use prop
+  const effectiveMode = getSidebarMode ? getSidebarMode(pathname) : mode
+  const isMinimized = effectiveMode === 'minimized'
   // Force hidden mode on mobile
-  const isHidden = mode === 'hidden' || isMobile
+  const isHidden = effectiveMode === 'hidden' || isMobile
+
+  const [mainMenuItems, setMainMenuItems] = useState<MainMenuItem[]>([])
+  const [fetchedSidebarMenus, setFetchedSidebarMenus] = useState<SidebarMenus>({})
+  const [sectionLabels, setSectionLabels] = useState<Record<string, string>>({})
+
+  // Load menus from API when fetchMenus is provided
+  useEffect(() => {
+    if (!fetchMenus) return
+    fetchMenus().then((response) => {
+      if (!response.success) return
+      const { main, subMenus } = response.data
+
+      setMainMenuItems(
+        main.map((item) => ({
+          id: item.id,
+          label: item.label,
+          icon: resolveIcon(item.icon),
+        }))
+      )
+
+      const menus: SidebarMenus = {}
+      const labels: Record<string, string> = {}
+      Object.entries(subMenus).forEach(([key, subMenu]) => {
+        menus[key] = subMenu.items.map((item) => ({
+          id: item.id,
+          name: item.label,
+          href: item.href,
+          icon: resolveIcon(item.icon),
+        }))
+        labels[key] = subMenu.header
+      })
+      setFetchedSidebarMenus(menus)
+      setSectionLabels(labels)
+    })
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  // Effective sidebarMenus: fetched provides section keys, prop provides items key (micro apps)
+  const effectiveSidebarMenus: SidebarMenus = { ...fetchedSidebarMenus, ...sidebarMenus }
 
   // Close sidebar on route change (mobile)
   useEffect(() => {
@@ -38,9 +83,10 @@ function LayoutContent({ children, sidebarMenus, user, onSignOut, mode = 'expand
   }, [pathname, isMobile])
 
   useEffect(() => {
-    const contextualMenu = getMenuFromPath(pathname)
+    // Use custom menu function if provided, otherwise use default getMenuFromPath
+    const contextualMenu = getCurrentMenu ? getCurrentMenu(pathname) : getMenuFromPath(pathname)
     setCurrentMenu(contextualMenu)
-  }, [pathname])
+  }, [pathname, getCurrentMenu])
 
   const handleMainSidebarToggle = () => {
     setIsMainSidebarOpen(!isMainSidebarOpen)
@@ -54,9 +100,6 @@ function LayoutContent({ children, sidebarMenus, user, onSignOut, mode = 'expand
     setOpen(true)
   }
 
-  const module = pathname.split('/')[1] || 'overview'
-  const sidebarItems = sidebarMenus[module] || []
-
   return (
     <div className="flex h-screen w-full bg-white">
       {/* Desktop sidebar - hidden on mobile (isHidden is true on mobile) */}
@@ -64,13 +107,14 @@ function LayoutContent({ children, sidebarMenus, user, onSignOut, mode = 'expand
         <Sidebar
           currentMenu={currentMenu}
           onMainMenuToggle={handleMainSidebarToggle}
-          sidebarMenus={sidebarMenus}
+          sidebarMenus={effectiveSidebarMenus}
           main_base_url={main_base_url}
+          sectionLabels={sectionLabels}
         />
       )}
-      
+
       {/* MainSidebar - always available, opens as overlay when isHidden */}
-      <MainSidebar 
+      <MainSidebar
         main_base_url={main_base_url}
         isOpen={isMainSidebarOpen}
         onToggle={handleMainSidebarToggle}
@@ -78,9 +122,10 @@ function LayoutContent({ children, sidebarMenus, user, onSignOut, mode = 'expand
         currentMenu={currentMenu}
         onSecondarySidebarOpen={handleSecondarySidebarOpen}
         mode={isHidden ? "expanded" : mode}
-        sidebarMenus={sidebarMenus}
+        sidebarMenus={effectiveSidebarMenus}
+        mainMenuItems={mainMenuItems}
       />
-      
+
       <div className="flex-1 flex flex-col min-w-0">
         <header className="h-14 bg-gray-50 border-b border-ui-border flex-shrink-0">
           <div className="h-full px-4 md:px-6 flex items-center justify-between">
@@ -98,14 +143,14 @@ function LayoutContent({ children, sidebarMenus, user, onSignOut, mode = 'expand
             ) : (
               <div />
             )}
-            <UserMenu 
-              username={user?.profile?.email || user?.profile?.preferred_username} 
+            <UserMenu
+              username={user?.profile?.email || user?.profile?.preferred_username}
               onSignOut={onSignOut || (() => {})}
               menuConfig={userMenuConfig}
             />
           </div>
         </header>
-        
+
         <main className="flex-1 overflow-auto">
           {children}
         </main>

package/components/layout/sidebar/data.tsx

@@ -1,5 +1,3 @@
-"use client"
-
 import { type LucideIcon } from "lucide-react"
 import {
   Shield,
@@ -7,13 +5,30 @@ import {
   Settings,
   Rocket,
   LineChart,
+  Library,
+  Component,
+  FolderGit2,
+  Network,
+  Key,
+  Globe,
+  Activity,
+  Database,
+  Users,
+  Plug,
+  Box,
+  Monitor,
+  Server,
+  Lock,
+  Home,
+  FileText,
+  Code,
+  Cloud,
 } from "lucide-react"
 
-// Types pour les menus
 export interface MainMenuItem {
   id: string
   label: string
-  icon: React.ReactNode
+  icon: LucideIcon
 }
 
 export interface SubMenuItem {
@@ -27,42 +42,62 @@ export interface SidebarMenus {
   [key: string]: SubMenuItem[]
 }
 
+// API response types
+export interface ApiMainMenuItem {
+  id: string
+  label: string
+  icon: string
+}
 
-export const menuItems: MainMenuItem[] = [
-  {
-    id: "assets",
-    label: "Assets",
-    icon: <Rocket className="h-6 w-6" />
-  },
-  {
-    id: "runtime",
-    label: "Runtime",
-    icon: <Package className="h-6 w-6" />
-  },
-  {
-    id: "monitoring",
-    label: "Monitoring",
-    icon: <LineChart className="h-6 w-6" />
-  }, 
-  {
-    id: "api-manager",
-    label: "API Manager",
-    icon: <Settings className="h-6 w-6" />
-  },
-  {
-    id: "access",
-    label: "Access Manager",
-    icon: <Shield className="h-6 w-6" />
-  },
+export interface ApiSubMenuItem {
+  id: string
+  label: string
+  href: string
+  icon: string
+}
 
-]
+export interface ApiSubMenu {
+  id: string
+  header: string
+  items: ApiSubMenuItem[]
+}
 
-// Labels des menus principaux pour l'affichage
-export const menuLabels: Record<string, string> = {
-  "assets": "Assets",
-  "runtime": "Runtime",
-  "monitoring": "Monitoring",
-  "api-manager": "API Manager",
-  "access": "Access Manager",
+export interface ApiMenuData {
+  main: ApiMainMenuItem[]
+  subMenus: Record<string, ApiSubMenu>
 }
 
+export interface MenuApiResponse {
+  success: boolean
+  data: ApiMenuData
+}
+
+const ICON_MAP: Record<string, LucideIcon> = {
+  Shield,
+  Package,
+  Settings,
+  Rocket,
+  LineChart,
+  Library,
+  Component,
+  FolderGit2,
+  Network,
+  Key,
+  Globe,
+  Activity,
+  Database,
+  Users,
+  Plug,
+  Box,
+  Monitor,
+  Server,
+  Lock,
+  Home,
+  FileText,
+  Code,
+  Cloud,
+}
+
+export function resolveIcon(name: string): LucideIcon {
+  return ICON_MAP[name] || Box
+}

package/components/layout/sidebar/main-sidebar.tsx

@@ -3,12 +3,10 @@
 import * as React from "react"
 import { cn } from "../../../lib/utils"
 
-import { useRouter } from "next/navigation"
 import { Button } from "../../ui/button"
 import { Logo } from "../../ui/logo"
-import { menuItems, type SidebarMenus } from "./data"
+import { type MainMenuItem, type SidebarMenus } from "./data"
 import { X, Menu } from "lucide-react"
-import Link from "next/link"
 
 export type SidebarMode = 'expanded' | 'minimized' | 'hidden'
 
@@ -21,57 +19,55 @@ interface MainSidebarProps {
   mode?: SidebarMode
   onSecondarySidebarOpen?: () => void
   sidebarMenus?: SidebarMenus
+  mainMenuItems?: MainMenuItem[]
 }
 
-export function MainSidebar({ 
+export function MainSidebar({
   main_base_url,
-  isOpen, 
-  onToggle, 
-  onMenuSelect, 
+  isOpen,
+  onToggle,
+  onMenuSelect,
   currentMenu,
   mode = 'expanded',
   onSecondarySidebarOpen,
-  sidebarMenus = {}
+  sidebarMenus = {},
+  mainMenuItems = [],
 }: MainSidebarProps) {
   const isMinimized = mode === 'minimized'
-  const router = useRouter()
   const [hoveredMenu, setHoveredMenu] = React.useState<string | null>(null)
 
   const handleMenuClick = (menuId: string) => {
     onMenuSelect(menuId)
-    
+
     if (!isMinimized && onSecondarySidebarOpen) {
       onSecondarySidebarOpen()
     }
-    
+
     const subMenus = sidebarMenus[menuId]
     if (subMenus && subMenus.length > 0) {
       const targetUrl = subMenus[0].href
-      const path = targetUrl.startsWith('http://') || targetUrl.startsWith('https://') 
-        ? new URL(targetUrl).pathname 
+      const path = targetUrl.startsWith('http://') || targetUrl.startsWith('https://')
+        ? new URL(targetUrl).pathname
         : targetUrl
       window.location.href = path
     } else {
       const targetUrl = `${main_base_url}/${menuId}`
-      const path = targetUrl.startsWith('http://') || targetUrl.startsWith('https://') 
-        ? new URL(targetUrl).pathname 
+      const path = targetUrl.startsWith('http://') || targetUrl.startsWith('https://')
+        ? new URL(targetUrl).pathname
         : targetUrl
       window.location.href = path
     }
-    
+
     if (!isMinimized) {
-      onToggle() 
+      onToggle()
     }
   }
 
   const handleSubMenuClick = (e: React.MouseEvent, href: string) => {
     e.preventDefault()
-    console.log('handleSubMenuClick - href:', href)
-    const path = href.startsWith('http://') || href.startsWith('https://') 
-      ? new URL(href).pathname 
+    const path = href.startsWith('http://') || href.startsWith('https://')
+      ? new URL(href).pathname
       : href
-    console.log('handleSubMenuClick - path:', path)
-    console.log('Redirecting to:', path)
     window.location.href = path
     setHoveredMenu(null)
   }
@@ -79,7 +75,7 @@ export function MainSidebar({
   return (
     <>
       {isOpen && !isMinimized && (
-        <div 
+        <div
           className="fixed inset-0 bg-black/50 z-40"
           onClick={onToggle}
         />
@@ -88,8 +84,8 @@ export function MainSidebar({
       <div className={cn(
         "fixed left-0 top-0 h-full bg-white border-r border-ui-border z-50 transform transition-all duration-300 ease-in-out",
         isMinimized ? "w-16" : "w-64 shadow-xl",
-        isMinimized 
-          ? "translate-x-0" 
+        isMinimized
+          ? "translate-x-0"
           : (isOpen ? "translate-x-0" : "-translate-x-full")
       )}>
         <div className={cn(
@@ -116,59 +112,58 @@ export function MainSidebar({
           isMinimized ? "p-2" : "p-3"
         )}>
           <nav className="space-y-2">
-            {menuItems.map((item) => (
-              <div 
-                key={item.id}
-                className="relative"
-                onMouseEnter={() => isMinimized && setHoveredMenu(item.id)}
-                onMouseLeave={() => isMinimized && setHoveredMenu(null)}
-              >
-                <button
-                  onClick={() => handleMenuClick(item.id)}
-                  className={cn(
-                    "w-full flex items-center text-left rounded-lg transition-all duration-200 font-medium",
-                    isMinimized 
-                      ? "justify-center p-3" 
-                      : "gap-3 px-3 py-3",
-                    currentMenu === item.id
-                      ? "bg-interactive/10 text-interactive"
-                      : "text-text-primary hover:bg-ui-background hover:text-text-primary"
-                  )}
-                  title={isMinimized ? item.label : undefined}
+            {mainMenuItems.map((item) => {
+              const Icon = item.icon
+              return (
+                <div
+                  key={item.id}
+                  className="relative"
+                  onMouseEnter={() => isMinimized && setHoveredMenu(item.id)}
+                  onMouseLeave={() => isMinimized && setHoveredMenu(null)}
                 >
-                  <div className={cn(
-                    "flex items-center justify-center",
-                    currentMenu === item.id
-                      ? "text-interactive"
-                      : "text-text-secondary"
-                  )}>
-                    {item.icon}
-                  </div>
-                  {!isMinimized && <span className="text-base">{item.label}</span>}
-                </button>
+                  <button
+                    onClick={() => handleMenuClick(item.id)}
+                    className={cn(
+                      "w-full flex items-center text-left rounded-lg transition-all duration-200 font-medium",
+                      isMinimized
+                        ? "justify-center p-3"
+                        : "gap-3 px-3 py-3",
+                      currentMenu === item.id
+                        ? "bg-interactive/10 text-interactive"
+                        : "text-text-primary hover:bg-ui-background hover:text-text-primary"
+                    )}
+                    title={isMinimized ? item.label : undefined}
+                  >
+                    <Icon className={cn(
+                      "h-6 w-6",
+                      currentMenu === item.id ? "text-interactive" : "text-text-secondary"
+                    )} />
+                    {!isMinimized && <span className="text-base">{item.label}</span>}
+                  </button>
 
-                {isMinimized && hoveredMenu === item.id && sidebarMenus[item.id] && sidebarMenus[item.id].length > 0 && (
-                  <div className="absolute left-full top-0 ml-2 bg-white border border-ui-border rounded-lg shadow-xl z-50 min-w-[200px] py-2">
-                    <div className="px-4 py-2 border-b border-ui-border">
-                      <h3 className="text-sm font-semibold text-text-primary">{item.label}</h3>
+                  {isMinimized && hoveredMenu === item.id && sidebarMenus[item.id] && sidebarMenus[item.id].length > 0 && (
+                    <div className="absolute left-full top-0 ml-2 bg-white border border-ui-border rounded-lg shadow-xl z-50 min-w-[200px] py-2">
+                      <div className="px-4 py-2 border-b border-ui-border">
+                        <h3 className="text-sm font-semibold text-text-primary">{item.label}</h3>
+                      </div>
+                      <div className="py-1">
+                        {sidebarMenus[item.id].map((subItem) => (
+                          <a
+                            key={subItem.id}
+                            href={subItem.href}
+                            onClick={(e) => handleSubMenuClick(e, subItem.href)}
+                            className="flex items-center gap-3 px-4 py-2 text-sm text-text-secondary hover:bg-ui-background hover:text-text-primary transition-colors no-underline"
+                          >
+                            <subItem.icon className="h-4 w-4" />
+                            {subItem.name}
+                          </a>
+                        ))}
+                      </div>
                     </div>
-                    <div className="py-1">
-                      {sidebarMenus[item.id].map((subItem) => (
-                        <a
-                          key={subItem.id}
-                          href={subItem.href}
-                          onClick={(e) => handleSubMenuClick(e, subItem.href)}
-                          className="flex items-center gap-3 px-4 py-2 text-sm text-text-secondary hover:bg-ui-background hover:text-text-primary transition-colors no-underline"
-                        >
-                          <subItem.icon className="h-4 w-4" />
-                          {subItem.name}
-                        </a>
-                      ))}
-                    </div>
-                  </div>
-                )}
-              </div>
-            ))}
+                  )}
+                </div>
+              )
+            })}
           </nav>
         </div>
       </div>
@@ -188,4 +183,4 @@ export function MainSidebarToggle({ onClick }: { onClick: () => void }) {
       <Menu className="h-4 w-4" />
     </Button>
   )
-}
+}

package/components/layout/sidebar/sidebar.tsx

@@ -3,7 +3,7 @@
 import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
 import { VariantProps, cva } from "class-variance-authority"
-import { LineChart, PanelLeft, Plus } from "lucide-react"
+import { PanelLeft } from "lucide-react"
 import Link from "next/link"
 import { usePathname } from "next/navigation"
 
@@ -19,17 +19,14 @@ import {
   TooltipTrigger,
 } from "../../ui/tooltip"
 import {
-  Shield,
   Settings,
-  Package,
-  Rocket,
   Menu,
   Building2,
   User,
   ChevronUp,
 } from "lucide-react"
 import { Logo } from "../../ui/logo"
-import { menuLabels, type SidebarMenus, type SubMenuItem } from "./data"
+import { type SidebarMenus, type SubMenuItem } from "./data"
 import { Skeleton } from "../skeleton"
 
 const SIDEBAR_COOKIE_NAME = "sidebar:state"
@@ -174,11 +171,12 @@ interface SidebarProps {
   onMainMenuToggle?: () => void
   sidebarMenus?: SidebarMenus
   main_base_url?: string
+  sectionLabels?: Record<string, string>
 }
 
 
 
-function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_url = "" }: SidebarProps = {}) {
+function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_url = "", sectionLabels = {} }: SidebarProps = {}) {
   const pathname = usePathname()
   const { state } = useSidebar()
   const [settingsOpen, setSettingsOpen] = React.useState(false)
@@ -223,18 +221,11 @@ function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_u
       </div>
 
       {/* En-tête du menu principal sélectionné */}
-      {currentMenu && menuLabels[currentMenu] && (
-        <div className="px-4 py-3 border-b border-ui-border">
-          <div className="flex items-center gap-2">
-            {currentMenu === "assets" && <Rocket className="h-4 w-4 text-interactive" />}
-            {currentMenu === "runtime" && <Package className="h-4 w-4 text-interactive" />}
-            {currentMenu === "api-manager" && <Settings className="h-4 w-4 text-interactive" />}
-             {currentMenu === "access-manager" && <Shield className="h-4 w-4 text-interactive" />}
-            {currentMenu === "monitoring" && <LineChart className="h-4 w-4 text-interactive" />}
-            <h2 className="text-sm font-semibold text-text-primary">
-              {menuLabels[currentMenu]}
-            </h2>
-          </div>
+      {currentMenu && sectionLabels[currentMenu] && (
+        <div className="h-14 flex items-center px-4 border-b border-ui-border">
+          <h2 className="text-sm font-semibold text-text-primary">
+            {sectionLabels[currentMenu]}
+          </h2>
         </div>
       )}
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orsetra/shared-ui",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "description": "Shared UI components for Orsetra platform",
   "main": "./index.ts",
   "types": "./index.ts",