@fnd-platform/cms 1.0.0-alpha.1

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

@@ -0,0 +1,274 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.getMediaApiTemplate = getMediaApiTemplate;
+/**
+ * Generates the media API client template.
+ *
+ * This template provides client-side helpers for:
+ * - Requesting presigned URLs
+ * - Uploading files directly to S3
+ * - Creating media records
+ * - Listing and deleting media
+ *
+ * @returns Template string for app/lib/media-api.ts
+ */
+function getMediaApiTemplate() {
+  return `/**
+ * Media API client for presigned URL uploads.
+ *
+ * This module handles the upload flow:
+ * 1. Request presigned URL from API
+ * 2. Upload file directly to S3
+ * 3. Create media record in API
+ */
+
+export interface MediaItem {
+  id: string;
+  key: string;
+  filename: string;
+  mimeType: string;
+  size: number;
+  url: string;
+  uploadedAt: string;
+}
+
+export interface UploadProgress {
+  loaded: number;
+  total: number;
+  percentage: number;
+}
+
+export interface UploadOptions {
+  onProgress?: (progress: UploadProgress) => void;
+  signal?: AbortSignal;
+}
+
+/**
+ * Allowed media MIME types.
+ */
+export const ALLOWED_MIME_TYPES = [
+  'image/jpeg',
+  'image/png',
+  'image/gif',
+  'image/webp',
+  'image/svg+xml',
+  'application/pdf',
+  'video/mp4',
+  'video/webm',
+  'audio/mpeg',
+  'audio/wav',
+  'audio/ogg',
+] as const;
+
+export type AllowedMimeType = typeof ALLOWED_MIME_TYPES[number];
+
+/**
+ * Validates if a MIME type is allowed.
+ */
+export function isAllowedMimeType(mimeType: string): mimeType is AllowedMimeType {
+  return ALLOWED_MIME_TYPES.includes(mimeType as AllowedMimeType);
+}
+
+/**
+ * Gets the media type category from a MIME type.
+ */
+export function getMediaType(mimeType: string): 'image' | 'video' | 'audio' | 'document' | 'unknown' {
+  if (mimeType.startsWith('image/')) return 'image';
+  if (mimeType.startsWith('video/')) return 'video';
+  if (mimeType.startsWith('audio/')) return 'audio';
+  if (mimeType === 'application/pdf') return 'document';
+  return 'unknown';
+}
+
+/**
+ * Request a presigned URL for file upload.
+ */
+export async function getUploadUrl(file: File): Promise<{
+  uploadUrl: string;
+  key: string;
+  id: string;
+  expiresIn: number;
+}> {
+  const response = await fetch('/api/media/upload-url', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      filename: file.name,
+      contentType: file.type,
+      size: file.size,
+    }),
+  });
+
+  if (!response.ok) {
+    const error = await response.json();
+    throw new Error(error.error?.message || 'Failed to get upload URL');
+  }
+
+  const result = await response.json();
+  return result.data;
+}
+
+/**
+ * Upload a file directly to S3 using a presigned URL.
+ * Uses XMLHttpRequest for progress tracking.
+ */
+export function uploadToS3(
+  file: File,
+  uploadUrl: string,
+  options: UploadOptions = {}
+): Promise<void> {
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+
+    // Handle abort signal
+    if (options.signal) {
+      options.signal.addEventListener('abort', () => {
+        xhr.abort();
+        reject(new DOMException('Upload aborted', 'AbortError'));
+      });
+    }
+
+    // Progress tracking
+    xhr.upload.onprogress = (event) => {
+      if (event.lengthComputable && options.onProgress) {
+        options.onProgress({
+          loaded: event.loaded,
+          total: event.total,
+          percentage: Math.round((event.loaded / event.total) * 100),
+        });
+      }
+    };
+
+    xhr.onload = () => {
+      if (xhr.status >= 200 && xhr.status < 300) {
+        resolve();
+      } else {
+        reject(new Error(\`Upload failed with status \${xhr.status}\`));
+      }
+    };
+
+    xhr.onerror = () => {
+      reject(new Error('Upload failed'));
+    };
+
+    xhr.open('PUT', uploadUrl);
+    xhr.setRequestHeader('Content-Type', file.type);
+    xhr.send(file);
+  });
+}
+
+/**
+ * Create a media record after successful S3 upload.
+ */
+export async function createMediaRecord(params: {
+  id: string;
+  key: string;
+  filename: string;
+  mimeType: string;
+  size: number;
+}): Promise<MediaItem> {
+  const response = await fetch('/api/media', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(params),
+  });
+
+  if (!response.ok) {
+    const error = await response.json();
+    throw new Error(error.error?.message || 'Failed to create media record');
+  }
+
+  const result = await response.json();
+  return result.data;
+}
+
+/**
+ * Upload a file with the complete presigned URL flow.
+ */
+export async function uploadFile(
+  file: File,
+  options: UploadOptions = {}
+): Promise<MediaItem> {
+  // Validate file type
+  if (!isAllowedMimeType(file.type)) {
+    throw new Error(\`File type \${file.type} is not allowed\`);
+  }
+
+  // Step 1: Get presigned URL
+  const { uploadUrl, key, id } = await getUploadUrl(file);
+
+  // Step 2: Upload to S3
+  await uploadToS3(file, uploadUrl, options);
+
+  // Step 3: Create media record
+  const media = await createMediaRecord({
+    id,
+    key,
+    filename: file.name,
+    mimeType: file.type,
+    size: file.size,
+  });
+
+  return media;
+}
+
+/**
+ * List media items with optional filtering.
+ */
+export async function listMedia(params: {
+  limit?: number;
+  cursor?: string;
+  type?: 'image' | 'video' | 'audio' | 'document';
+} = {}): Promise<{
+  items: MediaItem[];
+  nextCursor?: string;
+  total?: number;
+}> {
+  const searchParams = new URLSearchParams();
+  if (params.limit) searchParams.set('limit', params.limit.toString());
+  if (params.cursor) searchParams.set('cursor', params.cursor);
+  if (params.type) searchParams.set('type', params.type);
+
+  const url = \`/api/media?\${searchParams.toString()}\`;
+  const response = await fetch(url);
+
+  if (!response.ok) {
+    const error = await response.json();
+    throw new Error(error.error?.message || 'Failed to list media');
+  }
+
+  const result = await response.json();
+  return result.data;
+}
+
+/**
+ * Delete a media item.
+ */
+export async function deleteMedia(id: string): Promise<void> {
+  const response = await fetch(\`/api/media/\${id}\`, {
+    method: 'DELETE',
+  });
+
+  if (!response.ok) {
+    const error = await response.json();
+    throw new Error(error.error?.message || 'Failed to delete media');
+  }
+}
+
+/**
+ * Format file size for display.
+ */
+export function formatFileSize(bytes: number): string {
+  if (bytes === 0) return '0 Bytes';
+  const k = 1024;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+}
+`;
+}
+//# sourceMappingURL=media-api.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"media-api.js","sourceRoot":"","sources":["../../../src/templates/media/media-api.ts"],"names":[],"mappings":";;AAWA,kDAkQC;AA7QD;;;;;;;;;;GAUG;AACH,SAAgB,mBAAmB;IACjC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgQR,CAAC;AACF,CAAC"}

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

