@actuate-media/cms-admin 0.1.4 → 0.2.0

package/src/layout/Sidebar.tsx

@@ -0,0 +1,216 @@
+'use client';
+
+import {
+  LayoutDashboard,
+  FileText,
+  File,
+  Image,
+  Settings,
+  ChevronLeft,
+  ChevronRight,
+  ClipboardList,
+  Users,
+  Search as SearchIcon,
+  Briefcase,
+  FolderOpen,
+  BookOpen,
+  HelpCircle,
+  Newspaper,
+} from 'lucide-react';
+import type { LucideIcon } from 'lucide-react';
+
+function ActuateLogo({ className }: { className?: string }) {
+  return (
+    <svg viewBox="0 0 40 44" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} aria-hidden="true">
+      {/* Upward arrow / chevron */}
+      <polygon points="20,2 6,18 12,18 20,8 28,18 34,18" fill="#E8646A" />
+      {/* Three vertical bars */}
+      <rect x="11" y="20" width="4" height="22" rx="1" fill="#E8646A" />
+      <rect x="18" y="20" width="4" height="22" rx="1" fill="#E8646A" />
+      <rect x="25" y="20" width="4" height="22" rx="1" fill="#E8646A" />
+    </svg>
+  );
+}
+
+function ActuateWordmark({ className }: { className?: string }) {
+  return (
+    <svg viewBox="0 0 170 44" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} aria-hidden="true">
+      <polygon points="20,2 6,18 12,18 20,8 28,18 34,18" fill="#E8646A" />
+      <rect x="11" y="20" width="4" height="22" rx="1" fill="#E8646A" />
+      <rect x="18" y="20" width="4" height="22" rx="1" fill="#E8646A" />
+      <rect x="25" y="20" width="4" height="22" rx="1" fill="#E8646A" />
+      <text x="44" y="25" fontFamily="system-ui, sans-serif" fontSize="17" fontWeight="600" letterSpacing="1.5" fill="#E8646A">ACTUATE</text>
+      <text x="44" y="40" fontFamily="system-ui, sans-serif" fontSize="10" fontWeight="500" letterSpacing="4" fill="#9CA3AF">MEDIA</text>
+    </svg>
+  );
+}
+
+const ICON_MAP: Record<string, LucideIcon> = {
+  file: File,
+  'file-text': FileText,
+  briefcase: Briefcase,
+  folder: FolderOpen,
+  book: BookOpen,
+  help: HelpCircle,
+  newspaper: Newspaper,
+};
+
+function BrandLogo({ config, collapsed }: { config?: any; collapsed: boolean }) {
+  const branding = config?.admin?.branding;
+  const customLogo = branding?.logo;
+  const brandName = branding?.name;
+
+  if (collapsed) {
+    if (customLogo) {
+      return <img src={customLogo} alt={brandName ?? 'Admin'} className="w-8 h-8 object-contain" />;
+    }
+    return <ActuateLogo className="w-8 h-8" />;
+  }
+
+  if (customLogo) {
+    return (
+      <div className="flex items-center gap-2.5 min-w-0">
+        <img src={customLogo} alt={brandName ?? 'Admin'} className="h-8 w-auto object-contain shrink-0" />
+        {brandName && (
+          <span className="text-sm font-semibold text-sidebar-foreground truncate">{brandName}</span>
+        )}
+      </div>
+    );
+  }
+
+  if (brandName) {
+    return (
+      <div className="flex items-center gap-2.5 min-w-0">
+        <ActuateLogo className="w-7 h-7 shrink-0" />
+        <span className="text-sm font-semibold text-sidebar-foreground truncate">{brandName}</span>
+      </div>
+    );
+  }
+
+  return <ActuateWordmark className="h-8 w-auto" />;
+}
+
+const defaultNavItems = [
+  { path: '/', label: 'Dashboard', icon: LayoutDashboard },
+  { path: '/pages', label: 'Pages', icon: File },
+  { path: '/posts', label: 'Posts', icon: FileText },
+  { path: '/media', label: 'Media', icon: Image },
+  { path: '/forms', label: 'Forms', icon: ClipboardList },
+  { path: '/seo', label: 'SEO', icon: SearchIcon },
+  { path: '/users', label: 'Users', icon: Users },
+  { path: '/settings', label: 'Settings', icon: Settings },
+];
+
+export interface SidebarProps {
+  collapsed: boolean;
+  onToggleCollapse: () => void;
+  currentPath: string;
+  onNavigate: (path: string) => void;
+  config?: any;
+}
+
+export function Sidebar({ collapsed, onToggleCollapse, currentPath, onNavigate, config }: SidebarProps) {
+  const navItems = buildNavItems(config);
+
+  return (
+    <aside
+      className={`h-full bg-sidebar border-r border-sidebar-border transition-all duration-200 ${
+        collapsed ? 'w-20' : 'w-64'
+      }`}
+    >
+      <div
+        className={`flex items-center h-14 border-b border-sidebar-border px-4 ${
+          collapsed ? 'justify-center' : 'justify-between'
+        }`}
+      >
+        {!collapsed && (
+          <BrandLogo config={config} collapsed={false} />
+        )}
+        {collapsed && (
+          <BrandLogo config={config} collapsed={true} />
+        )}
+        <button
+          onClick={onToggleCollapse}
+          className="hidden lg:block p-2 hover:bg-sidebar-accent rounded-lg transition-colors shrink-0"
+          aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+        >
+          {collapsed ? (
+            <ChevronRight className="w-4 h-4 text-sidebar-foreground" />
+          ) : (
+            <ChevronLeft className="w-4 h-4 text-sidebar-foreground" />
+          )}
+        </button>
+      </div>
+
+      <nav className="p-3 space-y-1">
+        {navItems.map((item) => {
+          const Icon = item.icon;
+          const isActive =
+            currentPath === item.path ||
+            (item.path !== '/' && currentPath.startsWith(item.path));
+
+          return (
+            <button
+              key={item.path}
+              onClick={() => onNavigate(item.path)}
+              className={`flex items-center gap-3 px-3 py-2.5 rounded-lg transition-colors w-full text-left ${
+                isActive
+                  ? 'bg-sidebar-accent text-sidebar-primary'
+                  : 'text-sidebar-foreground hover:bg-sidebar-accent'
+              } ${collapsed ? 'justify-center' : ''}`}
+              title={collapsed ? item.label : ''}
+            >
+              <Icon className="w-5 h-5 shrink-0" />
+              {!collapsed && (
+                <span className="text-sm font-medium">{item.label}</span>
+              )}
+            </button>
+          );
+        })}
+      </nav>
+    </aside>
+  );
+}
+
+function resolveIcon(collection: any): LucideIcon {
+  const mapped = collection.admin?.icon ? ICON_MAP[collection.admin.icon] : undefined;
+  if (mapped) return mapped;
+  return collection.type === 'page' ? File : FileText;
+}
+
+function buildNavItems(config: any) {
+  if (!config?.collections) return defaultNavItems;
+
+  const raw = config.collections;
+  const collectionsList: any[] = Array.isArray(raw) ? raw : Object.values(raw);
+
+  const visible = collectionsList.filter((c) => !c.admin?.hidden);
+
+  const pages = visible.filter((c) => c.type === 'page');
+  const posts = visible.filter((c) => c.type === 'post');
+  const other = visible.filter((c) => c.type !== 'page' && c.type !== 'post');
+
+  const sorted = [...pages, ...posts, ...other];
+
+  const items: typeof defaultNavItems = [
+    { path: '/', label: 'Dashboard', icon: LayoutDashboard },
+  ];
+
+  for (const collection of sorted) {
+    items.push({
+      label: collection.labels?.plural ?? collection.slug,
+      path: `/${collection.slug}`,
+      icon: resolveIcon(collection),
+    });
+  }
+
+  items.push(
+    { path: '/media', label: 'Media', icon: Image },
+    { path: '/forms', label: 'Forms', icon: ClipboardList },
+    { path: '/seo', label: 'SEO', icon: SearchIcon },
+    { path: '/users', label: 'Users', icon: Users },
+    { path: '/settings', label: 'Settings', icon: Settings },
+  );
+
+  return items;
+}

