@actuate-media/cms-admin 0.8.0 → 0.8.1

package/src/views/page-builder/SavedSections.tsx

@@ -1,6 +1,6 @@
-'use client';
+'use client'
 
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback } from 'react'
 import {
   Plus,
   ArrowLeft,
@@ -12,99 +12,94 @@ import {
   AlertTriangle,
   Calendar,
   Hash,
-} from 'lucide-react';
-import { toast } from 'sonner';
-import { cmsApi } from '../../lib/api.js';
-import { createSection, createContainer, createRow, createColumn } from '@actuate-media/cms-core';
+} from 'lucide-react'
+import { toast } from 'sonner'
+import { cmsApi } from '../../lib/api.js'
+import { createSection, createContainer, createRow, createColumn } from '@actuate-media/cms-core'
 
 export interface SavedSectionsProps {
-  onNavigate: (path: string) => void;
-  config: any;
+  onNavigate: (path: string) => void
+  config: any
 }
 
 interface SavedSection {
-  id: string;
-  name: string;
-  description: string;
-  category: string;
-  tree: Record<string, unknown> | null;
-  usageCount: number;
-  createdAt: string;
-  updatedAt: string;
+  id: string
+  name: string
+  description: string
+  category: string
+  tree: Record<string, unknown> | null
+  usageCount: number
+  createdAt: string
+  updatedAt: string
 }
 
-type ViewState =
-  | { mode: 'list' }
-  | { mode: 'create' }
-  | { mode: 'edit'; section: SavedSection };
+type ViewState = { mode: 'list' } | { mode: 'create' } | { mode: 'edit'; section: SavedSection }
 
-const CATEGORIES = ['header', 'footer', 'content', 'sidebar'] as const;
-type Category = (typeof CATEGORIES)[number];
+const CATEGORIES = ['header', 'footer', 'content', 'sidebar'] as const
+type Category = (typeof CATEGORIES)[number]
 
 const CATEGORY_COLORS: Record<string, string> = {
   header: 'bg-primary/10 text-primary',
   footer: 'bg-accent text-foreground',
   content: 'bg-muted text-muted-foreground',
   sidebar: 'bg-primary/10 text-primary',
-};
+}
 
 function formatDate(dateStr: string): string {
   return new Date(dateStr).toLocaleDateString(undefined, {
     month: 'short',
     day: 'numeric',
     year: 'numeric',
-  });
+  })
 }
 
 function createEmptySectionTree(): Record<string, unknown> {
-  const col = createColumn(100);
-  const row = createRow([col]);
-  const container = createContainer();
-  (container as unknown as { children: unknown[] }).children = [row];
-  const section = createSection();
-  (section as unknown as { children: unknown[] }).children = [container];
-  return section as unknown as Record<string, unknown>;
+  const col = createColumn(100)
+  const row = createRow([col])
+  const container = createContainer()
+  ;(container as unknown as { children: unknown[] }).children = [row]
+  const section = createSection()
+  ;(section as unknown as { children: unknown[] }).children = [container]
+  return section as unknown as Record<string, unknown>
 }
 
 export function SavedSections({ onNavigate, config }: SavedSectionsProps) {
-  const [sections, setSections] = useState<SavedSection[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [viewState, setViewState] = useState<ViewState>({ mode: 'list' });
-  const [activeCategory, setActiveCategory] = useState<Category | 'all'>('all');
-  const [deleteConfirmId, setDeleteConfirmId] = useState<string | null>(null);
-  const [saving, setSaving] = useState(false);
+  const [sections, setSections] = useState<SavedSection[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [viewState, setViewState] = useState<ViewState>({ mode: 'list' })
+  const [activeCategory, setActiveCategory] = useState<Category | 'all'>('all')
+  const [deleteConfirmId, setDeleteConfirmId] = useState<string | null>(null)
+  const [saving, setSaving] = useState(false)
 
   const fetchSections = useCallback(async () => {
-    setLoading(true);
-    setError(null);
-    const res = await cmsApi<SavedSection[]>('/saved-sections');
+    setLoading(true)
+    setError(null)
+    const res = await cmsApi<SavedSection[]>('/saved-sections')
     if (res.error) {
-      setError(res.error);
+      setError(res.error)
     } else {
-      setSections(res.data ?? []);
+      setSections(res.data ?? [])
     }
-    setLoading(false);
-  }, []);
+    setLoading(false)
+  }, [])
 
   useEffect(() => {
-    fetchSections();
-  }, [fetchSections]);
+    fetchSections()
+  }, [fetchSections])
 
   const filteredSections =
