@orsetra/shared-ui 1.0.0 → 1.0.2

package/components/layout/index.ts

@@ -0,0 +1,31 @@
+// Layout components exports
+export { MainSidebar } from './sidebar/main-sidebar'
+export { 
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar
+} 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'

package/components/layout/layout-container.tsx

@@ -0,0 +1,85 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { usePathname } from "next/navigation"
+import { MainSidebar, Sidebar, SidebarProvider, useSidebar } from "./index"
+import { UserMenu } from "../ui"
+import { getMenuFromPath } from "../../lib/menu-utils"
+
+export interface SidebarMenus {
+  [key: string]: any[]
+}
+
+interface LayoutContainerProps {
+  children: React.ReactNode
+  sidebarMenus: SidebarMenus
+  user?: { profile?: { email?: string; preferred_username?: string } } | null
+  onSignOut?: () => void
+}
+
+function LayoutContent({ children, sidebarMenus, user, onSignOut }: LayoutContainerProps) {
+  const pathname = usePathname()
+  const { setOpen } = useSidebar()
+  const [isMainSidebarOpen, setIsMainSidebarOpen] = useState(false)
+  const [currentMenu, setCurrentMenu] = useState<string>("overview")
+
+  useEffect(() => {
+    const contextualMenu = getMenuFromPath(pathname)
+    setCurrentMenu(contextualMenu)
+  }, [pathname])
+
+  const handleMainSidebarToggle = () => {
+    setIsMainSidebarOpen(!isMainSidebarOpen)
+  }
+
+  const handleMenuSelect = (menu: string) => {
+    setCurrentMenu(menu)
+  }
+
+  const handleSecondarySidebarOpen = () => {
+    setOpen(true)
+  }
+
+  const module = pathname.split('/')[1] || 'overview'
+  const sidebarItems = sidebarMenus[module] || []
+
+  return (
+    <div className="flex h-screen w-full bg-white">
+      <Sidebar 
+        currentMenu={currentMenu}
+        onMainMenuToggle={handleMainSidebarToggle}
+      />
+      
+      <MainSidebar 
+        isOpen={isMainSidebarOpen}
+        onToggle={handleMainSidebarToggle}
+        onMenuSelect={handleMenuSelect}
+        currentMenu={currentMenu}
+        onSecondarySidebarOpen={handleSecondarySidebarOpen}
+      />
+      
+      <div className="flex-1 flex flex-col">
+        <header className="h-14 bg-white border-b border-ui-border flex-shrink-0">
+          <div className="h-full px-6 flex items-center justify-end">
+            <UserMenu 
+              username={user?.profile?.email || user?.profile?.preferred_username} 
+              onSignOut={onSignOut || (() => {})} 
+            />
+          </div>
+        </header>
+        
+        <main className="flex-1 overflow-auto">
+          {children}
+        </main>
+      </div>
+    </div>
+  )
+}
+
+export function LayoutContainer(props: LayoutContainerProps) {
+  return (
+    <SidebarProvider defaultOpen={true}>
+      <LayoutContent {...props} />
+    </SidebarProvider>
+  )
+}

package/components/layout/root-layout-wrapper.tsx

@@ -0,0 +1,33 @@
+"use client"
+
+import { IBM_Plex_Sans, IBM_Plex_Mono } from "next/font/google"
+
+const ibmPlexSans = IBM_Plex_Sans({
+  subsets: ["latin"],
+  weight: ["100", "200", "300", "400", "500", "600", "700"],
+  variable: "--font-ibm-plex-sans",
+  display: "swap",
+})
+
+const ibmPlexMono = IBM_Plex_Mono({
+  subsets: ["latin"],
+  weight: ["100", "200", "300", "400", "500", "600", "700"],
+  variable: "--font-ibm-plex-mono",
+  display: "swap",
+})
+
+interface RootLayoutWrapperProps {
+  children: React.ReactNode
+}
+
+export function RootLayoutWrapper({ children }: RootLayoutWrapperProps) {
+  return (
+    <html lang="en" className={`${ibmPlexSans.variable} ${ibmPlexMono.variable}`} suppressHydrationWarning>
+      <body className={`${ibmPlexSans.className} text-base`} suppressHydrationWarning>
+        {children}
+      </body>
+    </html>
+  )
+}
+
+export { ibmPlexSans, ibmPlexMono }

package/components/layout/sidebar/data.tsx