@@ -0,0 +1,14 @@
+/**
+ * Generates the media grid component template.
+ *
+ * This component provides:
+ * - Grid display of media items
+ * - Selection support (single/multiple)
+ * - Type filtering
+ * - Pagination
+ * - Delete functionality
+ *
+ * @returns Template string for app/components/media/media-grid.tsx
+ */
+export declare function getMediaGridTemplate(): string;
+//# sourceMappingURL=media-grid.d.ts.map

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

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

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

@@ -0,0 +1,314 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.getMediaGridTemplate = getMediaGridTemplate;
+/**
+ * Generates the media grid component template.
+ *
+ * This component provides:
+ * - Grid display of media items
+ * - Selection support (single/multiple)
+ * - Type filtering
+ * - Pagination
+ * - Delete functionality
+ *
+ * @returns Template string for app/components/media/media-grid.tsx
+ */
+function getMediaGridTemplate() {
+  return `import { useState, useEffect, useCallback } from 'react';
+import {
+  Image,
+  FileVideo,
+  FileAudio,
+  File,
+  Trash2,
+  Check,
+  Loader2,
+  ChevronLeft,
+  ChevronRight,
+} from 'lucide-react';
+import { cn } from '~/lib/utils';
+import { Button } from '~/components/ui/button';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '~/components/ui/select';
+import {
+  listMedia,
+  deleteMedia,
+  getMediaType,
+  formatFileSize,
+  type MediaItem,
+} from '~/lib/media-api';
+
+interface MediaGridProps {
+  onSelect?: (media: MediaItem) => void;
+  onSelectionChange?: (media: MediaItem[]) => void;
+  selectedIds?: string[];
+  multiple?: boolean;
+  accept?: string[];
+  className?: string;
+}
+
+/**
+ * Get icon for file type.
+ */
+function getMediaIcon(mimeType: string) {
+  const type = getMediaType(mimeType);
+  switch (type) {
+    case 'image':
+      return <Image className="h-8 w-8 text-muted-foreground" />;
+    case 'video':
+      return <FileVideo className="h-8 w-8 text-muted-foreground" />;
+    case 'audio':
+      return <FileAudio className="h-8 w-8 text-muted-foreground" />;
+    default:
+      return <File className="h-8 w-8 text-muted-foreground" />;
+  }
+}
+
+/**
+ * Check if media item is an image.
+ */
+function isImage(mimeType: string): boolean {
+  return mimeType.startsWith('image/') && mimeType !== 'image/svg+xml';
+}
+
+export function MediaGrid({
+  onSelect,
+  onSelectionChange,
+  selectedIds = [],
+  multiple = false,
+  accept,
+  className,
+}: MediaGridProps) {
+  const [media, setMedia] = useState<MediaItem[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [typeFilter, setTypeFilter] = useState<string>('all');
+  const [cursor, setCursor] = useState<string | undefined>();
+  const [hasMore, setHasMore] = useState(false);
+  const [deleting, setDeleting] = useState<string | null>(null);
+
+  const loadMedia = useCallback(async (reset = false) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const type = typeFilter !== 'all' ? typeFilter as 'image' | 'video' | 'audio' | 'document' : undefined;
+      const result = await listMedia({
+        limit: 20,
+        cursor: reset ? undefined : cursor,
+        type,
+      });
+
+      if (reset) {
+        setMedia(result.items);
+      } else {
+        setMedia((prev) => [...prev, ...result.items]);
+      }
+      setCursor(result.nextCursor);
+      setHasMore(!!result.nextCursor);
+    } catch (err) {
+      setError((err as Error).message);
+    } finally {
+      setLoading(false);
+    }
+  }, [typeFilter, cursor]);
+
+  useEffect(() => {
+    loadMedia(true);
+  }, [typeFilter]);
+
+  const handleSelect = (item: MediaItem) => {
+    // Check if item type is accepted
+    if (accept && accept.length > 0) {
+      const isAccepted = accept.some((acceptType) => {
+        if (acceptType.endsWith('/*')) {
+          return item.mimeType.startsWith(acceptType.replace('/*', '/'));
+        }
+        return item.mimeType === acceptType;
+      });
+      if (!isAccepted) return;
+    }
+
+    if (multiple) {
+      const isSelected = selectedIds.includes(item.id);
+      const newSelection = isSelected
+        ? selectedIds.filter((id) => id !== item.id)
+        : [...selectedIds, item.id];
+
+      const selectedItems = media.filter((m) => newSelection.includes(m.id));
+      onSelectionChange?.(selectedItems);
+    } else {
+      onSelect?.(item);
+    }
+  };
+
+  const handleDelete = async (item: MediaItem, e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (!confirm(\`Delete "\${item.filename}"?\`)) return;
+
+    setDeleting(item.id);
+    try {
+      await deleteMedia(item.id);
+      setMedia((prev) => prev.filter((m) => m.id !== item.id));
+    } catch (err) {
+      setError((err as Error).message);
+    } finally {
+      setDeleting(null);
+    }
+  };
+
+  const isSelected = (id: string) => selectedIds.includes(id);
+
+  const isAccepted = (mimeType: string) => {
+    if (!accept || accept.length === 0) return true;
+    return accept.some((acceptType) => {
+      if (acceptType.endsWith('/*')) {
+        return mimeType.startsWith(acceptType.replace('/*', '/'));
+      }
+      return mimeType === acceptType;
+    });
+  };
+
+  return (
+    <div className={cn('space-y-4', className)}>
+      {/* Filters */}
+      <div className="flex items-center gap-4">
+        <Select value={typeFilter} onValueChange={(v) => setTypeFilter(v)}>
+          <SelectTrigger className="w-[180px]">
+            <SelectValue placeholder="Filter by type" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">All Types</SelectItem>
+            <SelectItem value="image">Images</SelectItem>
+            <SelectItem value="video">Videos</SelectItem>
+            <SelectItem value="audio">Audio</SelectItem>
+            <SelectItem value="document">Documents</SelectItem>
+          </SelectContent>
+        </Select>
+
+        {selectedIds.length > 0 && (
+          <span className="text-sm text-muted-foreground">
+            {selectedIds.length} selected
+          </span>
+        )}
+      </div>
+
+      {/* Error message */}
+      {error && (
+        <div className="rounded-lg bg-destructive/10 p-4 text-sm text-destructive">
+          {error}
+        </div>
+      )}
+
+      {/* Loading state */}
+      {loading && media.length === 0 && (
+        <div className="flex items-center justify-center py-12">
+          <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+        </div>
+      )}
+
+      {/* Empty state */}
+      {!loading && media.length === 0 && (
+        <div className="flex flex-col items-center justify-center py-12 text-center">
+          <Image className="h-12 w-12 text-muted-foreground/50" />
+          <p className="mt-4 text-sm text-muted-foreground">
+            No media files found
+          </p>
+        </div>
+      )}
+
+      {/* Grid */}
+      {media.length > 0 && (
+        <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
+          {media.map((item) => {
+            const accepted = isAccepted(item.mimeType);
+            const selected = isSelected(item.id);
+
+            return (
+              <div
+                key={item.id}
+                onClick={() => accepted && handleSelect(item)}
+                className={cn(
+                  'group relative aspect-square cursor-pointer overflow-hidden rounded-lg border bg-muted transition-all',
+                  selected && 'ring-2 ring-primary ring-offset-2',
+                  !accepted && 'cursor-not-allowed opacity-50',
+                  accepted && 'hover:border-primary/50'
+                )}
+              >
+                {/* Preview */}
+                {isImage(item.mimeType) ? (
+                  <img
+                    src={item.url}
+                    alt={item.filename}
+                    className="h-full w-full object-cover"
+                  />
+                ) : (
+                  <div className="flex h-full w-full items-center justify-center">
+                    {getMediaIcon(item.mimeType)}
+                  </div>
+                )}
+
+                {/* Selection indicator */}
+                {selected && (
+                  <div className="absolute left-2 top-2 flex h-6 w-6 items-center justify-center rounded-full bg-primary text-primary-foreground">
+                    <Check className="h-4 w-4" />
+                  </div>
+                )}
+
+                {/* Hover overlay */}
+                <div className="absolute inset-0 flex flex-col justify-end bg-gradient-to-t from-black/60 to-transparent p-2 opacity-0 transition-opacity group-hover:opacity-100">
+                  <p className="truncate text-xs font-medium text-white">
+                    {item.filename}
+                  </p>
+                  <p className="text-xs text-white/70">
+                    {formatFileSize(item.size)}
+                  </p>
+                </div>
+
+                {/* Delete button */}
+                <button
+                  onClick={(e) => handleDelete(item, e)}
+                  className="absolute right-2 top-2 flex h-7 w-7 items-center justify-center rounded-full bg-destructive text-destructive-foreground opacity-0 transition-opacity hover:bg-destructive/90 group-hover:opacity-100"
+                  disabled={deleting === item.id}
+                >
+                  {deleting === item.id ? (
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                  ) : (
+                    <Trash2 className="h-4 w-4" />
+                  )}
+                </button>
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {/* Load more */}
+      {hasMore && (
+        <div className="flex justify-center pt-4">
+          <Button
+            variant="outline"
+            onClick={() => loadMedia(false)}
+            disabled={loading}
+          >
+            {loading ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                Loading...
+              </>
+            ) : (
+              'Load More'
+            )}
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}
+`;
+}
+//# sourceMappingURL=media-grid.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"media-grid.js","sourceRoot":"","sources":["../../../src/templates/media/media-grid.ts"],"names":[],"mappings":";;AAYA,oDAySC;AArTD;;;;;;;;;;;GAWG;AACH,SAAgB,oBAAoB;IAClC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuSR,CAAC;AACF,CAAC"}

package/lib/templates/media/media-library-route.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 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
+ */
+export declare function getMediaLibraryRouteTemplate(): string;
+//# sourceMappingURL=media-library-route.d.ts.map

package/lib/templates/media/media-library-route.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-library-route.d.ts","sourceRoot":"","sources":["../../../src/templates/media/media-library-route.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,wBAAgB,4BAA4B,IAAI,MAAM,CAyFrD"}