@fnd-platform/cms 1.0.0-alpha.1

package/lib/templates/media/media-library-route.js

@@ -0,0 +1,105 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.getMediaLibraryRouteTemplate = getMediaLibraryRouteTemplate;
+/**
+ * Generates the media library route template.
+ *
+ * This is the main media library page in the admin interface.
+ * It provides:
+ * - Full media upload functionality
+ * - Grid view of all media
+ * - Filtering and pagination
+ *
+ * @returns Template string for app/routes/_admin.media.tsx
+ */
+function getMediaLibraryRouteTemplate() {
+  return `import type { MetaFunction, LoaderFunctionArgs } from '@remix-run/node';
+import { json } from '@remix-run/node';
+import { useLoaderData, useOutletContext } from '@remix-run/react';
+import { requireAuth, hasAnyRole } from '~/lib/auth.server';
+import { Breadcrumbs } from '~/components/admin/breadcrumbs';
+import { MediaUploader } from '~/components/media/media-uploader';
+import { MediaGrid } from '~/components/media/media-grid';
+import type { MediaItem } from '~/lib/media-api';
+import { useState, useCallback } from 'react';
+
+export const meta: MetaFunction = () => {
+  return [
+    { title: 'Media Library - CMS Admin' },
+    { name: 'description', content: 'Manage media files in the CMS' },
+  ];
+};
+
+export async function loader({ request }: LoaderFunctionArgs) {
+  const user = await requireAuth(request);
+
+  // Check if user has admin or editor role
+  if (!hasAnyRole(user, ['admin', 'editor'])) {
+    throw new Response('Forbidden', { status: 403 });
+  }
+
+  return json({ user });
+}
+
+interface AdminContext {
+  user: { email: string };
+  isAdmin: boolean;
+  isEditor: boolean;
+}
+
+export default function MediaLibraryPage() {
+  const { user } = useLoaderData<typeof loader>();
+  const context = useOutletContext<AdminContext>();
+  const [refreshKey, setRefreshKey] = useState(0);
+
+  const handleUploadComplete = useCallback((media: MediaItem) => {
+    // Refresh the grid by updating the key
+    setRefreshKey((k) => k + 1);
+  }, []);
+
+  const handleSelect = (media: MediaItem) => {
+    // Could open a detail modal or copy URL to clipboard
+    navigator.clipboard?.writeText(media.url);
+  };
+
+  return (
+    <div className="space-y-6">
+      <Breadcrumbs
+        items={[
+          { label: 'Admin', href: '/admin' },
+          { label: 'Media Library' },
+        ]}
+      />
+
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-semibold">Media Library</h1>
+          <p className="text-sm text-muted-foreground">
+            Upload and manage media files
+          </p>
+        </div>
+      </div>
+
+      {/* Upload Section */}
+      <div className="rounded-lg border bg-card p-6">
+        <h2 className="mb-4 text-lg font-medium">Upload Files</h2>
+        <MediaUploader
+          onUploadComplete={handleUploadComplete}
+          multiple
+        />
+      </div>
+
+      {/* Media Grid */}
+      <div className="rounded-lg border bg-card p-6">
+        <h2 className="mb-4 text-lg font-medium">All Media</h2>
+        <MediaGrid
+          key={refreshKey}
+          onSelect={handleSelect}
+        />
+      </div>
+    </div>
+  );
+}
+`;
+}
+//# sourceMappingURL=media-library-route.js.map

package/lib/templates/media/media-library-route.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-library-route.js","sourceRoot":"","sources":["../../../src/templates/media/media-library-route.ts"],"names":[],"mappings":";;AAWA,oEAyFC;AApGD;;;;;;;;;;GAUG;AACH,SAAgB,4BAA4B;IAC1C,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuFR,CAAC;AACF,CAAC"}

