@actuate-media/cms-admin 0.8.0 → 0.8.1

package/src/views/page-builder/block-renderers/index.ts

@@ -1,20 +1,20 @@
-'use client';
+'use client'
 
-import type { ComponentType } from 'react';
-import { HeroPreview } from './HeroPreview.js';
-import { TextPreview } from './TextPreview.js';
-import { ImagePreview } from './ImagePreview.js';
-import { CardsPreview } from './CardsPreview.js';
-import { CTAPreview } from './CTAPreview.js';
-import { VideoPreview } from './VideoPreview.js';
-import { GalleryPreview } from './GalleryPreview.js';
-import { FAQPreview } from './FAQPreview.js';
-import { FormPreview } from './FormPreview.js';
-import { CodePreview } from './CodePreview.js';
+import type { ComponentType } from 'react'
+import { HeroPreview } from './HeroPreview.js'
+import { TextPreview } from './TextPreview.js'
+import { ImagePreview } from './ImagePreview.js'
+import { CardsPreview } from './CardsPreview.js'
+import { CTAPreview } from './CTAPreview.js'
+import { VideoPreview } from './VideoPreview.js'
+import { GalleryPreview } from './GalleryPreview.js'
+import { FAQPreview } from './FAQPreview.js'
+import { FormPreview } from './FormPreview.js'
+import { CodePreview } from './CodePreview.js'
 
 export interface BlockPreviewProps {
-  data: Record<string, unknown>;
-  variant?: string;
+  data: Record<string, unknown>
+  variant?: string
 }
 
 export const blockRenderers: Record<string, ComponentType<BlockPreviewProps>> = {
@@ -28,7 +28,7 @@ export const blockRenderers: Record<string, ComponentType<BlockPreviewProps>> =
   faq: FAQPreview,
   form: FormPreview,
   code: CodePreview,
-};
+}
 
-export { FallbackPreview } from './FallbackPreview.js';
-export type { FallbackPreviewProps } from './FallbackPreview.js';
+export { FallbackPreview } from './FallbackPreview.js'
+export type { FallbackPreviewProps } from './FallbackPreview.js'

package/src/views/page-builder/canvas/BlockRenderer.tsx

@@ -1,13 +1,13 @@
-'use client';
+'use client'
 
-import { useState } from 'react';
-import { Box, Type, Image, Layout, Star } from 'lucide-react';
-import type { BlockNode } from '@actuate-media/cms-core';
+import { useState } from 'react'
+import { Box, Type, Image, Layout, Star } from 'lucide-react'
+import type { BlockNode } from '@actuate-media/cms-core'
 
 export interface BlockRendererProps {
-  node: BlockNode;
-  selectedNodeId: string | null;
-  onSelectNode: (id: string | null) => void;
+  node: BlockNode
+  selectedNodeId: string | null
+  onSelectNode: (id: string | null) => void
 }
 
 const BLOCK_ICONS: Record<string, typeof Box> = {
@@ -15,33 +15,29 @@ const BLOCK_ICONS: Record<string, typeof Box> = {
   text: Type,
   image: Image,
   layout: Layout,
-};
+}
 
 function getBlockLabel(blockType: string): string {
-  return blockType.charAt(0).toUpperCase() + blockType.slice(1);
+  return blockType.charAt(0).toUpperCase() + blockType.slice(1)
 }
 
 export function BlockRenderer({ node, selectedNodeId, onSelectNode }: BlockRendererProps) {
-  const [hovered, setHovered] = useState(false);
-  const isSelected = selectedNodeId === node.id;
-  const blockType = node.settings.blockType;
-  const label = getBlockLabel(blockType);
-  const Icon = BLOCK_ICONS[blockType] ?? Box;
+  const [hovered, setHovered] = useState(false)
+  const isSelected = selectedNodeId === node.id
+  const blockType = node.settings.blockType
+  const label = getBlockLabel(blockType)
+  const Icon = BLOCK_ICONS[blockType] ?? Box
 
   const handleClick = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    onSelectNode(node.id);
-  };
+    e.stopPropagation()
+    onSelectNode(node.id)
+  }
 
   return (
     <div
       data-node-id={node.id}
       className={`relative min-h-[48px] transition-shadow ${
-        isSelected
-          ? 'ring-2 ring-primary ring-offset-2'
-          : hovered
-            ? 'ring-1 ring-primary/50'
-            : ''
+        isSelected ? 'ring-2 ring-primary ring-offset-2' : hovered ? 'ring-1 ring-primary/50' : ''
       }`}
       onClick={handleClick}
       onMouseEnter={() => setHovered(true)}
@@ -58,5 +54,5 @@ export function BlockRenderer({ node, selectedNodeId, onSelectNode }: BlockRende
         <span className="text-sm text-muted-foreground">{label}</span>
       </div>
     </div>
-  );
+  )
 }

