@vryzel/file-next-ui 0.4.0

package/dist/index.d.cts

@@ -0,0 +1,423 @@
+import { RequestUploadResult, ViewMode } from '@vryzel/file-next-headless';
+import { ReactNode } from 'react';
+import { FileNode, Result } from '@vryzel/file-next';
+export { FileNode, Result } from '@vryzel/file-next';
+import { LucideIcon } from 'lucide-react';
+import { ClassValue } from 'clsx';
+
+type FileSystemError = {
+    code: string;
+    message: string;
+};
+
+type ExplorerColumn = "name" | "size" | "modified" | "kind";
+type SortDirection = "asc" | "desc";
+interface ExplorerListViewProps {
+    readonly files: ReadonlyArray<FileNode>;
+    readonly protectedIds?: ReadonlySet<string>;
+    readonly selectedIds: ReadonlySet<string>;
+    readonly onSelect: (file: FileNode, event: {
+        shiftKey: boolean;
+    }) => void;
+    readonly onActivate: (file: FileNode) => void;
+    readonly onContextMenu?: (file: FileNode, event: React.MouseEvent) => void;
+    readonly onDragStart: (id: string) => void;
+    readonly onDragEnd: () => void;
+    readonly onDrop: (destinationFolderId: string) => void;
+    readonly draggingId: string | null;
+    readonly draggingIds?: ReadonlySet<string>;
+    readonly dropTargetId: string | null;
+    readonly onDragOverRow: (id: string | null) => void;
+    readonly sortKey?: ExplorerColumn;
+    readonly sortDirection?: SortDirection;
+    readonly onSortChange?: (key: ExplorerColumn) => void;
+    readonly className?: string;
+}
+declare function ExplorerListView(props: ExplorerListViewProps): React.ReactElement;
+
+type ExplorerLabels = {
+    loading: string;
+    emptyFolder: string;
+    emptyTrash: string;
+    noMatches: string;
+    dropHint: string;
+    trashRetention: string;
+    items: string;
+    inTrash: string;
+    loadMore: string;
+    search: string;
+    upload: string;
+    newFolder: string;
+    folderName: string;
+    folderNameHint: string;
+    folderExists: string;
+    folderCreateFailed: string;
+    createFolder: string;
+    cancel: string;
+    rename: string;
+    renameHint: string;
+    viewOptions: string;
+    listView: string;
+    gridView: string;
+    sortName: string;
+    sortSize: string;
+    sortModified: string;
+    sortKind: string;
+    trash: string;
+    folder: string;
+    inUse: string;
+    itemActions: string;
+    preview: string;
+    download: string;
+    copy: string;
+    paste: string;
+    copied: string;
+    copyShare: string;
+    share: string;
+    restore: string;
+    moveToTrash: string;
+    deleteForever: string;
+    confirmDelete: string;
+    confirmDeleteMany: string;
+    confirmPurge: string;
+    confirmPurgeMany: string;
+    deleting: string;
+    selectedCount: string;
+    clearSelection: string;
+    clearClipboard: string;
+    uploadStatus: string;
+    dismissUploads: string;
+    uploadQueued: string;
+    uploadDone: string;
+    uploadFailed: string;
+    unknownType: string;
+    previewUnavailable: string;
+};
+declare const defaultLabels: ExplorerLabels;
+declare function ExplorerLabelsProvider({ labels, children, }: {
+    labels?: Partial<ExplorerLabels>;
+    children: ReactNode;
+}): React.ReactElement;
+declare function useExplorerLabels(): ExplorerLabels;
+
+interface FileExplorerActions {
+    readonly deleteFile: (input: {
+        id: string;
+    }) => Promise<unknown>;
+    readonly moveFile: (input: {
+        id: string;
+        newParentId: string | null;
+        newName?: string;
+    }) => Promise<unknown>;
+    readonly copyFile: (input: {
+        id: string;
+        newParentId: string | null;
+        newName?: string;
+    }) => Promise<unknown>;
+    readonly renameFile: (id: string, newName: string) => Promise<void>;
+    readonly restoreNode?: (input: {
+        id: string;
+    }) => Promise<unknown>;
+    readonly purgeNode?: (input: {
+        id: string;
+    }) => Promise<unknown>;
+    readonly createShare?: (input: {
+        id: string;
+    }) => Promise<string>;
+    readonly createFolder?: (input: {
+        name: string;
+        parentId: string | null;
+    }) => Promise<unknown>;
+}
+type ListPageResult = Result<{
+    items: ReadonlyArray<FileNode>;
+    nextCursor?: string;
+}, FileSystemError>;
+type OverlayQuery = (input: {
+    query?: string;
+    cursor?: string;
+    limit?: number;
+    trash?: boolean;
+}) => Promise<ListPageResult>;
+interface FileExplorerProps {
+    readonly tenantId: string;
+    readonly parentId: string | null;
+    readonly listFiles: (input: {
+        parentId: string | null;
+        cursor?: string;
+        limit?: number;
+    }) => Promise<ListPageResult>;
+    readonly actions: FileExplorerActions;
+    readonly breadcrumbs?: ReadonlyArray<{
+        id: string;
+        name: string;
+    }>;
+    readonly onBreadcrumbNavigate?: (seg: {
+        id: string;
+        name: string;
+    }) => void;
+    readonly initialView?: "list" | "grid";
+    readonly autoFetch?: boolean;
+    readonly onActivate?: (file: FileNode) => void;
+    readonly onOpenFolder?: (folder: FileNode) => void;
+    readonly searchFiles?: OverlayQuery;
+    readonly listTrash?: OverlayQuery;
+    readonly requestUpload?: (file: {
+        name: string;
+        size: number;
+        type: string;
+        content: Blob;
+        parentId: string | null;
+    }) => Promise<RequestUploadResult>;
+    readonly confirmUpload?: () => Promise<void> | void;
+    readonly usedBytes?: number;
+    readonly quotaBytes?: number;
+    readonly onMove?: (input: {
+        itemIds: ReadonlyArray<string>;
+        destinationFolderId: string;
+    }) => Promise<void> | void;
+    readonly refreshKey?: number;
+    readonly className?: string;
+    readonly persistViewKey?: string;
+    readonly onPreview?: (file: FileNode) => void;
+    readonly onDownload?: (file: FileNode) => void;
+    readonly extraFileAction?: {
+        label: string;
+        onSelect: (file: FileNode) => void;
+    };
+    readonly protectedIds?: ReadonlyArray<string>;
+    readonly labels?: Partial<ExplorerLabels>;
+}
+declare function FileExplorer(props: FileExplorerProps): React.ReactElement;
+
+interface ExplorerToolbarProps {
+    readonly view: ViewMode;
+    readonly onViewChange: (v: ViewMode) => void;
+    readonly query?: string;
+    readonly onQueryChange?: (query: string) => void;
+    readonly trashOpen?: boolean;
+    readonly onTrashToggle?: () => void;
+    readonly trashHasItems?: boolean;
+    readonly onNewFolder?: () => void;
+    readonly onUpload?: () => void;
+    readonly uploading?: boolean;
+    readonly uploadLabel?: string;
+    readonly sortKey: ExplorerColumn;
+    readonly sortDirection: SortDirection;
+    readonly onSortChange: (key: ExplorerColumn) => void;
+    readonly className?: string;
+}
+declare function ExplorerToolbar(props: ExplorerToolbarProps): React.ReactElement;
+
+interface ExplorerGridViewProps {
+    readonly files: ReadonlyArray<FileNode>;
+    readonly protectedIds?: ReadonlySet<string>;
+    readonly selectedIds: ReadonlySet<string>;
+    readonly onSelect: (file: FileNode, event: {
+        shiftKey: boolean;
+    }) => void;
+    readonly onActivate: (file: FileNode) => void;
+    readonly onContextMenu?: (file: FileNode, event: React.MouseEvent) => void;
+    readonly onDragStart: (id: string) => void;
+    readonly onDragEnd: () => void;
+    readonly onDrop: (destinationFolderId: string) => void;
+    readonly draggingId: string | null;
+    readonly draggingIds?: ReadonlySet<string>;
+    readonly dropTargetId: string | null;
+    readonly onDragOverRow: (id: string | null) => void;
+    readonly className?: string;
+}
+declare function ExplorerGridView(props: ExplorerGridViewProps): React.ReactElement;
+
+interface ExplorerContextMenuActions {
+    readonly deleteFile: (input: {
+        id: string;
+    }) => Promise<unknown>;
+    readonly renameFile: (id: string, newName: string) => Promise<void>;
+    readonly restoreNode?: (input: {
+        id: string;
+    }) => Promise<unknown>;
+    readonly purgeNode?: (input: {
+        id: string;
+    }) => Promise<unknown>;
+    readonly createShare?: (input: {
+        id: string;
+    }) => Promise<string>;
+}
+type ExplorerContextTarget = {
+    kind: "item";
+    file: FileNode;
+    x: number;
+    y: number;
+} | {
+    kind: "blank";
+    x: number;
+    y: number;
+};
+interface ExplorerContextMenuProps {
+    readonly target: ExplorerContextTarget | null;
+    readonly mode?: "browse" | "trash";
+    readonly actions: ExplorerContextMenuActions;
+    readonly protectedItem?: boolean;
+    readonly onClose: () => void;
+    readonly onPreview?: (file: FileNode) => void;
+    readonly onDownload?: (file: FileNode) => void;
+    readonly onRename?: (file: FileNode) => void;
+    readonly onRequestDelete?: (file: FileNode) => void;
+    readonly onRequestPurge?: (file: FileNode) => void;
+    readonly onCopy?: (file: FileNode) => void;
+    readonly onPaste?: (folder?: FileNode) => void;
+    readonly onNewFolder?: () => void;
+    readonly onUpload?: () => void;
+    readonly extraFileAction?: {
+        label: string;
+        onSelect: (file: FileNode) => void;
+    };
+}
+declare function ExplorerContextMenu(props: ExplorerContextMenuProps): React.ReactElement | null;
+
+interface BreadcrumbsProps {
+    readonly segments: ReadonlyArray<{
+        id: string;
+        name: string;
+    }>;
+    readonly onNavigate?: (segment: {
+        id: string;
+        name: string;
+    }) => void;
+    readonly className?: string;
+}
+declare function Breadcrumbs(props: BreadcrumbsProps): React.ReactElement;
+
+interface EmptyStateProps {
+    readonly title: string;
+    readonly description?: string;
+    readonly icon?: ReactNode;
+    readonly action?: ReactNode;
+    readonly className?: string;
+}
+declare function EmptyState(props: EmptyStateProps): React.ReactElement;
+
+interface ErrorStateProps {
+    readonly error: FileSystemError | {
+        code: string;
+        message: string;
+    };
+    readonly onRetry?: () => void;
+    readonly className?: string;
+}
+declare function ErrorState(props: ErrorStateProps): React.ReactElement;
+
+interface FileIconProps {
+    readonly kind: "file" | "folder";
+    readonly mimeType?: string;
+    readonly className?: string;
+}
+declare const FILE_ICON_MAP: Record<string, LucideIcon>;
+declare function resolveFileIcon(mimeType: string | undefined): LucideIcon;
+declare function FileIcon(props: FileIconProps): React.ReactElement;
+
+declare function canPreviewFile(file: Pick<FileNode, "mimeType" | "name">): boolean;
+declare function FilePreviewDialog({ file, src, onClose, onDownload, }: {
+    file: FileNode | null;
+    src: string;
+    onClose: () => void;
+    onDownload: (file: FileNode) => void;
+}): React.ReactElement | null;
+
+declare function CreateFolderDialog({ open, onOpenChange, onCreate, title, description, confirmLabel, initialName, }: {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onCreate: (name: string) => Promise<void> | void;
+    title?: string;
+    description?: string;
+    confirmLabel?: string;
+    initialName?: string;
+}): React.ReactElement;
+
+declare function ConfirmDeleteDialog({ open, names, permanent, onOpenChange, onConfirm, }: {
+    open: boolean;
+    names: ReadonlyArray<string>;
+    permanent?: boolean;
+    onOpenChange: (open: boolean) => void;
+    onConfirm: () => Promise<void> | void;
+}): React.ReactElement;
+
+declare function ExplorerSelectionToast({ files, protectedIds, trashOpen, onDownload, onCopy, onShare, onDelete, onRestore, onPurge, onClear, }: {
+    readonly files: ReadonlyArray<FileNode>;
+    readonly protectedIds: ReadonlySet<string>;
+    readonly trashOpen: boolean;
+    readonly onDownload?: (file: FileNode) => void;
+    readonly onCopy?: () => void;
+    readonly onShare?: () => void;
+    readonly onDelete?: () => void;
+    readonly onRestore?: () => void;
+    readonly onPurge?: () => void;
+    readonly onClear: () => void;
+}): React.ReactElement | null;
+declare function ExplorerClipboardToast({ count, onPaste, onClear, }: {
+    readonly count: number;
+    readonly onPaste: () => void;
+    readonly onClear: () => void;
+}): React.ReactElement | null;
+
+type UploadQueueStatus = "queued" | "uploading" | "success" | "error";
+type UploadQueueItem = {
+    readonly id: string;
+    readonly name: string;
+    readonly size: number;
+    readonly type: string;
+    readonly parentId: string | null;
+    readonly status: UploadQueueStatus;
+    readonly progress: number;
+    readonly error?: string;
+};
+declare function useUploadQueue(options: {
+    readonly requestUpload: (file: {
+        name: string;
+        size: number;
+        type: string;
+        content: Blob;
+        parentId: string | null;
+    }) => Promise<RequestUploadResult>;
+    readonly confirmUpload?: (file: {
+        name: string;
+        size: number;
+        type: string;
+        content: Blob;
+    }) => Promise<void> | void;
+}): {
+    readonly items: ReadonlyArray<UploadQueueItem>;
+    readonly enqueue: (files: ReadonlyArray<File>, parentId: string | null) => void;
+    readonly dismiss: () => void;
+    readonly active: boolean;
+};
+
+declare function ExplorerUploadStatus({ items, onDismiss, className, }: {
+    readonly items: ReadonlyArray<UploadQueueItem>;
+    readonly onDismiss: () => void;
+    readonly className?: string;
+}): React.ReactElement | null;
+
+type Enqueue = (files: ReadonlyArray<File>, parentId: string | null) => void;
+declare function useUploadEnqueue(): Enqueue | null;
+declare function UploadQueueProvider({ requestUpload, confirmUpload, children, }: {
+    requestUpload: (file: {
+        name: string;
+        size: number;
+        type: string;
+        content: Blob;
+        parentId: string | null;
+    }) => Promise<RequestUploadResult>;
+    confirmUpload?: (file: {
+        name: string;
+        size: number;
+        type: string;
+        content: Blob;
+    }) => Promise<void> | void;
+    children: ReactNode;
+}): React.ReactElement;
+
+declare function cn(...inputs: ClassValue[]): string;
+
+export { Breadcrumbs, type BreadcrumbsProps, ConfirmDeleteDialog, CreateFolderDialog, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, ExplorerClipboardToast, type ExplorerColumn, ExplorerContextMenu, type ExplorerContextMenuProps, type ExplorerContextTarget, ExplorerGridView, type ExplorerGridViewProps, type ExplorerLabels, ExplorerLabelsProvider, ExplorerListView, type ExplorerListViewProps, ExplorerSelectionToast, ExplorerToolbar, type ExplorerToolbarProps, ExplorerUploadStatus, FILE_ICON_MAP, FileExplorer, type FileExplorerActions, type FileExplorerProps, FileIcon, type FileIconProps, FilePreviewDialog, type FileSystemError, type SortDirection, type UploadQueueItem, UploadQueueProvider, canPreviewFile, cn, defaultLabels, resolveFileIcon, useExplorerLabels, useUploadEnqueue, useUploadQueue };