@orsetra/shared-ui 1.1.41 → 1.2.1

package/lib/base-service.ts

@@ -1,4 +1,4 @@
-import HttpClient, { type AuthHeadersProvider } from './http-client';
+import HttpClient, { type AuthHeadersProvider, type Interceptors } from './http-client';
 
 /**
  * Classe de base pour tous les services qui utilisent HttpClient
@@ -6,8 +6,8 @@ import HttpClient, { type AuthHeadersProvider } from './http-client';
 export abstract class BaseService {
   protected httpClient: HttpClient;
 
-  constructor(baseUrl: string, authHeadersProvider?: AuthHeadersProvider) {
-    this.httpClient = HttpClient.getInstance(baseUrl, authHeadersProvider);
+  constructor(baseUrl: string, authHeadersProvider?: AuthHeadersProvider, interceptors?: Interceptors) {
+    this.httpClient = HttpClient.getInstance(baseUrl, authHeadersProvider, interceptors);
   }
 
   protected handleServiceError(error: any): Error {
@@ -16,4 +16,4 @@ export abstract class BaseService {
   }
 }
 
-export type { AuthHeadersProvider };
+export type { AuthHeadersProvider, Interceptors };

package/lib/http-client.ts

@@ -1,7 +1,21 @@
 // Simplified HTTP client without AWS Amplify dependencies
 
+import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse, InternalAxiosRequestConfig } from 'axios';
+
 export type AuthHeadersProvider = () => Promise<Record<string, string>> | Record<string, string>;
 
+export type RequestInterceptor = (config: InternalAxiosRequestConfig) => InternalAxiosRequestConfig | Promise<InternalAxiosRequestConfig>;
+export type RequestErrorInterceptor = (error: any) => any;
+export type ResponseInterceptor = (response: AxiosResponse) => AxiosResponse | Promise<AxiosResponse>;
+export type ResponseErrorInterceptor = (error: any) => any;
+
+export type Interceptors = {
+  onRequest?: RequestInterceptor;
+  onRequestError?: RequestErrorInterceptor;
+  onResponse?: ResponseInterceptor;
+  onResponseError?: ResponseErrorInterceptor;
+};
+
 export class ApiError extends Error {
   status: number;
   code?: number;
@@ -21,32 +35,58 @@ export class ApiError extends Error {
 class HttpClient {
   private baseUrl: string;
   private authHeadersProvider?: AuthHeadersProvider;
+  private axiosInstance: AxiosInstance;
   
-  private constructor(baseUrl: string, authHeadersProvider?: AuthHeadersProvider) {
+  private constructor(baseUrl: string, authHeadersProvider?: AuthHeadersProvider, interceptors?: Interceptors) {
     this.baseUrl = baseUrl || '';
     this.authHeadersProvider = authHeadersProvider;
+    
+    // Create axios instance with base configuration
+    this.axiosInstance = axios.create({
+      baseURL: this.baseUrl,
+      timeout: 30000, // 30 seconds timeout
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    });
+
+    // Setup interceptors if provided
+    if (interceptors) {
+      this.setupInterceptors(interceptors);
+    }
+  }
+
+  private setupInterceptors(interceptors: Interceptors): void {
+    // Setup request interceptor
+    if (interceptors.onRequest || interceptors.onRequestError) {
+      this.axiosInstance.interceptors.request.use(
+        interceptors.onRequest || ((config) => config),
+        interceptors.onRequestError || ((error) => Promise.reject(error))
+      );
+    }
+
+    // Setup response interceptor
+    if (interceptors.onResponse || interceptors.onResponseError) {
+      this.axiosInstance.interceptors.response.use(
+        interceptors.onResponse || ((response) => response),
+        interceptors.onResponseError || ((error) => Promise.reject(error))
+      );
+    }
   }
   
-  public static getInstance(baseUrl: string, authHeadersProvider?: AuthHeadersProvider): HttpClient {
-    return new HttpClient(baseUrl, authHeadersProvider);
+  public static getInstance(baseUrl: string, authHeadersProvider?: AuthHeadersProvider, interceptors?: Interceptors): HttpClient {
+    return new HttpClient(baseUrl, authHeadersProvider, interceptors);
   }
 
-  private getFullUrl(path: string): string {
-    const cleanPath = path.startsWith('/') ? path.slice(1) : path;
-    return `${this.baseUrl}/${cleanPath}`;
-  }
   
-  private async getAuthHeaders(): Promise<Headers> {
-    const headers = new Headers();
-    headers.set('Content-Type', 'application/json');
+  private async getAuthHeaders(): Promise<Record<string, string>> {
+    const headers: Record<string, string> = {};
     
     if (this.authHeadersProvider) {
       try {
         const authHeaders = await this.authHeadersProvider();
-        Object.entries(authHeaders).forEach(([key, value]) => {
-          headers.set(key, value);
-        });
-      } catch (error) {
+        Object.assign(headers, authHeaders);
+      } catch (error: unknown) {
         console.warn('Failed to get auth headers:', error);
       }
     }
@@ -54,184 +94,168 @@ class HttpClient {
     return headers;
   }
   
-  async request<T>(url: string, options: RequestInit = {}): Promise<T | null> {
+  async request<T>(url: string, options: AxiosRequestConfig = {}): Promise<T | null> {
     const headers = await this.getAuthHeaders();
-    
-    // Fusionner avec les headers existants
     if (options.headers) {
-      Object.entries(options.headers).forEach(([key, value]) => {
-        headers.set(key, value as string);
-      });
+      Object.assign(headers, options.headers);
     }
     
-    const fullUrl = this.getFullUrl(url);
-    
-    const response = await fetch(fullUrl, {
-      ...options,
-      headers,
-    });
+    try {
+      const response: AxiosResponse<T> = await this.axiosInstance.request<T>({
+        url,
+        ...options,
+        headers,
+      });
 
-    if (!response.ok) {
-      // Try to extract error message from API response
-      let errorMessage = `Request failed: ${response.status}`;
-      let errorBody: any = undefined;
-      try {
-        errorBody = await response.json();
-        // Zitadel API returns { code, message, details } on error
+      // Handle 204 No Content
+      if (response.status === 204) {
+        return null;
+      }
+      
+      return response.data;
+    } catch (error: unknown) {
+      if (axios.isAxiosError(error) && error.response) {
+        const response = error.response;
+        
+        // Try to extract error message from API response
+        let errorMessage = `Request failed: ${response.status}`;
+        let errorBody: any = response.data;
+        
         if (errorBody?.message) {
           errorMessage = errorBody.message;
         } else if (errorBody?.error) {
           errorMessage = errorBody.error;
         }
-      } catch {
-        // If we can't parse JSON, use the default message
-      }
-
-      const apiError = new ApiError(errorMessage, {
-        status: response.status,
-        code: typeof errorBody?.code === 'number' ? errorBody.code : undefined,
-        details: errorBody?.details,
-        raw: errorBody,
-      });
 
-      // Zitadel step-up requirement
-      const isMfaRequired =
-        apiError.code === 7 ||
-        (typeof errorMessage === 'string' && errorMessage.toLowerCase().includes('mfa required'));
-
-      if (isMfaRequired && typeof window !== 'undefined') {
-        try {
-          window.dispatchEvent(
-            new CustomEvent('zitadel:mfa-required', {
-              detail: { url, status: apiError.status, code: apiError.code, error: apiError.raw },
-            })
-          );
-        } catch {
-          // ignore event dispatch issues
-        }
+        const apiError = new ApiError(errorMessage, {
+          status: response.status,
+          code: typeof errorBody?.code === 'number' ? errorBody.code : undefined,
+          details: errorBody?.details,
+          raw: errorBody,
+        });
+        throw apiError;
+      } else {
+        // For non-axios errors or network errors
+        throw new Error(error instanceof Error ? error.message : 'Unknown error occurred');
       }
-
-      throw apiError;
-    }
-    
-    if (response.status === 204) {
-      return null;
     }
-    
-    return response.json();
   }
   
-  async get<T>(url: string, options: RequestInit = {}): Promise<T | null> {
+  async get<T>(url: string, options: AxiosRequestConfig = {}): Promise<T | null> {
     return this.request<T>(url, {
       ...options,
       method: 'GET'
     });
   }
   
-  async post<T>(url: string, body?: any, options: RequestInit = {}): Promise<T | null> {
+  async post<T>(url: string, body?: any, options: AxiosRequestConfig = {}): Promise<T | null> {
     return this.request<T>(url, {
       ...options,
       method: 'POST',
-      body: body ? JSON.stringify(body) : undefined
+      data: body
     });
   }
   
-  async put<T>(url: string, body?: any, options: RequestInit = {}): Promise<T | null> {
+  async put<T>(url: string, body?: any, options: AxiosRequestConfig = {}): Promise<T | null> {
     return this.request<T>(url, {
       ...options,
       method: 'PUT',
-      body: body ? JSON.stringify(body) : undefined
+      data: body
     });
   }
   
-  async patch<T>(url: string, body?: any, options: RequestInit = {}): Promise<T | null> {
+  async patch<T>(url: string, body?: any, options: AxiosRequestConfig = {}): Promise<T | null> {
     return this.request<T>(url, {
       ...options,
       method: 'PATCH',
-      body: body ? JSON.stringify(body) : undefined
+      data: body
     });
   }
   
-  async delete<T>(url: string, options: RequestInit = {}): Promise<T | null> {
+  async delete<T>(url: string, options: AxiosRequestConfig = {}): Promise<T | null> {
     return this.request<T>(url, {
       ...options,
       method: 'DELETE'
     });
   }
 
-  async upload<T>(url: string, formData: FormData, options: RequestInit = {}): Promise<T> {
+  async upload<T>(url: string, formData: FormData, options: AxiosRequestConfig = {}): Promise<T> {
     const headers = await this.getAuthHeaders();
-    
-    if (headers.has('Content-Type')) {
-      headers.delete('Content-Type');
-    }
-    
-    const fullUrl = this.getFullUrl(url);
-    
-    const response = await fetch(fullUrl, {
-      ...options,
-      method: 'POST',
-      body: formData,
-      headers
-    });
-    
-    if (!response.ok) {
-      // 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;
+    try {
+      const response: AxiosResponse<T> = await this.axiosInstance.request<T>({
+        url,
+        method: 'POST',
+        data: formData,
+        headers,
+        ...options
+      });
+      
+      if (response.status === 204) {
+        return null as unknown as T;
+      }
+      
+      return response.data;
+    } catch (error: unknown) {
+      if (axios.isAxiosError(error) && error.response) {
+        const response = error.response;
+        let errorMessage = `Upload failed: ${response.status} ${response.statusText}`;
+        
+        if (response.data) {
+          if (typeof response.data === 'object' && response.data?.message) {
+            errorMessage = response.data.message;
+          } else if (typeof response.data === 'object' && response.data?.error) {
+            errorMessage = response.data.error;
+          }
         }
-      } catch {
-        // Try text if JSON fails
-        try {
-          const errorText = await response.text();
-          if (errorText) errorMessage = errorText;
-        } catch { /* ignore */ }
+        
+        throw new Error(errorMessage);
+      } else {
+        throw new Error(error instanceof Error ? error.message : 'Unknown upload error');
       }
