@actuate-media/cms-admin 0.8.0 → 0.8.2

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

@@ -1,14 +1,14 @@
-'use client';
+'use client'
 
-import { useState, useMemo } from 'react';
-import { analyzeSEO } from '@actuate-media/cms-core';
+import { useState, useMemo } from 'react'
+import { analyzeSEO } from '@actuate-media/cms-core'
 import type {
   PageNode,
   BuilderSEOAnalysis,
   BuilderSEOCheck,
   BuilderReadabilityResult,
-} from '@actuate-media/cms-core';
-import type { PageSettings } from '../../hooks/useBuilderState.js';
+} from '@actuate-media/cms-core'
+import type { PageSettings } from '../../hooks/useBuilderState.js'
 import {
   CheckCircle2,
   AlertCircle,
@@ -23,61 +23,56 @@ import {
   BarChart3,
   Target,
   Eye,
-} from 'lucide-react';
+} from 'lucide-react'
 
 export interface BuilderSEOPanelProps {
-  tree: PageNode;
-  pageSettings: PageSettings;
-  onPageSettingsChange: (settings: Partial<PageSettings>) => void;
-  selectedNodeId: string | null;
+  tree: PageNode
+  pageSettings: PageSettings
+  onPageSettingsChange: (settings: Partial<PageSettings>) => void
+  selectedNodeId: string | null
 }
 
 function getScoreColor(score: number): string {
-  if (score >= 70) return 'text-green-500';
-  if (score >= 40) return 'text-amber-500';
-  return 'text-red-500';
+  if (score >= 70) return 'text-green-500'
+  if (score >= 40) return 'text-amber-500'
+  return 'text-red-500'
 }
 
 function getRingStrokeColor(score: number): string {
-  if (score >= 70) return 'rgb(34, 197, 94)';
-  if (score >= 40) return 'rgb(245, 158, 11)';
-  return 'rgb(239, 68, 68)';
+  if (score >= 70) return 'rgb(34, 197, 94)'
+  if (score >= 40) return 'rgb(245, 158, 11)'
+  return 'rgb(239, 68, 68)'
 }
 
 function getScoreLabel(score: number): string {
-  if (score >= 80) return 'Excellent';
-  if (score >= 70) return 'Good';
-  if (score >= 50) return 'Needs Work';
-  return 'Poor';
+  if (score >= 80) return 'Excellent'
+  if (score >= 70) return 'Good'
+  if (score >= 50) return 'Needs Work'
+  return 'Poor'
 }
 
 function StatusIcon({ status }: { status: BuilderSEOCheck['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" />
   }
 }
 
 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="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}
@@ -100,18 +95,16 @@ function ScoreRing({ score }: { score: number }) {
         />
       </svg>
       <div className="absolute inset-0 flex items-center justify-center">
-        <span className={`text-lg font-medium ${getScoreColor(score)}`}>
-          {score}
-        </span>
+        <span className={`text-lg font-medium ${getScoreColor(score)}`}>{score}</span>
       </div>
     </div>
-  );
+  )
 }
 
 function ScoreSummary({ checks }: { checks: BuilderSEOCheck[] }) {
-  const passed = checks.filter((c) => c.status === 'good').length;
-  const warnings = checks.filter((c) => c.status === 'warning').length;
-  const errors = checks.filter((c) => c.status === 'error').length;
+  const passed = checks.filter((c) => c.status === 'good').length
+  const warnings = checks.filter((c) => c.status === 'warning').length
+  const errors = checks.filter((c) => c.status === 'error').length
 
   return (
     <div className="flex flex-col gap-1">
@@ -128,7 +121,7 @@ function ScoreSummary({ checks }: { checks: BuilderSEOCheck[] }) {
         <span className="text-xs text-muted-foreground">{errors} issues</span>
       </div>
     </div>
-  );
+  )
 }
 
 function CollapsibleSection({
@@ -138,11 +131,11 @@ function CollapsibleSection({
   onToggle,
   children,
 }: {
-  title: string;
-  icon: typeof Search;
-  expanded: boolean;
-  onToggle: () => void;
-  children: React.ReactNode;
+  title: string
+  icon: typeof Search
+  expanded: boolean
+  onToggle: () => void
+  children: React.ReactNode
 }) {
   return (
     <div className="border-b border-border last:border-b-0">
@@ -164,7 +157,7 @@ function CollapsibleSection({
       </button>
       {expanded && <div className="px-4 pb-4">{children}</div>}
     </div>
-  );
+  )
 }
 
 function SEOChecksList({ checks }: { checks: BuilderSEOCheck[] }) {
@@ -180,15 +173,16 @@ function SEOChecksList({ checks }: { checks: BuilderSEOCheck[] }) {
         </div>
       ))}
     </div>
-  );
+  )
 }
 
 function ReadabilityGrid({ readability }: { readability: BuilderReadabilityResult }) {
-  const fleschLabel = readability.fleschScore >= 60
-    ? 'Easy'
-    : readability.fleschScore >= 30
-      ? 'Moderate'
-      : 'Difficult';
+  const fleschLabel =
+    readability.fleschScore >= 60
+      ? 'Easy'
+      : readability.fleschScore >= 30
+        ? 'Moderate'
+        : 'Difficult'
 
   return (
     <div className="grid grid-cols-2 gap-3">
@@ -208,9 +202,7 @@ function ReadabilityGrid({ readability }: { readability: BuilderReadabilityResul
           <Type size={12} className="text-muted-foreground" />
           <span className="text-xs text-muted-foreground">Word Count</span>
         </div>
-        <span className="text-sm font-medium text-foreground">
-          {readability.wordCount}
-        </span>
+        <span className="text-sm font-medium text-foreground">{readability.wordCount}</span>
         <span className="text-xs text-muted-foreground">
           {readability.wordCount >= 300 ? 'Good length' : 'Short'}
         </span>
@@ -234,15 +226,11 @@ function ReadabilityGrid({ readability }: { readability: BuilderReadabilityResul
           <Clock size={12} className="text-muted-foreground" />
           <span className="text-xs text-muted-foreground">Reading Time</span>
         </div>
-        <span className="text-sm font-medium text-foreground">
-          {readability.readingTime} min
-        </span>
-        <span className="text-xs text-muted-foreground">
-          ~{readability.wordCount} words
-        </span>
+        <span className="text-sm font-medium text-foreground">{readability.readingTime} min</span>
+        <span className="text-xs text-muted-foreground">~{readability.wordCount} words</span>
       </div>
     </div>
-  );
+  )
 }
 
 function PerBlockHints({ hints }: { hints: BuilderSEOCheck[] }) {
@@ -258,25 +246,27 @@ function PerBlockHints({ hints }: { hints: BuilderSEOCheck[] }) {
         </div>
       ))}
     </div>
-  );
+  )
 }
 
 function BasicSEOFields({
   pageSettings,
   onPageSettingsChange,
 }: {
-  pageSettings: PageSettings;
-  onPageSettingsChange: (settings: Partial<PageSettings>) => void;
+  pageSettings: PageSettings
+  onPageSettingsChange: (settings: Partial<PageSettings>) => void
 }) {
-  const metaTitleLength = (pageSettings.metaTitle || '').length;
-  const metaDescLength = (pageSettings.metaDescription || '').length;
+  const metaTitleLength = (pageSettings.metaTitle || '').length
+  const metaDescLength = (pageSettings.metaDescription || '').length
 
   return (
     <div className="flex flex-col gap-4">
       <div className="flex flex-col gap-1.5">
         <div className="flex items-center justify-between">
           <label className="text-xs font-medium text-foreground">Meta Title</label>
-          <span className={`text-xs ${metaTitleLength > 60 ? 'text-red-500' : metaTitleLength > 0 ? 'text-muted-foreground' : 'text-muted-foreground'}`}>
+          <span
+            className={`text-xs ${metaTitleLength > 60 ? 'text-red-500' : metaTitleLength > 0 ? 'text-muted-foreground' : 'text-muted-foreground'}`}
+          >
             {metaTitleLength}/60
           </span>
         </div>
@@ -292,7 +282,9 @@ function BasicSEOFields({
       <div className="flex flex-col gap-1.5">
         <div className="flex items-center justify-between">
           <label className="text-xs font-medium text-foreground">Meta Description</label>
-          <span className={`text-xs ${metaDescLength > 160 ? 'text-red-500' : metaDescLength > 0 ? 'text-muted-foreground' : 'text-muted-foreground'}`}>
+          <span
+            className={`text-xs ${metaDescLength > 160 ? 'text-red-500' : metaDescLength > 0 ? 'text-muted-foreground' : 'text-muted-foreground'}`}
+          >
             {metaDescLength}/160
           </span>
         </div>
@@ -316,46 +308,36 @@ function BasicSEOFields({
         />
       </div>
     </div>
-  );
+  )
 }
 
 function SearchPreview({ pageSettings }: { pageSettings: PageSettings }) {
-  const title = pageSettings.metaTitle || pageSettings.title || 'Untitled Page';
-  const description = pageSettings.metaDescription || 'No description set';
-  const slug = pageSettings.slug || 'page';
+  const title = pageSettings.metaTitle || pageSettings.title || 'Untitled Page'
+  const description = pageSettings.metaDescription || 'No description set'
+  const slug = pageSettings.slug || 'page'
 
   return (
     <div className="bg-background rounded-md border border-border p-4">
       <p className="text-xs text-muted-foreground mb-2">Google Search Preview</p>
       <div className="flex flex-col gap-1">
-        <p className="text-sm text-primary truncate">
-          {title}
-        </p>
-        <p className="text-xs text-green-600 truncate">
-          example.com/{slug}
-        </p>
-        <p className="text-xs text-muted-foreground line-clamp-2">
-          {description}
-        </p>
+        <p className="text-sm text-primary truncate">{title}</p>
+        <p className="text-xs text-green-600 truncate">example.com/{slug}</p>
+        <p className="text-xs text-muted-foreground line-clamp-2">{description}</p>
       </div>
     </div>
-  );
+  )
 }
 
 function SocialPreview({ pageSettings }: { pageSettings: PageSettings }) {
-  const title = pageSettings.metaTitle || pageSettings.title || 'Untitled Page';
-  const description = pageSettings.metaDescription || 'No description set';
+  const title = pageSettings.metaTitle || pageSettings.title || 'Untitled Page'
+  const description = pageSettings.metaDescription || 'No description set'
 
   return (
     <div className="bg-background rounded-md border border-border overflow-hidden">
       <p className="text-xs text-muted-foreground px-4 pt-3 pb-2">Open Graph Preview</p>
       {pageSettings.ogImage && (
         <div className="w-full h-32 bg-muted flex items-center justify-center overflow-hidden">
-          <img
-            src={pageSettings.ogImage}
-            alt="OG preview"
-            className="w-full h-full object-cover"
-          />
+          <img src={pageSettings.ogImage} alt="OG preview" className="w-full h-full object-cover" />
         </div>
       )}
       {!pageSettings.ogImage && (
@@ -369,7 +351,7 @@ function SocialPreview({ pageSettings }: { pageSettings: PageSettings }) {
         <p className="text-xs text-muted-foreground line-clamp-2">{description}</p>
       </div>
     </div>
-  );
+  )
 }
 
 export function BuilderSEOPanel({
@@ -381,22 +363,20 @@ export function BuilderSEOPanel({
   const analysis = useMemo<BuilderSEOAnalysis>(
     () => analyzeSEO(tree, pageSettings as any),
     [tree, pageSettings],
-  );
+  )
 
-  const [expandedSections, setExpandedSections] = useState<string[]>(['checks']);
+  const [expandedSections, setExpandedSections] = useState<string[]>(['checks'])
 
   const toggleSection = (section: string) => {
     setExpandedSections((prev) =>
-      prev.includes(section)
-        ? prev.filter((s) => s !== section)
-        : [...prev, section]
-    );
-  };
+      prev.includes(section) ? prev.filter((s) => s !== section) : [...prev, section],
+    )
+  }
 
   const blockHints = useMemo(() => {
-    if (!selectedNodeId) return [];
-    return analysis.perBlockHints.get(selectedNodeId) || [];
-  }, [analysis.perBlockHints, selectedNodeId]);
+    if (!selectedNodeId) return []
+    return analysis.perBlockHints.get(selectedNodeId) || []
+  }, [analysis.perBlockHints, selectedNodeId])
 
   if (!tree.children || tree.children.length === 0) {
     return (
@@ -407,7 +387,7 @@ export function BuilderSEOPanel({
           Add content to your page to see SEO analysis
         </p>
       </div>
-    );
+    )
   }
 
   return (
@@ -415,7 +395,9 @@ export function BuilderSEOPanel({
       <div className="flex items-center gap-4 px-4 py-5 border-b border-border">
         <ScoreRing score={analysis.score} />
         <div className="flex flex-col gap-1">
-          <span className="text-xs font-medium text-foreground">{getScoreLabel(analysis.score)}</span>
+          <span className="text-xs font-medium text-foreground">
+            {getScoreLabel(analysis.score)}
+          </span>
           <ScoreSummary checks={analysis.checks} />
         </div>
       </div>
@@ -456,10 +438,7 @@ export function BuilderSEOPanel({
           expanded={expandedSections.includes('basicSeo')}
           onToggle={() => toggleSection('basicSeo')}
         >
-          <BasicSEOFields
-            pageSettings={pageSettings}
-            onPageSettingsChange={onPageSettingsChange}
-          />
+          <BasicSEOFields pageSettings={pageSettings} onPageSettingsChange={onPageSettingsChange} />
         </CollapsibleSection>
 
         <CollapsibleSection
@@ -481,5 +460,5 @@ export function BuilderSEOPanel({
         </CollapsibleSection>
       </div>
     </div>
-  );
+  )
 }