@firecms/media_manager 3.1.0-canary.1df3b2c

package/src/components/MediaLibraryView.tsx

@@ -0,0 +1,194 @@
+import React, { useCallback, useRef, useState } from "react";
+import {
+    Button,
+    Container,
+    SearchBar,
+    Typography,
+    cls,
+    AddIcon,
+    CircularProgress,
+    RefreshIcon,
+    IconButton,
+    Tooltip,
+    AppsIcon,
+    Icon
+} from "@firecms/ui";
+import { useMediaManager } from "../MediaManagerProvider";
+import { MediaAssetCard } from "./MediaAssetCard";
+import { MediaAssetDetails } from "./MediaAssetDetails";
+import { MediaUploadDialog } from "./MediaUploadDialog";
+
+export interface MediaLibraryViewProps {
+    maxFileSize?: number;
+    acceptedMimeTypes?: string[];
+}
+
+/**
+ * Main view component for the Media Library.
+ * Displays a grid of assets with search, upload, and management capabilities.
+ */
+export function MediaLibraryView({
+                                     maxFileSize,
+                                     acceptedMimeTypes
+                                 }: MediaLibraryViewProps) {
+    const controller = useMediaManager();
+    const [uploadDialogOpen, setUploadDialogOpen] = useState(false);
+    const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
+    const fileInputRef = useRef<HTMLInputElement>(null);
+
+    const handleSearch = useCallback((query?: string) => {
+        controller.searchAssets(query ?? "");
+    }, [controller]);
+
+    const handleUploadClick = useCallback(() => {
+        setUploadDialogOpen(true);
+    }, []);
+
+    const handleFileSelect = useCallback(async (files: File[]) => {
+        for (const file of files) {
+            await controller.uploadFile(file);
+        }
+        setUploadDialogOpen(false);
+    }, [controller]);
+
+    const handleRefresh = useCallback(() => {
+        controller.refreshAssets();
+    }, [controller]);
+
+    return (
+        <div className="h-full flex flex-col overflow-hidden">
+            {/* Header */}
+            <div
+                className="flex-shrink-0 border-b border-surface-accent-200 dark:border-surface-accent-700 bg-surface-50 dark:bg-surface-900">
+                <Container maxWidth="6xl" className="py-4">
+                    <div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center justify-between">
+                        <div className="flex items-center gap-3">
+                            <Typography variant="h5" className="font-semibold">
+                                Media Library
+                            </Typography>
+                            {controller.totalCount !== undefined && (
+                                <Typography
+                                    variant="caption"
+                                    className="bg-surface-accent-100 dark:bg-surface-accent-800 px-2 py-0.5 rounded-full"
+                                >
+                                    {controller.totalCount} assets
+                                </Typography>
+                            )}
+                        </div>
+
+                        <div className="flex items-center gap-2 w-full sm:w-auto">
+                            <SearchBar
+                                onTextSearch={handleSearch}
+                                placeholder="Search assets..."
+                                className="flex-1 sm:w-64"
+                            />
+
+                            <div
+                                className="flex items-center gap-1 border-l border-surface-accent-200 dark:border-surface-accent-700 pl-2 ml-2">
+                                <Tooltip title="Grid view">
+                                    <IconButton
+                                        onClick={() => setViewMode("grid")}
+                                        className={cls(
+                                            viewMode === "grid" && "bg-surface-accent-100 dark:bg-surface-accent-800"
+                                        )}
+                                    >
+                                        <AppsIcon size="small"/>
+                                    </IconButton>
+                                </Tooltip>
+                                <Tooltip title="List view">
+                                    <IconButton
+                                        onClick={() => setViewMode("list")}
+                                        className={cls(
+                                            viewMode === "list" && "bg-surface-accent-100 dark:bg-surface-accent-800"
+                                        )}
+                                    >
+                                        <Icon iconKey="list" size="small"/>
+                                    </IconButton>
+                                </Tooltip>
+                            </div>
+
+                            <Tooltip title="Refresh">
+                                <IconButton onClick={handleRefresh} disabled={controller.loading}>
+                                    <RefreshIcon size="small"/>
+                                </IconButton>
+                            </Tooltip>
+
+                            <Button
+                                variant="filled"
+                                onClick={handleUploadClick}
+                            >
+                                <AddIcon size="small"/>
+                                Upload
+                            </Button>
+                        </div>
+                    </div>
+                </Container>
+            </div>
+
+            {/* Content */}
+            <div className="flex-1 overflow-auto">
+                <Container maxWidth="6xl" className="py-6">
+                    {controller.loading && controller.assets.length === 0 ? (
+                        <div className="flex items-center justify-center h-64">
+                            <CircularProgress/>
+                        </div>
+                    ) : controller.error ? (
+                        <div className="flex flex-col items-center justify-center h-64 gap-4">
+                            <Typography className="text-red-500">
+                                Error loading assets: {controller.error.message}
+                            </Typography>
+                            <Button onClick={handleRefresh}>
+                                Try Again
+                            </Button>
+                        </div>
+                    ) : controller.assets.length === 0 ? (
+                        <div className="flex flex-col items-center justify-center h-64 gap-4">
+                            <Typography className="text-surface-accent-500">
+                                No media assets yet
+                            </Typography>
+                            <Button onClick={handleUploadClick}>
+                                <AddIcon size="small"/>
+                                Upload your first file
+                            </Button>
+                        </div>
+                    ) : (
+                        <div className={cls(
+                            viewMode === "grid"
+                                ? "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4"
+                                : "flex flex-col gap-2"
+                        )}>
+                            {controller.assets.map(asset => (
+                                <MediaAssetCard
+                                    key={asset.id}
+                                    asset={asset}
+                                    viewMode={viewMode}
+                                    onClick={() => controller.selectAsset(asset)}
+                                    selected={controller.selectedAsset?.id === asset.id}
+                                />
+                            ))}
+                        </div>
+                    )}
+                </Container>
+            </div>
+
+            {/* Details Panel */}
+            {controller.selectedAsset && (
+                <MediaAssetDetails
+                    asset={controller.selectedAsset}
+                    onClose={() => controller.selectAsset(undefined)}
+                    onUpdate={controller.updateAsset}
+                    onDelete={controller.deleteAsset}
+                />
+            )}
+
+            {/* Upload Dialog */}
+            <MediaUploadDialog
+                open={uploadDialogOpen}
+                onClose={() => setUploadDialogOpen(false)}
+                onUpload={handleFileSelect}
+                maxFileSize={maxFileSize}
+                acceptedMimeTypes={acceptedMimeTypes}
+            />
+        </div>
+    );
+}

