@fluxbase/sdk-react 0.0.1-rc.6 → 0.0.1-rc.60

package/src/use-storage.ts

@@ -2,256 +2,385 @@
  * Storage hooks for Fluxbase SDK
  */
 
-import { useMutation, useQuery, useQueryClient, type UseQueryOptions } from '@tanstack/react-query'
-import { useFluxbaseClient } from './context'
-import type { ListOptions, UploadOptions } from '@fluxbase/sdk'
+import { useState } from "react";
+import {
+  useMutation,
+  useQuery,
+  useQueryClient,
+  type UseQueryOptions,
+} from "@tanstack/react-query";
+import { useFluxbaseClient } from "./context";
+import type { ListOptions, UploadOptions, UploadProgress } from "@fluxbase/sdk";
 
 /**
  * Hook to list files in a bucket
  */
 export function useStorageList(
   bucket: string,
-  options?: ListOptions & Omit<UseQueryOptions<any[], Error>, 'queryKey' | 'queryFn'>
+  options?: ListOptions &
+    Omit<UseQueryOptions<any[], Error>, "queryKey" | "queryFn">,
 ) {
-  const client = useFluxbaseClient()
-  const { prefix, limit, offset, ...queryOptions } = options || {}
+  const client = useFluxbaseClient();
+  const { prefix, limit, offset, ...queryOptions } = options || {};
 
   return useQuery({
-    queryKey: ['fluxbase', 'storage', bucket, 'list', { prefix, limit, offset }],
+    queryKey: [
+      "fluxbase",
+      "storage",
+      bucket,
+      "list",
+      { prefix, limit, offset },
+    ],
     queryFn: async () => {
-      const { data, error } = await client.storage.from(bucket).list({ prefix, limit, offset })
+      const { data, error } = await client.storage
+        .from(bucket)
+        .list({ prefix, limit, offset });
 
       if (error) {
-        throw error
+        throw error;
       }
 
-      return data || []
+      return data || [];
     },
     ...queryOptions,
-  })
+  });
 }
 
 /**
  * Hook to upload a file to a bucket
+ *
+ * Note: You can track upload progress by passing an `onUploadProgress` callback in the options:
+ *
+ * @example
+ * ```tsx
+ * const upload = useStorageUpload('avatars')
+ *
+ * upload.mutate({
+ *   path: 'user.jpg',
+ *   file: file,
+ *   options: {
+ *     onUploadProgress: (progress) => {
+ *       console.log(`${progress.percentage}% uploaded`)
+ *     }
+ *   }
+ * })
+ * ```
+ *
+ * For automatic progress state management, use `useStorageUploadWithProgress` instead.
  */
 export function useStorageUpload(bucket: string) {
-  const client = useFluxbaseClient()
-  const queryClient = useQueryClient()
+  const client = useFluxbaseClient();
+  const queryClient = useQueryClient();
 
   return useMutation({
     mutationFn: async (params: {
-      path: string
-      file: File | Blob | ArrayBuffer
-      options?: UploadOptions
+      path: string;
+      file: File | Blob | ArrayBuffer;
+      options?: UploadOptions;
     }) => {
-      const { path, file, options } = params
-      const { data, error } = await client.storage.from(bucket).upload(path, file, options)
+      const { path, file, options } = params;
+      const { data, error } = await client.storage
+        .from(bucket)
+        .upload(path, file, options);
 
       if (error) {
-        throw error
+        throw error;
       }
 
-      return data
+      return data;
     },
     onSuccess: () => {
       // Invalidate list queries for this bucket
-      queryClient.invalidateQueries({ queryKey: ['fluxbase', 'storage', bucket, 'list'] })
+      queryClient.invalidateQueries({
+        queryKey: ["fluxbase", "storage", bucket, "list"],
+      });
     },
-  })
+  });
+}
+
+/**
+ * Hook to upload a file to a bucket with built-in progress tracking
+ *
+ * @example
+ * ```tsx
+ * const { upload, progress, reset } = useStorageUploadWithProgress('avatars')
+ *
+ * // Upload with automatic progress tracking
+ * upload.mutate({
+ *   path: 'user.jpg',
+ *   file: file
+ * })
+ *
+ * // Display progress
+ * console.log(progress) // { loaded: 1024, total: 2048, percentage: 50 }
+ * ```
+ */
+export function useStorageUploadWithProgress(bucket: string) {
+  const client = useFluxbaseClient();
+  const queryClient = useQueryClient();
+  const [progress, setProgress] = useState<UploadProgress | null>(null);
+
+  const mutation = useMutation({
+    mutationFn: async (params: {
+      path: string;
+      file: File | Blob | ArrayBuffer;
+      options?: Omit<UploadOptions, "onUploadProgress">;
+    }) => {
+      const { path, file, options } = params;
+
+      // Reset progress at the start of upload
+      setProgress({ loaded: 0, total: 0, percentage: 0 });
+
+      const { data, error } = await client.storage
+        .from(bucket)
+        .upload(path, file, {
+          ...options,
+          onUploadProgress: (p: import("@fluxbase/sdk").UploadProgress) => {
+            setProgress(p);
+          },
+        });
+
+      if (error) {
+        throw error;
+      }
+
+      return data;
+    },
+    onSuccess: () => {
+      // Invalidate list queries for this bucket
+      queryClient.invalidateQueries({
+        queryKey: ["fluxbase", "storage", bucket, "list"],
+      });
+    },
+    onError: () => {
+      // Reset progress on error
+      setProgress(null);
+    },
+  });
+
+  return {
+    upload: mutation,
+    progress,
+    reset: () => setProgress(null),
+  };
 }
 
 /**
  * Hook to download a file from a bucket
  */
