@actuate-media/cms-admin 0.8.0 → 0.8.2

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

@@ -1,29 +1,29 @@
-'use client';
+'use client'
 
-import { Code, Globe, Terminal } from 'lucide-react';
-import type { BlockPreviewProps } from './index.js';
+import { Code, Globe, Terminal } from 'lucide-react'
+import type { BlockPreviewProps } from './index.js'
 
 export function CodePreview({ data, variant = 'embed' }: BlockPreviewProps) {
-  const content = (data.content as string) || '';
-  const language = (data.language as string) || '';
-  const sandboxed = data.sandboxed as boolean | undefined;
+  const content = (data.content as string) || ''
+  const language = (data.language as string) || ''
+  const sandboxed = data.sandboxed as boolean | undefined
 
-  const truncated = content.length > 200 ? content.slice(0, 200) + '…' : content;
+  const truncated = content.length > 200 ? content.slice(0, 200) + '…' : content
 
   const icon =
-    variant === 'html'
-      ? <Globe size={14} className="text-muted-foreground" />
-      : variant === 'script'
-        ? <Terminal size={14} className="text-muted-foreground" />
-        : <Code size={14} className="text-muted-foreground" />;
+    variant === 'html' ? (
+      <Globe size={14} className="text-muted-foreground" />
+    ) : variant === 'script' ? (
+      <Terminal size={14} className="text-muted-foreground" />
+    ) : (
+      <Code size={14} className="text-muted-foreground" />
+    )
 
   return (
     <div className="overflow-hidden rounded-md border border-border">
       <div className="flex items-center gap-2 border-b border-border bg-card px-3 py-2">
         {icon}
-        <span className="text-xs text-muted-foreground">
-          {language || variant}
-        </span>
+        <span className="text-xs text-muted-foreground">{language || variant}</span>
         {sandboxed && (
           <span className="ml-auto rounded bg-muted px-1.5 py-0.5 text-xs text-muted-foreground">
             sandboxed
@@ -42,5 +42,5 @@ export function CodePreview({ data, variant = 'embed' }: BlockPreviewProps) {
         )}
       </div>
     </div>
-  );
+  )
 }

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

@@ -1,15 +1,15 @@
-'use client';
+'use client'
 