-    activeCategory === 'all'
-      ? sections
-      : sections.filter((s) => s.category === activeCategory);
+    activeCategory === 'all' ? sections : sections.filter((s) => s.category === activeCategory)
 
   async function handleDelete(id: string) {
-    const res = await cmsApi(`/saved-sections/${id}`, { method: 'DELETE' });
+    const res = await cmsApi(`/saved-sections/${id}`, { method: 'DELETE' })
     if (res.error) {
-      toast.error(res.error);
+      toast.error(res.error)
     } else {
-      toast.success('Section deleted');
-      setSections((prev) => prev.filter((s) => s.id !== id));
+      toast.success('Section deleted')
+      setSections((prev) => prev.filter((s) => s.id !== id))
     }
-    setDeleteConfirmId(null);
+    setDeleteConfirmId(null)
   }
 
   async function handleDuplicate(section: SavedSection) {
@@ -116,12 +111,12 @@ export function SavedSections({ onNavigate, config }: SavedSectionsProps) {
         category: section.category,
         tree: section.tree,
       }),
-    });
+    })
     if (res.error) {
-      toast.error(res.error);
+      toast.error(res.error)
     } else {
-      toast.success('Section duplicated');
-      fetchSections();
+      toast.success('Section duplicated')
+      fetchSections()
     }
   }
 
@@ -131,41 +126,38 @@ export function SavedSections({ onNavigate, config }: SavedSectionsProps) {
         initial={viewState.mode === 'edit' ? viewState.section : undefined}
         saving={saving}
         onSave={async (data) => {
-          setSaving(true);
+          setSaving(true)
           if (viewState.mode === 'create') {
             const res = await cmsApi<SavedSection>('/saved-sections', {
               method: 'POST',
               body: JSON.stringify({ ...data, tree: createEmptySectionTree() }),
-            });
-            setSaving(false);
+            })
+            setSaving(false)
             if (res.error) {
-              toast.error(res.error);
+              toast.error(res.error)
             } else {
-              toast.success('Section created');
-              setViewState({ mode: 'list' });
-              fetchSections();
+              toast.success('Section created')
+              setViewState({ mode: 'list' })
+              fetchSections()
             }
           } else {
-            const res = await cmsApi<SavedSection>(
-              `/saved-sections/${viewState.section.id}`,
-              {
-                method: 'PUT',
-                body: JSON.stringify(data),
-              }
-            );
-            setSaving(false);
+            const res = await cmsApi<SavedSection>(`/saved-sections/${viewState.section.id}`, {
+              method: 'PUT',
+              body: JSON.stringify(data),
+            })
+            setSaving(false)
             if (res.error) {
-              toast.error(res.error);
+              toast.error(res.error)
             } else {
-              toast.success('Section updated');
-              setViewState({ mode: 'list' });
-              fetchSections();
+              toast.success('Section updated')
+              setViewState({ mode: 'list' })
+              fetchSections()
             }
           }
         }}
         onCancel={() => setViewState({ mode: 'list' })}
       />
