@fluxbase/sdk-react 0.0.1-rc.2

package/src/use-admin-hooks.ts

@@ -0,0 +1,309 @@
+/**
+ * Admin Settings and Management Hooks
+ *
+ * Hooks for managing application settings, system settings, and webhooks.
+ */
+
+import { useState, useEffect, useCallback } from 'react'
+import { useFluxbaseClient } from './context'
+import type {
+  AppSettings,
+  UpdateAppSettingsRequest,
+  SystemSetting,
+  UpdateSystemSettingRequest,
+  Webhook,
+  CreateWebhookRequest,
+  UpdateWebhookRequest
+} from '@fluxbase/sdk'
+
+// ============================================================================
+// useAppSettings Hook
+// ============================================================================
+
+export interface UseAppSettingsOptions {
+  autoFetch?: boolean
+}
+
+export interface UseAppSettingsReturn {
+  settings: AppSettings | null
+  isLoading: boolean
+  error: Error | null
+  refetch: () => Promise<void>
+  updateSettings: (update: UpdateAppSettingsRequest) => Promise<void>
+}
+
+/**
+ * Hook for managing application settings
+ *
+ * @example
+ * ```tsx
+ * function SettingsPanel() {
+ *   const { settings, isLoading, updateSettings } = useAppSettings({ autoFetch: true })
+ *
+ *   const handleToggleFeature = async (feature: string, enabled: boolean) => {
+ *     await updateSettings({
+ *       features: { ...settings?.features, [feature]: enabled }
+ *     })
+ *   }
+ *
+ *   return <div>...</div>
+ * }
+ * ```
+ */
+export function useAppSettings(options: UseAppSettingsOptions = {}): UseAppSettingsReturn {
+  const { autoFetch = true } = options
+  const client = useFluxbaseClient()
+
+  const [settings, setSettings] = useState<AppSettings | null>(null)
+  const [isLoading, setIsLoading] = useState(autoFetch)
+  const [error, setError] = useState<Error | null>(null)
+
+  const fetchSettings = useCallback(async () => {
+    try {
+      setIsLoading(true)
+      setError(null)
+      const appSettings = await client.admin.settings.app.get()
+      setSettings(appSettings)
+    } catch (err) {
+      setError(err as Error)
+    } finally {
+      setIsLoading(false)
+    }
+  }, [client])
+
+  const updateSettings = useCallback(
+    async (update: UpdateAppSettingsRequest): Promise<void> => {
+      await client.admin.settings.app.update(update)
+      await fetchSettings()
+    },
+    [client, fetchSettings]
+  )
+
+  useEffect(() => {
+    if (autoFetch) {
+      fetchSettings()
+    }
+  }, [autoFetch, fetchSettings])
+
+  return {
+    settings,
+    isLoading,
+    error,
+    refetch: fetchSettings,
+    updateSettings
+  }
+}
+
+// ============================================================================
+// useSystemSettings Hook
+// ============================================================================
+
+export interface UseSystemSettingsOptions {
+  autoFetch?: boolean
+}
+
+export interface UseSystemSettingsReturn {
+  settings: SystemSetting[]
+  isLoading: boolean
+  error: Error | null
+  refetch: () => Promise<void>
+  getSetting: (key: string) => SystemSetting | undefined
+  updateSetting: (key: string, update: UpdateSystemSettingRequest) => Promise<void>
+  deleteSetting: (key: string) => Promise<void>
+}
+
+/**
+ * Hook for managing system settings (key-value storage)
+ *
+ * @example
+ * ```tsx
+ * function SystemSettings() {
+ *   const { settings, isLoading, updateSetting } = useSystemSettings({ autoFetch: true })
+ *
+ *   const handleUpdateSetting = async (key: string, value: any) => {
+ *     await updateSetting(key, { value })
+ *   }
+ *
+ *   return <div>...</div>
+ * }
+ * ```
+ */
+export function useSystemSettings(options: UseSystemSettingsOptions = {}): UseSystemSettingsReturn {
+  const { autoFetch = true } = options
+  const client = useFluxbaseClient()
+
+  const [settings, setSettings] = useState<SystemSetting[]>([])
+  const [isLoading, setIsLoading] = useState(autoFetch)
+  const [error, setError] = useState<Error | null>(null)
+
+  const fetchSettings = useCallback(async () => {
+    try {
+      setIsLoading(true)
+      setError(null)
+      const response = await client.admin.settings.system.list()
+      setSettings(response.settings)
+    } catch (err) {
+      setError(err as Error)
+    } finally {
+      setIsLoading(false)
+    }
+  }, [client])
+
+  const getSetting = useCallback(
+    (key: string): SystemSetting | undefined => {
+      return settings.find((s) => s.key === key)
+    },
+    [settings]
+  )
+
+  const updateSetting = useCallback(
+    async (key: string, update: UpdateSystemSettingRequest): Promise<void> => {
+      await client.admin.settings.system.update(key, update)
+      await fetchSettings()
+    },
+    [client, fetchSettings]
+  )
+
+  const deleteSetting = useCallback(
+    async (key: string): Promise<void> => {
+      await client.admin.settings.system.delete(key)
+      await fetchSettings()
+    },
+    [client, fetchSettings]
+  )
+
+  useEffect(() => {
+    if (autoFetch) {
+      fetchSettings()
+    }
+  }, [autoFetch, fetchSettings])
+
+  return {
+    settings,
+    isLoading,
+    error,
+    refetch: fetchSettings,
+    getSetting,
+    updateSetting,
+    deleteSetting
+  }
+}
+
+// ============================================================================
+// useWebhooks Hook
+// ============================================================================
+
+export interface UseWebhooksOptions {
+  autoFetch?: boolean
+  refetchInterval?: number
+}
+
+export interface UseWebhooksReturn {
+  webhooks: Webhook[]
+  isLoading: boolean
+  error: Error | null
+  refetch: () => Promise<void>
+  createWebhook: (webhook: CreateWebhookRequest) => Promise<Webhook>
+  updateWebhook: (id: string, update: UpdateWebhookRequest) => Promise<Webhook>
+  deleteWebhook: (id: string) => Promise<void>
+  testWebhook: (id: string) => Promise<void>
+}
+
+/**
+ * Hook for managing webhooks
+ *
+ * @example
+ * ```tsx
+ * function WebhooksManager() {
+ *   const { webhooks, isLoading, createWebhook, deleteWebhook } = useWebhooks({
+ *     autoFetch: true
+ *   })
+ *
+ *   const handleCreate = async () => {
+ *     await createWebhook({
+ *       url: 'https://example.com/webhook',
+ *       events: ['user.created', 'user.updated'],
+ *       enabled: true
+ *     })
+ *   }
+ *
+ *   return <div>...</div>
+ * }
+ * ```
+ */
+export function useWebhooks(options: UseWebhooksOptions = {}): UseWebhooksReturn {
+  const { autoFetch = true, refetchInterval = 0 } = options
+  const client = useFluxbaseClient()
+
+  const [webhooks, setWebhooks] = useState<Webhook[]>([])
+  const [isLoading, setIsLoading] = useState(autoFetch)
+  const [error, setError] = useState<Error | null>(null)
+
+  const fetchWebhooks = useCallback(async () => {
+    try {
+      setIsLoading(true)
+      setError(null)
+      const response = await client.admin.management.webhooks.list()
+      setWebhooks(response.webhooks)
+    } catch (err) {
+      setError(err as Error)
+    } finally {
+      setIsLoading(false)
+    }
+  }, [client])
+
+  const createWebhook = useCallback(
+    async (webhook: CreateWebhookRequest): Promise<Webhook> => {
+      const created = await client.admin.management.webhooks.create(webhook)
+      await fetchWebhooks()
+      return created
+    },
+    [client, fetchWebhooks]
+  )
+
+  const updateWebhook = useCallback(
+    async (id: string, update: UpdateWebhookRequest): Promise<Webhook> => {
+      const updated = await client.admin.management.webhooks.update(id, update)
+      await fetchWebhooks()
+      return updated
+    },
+    [client, fetchWebhooks]
+  )
+
+  const deleteWebhook = useCallback(
+    async (id: string): Promise<void> => {
+      await client.admin.management.webhooks.delete(id)
+      await fetchWebhooks()
+    },
+    [client, fetchWebhooks]
+  )
+
+  const testWebhook = useCallback(
+    async (id: string): Promise<void> => {
+      await client.admin.management.webhooks.test(id)
+    },
+    [client]
+  )
+
+  useEffect(() => {
+    if (autoFetch) {
+      fetchWebhooks()
+    }
+
+    if (refetchInterval > 0) {
+      const interval = setInterval(fetchWebhooks, refetchInterval)
+      return () => clearInterval(interval)
+    }
+  }, [autoFetch, refetchInterval, fetchWebhooks])
+
+  return {
+    webhooks,
+    isLoading,
+    error,
+    refetch: fetchWebhooks,
+    createWebhook,
+    updateWebhook,
+    deleteWebhook,
+    testWebhook
+  }
+}