-import { ChevronDown } from 'lucide-react';
-import type { BlockPreviewProps } from './index.js';
+import { ChevronDown } from 'lucide-react'
+import type { BlockPreviewProps } from './index.js'
 
 interface FAQItem {
-  question?: string;
-  answer?: string;
+  question?: string
+  answer?: string
 }
 
 export function FAQPreview({ data, variant = 'accordion' }: BlockPreviewProps) {
-  const items = (data.items as FAQItem[]) || [];
+  const items = (data.items as FAQItem[]) || []
 
   const placeholderItems: FAQItem[] =
     items.length > 0
@@ -17,13 +17,16 @@ export function FAQPreview({ data, variant = 'accordion' }: BlockPreviewProps) {
       : [
           { question: 'What is this?', answer: 'Answer to the first question goes here.' },
           { question: 'How does it work?', answer: 'Answer to the second question goes here.' },
-          { question: 'Where can I learn more?', answer: 'Answer to the third question goes here.' },
-        ];
+          {
+            question: 'Where can I learn more?',
+            answer: 'Answer to the third question goes here.',
+          },
+        ]
 
   if (variant === 'two-column') {
-    const mid = Math.ceil(placeholderItems.length / 2);
-    const col1 = placeholderItems.slice(0, mid);
-    const col2 = placeholderItems.slice(mid);
+    const mid = Math.ceil(placeholderItems.length / 2)
+    const col1 = placeholderItems.slice(0, mid)
+    const col2 = placeholderItems.slice(mid)
 
     return (
       <div className="rounded-md border border-border p-4">
@@ -44,7 +47,7 @@ export function FAQPreview({ data, variant = 'accordion' }: BlockPreviewProps) {
           ))}
         </div>
       </div>
-    );
+    )
   }
 
   if (variant === 'list') {
@@ -53,9 +56,7 @@ export function FAQPreview({ data, variant = 'accordion' }: BlockPreviewProps) {
         <div className="flex flex-col gap-3">
           {placeholderItems.map((item, i) => (
             <div key={i} className="border-b border-border pb-3 last:border-b-0 last:pb-0">
-              <p className="text-sm font-medium text-foreground">
-                {item.question || 'Question?'}
-              </p>
+              <p className="text-sm font-medium text-foreground">{item.question || 'Question?'}</p>
               <p className="mt-1 text-xs text-muted-foreground line-clamp-2">
                 {item.answer || 'Answer text…'}
               </p>
@@ -63,7 +64,7 @@ export function FAQPreview({ data, variant = 'accordion' }: BlockPreviewProps) {
           ))}
         </div>
       </div>
-    );
+    )
   }
 
   return (
@@ -72,19 +73,15 @@ export function FAQPreview({ data, variant = 'accordion' }: BlockPreviewProps) {
         {placeholderItems.map((item, i) => (
           <div key={i} className="rounded-md border border-border p-3">
             <div className="flex items-center justify-between">
-              <p className="text-sm font-medium text-foreground">
-                {item.question || 'Question?'}
-              </p>
+              <p className="text-sm font-medium text-foreground">{item.question || 'Question?'}</p>
               <ChevronDown size={14} className="shrink-0 text-muted-foreground" />
             </div>
             {i === 0 && (
-              <p className="mt-2 text-xs text-muted-foreground">
-                {item.answer || 'Answer text…'}
-              </p>
+              <p className="mt-2 text-xs text-muted-foreground">{item.answer || 'Answer text…'}</p>
             )}
           </div>
         ))}
       </div>
     </div>
-  );
+  )
 }

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

@@ -1,10 +1,10 @@
-'use client';
+'use client'
 
-import { Box } from 'lucide-react';
+import { Box } from 'lucide-react'
 
 export interface FallbackPreviewProps {
-  blockType: string;
-  data: Record<string, unknown>;
+  blockType: string
+  data: Record<string, unknown>
 }
 
 export function FallbackPreview({ blockType }: FallbackPreviewProps) {
@@ -14,5 +14,5 @@ export function FallbackPreview({ blockType }: FallbackPreviewProps) {
       <p className="text-sm font-medium text-muted-foreground">{blockType}</p>
       <p className="text-xs text-muted-foreground">No preview available</p>
     </div>
-  );
+  )
 }

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

@@ -1,19 +1,17 @@
-'use client';
+'use client'
 
-import { FileText, Mail, Send } from 'lucide-react';
-import type { BlockPreviewProps } from './index.js';
+import { FileText, Mail, Send } from 'lucide-react'
+import type { BlockPreviewProps } from './index.js'
 
 export function FormPreview({ data, variant = 'contact' }: BlockPreviewProps) {
-  const formId = (data.formId as string) || '';
+  const formId = (data.formId as string) || ''
 
   if (variant === 'newsletter') {
     return (
       <div className="rounded-md border border-border p-6 text-center">
         <Mail size={24} className="mx-auto text-muted-foreground" />
         <p className="mt-3 text-sm font-medium text-foreground">Newsletter Signup</p>
-        {formId && (
-          <p className="mt-1 text-xs text-muted-foreground">Form: {formId}</p>
-        )}
+        {formId && <p className="mt-1 text-xs text-muted-foreground">Form: {formId}</p>}
         <div className="mx-auto mt-4 flex max-w-xs gap-2">
           <div className="h-9 flex-1 rounded-md border border-border bg-input-background" />
           <div className="flex h-9 items-center rounded-md bg-primary px-3">
@@ -21,7 +19,7 @@ export function FormPreview({ data, variant = 'contact' }: BlockPreviewProps) {
           </div>
         </div>
       </div>
-    );
+    )
   }
 
   if (variant === 'custom') {
@@ -44,15 +42,13 @@ export function FormPreview({ data, variant = 'contact' }: BlockPreviewProps) {
           </span>
         </div>
       </div>
-    );
+    )
   }
 
   return (
     <div className="rounded-md border border-border p-5">
       <p className="text-sm font-medium text-foreground">Contact Form</p>
-      {formId && (
-        <p className="mt-1 text-xs text-muted-foreground">Form: {formId}</p>
-      )}
+      {formId && <p className="mt-1 text-xs text-muted-foreground">Form: {formId}</p>}
       <div className="mt-3 grid grid-cols-2 gap-2">
         <div className="h-8 rounded-md border border-border bg-input-background" />
         <div className="h-8 rounded-md border border-border bg-input-background" />
@@ -65,5 +61,5 @@ export function FormPreview({ data, variant = 'contact' }: BlockPreviewProps) {
         </span>
       </div>
     </div>
-  );
+  )
 }

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