package/src/lib/api.ts

@@ -0,0 +1,67 @@
+const DEFAULT_BASE = '/api/cms';
+
+let basePath = DEFAULT_BASE;
+
+export function setApiBase(path: string) {
+  basePath = path;
+}
+
+function getCsrfToken(): string {
+  if (typeof document === 'undefined') return '';
+  const match = document.cookie.match(/(?:^|;\s*)actuate_csrf=([^;]*)/);
+  return match?.[1] ?? '';
+}
+
+export async function ensureCsrfToken(): Promise<void> {
+  if (getCsrfToken()) return;
+  try {
+    await fetch(`${basePath}/auth/csrf`, { credentials: 'include' });
+  } catch { /* best-effort */ }
+}
+
+function getActiveLocale(): string | null {
+  if (typeof localStorage === 'undefined') return null;
+  return localStorage.getItem('actuate-locale');
+}
+
+function appendLocaleParam(endpoint: string): string {
+  const locale = getActiveLocale();
+  if (!locale) return endpoint;
+  const separator = endpoint.includes('?') ? '&' : '?';
+  return `${endpoint}${separator}locale=${encodeURIComponent(locale)}`;
+}
+
+export async function cmsApi<T = unknown>(
+  endpoint: string,
+  options: RequestInit = {}
+): Promise<{ data?: T; error?: string; status: number }> {
+  const url = `${basePath}${appendLocaleParam(endpoint)}`;
+  const isFormData = typeof FormData !== 'undefined' && options.body instanceof FormData;
+
+  const headers: Record<string, string> = {
+    ...(options.headers as Record<string, string> || {}),
+  };
+
+  if (!isFormData) {
+    headers['Content-Type'] = 'application/json';
+  }
+
+  const method = (options.method ?? 'GET').toUpperCase();
+  if (method !== 'GET' && method !== 'HEAD') {
+    const csrf = getCsrfToken();
+    if (csrf) headers['x-csrf-token'] = csrf;
+  }
+
+  try {
+    const res = await fetch(url, { ...options, headers, credentials: 'include' });
+    const json = await res.json().catch(() => ({}));
+
+    if (!res.ok) {
+      return { error: json.error || `Request failed (${res.status})`, status: res.status };
+    }
+
+    return { data: json.data ?? json, status: res.status };
+  } catch (err) {
+    return { error: err instanceof Error ? err.message : 'Network error', status: 0 };
+  }
+}