-export function useStorageDownload(bucket: string, path: string | null, enabled = true) {
-  const client = useFluxbaseClient()
+export function useStorageDownload(
+  bucket: string,
+  path: string | null,
+  enabled = true,
+) {
+  const client = useFluxbaseClient();
 
   return useQuery({
-    queryKey: ['fluxbase', 'storage', bucket, 'download', path],
+    queryKey: ["fluxbase", "storage", bucket, "download", path],
     queryFn: async () => {
       if (!path) {
-        return null
+        return null;
       }
 
-      const { data, error } = await client.storage.from(bucket).download(path)
+      const { data, error } = await client.storage.from(bucket).download(path);
 
       if (error) {
-        throw error
+        throw error;
       }
 
-      return data
+      return data;
     },
     enabled: enabled && !!path,
-  })
+  });
 }
 
 /**
  * Hook to delete files from a bucket
  */
 export function useStorageDelete(bucket: string) {
-  const client = useFluxbaseClient()
-  const queryClient = useQueryClient()
+  const client = useFluxbaseClient();
+  const queryClient = useQueryClient();
 
   return useMutation({
     mutationFn: async (paths: string[]) => {
-      const { error } = await client.storage.from(bucket).remove(paths)
+      const { error } = await client.storage.from(bucket).remove(paths);
 
       if (error) {
-        throw error
+        throw error;
       }
     },
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['fluxbase', 'storage', bucket, 'list'] })
+      queryClient.invalidateQueries({
+        queryKey: ["fluxbase", "storage", bucket, "list"],
+      });
     },
-  })
+  });
 }
 
 /**
  * Hook to get a public URL for a file
  */
 export function useStoragePublicUrl(bucket: string, path: string | null) {
-  const client = useFluxbaseClient()
+  const client = useFluxbaseClient();
 
   if (!path) {
-    return null
+    return null;
   }
 
-  const { data } = client.storage.from(bucket).getPublicUrl(path)
-  return data.publicUrl
+  const { data } = client.storage.from(bucket).getPublicUrl(path);
+  return data.publicUrl;
 }
 
 /**
  * Hook to create a signed URL
  */
-export function useStorageSignedUrl(bucket: string, path: string | null, expiresIn?: number) {
-  const client = useFluxbaseClient()
+export function useStorageSignedUrl(
+  bucket: string,
+  path: string | null,
+  expiresIn?: number,
+) {
+  const client = useFluxbaseClient();
 
   return useQuery({
-    queryKey: ['fluxbase', 'storage', bucket, 'signed-url', path, expiresIn],
+    queryKey: ["fluxbase", "storage", bucket, "signed-url", path, expiresIn],
     queryFn: async () => {
       if (!path) {
-        return null
+        return null;
       }
 
-      const { data, error } = await client.storage.from(bucket).createSignedUrl(path, { expiresIn })
+      const { data, error } = await client.storage
+        .from(bucket)
+        .createSignedUrl(path, { expiresIn });
 
       if (error) {
-        throw error
+        throw error;
       }
 
-      return data?.signedUrl || null
+      return data?.signedUrl || null;
     },
     enabled: !!path,
     staleTime: expiresIn ? expiresIn * 1000 - 60000 : 1000 * 60 * 50, // Refresh 1 minute before expiry
-  })
+  });
 }
 
 /**
  * Hook to move a file
  */
 export function useStorageMove(bucket: string) {
-  const client = useFluxbaseClient()
-  const queryClient = useQueryClient()
+  const client = useFluxbaseClient();
+  const queryClient = useQueryClient();
 
   return useMutation({
     mutationFn: async (params: { fromPath: string; toPath: string }) => {
-      const { fromPath, toPath } = params
-      const { data, error } = await client.storage.from(bucket).move(fromPath, toPath)
+      const { fromPath, toPath } = params;
+      const { data, error } = await client.storage
+        .from(bucket)
+        .move(fromPath, toPath);
 
       if (error) {
-        throw error
+        throw error;
       }
 
-      return data
+      return data;
     },
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['fluxbase', 'storage', bucket, 'list'] })
+      queryClient.invalidateQueries({
+        queryKey: ["fluxbase", "storage", bucket, "list"],
+      });
     },
