@actuate-media/cms-admin 0.1.3 → 0.2.0

package/src/AdminRoot.tsx

@@ -0,0 +1,312 @@
+'use client';
+
+import { useState, useMemo, useEffect, useRef } from 'react';
+import { Layout } from './layout/Layout.js';
+import { useAdminRouter } from './router/index.js';
+import { Dashboard } from './views/Dashboard.js';
+import { CollectionList } from './views/CollectionList.js';
+import { DocumentEdit } from './views/DocumentEdit.js';
+import { MediaBrowser } from './views/MediaBrowser.js';
+import { Settings } from './views/Settings.js';
+import { Forms } from './views/Forms.js';
+import { FormEditor } from './views/FormEditor.js';
+import { FormSubmissions } from './views/FormSubmissions.js';
+import { Users } from './views/Users.js';
+import { SEO } from './views/SEO.js';
+import { SetupWizard } from './views/SetupWizard.js';
+import { Login } from './views/Login.js';
+import { ErrorBoundary } from './components/ErrorBoundary.js';
+import { ThemeProvider } from './components/ThemeProvider.js';
+import { LocaleProvider } from './components/LocaleProvider.js';
+import { useKeyboardShortcuts } from './hooks/useKeyboardShortcuts.js';
+
+export interface AdminRootProps {
+  config: any;
+  session: any;
+  basePath?: string;
+  initialPath?: string;
+  setupRequired?: boolean;
+  onSetupComplete?: (data: { name: string; email: string; password: string }) => Promise<{ success: boolean; error?: string }>;
+  onLogin?: (email: string, password: string, captchaToken?: string) => Promise<{ success: boolean; error?: string }>;
+  captchaConfig?: { provider: 'recaptcha' | 'turnstile' | 'none'; siteKey: string | null };
+}
+
+function AdminShell({ config, session, basePath = '/admin', initialPath = '/', setupRequired, onSetupComplete, onLogin, captchaConfig }: AdminRootProps) {
+  const { currentPath, navigate, matchRoute } = useAdminRouter(basePath, initialPath);
+  const [shortcutHelpOpen, setShortcutHelpOpen] = useState(false);
+
+  useBranding(config);
+  useAdminPageTitle(config, currentPath);
+
+  const shortcuts = useMemo(() => ({
+    'mod+k': () => {
+      const searchInput = document.querySelector<HTMLInputElement>('input[placeholder*="Search"]');
+      searchInput?.focus();
+    },
+    'mod+s': () => {
+      const saveBtn = document.querySelector<HTMLButtonElement>('[data-shortcut="save"]');
+      saveBtn?.click();
+    },
+    'escape': () => {
+      const closeBtn = document.querySelector<HTMLButtonElement>('[data-shortcut="close"]');
+      closeBtn?.click();
+    },
+    'mod+/': () => {
+      setShortcutHelpOpen(prev => !prev);
+    },
+  }), []);
+
+  useKeyboardShortcuts(shortcuts);
+
+  if (setupRequired && onSetupComplete) {
+    return <SetupWizard onComplete={onSetupComplete} siteName={config?.admin?.branding?.name ?? 'Actuate CMS'} />;
+  }
+
+  if (!session && !setupRequired) {
+    if (onLogin) {
+      return <Login onLogin={onLogin} onNavigate={navigate} captchaConfig={captchaConfig} />;
+    }
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-background">
+        <div className="text-center">
+          <h1 className="text-xl font-semibold text-foreground mb-2">Unauthorized</h1>
+          <p className="text-sm text-muted-foreground">Please log in to access the admin panel.</p>
+        </div>
+      </div>
+    );
+  }
+
+  const collectionSlugs = config?.collections
+    ? Object.values(config.collections as Record<string, { slug: string }>).map((c) => c.slug)
+    : ['pages', 'posts'];
+
+  function renderView() {
+    if (matchRoute('/')) {
+      return <Dashboard onNavigate={navigate} />;
+    }
+
+    for (const slug of collectionSlugs) {
+      const newMatch = matchRoute(`/${slug}/new`);
+      if (newMatch) {
+        return <DocumentEdit collectionSlug={slug} config={config} />;
+      }
+      const editMatch = matchRoute(`/${slug}/:id`);
+      if (editMatch?.id) {
+        return <DocumentEdit collectionSlug={slug} documentId={editMatch.id} config={config} />;
+      }
+      if (matchRoute(`/${slug}`)) {
+        return <CollectionList collectionSlug={slug} config={config} onNavigate={navigate} />;
+      }
+    }
+
+    const newCollMatch = matchRoute('/collections/:slug/new');
+    if (newCollMatch?.slug) {
+      return <DocumentEdit collectionSlug={newCollMatch.slug} config={config} />;
+    }
+
+    const editCollMatch = matchRoute('/collections/:slug/:id');
+    if (editCollMatch?.slug && editCollMatch.id) {
+      return <DocumentEdit collectionSlug={editCollMatch.slug} documentId={editCollMatch.id} config={config} />;
+    }
+
+    const collectionMatch = matchRoute('/collections/:slug');
+    if (collectionMatch?.slug) {
+      return <CollectionList collectionSlug={collectionMatch.slug} config={config} onNavigate={navigate} />;
+    }
+
+    if (matchRoute('/media')) {
+      return <MediaBrowser onNavigate={navigate} />;
+    }
+
+    if (matchRoute('/forms/new')) {
+      return <FormEditor onNavigate={navigate} />;
+    }
+    const formEdit = matchRoute('/forms/:id/edit');
+    if (formEdit?.id) {
+      return <FormEditor formId={formEdit.id} onNavigate={navigate} />;
+    }
+    const formSubmissions = matchRoute('/forms/:id/submissions');
+    if (formSubmissions?.id) {
+      return <FormSubmissions formId={formSubmissions.id} onNavigate={navigate} />;
+    }
+    if (matchRoute('/forms')) {
+      return <Forms onNavigate={navigate} />;
+    }
+
+    if (matchRoute('/seo/redirects')) {
+      return <SEO onNavigate={navigate} initialTab="redirects" />;
+    }
+    if (matchRoute('/seo/canonicals')) {
+      return <SEO onNavigate={navigate} initialTab="canonicals" />;
+    }
+    if (matchRoute('/seo/links')) {
+      return <SEO onNavigate={navigate} initialTab="links" />;
+    }
+    if (matchRoute('/seo')) {
+      return <SEO onNavigate={navigate} initialTab="pages" />;
+    }
+
+    if (matchRoute('/users')) {
+      return <Users onNavigate={navigate} />;
+    }
+
+    if (matchRoute('/settings')) {
+      return <Settings onNavigate={navigate} />;
+    }
+
+    return (
+      <div className="flex flex-col items-center justify-center min-h-[400px] text-center p-6">
+        <h1 className="text-4xl font-bold text-foreground mb-2">404</h1>
+        <p className="text-muted-foreground mb-4">The page you are looking for does not exist.</p>
+        <button
+          onClick={() => navigate('/')}
+          className="px-4 py-2 text-sm font-medium text-primary-foreground bg-primary rounded-md hover:opacity-90"
+        >
+          Back to Dashboard
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <Layout config={config} session={session} currentPath={currentPath} onNavigate={navigate}>
+      <ErrorBoundary>
+        {renderView()}
+      </ErrorBoundary>
+      {shortcutHelpOpen && <ShortcutHelp onClose={() => setShortcutHelpOpen(false)} />}
+    </Layout>
+  );
+}
+
+function ShortcutHelp({ onClose }: { onClose: () => void }) {
+  return (
+    <div
+      className="fixed inset-0 z-100 flex items-center justify-center bg-black/50"
+      onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}
+    >
+      <div className="bg-card text-card-foreground rounded-xl shadow-2xl border border-border p-6 max-w-sm w-full mx-4">
+        <h3 className="text-lg font-semibold mb-4">Keyboard Shortcuts</h3>
+        <div className="space-y-3 text-sm">
+          {[
+            ['⌘ K', 'Open search'],
+            ['⌘ S', 'Save document'],
+            ['⌘ /', 'Toggle this help'],
+            ['Esc', 'Close panel / modal'],
+          ].map(([key, desc]) => (
+            <div key={key} className="flex items-center justify-between">
+              <span className="text-muted-foreground">{desc}</span>
+              <kbd className="px-2 py-1 text-xs font-mono bg-muted rounded">{key}</kbd>
+            </div>
+          ))}
+        </div>
+        <button
+          onClick={onClose}
+          className="mt-4 w-full py-2 text-sm bg-primary text-primary-foreground rounded-lg hover:opacity-90"
+        >
+          Close
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function useBranding(config: any) {
+  const originalFaviconRef = useRef<string | null>(null);
+  const originalTitleRef = useRef<string | null>(null);
+  const injectedLinkRef = useRef<HTMLLinkElement | null>(null);
+
+  useEffect(() => {
+    const branding = config?.admin?.branding;
+    if (!branding) return;
+
+    // --- Favicon ---
+    if (branding.favicon) {
+      const existing = document.querySelector<HTMLLinkElement>('link[rel="icon"]');
+      originalFaviconRef.current = existing?.href ?? null;
+
+      if (existing) {
+        existing.href = branding.favicon;
+      } else {
+        const link = document.createElement('link');
+        link.rel = 'icon';
+        link.href = branding.favicon;
+        document.head.appendChild(link);
+        injectedLinkRef.current = link;
+      }
+    }
+
+    // --- Document title ---
+    originalTitleRef.current = document.title;
+    if (branding.title) {
+      document.title = branding.title;
+    } else if (branding.name) {
+      document.title = `${branding.name} Admin`;
+    }
+
+    // --- Primary color ---
+    const adminEl = document.querySelector<HTMLElement>('.actuate-admin');
+    if (branding.primaryColor && adminEl) {
+      adminEl.style.setProperty('--primary', branding.primaryColor);
+      adminEl.style.setProperty('--sidebar-primary', branding.primaryColor);
+    }
+
+    return () => {
+      // Restore favicon
+      if (branding.favicon) {
+        const link = document.querySelector<HTMLLinkElement>('link[rel="icon"]');
+        if (link && originalFaviconRef.current) {
+          link.href = originalFaviconRef.current;
+        }
+        if (injectedLinkRef.current) {
+          injectedLinkRef.current.remove();
+          injectedLinkRef.current = null;
+        }
+      }
+
+      // Restore title
+      if (originalTitleRef.current !== null) {
+        document.title = originalTitleRef.current;
+      }
+
+      // Remove primary color override
+      if (branding.primaryColor && adminEl) {
+        adminEl.style.removeProperty('--primary');
+        adminEl.style.removeProperty('--sidebar-primary');
+      }
+    };
+  }, [config]);
+}
+
+function useAdminPageTitle(config: any, currentPath: string) {
+  useEffect(() => {
+    const branding = config?.admin?.branding;
+    const baseName = branding?.title ?? (branding?.name ? `${branding.name} Admin` : null);
+    if (!baseName) return;
+
+    const segment = currentPath === '/' ? 'Dashboard' : currentPath.split('/').filter(Boolean)[0];
+    const pageName = segment ? segment.charAt(0).toUpperCase() + segment.slice(1) : 'Dashboard';
+    document.title = `${pageName} — ${baseName}`;
+  }, [config, currentPath]);
+}
+
+const ISOLATION_STYLE: React.CSSProperties = {
+  position: 'fixed',
+  inset: '0',
+  zIndex: 50,
+  overflow: 'auto',
+  isolation: 'isolate',
+};
+
+export function AdminRoot(props: AdminRootProps) {
+  const defaultDarkMode = props.config?.admin?.branding?.darkMode;
+
+  return (
+    <div style={ISOLATION_STYLE} className="actuate-admin">
+      <ThemeProvider defaultDarkMode={defaultDarkMode}>
+        <LocaleProvider config={props.config}>
+          <AdminShell {...props} />
+        </LocaleProvider>
+      </ThemeProvider>
+    </div>
+  );
+}

package/src/__tests__/lib/search.test.ts

@@ -0,0 +1,138 @@
+import { describe, it, expect } from 'vitest';
+import {
+  scoreRelevance,
+  sortByRelevance,
+  sortByColumn,
+  toggleSort,
+} from '../../lib/search.js';
+
+describe('scoreRelevance', () => {
+  it('returns 100 for exact match (case-insensitive)', () => {
+    expect(scoreRelevance('Hello', 'hello')).toBe(100);
+    expect(scoreRelevance('test', 'test')).toBe(100);
+  });
+
+  it('returns 80 when text starts with the query', () => {
+    expect(scoreRelevance('hello world', 'hel')).toBe(80);
+    expect(scoreRelevance('Alpha', 'al')).toBe(80);
+  });
+
+  it('returns 60 when query matches at a word boundary but not at start', () => {
+    expect(scoreRelevance('say hello', 'hello')).toBe(60);
+  });
+
+  it('returns 40 when query appears only as a substring without word-boundary match', () => {
+    expect(scoreRelevance('axxhello', 'hello')).toBe(40);
+  });
+
+  it('returns 0 when there is no match', () => {
+    expect(scoreRelevance('abc def', 'xyz')).toBe(0);
+  });
+
+  it('returns 0 for an empty query', () => {
+    expect(scoreRelevance('anything', '')).toBe(0);
+  });
+});
+
+describe('sortByRelevance', () => {
+  it('sorts items by best field relevance score descending', () => {
+    const items = [
+      { id: 'a', title: 'zzz' },
+      { id: 'b', title: 'hello' },
+      { id: 'c', title: 'say hello' },
+    ];
+    const sorted = sortByRelevance(items, 'hello', item => [item.title]);
+    // exact match > word-boundary match > no match
+    expect(sorted.map(i => i.id)).toEqual(['b', 'c', 'a']);
+  });
+
+  it('returns the original array reference for an empty query', () => {
+    const items = [{ id: '1' }, { id: '2' }];
+    const result = sortByRelevance(items, '', item => [item.id]);
+    expect(result).toBe(items);
+  });
+
+  it('returns the original array when query is whitespace-only', () => {
+    const items = [{ id: '1' }];
+    expect(sortByRelevance(items, '   ', item => [item.id])).toBe(items);
+  });
+
+  it('uses the maximum score across multiple search fields', () => {
+    const items = [
+      { id: 'low', a: 'x', b: 'x' },
+      { id: 'high', a: 'x', b: 'exact' },
+    ];
+    const sorted = sortByRelevance(items, 'exact', item => [item.a, item.b]);
+    expect(sorted[0]!.id).toBe('high');
+  });
+});
+
+describe('sortByColumn', () => {
+  it('returns the original array when sortConfig is null', () => {
+    const items = [{ n: 2 }, { n: 1 }];
+    expect(sortByColumn(items, null, (item, key) => item[key as 'n'])).toBe(items);
+  });
+
+  it('sorts strings ascending', () => {
+    const items = [{ name: 'b' }, { name: 'a' }, { name: 'c' }];
+    const sorted = sortByColumn(
+      items,
+      { key: 'name', direction: 'asc' },
+      (item, key) => item[key as 'name'],
+    );
+    expect(sorted.map(i => i.name)).toEqual(['a', 'b', 'c']);
+  });
+
+  it('sorts strings descending', () => {
+    const items = [{ name: 'a' }, { name: 'c' }, { name: 'b' }];
+    const sorted = sortByColumn(
+      items,
+      { key: 'name', direction: 'desc' },
+      (item, key) => item[key as 'name'],
+    );
+    expect(sorted.map(i => i.name)).toEqual(['c', 'b', 'a']);
+  });
+
+  it('sorts numbers ascending and descending', () => {
+    const items = [{ v: 3 }, { v: 1 }, { v: 2 }];
+    const asc = sortByColumn(
+      items,
+      { key: 'v', direction: 'asc' },
+      (item, key) => item[key as 'v'],
+    );
+    expect(asc.map(i => i.v)).toEqual([1, 2, 3]);
+    const desc = sortByColumn(
+      items,
+      { key: 'v', direction: 'desc' },
+      (item, key) => item[key as 'v'],
+    );
+    expect(desc.map(i => i.v)).toEqual([3, 2, 1]);
+  });
+});
+
+describe('toggleSort', () => {
+  it('returns ascending sort when current is null', () => {
+    expect(toggleSort(null, 'title')).toEqual({ key: 'title', direction: 'asc' });
+  });
+
+  it('toggles same key from asc to desc', () => {
+    expect(toggleSort({ key: 'title', direction: 'asc' }, 'title')).toEqual({
+      key: 'title',
+      direction: 'desc',
+    });
+  });
+
+  it('toggles same key from desc to asc', () => {
+    expect(toggleSort({ key: 'title', direction: 'desc' }, 'title')).toEqual({
+      key: 'title',
+      direction: 'asc',
+    });
+  });
+
+  it('starts ascending when switching to a different key', () => {
+    expect(toggleSort({ key: 'foo', direction: 'desc' }, 'bar')).toEqual({
+      key: 'bar',
+      direction: 'asc',
+    });
+  });
+});

package/src/__tests__/lib/utils.test.ts

@@ -0,0 +1,19 @@
+import { describe, it, expect } from 'vitest';
+import { cn } from '../../lib/utils.js';
+
+describe('cn', () => {
+  it('merges multiple class names into a single string', () => {
+    expect(cn('foo', 'bar')).toBe('foo bar');
+    expect(cn('a', 'b', 'c')).toBe('a b c');
+  });
+
+  it('omits falsy conditional classes', () => {
+    expect(cn('base', false && 'hidden', 'visible')).toBe('base visible');
+    expect(cn('x', undefined, null, 0, 'y')).toBe('x y');
+  });
+
+  it('resolves conflicting Tailwind utilities in favor of the last one', () => {
+    expect(cn('p-4', 'p-2')).toBe('p-2');
+    expect(cn('text-sm', 'text-lg')).toBe('text-lg');
+  });
+});

package/src/__tests__/router/match-route.test.ts

@@ -0,0 +1,47 @@
+import { describe, it, expect } from 'vitest';
+
+function matchRoute(currentPath: string, pattern: string): Record<string, string> | null {
+  const patternParts = pattern.split('/').filter(Boolean);
+  const pathParts = currentPath.split('/').filter(Boolean);
+  if (pattern === '/' && pathParts.length === 0) return {};
+  if (patternParts.length !== pathParts.length) return null;
+  const params: Record<string, string> = {};
+  for (let i = 0; i < patternParts.length; i++) {
+    const patternPart = patternParts[i]!;
+    const pathPart = pathParts[i]!;
+    if (patternPart.startsWith(':')) {
+      params[patternPart.slice(1)] = pathPart;
+    } else if (patternPart !== pathPart) {
+      return null;
+    }
+  }
+  return params;
+}
+
+describe('matchRoute', () => {
+  it('matches the root pattern against an empty path', () => {
+    expect(matchRoute('/', '/')).toEqual({});
+  });
+
+  it('matches static multi-segment paths', () => {
+    expect(matchRoute('/collections/posts', '/collections/posts')).toEqual({});
+  });
+
+  it('extracts named parameters from dynamic segments', () => {
+    expect(matchRoute('/collections/posts/abc-123', '/collections/posts/:id')).toEqual({
+      id: 'abc-123',
+    });
+    expect(
+      matchRoute('/users/u1/settings', '/users/:userId/settings'),
+    ).toEqual({ userId: 'u1' });
+  });
+
+  it('returns null when a static segment does not match', () => {
+    expect(matchRoute('/collections/pages', '/collections/posts')).toBeNull();
+  });
+
+  it('returns null when segment counts differ', () => {
+    expect(matchRoute('/a', '/a/b')).toBeNull();
+    expect(matchRoute('/a/b', '/a')).toBeNull();
+  });
+});

package/src/__tests__/router/strip-base.test.ts

@@ -0,0 +1,30 @@
+import { describe, it, expect } from 'vitest';
+
+// Copy of the internal stripBase function for testing
+function stripBase(pathname: string, basePath: string): string {
+  if (pathname.startsWith(basePath)) {
+    const rest = pathname.slice(basePath.length);
+    return rest === '' || rest === '/' ? '/' : rest.startsWith('/') ? rest : `/${rest}`;
+  }
+  return '/';
+}
+
+describe('stripBase', () => {
+  it('strips the base path and returns the remainder with a leading slash', () => {
+    expect(stripBase('/admin/dashboard', '/admin')).toBe('/dashboard');
+    expect(stripBase('/admin/collections/posts', '/admin')).toBe('/collections/posts');
+  });
+
+  it('returns root when the pathname is exactly the base or base plus trailing slash', () => {
+    expect(stripBase('/admin', '/admin')).toBe('/');
+    expect(stripBase('/admin/', '/admin')).toBe('/');
+  });
+
+  it('returns root when the pathname does not start with the base path', () => {
+    expect(stripBase('/public/page', '/admin')).toBe('/');
+  });
+
+  it('normalizes remainder that lacks a leading slash', () => {
+    expect(stripBase('/adminfoo', '/admin')).toBe('/foo');
+  });
+});

package/src/components/Breadcrumbs.tsx

@@ -0,0 +1,92 @@
+'use client';
+
+import { ChevronRight, Home } from 'lucide-react';
+
+const LABEL_MAP: Record<string, string> = {
+  posts: 'Posts',
+  pages: 'Pages',
+  media: 'Media Library',
+  forms: 'Forms',
+  seo: 'SEO',
+  redirects: 'Redirects',
+  canonicals: 'Canonicalization',
+  links: 'Link Health',
+  users: 'Users',
+  settings: 'Settings',
+  collections: 'Collections',
+  submissions: 'Submissions',
+  new: 'New',
+  edit: 'Edit',
+};
+
+function labelFor(segment: string): string {
+  return LABEL_MAP[segment] ?? segment.replace(/[-_]/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
+}
+
+function isId(segment: string): boolean {
+  return /^\d+$/.test(segment) || /^[0-9a-f]{8,}$/i.test(segment);
+}
+
+export interface BreadcrumbsProps {
+  currentPath: string;
+  onNavigate: (path: string) => void;
+}
+
+export function Breadcrumbs({ currentPath, onNavigate }: BreadcrumbsProps) {
+  const segments = currentPath.split('/').filter(Boolean);
+
+  if (segments.length === 0) return null;
+
+  const crumbs: { label: string; path: string }[] = [];
+  let accumulated = '';
+
+  for (let i = 0; i < segments.length; i++) {
+    const seg = segments[i]!;
+    accumulated += `/${seg}`;
+
+    let label: string;
+    if (isId(seg)) {
+      const parentLabel = i > 0 ? labelFor(segments[i - 1]!) : '';
+      label = parentLabel
+        ? `Edit ${parentLabel.replace(/s$/, '')}`
+        : `#${seg}`;
+    } else {
+      label = labelFor(seg);
+    }
+
+    crumbs.push({ label, path: accumulated });
+  }
+
+  return (
+    <nav aria-label="Breadcrumb" className="flex items-center gap-1 text-sm py-2.5 px-4 bg-white border-b border-gray-200 overflow-x-auto">
+      <button
+        type="button"
+        onClick={() => onNavigate('/')}
+        className="flex items-center gap-1 text-gray-500 hover:text-blue-600 transition-colors shrink-0"
+      >
+        <Home className="w-3.5 h-3.5" />
+        <span className="hidden sm:inline">Dashboard</span>
+      </button>
+
+      {crumbs.map((crumb, i) => {
+        const isLast = i === crumbs.length - 1;
+        return (
+          <span key={crumb.path} className="flex items-center gap-1 shrink-0">
+            <ChevronRight className="w-3.5 h-3.5 text-gray-400" />
+            {isLast ? (
+              <span className="font-medium text-gray-900">{crumb.label}</span>
+            ) : (
+              <button
+                type="button"
+                onClick={() => onNavigate(crumb.path)}
+                className="text-gray-500 hover:text-blue-600 transition-colors"
+              >
+                {crumb.label}
+              </button>
+            )}
+          </span>
+        );
+      })}
+    </nav>
+  );
+}