@@ -0,0 +1,88 @@
+"use client"
+
+import {
+  Network,
+  Server,
+  Box,
+  Shield,
+  CloudCog,
+  Globe,
+  Database,
+  Library,
+  Package,
+  Users,
+  FileText,
+  Key,
+  Settings,
+  Rocket,
+} from "lucide-react"
+
+export const menuItems = [
+  {
+    id: "assets",
+    label: "Assets",
+    icon: <Rocket className="h-6 w-6" />
+  },
+  {
+    id: "applications",
+    label: "Applications",
+    icon: <Package className="h-6 w-6" />
+  },
+  {
+    id: "api-manager",
+    label: "API Manager",
+    icon: <Settings className="h-6 w-6" />
+  },
+  {
+    id: "access-manager",
+    label: "Access Manager",
+    icon: <Shield className="h-6 w-6" />
+  }
+]
+
+// 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 }
+  ]
+}
+
+// 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

@@ -0,0 +1,177 @@
+"use client"
+
+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, menuSubItems } from "./data"
+import { X, Menu } from "lucide-react"
+import Link from "next/link"
+
+export type SidebarMode = 'expanded' | 'minimized'
+
+interface MainSidebarProps {
+  isOpen: boolean
+  onToggle: () => void
+  onMenuSelect: (menu: string) => void
+  currentMenu?: string
+  mode?: SidebarMode
+  onSecondarySidebarOpen?: () => void
+}
+
+export function MainSidebar({ 
+  isOpen, 
+  onToggle, 
+  onMenuSelect, 
+  currentMenu,
+  mode = 'expanded',
+  onSecondarySidebarOpen
+}: MainSidebarProps) {
+  const isMinimized = mode === 'minimized'
+  const router = useRouter()
+  const [hoveredMenu, setHoveredMenu] = React.useState<string | null>(null)
+
+  const handleMenuClick = (menuId: string) => {
+    onMenuSelect(menuId)
+    
+    // En mode minimized, ne pas ouvrir le sidebar secondaire
+    if (!isMinimized && onSecondarySidebarOpen) {
+      onSecondarySidebarOpen()
+    }
+    
+    // Rediriger vers le premier sous-menu
+    const subMenus = menuSubItems[menuId as keyof typeof menuSubItems]
+    if (subMenus && subMenus.length > 0) {
+      router.push(subMenus[0].href)
+    }
+    
+    if (!isMinimized) {
+      onToggle() // Fermer le menu principal après sélection (seulement en mode expanded)
+    }
+  }
+
+  const handleSubMenuClick = (href: string) => {
+    router.push(href)
+    setHoveredMenu(null)
+  }
+
+  return (
+    <>
+      {/* Overlay - seulement en mode expanded */}
+      {isOpen && !isMinimized && (
+        <div 
+          className="fixed inset-0 bg-black/50 z-40"
+          onClick={onToggle}
+        />
+      )}
+
+      {/* Main Sidebar */}
+      <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" 
+          : (isOpen ? "translate-x-0" : "-translate-x-full")
+      )}>
+        {/* Header avec logo Orchestra */}
+        <div className={cn(
+          "flex items-center h-16 border-b border-ui-border bg-white",
+          isMinimized ? "justify-center px-2" : "justify-between px-4"
+        )}>
+          {!isMinimized && <Logo className="text-2xl font-semibold text-text-primary" />}
+          {isMinimized ? (
+            <Logo className="text-xl font-semibold text-text-primary" iconOnly />
+          ) : (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={onToggle}
+              className="h-8 w-8 p-0 hover:bg-ui-background text-text-secondary"
+            >
+              <X className="h-4 w-4" />
+            </Button>
+          )}
+        </div>
+
+        {/* Menu Items */}
+        <div className={cn(
+          "overflow-y-auto h-full",
+          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}
+                >
+                  <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>
+
+                {/* Submenu au survol en mode minimized */}
+                {isMinimized && hoveredMenu === item.id && menuSubItems[item.id as keyof typeof menuSubItems] && (
+                  <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) => (
+                        <Link
+                          key={subItem.id}
+                          href={subItem.href}
+                          onClick={() => handleSubMenuClick(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"
+                        >
+                          <subItem.icon className="h-4 w-4" />
+                          {subItem.name}
+                        </Link>
+                      ))}
+                    </div>
+                  </div>
+                )}
+              </div>
+            ))}
+          </nav>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export function MainSidebarToggle({ onClick }: { onClick: () => void }) {
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      onClick={onClick}
+      className="h-8 w-8 p-0 hover:bg-ui-background text-text-secondary"
+      title="Ouvrir le menu principal"
+    >
+      <Menu className="h-4 w-4" />
+    </Button>
+  )
+}