-      throw new Error(errorMessage);
-    }
-    
-    if (response.status === 204) {
-      return null as unknown as T;
     }
-    
-    return response.json();
   }
 
   async download(url: string): Promise<Blob> {
     const headers = await this.getAuthHeaders();
-    const fullUrl = this.getFullUrl(url);
-    
-    const response = await fetch(fullUrl, {
-      method: 'GET',
-      headers,
-      credentials: 'include'
-    });
     
-    if (!response.ok) {
-      // 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;
+    try {
+      const response = await this.axiosInstance.request({
+        url,
+        method: 'GET',
+        headers,
+        responseType: 'blob'
+      });
+      
+      return response.data;
+    } catch (error: unknown) {
+      if (axios.isAxiosError(error) && error.response) {
+        const response = error.response;
+        let errorMessage = `Download failed: ${response.status} ${response.statusText}`;
+        
+        if (response.data) {
+          try {
+            const errorText = await (response.data as Blob).text();
+            const errorBody = JSON.parse(errorText);
+            if (errorBody?.message) {
+              errorMessage = errorBody.message;
+            } else if (errorBody?.error) {
+              errorMessage = errorBody.error;
+            }
+          } catch {
+            // If JSON parsing fails, use default message
+          }
         }
-      } catch { /* ignore */ }
-      throw new Error(errorMessage);
+        
+        throw new Error(errorMessage);
+      } else {
+        throw new Error(error instanceof Error ? error.message : 'Unknown download error');
+      }
     }
-    
-    return await response.blob();
   }
 }
 