package/src/views/page-builder/canvas/BuilderCanvas.tsx

@@ -1,22 +1,22 @@
-'use client';
+'use client'
 
-import { LayoutGrid } from 'lucide-react';
-import type { PageNode } from '@actuate-media/cms-core';
-import { SectionRenderer } from './SectionRenderer.js';
+import { LayoutGrid } from 'lucide-react'
+import type { PageNode } from '@actuate-media/cms-core'
+import { SectionRenderer } from './SectionRenderer.js'
 
 export interface BuilderCanvasProps {
-  tree: PageNode;
-  selectedNodeId: string | null;
-  showGridOverlay: boolean;
-  deviceMode: 'desktop' | 'tablet' | 'mobile';
-  onSelectNode: (id: string | null) => void;
+  tree: PageNode
+  selectedNodeId: string | null
+  showGridOverlay: boolean
+  deviceMode: 'desktop' | 'tablet' | 'mobile'
+  onSelectNode: (id: string | null) => void
 }
 
 const DEVICE_CLASSES: Record<BuilderCanvasProps['deviceMode'], string> = {
   desktop: 'w-full',
   tablet: 'max-w-[768px] mx-auto',
   mobile: 'max-w-[375px] mx-auto',
-};
+}
 
 export function BuilderCanvas({
   tree,
@@ -27,15 +27,12 @@ export function BuilderCanvas({
 }: BuilderCanvasProps) {
   const handleCanvasClick = (e: React.MouseEvent) => {
     if (e.target === e.currentTarget) {
-      onSelectNode(null);
+      onSelectNode(null)
     }
-  };
+  }
 
   return (
-    <div
-      className="relative flex-1 overflow-auto bg-muted p-6"
-      onClick={handleCanvasClick}
-    >
+    <div className="relative flex-1 overflow-auto bg-muted p-6" onClick={handleCanvasClick}>
       {showGridOverlay && <GridOverlay deviceMode={deviceMode} />}
 
       <div
@@ -51,9 +48,9 @@ export function BuilderCanvas({
                 selectedNodeId={selectedNodeId}
                 onSelectNode={onSelectNode}
               />
-            );
+            )
           }
-          return null;
+          return null
         })}
 
         {tree.children.length === 0 && (
@@ -67,7 +64,7 @@ export function BuilderCanvas({
         )}
       </div>
     </div>
-  );
+  )
 }
 
 function GridOverlay({ deviceMode }: { deviceMode: BuilderCanvasProps['deviceMode'] }) {
@@ -86,5 +83,5 @@ function GridOverlay({ deviceMode }: { deviceMode: BuilderCanvasProps['deviceMod
         ))}
       </div>
     </div>
-  );
+  )
 }

package/src/views/page-builder/canvas/ColumnRenderer.tsx

@@ -1,36 +1,32 @@
-'use client';
+'use client'
 