-  })
+  });
 }
 
 /**
  * Hook to copy a file
  */
 export function useStorageCopy(bucket: string) {
-  const client = useFluxbaseClient()
-  const queryClient = useQueryClient()
+  const client = useFluxbaseClient();
+  const queryClient = useQueryClient();
 
   return useMutation({
     mutationFn: async (params: { fromPath: string; toPath: string }) => {
-      const { fromPath, toPath } = params
-      const { data, error } = await client.storage.from(bucket).copy(fromPath, toPath)
+      const { fromPath, toPath } = params;
+      const { data, error } = await client.storage
+        .from(bucket)
+        .copy(fromPath, toPath);
 
       if (error) {
-        throw error
+        throw error;
       }
 
-      return data
+      return data;
     },
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['fluxbase', 'storage', bucket, 'list'] })
+      queryClient.invalidateQueries({
+        queryKey: ["fluxbase", "storage", bucket, "list"],
+      });
     },
-  })
+  });
 }
 
 /**
  * Hook to manage buckets
  */
 export function useStorageBuckets() {
-  const client = useFluxbaseClient()
+  const client = useFluxbaseClient();
 
   return useQuery({
-    queryKey: ['fluxbase', 'storage', 'buckets'],
+    queryKey: ["fluxbase", "storage", "buckets"],
     queryFn: async () => {
-      const { data, error } = await client.storage.listBuckets()
+      const { data, error } = await client.storage.listBuckets();
 
       if (error) {
-        throw error
+        throw error;
       }
 
-      return data || []
+      return data || [];
     },
-  })
+  });
 }
 
 /**
  * Hook to create a bucket
  */
 export function useCreateBucket() {
-  const client = useFluxbaseClient()
-  const queryClient = useQueryClient()
+  const client = useFluxbaseClient();
+  const queryClient = useQueryClient();
 
   return useMutation({
     mutationFn: async (bucketName: string) => {
-      const { error } = await client.storage.createBucket(bucketName)
+      const { error } = await client.storage.createBucket(bucketName);
 
       if (error) {
-        throw error
+        throw error;
       }
     },
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['fluxbase', 'storage', 'buckets'] })
+      queryClient.invalidateQueries({
+        queryKey: ["fluxbase", "storage", "buckets"],
+      });
     },
-  })
+  });
 }
 
 /**
  * Hook to delete a bucket
  */
 export function useDeleteBucket() {
-  const client = useFluxbaseClient()
-  const queryClient = useQueryClient()
+  const client = useFluxbaseClient();
+  const queryClient = useQueryClient();
 
   return useMutation({
     mutationFn: async (bucketName: string) => {
-      const { error } = await client.storage.deleteBucket(bucketName)
+      const { error } = await client.storage.deleteBucket(bucketName);
 
       if (error) {
-        throw error
+        throw error;
       }
     },
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['fluxbase', 'storage', 'buckets'] })
+      queryClient.invalidateQueries({
+        queryKey: ["fluxbase", "storage", "buckets"],
+      });
     },
-  })
+  });
 }

package/src/use-users.ts