@@ -1,31 +1,31 @@
-'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 GalleryImage {
-  src?: string;
-  alt?: string;
-  caption?: string;
+  src?: string
+  alt?: string
+  caption?: string
 }
 
 export function GalleryPreview({ data, variant = 'grid' }: BlockPreviewProps) {
-  const images = (data.images as GalleryImage[]) || [];
+  const images = (data.images as GalleryImage[]) || []
 
   const placeholders: GalleryImage[] =
-    images.length > 0
-      ? images
-      : Array.from({ length: 6 }, (_, i) => ({ alt: `Image ${i + 1}` }));
+    images.length > 0 ? images : Array.from({ length: 6 }, (_, i) => ({ alt: `Image ${i + 1}` }))
 
   const Thumbnail = ({ item, className = '' }: { item: GalleryImage; className?: string }) => (
-    <div className={`flex items-center justify-center overflow-hidden rounded-md bg-muted ${className}`}>
+    <div
+      className={`flex items-center justify-center overflow-hidden rounded-md bg-muted ${className}`}
+    >
       {item.src ? (
         <img src={item.src} alt={item.alt || ''} className="h-full w-full object-cover" />
       ) : (
         <Image size={20} className="text-muted-foreground" />
       )}
     </div>
-  );
+  )
 
   if (variant === 'masonry') {
     return (
@@ -35,12 +35,14 @@ export function GalleryPreview({ data, variant = 'grid' }: BlockPreviewProps) {
             <Thumbnail
               key={i}
               item={item}
-              className={i % 3 === 0 ? 'aspect-square' : i % 3 === 1 ? 'aspect-[3/4]' : 'aspect-[4/3]'}
+              className={
+                i % 3 === 0 ? 'aspect-square' : i % 3 === 1 ? 'aspect-[3/4]' : 'aspect-[4/3]'
+              }
             />
           ))}
         </div>
       </div>
-    );
+    )
   }
 
   if (variant === 'carousel') {
@@ -48,22 +50,16 @@ export function GalleryPreview({ data, variant = 'grid' }: BlockPreviewProps) {
       <div className="overflow-hidden rounded-md border border-border p-4">
         <div className="flex gap-3 overflow-hidden">
           {placeholders.slice(0, 4).map((item, i) => (
-            <Thumbnail
-              key={i}
-              item={item}
-              className="aspect-square min-w-[120px] flex-1"
-            />
+            <Thumbnail key={i} item={item} className="aspect-square min-w-[120px] flex-1" />
           ))}
           {placeholders.length > 4 && (
             <div className="flex min-w-[120px] flex-1 items-center justify-center rounded-md bg-muted">
-              <span className="text-sm text-muted-foreground">
-                +{placeholders.length - 4}
-              </span>
+              <span className="text-sm text-muted-foreground">+{placeholders.length - 4}</span>
             </div>
           )}
         </div>
       </div>
-    );
+    )
   }
 
   if (variant === 'lightbox') {
@@ -74,11 +70,9 @@ export function GalleryPreview({ data, variant = 'grid' }: BlockPreviewProps) {
             <Thumbnail key={i} item={item} className="aspect-square" />
           ))}
         </div>
