@actuate-media/cms-admin 0.8.0 → 0.8.1

package/src/components/VersionHistory.tsx

@@ -1,40 +1,40 @@
-'use client';
+'use client'
 
-import { useState, useEffect } from 'react';
-import { X, RotateCcw, Clock, User, Loader2 } from 'lucide-react';
-import { toast } from 'sonner';
-import { cmsApi } from '../lib/api.js';
+import { useState, useEffect } from 'react'
+import { X, RotateCcw, Clock, User, Loader2 } from 'lucide-react'
+import { toast } from 'sonner'
+import { cmsApi } from '../lib/api.js'
 
 interface Version {
-  id: string;
-  changeType: string;
-  createdAt: string;
-  data: Record<string, unknown>;
+  id: string
+  changeType: string
+  createdAt: string
+  data: Record<string, unknown>
   changedBy?: {
-    id: string;
-    name?: string;
-    email?: string;
-  };
+    id: string
+    name?: string
+    email?: string
+  }
 }
 
 export interface VersionHistoryProps {
-  collectionSlug: string;
-  documentId: string;
-  open: boolean;
-  onClose: () => void;
-  onRestore?: (data: Record<string, unknown>) => void;
+  collectionSlug: string
+  documentId: string
+  open: boolean
+  onClose: () => void
+  onRestore?: (data: Record<string, unknown>) => void
 }
 
 function timeAgo(dateStr: string): string {
-  const diff = Date.now() - new Date(dateStr).getTime();
-  const minutes = Math.floor(diff / 60_000);
-  if (minutes < 1) return 'just now';
-  if (minutes < 60) return `${minutes}m ago`;
-  const hours = Math.floor(minutes / 60);
-  if (hours < 24) return `${hours}h ago`;
-  const days = Math.floor(hours / 24);
-  if (days < 30) return `${days}d ago`;
-  return new Date(dateStr).toLocaleDateString();
+  const diff = Date.now() - new Date(dateStr).getTime()
+  const minutes = Math.floor(diff / 60_000)
+  if (minutes < 1) return 'just now'
+  if (minutes < 60) return `${minutes}m ago`
+  const hours = Math.floor(minutes / 60)
+  if (hours < 24) return `${hours}h ago`
+  const days = Math.floor(hours / 24)
+  if (days < 30) return `${days}d ago`
+  return new Date(dateStr).toLocaleDateString()
 }
 
 const CHANGE_TYPE_LABELS: Record<string, { label: string; color: string }> = {
@@ -42,47 +42,53 @@ const CHANGE_TYPE_LABELS: Record<string, { label: string; color: string }> = {
   UPDATE: { label: 'Updated', color: 'bg-blue-100 text-blue-800' },
   DELETE: { label: 'Deleted', color: 'bg-red-100 text-red-800' },
   RESTORE: { label: 'Restored', color: 'bg-purple-100 text-purple-800' },
-};
+}
 
-export function VersionHistory({ collectionSlug, documentId, open, onClose, onRestore }: VersionHistoryProps) {
-  const [versions, setVersions] = useState<Version[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [restoring, setRestoring] = useState<string | null>(null);
+export function VersionHistory({
+  collectionSlug,
+  documentId,
+  open,
+  onClose,
+  onRestore,
+}: VersionHistoryProps) {
+  const [versions, setVersions] = useState<Version[]>([])
+  const [loading, setLoading] = useState(false)
+  const [restoring, setRestoring] = useState<string | null>(null)
 
   useEffect(() => {
-    if (open) fetchVersions();
-  }, [open, collectionSlug, documentId]);
+    if (open) fetchVersions()
+  }, [open, collectionSlug, documentId])
 
   async function fetchVersions() {
-    setLoading(true);
+    setLoading(true)
     const res = await cmsApi<{ versions: Version[]; total: number }>(
       `/collections/${collectionSlug}/${documentId}/versions?pageSize=50`,
-    );
+    )
     if (res.data) {
-      setVersions((res.data as any).versions ?? []);
+      setVersions((res.data as any).versions ?? [])
     }
-    setLoading(false);
+    setLoading(false)
   }
 
   async function handleRestore(version: Version) {
-    setRestoring(version.id);
+    setRestoring(version.id)
     const res = await cmsApi<any>(
       `/collections/${collectionSlug}/${documentId}/versions/${version.id}/restore`,
       { method: 'POST' },
-    );
+    )
     if (res.error) {
-      toast.error(res.error);
+      toast.error(res.error)
     } else {
-      toast.success('Version restored');
+      toast.success('Version restored')
       if (onRestore && version.data) {
-        onRestore(version.data);
+        onRestore(version.data)
       }
-      fetchVersions();
+      fetchVersions()
     }
