@orsetra/shared-ui 1.0.20 → 1.0.23

package/components/layout/layout-container.tsx

@@ -5,7 +5,7 @@ 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 { UserMenu, Button } from "../ui"
+import { UserMenu, Button, type UserMenuConfig } from "../ui"
 import { getMenuFromPath } from "../../lib/menu-utils"
 import { useIsMobile } from "../../hooks/use-mobile"
 import { Menu } from "lucide-react"
@@ -16,9 +16,10 @@ interface LayoutContainerProps {
   user?: { profile?: { email?: string; preferred_username?: string } } | null
   onSignOut?: () => void
   mode?: SidebarMode
+  userMenuConfig?: UserMenuConfig
 }
 
-function LayoutContent({ children, sidebarMenus, user, onSignOut, mode = 'expanded' }: LayoutContainerProps) {
+function LayoutContent({ children, sidebarMenus, user, onSignOut, mode = 'expanded', userMenuConfig }: LayoutContainerProps) {
   const pathname = usePathname()
   const { setOpen } = useSidebar()
   const isMobile = useIsMobile()
@@ -96,7 +97,8 @@ function LayoutContent({ children, sidebarMenus, user, onSignOut, mode = 'expand
             )}
             <UserMenu 
               username={user?.profile?.email || user?.profile?.preferred_username} 
-              onSignOut={onSignOut || (() => {})} 
+              onSignOut={onSignOut || (() => {})}
+              menuConfig={userMenuConfig}
             />
           </div>
         </header>

package/components/ui/alert-banner.tsx

@@ -0,0 +1,131 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X, CheckCircle, AlertCircle, AlertTriangle, Info } from "lucide-react"
+import { cn } from "../../lib/utils"
+
+const alertBannerVariants = cva(
+  "relative w-full flex items-center gap-3 px-4 py-3 text-sm font-medium transition-all duration-300",
+  {
+    variants: {
+      variant: {
+        success: "bg-green-50 text-green-800 border-b border-green-200",
+        error: "bg-red-50 text-red-800 border-b border-red-200",
+        warning: "bg-amber-50 text-amber-800 border-b border-amber-200",
+        info: "bg-blue-50 text-blue-800 border-b border-blue-200",
+      },
+    },
+    defaultVariants: {
+      variant: "info",
+    },
+  }
+)
+
+const iconMap = {
+  success: CheckCircle,
+  error: AlertCircle,
+  warning: AlertTriangle,
+  info: Info,
+}
+
+export interface AlertBannerProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof alertBannerVariants> {
+  message: string
+  onClose?: () => void
+  closable?: boolean
+  icon?: React.ReactNode
+}
+
+const AlertBanner = React.forwardRef<HTMLDivElement, AlertBannerProps>(
+  ({ className, variant = "info", message, onClose, closable = true, icon, ...props }, ref) => {
+    const Icon = iconMap[variant || "info"]
+    
+    return (
+      <div
+        ref={ref}
+        role="alert"
+        className={cn(alertBannerVariants({ variant }), className)}
+        {...props}
+      >
+        {icon || <Icon className="h-5 w-5 flex-shrink-0" />}
+        <span className="flex-1">{message}</span>
+        {closable && onClose && (
+          <button
+            onClick={onClose}
+            className="flex-shrink-0 p-1 rounded-md hover:bg-black/5 transition-colors"
+            aria-label="Fermer"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        )}
+      </div>
+    )
+  }
+)
+AlertBanner.displayName = "AlertBanner"
+
+// Hook pour gérer les alertes
+export interface AlertState {
+  show: boolean
+  variant: "success" | "error" | "warning" | "info"
+  message: string
+}
+
+export function useAlertBanner() {
+  const [alert, setAlert] = React.useState<AlertState>({
+    show: false,
+    variant: "info",
+    message: "",
+  })
+
+  const showAlert = React.useCallback(
+    (variant: AlertState["variant"], message: string, duration = 5000) => {
+      setAlert({ show: true, variant, message })
+      
+      if (duration > 0) {
+        setTimeout(() => {
+          setAlert((prev) => ({ ...prev, show: false }))
+        }, duration)
+      }
+    },
+    []
+  )
+
+  const hideAlert = React.useCallback(() => {
+    setAlert((prev) => ({ ...prev, show: false }))
+  }, [])
+
+  const showSuccess = React.useCallback(
+    (message: string, duration?: number) => showAlert("success", message, duration),
+    [showAlert]
+  )
+
+  const showError = React.useCallback(
+    (message: string, duration?: number) => showAlert("error", message, duration),
+    [showAlert]
+  )
+
+  const showWarning = React.useCallback(
+    (message: string, duration?: number) => showAlert("warning", message, duration),
+    [showAlert]
+  )
+
+  const showInfo = React.useCallback(
+    (message: string, duration?: number) => showAlert("info", message, duration),
+    [showAlert]
+  )
+
+  return {
+    alert,
+    showAlert,
+    hideAlert,
+    showSuccess,
+    showError,
+    showWarning,
+    showInfo,
+  }
+}
+
+export { AlertBanner }

package/components/ui/index.ts

@@ -5,7 +5,7 @@ export { Avatar, AvatarImage, AvatarFallback } from './avatar'
 export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator } from './dropdown-menu'
 export { Separator } from './separator'
 export { Logo } from './logo'