-export function useHttpClient(baseUrl: string, authHeadersProvider?: AuthHeadersProvider) {
-  return HttpClient.getInstance(baseUrl, authHeadersProvider);
+export function useHttpClient(baseUrl: string, authHeadersProvider?: AuthHeadersProvider, interceptors?: Interceptors) {
+  return HttpClient.getInstance(baseUrl, authHeadersProvider, interceptors);
 }
 
 export default HttpClient;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orsetra/shared-ui",
-  "version": "1.1.41",
+  "version": "1.2.1",
   "description": "Shared UI components for Orsetra platform",
   "main": "./index.ts",
   "types": "./index.ts",
@@ -75,6 +75,8 @@
     "@radix-ui/react-toggle": "1.1.1",
     "@radix-ui/react-toggle-group": "1.1.1",
     "@radix-ui/react-tooltip": "1.1.6",
+    "@types/js-cookie": "^3.0.6",
+    "axios": "^1.13.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "1.0.4",
@@ -82,15 +84,14 @@
     "embla-carousel-react": "8.5.1",
     "i18next": "^23.15.0",
     "input-otp": "1.4.1",
+    "js-cookie": "^3.0.5",
+    "js-yaml": "^4.1.1",
     "lodash": "^4.17.21",
     "lucide-react": "^0.454.0",
     "moment": "^2.30.1",
+    "monaco-editor": "^0.55.1",
     "next-themes": "^0.4.4",
     "react-avatar": "^5.0.3",
-    "js-cookie": "^3.0.5",
-    "js-yaml": "^4.1.1",
-    "monaco-editor": "^0.55.1",
-    "@types/js-cookie": "^3.0.6",
     "react-day-picker": "8.10.1",
     "react-easy-crop": "^5.0.8",
     "react-hook-form": "^7.54.0",