-import { useState } from 'react';
-import type { ColumnNode } from '@actuate-media/cms-core';
-import { BlockRenderer } from './BlockRenderer.js';
-import { ContainerRenderer } from './ContainerRenderer.js';
+import { useState } from 'react'
+import type { ColumnNode } from '@actuate-media/cms-core'
+import { BlockRenderer } from './BlockRenderer.js'
+import { ContainerRenderer } from './ContainerRenderer.js'
 
 export interface ColumnRendererProps {
-  node: ColumnNode;
-  selectedNodeId: string | null;
-  onSelectNode: (id: string | null) => void;
+  node: ColumnNode
+  selectedNodeId: string | null
+  onSelectNode: (id: string | null) => void
 }
 
 export function ColumnRenderer({ node, selectedNodeId, onSelectNode }: ColumnRendererProps) {
-  const [hovered, setHovered] = useState(false);
-  const isSelected = selectedNodeId === node.id;
-  const width = node.settings.width;
-  const isEmpty = node.children.length === 0;
+  const [hovered, setHovered] = useState(false)
+  const isSelected = selectedNodeId === node.id
+  const width = node.settings.width
+  const isEmpty = node.children.length === 0
 
   const handleClick = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    onSelectNode(node.id);
-  };
+    e.stopPropagation()
+    onSelectNode(node.id)
+  }
 
   return (
     <div
       data-node-id={node.id}
       className={`relative transition-shadow ${
-        isSelected
-          ? 'ring-2 ring-primary ring-offset-2'
-          : hovered
-            ? 'ring-1 ring-primary/50'
-            : ''
+        isSelected ? 'ring-2 ring-primary ring-offset-2' : hovered ? 'ring-1 ring-primary/50' : ''
       }`}
       style={{
         gridColumn: `span ${width}`,
@@ -39,8 +35,8 @@ export function ColumnRenderer({ node, selectedNodeId, onSelectNode }: ColumnRen
       }}
       onClick={handleClick}
       onMouseEnter={(e) => {
-        e.stopPropagation();
-        setHovered(true);
+        e.stopPropagation()
+        setHovered(true)
       }}
       onMouseLeave={() => setHovered(false)}
     >
@@ -65,7 +61,7 @@ export function ColumnRenderer({ node, selectedNodeId, onSelectNode }: ColumnRen
                   selectedNodeId={selectedNodeId}
                   onSelectNode={onSelectNode}
                 />
-              );
+              )
             }
             if (child.type === 'container') {
               return (
@@ -75,12 +71,12 @@ export function ColumnRenderer({ node, selectedNodeId, onSelectNode }: ColumnRen
                   selectedNodeId={selectedNodeId}
                   onSelectNode={onSelectNode}
                 />
-              );
+              )
             }
-            return null;
+            return null
           })}
         </div>
       )}
     </div>
-  );
+  )
 }

package/src/views/page-builder/canvas/ContainerRenderer.tsx

@@ -1,42 +1,38 @@
-'use client';
+'use client'
 
-import { useState } from 'react';
-import type { ContainerNode } from '@actuate-media/cms-core';
-import { RowRenderer } from './RowRenderer.js';
+import { useState } from 'react'
+import type { ContainerNode } from '@actuate-media/cms-core'
+import { RowRenderer } from './RowRenderer.js'
 
 export interface ContainerRendererProps {
-  node: ContainerNode;
-  selectedNodeId: string | null;
-  onSelectNode: (id: string | null) => void;
+  node: ContainerNode
+  selectedNodeId: string | null
+  onSelectNode: (id: string | null) => void
 }
 
 export function ContainerRenderer({ node, selectedNodeId, onSelectNode }: ContainerRendererProps) {
-  const [hovered, setHovered] = useState(false);
-  const isSelected = selectedNodeId === node.id;
-  const maxWidth = node.settings.maxWidth ?? '1200px';
-  const alignment = node.settings.alignment ?? 'center';
-  const padding = node.settings.padding;
+  const [hovered, setHovered] = useState(false)
+  const isSelected = selectedNodeId === node.id
+  const maxWidth = node.settings.maxWidth ?? '1200px'
+  const alignment = node.settings.alignment ?? 'center'
+  const padding = node.settings.padding
 
   const marginMap: Record<string, string> = {
     left: '0 auto 0 0',
     center: '0 auto',
     right: '0 0 0 auto',
-  };
+  }
 
   const handleClick = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    onSelectNode(node.id);