-        <p className="mt-2 text-center text-xs text-muted-foreground">
-          Click to open lightbox
-        </p>
+        <p className="mt-2 text-center text-xs text-muted-foreground">Click to open lightbox</p>
       </div>
-    );
+    )
   }
 
   return (
@@ -89,5 +83,5 @@ export function GalleryPreview({ data, variant = 'grid' }: BlockPreviewProps) {
         ))}
       </div>
     </div>
-  );
+  )
 }

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

@@ -1,14 +1,14 @@
-'use client';
+'use client'
 
-import { Image, Play } from 'lucide-react';
-import type { BlockPreviewProps } from './index.js';
+import { Image, Play } from 'lucide-react'
+import type { BlockPreviewProps } from './index.js'
 
 export function HeroPreview({ data, variant = 'centered' }: BlockPreviewProps) {
-  const title = (data.title as string) || '';
-  const subtitle = (data.subtitle as string) || '';
-  const image = data.image as string | undefined;
-  const ctaText = (data.ctaText as string) || '';
-  const overlayOpacity = (data.overlayOpacity as number) ?? 0.4;
+  const title = (data.title as string) || ''
+  const subtitle = (data.subtitle as string) || ''
+  const image = data.image as string | undefined
+  const ctaText = (data.ctaText as string) || ''
+  const overlayOpacity = (data.overlayOpacity as number) ?? 0.4
 
   if (variant === 'split-image') {
     return (
@@ -18,9 +18,7 @@ export function HeroPreview({ data, variant = 'centered' }: BlockPreviewProps) {
             {title || <span className="text-muted-foreground">Hero Title</span>}
           </h2>
           {(subtitle || !title) && (
-            <p className="text-sm text-muted-foreground">
-              {subtitle || 'Subtitle text goes here'}
-            </p>
+            <p className="text-sm text-muted-foreground">{subtitle || 'Subtitle text goes here'}</p>
           )}
           {ctaText && (
             <div className="mt-2">
@@ -38,7 +36,7 @@ export function HeroPreview({ data, variant = 'centered' }: BlockPreviewProps) {
           )}
         </div>
       </div>
-    );
+    )
   }
 
   if (variant === 'minimal') {
@@ -48,9 +46,7 @@ export function HeroPreview({ data, variant = 'centered' }: BlockPreviewProps) {
           {title || <span className="text-muted-foreground">Hero Title</span>}
         </h2>
         {(subtitle || !title) && (
-          <p className="text-sm text-muted-foreground">
-            {subtitle || 'Subtitle text goes here'}
-          </p>
+          <p className="text-sm text-muted-foreground">{subtitle || 'Subtitle text goes here'}</p>
         )}
         {ctaText && (
           <span className="mt-2 inline-block rounded-md bg-primary px-4 py-2 text-sm text-primary-foreground">
@@ -58,26 +54,19 @@ export function HeroPreview({ data, variant = 'centered' }: BlockPreviewProps) {
           </span>
         )}
       </div>
-    );
+    )
   }
 
-  const isVideo = variant === 'video-bg';
+  const isVideo = variant === 'video-bg'
 
   return (
     <div className="relative flex min-h-[220px] flex-col items-center justify-center gap-3 overflow-hidden rounded-md border border-border p-8">
       {image ? (
-        <img
-          src={image}
-          alt=""
-          className="absolute inset-0 h-full w-full object-cover"
-        />
+        <img src={image} alt="" className="absolute inset-0 h-full w-full object-cover" />
       ) : (
         <div className="absolute inset-0 bg-muted" />
       )}
-      <div
-        className="absolute inset-0 bg-background"
-        style={{ opacity: overlayOpacity }}
-      />
+      <div className="absolute inset-0 bg-background" style={{ opacity: overlayOpacity }} />
       <div className="relative z-10 flex flex-col items-center gap-3 text-center">
         {isVideo && (
           <div className="mb-2 flex h-12 w-12 items-center justify-center rounded-full bg-primary/90">
@@ -88,9 +77,7 @@ export function HeroPreview({ data, variant = 'centered' }: BlockPreviewProps) {
           {title || <span className="text-muted-foreground">Hero Title</span>}
         </h2>
         {(subtitle || !title) && (
-          <p className="text-sm text-muted-foreground">
-            {subtitle || 'Subtitle text goes here'}
-          </p>
+          <p className="text-sm text-muted-foreground">{subtitle || 'Subtitle text goes here'}</p>
         )}
         {ctaText && (
           <span className="mt-2 inline-block rounded-md bg-primary px-4 py-2 text-sm text-primary-foreground">
@@ -99,5 +86,5 @@ export function HeroPreview({ data, variant = 'centered' }: BlockPreviewProps) {
         )}
       </div>
     </div>
-  );
+  )
 }

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

@@ -1,15 +1,15 @@
-'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'
 
 export function ImagePreview({ data, variant = 'full-width' }: BlockPreviewProps) {
-  const src = data.src as string | undefined;
-  const alt = (data.alt as string) || '';
-  const caption = (data.caption as string) || '';
-  const aspectRatio = (data.aspectRatio as string) || '16/9';
+  const src = data.src as string | undefined
+  const alt = (data.alt as string) || ''
+  const caption = (data.caption as string) || ''
+  const aspectRatio = (data.aspectRatio as string) || '16/9'
 
-  const roundedClass = variant === 'rounded' ? 'rounded-xl' : 'rounded-md';
+  const roundedClass = variant === 'rounded' ? 'rounded-xl' : 'rounded-md'
 
   const ImagePlaceholder = ({ className = '' }: { className?: string }) => (
     <div
@@ -18,7 +18,7 @@ export function ImagePreview({ data, variant = 'full-width' }: BlockPreviewProps
     >
       <Image size={32} className="text-muted-foreground" />
     </div>
-  );
+  )
 
   const ImageElement = ({ className = '' }: { className?: string }) =>
     src ? (
@@ -30,7 +30,7 @@ export function ImagePreview({ data, variant = 'full-width' }: BlockPreviewProps
       />
     ) : (
       <ImagePlaceholder className={className} />
-    );
+    )
 
   if (variant === 'side-by-side') {
     return (
@@ -38,7 +38,7 @@ export function ImagePreview({ data, variant = 'full-width' }: BlockPreviewProps
         <ImageElement />
         <ImagePlaceholder />
       </div>
-    );
+    )
   }
 
   return (
@@ -50,5 +50,5 @@ export function ImagePreview({ data, variant = 'full-width' }: BlockPreviewProps
         </figcaption>
       )}
     </figure>
-  );
+  )
 }

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

@@ -1,27 +1,29 @@
-'use client';
+'use client'
 
-import type { BlockPreviewProps } from './index.js';
+import type { BlockPreviewProps } from './index.js'
 
 export function TextPreview({ data, variant = 'prose' }: BlockPreviewProps) {
-  const body = (data.body as string) || '';
-  const heading = (data.heading as string) || '';
-  const headingLevel = (data.headingLevel as string) || 'h2';
+  const body = (data.body as string) || ''
+  const heading = (data.heading as string) || ''
+  const headingLevel = (data.headingLevel as string) || 'h2'
 
-  const truncatedBody = body.length > 300 ? body.slice(0, 300) + '…' : body;
+  const truncatedBody = body.length > 300 ? body.slice(0, 300) + '…' : body
 
-  const validLevels = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const;
-  const HeadingTag = (validLevels.includes(headingLevel as any) ? headingLevel : 'h2') as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  const validLevels = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const
+  const HeadingTag = (validLevels.includes(headingLevel as any) ? headingLevel : 'h2') as
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
   const headingSizeClass =
-    HeadingTag === 'h1'
-      ? 'text-2xl'
-      : HeadingTag === 'h2'
-        ? 'text-xl'
-        : 'text-lg';
+    HeadingTag === 'h1' ? 'text-2xl' : HeadingTag === 'h2' ? 'text-xl' : 'text-lg'
 
   if (variant === 'two-column') {
-    const midpoint = Math.ceil(truncatedBody.length / 2);
-    const col1 = truncatedBody.slice(0, midpoint);
-    const col2 = truncatedBody.slice(midpoint);
+    const midpoint = Math.ceil(truncatedBody.length / 2)
+    const col1 = truncatedBody.slice(0, midpoint)
+    const col2 = truncatedBody.slice(midpoint)
 
     return (
       <div className="rounded-md border border-border p-5">
@@ -39,7 +41,7 @@ export function TextPreview({ data, variant = 'prose' }: BlockPreviewProps) {
           </p>
         </div>
       </div>
-    );
+    )
   }
 
   if (variant === 'with-sidebar') {
@@ -61,7 +63,7 @@ export function TextPreview({ data, variant = 'prose' }: BlockPreviewProps) {
           <div className="mt-1 h-2 w-2/3 rounded bg-border" />
         </aside>
       </div>
-    );
+    )
   }
 
   return (
@@ -72,10 +74,8 @@ export function TextPreview({ data, variant = 'prose' }: BlockPreviewProps) {
         </HeadingTag>
       )}
       <p className="text-sm leading-relaxed text-muted-foreground">
-        {truncatedBody || (
-          <span className="italic">Body text content goes here…</span>
-        )}
+        {truncatedBody || <span className="italic">Body text content goes here…</span>}
       </p>
     </div>
-  );
+  )
 }

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

