@actuate-media/cms-admin 0.7.3 → 0.8.1

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

@@ -1,14 +1,14 @@
-'use client';
+'use client'
 
-import { useState, useMemo } from 'react';
-import { analyzeDesign } from '@actuate-media/cms-core';
+import { useState, useMemo } from 'react'
+import { analyzeDesign } from '@actuate-media/cms-core'
 import type {
   PageNode,
   DesignAnalysis,
   DesignCategory,
   BuilderDesignCheck,
   DesignSuggestion,
-} from '@actuate-media/cms-core';
+} from '@actuate-media/cms-core'
 import {
   CheckCircle2,
   AlertCircle,
@@ -17,47 +17,47 @@ import {
   ChevronUp,
   Lightbulb,
   Palette,
-} from 'lucide-react';
+} from 'lucide-react'
 
 export interface DesignScorePanelProps {
-  tree: PageNode;
+  tree: PageNode
 }
 
 function getScoreColor(score: number, max: number): string {
-  const ratio = max > 0 ? score / max : 0;
-  if (ratio >= 0.8) return 'text-green-500';
-  if (ratio >= 0.5) return 'text-amber-500';
-  return 'text-red-500';
+  const ratio = max > 0 ? score / max : 0
+  if (ratio >= 0.8) return 'text-green-500'
+  if (ratio >= 0.5) return 'text-amber-500'
+  return 'text-red-500'
 }
 
 function getBarColor(score: number, max: number): string {
-  const ratio = max > 0 ? score / max : 0;
-  if (ratio >= 0.8) return 'bg-green-500';
-  if (ratio >= 0.5) return 'bg-amber-500';
-  return 'bg-red-500';
+  const ratio = max > 0 ? score / max : 0
+  if (ratio >= 0.8) return 'bg-green-500'
+  if (ratio >= 0.5) return 'bg-amber-500'
+  return 'bg-red-500'
 }
 
 function getScoreLabel(score: number): string {
-  if (score >= 80) return 'Excellent';
-  if (score >= 65) return 'Good';
-  if (score >= 50) return 'Needs Work';
-  return 'Poor';
+  if (score >= 80) return 'Excellent'
+  if (score >= 65) return 'Good'
+  if (score >= 50) return 'Needs Work'
+  return 'Poor'
 }
 
 function getRingStrokeColor(score: number): string {
-  if (score >= 80) return 'rgb(34, 197, 94)';
-  if (score >= 50) return 'rgb(245, 158, 11)';
-  return 'rgb(239, 68, 68)';
+  if (score >= 80) return 'rgb(34, 197, 94)'
+  if (score >= 50) return 'rgb(245, 158, 11)'
+  return 'rgb(239, 68, 68)'
 }
 
 function StatusIcon({ status }: { status: BuilderDesignCheck['status'] }) {
   switch (status) {
     case 'good':
-      return <CheckCircle2 size={14} className="text-green-500 shrink-0" />;
+      return <CheckCircle2 size={14} className="text-green-500 shrink-0" />
     case 'warning':
-      return <AlertCircle size={14} className="text-amber-500 shrink-0" />;
+      return <AlertCircle size={14} className="text-amber-500 shrink-0" />
     case 'error':
-      return <XCircle size={14} className="text-red-500 shrink-0" />;
+      return <XCircle size={14} className="text-red-500 shrink-0" />
   }
 }
 
@@ -66,32 +66,27 @@ function SeverityBadge({ severity }: { severity: DesignSuggestion['severity'] })
     important: 'bg-red-100 text-red-700',
     suggestion: 'bg-amber-100 text-amber-700',
     info: 'bg-blue-100 text-blue-700',