package/src/components/MediaUploadDialog.tsx

@@ -0,0 +1,264 @@
+import React, { useCallback, useState } from "react";
+import {
+    Button,
+    Typography,
+    cls,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    CloudUploadIcon,
+    CircularProgress
+} from "@firecms/ui";
+
+export interface MediaUploadDialogProps {
+    open: boolean;
+    onClose: () => void;
+    onUpload: (files: File[]) => Promise<void>;
+    maxFileSize?: number;
+    acceptedMimeTypes?: string[];
+}
+
+/**
+ * Dialog component for uploading files to the media library.
+ * Supports drag-and-drop and file browser selection.
+ */
+export function MediaUploadDialog({
+    open,
+    onClose,
+    onUpload,
+    maxFileSize = 52428800, // 50MB default
+    acceptedMimeTypes
+}: MediaUploadDialogProps) {
+    const [isDragging, setIsDragging] = useState(false);
+    const [uploading, setUploading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+    const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
+
+    const validateFiles = useCallback((files: File[]): { valid: File[]; errors: string[] } => {
+        const valid: File[] = [];
+        const errors: string[] = [];
+
+        for (const file of files) {
+            if (maxFileSize && file.size > maxFileSize) {
+                errors.push(`${file.name}: File too large (max ${formatSize(maxFileSize)})`);
+                continue;
+            }
+            if (acceptedMimeTypes && !acceptedMimeTypes.some(type => {
+                if (type.endsWith("/*")) {
+                    return file.type.startsWith(type.slice(0, -1));
+                }
+                return file.type === type;
+            })) {
+                errors.push(`${file.name}: File type not allowed`);
+                continue;
+            }
+            valid.push(file);
+        }
+
+        return { valid, errors };
+    }, [maxFileSize, acceptedMimeTypes]);
+
+    const handleDragOver = useCallback((e: React.DragEvent) => {
+        e.preventDefault();
+        setIsDragging(true);
+    }, []);
+
+    const handleDragLeave = useCallback((e: React.DragEvent) => {
+        e.preventDefault();
+        setIsDragging(false);
+    }, []);
+
+    const handleDrop = useCallback((e: React.DragEvent) => {
+        e.preventDefault();
+        setIsDragging(false);
+
+        const files = Array.from(e.dataTransfer.files);
+        const { valid, errors } = validateFiles(files);
+
+        if (errors.length > 0) {
+            setError(errors.join("\n"));
+        } else {
+            setError(null);
+        }
+
+        setSelectedFiles(prev => [...prev, ...valid]);
+    }, [validateFiles]);
+
+    const handleFileSelect = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+        const files = Array.from(e.target.files ?? []);
+        const { valid, errors } = validateFiles(files);
+
+        if (errors.length > 0) {
+            setError(errors.join("\n"));
+        } else {
+            setError(null);
+        }
+
+        setSelectedFiles(prev => [...prev, ...valid]);
+    }, [validateFiles]);
+
+    const handleRemoveFile = useCallback((index: number) => {
+        setSelectedFiles(prev => prev.filter((_, i) => i !== index));
+    }, []);
+
+    const handleUpload = useCallback(async () => {
+        if (selectedFiles.length === 0) return;
+
+        setUploading(true);
+        setError(null);
+
+        try {
+            await onUpload(selectedFiles);
+            setSelectedFiles([]);
+            onClose();
+        } catch (err) {
+            setError(err instanceof Error ? err.message : "Upload failed");
+        } finally {
+            setUploading(false);
+        }
+    }, [selectedFiles, onUpload, onClose]);
+
+    const handleClose = useCallback(() => {
+        if (!uploading) {
+            setSelectedFiles([]);
+            setError(null);
+            onClose();
+        }
+    }, [uploading, onClose]);
+
+    const formatSize = (bytes: number): string => {
+        if (bytes < 1024) return `${bytes} B`;
+        if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+        return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+    };
+
+    return (
+        <Dialog
+            open={open}
+            onOpenChange={(open) => !open && handleClose()}
+            maxWidth="md"
+        >
+            <DialogContent className="p-0">
+                <div className="p-4 border-b border-surface-accent-200 dark:border-surface-accent-700">
+                    <Typography variant="h6">
+                        Upload Files
+                    </Typography>
+                </div>
+
+                <div className="p-4">
+                    {/* Drop Zone */}
+                    <div
+                        className={cls(
+                            "border-2 border-dashed rounded-lg p-8",
+                            "flex flex-col items-center justify-center gap-4",
+                            "transition-colors duration-150",
+                            isDragging
+                                ? "border-primary bg-primary/5"
+                                : "border-surface-accent-300 dark:border-surface-accent-600",
+                            "hover:border-primary hover:bg-primary/5",
+                            "cursor-pointer"
+                        )}
+                        onDragOver={handleDragOver}
+                        onDragLeave={handleDragLeave}
+                        onDrop={handleDrop}
+                        onClick={() => document.getElementById("file-upload-input")?.click()}
+                    >
+                        <CloudUploadIcon
+                            size="large"
+                            className={cls(
+                                isDragging ? "text-primary" : "text-surface-accent-400"
+                            )}
+                        />
+                        <div className="text-center">
+                            <Typography variant="body1" className="font-medium">
+                                Drop files here or click to browse
+                            </Typography>
+                            <Typography variant="caption" className="text-surface-accent-500">
+                                Maximum file size: {formatSize(maxFileSize)}
+                            </Typography>
+                        </div>
+                        <input
+                            id="file-upload-input"
+                            type="file"
+                            multiple
+                            accept={acceptedMimeTypes?.join(",")}
+                            onChange={handleFileSelect}
+                            className="hidden"
+                        />
+                    </div>
+
+                    {/* Error Display */}
+                    {error && (
+                        <Typography variant="caption" className="text-red-500 mt-2 block whitespace-pre-line">
+                            {error}
+                        </Typography>
+                    )}
+
+                    {/* Selected Files */}
+                    {selectedFiles.length > 0 && (
+                        <div className="mt-4 space-y-2">
+                            <Typography variant="caption" className="text-surface-accent-500">
+                                Selected files ({selectedFiles.length})
+                            </Typography>
+                            <div className="max-h-40 overflow-auto space-y-1">
+                                {selectedFiles.map((file, index) => (
+                                    <div
+                                        key={`${file.name}-${index}`}
+                                        className={cls(
+                                            "flex items-center justify-between p-2 rounded",
+                                            "bg-surface-accent-50 dark:bg-surface-accent-800"
+                                        )}
+                                    >
+                                        <div className="flex-1 min-w-0 mr-2">
+                                            <Typography variant="body2" className="truncate">
+                                                {file.name}
+                                            </Typography>
+                                            <Typography variant="caption" className="text-surface-accent-500">
+                                                {formatSize(file.size)}
+                                            </Typography>
+                                        </div>
+                                        <Button
+                                            variant="text"
+                                            size="small"
+                                            onClick={(e) => {
+                                                e.stopPropagation();
+                                                handleRemoveFile(index);
+                                            }}
+                                            disabled={uploading}
+                                        >
+                                            Remove
+                                        </Button>
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                    )}
+                </div>
+            </DialogContent>
+
+            <DialogActions>
+                <Button
+                    variant="text"
+                    onClick={handleClose}
+                    disabled={uploading}
+                >
+                    Cancel
+                </Button>
+                <Button
+                    variant="filled"
+                    onClick={handleUpload}
+                    disabled={selectedFiles.length === 0 || uploading}
+                >
+                    {uploading ? (
+                        <>
+                            <CircularProgress size="smallest" />
+                            Uploading...
+                        </>
+                    ) : (
+                        `Upload ${selectedFiles.length > 0 ? `(${selectedFiles.length})` : ""}`
+                    )}
+                </Button>
+            </DialogActions>
+        </Dialog>
+    );
+}

package/src/components/index.ts

@@ -0,0 +1,5 @@
+export * from "./MediaLibraryCard";
+export * from "./MediaLibraryView";
+export * from "./MediaAssetCard";
+export * from "./MediaAssetDetails";
+export * from "./MediaUploadDialog";

package/src/index.ts

@@ -0,0 +1,10 @@
+// Types
+export * from "./types";
+
+// Provider and hooks
+export * from "./MediaManagerProvider";
+export * from "./useMediaManagerController";
+export * from "./useMediaManagerPlugin";
+
+// Components
+export * from "./components";

package/src/types/config.ts

@@ -0,0 +1,100 @@
+import { DataSourceDelegate, StorageSource } from "@firecms/core";
+
+/**
+ * Configuration for a thumbnail size.
+ * Thumbnails are generated client-side before upload.
+ */
+export interface ThumbnailSize {
+    /**
+     * Unique name for this size (e.g., "small", "medium", "large").
+     * Used as a key in the thumbnails record.
+     */
+    name: string;
+
+    /**
+     * Maximum width in pixels.
+     * The image will be scaled to fit within this width while maintaining aspect ratio.
+     */
+    width: number;
+
+    /**
+     * Maximum height in pixels.
+     * The image will be scaled to fit within this height while maintaining aspect ratio.
+     */
+    height: number;
+
+    /**
+     * JPEG quality for the thumbnail (0-1).
+     * @default 0.8
+     */
+    quality?: number;
+}
+
+/**
+ * Configuration options for the Media Manager plugin.
+ */
+export interface MediaManagerConfig {
+    /**
+     * Storage source for file operations (upload, download, delete).
+     * Typically useFirebaseStorageSource() or similar.
+     */
+    storageSource: StorageSource;
+
+    /**
+     * Data source delegate for metadata persistence.
+     * Typically useFirestoreDelegate() or similar.
+     */
+    dataSourceDelegate: DataSourceDelegate;
+
+    /**
+     * Path in storage where media files will be uploaded.
+     * @default "media"
+     */
+    storagePath?: string;
+
+    /**
+     * Collection path in the database for storing asset metadata.
+     * @default "media_assets"
+     */
+    collectionPath?: string;
+
+    /**
+     * Optional bucket name for storage operations.
+     * If not specified, uses the default bucket.
+     */
+    bucket?: string;
+
+    /**
+     * Maximum file size allowed for uploads (in bytes).
+     * @default 52428800 (50MB)
+     */
+    maxFileSize?: number;
+
+    /**
+     * Allowed MIME types for uploads.
+     * If not specified, all file types are allowed.
+     */
+    acceptedMimeTypes?: string[];
+
+    /**
+     * Thumbnail sizes to generate on upload.
+     * Thumbnails are generated client-side using canvas before upload.
+     * If not specified, no thumbnails are generated.
+     * 
+     * @example
+     * ```typescript
+     * thumbnailSizes: [
+     *     { name: "small", width: 150, height: 150 },
+     *     { name: "medium", width: 400, height: 400 }
+     * ]
+     * ```
+     */
+    thumbnailSizes?: ThumbnailSize[];
+
+    /**
+     * Subfolder path for storing thumbnails.
+     * Thumbnails are stored under `{storagePath}/{thumbnailPath}/{sizeName}/`.
+     * @default "thumbs"
+     */
+    thumbnailPath?: string;
+}

package/src/types/controller.ts

@@ -0,0 +1,79 @@
+import { MediaAsset } from "./media_asset";
+
+/**
+ * Controller interface for managing media assets.
+ * Provides methods for CRUD operations and state management.
+ */
+export interface MediaManagerController {
+    /**
+     * Whether the controller is currently loading data
+     */
+    loading: boolean;
+
+    /**
+     * Error if any operation failed
+     */
+    error?: Error;
+
+    /**
+     * List of loaded media assets
+     */
+    assets: MediaAsset[];
+
+    /**
+     * Total count of assets (may differ from assets.length during pagination)
+     */
+    totalCount?: number;
+
+    /**
+     * Currently selected asset (for details view)
+     */
+    selectedAsset?: MediaAsset;
+
+    /**
+     * Select an asset for viewing/editing
+     */
+    selectAsset: (asset: MediaAsset | undefined) => void;
+
+    /**
+     * Upload a new file to the media library
+     * @param file The file to upload
+     * @param metadata Optional metadata to attach
+     * @returns The created MediaAsset
+     */
+    uploadFile: (file: File, metadata?: Partial<Pick<MediaAsset, "title" | "altText" | "caption" | "tags">>) => Promise<MediaAsset>;
+
+    /**
+     * Delete an asset from storage and database
+     * @param assetId The ID of the asset to delete
+     */
+    deleteAsset: (assetId: string) => Promise<void>;
+
+    /**
+     * Update asset metadata
+     * @param assetId The ID of the asset to update
+     * @param data The fields to update
+     */
+    updateAsset: (assetId: string, data: Partial<MediaAsset>) => Promise<void>;
+
+    /**
+     * Refresh the assets list from the database
+     */
+    refreshAssets: () => Promise<void>;
+
+    /**
+     * Search assets by text
+     * @param query Search query string
+     */
+    searchAssets: (query: string) => void;
+
+    /**
+     * Storage path configuration
+     */
+    storagePath: string;
+
+    /**
+     * Collection path configuration
+     */
+    collectionPath: string;
+}

package/src/types/index.ts

@@ -0,0 +1,3 @@
+export * from "./media_asset";
+export * from "./config";
+export * from "./controller";