@@ -1,17 +1,16 @@
-'use client';
+'use client'
 
-import { Play } from 'lucide-react';
-import type { BlockPreviewProps } from './index.js';
+import { Play } from 'lucide-react'
+import type { BlockPreviewProps } from './index.js'
 
 export function VideoPreview({ data, variant = 'inline' }: BlockPreviewProps) {
-  const poster = data.poster as string | undefined;
-  const autoplay = data.autoplay as boolean | undefined;
-  const loop = data.loop as boolean | undefined;
+  const poster = data.poster as string | undefined
+  const autoplay = data.autoplay as boolean | undefined
+  const loop = data.loop as boolean | undefined
 
-  const badges: string[] = [
-    autoplay ? 'Autoplay' : '',
-    loop ? 'Loop' : '',
-  ].filter((b): b is string => b !== '');
+  const badges: string[] = [autoplay ? 'Autoplay' : '', loop ? 'Loop' : ''].filter(
+    (b): b is string => b !== '',
+  )
 
   const content = (
     <div className="relative flex aspect-video items-center justify-center overflow-hidden rounded-md bg-muted">
@@ -36,7 +35,7 @@ export function VideoPreview({ data, variant = 'inline' }: BlockPreviewProps) {
         </div>
       )}
     </div>
-  );
+  )
 
   if (variant === 'background') {
     return (
@@ -54,7 +53,7 @@ export function VideoPreview({ data, variant = 'inline' }: BlockPreviewProps) {
           </div>
         </div>
       </div>
-    );
+    )
   }
 
   if (variant === 'lightbox') {
@@ -67,12 +66,8 @@ export function VideoPreview({ data, variant = 'inline' }: BlockPreviewProps) {
           </p>
         </div>
       </div>
-    );
+    )
   }
 
-  return (
-    <div className="rounded-md border border-border p-4">
-      {content}
-    </div>
-  );
+  return <div className="rounded-md border border-border p-4">{content}</div>
 }