-  };
+  }
 
   return (
     <span className={`inline-block px-1.5 py-0.5 rounded text-xs font-medium ${classes[severity]}`}>
       {severity}
     </span>
-  );
+  )
 }
 
 function ScoreRing({ score }: { score: number }) {
-  const radius = 32;
-  const strokeWidth = 6;
-  const circumference = 2 * Math.PI * radius;
-  const progress = Math.min(score, 100) / 100;
-  const dashOffset = circumference * (1 - progress);
-  const size = (radius + strokeWidth) * 2;
+  const radius = 32
+  const strokeWidth = 6
+  const circumference = 2 * Math.PI * radius
+  const progress = Math.min(score, 100) / 100
+  const dashOffset = circumference * (1 - progress)
+  const size = (radius + strokeWidth) * 2
 
   return (
     <div className="flex flex-col items-center gap-2">
       <div className="relative">
-        <svg
-          width={size}
-          height={size}
-          viewBox={`0 0 ${size} ${size}`}
-          className="-rotate-90"
-        >
+        <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} className="-rotate-90">
           <circle
             cx={size / 2}
             cy={size / 2}
@@ -114,14 +109,12 @@ function ScoreRing({ score }: { score: number }) {
           />
         </svg>
         <div className="absolute inset-0 flex items-center justify-center">
-          <span className={`text-lg font-medium ${getScoreColor(score, 100)}`}>
-            {score}
-          </span>
+          <span className={`text-lg font-medium ${getScoreColor(score, 100)}`}>{score}</span>
         </div>
       </div>
       <span className="text-xs text-muted-foreground">{getScoreLabel(score)}</span>
     </div>
-  );
+  )
 }
 
 function CategoryRow({
@@ -129,11 +122,11 @@ function CategoryRow({
   expanded,
   onToggle,
 }: {
-  category: DesignCategory;
-  expanded: boolean;
-  onToggle: () => void;
+  category: DesignCategory
+  expanded: boolean
+  onToggle: () => void
 }) {
-  const percentage = category.maxScore > 0 ? (category.score / category.maxScore) * 100 : 0;
+  const percentage = category.maxScore > 0 ? (category.score / category.maxScore) * 100 : 0
 
   return (
     <div className="border-b border-border last:border-b-0">
@@ -178,7 +171,7 @@ function CategoryRow({
         </div>
       )}
     </div>
-  );
+  )
 }
 
 function SuggestionsList({ suggestions }: { suggestions: DesignSuggestion[] }) {
@@ -187,11 +180,11 @@ function SuggestionsList({ suggestions }: { suggestions: DesignSuggestion[] }) {
       important: 0,
       suggestion: 1,
       info: 2,
-    };
-    return [...suggestions].sort((a, b) => order[a.severity] - order[b.severity]);
-  }, [suggestions]);
+    }
+    return [...suggestions].sort((a, b) => order[a.severity] - order[b.severity])
+  }, [suggestions])
 
-  if (sorted.length === 0) return null;
+  if (sorted.length === 0) return null
 
   return (
     <div className="px-4 py-3 border-t border-border">
@@ -210,18 +203,18 @@ function SuggestionsList({ suggestions }: { suggestions: DesignSuggestion[] }) {
         ))}
       </div>
     </div>
-  );
+  )
 }
 
 export function DesignScorePanel({ tree }: DesignScorePanelProps) {
-  const analysis = useMemo(() => analyzeDesign(tree), [tree]);
-  const [expandedCategories, setExpandedCategories] = useState<string[]>([]);
+  const analysis = useMemo(() => analyzeDesign(tree), [tree])
+  const [expandedCategories, setExpandedCategories] = useState<string[]>([])
 
   const toggleCategory = (name: string) => {
     setExpandedCategories((prev) =>
-      prev.includes(name) ? prev.filter((n) => n !== name) : [...prev, name]
-    );
-  };
+      prev.includes(name) ? prev.filter((n) => n !== name) : [...prev, name],
+    )
+  }
 
   if (!tree.children || tree.children.length === 0) {
     return (
@@ -232,7 +225,7 @@ export function DesignScorePanel({ tree }: DesignScorePanelProps) {
           Add sections to your page to see the design analysis
         </p>
       </div>
-    );
+    )
   }
 
   return (
@@ -254,5 +247,5 @@ export function DesignScorePanel({ tree }: DesignScorePanelProps) {
 
       <SuggestionsList suggestions={analysis.suggestions} />
     </div>
-  );
+  )
 }

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

@@ -1,6 +1,6 @@
-'use client';
+'use client'
 
-import { useState, useCallback } from 'react';
+import { useState, useCallback } from 'react'
 import {
   ArrowUp,
   ArrowDown,
@@ -13,30 +13,31 @@ import {
   ArrowUpFromLine,
   ArrowDownToLine,
   Minus,
-} from 'lucide-react';
-import * as SwitchPrimitive from '@radix-ui/react-switch';
+} from 'lucide-react'
+import * as SwitchPrimitive from '@radix-ui/react-switch'
 import type {
   BuilderNode,
   SectionNode,
   ContainerNode,
   RowNode,
   ColumnNode,
-} from '@actuate-media/cms-core';
+} from '@actuate-media/cms-core'
 
 export interface NodeSettingsProps {
-  node: SectionNode | ContainerNode | RowNode | ColumnNode;
-  onUpdateSettings: (id: string, settings: Record<string, unknown>) => void;
-  onRemoveNode: (id: string) => void;
-  onDuplicateNode: (id: string) => void;
-  onMoveNodeUp: (id: string) => void;
-  onMoveNodeDown: (id: string) => void;
-  onAddRow?: (sectionId: string) => void;
+  node: SectionNode | ContainerNode | RowNode | ColumnNode
+  onUpdateSettings: (id: string, settings: Record<string, unknown>) => void
+  onRemoveNode: (id: string) => void
+  onDuplicateNode: (id: string) => void
+  onMoveNodeUp: (id: string) => void
+  onMoveNodeDown: (id: string) => void
+  onAddRow?: (sectionId: string) => void
 }
 
 const INPUT_CLASS =
