@nimbleflux/fluxbase-sdk-react 2026.3.6 → 2026.3.7-rc.2

package/src/use-tenant.ts

@@ -0,0 +1,311 @@
+/**
+ * React hooks for multi-tenant management
+ *
+ * @module use-tenant
+ */
+
+import { useState, useEffect, useCallback } from "react";
+import { useFluxbaseClient } from "./context";
+import type {
+  Tenant,
+  TenantWithRole,
+  CreateTenantOptions,
+  UpdateTenantOptions,
+} from "@nimbleflux/fluxbase-sdk";
+
+export interface UseTenantsOptions {
+  /**
+   * Whether to automatically fetch tenants on mount
+   * @default true
+   */
+  autoFetch?: boolean;
+}
+
+export interface UseTenantsReturn {
+  /**
+   * Array of tenants the user has access to
+   */
+  tenants: TenantWithRole[];
+
+  /**
+   * Whether tenants are being fetched
+   */
+  isLoading: boolean;
+
+  /**
+   * Any error that occurred
+   */
+  error: Error | null;
+
+  /**
+   * Refetch tenants
+   */
+  refetch: () => Promise<void>;
+
+  /**
+   * Create a new tenant (instance admin only)
+   */
+  createTenant: (options: CreateTenantOptions) => Promise<Tenant>;
+
+  /**
+   * Update a tenant (tenant admin only)
+   */
+  updateTenant: (id: string, options: UpdateTenantOptions) => Promise<Tenant>;
+
+  /**
+   * Delete a tenant (instance admin only)
+   */
+  deleteTenant: (id: string) => Promise<void>;
+
+  /**
+   * Set the current tenant context
+   */
+  setCurrentTenant: (tenantId: string | undefined) => void;
+
+  /**
+   * Get the current tenant ID
+   */
+  currentTenantId: string | undefined;
+}
+
+/**
+ * Hook for managing tenants
+ *
+ * Provides tenant list and management functions for multi-tenant applications.
+ *
+ * @example
+ * ```tsx
+ * function TenantManager() {
+ *   const { tenants, isLoading, setCurrentTenant, currentTenantId } = useTenants()
+ *
+ *   if (isLoading) return <div>Loading...</div>
+ *
+ *   return (
+ *     <select
+ *       value={currentTenantId || ''}
+ *       onChange={(e) => setCurrentTenant(e.target.value || undefined)}
+ *     >
+ *       {tenants.map(t => (
+ *         <option key={t.id} value={t.id}>
+ *           {t.name} ({t.my_role})
+ *         </option>
+ *       ))}
+ *     </select>
+ *   )
+ * }
+ * ```
+ */
+export function useTenants(options: UseTenantsOptions = {}): UseTenantsReturn {
+  const { autoFetch = true } = options;
+  const client = useFluxbaseClient();
+
+  const [tenants, setTenants] = useState<TenantWithRole[]>([]);
+  const [isLoading, setIsLoading] = useState(autoFetch);
+  const [error, setError] = useState<Error | null>(null);
+  const [currentTenantId, setCurrentTenantId] = useState<string | undefined>(
+    client.getTenantId(),
+  );
+
+  const fetchTenants = useCallback(async () => {
+    try {
+      setIsLoading(true);
+      setError(null);
+      const { data, error: fetchError } = await client.tenant.listMine();
+      if (fetchError) {
+        setError(fetchError);
+      } else {
+        setTenants(data || []);
+      }
+    } catch (err) {
+      setError(err as Error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [client]);
+
+  const createTenant = useCallback(
+    async (opts: CreateTenantOptions): Promise<Tenant> => {
+      const { data, error: createError } = await client.tenant.create(opts);
+      if (createError) throw createError;
+      await fetchTenants();
+      return data!;
+    },
+    [client, fetchTenants],
+  );
+
+  const updateTenant = useCallback(
+    async (id: string, opts: UpdateTenantOptions): Promise<Tenant> => {
+      const { data, error: updateError } = await client.tenant.update(id, opts);
+      if (updateError) throw updateError;
+      await fetchTenants();
+      return data!;
+    },
+    [client, fetchTenants],
+  );
+
+  const deleteTenant = useCallback(
+    async (id: string): Promise<void> => {
+      const { error: deleteError } = await client.tenant.delete(id);
+      if (deleteError) throw deleteError;
+      await fetchTenants();
+    },
+    [client, fetchTenants],
+  );
+
+  const setCurrentTenant = useCallback(
+    (tenantId: string | undefined) => {
+      client.setTenant(tenantId);
+      setCurrentTenantId(tenantId);
+    },
+    [client],
+  );
+
+  useEffect(() => {
+    if (autoFetch) {
+      fetchTenants();
+    }
+  }, [autoFetch, fetchTenants]);
+
+  return {
+    tenants,
+    isLoading,
+    error,
+    refetch: fetchTenants,
+    createTenant,
+    updateTenant,
+    deleteTenant,
+    setCurrentTenant,
+    currentTenantId,
+  };
+}
+
+export interface UseTenantOptions {
+  /**
+   * Tenant ID to fetch
+   */
+  tenantId: string;
+
+  /**
+   * Whether to automatically fetch tenant on mount
+   * @default true
+   */
+  autoFetch?: boolean;
+}
+
+export interface UseTenantReturn {
+  /**
+   * Tenant data
+   */
+  tenant: Tenant | null;
+
+  /**
+   * Whether tenant is being fetched
+   */
+  isLoading: boolean;
+
+  /**
+   * Any error that occurred
+   */
+  error: Error | null;
+
+  /**
+   * Refetch tenant
+   */
+  refetch: () => Promise<void>;
+
+  /**
+   * Update the tenant
+   */
+  update: (options: UpdateTenantOptions) => Promise<Tenant>;
+
+  /**
+   * Delete the tenant
+   */
+  remove: () => Promise<void>;
+}
+
+/**
+ * Hook for managing a single tenant
+ *
+ * @example
+ * ```tsx
+ * function TenantDetails({ tenantId }: { tenantId: string }) {
+ *   const { tenant, isLoading, update } = useTenant({ tenantId })
+ *
+ *   if (isLoading) return <div>Loading...</div>
+ *   if (!tenant) return <div>Tenant not found</div>
+ *
+ *   return (
+ *     <div>
+ *       <h1>{tenant.name}</h1>
+ *       <button onClick={() => update({ name: 'New Name' })}>
+ *         Rename
+ *       </button>
+ *     </div>
+ *   )
+ * }
+ * ```
+ */
+export function useTenant(options: UseTenantOptions): UseTenantReturn {
+  const { tenantId, autoFetch = true } = options;
+  const client = useFluxbaseClient();
+
+  const [tenant, setTenant] = useState<Tenant | null>(null);
+  const [isLoading, setIsLoading] = useState(autoFetch);
+  const [error, setError] = useState<Error | null>(null);
+
+  const fetchTenant = useCallback(async () => {
+    if (!tenantId) return;
+
+    try {
+      setIsLoading(true);
+      setError(null);
+      const { data, error: fetchError } = await client.tenant.get(tenantId);
+      if (fetchError) {
+        setError(fetchError);
+        setTenant(null);
+      } else {
+        setTenant(data);
+      }
+    } catch (err) {
+      setError(err as Error);
+      setTenant(null);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [client, tenantId]);
+
+  const update = useCallback(
+    async (opts: UpdateTenantOptions): Promise<Tenant> => {
+      const { data, error: updateError } = await client.tenant.update(
+        tenantId,
+        opts,
+      );
+      if (updateError) throw updateError;
+      setTenant(data);
+      return data!;
+    },
+    [client, tenantId],
+  );
+
+  const remove = useCallback(async (): Promise<void> => {
+    const { error: deleteError } = await client.tenant.delete(tenantId);
+    if (deleteError) throw deleteError;
+    setTenant(null);
+  }, [client, tenantId]);
+
+  useEffect(() => {
+    if (autoFetch && tenantId) {
+      fetchTenant();
+    }
+  }, [autoFetch, fetchTenant, tenantId]);
+
+  return {
+    tenant,
+    isLoading,
+    error,
+    refetch: fetchTenant,
+    update,
+    remove,
+  };
+}

package/src/use-users.ts

@@ -1,66 +1,66 @@
-import { useState, useEffect, useCallback } from 'react'
-import { useFluxbaseClient } from './context'
-import type { EnrichedUser, ListUsersOptions } from '@fluxbase/sdk'
+import { useState, useEffect, useCallback } from "react";
+import { useFluxbaseClient } from "./context";
+import type { EnrichedUser, ListUsersOptions } from "@nimbleflux/fluxbase-sdk";
 
 export interface UseUsersOptions extends ListUsersOptions {
   /**
    * Whether to automatically fetch users on mount
    * @default true
    */
-  autoFetch?: boolean
+  autoFetch?: boolean;
 
   /**
    * Refetch interval in milliseconds (0 to disable)
    * @default 0
    */
-  refetchInterval?: number
+  refetchInterval?: number;
 }
 
 export interface UseUsersReturn {
   /**
    * Array of users
    */
-  users: EnrichedUser[]
+  users: EnrichedUser[];
 
   /**
    * Total number of users (for pagination)
    */
-  total: number
+  total: number;
 
   /**
    * Whether users are being fetched
    */
-  isLoading: boolean
+  isLoading: boolean;
 
   /**
    * Any error that occurred
    */
-  error: Error | null
+  error: Error | null;
 
   /**
    * Refetch users
    */
-  refetch: () => Promise<void>
+  refetch: () => Promise<void>;
 
   /**
    * Invite a new user
    */
-  inviteUser: (email: string, role: 'user' | 'admin') => Promise<void>
+  inviteUser: (email: string, role: "user" | "admin") => Promise<void>;
 
   /**
    * Update user role
    */
-  updateUserRole: (userId: string, role: 'user' | 'admin') => Promise<void>
+  updateUserRole: (userId: string, role: "user" | "admin") => Promise<void>;
 
   /**
    * Delete a user
    */
-  deleteUser: (userId: string) => Promise<void>
+  deleteUser: (userId: string) => Promise<void>;
 
   /**
    * Reset user password
    */
-  resetPassword: (userId: string) => Promise<{ message: string }>
+  resetPassword: (userId: string) => Promise<{ message: string }>;
 }
 
 /**
@@ -94,95 +94,96 @@ export interface UseUsersReturn {
  * ```
  */
 export function useUsers(options: UseUsersOptions = {}): UseUsersReturn {
-  const { autoFetch = true, refetchInterval = 0, ...listOptions } = options
-  const client = useFluxbaseClient()
+  const { autoFetch = true, refetchInterval = 0, ...listOptions } = options;
+  const client = useFluxbaseClient();
 
-  const [users, setUsers] = useState<EnrichedUser[]>([])
-  const [total, setTotal] = useState(0)
-  const [isLoading, setIsLoading] = useState(autoFetch)
-  const [error, setError] = useState<Error | null>(null)
+  const [users, setUsers] = useState<EnrichedUser[]>([]);
+  const [total, setTotal] = useState(0);
+  const [isLoading, setIsLoading] = useState(autoFetch);
+  const [error, setError] = useState<Error | null>(null);
 
   /**
    * Fetch users from API
    */
   const fetchUsers = useCallback(async () => {
     try {
-      setIsLoading(true)
-      setError(null)
-      const { data, error: apiError } = await client.admin.listUsers(listOptions)
+      setIsLoading(true);
+      setError(null);
+      const { data, error: apiError } =
+        await client.admin.listUsers(listOptions);
       if (apiError) {
-        throw apiError
+        throw apiError;
       }
-      setUsers(data!.users)
-      setTotal(data!.total)
+      setUsers(data!.users);
+      setTotal(data!.total);
     } catch (err) {
-      setError(err as Error)
+      setError(err as Error);
     } finally {
-      setIsLoading(false)
+      setIsLoading(false);
     }
-  }, [client, JSON.stringify(listOptions)])
+  }, [client, JSON.stringify(listOptions)]);
 
   /**
    * Invite a new user
    */
   const inviteUser = useCallback(
-    async (email: string, role: 'user' | 'admin'): Promise<void> => {
-      await client.admin.inviteUser({ email, role })
-      await fetchUsers() // Refresh list
+    async (email: string, role: "user" | "admin"): Promise<void> => {
+      await client.admin.inviteUser({ email, role });
+      await fetchUsers(); // Refresh list
     },
-    [client, fetchUsers]
-  )
+    [client, fetchUsers],
+  );
 
   /**
    * Update user role
    */
   const updateUserRole = useCallback(
-    async (userId: string, role: 'user' | 'admin'): Promise<void> => {
-      await client.admin.updateUserRole(userId, role)
-      await fetchUsers() // Refresh list
+    async (userId: string, role: "user" | "admin"): Promise<void> => {
+      await client.admin.updateUserRole(userId, role);
+      await fetchUsers(); // Refresh list
     },
-    [client, fetchUsers]
-  )
+    [client, fetchUsers],
+  );
 
   /**
    * Delete a user
    */
   const deleteUser = useCallback(
     async (userId: string): Promise<void> => {
-      await client.admin.deleteUser(userId)
-      await fetchUsers() // Refresh list
+      await client.admin.deleteUser(userId);
+      await fetchUsers(); // Refresh list
     },
-    [client, fetchUsers]
-  )
+    [client, fetchUsers],
+  );
 
   /**
    * Reset user password
    */
   const resetPassword = useCallback(
     async (userId: string): Promise<{ message: string }> => {
-      const { data, error } = await client.admin.resetUserPassword(userId)
+      const { data, error } = await client.admin.resetUserPassword(userId);
       if (error) {
-        throw error
+        throw error;
       }
-      return data!
+      return data!;
     },
-    [client]
-  )
+    [client],
+  );
 
   // Auto-fetch on mount
   useEffect(() => {
     if (autoFetch) {
-      fetchUsers()
+      fetchUsers();
     }
-  }, [autoFetch, fetchUsers])
+  }, [autoFetch, fetchUsers]);
 
   // Set up refetch interval
   useEffect(() => {
     if (refetchInterval > 0) {
-      const interval = setInterval(fetchUsers, refetchInterval)
-      return () => clearInterval(interval)
+      const interval = setInterval(fetchUsers, refetchInterval);
+      return () => clearInterval(interval);
     }
-  }, [refetchInterval, fetchUsers])
+  }, [refetchInterval, fetchUsers]);
 
   return {
     users,
@@ -193,6 +194,6 @@ export function useUsers(options: UseUsersOptions = {}): UseUsersReturn {
     inviteUser,
     updateUserRole,
     deleteUser,
-    resetPassword
-  }
+    resetPassword,
+  };
 }

package/tsconfig.json

@@ -15,6 +15,7 @@
     "isolatedModules": true,
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
+    "ignoreDeprecations": "6.0",
     "strict": true,
     "skipLibCheck": true,
     "noEmit": true,

package/tsup.config.ts

@@ -7,5 +7,5 @@ export default defineConfig({
   splitting: false,
   sourcemap: true,
   clean: true,
-  external: ['react', '@tanstack/react-query', '@fluxbase/sdk'],
+  external: ['react', '@tanstack/react-query', '@nimbleflux/fluxbase-sdk'],
 })