convex-cms 0.0.3 → 0.0.5-alpha.2

package/admin/src/components/UploadDropzone.tsx

@@ -0,0 +1,383 @@
+import { useState, useRef, useCallback } from 'react'
+import {
+  useMediaUploadQueue,
+  type UploadQueueFile,
+  type UploadQueueFileStatus,
+} from 'convex-cms/react'
+import type { FunctionReference } from 'convex/server'
+import { CmsButton } from '~/components/cmsds/CmsButton'
+import { cn } from '~/lib/cn'
+import { Upload, Check, X, RefreshCw, AlertCircle } from 'lucide-react'
+
+export interface UploadDropzoneProps {
+  onUploadComplete: (files: UploadedFile[]) => void
+  currentFolderId?: string
+  generateUploadUrl: FunctionReference<'mutation'>
+  createAsset: FunctionReference<'mutation'>
+  maxFileSize?: number
+  allowedMimeTypes?: string[]
+  maxConcurrentUploads?: number
+  onClose?: () => void
+  onError?: (error: string, filename: string) => void
+}
+
+export interface UploadedFile {
+  filename: string
+  storageId: string
+  success: boolean
+  error?: string
+}
+
+function formatFileSize(bytes: number): string {
+  if (bytes === 0) return '0 B'
+  const k = 1024
+  const sizes = ['B', 'KB', 'MB', 'GB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`
+}
+
+function isMimeTypeAllowed(mimeType: string, allowedTypes: string[]): boolean {
+  if (allowedTypes.length === 0) return true
+  return allowedTypes.some((allowed) => {
+    if (allowed.endsWith('/*')) {
+      const category = allowed.slice(0, -2)
+      return mimeType.startsWith(category + '/')
+    }
+    return mimeType === allowed
+  })
+}
+
+export function UploadDropzone({
+  onUploadComplete,
+  currentFolderId,
+  generateUploadUrl,
+  createAsset,
+  maxFileSize,
+  allowedMimeTypes = [],
+  maxConcurrentUploads = 3,
+  onError,
+}: UploadDropzoneProps) {
+  const [isDragActive, setIsDragActive] = useState(false)
+  const [validationErrors, setValidationErrors] = useState<Map<string, string>>(new Map())
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  const queue = useMediaUploadQueue({
+    getUploadUrl: generateUploadUrl,
+    createAsset: createAsset,
+    maxConcurrent: maxConcurrentUploads,
+    metadata: currentFolderId ? { parentId: currentFolderId } : undefined,
+    onComplete: (results) => {
+      const uploadedFiles: UploadedFile[] = results.map((f) => ({
+        filename: f.file.name,
+        storageId: f.result ? String((f.result as { _id?: string })._id || '') : '',
+        success: f.status === 'complete',
+        error: f.error,
+      }))
+      onUploadComplete(uploadedFiles)
+    },
+    onError: (file) => {
+      onError?.(file.error || 'Upload failed', file.file.name)
+    },
+  })
+
+  const validateFile = useCallback(
+    (file: File): string | null => {
+      if (maxFileSize && file.size > maxFileSize) {
+        return `File exceeds maximum size of ${formatFileSize(maxFileSize)}`
+      }
+      if (allowedMimeTypes.length > 0 && !isMimeTypeAllowed(file.type, allowedMimeTypes)) {
+        return `File type ${file.type || 'unknown'} is not allowed`
+      }
+      return null
+    },
+    [maxFileSize, allowedMimeTypes]
+  )
+
+  const addFiles = useCallback(
+    (files: FileList | File[]) => {
+      const fileArray = Array.from(files)
+      const errors = new Map<string, string>()
+      const validFiles: File[] = []
+
+      for (const file of fileArray) {
+        const error = validateFile(file)
+        if (error) {
+          errors.set(file.name, error)
+        } else {
+          validFiles.push(file)
+        }
+      }
+
+      setValidationErrors(errors)
+      if (validFiles.length > 0) {
+        queue.addFiles(validFiles)
+      }
+    },
+    [validateFile, queue]
+  )
+
+  const handleDragEnter = useCallback((e: React.DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    setIsDragActive(true)
+  }, [])
+
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    setIsDragActive(false)
+  }, [])
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+  }, [])
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault()
+      e.stopPropagation()
+      setIsDragActive(false)
+      if (e.dataTransfer.files?.length) {
+        addFiles(e.dataTransfer.files)
+      }
+    },
+    [addFiles]
+  )
+
+  const handleFileChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (e.target.files?.length) {
+        addFiles(e.target.files)
+        e.target.value = ''
+      }
+    },
+    [addFiles]
+  )
+
+  const getStatusIcon = (status: UploadQueueFileStatus) => {
+    switch (status) {
+      case 'complete':
+        return <Check className="size-4 text-emerald-500" />
+      case 'error':
+      case 'cancelled':
+        return <X className="size-4 text-red-500" />
+      case 'uploading':
+        return (
+          <div className="size-4 animate-spin rounded-full border-2 border-muted border-t-primary" />
+        )
+      default:
+        return <div className="size-4 rounded-full border-2 border-muted" />
+    }
+  }
+
+  const completedCount = queue.files.filter((f) => f.status === 'complete').length
+  const errorCount = queue.files.filter(
+    (f) => f.status === 'error' || f.status === 'cancelled'
+  ).length
+  const hasCompletedOrFailed = completedCount > 0 || errorCount > 0
+
+  return (
+    <div className="space-y-4">
+      {validationErrors.size > 0 && (
+        <div className="rounded-md border border-destructive/50 bg-destructive/10 p-3">
+          <div className="flex items-start gap-2">
+            <AlertCircle className="mt-0.5 size-4 shrink-0 text-destructive" />
+            <div className="flex-1 space-y-1">
+              {Array.from(validationErrors.entries()).map(([filename, error]) => (
+                <p key={filename} className="text-sm text-destructive">
+                  <span className="font-medium">{filename}:</span> {error}
+                </p>
+              ))}
+            </div>
+          </div>
+          <CmsButton
+            variant="ghost"
+            size="sm"
+            className="mt-2"
+            onClick={() => setValidationErrors(new Map())}
+          >
+            Dismiss
+          </CmsButton>
+        </div>
+      )}
+
+      {!queue.isUploading && queue.files.length === 0 && (
+        <div
+          className={cn(
+            'flex cursor-pointer flex-col items-center justify-center gap-3 rounded-lg border-2 border-dashed p-8 text-center transition-colors',
+            isDragActive
+              ? 'border-primary bg-primary/5'
+              : 'border-muted-foreground/25 hover:border-primary/50 hover:bg-muted/50'
+          )}
+          onClick={() => fileInputRef.current?.click()}
+          onDragEnter={handleDragEnter}
+          onDragLeave={handleDragLeave}
+          onDragOver={handleDragOver}
+          onDrop={handleDrop}
+        >
+          <div className="flex size-12 items-center justify-center rounded-full bg-muted">
+            <Upload className="size-6 text-muted-foreground" />
+          </div>
+          <div>
+            <p className="text-sm font-medium text-foreground">
+              {isDragActive ? 'Drop files here' : 'Drag and drop files here'}
+            </p>
+            <p className="mt-1 text-xs text-muted-foreground">or click to browse</p>
+          </div>
+          <p className="text-xs text-muted-foreground">
+            Supports images, videos, documents, and more
+            {maxFileSize && ` (max ${formatFileSize(maxFileSize)} per file)`}
+          </p>
+        </div>
+      )}
+
+      {queue.files.length > 0 && (
+        <div className="space-y-3">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2 text-sm">
+              <span className="font-medium">
+                {queue.files.length} file{queue.files.length !== 1 ? 's' : ''}
+              </span>
+              {queue.isUploading && (
+                <span className="text-muted-foreground">
+                  {queue.overallProgress}% complete
+                </span>
+              )}
+              {!queue.isUploading && hasCompletedOrFailed && (
+                <div className="flex items-center gap-2">
+                  {completedCount > 0 && (
+                    <span className="text-emerald-600">{completedCount} completed</span>
+                  )}
+                  {errorCount > 0 && (
+                    <span className="text-red-500">{errorCount} failed</span>
+                  )}
+                </div>
+              )}
+            </div>
+            <div className="flex items-center gap-2">
+              {!queue.isUploading && (
+                <CmsButton
+                  variant="outline"
+                  size="sm"
+                  onClick={() => fileInputRef.current?.click()}
+                >
+                  Add More
+                </CmsButton>
+              )}
+              {queue.isUploading && (
+                <CmsButton variant="outline" size="sm" onClick={queue.cancelAll}>
+                  Cancel All
+                </CmsButton>
+              )}
+              {hasCompletedOrFailed && !queue.isUploading && (
+                <CmsButton variant="ghost" size="sm" onClick={queue.clearCompleted}>
+                  Clear Done
+                </CmsButton>
+              )}
+            </div>
+          </div>
+
+          {queue.isUploading && (
+            <div className="h-1.5 overflow-hidden rounded-full bg-muted">
+              <div
+                className="h-full bg-primary transition-all duration-300"
+                style={{ width: `${queue.overallProgress}%` }}
+              />
+            </div>
+          )}
+
+          <div className="space-y-2">
+            {queue.files.map((uploadFile: UploadQueueFile) => (
+              <div
+                key={uploadFile.id}
+                className={cn(
+                  'flex items-center gap-3 rounded-lg border bg-card p-3',
+                  uploadFile.status === 'error' && 'border-red-200 bg-red-50 dark:border-red-900 dark:bg-red-950/20',
+                  uploadFile.status === 'complete' && 'border-emerald-200 bg-emerald-50 dark:border-emerald-900 dark:bg-emerald-950/20'
+                )}
+              >
+                <div className="shrink-0">{getStatusIcon(uploadFile.status)}</div>
+
+                <div className="min-w-0 flex-1">
+                  <p
+                    className="truncate text-sm font-medium"
+                    title={uploadFile.file.name}
+                  >
+                    {uploadFile.file.name}
+                  </p>
+                  <div className="flex items-center gap-2">
+                    <span className="text-xs text-muted-foreground">
+                      {formatFileSize(uploadFile.file.size)}
+                    </span>
+                    {uploadFile.error && (
+                      <span className="text-xs text-red-500">{uploadFile.error}</span>
+                    )}
+                  </div>
+                </div>
+
+                {uploadFile.status === 'uploading' && (
+                  <div className="flex w-20 items-center gap-2">
+                    <div className="h-1.5 flex-1 overflow-hidden rounded-full bg-muted">
+                      <div
+                        className="h-full bg-primary transition-all"
+                        style={{ width: `${uploadFile.progress}%` }}
+                      />
+                    </div>
+                    <span className="text-xs text-muted-foreground">
+                      {uploadFile.progress}%
+                    </span>
+                  </div>
+                )}
+
+                <div className="shrink-0">
+                  {uploadFile.status === 'pending' && !queue.isUploading && (
+                    <CmsButton
+                      variant="ghost"
+                      size="icon-sm"
+                      onClick={() => queue.cancelFile(uploadFile.id)}
+                      title="Remove"
+                    >
+                      <X className="size-4" />
+                    </CmsButton>
+                  )}
+                  {(uploadFile.status === 'uploading' || uploadFile.status === 'pending') &&
+                    queue.isUploading && (
+                      <CmsButton
+                        variant="ghost"
+                        size="icon-sm"
+                        onClick={() => queue.cancelFile(uploadFile.id)}
+                        title="Cancel"
+                      >
+                        <X className="size-4" />
+                      </CmsButton>
+                    )}
+                  {(uploadFile.status === 'error' || uploadFile.status === 'cancelled') &&
+                    !queue.isUploading && (
+                      <CmsButton
+                        variant="ghost"
+                        size="icon-sm"
+                        onClick={() => queue.retryFile(uploadFile.id)}
+                        title="Retry"
+                      >
+                        <RefreshCw className="size-4" />
+                      </CmsButton>
+                    )}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      <input
+        ref={fileInputRef}
+        type="file"
+        multiple
+        onChange={handleFileChange}
+        className="hidden"
+        accept={allowedMimeTypes.length > 0 ? allowedMimeTypes.join(',') : undefined}
+      />
+    </div>
+  )
+}

package/admin/src/components/VersionCompare.tsx

@@ -0,0 +1,250 @@
+import { useQuery } from 'convex/react'
+import { api } from '../../convex/_generated/api'
+import { CmsButton } from '~/components/cmsds/CmsButton'
+import { Badge } from '~/components/ui/badge'
+import { ScrollArea } from '~/components/ui/scroll-area'
+import { X, ArrowRight, Plus, Minus, RefreshCw, GitCompare } from 'lucide-react'
+import { cn } from '~/lib/cn'
+
+interface VersionCompareProps {
+  entryId: string
+  fromVersion: number
+  toVersion: number
+  onClose: () => void
+  onRollback: (version: number) => void
+}
+
+interface FieldDiff {
+  field: string
+  fromValue: unknown
+  toValue: unknown
+  changeType: 'added' | 'removed' | 'modified'
+}
+
+interface VersionInfo {
+  versionNumber: number
+  status: string
+  slug: string
+  wasPublished: boolean
+  createdAt: number
+}
+
+interface ComparisonResult {
+  hasChanges: boolean
+  fromVersion: VersionInfo
+  toVersion: VersionInfo
+  changedFields: string[]
+  fieldDiffs: FieldDiff[]
+  slugChanged: boolean
+  statusChanged: boolean
+  changeSummary: string
+}
+
+export function VersionCompare({
+  entryId,
+  fromVersion,
+  toVersion,
+  onClose,
+  onRollback,
+}: VersionCompareProps) {
+  const comparisonQuery = useQuery(api.versions.compare, {
+    entryId,
+    fromVersionNumber: fromVersion,
+    toVersionNumber: toVersion,
+  })
+
+  const isLoading = comparisonQuery === undefined
+  const comparison = comparisonQuery as ComparisonResult | null
+
+  const formatValue = (value: unknown): string => {
+    if (value === null || value === undefined) {
+      return '(empty)'
+    }
+    if (typeof value === 'object') {
+      return JSON.stringify(value, null, 2)
+    }
+    return String(value)
+  }
+
+  const getChangeIcon = (changeType: string) => {
+    switch (changeType) {
+      case 'added':
+        return <Plus className="size-3" />
+      case 'removed':
+        return <Minus className="size-3" />
+      case 'modified':
+        return <RefreshCw className="size-3" />
+      default:
+        return null
+    }
+  }
+
+  const getChangeStyles = (changeType: string) => {
+    switch (changeType) {
+      case 'added':
+        return 'border-emerald-200 bg-emerald-50'
+      case 'removed':
+        return 'border-red-200 bg-red-50'
+      case 'modified':
+        return 'border-amber-200 bg-amber-50'
+      default:
+        return 'border-border bg-card'
+    }
+  }
+
+  const getChangeIconStyles = (changeType: string) => {
+    switch (changeType) {
+      case 'added':
+        return 'bg-emerald-100 text-emerald-700'
+      case 'removed':
+        return 'bg-red-100 text-red-700'
+      case 'modified':
+        return 'bg-amber-100 text-amber-700'
+      default:
+        return 'bg-muted text-muted-foreground'
+    }
+  }
+
+  const formatDate = (timestamp: number) => {
+    return new Date(timestamp).toLocaleString(undefined, {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+    })
+  }
+
+  return (
+    <div className="flex h-full flex-col bg-background">
+      <div className="flex items-center justify-between border-b px-4 py-3">
+        <div className="flex items-center gap-2">
+          <GitCompare className="size-4 text-muted-foreground" />
+          <h3 className="font-semibold">
+            Comparing v{fromVersion} → v{toVersion}
+          </h3>
+        </div>
+        <button
+          type="button"
+          onClick={onClose}
+          className="rounded p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+          aria-label="Close comparison"
+        >
+          <X className="size-4" />
+        </button>
+      </div>
+
+      <ScrollArea className="min-h-0 flex-1">
+        <div className="p-4">
+          {isLoading ? (
+            <div className="flex flex-col items-center justify-center py-8">
+              <div className="size-6 animate-spin rounded-full border-2 border-muted border-t-primary" />
+              <p className="mt-2 text-sm text-muted-foreground">
+                Loading comparison...
+              </p>
+            </div>
+          ) : !comparison ? (
+            <div className="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800">
+              Could not load version comparison
+            </div>
+          ) : !comparison.hasChanges ? (
+            <div className="py-8 text-center">
+              <p className="text-sm text-muted-foreground">
+                No differences found between these versions
+              </p>
+            </div>
+          ) : (
+            <>
+              <div className="mb-4 flex items-center justify-center gap-3 rounded-lg border bg-muted/30 p-3">
+                <div className="text-center">
+                  <Badge variant="secondary" className="font-mono">
+                    v{comparison.fromVersion.versionNumber}
+                  </Badge>
+                  <p className="mt-1 text-xs text-muted-foreground">
+                    {formatDate(comparison.fromVersion.createdAt)}
+                  </p>
+                </div>
+                <ArrowRight className="size-4 text-muted-foreground" />
+                <div className="text-center">
+                  <Badge variant="secondary" className="font-mono">
+                    v{comparison.toVersion.versionNumber}
+                  </Badge>
+                  <p className="mt-1 text-xs text-muted-foreground">
+                    {formatDate(comparison.toVersion.createdAt)}
+                  </p>
+                </div>
+              </div>
+
+              {comparison.changeSummary && (
+                <p className="mb-4 text-sm text-muted-foreground">
+                  {comparison.changeSummary}
+                </p>
+              )}
+
+              <div className="space-y-3">
+                {comparison.fieldDiffs.map((change, index) => (
+                  <div
+                    key={index}
+                    className={cn(
+                      'rounded-lg border p-3',
+                      getChangeStyles(change.changeType)
+                    )}
+                  >
+                    <div className="flex items-center gap-2">
+                      <span
+                        className={cn(
+                          'flex size-5 items-center justify-center rounded',
+                          getChangeIconStyles(change.changeType)
+                        )}
+                      >
+                        {getChangeIcon(change.changeType)}
+                      </span>
+                      <span className="font-medium text-foreground">
+                        {change.field}
+                      </span>
+                      <Badge variant="outline" className="text-xs capitalize">
+                        {change.changeType}
+                      </Badge>
+                    </div>
+
+                    <div className="mt-2 space-y-2">
+                      {change.changeType !== 'added' && (
+                        <div className="rounded border border-red-200 bg-white p-2">
+                          <p className="mb-1 text-xs font-medium text-red-700">
+                            Before:
+                          </p>
+                          <pre className="overflow-x-auto whitespace-pre-wrap break-words font-mono text-xs text-red-900">
+                            {formatValue(change.fromValue)}
+                          </pre>
+                        </div>
+                      )}
+                      {change.changeType !== 'removed' && (
+                        <div className="rounded border border-emerald-200 bg-white p-2">
+                          <p className="mb-1 text-xs font-medium text-emerald-700">
+                            After:
+                          </p>
+                          <pre className="overflow-x-auto whitespace-pre-wrap break-words font-mono text-xs text-emerald-900">
+                            {formatValue(change.toValue)}
+                          </pre>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </>
+          )}
+        </div>
+      </ScrollArea>
+
+      <div className="flex items-center justify-between border-t px-4 py-3">
+        <CmsButton variant="outline" onClick={onClose}>
+          Back to History
+        </CmsButton>
+        <CmsButton variant="ghost" onClick={() => onRollback(fromVersion)}>
+          Rollback to v{fromVersion}
+        </CmsButton>
+      </div>
+    </div>
+  )
+}