-    setRestoring(null);
+    setRestoring(null)
   }
 
-  if (!open) return null;
+  if (!open) return null
 
   return (
     <div className="fixed inset-0 z-50 flex justify-end">
@@ -93,7 +99,10 @@ export function VersionHistory({ collectionSlug, documentId, open, onClose, onRe
             <Clock className="w-5 h-5 text-gray-600" />
             <h2 className="text-lg font-semibold text-gray-900">Version History</h2>
           </div>
-          <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>
@@ -113,15 +122,17 @@ export function VersionHistory({ collectionSlug, documentId, open, onClose, onRe
                 const typeInfo = CHANGE_TYPE_LABELS[version.changeType] ?? {
                   label: version.changeType,
                   color: 'bg-gray-100 text-gray-800',
-                };
-                const isLatest = index === 0;
+                }
+                const isLatest = index === 0
 
                 return (
                   <div key={version.id} className="px-4 py-3 hover:bg-gray-50 transition-colors">
                     <div className="flex items-start justify-between gap-3">
                       <div className="flex-1 min-w-0">
                         <div className="flex items-center gap-2 mb-1">
-                          <span className={`inline-flex px-2 py-0.5 rounded-full text-xs font-medium ${typeInfo.color}`}>
+                          <span
+                            className={`inline-flex px-2 py-0.5 rounded-full text-xs font-medium ${typeInfo.color}`}
+                          >
                             {typeInfo.label}
                           </span>
                           {isLatest && (
@@ -156,12 +167,12 @@ export function VersionHistory({ collectionSlug, documentId, open, onClose, onRe
                       )}
                     </div>
                   </div>
-                );
+                )
               })}
             </div>
           )}
         </div>
       </div>
     </div>
-  );
+  )
 }

package/src/components/ui/Avatar.tsx

@@ -1,16 +1,16 @@
-type AvatarSize = 'sm' | 'md' | 'lg';
+type AvatarSize = 'sm' | 'md' | 'lg'
 
 export interface AvatarProps {
-  src?: string | null;
-  name?: string;
-  size?: AvatarSize;
+  src?: string | null
+  name?: string
+  size?: AvatarSize
 }
 
 const sizeClasses: Record<AvatarSize, string> = {
   sm: 'h-6 w-6 text-[10px]',
   md: 'h-9 w-9 text-xs',
   lg: 'h-12 w-12 text-sm',
-};
+}
 
 function getInitials(name: string): string {
   return name
@@ -18,7 +18,7 @@ function getInitials(name: string): string {
     .map((part) => part.charAt(0))
     .join('')
     .toUpperCase()
-    .slice(0, 2);
+    .slice(0, 2)
 }
 
 export function Avatar({ src, name = '', size = 'md' }: AvatarProps) {
@@ -29,7 +29,7 @@ export function Avatar({ src, name = '', size = 'md' }: AvatarProps) {
         alt={name}
         className={`inline-block shrink-0 rounded-full object-cover ${sizeClasses[size]}`}
       />
-    );
+    )
   }
 
   return (
@@ -38,5 +38,5 @@ export function Avatar({ src, name = '', size = 'md' }: AvatarProps) {
     >
       {getInitials(name) || '?'}
     </span>
-  );
+  )
 }

package/src/components/ui/Badge.tsx

@@ -1,5 +1,5 @@
 export interface BadgeProps {
-  status: 'published' | 'draft' | 'archived' | 'scheduled';
+  status: 'published' | 'draft' | 'archived' | 'scheduled'
 }
 
 const statusClasses: Record<BadgeProps['status'], string> = {
@@ -7,19 +7,21 @@ const statusClasses: Record<BadgeProps['status'], string> = {
   draft: 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300',
   archived: 'bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-400',
   scheduled: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400',
-};
+}
 
 const statusLabels: Record<BadgeProps['status'], string> = {
   published: 'Published',
   draft: 'Draft',
   archived: 'Archived',
   scheduled: 'Scheduled',
-};
+}
 
 export function Badge({ status }: BadgeProps) {
   return (
-    <span className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${statusClasses[status]}`}>
+    <span
+      className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${statusClasses[status]}`}
+    >
       {statusLabels[status]}
     </span>
-  );
+  )
 }