-    );
+    )
   }
 
   return (
@@ -254,9 +246,7 @@ export function SavedSections({ onNavigate, config }: SavedSectionsProps) {
             >
               <div className="flex items-start justify-between gap-3">
                 <div className="min-w-0 flex-1">
-                  <p className="text-sm font-medium text-foreground truncate">
-                    {section.name}
-                  </p>
+                  <p className="text-sm font-medium text-foreground truncate">{section.name}</p>
                   {section.description && (
                     <p className="text-xs text-muted-foreground mt-0.5 line-clamp-2">
                       {section.description}
@@ -341,13 +331,13 @@ export function SavedSections({ onNavigate, config }: SavedSectionsProps) {
         </div>
       )}
     </div>
-  );
+  )
 }
 
 interface CategoryTabProps {
-  label: string;
-  active: boolean;
-  onClick: () => void;
+  label: string
+  active: boolean
+  onClick: () => void
 }
 
 function CategoryTab({ label, active, onClick }: CategoryTabProps) {
@@ -363,30 +353,28 @@ function CategoryTab({ label, active, onClick }: CategoryTabProps) {
     >
       {label}
     </button>
-  );
+  )
 }
 
 interface SectionFormProps {
-  initial?: SavedSection;
-  saving: boolean;
-  onSave: (data: { name: string; description: string; category: string }) => void;
-  onCancel: () => void;
+  initial?: SavedSection
+  saving: boolean
+  onSave: (data: { name: string; description: string; category: string }) => void
+  onCancel: () => void
 }
 
 function SectionForm({ initial, saving, onSave, onCancel }: SectionFormProps) {
-  const [name, setName] = useState(initial?.name ?? '');
-  const [description, setDescription] = useState(initial?.description ?? '');
-  const [category, setCategory] = useState(initial?.category ?? 'content');
+  const [name, setName] = useState(initial?.name ?? '')
+  const [description, setDescription] = useState(initial?.description ?? '')
+  const [category, setCategory] = useState(initial?.category ?? 'content')
 
   function handleSubmit(e: React.FormEvent) {
-    e.preventDefault();
-    if (!name.trim()) return;
-    onSave({ name: name.trim(), description: description.trim(), category });
+    e.preventDefault()
+    if (!name.trim()) return
+    onSave({ name: name.trim(), description: description.trim(), category })
   }
 
-  const treeSize = initial?.tree
-    ? JSON.stringify(initial.tree).length
-    : null;
+  const treeSize = initial?.tree ? JSON.stringify(initial.tree).length : null
 
   return (
     <div className="p-4 pr-8">
@@ -422,7 +410,10 @@ function SectionForm({ initial, saving, onSave, onCancel }: SectionFormProps) {
         </div>
 
         <div>
-          <label htmlFor="section-description" className="block text-sm font-medium text-foreground mb-1">
+          <label
+            htmlFor="section-description"
+            className="block text-sm font-medium text-foreground mb-1"
+          >
             Description
           </label>
           <textarea
@@ -436,7 +427,10 @@ function SectionForm({ initial, saving, onSave, onCancel }: SectionFormProps) {
         </div>
 
         <div>
-          <label htmlFor="section-category" className="block text-sm font-medium text-foreground mb-1">
+          <label
+            htmlFor="section-category"
+            className="block text-sm font-medium text-foreground mb-1"
+          >
             Category
           </label>
           <select
@@ -456,8 +450,8 @@ function SectionForm({ initial, saving, onSave, onCancel }: SectionFormProps) {
         {treeSize !== null && (
           <div className="rounded-md border border-border bg-muted p-3">
             <p className="text-xs text-muted-foreground">
-              Section tree editing is available in the page builder.
-              Current tree size: {(treeSize / 1024).toFixed(1)} KB
+              Section tree editing is available in the page builder. Current tree size:{' '}
+              {(treeSize / 1024).toFixed(1)} KB
             </p>
           </div>
         )}
@@ -482,5 +476,5 @@ function SectionForm({ initial, saving, onSave, onCancel }: SectionFormProps) {
         </div>
       </form>
     </div>
-  );
+  )
 }

package/src/views/page-builder/TemplatePicker.tsx

@@ -1,6 +1,6 @@
-'use client';
+'use client'
 
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback } from 'react'
 import {
   X,
   Loader2,
@@ -11,23 +11,23 @@ import {
   Phone,
   BookOpen,
   File,
-} from 'lucide-react';
-import type { LucideIcon } from 'lucide-react';
-import { cmsApi } from '../../lib/api.js';
-import { createEmptyPage } from '@actuate-media/cms-core';
-import type { PageNode } from '@actuate-media/cms-core';
+} from 'lucide-react'
+import type { LucideIcon } from 'lucide-react'
+import { cmsApi } from '../../lib/api.js'
+import { createEmptyPage } from '@actuate-media/cms-core'
+import type { PageNode } from '@actuate-media/cms-core'
 
 export interface TemplatePickerProps {
-  onSelect: (templateTree: PageNode) => void;
-  onClose: () => void;
+  onSelect: (templateTree: PageNode) => void
+  onClose: () => void
 }
 
 interface PageTemplate {
-  id: string;
-  name: string;
-  description: string;
-  category: string;
-  tree: PageNode;
+  id: string
+  name: string
+  description: string
+  category: string
+  tree: PageNode
 }
 
 const categoryIcons: Record<string, LucideIcon> = {
@@ -36,7 +36,7 @@ const categoryIcons: Record<string, LucideIcon> = {
   contact: MapPin,
   portfolio: BookOpen,
   mobile: Phone,
-};
+}
 
 const categoryColors: Record<string, string> = {
   landing: 'bg-primary/10 text-primary',
@@ -44,53 +44,53 @@ const categoryColors: Record<string, string> = {
   contact: 'bg-primary/10 text-primary',
   portfolio: 'bg-accent text-foreground',
   mobile: 'bg-primary/10 text-primary',
-};
+}
 
 function resolveIcon(category: string): LucideIcon {
-  return categoryIcons[category] ?? File;
+  return categoryIcons[category] ?? File
 }
 
 function resolveBadgeColor(category: string): string {
-  return categoryColors[category] ?? 'bg-muted text-muted-foreground';
+  return categoryColors[category] ?? 'bg-muted text-muted-foreground'
 }
 
 export function TemplatePicker({ onSelect, onClose }: TemplatePickerProps) {
-  const [templates, setTemplates] = useState<PageTemplate[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
+  const [templates, setTemplates] = useState<PageTemplate[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
 
   const fetchTemplates = useCallback(async () => {
-    setLoading(true);
-    setError(null);
-    const res = await cmsApi<PageTemplate[]>('/page-templates');
+    setLoading(true)
+    setError(null)
+    const res = await cmsApi<PageTemplate[]>('/page-templates')
     if (res.error) {
-      setError(res.error);
+      setError(res.error)
     } else {
-      setTemplates(res.data ?? []);
+      setTemplates(res.data ?? [])
     }
-    setLoading(false);
-  }, []);
+    setLoading(false)
+  }, [])
 
   useEffect(() => {
-    fetchTemplates();
-  }, [fetchTemplates]);
+    fetchTemplates()
+  }, [fetchTemplates])
 
   useEffect(() => {
     function handleKeyDown(e: KeyboardEvent) {
-      if (e.key === 'Escape') onClose();
+      if (e.key === 'Escape') onClose()
     }
-    document.addEventListener('keydown', handleKeyDown);
-    return () => document.removeEventListener('keydown', handleKeyDown);
-  }, [onClose]);
+    document.addEventListener('keydown', handleKeyDown)
+    return () => document.removeEventListener('keydown', handleKeyDown)
+  }, [onClose])
 
   function handleBlankPage() {
-    onSelect(createEmptyPage());
-    onClose();
+    onSelect(createEmptyPage())
+    onClose()
   }
 
   function handleTemplateSelect(template: PageTemplate) {
-    onSelect(template.tree);
-    onClose();
+    onSelect(template.tree)
+    onClose()
   }
 
   return (
@@ -156,14 +156,12 @@ export function TemplatePicker({ onSelect, onClose }: TemplatePickerProps) {
                   <File size={20} />
                 </div>
                 <p className="text-sm font-medium text-foreground text-center">Blank Page</p>
-                <p className="text-xs text-muted-foreground text-center">
-                  Start from scratch
-                </p>
+                <p className="text-xs text-muted-foreground text-center">Start from scratch</p>
               </button>
 
               {templates.map((template) => {
-                const Icon = resolveIcon(template.category);
-                const badgeColor = resolveBadgeColor(template.category);
+                const Icon = resolveIcon(template.category)
+                const badgeColor = resolveBadgeColor(template.category)
 
                 return (
                   <button
@@ -184,18 +182,16 @@ export function TemplatePicker({ onSelect, onClose }: TemplatePickerProps) {
                         {template.description}
                       </p>
                     )}
-                    <span
-                      className={`inline-block text-xs px-2 py-0.5 rounded-full ${badgeColor}`}
-                    >
+                    <span className={`inline-block text-xs px-2 py-0.5 rounded-full ${badgeColor}`}>
                       {template.category}
                     </span>
                   </button>
-                );
+                )
               })}
             </div>
           )}
         </div>
       </div>
     </div>
