@orsetra/shared-ui 1.0.13 → 1.0.15

package/components/layout/index.ts

@@ -1,5 +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 { 
   Sidebar,
   SidebarContent,
@@ -28,4 +29,4 @@ export {
 } from './sidebar/sidebar'
 // Skeleton is exported from ../ui to avoid duplicate exports
 export { RootLayoutWrapper, ibmPlexSans, ibmPlexMono } from './root-layout-wrapper'
-export { LayoutContainer, type SidebarMenus } from './layout-container'
+export { LayoutContainer } from './layout-container'

package/components/layout/layout-container.tsx

@@ -2,16 +2,14 @@
 
 import { useState, useEffect } from "react"
 import { usePathname } from "next/navigation"
-import { MainSidebar, Sidebar, SidebarProvider, useSidebar, type SidebarMode } from "./index"
+import { MainSidebar, type SidebarMode } from "./sidebar/main-sidebar"
+import { Sidebar, SidebarProvider, useSidebar } from "./sidebar/sidebar"
+import { type SidebarMenus } from "./sidebar/data"
 import { UserMenu, Button } from "../ui"
 import { getMenuFromPath } from "../../lib/menu-utils"
 import { useIsMobile } from "../../hooks/use-mobile"
 import { Menu } from "lucide-react"
 
-export interface SidebarMenus {
-  [key: string]: any[]
-}
-
 interface LayoutContainerProps {
   children: React.ReactNode
   sidebarMenus: SidebarMenus
@@ -64,6 +62,7 @@ function LayoutContent({ children, sidebarMenus, user, onSignOut, mode = 'expand
         <Sidebar 
           currentMenu={currentMenu}
           onMainMenuToggle={handleMainSidebarToggle}
+          sidebarMenus={sidebarMenus}
         />
       )}
       
@@ -75,6 +74,7 @@ function LayoutContent({ children, sidebarMenus, user, onSignOut, mode = 'expand
         currentMenu={currentMenu}
         onSecondarySidebarOpen={handleSecondarySidebarOpen}
         mode={isHidden ? "expanded" : mode}
+        sidebarMenus={sidebarMenus}
       />
       
       <div className="flex-1 flex flex-col min-w-0">

package/components/layout/sidebar/data.tsx

@@ -1,23 +1,33 @@
 "use client"
 
+import { type LucideIcon } from "lucide-react"
 import {
-  Network,
-  Server,
-  Box,
   Shield,
-  CloudCog,
-  Globe,
-  Database,
-  Library,
   Package,
-  Users,
-  FileText,
-  Key,
   Settings,
   Rocket,
 } from "lucide-react"
 
-export const menuItems = [
+// Types pour les menus
+export interface MainMenuItem {
+  id: string
+  label: string
+  icon: React.ReactNode
+}
+
+export interface SubMenuItem {
+  id: string
+  name: string
+  href: string
+  icon: LucideIcon
+}
+
+export interface SidebarMenus {
+  [key: string]: SubMenuItem[]
+}
+
+// Menu principal (centralisé) - Structure commune à toutes les apps
+export const menuItems: MainMenuItem[] = [
   {
     id: "assets",
     label: "Assets",
@@ -40,49 +50,11 @@ export const menuItems = [
   }
 ]
 
-// Mapping des menus principaux vers leurs sous-menus
-export const menuSubItems = {
-  "assets": [
-    { id: "library", name: "Bibliothèque", href: "/assets", icon: Library },
-    { id: "projects", name: "Projets", href: "/projects", icon: Rocket },
-  ],
-  "applications": [
-    { id: "applications", name: "Applications", href: "/applications", icon: Package },
-    { id: "vpc", name: "Réseaux", href: "/vpcs", icon: Network },
-    { id: "secrets", name: "Secrets", href: "/secrets", icon: Key },
-    { id: "environments", name: "Environnements", href: "/environments", icon: Globe }
-  ],
-  "api-manager": [
-    { id: "apis", name: "APIs", href: "/api-manager/apis", icon: Database },
-    { id: "gateway", name: "API Gateway", href: "/api-manager/gateway", icon: Globe }
-  ],
-  "access-manager": [
-    { id: "users", name: "Utilisateurs", href: "/access-manager/users", icon: Users },
-    { id: "groups", name: "Groupes", href: "/access-manager/groups", icon: Users },
-    { id: "roles", name: "Rôles IAM", href: "/access-manager/roles", icon: Shield },
-    { id: "policies", name: "Politiques", href: "/access-manager/policies", icon: FileText },
-    { id: "resource-servers", name: "Serveurs OAuth", href: "/access-manager/resource-servers", icon: Server },
-    { id: "identity-providers", name: "Fournisseurs d'identité", href: "/access-manager/identity-providers", icon: Key }
-  ]
+// Labels des menus principaux pour l'affichage
+export const menuLabels: Record<string, string> = {
+  "assets": "Assets",
+  "applications": "Applications",
+  "api-manager": "API Manager",
+  "access-manager": "Access Manager"
 }
 
-// Menu par défaut quand aucun menu principal n'est sélectionné
-export const defaultNavigation = [
-
-  {
-    name: "Applications",
-    href: "/applications",
-    icon: Box,
-  },
-  {
-    name: "API Manager",
-    href: "/api-manager",
-    icon: CloudCog,
-  },
-  {
-    name: "Assets",
-    href: "/assets",
-    icon: Server,
-  },
-]
-

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

@@ -6,7 +6,7 @@ import { cn } from "../../../lib/utils"
 import { useRouter } from "next/navigation"
 import { Button } from "../../ui/button"
 import { Logo } from "../../ui/logo"
-import { menuItems, menuSubItems } from "./data"
+import { menuItems, type SidebarMenus } from "./data"
 import { X, Menu } from "lucide-react"
 import Link from "next/link"
 
@@ -19,6 +19,7 @@ interface MainSidebarProps {
   currentMenu?: string
   mode?: SidebarMode
   onSecondarySidebarOpen?: () => void
+  sidebarMenus?: SidebarMenus
 }
 
 export function MainSidebar({ 
@@ -27,7 +28,8 @@ export function MainSidebar({
   onMenuSelect, 
   currentMenu,
   mode = 'expanded',
-  onSecondarySidebarOpen
+  onSecondarySidebarOpen,
+  sidebarMenus = {}
 }: MainSidebarProps) {
   const isMinimized = mode === 'minimized'
   const router = useRouter()
@@ -41,8 +43,8 @@ export function MainSidebar({
       onSecondarySidebarOpen()
     }
     
-    // Rediriger vers le premier sous-menu
-    const subMenus = menuSubItems[menuId as keyof typeof menuSubItems]
+    // Rediriger vers le premier sous-menu (utilise les menus fournis par l'app)
+    const subMenus = sidebarMenus[menuId]
     if (subMenus && subMenus.length > 0) {
       router.push(subMenus[0].href)
     }
@@ -133,13 +135,13 @@ export function MainSidebar({
                 </button>
 
                 {/* Submenu au survol en mode minimized */}
-                {isMinimized && hoveredMenu === item.id && menuSubItems[item.id as keyof typeof menuSubItems] && (
+                {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">
-                      {menuSubItems[item.id as keyof typeof menuSubItems].map((subItem) => (
+                      {sidebarMenus[item.id].map((subItem) => (
                         <Link
                           key={subItem.id}
                           href={subItem.href}

package/components/layout/sidebar/sidebar.tsx

@@ -26,7 +26,7 @@ import {
   Menu
 } from "lucide-react"
 import { Logo } from "../../ui/logo"
-import { defaultNavigation, menuSubItems } from "./data"
+import { menuLabels, type SidebarMenus, type SubMenuItem } from "./data"
 import { Skeleton } from "../skeleton"
 
 const SIDEBAR_COOKIE_NAME = "sidebar:state"
@@ -169,18 +169,19 @@ SidebarProvider.displayName = "SidebarProvider"
 interface SidebarProps {
   currentMenu?: string
   onMainMenuToggle?: () => void
+  sidebarMenus?: SidebarMenus
 }
 
 
 
-function Sidebar({ currentMenu, onMainMenuToggle }: SidebarProps = {}) {
+function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {} }: SidebarProps = {}) {
   const pathname = usePathname()
   const { state } = useSidebar()
 
-  // Déterminer quelle navigation afficher
-  const currentNavigation = currentMenu && menuSubItems[currentMenu as keyof typeof menuSubItems] 
-    ? menuSubItems[currentMenu as keyof typeof menuSubItems]
-    : defaultNavigation
+  // Déterminer quelle navigation afficher à partir des menus fournis par l'app
+  const currentNavigation: SubMenuItem[] = currentMenu && sidebarMenus[currentMenu] 
+    ? sidebarMenus[currentMenu]
+    : []
 
   return (
     <div className="h-screen sticky top-0 flex flex-col bg-white border-r border-ui-border min-w-[var(--sidebar-width-icon)] transition-[width] duration-200" 
@@ -202,20 +203,15 @@ function Sidebar({ currentMenu, onMainMenuToggle }: SidebarProps = {}) {
       </div>
 
       {/* En-tête du menu principal sélectionné */}
-      {currentMenu && (
+      {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 === "projects" && <Rocket className="h-4 w-4 text-interactive" />}
             {currentMenu === "applications" && <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" />}
             <h2 className="text-sm font-semibold text-text-primary">
-              {currentMenu === "assets" && "Assets"}
-              {currentMenu === "projects" && "Projects"}
-              {currentMenu === "applications" && "Applications"}
-              {currentMenu === "api-manager" && "API Manager"}
-              {currentMenu === "access-manager" && "Access Manager"}
+              {menuLabels[currentMenu]}
             </h2>
           </div>
         </div>

package/components/ui/editable-title.tsx

@@ -7,11 +7,12 @@ import { Button } from "./button"
 
 interface EditableTitleProps {
   value: string
-  onSave: (newValue: string) => void
+  onSave?: (newValue: string) => void
   className?: string
+  editable?: boolean
 }
 
-export function EditableTitle({ value, onSave, className = "" }: EditableTitleProps) {
+export function EditableTitle({ value, onSave, className = "", editable = true }: EditableTitleProps) {
   const [isEditing, setIsEditing] = useState(false)
   const [isHovered, setIsHovered] = useState(false)
   const [editValue, setEditValue] = useState(value)
@@ -25,7 +26,7 @@ export function EditableTitle({ value, onSave, className = "" }: EditableTitlePr
   }, [isEditing])
 
   const handleSave = () => {
-    if (editValue.trim() && editValue !== value) {
+    if (editValue.trim() && editValue !== value && onSave) {
       onSave(editValue.trim())
     }
     setIsEditing(false)
@@ -56,7 +57,7 @@ export function EditableTitle({ value, onSave, className = "" }: EditableTitlePr
         />
         <Button
           size="sm"
-          variant="default"
+          variant="primary"
           onClick={handleSave}
           className="h-8 w-8 p-0"
         >
@@ -74,6 +75,14 @@ export function EditableTitle({ value, onSave, className = "" }: EditableTitlePr
     )
   }
 
+  if (!editable) {
+    return (
+      <div className={`flex items-center gap-2 ${className}`}>
+        <h2 className="text-base font-semibold text-text-primary">{value}</h2>
+      </div>
+    )
+  }
+
   return (
     <div
       className={`flex items-center gap-2 group cursor-pointer ${className}`}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orsetra/shared-ui",
-  "version": "1.0.13",
+  "version": "1.0.15",
   "description": "Shared UI components for Orsetra platform",
   "main": "./index.ts",
   "types": "./index.ts",
@@ -35,30 +35,12 @@
     "tailwind"
   ],
   "peerDependencies": {
+    "next": "^14.0.0 || ^15.0.0",
     "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0",
-    "next": "^14.0.0 || ^15.0.0"
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "react-avatar": "^5.0.3",
-    "react-easy-crop": "^5.0.8",
-    "react-hook-form": "^7.54.0",
-    "react-resizable-panels": "^2.1.7",
     "@hookform/resolvers": "^3.9.1",
-    "zod": "^3.24.1",
-    "clsx": "^2.1.1",
-    "tailwind-merge": "^2.5.5",
-    "class-variance-authority": "^0.7.1",
-    "lucide-react": "^0.454.0",
-    "react-day-picker": "8.10.1",
-    "embla-carousel-react": "8.5.1",
-    "cmdk": "1.0.4",
-    "recharts": "^2.15.0",
-    "date-fns": "4.1.0",
-    "input-otp": "1.4.1",
-    "vaul": "^1.1.1",
-    "next-themes": "^0.4.4",
-    "sonner": "^1.7.1",
     "@radix-ui/react-accordion": "1.2.2",
     "@radix-ui/react-alert-dialog": "1.1.4",
     "@radix-ui/react-aspect-ratio": "1.1.1",
@@ -85,11 +67,29 @@
     "@radix-ui/react-toast": "1.2.4",
     "@radix-ui/react-toggle": "1.1.1",
     "@radix-ui/react-toggle-group": "1.1.1",
-    "@radix-ui/react-tooltip": "1.1.6"
+    "@radix-ui/react-tooltip": "1.1.6",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "1.0.4",
+    "date-fns": "4.1.0",
+    "embla-carousel-react": "8.5.1",
+    "input-otp": "1.4.1",
+    "lucide-react": "^0.454.0",
+    "next-themes": "^0.4.4",
+    "react-avatar": "^5.0.3",
+    "react-day-picker": "8.10.1",
+    "react-easy-crop": "^5.0.8",
+    "react-hook-form": "^7.54.0",
+    "react-resizable-panels": "^2.1.7",
+    "recharts": "^2.15.0",
+    "sonner": "^1.7.1",
+    "tailwind-merge": "^2.5.5",
+    "vaul": "^1.1.1",
+    "zod": "^3.24.1"
   },
   "devDependencies": {
     "@types/react": "^19",
-    "next": "^15.0.0",
+    "next": "^16.0.7",
     "typescript": "^5"
   }
-}
+}