@orsetra/shared-ui 1.0.19 → 1.0.22

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/button.tsx

@@ -13,7 +13,7 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
 }
 
 const base =
-  'inline-flex items-center justify-center font-semibold rounded-md transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-ibm-blue-60 focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none select-none'
+  'inline-flex items-center justify-center font-semibold rounded-none transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-ibm-blue-60 focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none select-none'
 
 export const variants: Record<ButtonVariant, string> = {
   primary:

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'

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/base-service.ts

@@ -1,14 +1,13 @@
-import HttpClient from './http-client';
+import HttpClient, { type AuthHeadersProvider } from './http-client';
 
 /**
  * Classe de base pour tous les services qui utilisent HttpClient
- * L'organization ID est automatiquement ajouté aux headers via les custom attributes AWS Amplify
  */
 export abstract class BaseService {
   protected httpClient: HttpClient;
 
-  constructor(baseUrl: string) {
-    this.httpClient = HttpClient.getInstance(baseUrl);
+  constructor(baseUrl: string, authHeadersProvider?: AuthHeadersProvider) {
+    this.httpClient = HttpClient.getInstance(baseUrl, authHeadersProvider);
   }
 
   protected handleServiceError(error: any): Error {
@@ -16,3 +15,5 @@ export abstract class BaseService {
     return error
   }
 }
+
+export type { AuthHeadersProvider };

package/lib/http-client.ts

@@ -1,14 +1,18 @@
 // Simplified HTTP client without AWS Amplify dependencies
 
+export type AuthHeadersProvider = () => Promise<Record<string, string>> | Record<string, string>;
+
 class HttpClient {
   private baseUrl: string;
+  private authHeadersProvider?: AuthHeadersProvider;
   
-  private constructor(baseUrl: string) {
-    this.baseUrl = baseUrl ||  '';
+  private constructor(baseUrl: string, authHeadersProvider?: AuthHeadersProvider) {
+    this.baseUrl = baseUrl || '';
+    this.authHeadersProvider = authHeadersProvider;
   }
   
-  public static getInstance(baseUrl: string): HttpClient {
-    return  new HttpClient(baseUrl);
+  public static getInstance(baseUrl: string, authHeadersProvider?: AuthHeadersProvider): HttpClient {
+    return new HttpClient(baseUrl, authHeadersProvider);
   }
 
   private getFullUrl(path: string): string {
@@ -20,15 +24,15 @@ class HttpClient {
     const headers = new Headers();
     headers.set('Content-Type', 'application/json');
     
-    try {
-      // TODO: Add authentication token and account context if needed
-      // For now, just return basic headers
-    } catch (error) {
-      console.warn('Failed to get auth headers:', error);
-    }
-    
-    if (!headers.has('Content-Type')) {
-      headers.set('Content-Type', 'application/json');
+    if (this.authHeadersProvider) {
+      try {
+        const authHeaders = await this.authHeadersProvider();
+        Object.entries(authHeaders).forEach(([key, value]) => {
+          headers.set(key, value);
+        });
+      } catch (error) {
+        console.warn('Failed to get auth headers:', error);
+      }
     }
 
     return headers;
@@ -138,8 +142,8 @@ class HttpClient {
   }
 }
 
-export function useHttpClient(baseUrl: string) {
-  return HttpClient.getInstance(baseUrl);
+export function useHttpClient(baseUrl: string, authHeadersProvider?: AuthHeadersProvider) {
+  return HttpClient.getInstance(baseUrl, authHeadersProvider);
 }
 
 export default HttpClient;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orsetra/shared-ui",
-  "version": "1.0.19",
+  "version": "1.0.22",
   "description": "Shared UI components for Orsetra platform",
   "main": "./index.ts",
   "types": "./index.ts",
@@ -92,4 +92,4 @@
     "next": "^16.0.7",
     "typescript": "^5"
   }
-}
+}