-  };
+    e.stopPropagation()
+    onSelectNode(node.id)
+  }
 
   return (
     <div
       data-node-id={node.id}
       className={`relative transition-shadow ${
-        isSelected
-          ? 'ring-2 ring-primary ring-offset-2'
-          : hovered
-            ? 'ring-1 ring-primary/50'
-            : ''
+        isSelected ? 'ring-2 ring-primary ring-offset-2' : hovered ? 'ring-1 ring-primary/50' : ''
       }`}
       style={{
         maxWidth,
@@ -45,8 +41,8 @@ export function ContainerRenderer({ node, selectedNodeId, onSelectNode }: Contai
       }}
       onClick={handleClick}
       onMouseEnter={(e) => {
-        e.stopPropagation();
-        setHovered(true);
+        e.stopPropagation()
+        setHovered(true)
       }}
       onMouseLeave={() => setHovered(false)}
     >
@@ -67,5 +63,5 @@ export function ContainerRenderer({ node, selectedNodeId, onSelectNode }: Contai
         ))}
       </div>
     </div>
-  );
+  )
 }

package/src/views/page-builder/canvas/RowRenderer.tsx

@@ -1,47 +1,43 @@
-'use client';
+'use client'
 
-import { useState } from 'react';
-import type { RowNode } from '@actuate-media/cms-core';
-import { ColumnRenderer } from './ColumnRenderer.js';
+import { useState } from 'react'
+import type { RowNode } from '@actuate-media/cms-core'
+import { ColumnRenderer } from './ColumnRenderer.js'
 
 export interface RowRendererProps {
-  node: RowNode;
-  selectedNodeId: string | null;
-  onSelectNode: (id: string | null) => void;
+  node: RowNode
+  selectedNodeId: string | null
+  onSelectNode: (id: string | null) => void
 }
 
 export function RowRenderer({ node, selectedNodeId, onSelectNode }: RowRendererProps) {
-  const [hovered, setHovered] = useState(false);
-  const isSelected = selectedNodeId === node.id;
-  const gap = node.settings.gap ?? '16px';
-  const verticalAlign = node.settings.verticalAlign ?? 'stretch';
+  const [hovered, setHovered] = useState(false)
+  const isSelected = selectedNodeId === node.id
+  const gap = node.settings.gap ?? '16px'
+  const verticalAlign = node.settings.verticalAlign ?? 'stretch'
 
   const alignMap: Record<string, string> = {
     top: 'start',
     center: 'center',
     bottom: 'end',
     stretch: 'stretch',
-  };
+  }
 
   const handleClick = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    onSelectNode(node.id);
-  };
+    e.stopPropagation()
+    onSelectNode(node.id)
+  }
 
   return (
     <div
       data-node-id={node.id}
       className={`relative transition-shadow ${
-        isSelected
-          ? 'ring-2 ring-primary ring-offset-2'
-          : hovered
-            ? 'ring-1 ring-primary/50'
-            : ''
+        isSelected ? 'ring-2 ring-primary ring-offset-2' : hovered ? 'ring-1 ring-primary/50' : ''
       }`}
       onClick={handleClick}
       onMouseEnter={(e) => {
-        e.stopPropagation();
-        setHovered(true);
+        e.stopPropagation()
+        setHovered(true)
       }}
       onMouseLeave={() => setHovered(false)}
     >
@@ -68,5 +64,5 @@ export function RowRenderer({ node, selectedNodeId, onSelectNode }: RowRendererP
         ))}
       </div>
     </div>
-  );
+  )
 }

package/src/views/page-builder/canvas/SectionRenderer.tsx

@@ -1,65 +1,61 @@
-'use client';
+'use client'
 