-  );
+  )
 }

package/src/views/page-builder/block-renderers/CTAPreview.tsx

@@ -1,17 +1,17 @@
-'use client';
+'use client'
 
-import type { BlockPreviewProps } from './index.js';
+import type { BlockPreviewProps } from './index.js'
 
 export function CTAPreview({ data, variant = 'banner' }: BlockPreviewProps) {
-  const heading = (data.heading as string) || '';
-  const body = (data.body as string) || '';
-  const buttonText = (data.buttonText as string) || '';
+  const heading = (data.heading as string) || ''
+  const body = (data.body as string) || ''
+  const buttonText = (data.buttonText as string) || ''
 
   const button = (
     <span className="inline-block rounded-md bg-primary px-4 py-2 text-sm text-primary-foreground">
       {buttonText || 'Click Here'}
     </span>
-  );
+  )
 
   if (variant === 'inline') {
     return (
@@ -20,13 +20,11 @@ export function CTAPreview({ data, variant = 'banner' }: BlockPreviewProps) {
           <p className="text-sm font-medium text-foreground">
             {heading || <span className="text-muted-foreground">CTA Heading</span>}
           </p>
-          {body && (
-            <p className="mt-1 text-xs text-muted-foreground">{body}</p>
-          )}
+          {body && <p className="mt-1 text-xs text-muted-foreground">{body}</p>}
         </div>
         {button}
       </div>
-    );
+    )
   }
 
   if (variant === 'floating') {
@@ -44,7 +42,7 @@ export function CTAPreview({ data, variant = 'banner' }: BlockPreviewProps) {
           <div className="mt-4">{button}</div>
         </div>
       </div>
-    );
+    )
   }
 
   if (variant === 'split') {
@@ -62,7 +60,7 @@ export function CTAPreview({ data, variant = 'banner' }: BlockPreviewProps) {
         </div>
         <div className="shrink-0">{button}</div>
       </div>
-    );
+    )
   }
 
   return (
@@ -77,5 +75,5 @@ export function CTAPreview({ data, variant = 'banner' }: BlockPreviewProps) {
       )}
       <div className="mt-4">{button}</div>
     </div>
