@actuate-media/cms-admin 0.8.0 → 0.8.2

package/src/components/LivePreview.tsx

@@ -1,75 +1,81 @@
-'use client';
+'use client'
 
-import { useState, useRef, useEffect, useCallback } from 'react';
-import { Monitor, Tablet, Smartphone, RefreshCw, ExternalLink, X } from 'lucide-react';
-import { cmsApi } from '../lib/api.js';
+import { useState, useRef, useEffect, useCallback } from 'react'
+import { Monitor, Tablet, Smartphone, RefreshCw, ExternalLink, X } from 'lucide-react'
+import { cmsApi } from '../lib/api.js'
 
 interface LivePreviewProps {
-  collection: string;
-  documentId?: string;
-  previewUrl?: string;
-  values: Record<string, unknown>;
-  onClose: () => void;
+  collection: string
+  documentId?: string
+  previewUrl?: string
+  values: Record<string, unknown>
+  onClose: () => void
 }
 
-type Viewport = 'desktop' | 'tablet' | 'mobile';
+type Viewport = 'desktop' | 'tablet' | 'mobile'
 
 const VIEWPORT_WIDTHS: Record<Viewport, string> = {
   desktop: '100%',
   tablet: '768px',
   mobile: '375px',
-};
+}
 
-export function LivePreview({ collection, documentId, previewUrl, values, onClose }: LivePreviewProps) {
-  const iframeRef = useRef<HTMLIFrameElement>(null);
-  const [viewport, setViewport] = useState<Viewport>('desktop');
-  const [loading, setLoading] = useState(true);
-  const [previewSrc, setPreviewSrc] = useState<string | null>(null);
+export function LivePreview({
+  collection,
+  documentId,
+  previewUrl,
+  values,
+  onClose,
+}: LivePreviewProps) {
+  const iframeRef = useRef<HTMLIFrameElement>(null)
+  const [viewport, setViewport] = useState<Viewport>('desktop')
+  const [loading, setLoading] = useState(true)
+  const [previewSrc, setPreviewSrc] = useState<string | null>(null)
 
   useEffect(() => {
     if (!documentId || !previewUrl) {
-      setPreviewSrc(null);
-      return;
+      setPreviewSrc(null)
+      return
     }
 
     async function fetchToken() {
       const res = await cmsApi<{ token: string }>('/preview/token', {
         method: 'POST',
         body: JSON.stringify({ collection, documentId }),
-      });
+      })
       if (res.data?.token) {
-        const sep = previewUrl!.includes('?') ? '&' : '?';
-        setPreviewSrc(`${previewUrl}${sep}preview=true#token=${res.data.token}`);
+        const sep = previewUrl!.includes('?') ? '&' : '?'
+        setPreviewSrc(`${previewUrl}${sep}preview=true#token=${res.data.token}`)
       }
     }
 
-    fetchToken();
-  }, [collection, documentId, previewUrl]);
+    fetchToken()
+  }, [collection, documentId, previewUrl])
 
   useEffect(() => {
-    if (!iframeRef.current?.contentWindow || !previewSrc) return;
-    let targetOrigin: string;
+    if (!iframeRef.current?.contentWindow || !previewSrc) return
+    let targetOrigin: string
     try {
-      targetOrigin = new URL(previewSrc).origin;
+      targetOrigin = new URL(previewSrc).origin
     } catch {
-      targetOrigin = window.location.origin;
+      targetOrigin = window.location.origin
     }
     iframeRef.current.contentWindow.postMessage(
       { type: 'actuate-preview-update', data: values },
       targetOrigin,
-    );
-  }, [values, previewSrc]);
+    )
+  }, [values, previewSrc])
 
   const handleRefresh = useCallback(() => {
     if (iframeRef.current) {
-      setLoading(true);
-      iframeRef.current.src = iframeRef.current.src;
+      setLoading(true)
+      iframeRef.current.src = iframeRef.current.src
     }
-  }, []);
+  }, [])
 
   const handleOpenExternal = useCallback(() => {
-    if (previewSrc) window.open(previewSrc, '_blank');
-  }, [previewSrc]);
+    if (previewSrc) window.open(previewSrc, '_blank')
+  }, [previewSrc])
 
   if (!previewSrc) {
     return (
@@ -83,14 +89,20 @@ export function LivePreview({ collection, documentId, previewUrl, values, onClos
           Close Preview
         </button>
       </div>
-    );
+    )
   }
 
   return (
     <div className="flex flex-col h-full border-l border-gray-200 bg-white">
       <div className="flex items-center justify-between px-3 py-2 border-b border-gray-200 bg-gray-50">
         <div className="flex items-center gap-1">
-          {([['desktop', Monitor], ['tablet', Tablet], ['mobile', Smartphone]] as const).map(([vp, Icon]) => (
+          {(
+            [
+              ['desktop', Monitor],
+              ['tablet', Tablet],
+              ['mobile', Smartphone],
+            ] as const
+          ).map(([vp, Icon]) => (
             <button
               key={vp}
               onClick={() => setViewport(vp)}
@@ -102,20 +114,35 @@ export function LivePreview({ collection, documentId, previewUrl, values, onClos
           ))}
         </div>
         <div className="flex items-center gap-1">
-          <button onClick={handleRefresh} className="p-1.5 rounded text-gray-400 hover:text-gray-600" title="Refresh">
+          <button
+            onClick={handleRefresh}
+            className="p-1.5 rounded text-gray-400 hover:text-gray-600"
+            title="Refresh"
+          >
             <RefreshCw className="w-4 h-4" />
           </button>
-          <button onClick={handleOpenExternal} className="p-1.5 rounded text-gray-400 hover:text-gray-600" title="Open in new tab">
+          <button
+            onClick={handleOpenExternal}
+            className="p-1.5 rounded text-gray-400 hover:text-gray-600"
+            title="Open in new tab"
+          >
             <ExternalLink className="w-4 h-4" />
           </button>
-          <button onClick={onClose} className="p-1.5 rounded text-gray-400 hover:text-gray-600" title="Close">
+          <button
+            onClick={onClose}
+            className="p-1.5 rounded text-gray-400 hover:text-gray-600"
+            title="Close"
+          >
             <X className="w-4 h-4" />
           </button>
         </div>
       </div>
 
       <div className="flex-1 overflow-auto flex justify-center bg-gray-100 p-4">
-        <div style={{ width: VIEWPORT_WIDTHS[viewport], maxWidth: '100%', transition: 'width 0.3s' }} className="relative">
+        <div
+          style={{ width: VIEWPORT_WIDTHS[viewport], maxWidth: '100%', transition: 'width 0.3s' }}
+          className="relative"
+        >
           {loading && (
             <div className="absolute inset-0 flex items-center justify-center bg-white/80 z-10 rounded-lg">
               <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600" />
@@ -132,5 +159,5 @@ export function LivePreview({ collection, documentId, previewUrl, values, onClos
         </div>
       </div>
     </div>
-  );
+  )
 }

package/src/components/LocaleProvider.tsx

@@ -1,51 +1,57 @@
-'use client';
+'use client'
 
-import { createContext, useContext, useState, useEffect, useCallback, type ReactNode } from 'react';
+import { createContext, useContext, useState, useEffect, useCallback, type ReactNode } from 'react'
 
 interface LocaleContextValue {
-  activeLocale: string;
-  setLocale: (locale: string) => void;
-  locales: Array<{ code: string; label: string; dir?: 'ltr' | 'rtl' }>;
+  activeLocale: string
+  setLocale: (locale: string) => void
+  locales: Array<{ code: string; label: string; dir?: 'ltr' | 'rtl' }>
 }
 
 const LocaleContext = createContext<LocaleContextValue>({
   activeLocale: 'en',
   setLocale: () => {},
   locales: [],
-});
+})
 
 export function useLocale() {
-  return useContext(LocaleContext);
+  return useContext(LocaleContext)
 }
 
-const STORAGE_KEY = 'actuate-locale';
+const STORAGE_KEY = 'actuate-locale'
 
 export interface LocaleProviderProps {
-  config: { i18n?: { defaultLocale: string; locales: Array<{ code: string; label: string; dir?: 'ltr' | 'rtl' }>; fallbackLocale?: string } };
-  children: ReactNode;
+  config: {
+    i18n?: {
+      defaultLocale: string
+      locales: Array<{ code: string; label: string; dir?: 'ltr' | 'rtl' }>
+      fallbackLocale?: string
+    }
+  }
+  children: ReactNode
 }
 
 export function LocaleProvider({ config, children }: LocaleProviderProps) {
-  const locales = config.i18n?.locales ?? [];
-  const defaultLocale = config.i18n?.defaultLocale ?? 'en';
+  const locales = config.i18n?.locales ?? []
+  const defaultLocale = config.i18n?.defaultLocale ?? 'en'
 
-  const [activeLocale, setActiveLocale] = useState(defaultLocale);
+  const [activeLocale, setActiveLocale] = useState(defaultLocale)
 
   useEffect(() => {
-    const stored = localStorage.getItem(STORAGE_KEY);
+    const stored = localStorage.getItem(STORAGE_KEY)
     if (stored && locales.some((l) => l.code === stored)) {
-      setActiveLocale(stored);
+      setActiveLocale(stored)
     }
-  }, [locales]);
+  }, [locales])
 
   const setLocale = useCallback((locale: string) => {
-    setActiveLocale(locale);
-    localStorage.setItem(STORAGE_KEY, locale);
-  }, []);
+    setActiveLocale(locale)
+    localStorage.setItem(STORAGE_KEY, locale)
+  }, [])
 
   return (
     <LocaleContext.Provider value={{ activeLocale, setLocale, locales }}>
       {children}
     </LocaleContext.Provider>
-  );
+  )
 }

package/src/components/LocaleSwitcher.tsx

@@ -1,15 +1,15 @@
-'use client';
+'use client'
 
-import { Globe, Check, ChevronDown } from 'lucide-react';
-import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
-import { useLocale } from './LocaleProvider.js';
+import { Globe, Check, ChevronDown } from 'lucide-react'
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+import { useLocale } from './LocaleProvider.js'
 
 export function LocaleSwitcher() {
-  const { activeLocale, setLocale, locales } = useLocale();
+  const { activeLocale, setLocale, locales } = useLocale()
 
-  if (locales.length < 2) return null;
+  if (locales.length < 2) return null
 
-  const activeLabel = locales.find((l) => l.code === activeLocale)?.label ?? activeLocale;
+  const activeLabel = locales.find((l) => l.code === activeLocale)?.label ?? activeLocale
 
   return (
     <DropdownMenu.Root>
@@ -39,13 +39,11 @@ export function LocaleSwitcher() {
               className="flex items-center justify-between gap-2 px-3 py-2 text-sm hover:bg-[var(--accent)] rounded cursor-pointer outline-none"
             >
               <span>{locale.label}</span>
-              {locale.code === activeLocale && (
-                <Check className="w-4 h-4 text-[var(--primary)]" />
-              )}
+              {locale.code === activeLocale && <Check className="w-4 h-4 text-[var(--primary)]" />}
             </DropdownMenu.Item>
           ))}
         </DropdownMenu.Content>
       </DropdownMenu.Portal>
     </DropdownMenu.Root>
-  );
+  )
 }