package/src/lib/search.ts

@@ -0,0 +1,59 @@
+type SortDirection = 'asc' | 'desc';
+
+export interface SortConfig<K extends string = string> {
+  key: K;
+  direction: SortDirection;
+}
+
+export function scoreRelevance(text: string, query: string): number {
+  if (!query) return 0;
+  const lower = text.toLowerCase();
+  const q = query.toLowerCase();
+  if (lower === q) return 100;
+  if (lower.startsWith(q)) return 80;
+  const wordBoundary = new RegExp(`\\b${q.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}`);
+  if (wordBoundary.test(lower)) return 60;
+  if (lower.includes(q)) return 40;
+  return 0;
+}
+
+export function sortByRelevance<T>(
+  items: T[],
+  query: string,
+  getSearchFields: (item: T) => string[],
+): T[] {
+  if (!query.trim()) return items;
+  return [...items].sort((a, b) => {
+    const scoreA = Math.max(...getSearchFields(a).map(f => scoreRelevance(f, query)));
+    const scoreB = Math.max(...getSearchFields(b).map(f => scoreRelevance(f, query)));
+    return scoreB - scoreA;
+  });
+}
+
+export function sortByColumn<T>(
+  items: T[],
+  sortConfig: SortConfig | null,
+  getValue: (item: T, key: string) => string | number,
+): T[] {
+  if (!sortConfig) return items;
+  return [...items].sort((a, b) => {
+    const aVal = getValue(a, sortConfig.key);
+    const bVal = getValue(b, sortConfig.key);
+    const cmp = typeof aVal === 'number' && typeof bVal === 'number'
+      ? aVal - bVal
+      : String(aVal).localeCompare(String(bVal));
+    return sortConfig.direction === 'asc' ? cmp : -cmp;
+  });
+}
+
+export function toggleSort<K extends string>(
+  current: SortConfig<K> | null,
+  key: K,
+): SortConfig<K> {
+  if (current?.key === key) {
+    return current.direction === 'asc'
+      ? { key, direction: 'desc' }
+      : { key, direction: 'asc' };
+  }
+  return { key, direction: 'asc' };
+}

package/src/lib/useApiData.ts