-  'w-full px-3 py-2 text-sm bg-background border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-ring';
-const LABEL_CLASS = 'text-sm font-medium text-foreground mb-1 block';
-const SECTION_HEADING_CLASS = 'text-xs font-medium uppercase tracking-wider text-muted-foreground mb-2';
+  'w-full px-3 py-2 text-sm bg-background border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-ring'
+const LABEL_CLASS = 'text-sm font-medium text-foreground mb-1 block'
+const SECTION_HEADING_CLASS =
+  'text-xs font-medium uppercase tracking-wider text-muted-foreground mb-2'
 
 const COLUMN_PRESETS: { label: string; widths: number[] }[] = [
   { label: '12', widths: [12] },
@@ -46,7 +47,7 @@ const COLUMN_PRESETS: { label: string; widths: number[] }[] = [
   { label: '8 | 4', widths: [8, 4] },
   { label: '4 | 8', widths: [4, 8] },
   { label: '3 | 6 | 3', widths: [3, 6, 3] },
-];
+]
 
 export function NodeSettings({
   node,
@@ -57,23 +58,23 @@ export function NodeSettings({
   onMoveNodeDown,
   onAddRow,
 }: NodeSettingsProps) {
-  const [confirmDelete, setConfirmDelete] = useState(false);
+  const [confirmDelete, setConfirmDelete] = useState(false)
 
   const updateSetting = useCallback(
     (key: string, value: unknown) => {
-      onUpdateSettings(node.id, { [key]: value });
+      onUpdateSettings(node.id, { [key]: value })
     },
-    [node.id, onUpdateSettings]
-  );
+    [node.id, onUpdateSettings],
+  )
 
   const handleDelete = useCallback(() => {
     if (confirmDelete) {
-      onRemoveNode(node.id);
-      setConfirmDelete(false);
+      onRemoveNode(node.id)
+      setConfirmDelete(false)
     } else {
-      setConfirmDelete(true);
+      setConfirmDelete(true)
     }
-  }, [confirmDelete, node.id, onRemoveNode]);
+  }, [confirmDelete, node.id, onRemoveNode])
 
   const nodeLabel =
     node.type === 'section'
