@plugable-io/react 0.0.1 → 0.0.3

package/README.md

@@ -238,6 +238,37 @@ function ImageGallery() {
 }
 ```
 
+### Ordering Files
+
+```tsx
+function SortedFileList() {
+  const [orderBy, setOrderBy] = useState<'created_at' | 'name' | 'byte_size'>('created_at');
+  const [orderDirection, setOrderDirection] = useState<'asc' | 'desc'>('desc');
+
+  const { files, isLoading } = useFiles({
+    orderBy,
+    orderDirection,
+    perPage: 20,
+  });
+
+  return (
+    <div>
+      <select value={orderBy} onChange={(e) => setOrderBy(e.target.value as any)}>
+        <option value="created_at">Date</option>
+        <option value="name">Name</option>
+        <option value="byte_size">Size</option>
+      </select>
+      <button onClick={() => setOrderDirection(orderDirection === 'asc' ? 'desc' : 'asc')}>
+        {orderDirection === 'asc' ? '↑' : '↓'}
+      </button>
+      {files.map((file) => (
+        <div key={file.id}>{file.name}</div>
+      ))}
+    </div>
+  );
+}
+```
+
 ### Manual Loading
 
 ```tsx
@@ -268,6 +299,8 @@ function LazyFileList() {
 | `perPage` | `number` | `20` | Files per page |
 | `startPage` | `number` | `1` | Initial page number |
 | `autoLoad` | `boolean` | `true` | Fetch on mount |
+| `orderBy` | `'created_at' \| 'name' \| 'byte_size'` | `'created_at'` | Field to order by |
+| `orderDirection` | `'asc' \| 'desc'` | `'desc'` | Sort direction |
 
 ### Return Value
 

package/dist/index.d.mts

@@ -0,0 +1,125 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React, { ReactNode, CSSProperties } from 'react';
+import { BucketClient, FileObject } from '@plugable-io/js';
+export { FileObject, SearchOptions, UpdateOptions } from '@plugable-io/js';
+
+type AuthProvider = 'clerk' | 'supabase' | 'firebase';
+interface PlugableProviderProps {
+    bucketId: string;
+    children: ReactNode;
+    getToken?: () => Promise<string> | string;
+    authProvider?: AuthProvider;
+    clerkJWTTemplate?: string;
+    baseUrl?: string;
+}
+type PlugableEventType = 'file.uploaded' | 'file.deleted';
+type EventHandler = (data?: any) => void;
+interface PlugableContextValue {
+    client: BucketClient;
+    bucketId: string;
+    on: (event: PlugableEventType, handler: EventHandler) => () => void;
+    emit: (event: PlugableEventType, data?: any) => void;
+    getToken: () => Promise<string> | string;
+    baseUrl?: string;
+}
+declare function PlugableProvider({ bucketId, children, getToken, authProvider, clerkJWTTemplate, baseUrl, }: PlugableProviderProps): react_jsx_runtime.JSX.Element;
+declare function usePlugable(): PlugableContextValue;
+
+interface DropzoneProps {
+    bucketId?: string;
+    metadata?: Record<string, any>;
+    onUploadComplete?: (files: FileObject[]) => void;
+    onUploadError?: (error: Error) => void;
+    onProgressUpdate?: (fileName: string, progress: number) => void;
+    accept?: string;
+    maxFiles?: number;
+    children?: (props: DropzoneRenderProps) => ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+interface DropzoneRenderProps {
+    isDragActive: boolean;
+    isUploading: boolean;
+    uploadProgress: Record<string, number>;
+    openFileDialog: () => void;
+    uploadedFiles: FileObject[];
+}
+declare function Dropzone({ bucketId: _bucketId, metadata, onUploadComplete, onUploadError, onProgressUpdate, accept, maxFiles, children, className, style, }: DropzoneProps): react_jsx_runtime.JSX.Element;
+
+interface FileListProps {
+    metadata?: Record<string, any>;
+    mediaType?: string;
+    perPage?: number;
+    autoLoad?: boolean;
+    startPage?: number;
+    children: (props: FileListRenderProps) => ReactNode;
+}
+interface FileListRenderProps {
+    files: FileObject[];
+    isLoading: boolean;
+    hasMore: boolean;
+    loadMore: () => void;
+    refresh: () => Promise<void>;
+    error: Error | null;
+    pagination: {
+        current: number;
+        hasNext: boolean;
+        hasPrevious: boolean;
+        loadNextPage: () => void;
+        loadPreviousPage: () => void;
+    };
+}
+declare function FileList({ metadata, mediaType, perPage, autoLoad, startPage, children, }: FileListProps): react_jsx_runtime.JSX.Element;
+
+interface FileImageProps {
+    file: FileObject;
+    width?: number | string;
+    height?: number | string;
+    objectFit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+    borderRadius?: number | string;
+    alt?: string;
+    className?: string;
+    style?: CSSProperties;
+    onLoad?: () => void;
+    onError?: (error: Error) => void;
+}
+declare function FileImage({ file, width, height, objectFit, borderRadius, alt, className, style, onLoad, onError, }: FileImageProps): react_jsx_runtime.JSX.Element;
+declare function clearImageCache(): void;
+
+interface FilePreviewProps {
+    file: FileObject;
+    width?: number | string;
+    height?: number | string;
+    className?: string;
+    style?: CSSProperties;
+    objectFit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+    showExtension?: boolean;
+    renderNonImage?: (file: FileObject) => React.ReactNode;
+}
+declare function FilePreview({ file, width, height, className, style, objectFit, showExtension, renderNonImage, }: FilePreviewProps): react_jsx_runtime.JSX.Element;
+
+interface UseFilesOptions {
+    metadata?: Record<string, any>;
+    startPage?: number;
+    perPage?: number;
+    mediaType?: string;
+    autoLoad?: boolean;
+    orderBy?: 'created_at' | 'name' | 'byte_size';
+    orderDirection?: 'asc' | 'desc';
+}
+interface UseFilesResult {
+    files: FileObject[];
+    isLoading: boolean;
+    pagination: {
+        current: number;
+        hasNext: boolean;
+        hasPrevious: boolean;
+        loadNextPage: () => void;
+        loadPreviousPage: () => void;
+    };
+    setPage: (page: number) => void;
+    refresh: () => Promise<void>;
+}
+declare function useFiles({ metadata, startPage, perPage, mediaType, autoLoad, orderBy, orderDirection, }?: UseFilesOptions): UseFilesResult;
+
+export { type AuthProvider, Dropzone, type DropzoneProps, type DropzoneRenderProps, FileImage, type FileImageProps, FileList, type FileListProps, type FileListRenderProps, FilePreview, type FilePreviewProps, PlugableProvider, type PlugableProviderProps, type UseFilesOptions, type UseFilesResult, clearImageCache, useFiles, usePlugable };

package/dist/index.d.ts

@@ -0,0 +1,125 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React, { ReactNode, CSSProperties } from 'react';
+import { BucketClient, FileObject } from '@plugable-io/js';
+export { FileObject, SearchOptions, UpdateOptions } from '@plugable-io/js';
+
+type AuthProvider = 'clerk' | 'supabase' | 'firebase';
+interface PlugableProviderProps {
+    bucketId: string;
+    children: ReactNode;
+    getToken?: () => Promise<string> | string;
+    authProvider?: AuthProvider;
+    clerkJWTTemplate?: string;
+    baseUrl?: string;
+}
+type PlugableEventType = 'file.uploaded' | 'file.deleted';
+type EventHandler = (data?: any) => void;
+interface PlugableContextValue {
+    client: BucketClient;
+    bucketId: string;
+    on: (event: PlugableEventType, handler: EventHandler) => () => void;
+    emit: (event: PlugableEventType, data?: any) => void;
+    getToken: () => Promise<string> | string;
+    baseUrl?: string;
+}
+declare function PlugableProvider({ bucketId, children, getToken, authProvider, clerkJWTTemplate, baseUrl, }: PlugableProviderProps): react_jsx_runtime.JSX.Element;
+declare function usePlugable(): PlugableContextValue;
+
+interface DropzoneProps {
+    bucketId?: string;
+    metadata?: Record<string, any>;
+    onUploadComplete?: (files: FileObject[]) => void;
+    onUploadError?: (error: Error) => void;
+    onProgressUpdate?: (fileName: string, progress: number) => void;
+    accept?: string;
+    maxFiles?: number;
+    children?: (props: DropzoneRenderProps) => ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+interface DropzoneRenderProps {
+    isDragActive: boolean;
+    isUploading: boolean;
+    uploadProgress: Record<string, number>;
+    openFileDialog: () => void;
+    uploadedFiles: FileObject[];
+}
+declare function Dropzone({ bucketId: _bucketId, metadata, onUploadComplete, onUploadError, onProgressUpdate, accept, maxFiles, children, className, style, }: DropzoneProps): react_jsx_runtime.JSX.Element;
+
+interface FileListProps {
+    metadata?: Record<string, any>;
+    mediaType?: string;
+    perPage?: number;
+    autoLoad?: boolean;
+    startPage?: number;
+    children: (props: FileListRenderProps) => ReactNode;
+}
+interface FileListRenderProps {
+    files: FileObject[];
+    isLoading: boolean;
+    hasMore: boolean;
+    loadMore: () => void;
+    refresh: () => Promise<void>;
+    error: Error | null;
+    pagination: {
+        current: number;
+        hasNext: boolean;
+        hasPrevious: boolean;
+        loadNextPage: () => void;
+        loadPreviousPage: () => void;
+    };
+}
+declare function FileList({ metadata, mediaType, perPage, autoLoad, startPage, children, }: FileListProps): react_jsx_runtime.JSX.Element;
+
+interface FileImageProps {
+    file: FileObject;
+    width?: number | string;
+    height?: number | string;
+    objectFit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+    borderRadius?: number | string;
+    alt?: string;
+    className?: string;
+    style?: CSSProperties;
+    onLoad?: () => void;
+    onError?: (error: Error) => void;
+}
+declare function FileImage({ file, width, height, objectFit, borderRadius, alt, className, style, onLoad, onError, }: FileImageProps): react_jsx_runtime.JSX.Element;
+declare function clearImageCache(): void;
+
+interface FilePreviewProps {
+    file: FileObject;
+    width?: number | string;
+    height?: number | string;
+    className?: string;
+    style?: CSSProperties;
+    objectFit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+    showExtension?: boolean;
+    renderNonImage?: (file: FileObject) => React.ReactNode;
+}
+declare function FilePreview({ file, width, height, className, style, objectFit, showExtension, renderNonImage, }: FilePreviewProps): react_jsx_runtime.JSX.Element;
+
+interface UseFilesOptions {
+    metadata?: Record<string, any>;
+    startPage?: number;
+    perPage?: number;
+    mediaType?: string;
+    autoLoad?: boolean;
+    orderBy?: 'created_at' | 'name' | 'byte_size';
+    orderDirection?: 'asc' | 'desc';
+}
+interface UseFilesResult {
+    files: FileObject[];
+    isLoading: boolean;
+    pagination: {
+        current: number;
+        hasNext: boolean;
+        hasPrevious: boolean;
+        loadNextPage: () => void;
+        loadPreviousPage: () => void;
+    };
+    setPage: (page: number) => void;
+    refresh: () => Promise<void>;
+}
+declare function useFiles({ metadata, startPage, perPage, mediaType, autoLoad, orderBy, orderDirection, }?: UseFilesOptions): UseFilesResult;
+
+export { type AuthProvider, Dropzone, type DropzoneProps, type DropzoneRenderProps, FileImage, type FileImageProps, FileList, type FileListProps, type FileListRenderProps, FilePreview, type FilePreviewProps, PlugableProvider, type PlugableProviderProps, type UseFilesOptions, type UseFilesResult, clearImageCache, useFiles, usePlugable };