package/src/components/ui/Button.tsx

@@ -1,15 +1,15 @@
-'use client';
+'use client'
 
-import { type ButtonHTMLAttributes, type ReactNode } from 'react';
+import { type ButtonHTMLAttributes, type ReactNode } from 'react'
 
-type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'ghost';
-type ButtonSize = 'sm' | 'md' | 'lg';
+type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'ghost'
+type ButtonSize = 'sm' | 'md' | 'lg'
 
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: ButtonVariant;
-  size?: ButtonSize;
-  loading?: boolean;
-  children: ReactNode;
+  variant?: ButtonVariant
+  size?: ButtonSize
+  loading?: boolean
+  children: ReactNode
 }
 
 const variantClasses: Record<ButtonVariant, string> = {
@@ -17,13 +17,13 @@ const variantClasses: Record<ButtonVariant, string> = {
   secondary: 'bg-[var(--secondary)] text-[var(--secondary-foreground)] hover:opacity-80',
   danger: 'bg-[var(--destructive)] text-[var(--destructive-foreground)] hover:opacity-90',
   ghost: 'bg-transparent hover:bg-[var(--accent)] text-[var(--foreground)]',
-};
+}
 
 const sizeClasses: Record<ButtonSize, string> = {
   sm: 'px-2.5 py-1 text-xs',
   md: 'px-4 py-2 text-sm',
   lg: 'px-6 py-2.5 text-base',
-};
+}
 
 export function Button({
   variant = 'primary',
@@ -42,11 +42,22 @@ export function Button({
     >
       {loading && (
         <svg className="h-4 w-4 animate-spin" viewBox="0 0 24 24" fill="none">
-          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
-          <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
+          <circle
+            className="opacity-25"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            strokeWidth="4"
+          />
+          <path
+            className="opacity-75"
+            fill="currentColor"
+            d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"
+          />
         </svg>
       )}
       {children}
     </button>
-  );
+  )
 }

package/src/components/ui/CommandPalette.tsx

@@ -1,82 +1,93 @@
-'use client';
+'use client'
 
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef } from 'react'
 
 interface CommandItem {
-  id: string;
-  label: string;
-  group: string;
-  onSelect: () => void;
+  id: string
+  label: string
+  group: string
+  onSelect: () => void
 }
 
 export interface CommandPaletteProps {
-  open: boolean;
-  onClose: () => void;
-  items: CommandItem[];
+  open: boolean
+  onClose: () => void
+  items: CommandItem[]
 }
 
 export function CommandPalette({ open, onClose, items }: CommandPaletteProps) {
-  const [query, setQuery] = useState('');
-  const [activeIndex, setActiveIndex] = useState(0);
-  const inputRef = useRef<HTMLInputElement>(null);
+  const [query, setQuery] = useState('')
+  const [activeIndex, setActiveIndex] = useState(0)
+  const inputRef = useRef<HTMLInputElement>(null)
 
-  const filtered = items.filter((item) =>
-    item.label.toLowerCase().includes(query.toLowerCase()),
-  );
+  const filtered = items.filter((item) => item.label.toLowerCase().includes(query.toLowerCase()))
 
-  const groups = Array.from(new Set(filtered.map((i) => i.group)));
+  const groups = Array.from(new Set(filtered.map((i) => i.group)))
 
   useEffect(() => {
     if (open) {
-      setQuery('');
-      setActiveIndex(0);
-      requestAnimationFrame(() => inputRef.current?.focus());
+      setQuery('')
+      setActiveIndex(0)
+      requestAnimationFrame(() => inputRef.current?.focus())
     }
-  }, [open]);
+  }, [open])
 
   useEffect(() => {
-    if (!open) return;
+    if (!open) return
 
     function handleKey(e: KeyboardEvent) {
       if (e.key === 'Escape') {
-        onClose();
-        return;
+        onClose()
+        return
       }
       if (e.key === 'ArrowDown') {
-        e.preventDefault();
-        setActiveIndex((i) => Math.min(i + 1, filtered.length - 1));
+        e.preventDefault()
+        setActiveIndex((i) => Math.min(i + 1, filtered.length - 1))
       }
       if (e.key === 'ArrowUp') {
-        e.preventDefault();
-        setActiveIndex((i) => Math.max(i - 1, 0));
+        e.preventDefault()
+        setActiveIndex((i) => Math.max(i - 1, 0))
       }
       if (e.key === 'Enter' && filtered[activeIndex]) {
-        filtered[activeIndex].onSelect();
-        onClose();
+        filtered[activeIndex].onSelect()
+        onClose()
       }
     }
 
-    document.addEventListener('keydown', handleKey);
-    return () => document.removeEventListener('keydown', handleKey);
-  }, [open, onClose, filtered, activeIndex]);
+    document.addEventListener('keydown', handleKey)
+    return () => document.removeEventListener('keydown', handleKey)
+  }, [open, onClose, filtered, activeIndex])
 