package/src/components/MediaPickerModal.tsx

@@ -1,76 +1,74 @@
-'use client';
+'use client'
 
-import { useState, useRef } from 'react';
-import { X, Upload, Search, ImageIcon, Loader2 } from 'lucide-react';
-import { toast } from 'sonner';
-import { cmsApi } from '../lib/api.js';
-import { useApiData } from '../lib/useApiData.js';
+import { useState, useRef } from 'react'
+import { X, Upload, Search, ImageIcon, Loader2 } from 'lucide-react'
+import { toast } from 'sonner'
+import { cmsApi } from '../lib/api.js'
+import { useApiData } from '../lib/useApiData.js'
 
 interface MediaItem {
-  id: string;
-  filename: string;
-  storageKey: string;
-  mimeType: string;
-  fileSize: number;
-  width?: number;
-  height?: number;
+  id: string
+  filename: string
+  storageKey: string
+  mimeType: string
+  fileSize: number
+  width?: number
+  height?: number
 }
 
 export interface MediaPickerModalProps {
-  open: boolean;
-  onClose: () => void;
-  onSelect: (url: string, alt?: string) => void;
-  accept?: string;
+  open: boolean
+  onClose: () => void
+  onSelect: (url: string, alt?: string) => void
+  accept?: string
 }
 
 export function MediaPickerModal({ open, onClose, onSelect, accept }: MediaPickerModalProps) {
-  const [tab, setTab] = useState<'library' | 'upload'>('library');
-  const [search, setSearch] = useState('');
-  const [uploading, setUploading] = useState(false);
-  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [tab, setTab] = useState<'library' | 'upload'>('library')
+  const [search, setSearch] = useState('')
+  const [uploading, setUploading] = useState(false)
+  const fileInputRef = useRef<HTMLInputElement>(null)
 
   const { data, loading, refetch } = useApiData<{ data: { items: MediaItem[] } }>(
     open ? `/media?pageSize=50${search ? `&search=${encodeURIComponent(search)}` : ''}` : null,
-  );
+  )
 
