@actuate-media/cms-admin 0.6.0 → 0.7.0

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

@@ -0,0 +1,352 @@
+'use client';
+
+import { useState, useMemo, useCallback } from 'react';
+import { Star, Copy, Trash2 } from 'lucide-react';
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+import type { BlockNode, BlockTypeDefinition, FieldDefinition } from '@actuate-media/cms-core';
+import { BlockCatalog } from '@actuate-media/cms-core';
+import { AIBlockAssist } from './AIBlockAssist.js';
+
+export interface BlockEditorProps {
+  node: BlockNode;
+  onUpdateBlock: (id: string, data: Record<string, unknown>) => void;
+  onUpdateSettings: (id: string, settings: Record<string, unknown>) => void;
+  onRemoveNode: (id: string) => void;
+  onDuplicateNode: (id: string) => void;
+  config: any;
+}
+
+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';
+
+export function BlockEditor({
+  node,
+  onUpdateBlock,
+  onUpdateSettings,
+  onRemoveNode,
+  onDuplicateNode,
+  config,
+}: BlockEditorProps) {
+  const [confirmDelete, setConfirmDelete] = useState(false);
+
+  const catalog = useMemo(() => new BlockCatalog(), []);
+  const blockDef = useMemo(
+    () => catalog.get(node.settings.blockType),
+    [catalog, node.settings.blockType]
+  );
+
+  const handleFieldChange = useCallback(
+    (fieldName: string, value: unknown) => {
+      onUpdateBlock(node.id, { [fieldName]: value });
+    },
+    [node.id, onUpdateBlock]
+  );
+
+  const handleVariantChange = useCallback(
+    (variantName: string) => {
+      onUpdateSettings(node.id, { variant: variantName });
+    },
+    [node.id, onUpdateSettings]
+  );
+
+  const handleDelete = useCallback(() => {
+    if (confirmDelete) {
+      onRemoveNode(node.id);
+      setConfirmDelete(false);
+    } else {
+      setConfirmDelete(true);
+    }
+  }, [confirmDelete, node.id, onRemoveNode]);
+
+  if (!blockDef) {
+    return (
+      <div className="p-4">
+        <p className="text-sm text-muted-foreground">
+          Unknown block type: <code className="text-xs">{node.settings.blockType}</code>
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="p-4 border-b border-border">
+        <div className="flex items-center gap-2">
+          <Star size={16} className="text-muted-foreground" />
+          <span className="text-sm font-medium text-foreground flex-1">{blockDef.label}</span>
+          <AIBlockAssist
+            block={node}
+            onUpdateData={(data) => onUpdateBlock(node.id, data)}
+          />
+        </div>
+        {blockDef.description && (
+          <p className="text-xs text-muted-foreground mt-1">{blockDef.description}</p>
+        )}
+      </div>
+
+      {blockDef.variants.length > 1 && (
+        <div className="p-4 border-b border-border">
+          <p className="text-xs font-medium uppercase tracking-wider text-muted-foreground mb-2">
+            Variant
+          </p>
+          <div className="grid grid-cols-2 gap-1.5">
+            {blockDef.variants.map((variant) => (
+              <button
+                key={variant.name}
+                type="button"
+                onClick={() => handleVariantChange(variant.name)}
+                className={`px-2 py-1.5 text-xs rounded-md border transition-colors ${
+                  node.settings.variant === variant.name
+                    ? 'bg-primary text-primary-foreground border-primary'
+                    : 'bg-background border-input text-foreground hover:bg-accent'
+                }`}
+              >
+                {variant.label}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+
+      <div className="space-y-4 p-4 flex-1">
+        <p className="text-xs font-medium uppercase tracking-wider text-muted-foreground mb-2">
+          Fields
+        </p>
+        {Object.entries(blockDef.fields).map(([fieldName, fieldDef]) => (
+          <FieldRenderer
+            key={fieldName}
+            name={fieldName}
+            definition={fieldDef}
+            value={node.data[fieldName]}
+            onChange={(value) => handleFieldChange(fieldName, value)}
+          />
+        ))}
+      </div>
+
+      <div className="p-4 border-t border-border space-y-2">
+        <button
+          type="button"
+          onClick={() => onDuplicateNode(node.id)}
+          className="w-full flex items-center justify-center gap-2 px-3 py-2 text-sm font-medium bg-background border border-input rounded-md hover:bg-accent transition-colors"
+        >
+          <Copy size={14} />
+          Duplicate
+        </button>
+        <button
+          type="button"
+          onClick={handleDelete}
+          onBlur={() => setConfirmDelete(false)}
+          className={`w-full flex items-center justify-center gap-2 px-3 py-2 text-sm font-medium rounded-md transition-colors ${
+            confirmDelete
+              ? 'bg-destructive text-destructive-foreground'
+              : 'bg-background border border-destructive text-destructive hover:bg-destructive/10'
+          }`}
+        >
+          <Trash2 size={14} />
+          {confirmDelete ? 'Click again to confirm' : 'Delete'}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+interface FieldRendererProps {
+  name: string;
+  definition: FieldDefinition;
+  value: unknown;
+  onChange: (value: unknown) => void;
+}
+
+function FieldRenderer({ name, definition, value, onChange }: FieldRendererProps) {
+  const label = definition.label || name;
+
+  switch (definition.type) {
+    case 'text':
+      return (
+        <div>
+          <label className={LABEL_CLASS}>{label}</label>
+          <input
+            type="text"
+            value={(value as string) ?? ''}
+            onChange={(e) => onChange(e.target.value)}
+            placeholder={definition.admin?.placeholder}
+            className={INPUT_CLASS}
+          />
+        </div>
+      );
+
+    case 'richText':
+      return (
+        <div>
+          <label className={LABEL_CLASS}>{label}</label>
+          <textarea
+            value={(value as string) ?? ''}
+            onChange={(e) => onChange(e.target.value)}
+            placeholder={definition.admin?.placeholder}
+            rows={4}
+            className={`${INPUT_CLASS} resize-y`}
+          />
+        </div>
+      );
+
+    case 'url':
+      return (
+        <div>
+          <label className={LABEL_CLASS}>{label}</label>
+          <input
+            type="url"
+            value={(value as string) ?? ''}
+            onChange={(e) => onChange(e.target.value)}
+            placeholder={definition.admin?.placeholder ?? 'https://'}
+            className={INPUT_CLASS}
+          />
+        </div>
+      );
+
+    case 'number':
+      return (
+        <div>
+          <label className={LABEL_CLASS}>{label}</label>
+          <input
+            type="number"
+            value={(value as number) ?? ''}
+            onChange={(e) => onChange(e.target.value ? Number(e.target.value) : undefined)}
+            min={definition.min}
+            max={definition.max}
+            step={definition.step}
+            className={INPUT_CLASS}
+          />
+        </div>
+      );
+
+    case 'boolean':
+      return (
+        <div className="flex items-center justify-between">
+          <label className="text-sm font-medium text-foreground">{label}</label>
+          <SwitchPrimitive.Root
+            checked={!!value}
+            onCheckedChange={(checked) => onChange(checked)}
+            className="w-9 h-5 bg-input rounded-full relative data-[state=checked]:bg-primary transition-colors"
+            aria-label={label}
+          >
+            <SwitchPrimitive.Thumb className="block h-3.5 w-3.5 rounded-full bg-background shadow-sm transition-transform translate-x-0.5 data-[state=checked]:translate-x-[18px]" />
+          </SwitchPrimitive.Root>
+        </div>
+      );
+
+    case 'media':
+      return (
+        <div>
+          <label className={LABEL_CLASS}>{label}</label>
+          <div className="flex gap-2">
+            <input
+              type="text"
+              value={(value as string) ?? ''}
+              onChange={(e) => onChange(e.target.value)}
+              placeholder="Select media..."
+              className={`${INPUT_CLASS} flex-1`}
+            />
+            <button
+              type="button"
+              className="px-3 py-2 text-xs font-medium bg-accent text-foreground border border-input rounded-md hover:bg-accent/80 transition-colors"
+            >
+              Browse
+            </button>
+          </div>
+        </div>
+      );
+
+    case 'select':
+      return (
+        <div>
+          <label className={LABEL_CLASS}>{label}</label>
+          <select
+            value={(value as string) ?? ''}
+            onChange={(e) => onChange(e.target.value)}
+            className={INPUT_CLASS}
+          >
+            <option value="">Select...</option>
+            {definition.options.map((opt) => (
+              <option key={opt.value} value={opt.value}>
+                {opt.label}
+              </option>
+            ))}
+          </select>
+        </div>
+      );
+
+    case 'array':
+      return (
+        <div>
+          <label className={LABEL_CLASS}>{label}</label>
+          <div className="px-3 py-2 text-sm bg-muted border border-input rounded-md text-muted-foreground">
+            {Array.isArray(value) ? `${value.length} items` : '0 items'}
+          </div>
+        </div>
+      );
+
+    case 'relationship':
+      return (
+        <div>
+          <label className={LABEL_CLASS}>{label}</label>
+          <input
+            type="text"
+            value={(value as string) ?? ''}
+            onChange={(e) => onChange(e.target.value)}
+            placeholder="Select relationship..."
+            className={INPUT_CLASS}
+          />
+        </div>
+      );
+
+    case 'email':
+      return (
+        <div>
+          <label className={LABEL_CLASS}>{label}</label>
+          <input
+            type="email"
+            value={(value as string) ?? ''}
+            onChange={(e) => onChange(e.target.value)}
+            placeholder={definition.admin?.placeholder ?? 'email@example.com'}
+            className={INPUT_CLASS}
+          />
+        </div>
+      );
+
+    case 'color':
+      return (
+        <div>
+          <label className={LABEL_CLASS}>{label}</label>
+          <div className="flex items-center gap-2">
+            <input
+              type="color"
+              value={(value as string) ?? '#000000'}
+              onChange={(e) => onChange(e.target.value)}
+              className="h-9 w-9 rounded-md border border-input cursor-pointer"
+            />
+            <input
+              type="text"
+              value={(value as string) ?? ''}
+              onChange={(e) => onChange(e.target.value)}
+              placeholder="#000000"
+              className={`${INPUT_CLASS} flex-1`}
+            />
+          </div>
+        </div>
+      );
+
+    default:
+      return (
+        <div>
+          <label className={LABEL_CLASS}>{label}</label>
+          <input
+            type="text"
+            value={String(value ?? '')}
+            onChange={(e) => onChange(e.target.value)}
+            className={INPUT_CLASS}
+          />
+        </div>
+      );
+  }
+}

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

@@ -0,0 +1,338 @@
+'use client';
+
+import { useState, useMemo, useRef, useEffect, useCallback } from 'react';
+import * as Dialog from '@radix-ui/react-dialog';
+import {
+  Star,
+  Type,
+  Image,
+  LayoutGrid,
+  MousePointer,
+  Play,
+  Grid,
+  HelpCircle,
+  FileText,
+  Code,
+  Box,
+  X,
+  ArrowLeft,
+  Search,
+  Check,
+} from 'lucide-react';
+import type { LucideIcon } from 'lucide-react';
+import { BlockCatalog } from '@actuate-media/cms-core';
+import type { BlockTypeDefinition, VariantDefinition } from '@actuate-media/cms-core';
+
+export interface BlockPickerProps {
+  open: boolean;
+  onClose: () => void;
+  onSelect: (blockType: string, variant?: string) => void;
+}
+
+const iconMap: Record<string, LucideIcon> = {
+  Star,
+  Type,
+  Image,
+  LayoutGrid,
+  MousePointer,
+  Play,
+  Grid,
+  HelpCircle,
+  FileText,
+  Code,
+};
+
+function resolveIcon(name: string): LucideIcon {
+  return iconMap[name] ?? Box;
+}
+
+export function BlockPicker({ open, onClose, onSelect }: BlockPickerProps) {
+  const [search, setSearch] = useState('');
+  const [selectedBlock, setSelectedBlock] = useState<BlockTypeDefinition | null>(null);
+  const searchInputRef = useRef<HTMLInputElement>(null);
+  const variantListRef = useRef<HTMLDivElement>(null);
+
+  const catalog = useMemo(() => new BlockCatalog(), []);
+  const allBlocks = useMemo(() => catalog.getAll(), [catalog]);
+
+  const filteredBlocks = useMemo(() => {
+    if (!search.trim()) return allBlocks;
+    const q = search.toLowerCase();
+    return allBlocks.filter(
+      (block) =>
+        block.label.toLowerCase().includes(q) ||
+        (block.description?.toLowerCase().includes(q) ?? false)
+    );
+  }, [allBlocks, search]);
+
+  const resetState = useCallback(() => {
+    setSearch('');
+    setSelectedBlock(null);
+  }, []);
+
+  useEffect(() => {
+    if (open) {
+      resetState();
+    }
+  }, [open, resetState]);
+
+  useEffect(() => {
+    if (open && !selectedBlock) {
+      const timer = setTimeout(() => searchInputRef.current?.focus(), 50);
+      return () => clearTimeout(timer);
+    }
+  }, [open, selectedBlock]);
+
+  useEffect(() => {
+    if (selectedBlock && variantListRef.current) {
+      const firstButton = variantListRef.current.querySelector<HTMLButtonElement>(
+        'button[data-variant]'
+      );
+      firstButton?.focus();
+    }
+  }, [selectedBlock]);
+
+  function handleBlockClick(block: BlockTypeDefinition) {
+    if (block.variants.length === 1) {
+      onSelect(block.type, block.variants[0]!.name);
+      onClose();
+      return;
+    }
+    setSelectedBlock(block);
+  }
+
+  function handleVariantClick(variant: VariantDefinition) {
+    if (!selectedBlock) return;
+    onSelect(selectedBlock.type, variant.name);
+    onClose();
+  }
+
+  function handleBack() {
+    setSelectedBlock(null);
+  }
+
+  function handleKeyDownOnGrid(e: React.KeyboardEvent) {
+    if (e.key === 'Escape') {
+      e.stopPropagation();
+      onClose();
+    }
+  }
+
+  function handleKeyDownOnVariants(e: React.KeyboardEvent) {
+    if (e.key === 'Escape') {
+      e.stopPropagation();
+      handleBack();
+    }
+  }
+
+  return (
+    <Dialog.Root open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
+      <Dialog.Portal>
+        <Dialog.Overlay className="fixed inset-0 bg-black/50 z-50 motion-safe:animate-in motion-safe:fade-in-0" />
+        <Dialog.Content
+          className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-card rounded-xl shadow-2xl border border-border z-50 w-full max-w-2xl max-h-[80vh] overflow-hidden flex flex-col"
+          aria-describedby={undefined}
+          onEscapeKeyDown={() => {
+            if (selectedBlock) {
+              handleBack();
+            }
+          }}
+        >
+          {selectedBlock ? (
+            <VariantView
+              block={selectedBlock}
+              variantListRef={variantListRef}
+              onBack={handleBack}
+              onVariantClick={handleVariantClick}
+              onKeyDown={handleKeyDownOnVariants}
+            />
+          ) : (
+            <BlockTypeGrid
+              search={search}
+              filteredBlocks={filteredBlocks}
+              searchInputRef={searchInputRef}
+              onSearchChange={setSearch}
+              onBlockClick={handleBlockClick}
+              onClose={onClose}
+              onKeyDown={handleKeyDownOnGrid}
+            />
+          )}
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+interface BlockTypeGridProps {
+  search: string;
+  filteredBlocks: BlockTypeDefinition[];
+  searchInputRef: React.RefObject<HTMLInputElement | null>;
+  onSearchChange: (value: string) => void;
+  onBlockClick: (block: BlockTypeDefinition) => void;
+  onClose: () => void;
+  onKeyDown: (e: React.KeyboardEvent) => void;
+}
+
+function BlockTypeGrid({
+  search,
+  filteredBlocks,
+  searchInputRef,
+  onSearchChange,
+  onBlockClick,
+  onClose,
+  onKeyDown,
+}: BlockTypeGridProps) {
+  return (
+    <div className="flex flex-col h-full" onKeyDown={onKeyDown}>
+      <div className="flex items-center justify-between gap-3 px-5 pt-5 pb-3">
+        <Dialog.Title className="text-lg font-medium text-foreground">
+          Add Block
+        </Dialog.Title>
+        <Dialog.Close asChild>
+          <button
+            type="button"
+            className="p-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
+            aria-label="Close"
+          >
+            <X size={18} />
+          </button>
+        </Dialog.Close>
+      </div>
+
+      <div className="px-5 pb-3">
+        <div className="relative">
+          <Search
+            className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none"
+            size={16}
+          />
+          <input
+            ref={searchInputRef}
+            type="text"
+            placeholder="Search blocks..."
+            value={search}
+            onChange={(e) => onSearchChange(e.target.value)}
+            className="w-full pl-9 pr-3 py-2 text-sm bg-background border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-ring"
+            aria-label="Search block types"
+          />
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-y-auto px-5 pb-5">
+        {filteredBlocks.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-12 text-center">
+            <Search size={24} className="text-muted-foreground mb-2" />
+            <p className="text-sm text-muted-foreground">
+              No blocks match &ldquo;{search}&rdquo;
+            </p>
+          </div>
+        ) : (
+          <div className="grid grid-cols-2 gap-3" role="list" aria-label="Available block types">
+            {filteredBlocks.map((block) => {
+              const Icon = resolveIcon(block.icon);
+              return (
+                <button
+                  key={block.type}
+                  type="button"
+                  role="listitem"
+                  onClick={() => onBlockClick(block)}
+                  className="p-4 border border-border rounded-lg hover:border-primary cursor-pointer transition-colors bg-card text-left flex items-start gap-3 group focus:outline-none focus:ring-2 focus:ring-ring"
+                >
+                  <div className="shrink-0 w-9 h-9 rounded-md bg-accent flex items-center justify-center text-foreground group-hover:bg-primary/10 group-hover:text-primary transition-colors">
+                    <Icon size={18} />
+                  </div>
+                  <div className="min-w-0">
+                    <p className="text-sm font-medium text-foreground truncate">
+                      {block.label}
+                    </p>
+                    {block.description && (
+                      <p className="text-xs text-muted-foreground mt-0.5 line-clamp-2">
+                        {block.description}
+                      </p>
+                    )}
+                  </div>
+                </button>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+interface VariantViewProps {
+  block: BlockTypeDefinition;
+  variantListRef: React.RefObject<HTMLDivElement | null>;
+  onBack: () => void;
+  onVariantClick: (variant: VariantDefinition) => void;
+  onKeyDown: (e: React.KeyboardEvent) => void;
+}
+
+function VariantView({
+  block,
+  variantListRef,
+  onBack,
+  onVariantClick,
+  onKeyDown,
+}: VariantViewProps) {
+  const Icon = resolveIcon(block.icon);
+
+  return (
+    <div className="flex flex-col h-full" onKeyDown={onKeyDown}>
+      <div className="flex items-center gap-3 px-5 pt-5 pb-3">
+        <button
+          type="button"
+          onClick={onBack}
+          className="p-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
+          aria-label="Back to block types"
+        >
+          <ArrowLeft size={18} />
+        </button>
+        <div className="flex items-center gap-2 min-w-0">
+          <Icon size={18} className="text-foreground shrink-0" />
+          <h2 className="text-lg font-medium text-foreground truncate">
+            {block.label}
+          </h2>
+        </div>
+      </div>
+
+      {block.description && (
+        <p className="text-sm text-muted-foreground px-5 pb-3">
+          {block.description}
+        </p>
+      )}
+
+      <div className="flex-1 overflow-y-auto px-5 pb-5" ref={variantListRef}>
+        <div className="space-y-2" role="list" aria-label={`${block.label} variants`}>
+          {block.variants.map((variant, index) => (
+            <button
+              key={variant.name}
+              type="button"
+              role="listitem"
+              data-variant={variant.name}
+              onClick={() => onVariantClick(variant)}
+              className="w-full p-4 border border-border rounded-lg hover:border-primary cursor-pointer transition-colors bg-card text-left flex items-center gap-3 group focus:outline-none focus:ring-2 focus:ring-ring"
+            >
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-2">
+                  <p className="text-sm font-medium text-foreground">
+                    {variant.label}
+                  </p>
+                  {index === 0 && (
+                    <span className="inline-flex items-center gap-1 text-xs text-primary bg-primary/10 px-1.5 py-0.5 rounded">
+                      <Check size={10} />
+                      Default
+                    </span>
+                  )}
+                </div>
+                <p className="text-xs text-muted-foreground mt-0.5">
+                  {variant.description}
+                </p>
+              </div>
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}