@actuate-media/cms-admin 0.6.0 → 0.7.1

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

@@ -0,0 +1,486 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import {
+  Plus,
+  ArrowLeft,
+  Edit,
+  Trash2,
+  Copy,
+  Layers,
+  Loader2,
+  AlertTriangle,
+  Calendar,
+  Hash,
+} from 'lucide-react';
+import { toast } from 'sonner';
+import { cmsApi } from '../../lib/api.js';
+import { createSection, createContainer, createRow, createColumn } from '@actuate-media/cms-core';
+
+export interface SavedSectionsProps {
+  onNavigate: (path: string) => void;
+  config: any;
+}
+
+interface SavedSection {
+  id: string;
+  name: string;
+  description: string;
+  category: string;
+  tree: Record<string, unknown> | null;
+  usageCount: number;
+  createdAt: string;
+  updatedAt: string;
+}
+
+type ViewState =
+  | { mode: 'list' }
+  | { mode: 'create' }
+  | { mode: 'edit'; section: SavedSection };
+
+const CATEGORIES = ['header', 'footer', 'content', 'sidebar'] as const;
+type Category = (typeof CATEGORIES)[number];
+
+const CATEGORY_COLORS: Record<string, string> = {
+  header: 'bg-primary/10 text-primary',
+  footer: 'bg-accent text-foreground',
+  content: 'bg-muted text-muted-foreground',
+  sidebar: 'bg-primary/10 text-primary',
+};
+
+function formatDate(dateStr: string): string {
+  return new Date(dateStr).toLocaleDateString(undefined, {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  });
+}
+
+function createEmptySectionTree(): Record<string, unknown> {
+  const col = createColumn(100);
+  const row = createRow([col]);
+  const container = createContainer();
+  (container as unknown as { children: unknown[] }).children = [row];
+  const section = createSection();
+  (section as unknown as { children: unknown[] }).children = [container];
+  return section as unknown as Record<string, unknown>;
+}
+
+export function SavedSections({ onNavigate, config }: SavedSectionsProps) {
+  const [sections, setSections] = useState<SavedSection[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [viewState, setViewState] = useState<ViewState>({ mode: 'list' });
+  const [activeCategory, setActiveCategory] = useState<Category | 'all'>('all');
+  const [deleteConfirmId, setDeleteConfirmId] = useState<string | null>(null);
+  const [saving, setSaving] = useState(false);
+
+  const fetchSections = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    const res = await cmsApi<SavedSection[]>('/saved-sections');
+    if (res.error) {
+      setError(res.error);
+    } else {
+      setSections(res.data ?? []);
+    }
+    setLoading(false);
+  }, []);
+
+  useEffect(() => {
+    fetchSections();
+  }, [fetchSections]);
+
+  const filteredSections =
+    activeCategory === 'all'
+      ? sections
+      : sections.filter((s) => s.category === activeCategory);
+
+  async function handleDelete(id: string) {
+    const res = await cmsApi(`/saved-sections/${id}`, { method: 'DELETE' });
+    if (res.error) {
+      toast.error(res.error);
+    } else {
+      toast.success('Section deleted');
+      setSections((prev) => prev.filter((s) => s.id !== id));
+    }
+    setDeleteConfirmId(null);
+  }
+
+  async function handleDuplicate(section: SavedSection) {
+    const res = await cmsApi<SavedSection>('/saved-sections', {
+      method: 'POST',
+      body: JSON.stringify({
+        name: `${section.name} (Copy)`,
+        description: section.description,
+        category: section.category,
+        tree: section.tree,
+      }),
+    });
+    if (res.error) {
+      toast.error(res.error);
+    } else {
+      toast.success('Section duplicated');
+      fetchSections();
+    }
+  }
+
+  if (viewState.mode === 'create' || viewState.mode === 'edit') {
+    return (
+      <SectionForm
+        initial={viewState.mode === 'edit' ? viewState.section : undefined}
+        saving={saving}
+        onSave={async (data) => {
+          setSaving(true);
+          if (viewState.mode === 'create') {
+            const res = await cmsApi<SavedSection>('/saved-sections', {
+              method: 'POST',
+              body: JSON.stringify({ ...data, tree: createEmptySectionTree() }),
+            });
+            setSaving(false);
+            if (res.error) {
+              toast.error(res.error);
+            } else {
+              toast.success('Section created');
+              setViewState({ mode: 'list' });
+              fetchSections();
+            }
+          } else {
+            const res = await cmsApi<SavedSection>(
+              `/saved-sections/${viewState.section.id}`,
+              {
+                method: 'PUT',
+                body: JSON.stringify(data),
+              }
+            );
+            setSaving(false);
+            if (res.error) {
+              toast.error(res.error);
+            } else {
+              toast.success('Section updated');
+              setViewState({ mode: 'list' });
+              fetchSections();
+            }
+          }
+        }}
+        onCancel={() => setViewState({ mode: 'list' })}
+      />
+    );
+  }
+
+  return (
+    <div className="p-4 pr-8">
+      <div className="mb-6 flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-medium text-foreground">Saved Sections</h1>
+          <p className="text-sm text-muted-foreground mt-1">
+            Reusable sections for the page builder
+          </p>
+        </div>
+        <button
+          type="button"
+          onClick={() => setViewState({ mode: 'create' })}
+          className="flex items-center gap-2 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
+        >
+          <Plus size={16} />
+          Create Section
+        </button>
+      </div>
+
+      <div className="mb-4 flex items-center gap-1 border-b border-border">
+        <CategoryTab
+          label="All"
+          active={activeCategory === 'all'}
+          onClick={() => setActiveCategory('all')}
+        />
+        {CATEGORIES.map((cat) => (
+          <CategoryTab
+            key={cat}
+            label={cat.charAt(0).toUpperCase() + cat.slice(1)}
+            active={activeCategory === cat}
+            onClick={() => setActiveCategory(cat)}
+          />
+        ))}
+      </div>
+
+      {loading && (
+        <div className="flex items-center justify-center py-16">
+          <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
+        </div>
+      )}
+
+      {error && !loading && (
+        <div className="flex flex-col items-center justify-center py-12 text-center">
+          <AlertTriangle size={24} className="text-destructive mb-2" />
+          <p className="text-sm text-muted-foreground mb-3">{error}</p>
+          <button
+            type="button"
+            onClick={fetchSections}
+            className="px-3 py-1.5 text-sm font-medium text-foreground border border-border rounded-md hover:bg-accent transition-colors"
+          >
+            Retry
+          </button>
+        </div>
+      )}
+
+      {!loading && !error && filteredSections.length === 0 && (
+        <div className="flex flex-col items-center justify-center py-16 text-center">
+          <Layers size={32} className="text-muted-foreground mb-3" />
+          <p className="text-sm font-medium text-foreground mb-1">No saved sections</p>
+          <p className="text-xs text-muted-foreground mb-4">
+            {activeCategory === 'all'
+              ? 'Create your first reusable section to get started.'
+              : `No sections in the "${activeCategory}" category.`}
+          </p>
+          {activeCategory === 'all' && (
+            <button
+              type="button"
+              onClick={() => setViewState({ mode: 'create' })}
+              className="flex items-center gap-2 rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors"
+            >
+              <Plus size={14} />
+              Create Section
+            </button>
+          )}
+        </div>
+      )}
+
+      {!loading && !error && filteredSections.length > 0 && (
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
+          {filteredSections.map((section) => (
+            <div
+              key={section.id}
+              className="border border-border rounded-lg p-4 bg-card hover:border-primary/50 transition-colors"
+            >
+              <div className="flex items-start justify-between gap-3">
+                <div className="min-w-0 flex-1">
+                  <p className="text-sm font-medium text-foreground truncate">
+                    {section.name}
+                  </p>
+                  {section.description && (
+                    <p className="text-xs text-muted-foreground mt-0.5 line-clamp-2">
+                      {section.description}
+                    </p>
+                  )}
+                </div>
+                <span
+                  className={`shrink-0 text-xs px-2 py-0.5 rounded-full ${CATEGORY_COLORS[section.category] ?? 'bg-muted text-muted-foreground'}`}
+                >
+                  {section.category}
+                </span>
+              </div>
+
+              <div className="mt-3 flex items-center gap-4 text-xs text-muted-foreground">
+                <span className="flex items-center gap-1">
+                  <Hash size={12} />
+                  {section.usageCount} use{section.usageCount !== 1 ? 's' : ''}
+                </span>
+                <span className="flex items-center gap-1">
+                  <Calendar size={12} />
+                  {formatDate(section.createdAt)}
+                </span>
+                {section.tree && (
+                  <span className="flex items-center gap-1">
+                    <Layers size={12} />
+                    {JSON.stringify(section.tree).length > 1000 ? 'Complex' : 'Simple'}
+                  </span>
+                )}
+              </div>
+
+              <div className="mt-3 flex items-center gap-1 border-t border-border pt-3">
+                <button
+                  type="button"
+                  onClick={() => setViewState({ mode: 'edit', section })}
+                  className="flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium text-foreground rounded-md hover:bg-accent transition-colors"
+                  aria-label={`Edit ${section.name}`}
+                >
+                  <Edit size={13} />
+                  Edit
+                </button>
+                <button
+                  type="button"
+                  onClick={() => handleDuplicate(section)}
+                  className="flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium text-foreground rounded-md hover:bg-accent transition-colors"
+                  aria-label={`Duplicate ${section.name}`}
+                >
+                  <Copy size={13} />
+                  Duplicate
+                </button>
+                {deleteConfirmId === section.id ? (
+                  <div className="ml-auto flex items-center gap-1">
+                    <span className="text-xs text-destructive mr-1">Delete?</span>
+                    <button
+                      type="button"
+                      onClick={() => handleDelete(section.id)}
+                      className="px-2 py-1 text-xs font-medium text-destructive-foreground bg-destructive rounded-md hover:bg-destructive/90 transition-colors"
+                    >
+                      Yes
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => setDeleteConfirmId(null)}
+                      className="px-2 py-1 text-xs font-medium text-foreground border border-border rounded-md hover:bg-accent transition-colors"
+                    >
+                      No
+                    </button>
+                  </div>
+                ) : (
+                  <button
+                    type="button"
+                    onClick={() => setDeleteConfirmId(section.id)}
+                    className="ml-auto flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium text-destructive rounded-md hover:bg-destructive/10 transition-colors"
+                    aria-label={`Delete ${section.name}`}
+                  >
+                    <Trash2 size={13} />
+                    Delete
+                  </button>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface CategoryTabProps {
+  label: string;
+  active: boolean;
+  onClick: () => void;
+}
+
+function CategoryTab({ label, active, onClick }: CategoryTabProps) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={`px-3 py-2 text-sm transition-colors border-b-2 -mb-px ${
+        active
+          ? 'border-primary text-foreground font-medium'
+          : 'border-transparent text-muted-foreground hover:text-foreground'
+      }`}
+    >
+      {label}
+    </button>
+  );
+}
+
+interface SectionFormProps {
+  initial?: SavedSection;
+  saving: boolean;
+  onSave: (data: { name: string; description: string; category: string }) => void;
+  onCancel: () => void;
+}
+
+function SectionForm({ initial, saving, onSave, onCancel }: SectionFormProps) {
+  const [name, setName] = useState(initial?.name ?? '');
+  const [description, setDescription] = useState(initial?.description ?? '');
+  const [category, setCategory] = useState(initial?.category ?? 'content');
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!name.trim()) return;
+    onSave({ name: name.trim(), description: description.trim(), category });
+  }
+
+  const treeSize = initial?.tree
+    ? JSON.stringify(initial.tree).length
+    : null;
+
+  return (
+    <div className="p-4 pr-8">
+      <div className="mb-6">
+        <button
+          type="button"
+          onClick={onCancel}
+          className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors mb-3"
+          aria-label="Back to saved sections"
+        >
+          <ArrowLeft size={16} />
+          Back
+        </button>
+        <h1 className="text-2xl font-medium text-foreground">
+          {initial ? `Edit: ${initial.name}` : 'Create Saved Section'}
+        </h1>
+      </div>
+
+      <form onSubmit={handleSubmit} className="max-w-lg space-y-4">
+        <div>
+          <label htmlFor="section-name" className="block text-sm font-medium text-foreground mb-1">
+            Name <span className="text-destructive">*</span>
+          </label>
+          <input
+            id="section-name"
+            type="text"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            required
+            placeholder="e.g. Hero Banner"
+            className="w-full px-3 py-2 text-sm bg-background border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-ring"
+          />
+        </div>
+
+        <div>
+          <label htmlFor="section-description" className="block text-sm font-medium text-foreground mb-1">
+            Description
+          </label>
+          <textarea
+            id="section-description"
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            placeholder="Optional description of this section..."
+            rows={3}
+            className="w-full px-3 py-2 text-sm bg-background border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-ring resize-none"
+          />
+        </div>
+
+        <div>
+          <label htmlFor="section-category" className="block text-sm font-medium text-foreground mb-1">
+            Category
+          </label>
+          <select
+            id="section-category"
+            value={category}
+            onChange={(e) => setCategory(e.target.value)}
+            className="w-full px-3 py-2 text-sm bg-background border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-ring"
+          >
+            {CATEGORIES.map((cat) => (
+              <option key={cat} value={cat}>
+                {cat.charAt(0).toUpperCase() + cat.slice(1)}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        {treeSize !== null && (
+          <div className="rounded-md border border-border bg-muted p-3">
+            <p className="text-xs text-muted-foreground">
+              Section tree editing is available in the page builder.
+              Current tree size: {(treeSize / 1024).toFixed(1)} KB
+            </p>
+          </div>
+        )}
+
+        <div className="flex items-center gap-3 pt-2">
+          <button
+            type="submit"
+            disabled={saving || !name.trim()}
+            className="flex items-center gap-2 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {saving && <Loader2 size={14} className="animate-spin" />}
+            {initial ? 'Save Changes' : 'Create Section'}
+          </button>
+          <button
+            type="button"
+            onClick={onCancel}
+            disabled={saving}
+            className="px-4 py-2 text-sm font-medium text-foreground border border-border rounded-lg hover:bg-accent transition-colors disabled:opacity-50"
+          >
+            Cancel
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}

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

@@ -0,0 +1,201 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import {
+  X,
+  Loader2,
+  AlertTriangle,
+  Layout,
+  FileText,
+  MapPin,
+  Phone,
+  BookOpen,
+  File,
+} from 'lucide-react';
+import type { LucideIcon } from 'lucide-react';
+import { cmsApi } from '../../lib/api.js';
+import { createEmptyPage } from '@actuate-media/cms-core';
+import type { PageNode } from '@actuate-media/cms-core';
+
+export interface TemplatePickerProps {
+  onSelect: (templateTree: PageNode) => void;
+  onClose: () => void;
+}
+
+interface PageTemplate {
+  id: string;
+  name: string;
+  description: string;
+  category: string;
+  tree: PageNode;
+}
+
+const categoryIcons: Record<string, LucideIcon> = {
+  landing: Layout,
+  blog: FileText,
+  contact: MapPin,
+  portfolio: BookOpen,
+  mobile: Phone,
+};
+
+const categoryColors: Record<string, string> = {
+  landing: 'bg-primary/10 text-primary',
+  blog: 'bg-accent text-foreground',
+  contact: 'bg-primary/10 text-primary',
+  portfolio: 'bg-accent text-foreground',
+  mobile: 'bg-primary/10 text-primary',
+};
+
+function resolveIcon(category: string): LucideIcon {
+  return categoryIcons[category] ?? File;
+}
+
+function resolveBadgeColor(category: string): string {
+  return categoryColors[category] ?? 'bg-muted text-muted-foreground';
+}
+
+export function TemplatePicker({ onSelect, onClose }: TemplatePickerProps) {
+  const [templates, setTemplates] = useState<PageTemplate[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchTemplates = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    const res = await cmsApi<PageTemplate[]>('/page-templates');
+    if (res.error) {
+      setError(res.error);
+    } else {
+      setTemplates(res.data ?? []);
+    }
+    setLoading(false);
+  }, []);
+
+  useEffect(() => {
+    fetchTemplates();
+  }, [fetchTemplates]);
+
+  useEffect(() => {
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.key === 'Escape') onClose();
+    }
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [onClose]);
+
+  function handleBlankPage() {
+    onSelect(createEmptyPage());
+    onClose();
+  }
+
+  function handleTemplateSelect(template: PageTemplate) {
+    onSelect(template.tree);
+    onClose();
+  }
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center"
+      role="dialog"
+      aria-modal="true"
+      aria-label="Choose a template"
+    >
+      <div
+        className="absolute inset-0 bg-black/50 motion-safe:animate-in motion-safe:fade-in-0"
+        onClick={onClose}
+        aria-hidden="true"
+      />
+
+      <div className="relative z-10 w-full max-w-2xl max-h-[80vh] bg-card rounded-xl shadow-2xl border border-border flex flex-col overflow-hidden">
+        <div className="flex items-center justify-between px-5 pt-5 pb-3">
+          <h2 className="text-lg font-medium text-foreground">Choose a Template</h2>
+          <button
+            type="button"
+            onClick={onClose}
+            className="p-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
+            aria-label="Close"
+          >
+            <X size={18} />
+          </button>
+        </div>
+
+        <div className="flex-1 overflow-y-auto px-5 pb-5">
+          {loading && (
+            <div className="flex items-center justify-center py-16">
+              <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
+            </div>
+          )}
+
+          {error && !loading && (
+            <div className="flex flex-col items-center justify-center py-12 text-center">
+              <AlertTriangle size={24} className="text-destructive mb-2" />
+              <p className="text-sm text-muted-foreground mb-3">{error}</p>
+              <button
+                type="button"
+                onClick={fetchTemplates}
+                className="px-3 py-1.5 text-sm font-medium text-foreground border border-border rounded-md hover:bg-accent transition-colors"
+              >
+                Retry
+              </button>
+            </div>
+          )}
+
+          {!loading && !error && (
+            <div
+              className="grid grid-cols-2 md:grid-cols-3 gap-3"
+              role="list"
+              aria-label="Available templates"
+            >
+              <button
+                type="button"
+                role="listitem"
+                onClick={handleBlankPage}
+                className="p-4 border border-border rounded-lg hover:border-primary cursor-pointer transition-colors bg-card text-left flex flex-col items-center gap-2 group focus:outline-none focus:ring-2 focus:ring-ring"
+              >
+                <div className="w-10 h-10 rounded-md bg-muted flex items-center justify-center text-muted-foreground group-hover:bg-primary/10 group-hover:text-primary transition-colors">
+                  <File size={20} />
+                </div>
+                <p className="text-sm font-medium text-foreground text-center">Blank Page</p>
+                <p className="text-xs text-muted-foreground text-center">
+                  Start from scratch
+                </p>
+              </button>
+
+              {templates.map((template) => {
+                const Icon = resolveIcon(template.category);
+                const badgeColor = resolveBadgeColor(template.category);
+
+                return (
+                  <button
+                    key={template.id}
+                    type="button"
+                    role="listitem"
+                    onClick={() => handleTemplateSelect(template)}
+                    className="p-4 border border-border rounded-lg hover:border-primary cursor-pointer transition-colors bg-card text-left flex flex-col items-center gap-2 group focus:outline-none focus:ring-2 focus:ring-ring"
+                  >
+                    <div className="w-10 h-10 rounded-md bg-accent flex items-center justify-center text-foreground group-hover:bg-primary/10 group-hover:text-primary transition-colors">
+                      <Icon size={20} />
+                    </div>
+                    <p className="text-sm font-medium text-foreground text-center truncate w-full">
+                      {template.name}
+                    </p>
+                    {template.description && (
+                      <p className="text-xs text-muted-foreground text-center line-clamp-2">
+                        {template.description}
+                      </p>
+                    )}
+                    <span
+                      className={`inline-block text-xs px-2 py-0.5 rounded-full ${badgeColor}`}
+                    >
+                      {template.category}
+                    </span>
+                  </button>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}