package/src/use-api-keys.ts

@@ -0,0 +1,174 @@
+import { useState, useEffect, useCallback } from 'react'
+import { useFluxbaseClient } from './context'
+import type { APIKey, CreateAPIKeyRequest } from '@fluxbase/sdk'
+
+export interface UseAPIKeysOptions {
+  /**
+   * Whether to automatically fetch API keys on mount
+   * @default true
+   */
+  autoFetch?: boolean
+}
+
+export interface UseAPIKeysReturn {
+  /**
+   * Array of API keys
+   */
+  keys: APIKey[]
+
+  /**
+   * Whether keys are being fetched
+   */
+  isLoading: boolean
+
+  /**
+   * Any error that occurred
+   */
+  error: Error | null
+
+  /**
+   * Refetch API keys
+   */
+  refetch: () => Promise<void>
+
+  /**
+   * Create a new API key
+   */
+  createKey: (request: CreateAPIKeyRequest) => Promise<{ key: string; keyData: APIKey }>
+
+  /**
+   * Update an API key
+   */
+  updateKey: (keyId: string, update: { name?: string; description?: string }) => Promise<void>
+
+  /**
+   * Revoke an API key
+   */
+  revokeKey: (keyId: string) => Promise<void>
+
+  /**
+   * Delete an API key
+   */
+  deleteKey: (keyId: string) => Promise<void>
+}
+
+/**
+ * Hook for managing API keys
+ *
+ * Provides API key list and management functions.
+ *
+ * @example
+ * ```tsx
+ * function APIKeyManager() {
+ *   const { keys, isLoading, createKey, revokeKey } = useAPIKeys()
+ *
+ *   const handleCreate = async () => {
+ *     const { key, keyData } = await createKey({
+ *       name: 'Backend Service',
+ *       description: 'API key for backend',
+ *       expires_at: new Date(Date.now() + 365 * 24 * 60 * 60 * 1000).toISOString()
+ *     })
+ *     alert(`Key created: ${key}`)
+ *   }
+ *
+ *   return (
+ *     <div>
+ *       <button onClick={handleCreate}>Create Key</button>
+ *       {keys.map(k => (
+ *         <div key={k.id}>
+ *           {k.name}
+ *           <button onClick={() => revokeKey(k.id)}>Revoke</button>
+ *         </div>
+ *       ))}
+ *     </div>
+ *   )
+ * }
+ * ```
+ */
+export function useAPIKeys(options: UseAPIKeysOptions = {}): UseAPIKeysReturn {
+  const { autoFetch = true } = options
+  const client = useFluxbaseClient()
+
+  const [keys, setKeys] = useState<APIKey[]>([])
+  const [isLoading, setIsLoading] = useState(autoFetch)
+  const [error, setError] = useState<Error | null>(null)
+
+  /**
+   * Fetch API keys from API
+   */
+  const fetchKeys = useCallback(async () => {
+    try {
+      setIsLoading(true)
+      setError(null)
+      const response = await client.admin.management.apiKeys.list()
+      setKeys(response.api_keys)
+    } catch (err) {
+      setError(err as Error)
+    } finally {
+      setIsLoading(false)
+    }
+  }, [client])
+
+  /**
+   * Create a new API key
+   */
+  const createKey = useCallback(
+    async (request: CreateAPIKeyRequest): Promise<{ key: string; keyData: APIKey }> => {
+      const response = await client.admin.management.apiKeys.create(request)
+      await fetchKeys() // Refresh list
+      return { key: response.key, keyData: response.api_key }
+    },
+    [client, fetchKeys]
+  )
+
+  /**
+   * Update an API key
+   */
+  const updateKey = useCallback(
+    async (keyId: string, update: { name?: string; description?: string }): Promise<void> => {
+      await client.admin.management.apiKeys.update(keyId, update)
+      await fetchKeys() // Refresh list
+    },
+    [client, fetchKeys]
+  )
+
+  /**
+   * Revoke an API key
+   */
+  const revokeKey = useCallback(
+    async (keyId: string): Promise<void> => {
+      await client.admin.management.apiKeys.revoke(keyId)
+      await fetchKeys() // Refresh list
+    },
+    [client, fetchKeys]
+  )
+
+  /**
+   * Delete an API key
+   */
+  const deleteKey = useCallback(
+    async (keyId: string): Promise<void> => {
+      await client.admin.management.apiKeys.delete(keyId)
+      await fetchKeys() // Refresh list
+    },
+    [client, fetchKeys]
+  )
+
+  // Auto-fetch on mount
+  useEffect(() => {
+    if (autoFetch) {
+      fetchKeys()
+    }
+  }, [autoFetch, fetchKeys])
+
+  return {
+    keys,
+    isLoading,
+    error,
+    refetch: fetchKeys,
+    createKey,
+    updateKey,
+    revokeKey,
+    deleteKey
+  }
+}