-  );
+  )
 }

package/src/views/page-builder/block-renderers/CardsPreview.tsx

@@ -1,18 +1,18 @@
-'use client';
+'use client'
 
-import { Image } from 'lucide-react';
-import type { BlockPreviewProps } from './index.js';
+import { Image } from 'lucide-react'
+import type { BlockPreviewProps } from './index.js'
 
 interface CardItem {
-  title?: string;
-  description?: string;
-  image?: string;
-  link?: string;
-  icon?: string;
+  title?: string
+  description?: string
+  image?: string
+  link?: string
+  icon?: string
 }
 
 export function CardsPreview({ data, variant = 'grid-3' }: BlockPreviewProps) {
-  const items = (data.items as CardItem[]) || [];
+  const items = (data.items as CardItem[]) || []
 
   const placeholderItems: CardItem[] =
     items.length > 0
@@ -21,7 +21,7 @@ export function CardsPreview({ data, variant = 'grid-3' }: BlockPreviewProps) {
           { title: 'Card Title', description: 'Card description text' },
           { title: 'Card Title', description: 'Card description text' },
           { title: 'Card Title', description: 'Card description text' },
-        ];
+        ]
 
   const gridClass =
     variant === 'grid-2'
@@ -30,7 +30,7 @@ export function CardsPreview({ data, variant = 'grid-3' }: BlockPreviewProps) {
         ? 'grid grid-cols-4 gap-3'
         : variant === 'horizontal'
           ? 'flex gap-3 overflow-hidden'
-          : 'grid grid-cols-3 gap-3';
+          : 'grid grid-cols-3 gap-3'
 
   return (
     <div className="rounded-md border border-border p-4">
@@ -53,9 +53,7 @@ export function CardsPreview({ data, variant = 'grid-3' }: BlockPreviewProps) {
             </div>
             <div className="p-3">
               <p className="text-sm font-medium text-foreground">
-                {item.title || (
-                  <span className="text-muted-foreground">Card Title</span>
-                )}
+                {item.title || <span className="text-muted-foreground">Card Title</span>}
               </p>
               {item.description && (
                 <p className="mt-1 text-xs text-muted-foreground line-clamp-2">
@@ -67,5 +65,5 @@ export function CardsPreview({ data, variant = 'grid-3' }: BlockPreviewProps) {
         ))}
       </div>
     </div>
-  );
+  )
 }