-  const items = (data as any)?.data?.items ?? (data as any)?.items ?? [];
-  const imageItems = items.filter((item: MediaItem) =>
-    item.mimeType.startsWith('image/'),
-  );
+  const items = (data as any)?.data?.items ?? (data as any)?.items ?? []
+  const imageItems = items.filter((item: MediaItem) => item.mimeType.startsWith('image/'))
 
   async function handleUpload(files: FileList | null) {
-    if (!files || files.length === 0) return;
-    setUploading(true);
+    if (!files || files.length === 0) return
+    setUploading(true)
 
-    const file = files[0]!;
-    const formData = new FormData();
-    formData.append('file', file);
+    const file = files[0]!
+    const formData = new FormData()
+    formData.append('file', file)
 
     const res = await cmsApi<MediaItem>('/media/upload', {
       method: 'POST',
       body: formData,
-    });
+    })
 
     if (res.error) {
-      toast.error(res.error);
+      toast.error(res.error)
     } else if (res.data) {
-      const mediaItem = res.data as any;
-      const url = mediaItem.storageKey ?? '';
-      toast.success(`Uploaded ${file.name}`);
-      onSelect(url, file.name);
-      onClose();
+      const mediaItem = res.data as any
+      const url = mediaItem.storageKey ?? ''
+      toast.success(`Uploaded ${file.name}`)
+      onSelect(url, file.name)
+      onClose()
     }
 