-  if (!open) return null;
+  if (!open) return null
 
-  let flatIndex = -1;
+  let flatIndex = -1
 
   return (
     <div className="fixed inset-0 z-[70] flex items-start justify-center pt-[20vh]">
       <div className="fixed inset-0 bg-black/50" onClick={onClose} role="presentation" />
       <div className="relative z-10 w-full max-w-lg overflow-hidden rounded-lg border border-[var(--border)] bg-[var(--popover)] shadow-2xl">
         <div className="flex items-center border-b border-[var(--border)] px-4">
-          <svg className="mr-2 h-4 w-4 text-[var(--muted-foreground)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-            <path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+          <svg
+            className="mr-2 h-4 w-4 text-[var(--muted-foreground)]"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            strokeWidth={2}
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+            />
           </svg>
           <input
             ref={inputRef}
             type="text"
             value={query}
-            onChange={(e) => { setQuery(e.target.value); setActiveIndex(0); }}
+            onChange={(e) => {
+              setQuery(e.target.value)
+              setActiveIndex(0)
+            }}
             placeholder="Type a command or search..."
             className="flex-1 bg-transparent py-3 text-sm outline-none"
           />
@@ -91,19 +102,22 @@ export function CommandPalette({ open, onClose, items }: CommandPaletteProps) {
               {filtered
                 .filter((i) => i.group === group)
                 .map((item) => {
-                  flatIndex++;
-                  const idx = flatIndex;
+                  flatIndex++
+                  const idx = flatIndex
                   return (
                     <button
                       key={item.id}
-                      onClick={() => { item.onSelect(); onClose(); }}
+                      onClick={() => {
+                        item.onSelect()
+                        onClose()
+                      }}
                       className={`flex w-full px-4 py-2 text-sm ${
                         idx === activeIndex ? 'bg-[var(--accent)]' : ''
                       }`}
                     >
                       {item.label}
                     </button>
-                  );
+                  )
                 })}
             </div>
           ))}
@@ -115,5 +129,5 @@ export function CommandPalette({ open, onClose, items }: CommandPaletteProps) {
         </div>
       </div>
     </div>
-  );
+  )
 }

package/src/components/ui/ConfirmDialog.tsx

@@ -1,17 +1,17 @@
-'use client';
+'use client'
 
-import { Modal } from './Modal.js';
-import { Button } from './Button.js';
+import { Modal } from './Modal.js'
+import { Button } from './Button.js'
 
 export interface ConfirmDialogProps {
-  open: boolean;
-  onClose: () => void;
-  onConfirm: () => void;
-  title: string;
-  description: string;
-  confirmLabel?: string;
-  cancelLabel?: string;
-  destructive?: boolean;
+  open: boolean
+  onClose: () => void
+  onConfirm: () => void
+  title: string
+  description: string
+  confirmLabel?: string
+  cancelLabel?: string
+  destructive?: boolean
 }
 
 export function ConfirmDialog({
@@ -37,8 +37,8 @@ export function ConfirmDialog({
           <Button
             variant={destructive ? 'danger' : 'primary'}
             onClick={() => {
-              onConfirm();
-              onClose();
+              onConfirm()
+              onClose()
             }}
           >
             {confirmLabel}
@@ -48,5 +48,5 @@ export function ConfirmDialog({
     >
       <p className="text-sm text-[var(--muted-foreground)]">{description}</p>
     </Modal>
-  );
+  )
 }