@@ -82,7 +83,7 @@ export function NodeSettings({
         ? 'Container'
         : node.type === 'row'
           ? 'Row'
-          : 'Column';
+          : 'Column'
 
   return (
     <div className="flex flex-col h-full">
@@ -92,8 +93,12 @@ export function NodeSettings({
 
       <div className="flex-1 overflow-y-auto">
         <div className="space-y-4 p-4">
-          {node.type === 'section' && <SectionFields node={node} updateSetting={updateSetting} onAddRow={onAddRow} />}
-          {node.type === 'container' && <ContainerFields node={node} updateSetting={updateSetting} />}
+          {node.type === 'section' && (
+            <SectionFields node={node} updateSetting={updateSetting} onAddRow={onAddRow} />
+          )}
+          {node.type === 'container' && (
+            <ContainerFields node={node} updateSetting={updateSetting} />
+          )}
           {node.type === 'row' && <RowFields node={node} updateSetting={updateSetting} />}
           {node.type === 'column' && <ColumnFields node={node} updateSetting={updateSetting} />}
         </div>
@@ -144,7 +149,7 @@ export function NodeSettings({
         </button>
       </div>
     </div>
-  );
+  )
 }
 
 function SectionFields({
@@ -152,11 +157,11 @@ function SectionFields({
   updateSetting,
   onAddRow,
 }: {
-  node: SectionNode;
-  updateSetting: (key: string, value: unknown) => void;
-  onAddRow?: (sectionId: string) => void;
+  node: SectionNode
+  updateSetting: (key: string, value: unknown) => void
+  onAddRow?: (sectionId: string) => void
 }) {
-  const s = node.settings;
+  const s = node.settings
   return (
     <>
       <p className={SECTION_HEADING_CLASS}>Background</p>
@@ -228,9 +233,7 @@ function SectionFields({
         <label className="text-sm font-medium text-foreground">Visibility</label>
         <SwitchPrimitive.Root
           checked={s.visibility !== 'hidden'}
-          onCheckedChange={(checked) =>
-            updateSetting('visibility', checked ? 'visible' : 'hidden')
-          }
+          onCheckedChange={(checked) => updateSetting('visibility', checked ? 'visible' : 'hidden')}
           className="w-9 h-5 bg-input rounded-full relative data-[state=checked]:bg-primary transition-colors"
           aria-label="Section visibility"
         >
@@ -269,17 +272,17 @@ function SectionFields({
         </button>
       )}
     </>
-  );
+  )
 }
 
 function ContainerFields({
   node,
   updateSetting,
 }: {
-  node: ContainerNode;
-  updateSetting: (key: string, value: unknown) => void;
+  node: ContainerNode
+  updateSetting: (key: string, value: unknown) => void
 }) {
-  const s = node.settings;
+  const s = node.settings
   return (
     <>
       <p className={SECTION_HEADING_CLASS}>Layout</p>
@@ -297,7 +300,8 @@ function ContainerFields({
         <label className={LABEL_CLASS}>Alignment</label>
         <div className="flex gap-1">
           {(['left', 'center', 'right'] as const).map((align) => {
-            const Icon = align === 'left' ? AlignLeft : align === 'center' ? AlignCenter : AlignRight;
+            const Icon =
+              align === 'left' ? AlignLeft : align === 'center' ? AlignCenter : AlignRight
             return (
               <button
                 key={align}
@@ -312,7 +316,7 @@ function ContainerFields({
               >
                 <Icon size={14} />
               </button>
-            );
+            )
           })}
         </div>
       </div>
@@ -327,17 +331,17 @@ function ContainerFields({
         />
       </div>
     </>
-  );
+  )
 }
 
 function RowFields({
   node,
   updateSetting,
 }: {
-  node: RowNode;
-  updateSetting: (key: string, value: unknown) => void;
+  node: RowNode
+  updateSetting: (key: string, value: unknown) => void
 }) {
-  const s = node.settings;
+  const s = node.settings
   return (
     <>
       <p className={SECTION_HEADING_CLASS}>Layout</p>
@@ -362,7 +366,7 @@ function RowFields({
                   ? ArrowDownToLine
                   : align === 'center'
                     ? Minus
-                    : AlignCenter;
+                    : AlignCenter
             return (
               <button
                 key={align}
@@ -377,7 +381,7 @@ function RowFields({
               >
                 <Icon size={14} />
               </button>
-            );
+            )
           })}
         </div>
       </div>
@@ -417,11 +421,7 @@ function RowFields({
           >
             <div className="flex gap-0.5 h-4">
               {preset.widths.map((w, i) => (
-                <div
-                  key={i}
-                  className="bg-muted-foreground/30 rounded-sm"
-                  style={{ flex: w }}
-                />
+                <div key={i} className="bg-muted-foreground/30 rounded-sm" style={{ flex: w }} />
               ))}
             </div>
             <p className="text-xs text-muted-foreground mt-1 text-center">
@@ -431,17 +431,17 @@ function RowFields({
         ))}
       </div>
     </>
-  );
+  )
 }
 
 function ColumnFields({
   node,
   updateSetting,
 }: {
-  node: ColumnNode;
-  updateSetting: (key: string, value: unknown) => void;
+  node: ColumnNode
+  updateSetting: (key: string, value: unknown) => void
 }) {
-  const s = node.settings;
+  const s = node.settings
   return (
     <>
       <p className={SECTION_HEADING_CLASS}>Size</p>
@@ -463,7 +463,7 @@ function ColumnFields({
         <div className="flex gap-1">
           {(['top', 'center', 'bottom'] as const).map((align) => {
             const Icon =
-              align === 'top' ? ArrowUpFromLine : align === 'bottom' ? ArrowDownToLine : Minus;
+              align === 'top' ? ArrowUpFromLine : align === 'bottom' ? ArrowDownToLine : Minus
             return (
               <button
                 key={align}
@@ -478,7 +478,7 @@ function ColumnFields({
               >
                 <Icon size={14} />
               </button>
-            );
+            )
           })}
         </div>
       </div>
@@ -511,5 +511,5 @@ function ColumnFields({
         </div>
       </div>
     </>
-  );
+  )
 }