-export { UserMenu } from './user-menu'
+export { UserMenu, type UserMenuItem, type UserMenuConfig } from './user-menu'
 export { Input } from './input'
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from './tooltip'
 export { PageHeader } from './page-header'
@@ -21,6 +21,7 @@ export { ImageCropDialog } from './image-crop-dialog'
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from './accordion'
 export { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel } from './alert-dialog'
 export { Alert, AlertTitle, AlertDescription } from './alert'
+export { AlertBanner, useAlertBanner, type AlertBannerProps, type AlertState } from './alert-banner'
 export { AspectRatio } from './aspect-ratio'
 export { Badge } from './badge'
 export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis } from './breadcrumb'

package/components/ui/user-menu.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { useRouter } from "next/navigation"
-import { LogOut, Settings, Building2, User, ChevronDown } from "lucide-react"
+import { LogOut, ChevronDown, type LucideIcon } from "lucide-react"
 import Avatar from "react-avatar"
 import { Button } from "./button"
 import {
@@ -12,15 +12,30 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "./dropdown-menu"
+
+// Type for configurable user menu items
+export interface UserMenuItem {
+  id: string
+  label: string
+  href: string
+  icon: LucideIcon
+}
+
+export interface UserMenuConfig {
+  items: UserMenuItem[]
+}
+
 interface UserMenuProps {
   username?: string
   onSignOut: () => void
+  menuConfig?: UserMenuConfig
 }
 
-export function UserMenu({ username, onSignOut }: UserMenuProps) {
+export function UserMenu({ username, onSignOut, menuConfig }: UserMenuProps) {
   const router = useRouter()
   
   const displayName = username || "User"
+  const menuItems = menuConfig?.items || []
 
   return (
     <DropdownMenu>
@@ -50,28 +65,24 @@ export function UserMenu({ username, onSignOut }: UserMenuProps) {
             <p className="text-sm font-medium leading-none">{displayName}</p>
           </div>
         </DropdownMenuLabel>
-        <DropdownMenuSeparator />
-        <DropdownMenuItem 
-          className="cursor-pointer"
-          onClick={() => router.push('/profile')}
-        >
-          <User className="mr-2 h-4 w-4" />
-          <span>Profile</span>
-        </DropdownMenuItem>
-        <DropdownMenuItem 
-          className="cursor-pointer"
-          onClick={() => router.push('/organization')}
-        >
-          <Building2 className="mr-2 h-4 w-4" />
-          <span>Organization</span>
-        </DropdownMenuItem>
-        <DropdownMenuItem 
-          className="cursor-pointer"
-          onClick={() => router.push('/settings')}
-        >
-          <Settings className="mr-2 h-4 w-4" />
-          <span>Settings</span>
-        </DropdownMenuItem>
+        {menuItems.length > 0 && (
+          <>
+            <DropdownMenuSeparator />
+            {menuItems.map((item) => {
+              const Icon = item.icon
+              return (
+                <DropdownMenuItem 
+                  key={item.id}
+                  className="cursor-pointer"
+                  onClick={() => router.push(item.href)}
+                >
+                  <Icon className="mr-2 h-4 w-4" />
+                  <span>{item.label}</span>
+                </DropdownMenuItem>
+              )
+            })}
+          </>
+        )}
         <DropdownMenuSeparator />
         <DropdownMenuItem 
           className="cursor-pointer text-red-600 focus:text-red-600 focus:bg-red-50"

package/lib/http-client.ts

@@ -89,6 +89,14 @@ class HttpClient {
     });
   }
   
+  async patch<T>(url: string, body?: any, options: RequestInit = {}): Promise<T | null> {
+    return this.request<T>(url, {
+      ...options,
+      method: 'PATCH',
+      body: body ? JSON.stringify(body) : undefined
+    });
+  }
+  
   async delete<T>(url: string, options: RequestInit = {}): Promise<T | null> {
     return this.request<T>(url, {
       ...options,

package/package.json

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