@orsetra/shared-ui 1.0.60 → 1.0.62

package/components/layout/index.ts

@@ -30,3 +30,4 @@ export {
 // Skeleton is exported from ../ui to avoid duplicate exports
 export { RootLayoutWrapper, ibmPlexSans, ibmPlexMono } from './root-layout-wrapper'
 export { LayoutContainer } from './layout-container'
+export { PageWithSidePanel } from './page-with-side-panel'

package/components/layout/page-with-side-panel.tsx

@@ -0,0 +1,110 @@
+"use client"
+
+import { ReactNode, useState } from "react"
+import { X, ChevronLeft } from "lucide-react"
+import { Button } from "../ui/button"
+
+interface PageWithSidePanelProps {
+  children: ReactNode
+  sidePanel?: ReactNode
+  sidePanelHeader?: ReactNode
+  sidePanelWidth?: "sm" | "md" | "lg"
+  closable?: boolean
+  defaultOpen?: boolean
+  showBorder?: boolean
+  onClose?: () => void
+  onOpen?: () => void
+}
+
+const PANEL_WIDTHS = {
+  sm: "w-64",      // 256px
+  md: "w-72",      // 288px
+  lg: "w-80",      // 320px
+}
+
+const PANEL_PADDING = {
+  sm: "lg:pr-64",
+  md: "lg:pr-72",
+  lg: "lg:pr-80",
+}
+
+export function PageWithSidePanel({ 
+  children, 
+  sidePanel,
+  sidePanelHeader,
+  sidePanelWidth = "md",
+  closable = false,
+  defaultOpen = true,
+  showBorder = true,
+  onClose,
+  onOpen
+}: PageWithSidePanelProps) {
+  const [isOpen, setIsOpen] = useState(defaultOpen)
+  const panelWidthClass = PANEL_WIDTHS[sidePanelWidth]
+  const panelPaddingClass = PANEL_PADDING[sidePanelWidth]
+
+  const handleClose = () => {
+    setIsOpen(false)
+    onClose?.()
+  }
+
+  const handleOpen = () => {
+    setIsOpen(true)
+    onOpen?.()
+  }
+
+  return (
+    <div className="min-h-screen bg-white overflow-hidden">
+      {/* Main content */}
+      <div className={`w-full px-6 py-8 transition-all duration-300 ${sidePanel && isOpen ? panelPaddingClass : ''}`}>
+        {children}
+      </div>
+
+      {/* Side panel - fixed */}
+      {sidePanel && (
+        <>
+          <div 
+            className={`hidden lg:block ${panelWidthClass} flex-shrink-0 fixed top-14 bottom-0 right-0 bg-white flex flex-col ${showBorder ? 'border-l border-ibm-gray-40' : ''} transition-transform duration-300 ease-in-out ${
+              isOpen ? 'translate-x-0' : 'translate-x-full'
+            }`}
+          >
+            {/* Header */}
+            {(sidePanelHeader || closable) && (
+              <div className="flex items-center justify-between p-4 border-b border-ibm-gray-20 flex-shrink-0">
+                <div className="flex-1">
+                  {sidePanelHeader}
+                </div>
+                {closable && (
+                  <Button
+                    variant="ghost"
+                    size="xs"
+                    onClick={handleClose}
+                    className="h-8 w-8 p-0 ml-2"
+                  >
+                    <X className="h-4 w-4" />
+                  </Button>
+                )}
+              </div>
+            )}
+
+            {/* Content */}
+            <div className="flex-1 overflow-y-auto">
+              {sidePanel}
+            </div>
+          </div>
+
+          {/* Toggle button - shown when panel is closed */}
+          {closable && !isOpen && (
+            <button
+              onClick={handleOpen}
+              className="hidden lg:flex fixed top-1/2 right-0 -translate-y-1/2 items-center justify-center w-8 h-16 bg-white border border-ibm-gray-40 border-r-0 rounded-l-lg shadow-md hover:bg-ibm-gray-10 transition-colors duration-200"
+              aria-label="Open side panel"
+            >
+              <ChevronLeft className="h-5 w-5 text-ibm-gray-70" />
+            </button>
+          )}
+        </>
+      )}
+    </div>
+  )
+}

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

@@ -145,8 +145,8 @@ export function MainSidebar({
                 </button>
 
                 {isMinimized && hoveredMenu === item.id && sidebarMenus[item.id] && sidebarMenus[item.id].length > 0 && (
-                  <div className="absolute left-full top-0 ml-2 bg-gray-50 rounded-lg shadow-xl z-50 min-w-[200px] py-2">
-                    <div className="px-4 py-2 bg-gray-50">
+                  <div className="absolute left-full top-0 ml-2 bg-white rounded-lg shadow-xl z-50 min-w-[200px] py-2">
+                    <div className="px-4 py-2">
                       <h3 className="text-sm font-semibold text-text-primary">{item.label}</h3>
                     </div>
                     <div className="py-1">

package/components/layout/sidebar/sidebar.tsx

@@ -272,7 +272,7 @@ function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_u
       </nav>
 
       {/* Footer - Menu Paramètres */}
-      <div className="relative border-t border-ui-border px-3 py-3" ref={settingsRef}>
+      <div className="relative  border-ui-border px-3 py-3" ref={settingsRef}>
         {/* Dropdown vers le haut */}
         {settingsOpen && (
           <div className="absolute bottom-full left-2 right-2 mb-1 bg-white border border-ui-border rounded-none shadow-lg z-50">

package/components/ui/page-header.tsx

@@ -4,32 +4,28 @@ import type { ReactNode } from "react"
 
 interface PageHeaderProps {
   title: string
-  description?: string
   backLink?: string
   actions?: ReactNode
   statusNode?: ReactNode
 }
 
-export function PageHeader({ title, description, backLink, actions, statusNode}: PageHeaderProps) {
+export function PageHeader({ title, backLink, actions, statusNode}: PageHeaderProps) {
   return (
-    <div className="mb-4 sm:mb-8">
-      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+    <div className="sticky top-0 z-10 bg-white border-b border-gray-200 -mx-6 px-6 py-3 mb-6">
+      <div className="flex items-center justify-between gap-4">
         <div className="flex items-center space-x-3 min-w-0">
           {backLink && (
             <Link href={backLink} className="flex-shrink-0">
-              <ArrowLeft className="h-5 w-5 sm:h-6 sm:w-6 text-text-secondary" />
+              <ArrowLeft className="h-4 w-4 text-text-secondary" />
             </Link>
           )}
-          <div className="min-w-0">
-            <div className="flex items-center space-x-3">
-              <h1 className="text-xl sm:text-2xl font-semibold text-text-primary truncate">{title}</h1>
-              {statusNode && <div className="mt-2 flex-shrink-0">{statusNode}</div>}
-            </div>
-            {description && <p className="text-sm sm:text-base text-text-secondary line-clamp-2">{description}</p>}
+          <div className="flex items-center space-x-3 min-w-0">
+            <h2 className="text-base font-semibold text-text-primary truncate">{title}</h2>
+            {statusNode && <div className="flex-shrink-0">{statusNode}</div>}
           </div>
         </div>
-        {actions && <div className="flex items-center space-x-2 sm:space-x-4 flex-shrink-0">{actions}</div>}
+        {actions && <div className="flex items-center space-x-2 flex-shrink-0">{actions}</div>}
       </div>
     </div>
   )
-} 
+}

package/package.json

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