-    setUploading(false);
-    if (fileInputRef.current) fileInputRef.current.value = '';
+    setUploading(false)
+    if (fileInputRef.current) fileInputRef.current.value = ''
   }
 
   function handleSelectItem(item: MediaItem) {
-    onSelect(item.storageKey, item.filename);
-    onClose();
+    onSelect(item.storageKey, item.filename)
+    onClose()
   }
 
-  if (!open) return null;
+  if (!open) return null
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center">
@@ -78,7 +76,10 @@ export function MediaPickerModal({ open, onClose, onSelect, accept }: MediaPicke
       <div className="relative bg-white rounded-xl shadow-2xl w-full max-w-2xl max-h-[80vh] flex flex-col mx-4">
         <div className="flex items-center justify-between px-4 py-3 border-b border-gray-200">
           <h2 className="text-lg font-semibold text-gray-900">Insert Image</h2>
-          <button onClick={onClose} className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors">
+          <button
+            onClick={onClose}
+            className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors"
+          >
             <X className="w-5 h-5 text-gray-500" />
           </button>
         </div>
@@ -179,5 +180,5 @@ export function MediaPickerModal({ open, onClose, onSelect, accept }: MediaPicke
         </div>
       </div>
     </div>
-  );
+  )
 }

package/src/components/PresenceIndicator.tsx

