@actuate-media/cms-admin 0.6.0 → 0.7.0

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

@@ -0,0 +1,288 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { Loader2, AlertTriangle } from 'lucide-react';
+import { toast } from 'sonner';
+import { cmsApi } from '../../lib/api.js';
+import { ErrorBoundary } from '../../components/ErrorBoundary.js';
+import {
+  useBuilderState,
+  type BuilderState,
+  type BuilderActions,
+  type PageSettings,
+} from '../../hooks/useBuilderState.js';
+import type { PageNode } from '@actuate-media/cms-core';
+import { BuilderToolbar } from './BuilderToolbar.js';
+import { BottomBar } from './BottomBar.js';
+import { BuilderCanvas } from './canvas/index.js';
+import { ContextPanel } from './ContextPanel.js';
+import { AIGenerateDialog } from './AIGenerateDialog.js';
+
+export interface PageBuilderProps {
+  documentId?: string;
+  collectionSlug: string;
+  config: any;
+  onNavigate: (path: string) => void;
+}
+
+type DocumentStatus = 'DRAFT' | 'PUBLISHED' | 'SCHEDULED';
+
+const DEVICE_WIDTHS = {
+  desktop: '100%',
+  tablet: '768px',
+  mobile: '375px',
+} as const;
+
+export function PageBuilder({
+  documentId,
+  collectionSlug,
+  config,
+  onNavigate,
+}: PageBuilderProps) {
+  const [loading, setLoading] = useState(!!documentId);
+  const [loadError, setLoadError] = useState<string | null>(null);
+  const [saving, setSaving] = useState(false);
+  const [status, setStatus] = useState<DocumentStatus>('DRAFT');
+  const [aiDialogOpen, setAiDialogOpen] = useState(false);
+
+  const builder = useBuilderState();
+  const {
+    tree,
+    pageSettings,
+    deviceMode,
+    dirty,
+    canUndo,
+    canRedo,
+    selectedNodeId,
+    selectedNode,
+    activeTab,
+    showGridOverlay,
+    selectNode,
+    setDeviceMode,
+    setActiveTab,
+    setPageSettings,
+    setShowGridOverlay,
+    addSection,
+    addRowToSection,
+    addBlockToColumn,
+    addNodeAtId,
+    removeNodeById,
+    moveNodeById,
+    updateSettings,
+    updateBlock,
+    duplicateNode,
+    moveNodeUp,
+    moveNodeDown,
+    undo,
+    redo,
+    markClean,
+    replaceTree,
+  } = builder;
+
+  useEffect(() => {
+    if (!documentId) {
+      setLoading(false);
+      return;
+    }
+
+    let cancelled = false;
+
+    async function loadDocument() {
+      const res = await cmsApi<any>(`/collections/${collectionSlug}/${documentId}`);
+
+      if (cancelled) return;
+
+      if (res.error) {
+        setLoadError(res.error);
+        setLoading(false);
+        return;
+      }
+
+      const doc = res.data;
+      if (doc?.layout) {
+        replaceTree(doc.layout as PageNode);
+        markClean();
+      }
+      if (doc?.pageSettings) {
+        setPageSettings(doc.pageSettings);
+      }
+      if (doc?.status) {
+        setStatus(doc.status as DocumentStatus);
+      }
+      if (doc?.title) {
+        setPageSettings({ title: doc.title });
+      }
+
+      setLoading(false);
+    }
+
+    loadDocument();
+    return () => { cancelled = true; };
+  }, [documentId, collectionSlug]);
+
+  const handleSave = useCallback(async () => {
+    setSaving(true);
+    const body = JSON.stringify({
+      layout: tree,
+      pageSettings,
+      title: pageSettings.title,
+      slug: pageSettings.slug,
+    });
+
+    const endpoint = documentId
+      ? `/collections/${collectionSlug}/${documentId}`
+      : `/collections/${collectionSlug}`;
+    const method = documentId ? 'PUT' : 'POST';
+
+    const res = await cmsApi(endpoint, { method, body });
+    setSaving(false);
+
+    if (res.error) {
+      toast.error(res.error);
+    } else {
+      markClean();
+      toast.success('Page saved');
+      if (!documentId && (res.data as any)?.id) {
+        onNavigate(`/pages/${(res.data as any).id}/builder`);
+      }
+    }
+  }, [tree, pageSettings, documentId, collectionSlug, markClean, onNavigate]);
+
+  const handlePublish = useCallback(async () => {
+    setSaving(true);
+    const body = JSON.stringify({
+      layout: tree,
+      pageSettings,
+      title: pageSettings.title,
+      slug: pageSettings.slug,
+      status: 'PUBLISHED',
+    });
+
+    const endpoint = documentId
+      ? `/collections/${collectionSlug}/${documentId}`
+      : `/collections/${collectionSlug}`;
+    const method = documentId ? 'PUT' : 'POST';
+
+    const res = await cmsApi(endpoint, { method, body });
+    setSaving(false);
+
+    if (res.error) {
+      toast.error(res.error);
+    } else {
+      markClean();
+      setStatus('PUBLISHED');
+      toast.success('Page published');
+      if (!documentId && (res.data as any)?.id) {
+        onNavigate(`/pages/${(res.data as any).id}/builder`);
+      }
+    }
+  }, [tree, pageSettings, documentId, collectionSlug, markClean, onNavigate]);
+
+  const handleAIAccept = useCallback((generatedTree: PageNode) => {
+    replaceTree(generatedTree);
+  }, [replaceTree]);
+
+  if (loading) {
+    return (
+      <div className="h-full flex items-center justify-center bg-background">
+        <Loader2 className="animate-spin text-muted-foreground" size={24} />
+      </div>
+    );
+  }
+
+  if (loadError) {
+    return (
+      <div className="h-full flex items-center justify-center bg-background">
+        <div className="flex items-center gap-3 rounded-lg border border-destructive/30 bg-destructive/5 p-4 max-w-md">
+          <AlertTriangle className="text-destructive shrink-0" size={20} />
+          <div>
+            <p className="text-sm font-medium text-foreground">Failed to load page</p>
+            <p className="text-sm text-muted-foreground mt-1">{loadError}</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  const canvasWidth = DEVICE_WIDTHS[deviceMode];
+  const isConstrained = deviceMode !== 'desktop';
+
+  return (
+    <ErrorBoundary>
+    <div className="h-full flex flex-col bg-background overflow-hidden">
+      <BuilderToolbar
+        collectionSlug={collectionSlug}
+        pageSettings={pageSettings}
+        status={status}
+        dirty={dirty}
+        saving={saving}
+        canUndo={canUndo}
+        canRedo={canRedo}
+        deviceMode={deviceMode}
+        onNavigate={onNavigate}
+        onTitleChange={(title) => setPageSettings({ title })}
+        onUndo={undo}
+        onRedo={redo}
+        onDeviceMode={setDeviceMode}
+        onSave={handleSave}
+        onPublish={handlePublish}
+        onOpenAI={() => setAiDialogOpen(true)}
+      />
+
+      <div className="flex-1 flex overflow-hidden">
+        {/* Canvas area */}
+        <div className="flex-1 overflow-auto bg-muted">
+          <div
+            className="mx-auto h-full max-w-full transition-all duration-200"
+            style={{ width: canvasWidth }}
+          >
+            <div
+              className={`h-full bg-background ${isConstrained ? 'shadow-lg border-x border-border' : ''}`}
+            >
+              <BuilderCanvas
+                tree={tree}
+                selectedNodeId={selectedNodeId}
+                showGridOverlay={showGridOverlay}
+                deviceMode={deviceMode}
+                onSelectNode={selectNode}
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* Context panel */}
+        <div className="w-[35%] min-w-[280px] max-w-[420px] border-l border-border bg-card overflow-y-auto">
+          <ContextPanel
+            activeTab={activeTab}
+            onTabChange={setActiveTab}
+            selectedNode={selectedNode}
+            tree={tree}
+            pageSettings={pageSettings}
+            onUpdateSettings={updateSettings}
+            onUpdateBlock={updateBlock}
+            onRemoveNode={removeNodeById}
+            onDuplicateNode={duplicateNode}
+            onMoveNodeUp={moveNodeUp}
+            onMoveNodeDown={moveNodeDown}
+            onPageSettingsChange={setPageSettings}
+            onAddRow={addRowToSection}
+            config={config}
+          />
+        </div>
+      </div>
+
+      <BottomBar
+        deviceMode={deviceMode}
+        showGridOverlay={showGridOverlay}
+        onAddSection={addSection}
+        onToggleGrid={setShowGridOverlay}
+      />
+    </div>
+    <AIGenerateDialog
+      open={aiDialogOpen}
+      onClose={() => setAiDialogOpen(false)}
+      onAccept={handleAIAccept}
+    />
+    </ErrorBoundary>
+  );
+}

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

@@ -0,0 +1,161 @@
+'use client';
+
+import { useCallback } from 'react';
+import type { PageSettings } from '../../hooks/useBuilderState.js';
+
+export interface PageSettingsProps {
+  settings: PageSettings;
+  onChange: (settings: Partial<PageSettings>) => 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';
+
+const SCHEMA_TYPES = [
+  'Article',
+  'LocalBusiness',
+  'WebPage',
+  'Product',
+  'FAQPage',
+  'Organization',
+  'Event',
+  'Recipe',
+  'HowTo',
+  'BreadcrumbList',
+];
+
+export function PageSettingsEditor({ settings, onChange }: PageSettingsProps) {
+  const update = useCallback(
+    (key: keyof PageSettings, value: string) => {
+      onChange({ [key]: value });
+    },
+    [onChange]
+  );
+
+  const metaTitleLength = (settings.metaTitle ?? '').length;
+  const metaDescLength = (settings.metaDescription ?? '').length;
+
+  return (
+    <div className="space-y-4 p-4">
+      <p className={SECTION_HEADING_CLASS}>General</p>
+
+      <div>
+        <label className={LABEL_CLASS}>Title</label>
+        <input
+          type="text"
+          value={settings.title}
+          onChange={(e) => update('title', e.target.value)}
+          placeholder="Page title"
+          className={INPUT_CLASS}
+        />
+      </div>
+
+      <div>
+        <label className={LABEL_CLASS}>Slug</label>
+        <input
+          type="text"
+          value={settings.slug}
+          onChange={(e) => update('slug', e.target.value)}
+          placeholder="/page-slug"
+          className={INPUT_CLASS}
+        />
+      </div>
+
+      <div>
+        <label className={LABEL_CLASS}>Template</label>
+        <input
+          type="text"
+          value={settings.template ?? ''}
+          onChange={(e) => update('template', e.target.value)}
+          placeholder="default"
+          className={INPUT_CLASS}
+          readOnly
+        />
+      </div>
+
+      <p className={SECTION_HEADING_CLASS}>SEO</p>
+
+      <div>
+        <div className="flex items-center justify-between mb-1">
+          <label className="text-sm font-medium text-foreground">Meta Title</label>
+          <span
+            className={`text-xs ${
+              metaTitleLength > 60 ? 'text-destructive' : 'text-muted-foreground'
+            }`}
+          >
+            {metaTitleLength}/60
+          </span>
+        </div>
+        <input
+          type="text"
+          value={settings.metaTitle ?? ''}
+          onChange={(e) => update('metaTitle', e.target.value)}
+          placeholder="SEO title"
+          maxLength={100}
+          className={INPUT_CLASS}
+        />
+      </div>
+
+      <div>
+        <div className="flex items-center justify-between mb-1">
+          <label className="text-sm font-medium text-foreground">Meta Description</label>
+          <span
+            className={`text-xs ${
+              metaDescLength > 160 ? 'text-destructive' : 'text-muted-foreground'
+            }`}
+          >
+            {metaDescLength}/160
+          </span>
+        </div>
+        <textarea
+          value={settings.metaDescription ?? ''}
+          onChange={(e) => update('metaDescription', e.target.value)}
+          placeholder="Brief description for search engines"
+          rows={3}
+          maxLength={250}
+          className={`${INPUT_CLASS} resize-y`}
+        />
+      </div>
+
+      <div>
+        <label className={LABEL_CLASS}>OG Image</label>
+        <input
+          type="text"
+          value={settings.ogImage ?? ''}
+          onChange={(e) => update('ogImage', e.target.value)}
+          placeholder="https://example.com/image.jpg"
+          className={INPUT_CLASS}
+        />
+      </div>
+
+      <div>
+        <label className={LABEL_CLASS}>Focus Keyphrase</label>
+        <input
+          type="text"
+          value={settings.focusKeyphrase ?? ''}
+          onChange={(e) => update('focusKeyphrase', e.target.value)}
+          placeholder="primary keyword"
+          className={INPUT_CLASS}
+        />
+      </div>
+
+      <div>
+        <label className={LABEL_CLASS}>Schema Type</label>
+        <select
+          value={settings.schemaType ?? ''}
+          onChange={(e) => update('schemaType', e.target.value)}
+          className={INPUT_CLASS}
+        >
+          <option value="">Select schema type...</option>
+          {SCHEMA_TYPES.map((type) => (
+            <option key={type} value={type}>
+              {type}
+            </option>
+          ))}
+        </select>
+      </div>
+    </div>
+  );
+}