@digiko-npm/cms 0.1.0 → 0.2.0

package/src/media/MediaUploader.tsx

@@ -0,0 +1,198 @@
+'use client'
+
+import { useState, useCallback, useRef } from 'react'
+import { Upload, X, Image as ImageIcon, Film } from 'lucide-react'
+import { uploadFile } from '../r2/upload'
+import type { UploadConfig } from '../types/config'
+
+export interface MediaUploaderProps {
+  /** Current media URL (shows preview when set) */
+  value?: string
+  /** Upload config with API endpoint paths */
+  uploadConfig: UploadConfig
+  /** Storage folder (e.g. 'media', 'shots', 'projects'). Default: 'media' */
+  folder?: string
+  /** Comma-separated MIME types to accept. Default: all image + video types */
+  accept?: string
+  /** Called after successful upload with public URL and media record ID */
+  onUpload: (url: string, mediaId: string) => void
+  /** Called when the user removes the current media */
+  onRemove?: () => void
+  /** Additional CSS class name */
+  className?: string
+}
+
+const ACCEPTED_TYPES = {
+  image: ['image/jpeg', 'image/png', 'image/webp', 'image/gif'],
+  video: ['video/mp4', 'video/webm'],
+}
+
+const ALL_ACCEPTED = [...ACCEPTED_TYPES.image, ...ACCEPTED_TYPES.video]
+
+export function MediaUploader({
+  value,
+  uploadConfig,
+  folder = 'media',
+  accept,
+  onUpload,
+  onRemove,
+  className,
+}: MediaUploaderProps) {
+  const [isDragging, setIsDragging] = useState(false)
+  const [isUploading, setIsUploading] = useState(false)
+  const [progress, setProgress] = useState(0)
+  const [error, setError] = useState<string | null>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const acceptedTypes = accept
+    ? accept.split(',').map((t) => t.trim())
+    : ALL_ACCEPTED
+
+  const handleFile = useCallback(
+    async (file: File) => {
+      if (!acceptedTypes.includes(file.type)) {
+        setError(`File type not supported: ${file.type}`)
+        return
+      }
+
+      setError(null)
+      setIsUploading(true)
+      setProgress(0)
+
+      try {
+        const result = await uploadFile(uploadConfig, {
+          file,
+          folder,
+          onProgress: setProgress,
+        })
+        onUpload(result.url, result.media.id)
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Upload failed')
+      } finally {
+        setIsUploading(false)
+        setProgress(0)
+      }
+    },
+    [acceptedTypes, folder, onUpload, uploadConfig]
+  )
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault()
+      setIsDragging(false)
+      const file = e.dataTransfer.files[0]
+      if (file) handleFile(file)
+    },
+    [handleFile]
+  )
+
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const file = e.target.files?.[0]
+      if (file) handleFile(file)
+    },
+    [handleFile]
+  )
+
+  const isImage = value?.match(/\.(jpg|jpeg|png|webp|gif)(\?|$)/i)
+  const isVideo = value?.match(/\.(mp4|webm)(\?|$)/i)
+
+  const cls = ['media-preview', className].filter(Boolean).join(' ')
+  const dropCls = [
+    'drop-zone',
+    isDragging && 'drop-zone--active',
+    isUploading && 'drop-zone--uploading',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ')
+
+  if (value) {
+    return (
+      <div className={cls}>
+        {isImage && (
+          <div className="ds-relative ds-w-full" style={{ height: '12rem' }}>
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              src={value}
+              alt="Uploaded"
+              className="ds-h-full ds-w-full ds-object-cover"
+            />
+          </div>
+        )}
+        {isVideo && (
+          <video
+            src={value}
+            className="ds-w-full ds-object-cover"
+            style={{ height: '12rem' }}
+            muted
+          />
+        )}
+        {!isImage && !isVideo && (
+          <div
+            className="ds-flex ds-items-center ds-justify-center ds-bg-elevated ds-text-secondary"
+            style={{ height: '12rem' }}
+          >
+            <span className="ds-text-sm">{value.split('/').pop()}</span>
+          </div>
+        )}
+        {onRemove && (
+          <button onClick={onRemove} className="media-preview__remove" type="button">
+            <X size={14} className="ds-text-secondary" />
+          </button>
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <div
+      onDragOver={(e) => {
+        e.preventDefault()
+        setIsDragging(true)
+      }}
+      onDragLeave={() => setIsDragging(false)}
+      onDrop={handleDrop}
+      onClick={() => inputRef.current?.click()}
+      className={dropCls}
+    >
+      <input
+        ref={inputRef}
+        type="file"
+        accept={acceptedTypes.join(',')}
+        onChange={handleChange}
+        className="ds-hidden"
+      />
+
+      {isUploading ? (
+        <>
+          <div className="progress-bar">
+            <div
+              className="progress-bar__fill"
+              style={{ width: `${progress}%` }}
+            />
+          </div>
+          <span className="ds-text-sm ds-text-secondary">{progress}%</span>
+        </>
+      ) : (
+        <>
+          <div className="ds-flex ds-gap-2 ds-text-tertiary">
+            <ImageIcon size={20} />
+            <Film size={20} />
+            <Upload size={20} />
+          </div>
+          <div className="ds-text-center">
+            <p className="ds-text-sm ds-font-medium ds-text-secondary">
+              Drop a file or click to upload
+            </p>
+            <p className="ds-mt-1 ds-text-xs ds-text-tertiary">
+              JPG, PNG, WebP, GIF, MP4, WebM
+            </p>
+          </div>
+        </>
+      )}
+
+      {error && <p className="ds-text-xs ds-text-error">{error}</p>}
+    </div>
+  )
+}

package/src/media/index.ts

@@ -0,0 +1,2 @@
+export { MediaUploader, type MediaUploaderProps } from './MediaUploader'
+export { MediaPicker, type MediaPickerProps } from './MediaPicker'

package/src/r2/index.ts

@@ -1,2 +1,10 @@
 export { createR2Client, getR2Bucket, getR2PublicUrl } from './client'
 export { uploadFile, type UploadOptions, type UploadResult } from './upload'
+export { createPresignedUploadUrl, type PresignOptions, type PresignResult } from './presign'
+export {
+  listMedia,
+  insertMedia,
+  deleteMedia,
+  type MediaListOptions,
+  type MediaListResult,
+} from './media-crud'

package/src/r2/media-crud.ts

@@ -0,0 +1,157 @@
+import { DeleteObjectCommand } from '@aws-sdk/client-s3'
+import type { SupabaseClient } from '@supabase/supabase-js'
+import type { R2Config } from '../types/config'
+import type { MediaRecord, MediaInsert } from '../types/media'
+import { createR2Client } from './client'
+
+/* -------------------------------------------------------------------------- */
+/*  Types                                                                     */
+/* -------------------------------------------------------------------------- */
+
+export interface MediaListOptions {
+  /** 1-based page number. Default: 1 */
+  page?: number
+  /** Items per page. Default: 24 */
+  limit?: number
+  /** Filter by MIME type prefix: 'image' or 'video' */
+  type?: string
+  /** Search query (matches original_name and alt_text) */
+  search?: string
+}
+
+export interface MediaListResult {
+  items: MediaRecord[]
+  total: number
+  page: number
+  limit: number
+  totalPages: number
+}
+
+/* -------------------------------------------------------------------------- */
+/*  List                                                                      */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * List media records with pagination and filtering.
+ * Requires a Supabase admin client (service role) for full access.
+ */
+export async function listMedia(
+  supabase: SupabaseClient,
+  tableName: string,
+  options: MediaListOptions = {}
+): Promise<MediaListResult> {
+  const { page = 1, limit = 24, type, search } = options
+  const offset = (page - 1) * limit
+
+  let query = supabase
+    .from(tableName)
+    .select('*', { count: 'exact' })
+    .order('created_at', { ascending: false })
+    .range(offset, offset + limit - 1)
+
+  if (type) {
+    query = query.like('mime_type', `${type}/%`)
+  }
+
+  if (search) {
+    query = query.or(`original_name.ilike.%${search}%,alt_text.ilike.%${search}%`)
+  }
+
+  const { data, error, count } = await query
+
+  if (error) {
+    throw new Error(`Failed to list media: ${error.message}`)
+  }
+
+  return {
+    items: (data ?? []) as MediaRecord[],
+    total: count ?? 0,
+    page,
+    limit,
+    totalPages: Math.ceil((count ?? 0) / limit),
+  }
+}
+
+/* -------------------------------------------------------------------------- */
+/*  Insert                                                                    */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * Register a completed upload in the database.
+ * Called after the browser finishes uploading to R2.
+ */
+export async function insertMedia(
+  supabase: SupabaseClient,
+  tableName: string,
+  data: MediaInsert
+): Promise<MediaRecord> {
+  const { data: record, error } = await supabase
+    .from(tableName)
+    .insert({
+      filename: data.filename,
+      original_name: data.original_name,
+      mime_type: data.mime_type,
+      size_bytes: data.size_bytes,
+      url: data.url,
+      width: data.width ?? null,
+      height: data.height ?? null,
+      alt_text: data.alt_text ?? null,
+    })
+    .select()
+    .single()
+
+  if (error) {
+    throw new Error(`Failed to insert media: ${error.message}`)
+  }
+
+  return record as MediaRecord
+}
+
+/* -------------------------------------------------------------------------- */
+/*  Delete                                                                    */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * Delete a media record and its R2 object.
+ * Attempts R2 deletion first but always cleans up the DB record.
+ */
+export async function deleteMedia(
+  supabase: SupabaseClient,
+  tableName: string,
+  r2Config: R2Config,
+  id: string
+): Promise<void> {
+  // Get the record to extract the R2 key
+  const { data: media, error: fetchError } = await supabase
+    .from(tableName)
+    .select('*')
+    .eq('id', id)
+    .single()
+
+  if (fetchError || !media) {
+    throw new Error('Media not found')
+  }
+
+  // Extract key from public URL
+  const record = media as MediaRecord
+  const key = record.url.replace(`${r2Config.publicUrl}/`, '')
+
+  // Delete from R2 (best-effort)
+  try {
+    const r2 = createR2Client(r2Config)
+    await r2.send(new DeleteObjectCommand({ Bucket: r2Config.bucketName, Key: key }))
+  } catch {
+    // Log but don't fail — DB record should still be cleaned up
+    console.error(`Failed to delete R2 object: ${key}`)
+  }
+
+  // Delete from DB
+  const { error: deleteError } = await supabase
+    .from(tableName)
+    .delete()
+    .eq('id', id)
+
+  if (deleteError) {
+    throw new Error(`Failed to delete media record: ${deleteError.message}`)
+  }
+}

package/src/r2/presign.ts

@@ -0,0 +1,61 @@
+import { PutObjectCommand } from '@aws-sdk/client-s3'
+import { getSignedUrl } from '@aws-sdk/s3-request-presigner'
+import type { R2Config } from '../types/config'
+import { createR2Client } from './client'
+
+export interface PresignOptions {
+  /** Original filename (will be sanitized) */
+  filename: string
+  /** MIME type of the file */
+  contentType: string
+  /** Storage folder (e.g. 'media', 'shots', 'projects') */
+  folder?: string
+  /** Presigned URL expiration in seconds. Default: 600 (10 min) */
+  expiresIn?: number
+}
+
+export interface PresignResult {
+  /** Presigned PUT URL for direct browser upload */
+  uploadUrl: string
+  /** Public URL where the file will be accessible */
+  publicUrl: string
+  /** R2 object key */
+  key: string
+}
+
+/**
+ * Sanitize a filename for safe R2 storage.
+ * Lowercases, replaces non-alphanumeric chars with hyphens, deduplicates hyphens.
+ */
+function sanitizeFilename(filename: string): string {
+  return filename
+    .toLowerCase()
+    .replace(/[^a-z0-9.\-_]/g, '-')
+    .replace(/-+/g, '-')
+}
+
+/**
+ * Generate a presigned PUT URL for direct browser-to-R2 upload.
+ * The server never handles file bytes — Vercel/edge-friendly.
+ */
+export async function createPresignedUploadUrl(
+  config: R2Config,
+  options: PresignOptions
+): Promise<PresignResult> {
+  const { filename, contentType, folder = 'media', expiresIn = 600 } = options
+
+  const sanitized = sanitizeFilename(filename)
+  const key = `${folder}/${crypto.randomUUID()}-${sanitized}`
+
+  const r2 = createR2Client(config)
+  const command = new PutObjectCommand({
+    Bucket: config.bucketName,
+    Key: key,
+    ContentType: contentType,
+  })
+
+  const uploadUrl = await getSignedUrl(r2, command, { expiresIn })
+  const publicUrl = `${config.publicUrl}/${key}`
+
+  return { uploadUrl, publicUrl, key }
+}