@@ -109,9 +109,12 @@ export function useUsers(options: UseUsersOptions = {}): UseUsersReturn {
     try {
       setIsLoading(true)
       setError(null)
-      const response = await client.admin.listUsers(listOptions)
-      setUsers(response.users)
-      setTotal(response.total)
+      const { data, error: apiError } = await client.admin.listUsers(listOptions)
+      if (apiError) {
+        throw apiError
+      }
+      setUsers(data!.users)
+      setTotal(data!.total)
     } catch (err) {
       setError(err as Error)
     } finally {
@@ -157,7 +160,11 @@ export function useUsers(options: UseUsersOptions = {}): UseUsersReturn {
    */
   const resetPassword = useCallback(
     async (userId: string): Promise<{ message: string }> => {
-      return await client.admin.resetUserPassword(userId)
+      const { data, error } = await client.admin.resetUserPassword(userId)
+      if (error) {
+        throw error
+      }
+      return data!
     },
     [client]
   )

package/typedoc.json

@@ -1,8 +1,6 @@
 {
   "$schema": "https://typedoc.org/schema.json",
-  "entryPoints": [
-    "src/index.ts"
-  ],
+  "entryPoints": ["src/index.ts"],
   "out": "../docs/static/api/sdk-react",
   "name": "@fluxbase/sdk-react",
   "readme": "README.md",
@@ -29,7 +27,7 @@
     "*"
   ],
   "navigationLinks": {
-    "GitHub": "https://github.com/yourusername/fluxbase",
+    "GitHub": "https://github.com/fluxbase-eu/fluxbase",
     "Documentation": "https://fluxbase.eu"
   }
 }

package/src/use-rpc.ts

@@ -1,109 +0,0 @@
-/**
- * React hooks for RPC (Remote Procedure Calls)
- * Call PostgreSQL functions with React Query integration
- */
-
-import { useQuery, useMutation, useQueryClient, type UseQueryOptions, type UseMutationOptions } from '@tanstack/react-query'
-import { useFluxbaseClient } from './context'
-import type { PostgrestResponse } from '@fluxbase/sdk'
-
-/**
- * Hook to call a PostgreSQL function and cache the result
- *
- * @example
- * ```tsx
- * const { data, isLoading, error } = useRPC(
- *   'calculate_total',
- *   { order_id: 123 },
- *   { enabled: !!orderId }
- * )
- * ```
- */
-export function useRPC<TData = unknown, TParams extends Record<string, unknown> = Record<string, unknown>>(
-  functionName: string,
-  params?: TParams,
-  options?: Omit<UseQueryOptions<TData, Error>, 'queryKey' | 'queryFn'>
-) {
-  const client = useFluxbaseClient()
-
-  return useQuery<TData, Error>({
-    queryKey: ['rpc', functionName, params],
-    queryFn: async () => {
-      const { data, error } = await client.rpc<TData>(functionName, params)
-      if (error) {
-        throw new Error(error.message)
-      }
-      return data as TData
-    },
-    ...options,
-  })
-}
-
-/**
- * Hook to create a mutation for calling PostgreSQL functions
- * Useful for functions that modify data
- *
- * @example
- * ```tsx
- * const createOrder = useRPCMutation('create_order')
- *
- * const handleSubmit = async () => {
- *   await createOrder.mutateAsync({
- *     user_id: 123,
- *     items: [{ product_id: 1, quantity: 2 }]
- *   })
- * }
- * ```
- */
-export function useRPCMutation<TData = unknown, TParams extends Record<string, unknown> = Record<string, unknown>>(
-  functionName: string,
-  options?: Omit<UseMutationOptions<TData, Error, TParams>, 'mutationFn'>
-) {
-  const client = useFluxbaseClient()
-
-  return useMutation<TData, Error, TParams>({
-    mutationFn: async (params: TParams) => {
-      const { data, error } = await client.rpc<TData>(functionName, params)
-      if (error) {
-        throw new Error(error.message)
-      }
-      return data as TData
-    },
-    ...options,
-  })
-}
-
-/**
- * Hook to call multiple RPC functions in parallel
- *
- * @example
- * ```tsx
- * const { data, isLoading } = useRPCBatch([
- *   { name: 'get_user_stats', params: { user_id: 123 } },
- *   { name: 'get_recent_orders', params: { limit: 10 } },
- * ])
- * ```
- */
-export function useRPCBatch<TData = unknown>(
-  calls: Array<{ name: string; params?: Record<string, unknown> }>,
-  options?: Omit<UseQueryOptions<TData[], Error, TData[], readonly unknown[]>, 'queryKey' | 'queryFn'>
-) {
-  const client = useFluxbaseClient()
-
-  return useQuery({
-    queryKey: ['rpc-batch', calls] as const,
-    queryFn: async () => {
-      const results = await Promise.all(
-        calls.map(async ({ name, params }) => {
-          const { data, error } = await client.rpc<TData>(name, params)
-          if (error) {
-            throw new Error(`${name}: ${error.message}`)
-          }
-          return data
-        })
-      )
-      return results as TData[]
-    },
-    ...options,
-  })
-}