package/lib/templates/media/media-picker.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Generates the media picker dialog component template.
+ *
+ * This component provides:
+ * - Dialog for selecting media
+ * - Upload and browse tabs
+ * - Single/multiple selection
+ * - Type filtering based on field config
+ *
+ * @returns Template string for app/components/media/media-picker.tsx
+ */
+export declare function getMediaPickerTemplate(): string;
+//# sourceMappingURL=media-picker.d.ts.map

package/lib/templates/media/media-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-picker.d.ts","sourceRoot":"","sources":["../../../src/templates/media/media-picker.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,wBAAgB,sBAAsB,IAAI,MAAM,CAwI/C"}

package/lib/templates/media/media-picker.js

@@ -0,0 +1,152 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.getMediaPickerTemplate = getMediaPickerTemplate;
+/**
+ * Generates the media picker dialog component template.
+ *
+ * This component provides:
+ * - Dialog for selecting media
+ * - Upload and browse tabs
+ * - Single/multiple selection
+ * - Type filtering based on field config
+ *
+ * @returns Template string for app/components/media/media-picker.tsx
+ */
+function getMediaPickerTemplate() {
+  return `import { useState, useCallback } from 'react';
+import { Upload, FolderOpen } from 'lucide-react';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '~/components/ui/dialog';
+import { Button } from '~/components/ui/button';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '~/components/ui/tabs';
+import { MediaUploader } from './media-uploader';
+import { MediaGrid } from './media-grid';
+import type { MediaItem } from '~/lib/media-api';
+
+interface MediaPickerProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSelect: (media: MediaItem | MediaItem[]) => void;
+  value?: string | string[];
+  multiple?: boolean;
+  accept?: string[];
+  title?: string;
+}
+
+export function MediaPicker({
+  open,
+  onOpenChange,
+  onSelect,
+  value,
+  multiple = false,
+  accept,
+  title = 'Select Media',
+}: MediaPickerProps) {
+  const [activeTab, setActiveTab] = useState<'browse' | 'upload'>('browse');
+  const [selectedIds, setSelectedIds] = useState<string[]>(() => {
+    if (!value) return [];
+    return Array.isArray(value) ? value : [value];
+  });
+  const [selectedMedia, setSelectedMedia] = useState<MediaItem[]>([]);
+
+  const handleUploadComplete = useCallback((media: MediaItem) => {
+    if (multiple) {
+      setSelectedMedia((prev) => [...prev, media]);
+      setSelectedIds((prev) => [...prev, media.id]);
+    } else {
+      // For single selection, select and close
+      onSelect(media);
+      onOpenChange(false);
+    }
+  }, [multiple, onSelect, onOpenChange]);
+
+  const handleSelect = useCallback((media: MediaItem) => {
+    // For single selection from grid
+    onSelect(media);
+    onOpenChange(false);
+  }, [onSelect, onOpenChange]);
+
+  const handleSelectionChange = useCallback((media: MediaItem[]) => {
+    setSelectedMedia(media);
+    setSelectedIds(media.map((m) => m.id));
+  }, []);
+
+  const handleConfirm = () => {
+    if (multiple) {
+      onSelect(selectedMedia);
+    }
+    onOpenChange(false);
+  };
+
+  const handleCancel = () => {
+    setSelectedIds(Array.isArray(value) ? value : value ? [value] : []);
+    setSelectedMedia([]);
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-4xl max-h-[80vh] flex flex-col">
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+        </DialogHeader>
+
+        <Tabs
+          value={activeTab}
+          onValueChange={(v) => setActiveTab(v as 'browse' | 'upload')}
+          className="flex-1 flex flex-col min-h-0"
+        >
+          <TabsList className="grid w-full grid-cols-2">
+            <TabsTrigger value="browse" className="flex items-center gap-2">
+              <FolderOpen className="h-4 w-4" />
+              Browse Library
+            </TabsTrigger>
+            <TabsTrigger value="upload" className="flex items-center gap-2">
+              <Upload className="h-4 w-4" />
+              Upload New
+            </TabsTrigger>
+          </TabsList>
+
+          <div className="flex-1 overflow-y-auto min-h-0 py-4">
+            <TabsContent value="browse" className="mt-0 h-full">
+              <MediaGrid
+                onSelect={multiple ? undefined : handleSelect}
+                onSelectionChange={multiple ? handleSelectionChange : undefined}
+                selectedIds={selectedIds}
+                multiple={multiple}
+                accept={accept}
+              />
+            </TabsContent>
+
+            <TabsContent value="upload" className="mt-0">
+              <MediaUploader
+                onUploadComplete={handleUploadComplete}
+                accept={accept}
+                multiple={multiple}
+              />
+            </TabsContent>
+          </div>
+        </Tabs>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={handleCancel}>
+            Cancel
+          </Button>
+          {multiple && (
+            <Button onClick={handleConfirm} disabled={selectedIds.length === 0}>
+              Select {selectedIds.length > 0 ? \`(\${selectedIds.length})\` : ''}
+            </Button>
+          )}
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+`;
+}
+//# sourceMappingURL=media-picker.js.map