-import { useState } from 'react';
-import type { SectionNode } from '@actuate-media/cms-core';
-import { ContainerRenderer } from './ContainerRenderer.js';
-import { RowRenderer } from './RowRenderer.js';
+import { useState } from 'react'
+import type { SectionNode } from '@actuate-media/cms-core'
+import { ContainerRenderer } from './ContainerRenderer.js'
+import { RowRenderer } from './RowRenderer.js'
 
 export interface SectionRendererProps {
-  node: SectionNode;
-  selectedNodeId: string | null;
-  onSelectNode: (id: string | null) => void;
+  node: SectionNode
+  selectedNodeId: string | null
+  onSelectNode: (id: string | null) => void
 }
 
 export function SectionRenderer({ node, selectedNodeId, onSelectNode }: SectionRendererProps) {
-  const [hovered, setHovered] = useState(false);
-  const isSelected = selectedNodeId === node.id;
+  const [hovered, setHovered] = useState(false)
+  const isSelected = selectedNodeId === node.id
 
   const handleClick = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    onSelectNode(node.id);
-  };
+    e.stopPropagation()
+    onSelectNode(node.id)
+  }
 
-  const backgroundStyle: React.CSSProperties = {};
+  const backgroundStyle: React.CSSProperties = {}
   if (node.settings.background) {
-    backgroundStyle.backgroundColor = node.settings.background;
+    backgroundStyle.backgroundColor = node.settings.background
   }
   if (node.settings.backgroundImage) {
-    backgroundStyle.backgroundImage = `url(${node.settings.backgroundImage})`;
-    backgroundStyle.backgroundSize = 'cover';
-    backgroundStyle.backgroundPosition = 'center';
+    backgroundStyle.backgroundImage = `url(${node.settings.backgroundImage})`
+    backgroundStyle.backgroundSize = 'cover'
+    backgroundStyle.backgroundPosition = 'center'
   }
   if (node.settings.backgroundGradient) {
-    backgroundStyle.backgroundImage = node.settings.backgroundGradient;
+    backgroundStyle.backgroundImage = node.settings.backgroundGradient
   }
   if (node.settings.paddingTop) {
-    backgroundStyle.paddingTop = node.settings.paddingTop;
+    backgroundStyle.paddingTop = node.settings.paddingTop
   }
   if (node.settings.paddingBottom) {
-    backgroundStyle.paddingBottom = node.settings.paddingBottom;
+    backgroundStyle.paddingBottom = node.settings.paddingBottom
   }
   if (node.settings.marginTop) {
-    backgroundStyle.marginTop = node.settings.marginTop;
+    backgroundStyle.marginTop = node.settings.marginTop
   }
   if (node.settings.marginBottom) {
-    backgroundStyle.marginBottom = node.settings.marginBottom;
+    backgroundStyle.marginBottom = node.settings.marginBottom
   }
 
   return (
     <div
       data-node-id={node.id}
       className={`relative w-full transition-shadow ${
-        isSelected
-          ? 'ring-2 ring-primary ring-offset-2'
-          : hovered
-            ? 'ring-1 ring-primary/50'
-            : ''
+        isSelected ? 'ring-2 ring-primary ring-offset-2' : hovered ? 'ring-1 ring-primary/50' : ''
       }`}
       style={backgroundStyle}
       onClick={handleClick}
       onMouseEnter={(e) => {
-        e.stopPropagation();
-        setHovered(true);
+        e.stopPropagation()
+        setHovered(true)
       }}
       onMouseLeave={() => setHovered(false)}
     >
@@ -78,7 +74,7 @@ export function SectionRenderer({ node, selectedNodeId, onSelectNode }: SectionR
               selectedNodeId={selectedNodeId}
               onSelectNode={onSelectNode}
             />
-          );
+          )
         }
         if (child.type === 'row') {
           return (
@@ -88,10 +84,10 @@ export function SectionRenderer({ node, selectedNodeId, onSelectNode }: SectionR
               selectedNodeId={selectedNodeId}
               onSelectNode={onSelectNode}
             />
-          );
+          )
         }
-        return null;
+        return null
       })}
     </div>
-  );
+  )
 }

package/src/views/page-builder/canvas/index.ts

@@ -1,2 +1,2 @@
-export { BuilderCanvas } from './BuilderCanvas.js';
-export type { BuilderCanvasProps } from './BuilderCanvas.js';
+export { BuilderCanvas } from './BuilderCanvas.js'
+export type { BuilderCanvasProps } from './BuilderCanvas.js'