@@ -1,53 +1,56 @@
-'use client';
+'use client'
 
-import { useEffect, useState, useRef } from 'react';
+import { useEffect, useState, useRef } from 'react'
 
 interface PresenceUser {
-  userId: string;
-  name: string;
-  connectedAt: string;
+  userId: string
+  name: string
+  connectedAt: string
 }
 
 interface PresenceIndicatorProps {
-  documentId: string;
-  currentUserId?: string;
+  documentId: string
+  currentUserId?: string
 }
 
-const COLORS = ['#3b82f6', '#ef4444', '#10b981', '#f59e0b', '#8b5cf6', '#ec4899'];
+const COLORS = ['#3b82f6', '#ef4444', '#10b981', '#f59e0b', '#8b5cf6', '#ec4899']
 
 export function PresenceIndicator({ documentId, currentUserId }: PresenceIndicatorProps) {
-  const [users, setUsers] = useState<PresenceUser[]>([]);
-  const eventSourceRef = useRef<EventSource | null>(null);
-  const heartbeatRef = useRef<ReturnType<typeof setInterval>>(undefined);
+  const [users, setUsers] = useState<PresenceUser[]>([])
+  const eventSourceRef = useRef<EventSource | null>(null)
+  const heartbeatRef = useRef<ReturnType<typeof setInterval>>(undefined)
 
   useEffect(() => {
-    if (!documentId) return;
+    if (!documentId) return
 
-    const es = new EventSource(`/api/cms/presence/${documentId}`);
-    eventSourceRef.current = es;
+    const es = new EventSource(`/api/cms/presence/${documentId}`)
+    eventSourceRef.current = es
 
     es.addEventListener('presence', (event) => {
       try {
-        const data = JSON.parse(event.data) as PresenceUser[];
-        setUsers(data.filter(u => u.userId !== currentUserId));
+        const data = JSON.parse(event.data) as PresenceUser[]
+        setUsers(data.filter((u) => u.userId !== currentUserId))
       } catch {}
-    });
+    })
 
     es.onerror = () => {
-      es.close();
-    };
+      es.close()
+    }
 
     heartbeatRef.current = setInterval(() => {
-      fetch(`/api/cms/presence/${documentId}/heartbeat`, { method: 'POST', credentials: 'include' }).catch(() => {});
-    }, 30_000);
+      fetch(`/api/cms/presence/${documentId}/heartbeat`, {
+        method: 'POST',
+        credentials: 'include',
+      }).catch(() => {})
+    }, 30_000)
 
     return () => {
-      es.close();
-      if (heartbeatRef.current) clearInterval(heartbeatRef.current);
-    };
-  }, [documentId, currentUserId]);
+      es.close()
+      if (heartbeatRef.current) clearInterval(heartbeatRef.current)
+    }
+  }, [documentId, currentUserId])
 
-  if (users.length === 0) return null;
+  if (users.length === 0) return null
 
   return (
     <div className="flex items-center gap-1" title={`${users.length} other editor(s) active`}>
@@ -67,5 +70,5 @@ export function PresenceIndicator({ documentId, currentUserId }: PresenceIndicat
         </div>
       )}
     </div>
-  );
+  )
 }