package/lib/templates/media/media-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-picker.js","sourceRoot":"","sources":["../../../src/templates/media/media-picker.ts"],"names":[],"mappings":";;AAWA,wDAwIC;AAnJD;;;;;;;;;;GAUG;AACH,SAAgB,sBAAsB;IACpC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsIR,CAAC;AACF,CAAC"}

package/lib/templates/media/media-uploader.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Generates the media uploader component template.
+ *
+ * This component provides:
+ * - Drag and drop file upload
+ * - Click to select files
+ * - Upload progress tracking
+ * - Multiple file support
+ * - File type validation
+ *
+ * @returns Template string for app/components/media/media-uploader.tsx
+ */
+export declare function getMediaUploaderTemplate(): string;
+//# sourceMappingURL=media-uploader.d.ts.map

package/lib/templates/media/media-uploader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-uploader.d.ts","sourceRoot":"","sources":["../../../src/templates/media/media-uploader.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,wBAAgB,wBAAwB,IAAI,MAAM,CA6SjD"}

package/lib/templates/media/media-uploader.js

@@ -0,0 +1,318 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.getMediaUploaderTemplate = getMediaUploaderTemplate;
+/**
+ * Generates the media uploader component template.
+ *
+ * This component provides:
+ * - Drag and drop file upload
+ * - Click to select files
+ * - Upload progress tracking
+ * - Multiple file support
+ * - File type validation
+ *
+ * @returns Template string for app/components/media/media-uploader.tsx
+ */
+function getMediaUploaderTemplate() {
+  return `import { useCallback, useState, useRef } from 'react';
+import { Upload, X, FileImage, FileVideo, FileAudio, File } from 'lucide-react';
+import { cn } from '~/lib/utils';
+import { Button } from '~/components/ui/button';
+import { Progress } from '~/components/ui/progress';
+import {
+  uploadFile,
+  isAllowedMimeType,
+  getMediaType,
+  formatFileSize,
+  type MediaItem,
+  type UploadProgress,
+} from '~/lib/media-api';
+
+interface UploadingFile {
+  id: string;
+  file: File;
+  progress: number;
+  status: 'uploading' | 'complete' | 'error';
+  error?: string;
+  abortController: AbortController;
+}
+
+interface MediaUploaderProps {
+  onUploadComplete?: (media: MediaItem) => void;
+  onUploadError?: (error: Error, file: File) => void;
+  accept?: string[];
+  maxSize?: number;
+  multiple?: boolean;
+  className?: string;
+}
+
+/**
+ * Get icon for file type.
+ */
+function getFileIcon(mimeType: string) {
+  const type = getMediaType(mimeType);
+  switch (type) {
+    case 'image':
+      return <FileImage className="h-8 w-8 text-blue-500" />;
+    case 'video':
+      return <FileVideo className="h-8 w-8 text-purple-500" />;
+    case 'audio':
+      return <FileAudio className="h-8 w-8 text-green-500" />;
+    default:
+      return <File className="h-8 w-8 text-gray-500" />;
+  }
+}
+
+export function MediaUploader({
+  onUploadComplete,
+  onUploadError,
+  accept,
+  maxSize = 52428800, // 50MB default
+  multiple = true,
+  className,
+}: MediaUploaderProps) {
+  const [isDragging, setIsDragging] = useState(false);
+  const [uploadingFiles, setUploadingFiles] = useState<UploadingFile[]>([]);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleFiles = useCallback(
+    async (files: FileList | File[]) => {
+      const fileArray = Array.from(files);
+
+      for (const file of fileArray) {
+        // Validate file type
+        if (!isAllowedMimeType(file.type)) {
+          onUploadError?.(new Error(\`File type \${file.type} is not allowed\`), file);
+          continue;
+        }
+
+        // Validate file size
+        if (file.size > maxSize) {
+          onUploadError?.(
+            new Error(\`File size exceeds maximum of \${formatFileSize(maxSize)}\`),
+            file
+          );
+          continue;
+        }
+
+        // Check accept filter
+        if (accept && accept.length > 0) {
+          const isAccepted = accept.some((acceptType) => {
+            if (acceptType.endsWith('/*')) {
+              return file.type.startsWith(acceptType.replace('/*', '/'));
+            }
+            return file.type === acceptType;
+          });
+          if (!isAccepted) {
+            onUploadError?.(new Error(\`File type \${file.type} is not accepted\`), file);
+            continue;
+          }
+        }
+
+        // Create upload entry
+        const uploadId = \`\${Date.now()}-\${Math.random().toString(36).substr(2, 9)}\`;
+        const abortController = new AbortController();
+
+        setUploadingFiles((prev) => [
+          ...prev,
+          {
+            id: uploadId,
+            file,
+            progress: 0,
+            status: 'uploading',
+            abortController,
+          },
+        ]);
+
+        try {
+          const media = await uploadFile(file, {
+            signal: abortController.signal,
+            onProgress: (progress: UploadProgress) => {
+              setUploadingFiles((prev) =>
+                prev.map((f) =>
+                  f.id === uploadId ? { ...f, progress: progress.percentage } : f
+                )
+              );
+            },
+          });
+
+          setUploadingFiles((prev) =>
+            prev.map((f) =>
+              f.id === uploadId ? { ...f, status: 'complete', progress: 100 } : f
+            )
+          );
+
+          onUploadComplete?.(media);
+
+          // Remove completed file after delay
+          setTimeout(() => {
+            setUploadingFiles((prev) => prev.filter((f) => f.id !== uploadId));
+          }, 2000);
+        } catch (error) {
+          if (error instanceof Error && error.name === 'AbortError') {
+            // Upload was cancelled
+            setUploadingFiles((prev) => prev.filter((f) => f.id !== uploadId));
+          } else {
+            setUploadingFiles((prev) =>
+              prev.map((f) =>
+                f.id === uploadId
+                  ? { ...f, status: 'error', error: (error as Error).message }
+                  : f
+              )
+            );
+            onUploadError?.(error as Error, file);
+          }
+        }
+      }
+    },
+    [accept, maxSize, onUploadComplete, onUploadError]
+  );
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(true);
+  }, []);
+
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+  }, []);
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDragging(false);
+
+      const files = e.dataTransfer.files;
+      if (files.length > 0) {
+        handleFiles(multiple ? files : [files[0]]);
+      }
+    },
+    [handleFiles, multiple]
+  );
+
+  const handleInputChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const files = e.target.files;
+      if (files && files.length > 0) {
+        handleFiles(files);
+      }
+      // Reset input
+      e.target.value = '';
+    },
+    [handleFiles]
+  );
+
+  const handleClick = () => {
+    inputRef.current?.click();
+  };
+
+  const cancelUpload = (uploadId: string) => {
+    const upload = uploadingFiles.find((f) => f.id === uploadId);
+    if (upload) {
+      upload.abortController.abort();
+    }
+  };
+
+  const removeFile = (uploadId: string) => {
+    setUploadingFiles((prev) => prev.filter((f) => f.id !== uploadId));
+  };
+
+  return (
+    <div className={cn('space-y-4', className)}>
+      {/* Drop zone */}
+      <div
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+        onClick={handleClick}
+        className={cn(
+          'relative flex min-h-[200px] cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed p-6 transition-colors',
+          isDragging
+            ? 'border-primary bg-primary/5'
+            : 'border-muted-foreground/25 hover:border-primary/50 hover:bg-muted/50'
+        )}
+      >
+        <input
+          ref={inputRef}
+          type="file"
+          accept={accept?.join(',')}
+          multiple={multiple}
+          onChange={handleInputChange}
+          className="hidden"
+        />
+
+        <div className="flex flex-col items-center gap-2 text-center">
+          <div className="rounded-full bg-muted p-4">
+            <Upload className="h-8 w-8 text-muted-foreground" />
+          </div>
+          <div className="space-y-1">
+            <p className="text-sm font-medium">
+              Drop files here or click to upload
+            </p>
+            <p className="text-xs text-muted-foreground">
+              {accept?.join(', ') || 'Images, videos, audio, and PDFs'}
+            </p>
+            <p className="text-xs text-muted-foreground">
+              Max size: {formatFileSize(maxSize)}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Upload progress list */}
+      {uploadingFiles.length > 0 && (
+        <div className="space-y-2">
+          {uploadingFiles.map((upload) => (
+            <div
+              key={upload.id}
+              className={cn(
+                'flex items-center gap-3 rounded-lg border p-3',
+                upload.status === 'error' && 'border-destructive bg-destructive/5',
+                upload.status === 'complete' && 'border-green-500 bg-green-50'
+              )}
+            >
+              {getFileIcon(upload.file.type)}
+              <div className="flex-1 min-w-0">
+                <p className="truncate text-sm font-medium">{upload.file.name}</p>
+                <p className="text-xs text-muted-foreground">
+                  {formatFileSize(upload.file.size)}
+                </p>
+                {upload.status === 'uploading' && (
+                  <Progress value={upload.progress} className="mt-2 h-1" />
+                )}
+                {upload.status === 'error' && (
+                  <p className="text-xs text-destructive mt-1">{upload.error}</p>
+                )}
+                {upload.status === 'complete' && (
+                  <p className="text-xs text-green-600 mt-1">Upload complete</p>
+                )}
+              </div>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8 shrink-0"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  if (upload.status === 'uploading') {
+                    cancelUpload(upload.id);
+                  } else {
+                    removeFile(upload.id);
+                  }
+                }}
+              >
+                <X className="h-4 w-4" />
+              </Button>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+`;
+}
+//# sourceMappingURL=media-uploader.js.map

package/lib/templates/media/media-uploader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-uploader.js","sourceRoot":"","sources":["../../../src/templates/media/media-uploader.ts"],"names":[],"mappings":";;AAYA,4DA6SC;AAzTD;;;;;;;;;;;GAWG;AACH,SAAgB,wBAAwB;IACtC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2SR,CAAC;AACF,CAAC"}

package/lib/templates/recent-content.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Generates the recent content component template.
+ *
+ * This component displays:
+ * - List of recently updated content items
+ * - Status badges
+ * - Content type labels
+ * - Time since last update
+ *
+ * @returns Template string for app/components/admin/recent-content.tsx
+ */
+export declare function getRecentContentTemplate(): string;
+//# sourceMappingURL=recent-content.d.ts.map

package/lib/templates/recent-content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"recent-content.d.ts","sourceRoot":"","sources":["../../src/templates/recent-content.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,wBAAgB,wBAAwB,IAAI,MAAM,CA0HjD"}