@orsetra/shared-ui 1.0.22 → 1.0.24

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

@@ -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/lib/http-client.ts

@@ -56,7 +56,20 @@ class HttpClient {
     });
 
     if (!response.ok) {
-      throw new Error(`Request failed: ${response.status}`);
+      // Try to extract error message from API response
+      let errorMessage = `Request failed: ${response.status}`;
+      try {
+        const errorBody = await response.json();
+        // Zitadel API returns { code, message, details } on error
+        if (errorBody?.message) {
+          errorMessage = errorBody.message;
+        } else if (errorBody?.error) {
+          errorMessage = errorBody.error;
+        }
+      } catch {
+        // If we can't parse JSON, use the default message
+      }
+      throw new Error(errorMessage);
     }
     
     if (response.status === 204) {
@@ -89,6 +102,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,
@@ -113,8 +134,23 @@ class HttpClient {
     });
     
     if (!response.ok) {
-      const errorText = await response.text();
-      throw new Error(`Upload failed: ${response.status} ${response.statusText} - ${errorText}`);
+      // Try to extract error message from API response
+      let errorMessage = `Upload failed: ${response.status} ${response.statusText}`;
+      try {
+        const errorBody = await response.json();
+        if (errorBody?.message) {
+          errorMessage = errorBody.message;
+        } else if (errorBody?.error) {
+          errorMessage = errorBody.error;
+        }
+      } catch {
+        // Try text if JSON fails
+        try {
+          const errorText = await response.text();
+          if (errorText) errorMessage = errorText;
+        } catch { /* ignore */ }
+      }
+      throw new Error(errorMessage);
     }
     
     if (response.status === 204) {
@@ -135,7 +171,17 @@ class HttpClient {
     });
     
     if (!response.ok) {
-      throw new Error(`Download failed: ${response.status} ${response.statusText}`);
+      // Try to extract error message from API response
+      let errorMessage = `Download failed: ${response.status} ${response.statusText}`;
+      try {
+        const errorBody = await response.json();
+        if (errorBody?.message) {
+          errorMessage = errorBody.message;
+        } else if (errorBody?.error) {
+          errorMessage = errorBody.error;
+        }
+      } catch { /* ignore */ }
+      throw new Error(errorMessage);
     }
     
     return await response.blob();

package/package.json

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