package/src/use-auth.ts

@@ -0,0 +1,146 @@
+/**
+ * Authentication hooks for Fluxbase SDK
+ */
+
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { useFluxbaseClient } from './context'
+import type { SignInCredentials, SignUpCredentials, User, AuthSession } from '@fluxbase/sdk'
+
+/**
+ * Hook to get the current user
+ */
+export function useUser() {
+  const client = useFluxbaseClient()
+
+  return useQuery({
+    queryKey: ['fluxbase', 'auth', 'user'],
+    queryFn: async () => {
+      const session = client.auth.getSession()
+      if (!session) {
+        return null
+      }
+
+      try {
+        return await client.auth.getCurrentUser()
+      } catch {
+        return null
+      }
+    },
+    staleTime: 1000 * 60 * 5, // 5 minutes
+  })
+}
+
+/**
+ * Hook to get the current session
+ */
+export function useSession() {
+  const client = useFluxbaseClient()
+
+  return useQuery<AuthSession | null>({
+    queryKey: ['fluxbase', 'auth', 'session'],
+    queryFn: () => client.auth.getSession(),
+    staleTime: 1000 * 60 * 5, // 5 minutes
+  })
+}
+
+/**
+ * Hook for signing in
+ */
+export function useSignIn() {
+  const client = useFluxbaseClient()
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async (credentials: SignInCredentials) => {
+      return await client.auth.signIn(credentials)
+    },
+    onSuccess: (session) => {
+      queryClient.setQueryData(['fluxbase', 'auth', 'session'], session)
+      // Only set user if this is a complete auth session (not 2FA required)
+      if ('user' in session) {
+        queryClient.setQueryData(['fluxbase', 'auth', 'user'], session.user)
+      }
+    },
+  })
+}
+
+/**
+ * Hook for signing up
+ */
+export function useSignUp() {
+  const client = useFluxbaseClient()
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async (credentials: SignUpCredentials) => {
+      return await client.auth.signUp(credentials)
+    },
+    onSuccess: (session) => {
+      queryClient.setQueryData(['fluxbase', 'auth', 'session'], session)
+      queryClient.setQueryData(['fluxbase', 'auth', 'user'], session.user)
+    },
+  })
+}
+
+/**
+ * Hook for signing out
+ */
+export function useSignOut() {
+  const client = useFluxbaseClient()
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async () => {
+      await client.auth.signOut()
+    },
+    onSuccess: () => {
+      queryClient.setQueryData(['fluxbase', 'auth', 'session'], null)
+      queryClient.setQueryData(['fluxbase', 'auth', 'user'], null)
+      queryClient.invalidateQueries({ queryKey: ['fluxbase'] })
+    },
+  })
+}
+
+/**
+ * Hook for updating the current user
+ */
+export function useUpdateUser() {
+  const client = useFluxbaseClient()
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async (data: Partial<Pick<User, 'email' | 'metadata'>>) => {
+      return await client.auth.updateUser(data)
+    },
+    onSuccess: (user) => {
+      queryClient.setQueryData(['fluxbase', 'auth', 'user'], user)
+    },
+  })
+}
+
+/**
+ * Combined auth hook with all auth state and methods
+ */
+export function useAuth() {
+  const { data: user, isLoading: isLoadingUser } = useUser()
+  const { data: session, isLoading: isLoadingSession } = useSession()
+  const signIn = useSignIn()
+  const signUp = useSignUp()
+  const signOut = useSignOut()
+  const updateUser = useUpdateUser()
+
+  return {
+    user,
+    session,
+    isLoading: isLoadingUser || isLoadingSession,
+    isAuthenticated: !!session,
+    signIn: signIn.mutateAsync,
+    signUp: signUp.mutateAsync,
+    signOut: signOut.mutateAsync,
+    updateUser: updateUser.mutateAsync,
+    isSigningIn: signIn.isPending,
+    isSigningUp: signUp.isPending,
+    isSigningOut: signOut.isPending,
+    isUpdating: updateUser.isPending,
+  }
+}