@@ -0,0 +1,95 @@
+'use client';
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { cmsApi } from './api.js';
+
+export interface UseApiDataOptions {
+  maxRetries?: number;
+  /** Base delay in ms for exponential backoff (default 1000). Actual delay = base * 2^attempt. */
+  retryBaseMs?: number;
+}
+
+export interface UseApiDataResult<T> {
+  data: T | null;
+  loading: boolean;
+  error: string | null;
+  /** True when all retries are exhausted and the request permanently failed. */
+  exhausted: boolean;
+  refetch: () => void;
+}
+
+export function useApiData<T>(
+  endpoint: string | null,
+  defaultValue: T | null = null,
+  options: UseApiDataOptions = {},
+): UseApiDataResult<T> {
+  const { maxRetries = 3, retryBaseMs = 1000 } = options;
+  const [data, setData] = useState<T | null>(defaultValue);
+  const [loading, setLoading] = useState(endpoint !== null);
+  const [error, setError] = useState<string | null>(null);
+  const [exhausted, setExhausted] = useState(false);
+  const abortRef = useRef<AbortController | null>(null);
+  const retryCountRef = useRef(0);
+  const retryTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const fetchData = useCallback(async (isRetry = false) => {
+    if (!endpoint) {
+      setLoading(false);
+      return;
+    }
+
+    abortRef.current?.abort();
+    const controller = new AbortController();
+    abortRef.current = controller;
+
+    if (!isRetry) {
+      retryCountRef.current = 0;
+      setExhausted(false);
+    }
+
+    setLoading(true);
+    setError(null);
+
+    const res = await cmsApi<T>(endpoint, { signal: controller.signal });
+
+    if (controller.signal.aborted) return;
+
+    if (res.error) {
+      if (retryCountRef.current < maxRetries) {
+        const delay = retryBaseMs * Math.pow(2, retryCountRef.current);
+        retryCountRef.current += 1;
+        retryTimerRef.current = setTimeout(() => fetchData(true), delay);
+        return;
+      }
+      setError(res.error);
+      setExhausted(true);
+      setLoading(false);
+    } else {
+      setData(res.data ?? null);
+      setLoading(false);
+      retryCountRef.current = 0;
+    }
+  }, [endpoint, maxRetries, retryBaseMs]);
+
+  const manualRefetch = useCallback(() => {
+    if (retryTimerRef.current) {
+      clearTimeout(retryTimerRef.current);
+      retryTimerRef.current = null;
+    }
+    retryCountRef.current = 0;
+    setExhausted(false);
+    fetchData(false);
+  }, [fetchData]);
+
+  useEffect(() => {
+    fetchData(false);
+    return () => {
+      abortRef.current?.abort();
+      if (retryTimerRef.current) {
+        clearTimeout(retryTimerRef.current);
+        retryTimerRef.current = null;
+      }
+    };
+  }, [fetchData]);
+
+  return { data, loading, error, exhausted, refetch: manualRefetch };
+}

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/router/index.ts

@@ -0,0 +1,81 @@
+'use client';
+
+import { useState, useCallback, useEffect, useRef } from 'react';
+
+interface RouteParams {
+  [key: string]: string;
+}
+
+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 '/';
+}
+
+export function useAdminRouter(basePath = '/admin', serverPath = '/') {
+  const [currentPath, setCurrentPath] = useState(serverPath);
+  const baseRef = useRef(basePath);
+  baseRef.current = basePath;
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      const browserPath = stripBase(window.location.pathname, basePath);
+      if (browserPath !== currentPath) {
+        setCurrentPath(browserPath);
+      }
+    }
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  useEffect(() => {
+    function onPopState() {
+      setCurrentPath(stripBase(window.location.pathname, baseRef.current));
+    }
+    window.addEventListener('popstate', onPopState);
+    return () => window.removeEventListener('popstate', onPopState);
+  }, []);
+
+  const navigate = useCallback((path: string) => {
+    const normalizedPath = path.startsWith('/') ? path : `/${path}`;
+    setCurrentPath(normalizedPath);
+
+    const fullUrl = normalizedPath === '/'
+      ? baseRef.current
+      : `${baseRef.current}${normalizedPath}`;
+    window.history.pushState({ adminPath: normalizedPath }, '', fullUrl);
+  }, []);
+
+  const matchRoute = useCallback(
+    (pattern: string): RouteParams | 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: RouteParams = {};
+
+      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;
+    },
+    [currentPath],
+  );
+
+  return { currentPath, navigate, matchRoute };
+}

package/src/styles/build-input.css

@@ -0,0 +1,11 @@
+/*
+ * Build-time input for pre-compiling admin CSS.
+ * Tailwind CLI scans the @source paths and emits a self-contained stylesheet
+ * with all utilities (including responsive variants) baked in.
+ *
+ * Consumers import the compiled output:
+ *   import '@actuate-media/cms-admin/styles/precompiled.css'
+ */
+@import "tailwindcss";
+@source "../../src/**/*.{ts,tsx}";
+@import "./theme.css";

package/src/styles/tailwind.css

@@ -1,6 +1,11 @@
-/*
- * Actuate CMS admin styles.
- * Do NOT re-import Tailwind — consumers already load it in their app.
- * This file only provides the CMS theme variables scoped to .actuate-admin.
- */
-@import "./theme.css";
+/*
+ * Actuate CMS admin styles.
+ *
+ * RECOMMENDED: Import the pre-compiled stylesheet instead for zero-config:
+ *   @import "@actuate-media/cms-admin/styles/precompiled.css";
+ *
+ * This file is for advanced users who want to customize the Tailwind build.
+ * If using this file, you must add @source to scan the admin components:
+ *   @source "../../../node_modules/@actuate-media/cms-admin/src/**\/*.{ts,tsx}";
+ */
+@import "./theme.css";