@actuate-media/cms-admin 0.1.4 → 0.2.1

package/src/components/VersionHistory.tsx

@@ -0,0 +1,167 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { X, RotateCcw, Clock, User, Loader2 } from 'lucide-react';
+import { toast } from 'sonner';
+import { cmsApi } from '../lib/api.js';
+
+interface Version {
+  id: string;
+  changeType: string;
+  createdAt: string;
+  data: Record<string, unknown>;
+  changedBy?: {
+    id: string;
+    name?: string;
+    email?: string;
+  };
+}
+
+export interface VersionHistoryProps {
+  collectionSlug: string;
+  documentId: string;
+  open: boolean;
+  onClose: () => void;
+  onRestore?: (data: Record<string, unknown>) => void;
+}
+
+function timeAgo(dateStr: string): string {
+  const diff = Date.now() - new Date(dateStr).getTime();
+  const minutes = Math.floor(diff / 60_000);
+  if (minutes < 1) return 'just now';
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  if (days < 30) return `${days}d ago`;
+  return new Date(dateStr).toLocaleDateString();
+}
+
+const CHANGE_TYPE_LABELS: Record<string, { label: string; color: string }> = {
+  CREATE: { label: 'Created', color: 'bg-green-100 text-green-800' },
+  UPDATE: { label: 'Updated', color: 'bg-blue-100 text-blue-800' },
+  DELETE: { label: 'Deleted', color: 'bg-red-100 text-red-800' },
+  RESTORE: { label: 'Restored', color: 'bg-purple-100 text-purple-800' },
+};
+
+export function VersionHistory({ collectionSlug, documentId, open, onClose, onRestore }: VersionHistoryProps) {
+  const [versions, setVersions] = useState<Version[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [restoring, setRestoring] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (open) fetchVersions();
+  }, [open, collectionSlug, documentId]);
+
+  async function fetchVersions() {
+    setLoading(true);
+    const res = await cmsApi<{ versions: Version[]; total: number }>(
+      `/collections/${collectionSlug}/${documentId}/versions?pageSize=50`,
+    );
+    if (res.data) {
+      setVersions((res.data as any).versions ?? []);
+    }
+    setLoading(false);
+  }
+
+  async function handleRestore(version: Version) {
+    setRestoring(version.id);
+    const res = await cmsApi<any>(
+      `/collections/${collectionSlug}/${documentId}/versions/${version.id}/restore`,
+      { method: 'POST' },
+    );
+    if (res.error) {
+      toast.error(res.error);
+    } else {
+      toast.success('Version restored');
+      if (onRestore && version.data) {
+        onRestore(version.data);
+      }
+      fetchVersions();
+    }
+    setRestoring(null);
+  }
+
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex justify-end">
+      <div className="fixed inset-0 bg-black/30" onClick={onClose} />
+      <div className="relative w-full max-w-md bg-white shadow-xl flex flex-col animate-in slide-in-from-right">
+        <div className="flex items-center justify-between px-4 py-3 border-b border-gray-200">
+          <div className="flex items-center gap-2">
+            <Clock className="w-5 h-5 text-gray-600" />
+            <h2 className="text-lg font-semibold text-gray-900">Version History</h2>
+          </div>
+          <button onClick={onClose} className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors">
+            <X className="w-5 h-5 text-gray-500" />
+          </button>
+        </div>
+
+        <div className="flex-1 overflow-y-auto">
+          {loading ? (
+            <div className="flex items-center justify-center py-16">
+              <Loader2 className="w-6 h-6 animate-spin text-gray-400" />
+            </div>
+          ) : versions.length === 0 ? (
+            <div className="text-center py-16 text-sm text-gray-500">
+              No version history available
+            </div>
+          ) : (
+            <div className="divide-y divide-gray-100">
+              {versions.map((version, index) => {
+                const typeInfo = CHANGE_TYPE_LABELS[version.changeType] ?? {
+                  label: version.changeType,
+                  color: 'bg-gray-100 text-gray-800',
+                };
+                const isLatest = index === 0;
+
+                return (
+                  <div key={version.id} className="px-4 py-3 hover:bg-gray-50 transition-colors">
+                    <div className="flex items-start justify-between gap-3">
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-2 mb-1">
+                          <span className={`inline-flex px-2 py-0.5 rounded-full text-xs font-medium ${typeInfo.color}`}>
+                            {typeInfo.label}
+                          </span>
+                          {isLatest && (
+                            <span className="text-xs text-gray-400 font-medium">Current</span>
+                          )}
+                        </div>
+                        <div className="flex items-center gap-3 text-xs text-gray-500">
+                          {version.changedBy && (
+                            <span className="flex items-center gap-1">
+                              <User className="w-3 h-3" />
+                              {version.changedBy.name ?? version.changedBy.email ?? 'Unknown'}
+                            </span>
+                          )}
+                          <span title={new Date(version.createdAt).toLocaleString()}>
+                            {timeAgo(version.createdAt)}
+                          </span>
+                        </div>
+                      </div>
+                      {!isLatest && (
+                        <button
+                          onClick={() => handleRestore(version)}
+                          disabled={restoring === version.id}
+                          className="flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium text-blue-700 bg-blue-50 rounded-lg hover:bg-blue-100 transition-colors disabled:opacity-50"
+                        >
+                          {restoring === version.id ? (
+                            <Loader2 className="w-3.5 h-3.5 animate-spin" />
+                          ) : (
+                            <RotateCcw className="w-3.5 h-3.5" />
+                          )}
+                          Restore
+                        </button>
+                      )}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/ui/Avatar.tsx

@@ -0,0 +1,42 @@
+type AvatarSize = 'sm' | 'md' | 'lg';
+
+export interface AvatarProps {
+  src?: string | null;
+  name?: string;
+  size?: AvatarSize;
+}
+
+const sizeClasses: Record<AvatarSize, string> = {
+  sm: 'h-6 w-6 text-[10px]',
+  md: 'h-9 w-9 text-xs',
+  lg: 'h-12 w-12 text-sm',
+};
+
+function getInitials(name: string): string {
+  return name
+    .split(' ')
+    .map((part) => part.charAt(0))
+    .join('')
+    .toUpperCase()
+    .slice(0, 2);
+}
+
+export function Avatar({ src, name = '', size = 'md' }: AvatarProps) {
+  if (src) {
+    return (
+      <img
+        src={src}
+        alt={name}
+        className={`inline-block shrink-0 rounded-full object-cover ${sizeClasses[size]}`}
+      />
+    );
+  }
+
+  return (
+    <span
+      className={`inline-flex shrink-0 items-center justify-center rounded-full bg-[var(--primary)] font-medium text-[var(--primary-foreground)] ${sizeClasses[size]}`}
+    >
+      {getInitials(name) || '?'}
+    </span>
+  );
+}

package/src/components/ui/Badge.tsx

@@ -0,0 +1,25 @@
+export interface BadgeProps {
+  status: 'published' | 'draft' | 'archived' | 'scheduled';
+}
+
+const statusClasses: Record<BadgeProps['status'], string> = {
+  published: 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-400',
+  draft: 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300',
+  archived: 'bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-400',
+  scheduled: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400',
+};
+
+const statusLabels: Record<BadgeProps['status'], string> = {
+  published: 'Published',
+  draft: 'Draft',
+  archived: 'Archived',
+  scheduled: 'Scheduled',
+};
+
+export function Badge({ status }: BadgeProps) {
+  return (
+    <span className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${statusClasses[status]}`}>
+      {statusLabels[status]}
+    </span>
+  );
+}

package/src/components/ui/Button.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import { type ButtonHTMLAttributes, type ReactNode } from 'react';
+
+type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'ghost';
+type ButtonSize = 'sm' | 'md' | 'lg';
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  loading?: boolean;
+  children: ReactNode;
+}
+
+const variantClasses: Record<ButtonVariant, string> = {
+  primary: 'bg-[var(--primary)] text-[var(--primary-foreground)] hover:opacity-90',
+  secondary: 'bg-[var(--secondary)] text-[var(--secondary-foreground)] hover:opacity-80',
+  danger: 'bg-[var(--destructive)] text-[var(--destructive-foreground)] hover:opacity-90',
+  ghost: 'bg-transparent hover:bg-[var(--accent)] text-[var(--foreground)]',
+};
+
+const sizeClasses: Record<ButtonSize, string> = {
+  sm: 'px-2.5 py-1 text-xs',
+  md: 'px-4 py-2 text-sm',
+  lg: 'px-6 py-2.5 text-base',
+};
+
+export function Button({
+  variant = 'primary',
+  size = 'md',
+  loading = false,
+  disabled,
+  children,
+  className = '',
+  ...rest
+}: ButtonProps) {
+  return (
+    <button
+      disabled={disabled || loading}
+      className={`inline-flex items-center justify-center gap-2 rounded-[var(--radius)] font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 ${variantClasses[variant]} ${sizeClasses[size]} ${className}`}
+      {...rest}
+    >
+      {loading && (
+        <svg className="h-4 w-4 animate-spin" viewBox="0 0 24 24" fill="none">
+          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+          <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
+        </svg>
+      )}
+      {children}
+    </button>
+  );
+}

package/src/components/ui/CommandPalette.tsx

@@ -0,0 +1,119 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+
+interface CommandItem {
+  id: string;
+  label: string;
+  group: string;
+  onSelect: () => void;
+}
+
+export interface CommandPaletteProps {
+  open: boolean;
+  onClose: () => void;
+  items: CommandItem[];
+}
+
+export function CommandPalette({ open, onClose, items }: CommandPaletteProps) {
+  const [query, setQuery] = useState('');
+  const [activeIndex, setActiveIndex] = useState(0);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const filtered = items.filter((item) =>
+    item.label.toLowerCase().includes(query.toLowerCase()),
+  );
+
+  const groups = Array.from(new Set(filtered.map((i) => i.group)));
+
+  useEffect(() => {
+    if (open) {
+      setQuery('');
+      setActiveIndex(0);
+      requestAnimationFrame(() => inputRef.current?.focus());
+    }
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) return;
+
+    function handleKey(e: KeyboardEvent) {
+      if (e.key === 'Escape') {
+        onClose();
+        return;
+      }
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        setActiveIndex((i) => Math.min(i + 1, filtered.length - 1));
+      }
+      if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        setActiveIndex((i) => Math.max(i - 1, 0));
+      }
+      if (e.key === 'Enter' && filtered[activeIndex]) {
+        filtered[activeIndex].onSelect();
+        onClose();
+      }
+    }
+
+    document.addEventListener('keydown', handleKey);
+    return () => document.removeEventListener('keydown', handleKey);
+  }, [open, onClose, filtered, activeIndex]);
+
+  if (!open) return null;
+
+  let flatIndex = -1;
+
+  return (
+    <div className="fixed inset-0 z-[70] flex items-start justify-center pt-[20vh]">
+      <div className="fixed inset-0 bg-black/50" onClick={onClose} role="presentation" />
+      <div className="relative z-10 w-full max-w-lg overflow-hidden rounded-lg border border-[var(--border)] bg-[var(--popover)] shadow-2xl">
+        <div className="flex items-center border-b border-[var(--border)] px-4">
+          <svg className="mr-2 h-4 w-4 text-[var(--muted-foreground)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+          </svg>
+          <input
+            ref={inputRef}
+            type="text"
+            value={query}
+            onChange={(e) => { setQuery(e.target.value); setActiveIndex(0); }}
+            placeholder="Type a command or search..."
+            className="flex-1 bg-transparent py-3 text-sm outline-none"
+          />
+        </div>
+
+        <div className="max-h-72 overflow-y-auto py-2">
+          {groups.map((group) => (
+            <div key={group}>
+              <div className="px-4 py-1.5 text-xs font-medium text-[var(--muted-foreground)]">
+                {group}
+              </div>
+              {filtered
+                .filter((i) => i.group === group)
+                .map((item) => {
+                  flatIndex++;
+                  const idx = flatIndex;
+                  return (
+                    <button
+                      key={item.id}
+                      onClick={() => { item.onSelect(); onClose(); }}
+                      className={`flex w-full px-4 py-2 text-sm ${
+                        idx === activeIndex ? 'bg-[var(--accent)]' : ''
+                      }`}
+                    >
+                      {item.label}
+                    </button>
+                  );
+                })}
+            </div>
+          ))}
+          {filtered.length === 0 && (
+            <p className="px-4 py-6 text-center text-sm text-[var(--muted-foreground)]">
+              No results found.
+            </p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/ui/ConfirmDialog.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import { Modal } from './Modal.js';
+import { Button } from './Button.js';
+
+export interface ConfirmDialogProps {
+  open: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  title: string;
+  description: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  destructive?: boolean;
+}
+
+export function ConfirmDialog({
+  open,
+  onClose,
+  onConfirm,
+  title,
+  description,
+  confirmLabel = 'Confirm',
+  cancelLabel = 'Cancel',
+  destructive = false,
+}: ConfirmDialogProps) {
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      title={title}
+      actions={
+        <>
+          <Button variant="ghost" onClick={onClose}>
+            {cancelLabel}
+          </Button>
+          <Button
+            variant={destructive ? 'danger' : 'primary'}
+            onClick={() => {
+              onConfirm();
+              onClose();
+            }}
+          >
+            {confirmLabel}
+          </Button>
+        </>
+      }
+    >
+      <p className="text-sm text-[var(--muted-foreground)]">{description}</p>
+    </Modal>
+  );
+}

package/src/components/ui/DataTable.tsx

@@ -0,0 +1,194 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+
+interface Column {
+  key: string;
+  label: string;
+  sortable?: boolean;
+}
+
+interface Row {
+  id: string;
+  [key: string]: any;
+}
+
+export interface RowAction {
+  key: string;
+  label: string;
+  icon?: React.ReactNode;
+  destructive?: boolean;
+  onClick: (row: Row) => void;
+}
+
+export interface DataTableProps {
+  columns: Column[];
+  rows: Row[];
+  selectedIds: string[];
+  onSelectionChange: (ids: string[]) => void;
+  sortField?: string;
+  sortDir?: 'asc' | 'desc';
+  onSort?: (field: string) => void;
+  rowActions?: RowAction[];
+  onRowClick?: (row: Row) => void;
+}
+
+export function DataTable({
+  columns,
+  rows,
+  selectedIds,
+  onSelectionChange,
+  sortField,
+  sortDir,
+  onSort,
+  rowActions,
+  onRowClick,
+}: DataTableProps) {
+  const allSelected = rows.length > 0 && selectedIds.length === rows.length;
+
+  function toggleAll() {
+    onSelectionChange(allSelected ? [] : rows.map((r) => r.id));
+  }
+
+  function toggleRow(id: string) {
+    onSelectionChange(
+      selectedIds.includes(id)
+        ? selectedIds.filter((s) => s !== id)
+        : [...selectedIds, id],
+    );
+  }
+
+  return (
+    <div className="overflow-x-auto rounded-lg border border-[var(--border)]">
+      <table className="w-full text-left text-sm">
+        <thead className="border-b border-[var(--border)] bg-[var(--muted)]">
+          <tr>
+            <th className="w-10 px-4 py-3">
+              <input
+                type="checkbox"
+                checked={allSelected}
+                onChange={toggleAll}
+                className="rounded border-[var(--border)]"
+              />
+            </th>
+            {columns.map((col) => (
+              <th key={col.key} className="px-4 py-3 font-medium">
+                {col.sortable && onSort ? (
+                  <button
+                    onClick={() => onSort(col.key)}
+                    className="inline-flex items-center gap-1 hover:text-[var(--foreground)]"
+                  >
+                    {col.label}
+                    {sortField === col.key && (
+                      <span className="text-xs">{sortDir === 'asc' ? '↑' : '↓'}</span>
+                    )}
+                  </button>
+                ) : (
+                  col.label
+                )}
+              </th>
+            ))}
+            {rowActions && rowActions.length > 0 && <th className="w-20 px-4 py-3" />}
+          </tr>
+        </thead>
+        <tbody className="divide-y divide-[var(--border)]">
+          {rows.map((row) => (
+            <tr
+              key={row.id}
+              className={`hover:bg-[var(--accent)] ${selectedIds.includes(row.id) ? 'bg-[var(--accent)]' : ''}`}
+              onClick={() => onRowClick?.(row)}
+              style={onRowClick ? { cursor: 'pointer' } : undefined}
+            >
+              <td className="px-4 py-3" onClick={(e) => e.stopPropagation()}>
+                <input
+                  type="checkbox"
+                  checked={selectedIds.includes(row.id)}
+                  onChange={() => toggleRow(row.id)}
+                  className="rounded border-[var(--border)]"
+                />
+              </td>
+              {columns.map((col) => (
+                <td key={col.key} className="px-4 py-3">
+                  {row[col.key]}
+                </td>
+              ))}
+              {rowActions && rowActions.length > 0 && (
+                <td className="px-4 py-3" onClick={(e) => e.stopPropagation()}>
+                  <RowActionsMenu actions={rowActions} row={row} />
+                </td>
+              )}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+function RowActionsMenu({ actions, row }: { actions: RowAction[]; row: Row }) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    function handleClickOutside(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [open]);
+
+  return (
+    <div className="relative flex items-center justify-end gap-1" ref={ref}>
+      {actions
+        .filter((a) => a.icon)
+        .map((action) => (
+          <button
+            key={action.key}
+            onClick={() => action.onClick(row)}
+            className="rounded p-1 text-[var(--muted-foreground)] hover:bg-[var(--muted)] hover:text-[var(--foreground)]"
+            aria-label={action.label}
+            title={action.label}
+          >
+            {action.icon}
+          </button>
+        ))}
+      <button
+        onClick={() => setOpen((o) => !o)}
+        className="rounded p-1 hover:bg-[var(--muted)]"
+        aria-label="More actions"
+      >
+        <MoreVerticalIcon />
+      </button>
+      {open && (
+        <div className="absolute right-0 top-full z-50 mt-1 w-40 rounded-md border border-[var(--border)] bg-[var(--popover)] py-1 shadow-lg">
+          {actions.map((action) => (
+            <button
+              key={action.key}
+              className={`flex w-full items-center gap-2 px-3 py-1.5 text-sm hover:bg-[var(--accent)] ${
+                action.destructive ? 'text-[var(--destructive)]' : ''
+              }`}
+              onClick={() => {
+                action.onClick(row);
+                setOpen(false);
+              }}
+            >
+              {action.icon && <span className="h-4 w-4">{action.icon}</span>}
+              {action.label}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function MoreVerticalIcon() {
+  return (
+    <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+      <path strokeLinecap="round" strokeLinejoin="round" d="M12 5v.01M12 12v.01M12 19v.01" />
+    </svg>
+  );
+}

package/src/components/ui/EmptyState.tsx

@@ -0,0 +1,29 @@
+import { type ReactNode } from 'react';
+import { Button } from './Button.js';
+
+export interface EmptyStateProps {
+  icon?: ReactNode;
+  title: string;
+  description?: string;
+  actionLabel?: string;
+  onAction?: () => void;
+}
+
+export function EmptyState({ icon, title, description, actionLabel, onAction }: EmptyStateProps) {
+  return (
+    <div className="flex flex-col items-center justify-center py-16 text-center">
+      {icon && (
+        <div className="mb-4 text-[var(--muted-foreground)]">{icon}</div>
+      )}
+      <h3 className="text-lg font-semibold">{title}</h3>
+      {description && (
+        <p className="mt-1 max-w-sm text-sm text-[var(--muted-foreground)]">{description}</p>
+      )}
+      {actionLabel && onAction && (
+        <Button variant="primary" onClick={onAction} className="mt-4">
+          {actionLabel}
+        </Button>
+      )}
+    </div>
+  );
+}