@actuate-media/cms-admin 0.1.4 → 0.2.0

package/src/components/ui/Modal.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import { useEffect, type ReactNode } from 'react';
+
+export interface ModalProps {
+  open: boolean;
+  onClose: () => void;
+  title: string;
+  children: ReactNode;
+  actions?: ReactNode;
+}
+
+export function Modal({ open, onClose, title, children, actions }: ModalProps) {
+  useEffect(() => {
+    if (!open) return;
+
+    function handleKey(e: KeyboardEvent) {
+      if (e.key === 'Escape') onClose();
+    }
+
+    document.addEventListener('keydown', handleKey);
+    return () => document.removeEventListener('keydown', handleKey);
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-[60] flex items-center justify-center">
+      <div className="fixed inset-0 bg-black/50" onClick={onClose} role="presentation" />
+      <div className="relative z-10 w-full max-w-lg rounded-lg border border-[var(--border)] bg-[var(--card)] shadow-xl">
+        <div className="flex items-center justify-between border-b border-[var(--border)] px-6 py-4">
+          <h2 className="text-lg font-semibold">{title}</h2>
+          <button onClick={onClose} className="rounded-md p-1 hover:bg-[var(--accent)]">
+            <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+        <div className="px-6 py-4">{children}</div>
+        {actions && (
+          <div className="flex justify-end gap-2 border-t border-[var(--border)] px-6 py-4">
+            {actions}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/ui/Pagination.tsx

@@ -0,0 +1,79 @@
+'use client';
+
+export interface PaginationProps {
+  page: number;
+  perPage: number;
+  total: number;
+  onPageChange: (page: number) => void;
+  onPerPageChange: (perPage: number) => void;
+}
+
+export function Pagination({ page, perPage, total, onPageChange, onPerPageChange }: PaginationProps) {
+  const totalPages = Math.max(1, Math.ceil(total / perPage));
+  const start = (page - 1) * perPage + 1;
+  const end = Math.min(page * perPage, total);
+
+  function pageNumbers(): (number | 'ellipsis')[] {
+    const pages: (number | 'ellipsis')[] = [];
+    for (let i = 1; i <= totalPages; i++) {
+      if (i === 1 || i === totalPages || Math.abs(i - page) <= 1) {
+        pages.push(i);
+      } else if (pages[pages.length - 1] !== 'ellipsis') {
+        pages.push('ellipsis');
+      }
+    }
+    return pages;
+  }
+
+  return (
+    <div className="flex items-center justify-between text-sm">
+      <span className="text-[var(--muted-foreground)]">
+        {start}–{end} of {total} results
+      </span>
+
+      <div className="flex items-center gap-2">
+        <select
+          value={perPage}
+          onChange={(e) => { onPerPageChange(Number(e.target.value)); onPageChange(1); }}
+          className="rounded-md border border-[var(--border)] bg-[var(--input-background)] px-2 py-1 text-sm"
+        >
+          {[10, 25, 50, 100].map((n) => (
+            <option key={n} value={n}>{n} / page</option>
+          ))}
+        </select>
+
+        <nav className="flex items-center gap-1">
+          <button
+            onClick={() => onPageChange(page - 1)}
+            disabled={page <= 1}
+            className="rounded-md px-2 py-1 hover:bg-[var(--accent)] disabled:opacity-50"
+          >
+            Prev
+          </button>
+          {pageNumbers().map((p, i) =>
+            p === 'ellipsis' ? (
+              <span key={`e${i}`} className="px-1 text-[var(--muted-foreground)]">…</span>
+            ) : (
+              <button
+                key={p}
+                onClick={() => onPageChange(p)}
+                className={`min-w-[2rem] rounded-md px-2 py-1 ${
+                  p === page ? 'bg-[var(--primary)] text-[var(--primary-foreground)]' : 'hover:bg-[var(--accent)]'
+                }`}
+              >
+                {p}
+              </button>
+            ),
+          )}
+          <button
+            onClick={() => onPageChange(page + 1)}
+            disabled={page >= totalPages}
+            className="rounded-md px-2 py-1 hover:bg-[var(--accent)] disabled:opacity-50"
+          >
+            Next
+          </button>
+        </nav>
+      </div>
+    </div>
+  );
+}

package/src/components/ui/SearchInput.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+export interface SearchInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+}
+
+export function SearchInput({ value, onChange, placeholder = 'Search...' }: SearchInputProps) {
+  return (
+    <div className="relative flex-1">
+      <svg
+        className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 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
+        type="text"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={placeholder}
+        className="w-full rounded-md border border-[var(--border)] bg-[var(--input-background)] py-2 pl-9 pr-8 text-sm outline-none focus:ring-2 focus:ring-[var(--ring)]"
+      />
+      {value && (
+        <button
+          onClick={() => onChange('')}
+          className="absolute right-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-[var(--muted-foreground)] hover:text-[var(--foreground)]"
+          aria-label="Clear search"
+        >
+          <svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      )}
+      <kbd className="pointer-events-none absolute right-8 top-1/2 hidden -translate-y-1/2 rounded border border-[var(--border)] px-1.5 py-0.5 text-[10px] text-[var(--muted-foreground)] sm:inline-block">
+        ⌘K
+      </kbd>
+    </div>
+  );
+}

package/src/components/ui/Skeleton.tsx

@@ -0,0 +1,48 @@
+type SkeletonVariant = 'text' | 'card' | 'table-row';
+
+export interface SkeletonProps {
+  variant?: SkeletonVariant;
+  lines?: number;
+  className?: string;
+}
+
+export function Skeleton({ variant = 'text', lines = 3, className = '' }: SkeletonProps) {
+  if (variant === 'card') {
+    return (
+      <div className={`animate-pulse rounded-lg border border-[var(--border)] p-5 ${className}`}>
+        <div className="mb-3 h-4 w-1/3 rounded bg-[var(--muted)]" />
+        <div className="space-y-2">
+          <div className="h-3 w-full rounded bg-[var(--muted)]" />
+          <div className="h-3 w-2/3 rounded bg-[var(--muted)]" />
+        </div>
+      </div>
+    );
+  }
+
+  if (variant === 'table-row') {
+    return (
+      <div className={`animate-pulse ${className}`}>
+        {Array.from({ length: lines }, (_, i) => (
+          <div key={i} className="flex gap-4 border-b border-[var(--border)] px-4 py-3">
+            <div className="h-4 w-8 rounded bg-[var(--muted)]" />
+            <div className="h-4 flex-1 rounded bg-[var(--muted)]" />
+            <div className="h-4 w-20 rounded bg-[var(--muted)]" />
+            <div className="h-4 w-24 rounded bg-[var(--muted)]" />
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div className={`animate-pulse space-y-2 ${className}`}>
+      {Array.from({ length: lines }, (_, i) => (
+        <div
+          key={i}
+          className="h-3 rounded bg-[var(--muted)]"
+          style={{ width: `${Math.max(40, 100 - i * 15)}%` }}
+        />
+      ))}
+    </div>
+  );
+}

package/src/components/ui/Toast.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import { useState, useCallback } from 'react';
+
+type ToastType = 'success' | 'error' | 'warning' | 'info';
+
+interface Toast {
+  id: string;
+  type: ToastType;
+  message: string;
+}
+
+const typeClasses: Record<ToastType, string> = {
+  success: 'border-emerald-500 bg-emerald-50 text-emerald-900 dark:bg-emerald-900/20 dark:text-emerald-300',
+  error: 'border-red-500 bg-red-50 text-red-900 dark:bg-red-900/20 dark:text-red-300',
+  warning: 'border-amber-500 bg-amber-50 text-amber-900 dark:bg-amber-900/20 dark:text-amber-300',
+  info: 'border-blue-500 bg-blue-50 text-blue-900 dark:bg-blue-900/20 dark:text-blue-300',
+};
+
+export function useToast() {
+  const [toasts, setToasts] = useState<Toast[]>([]);
+
+  const addToast = useCallback((type: ToastType, message: string) => {
+    const id = crypto.randomUUID();
+    setToasts((prev) => [...prev, { id, type, message }]);
+    setTimeout(() => {
+      setToasts((prev) => prev.filter((t) => t.id !== id));
+    }, 5000);
+  }, []);
+
+  const dismissToast = useCallback((id: string) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+
+  return { toasts, addToast, dismissToast };
+}
+
+export interface ToastContainerProps {
+  toasts: Toast[];
+  onDismiss: (id: string) => void;
+}
+
+export function ToastContainer({ toasts, onDismiss }: ToastContainerProps) {
+  if (toasts.length === 0) return null;
+
+  return (
+    <div className="fixed bottom-4 right-4 z-[100] flex flex-col gap-2">
+      {toasts.map((toast) => (
+        <div
+          key={toast.id}
+          className={`flex items-center gap-3 rounded-md border-l-4 px-4 py-3 shadow-lg ${typeClasses[toast.type]}`}
+        >
+          <p className="flex-1 text-sm">{toast.message}</p>
+          <button
+            onClick={() => onDismiss(toast.id)}
+            className="shrink-0 opacity-60 hover:opacity-100"
+          >
+            <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/components/ui/index.ts

@@ -0,0 +1,24 @@
+export { Button } from './Button.js';
+export type { ButtonProps } from './Button.js';
+export { Badge } from './Badge.js';
+export type { BadgeProps } from './Badge.js';
+export { Avatar } from './Avatar.js';
+export type { AvatarProps } from './Avatar.js';
+export { EmptyState } from './EmptyState.js';
+export type { EmptyStateProps } from './EmptyState.js';
+export { Skeleton } from './Skeleton.js';
+export type { SkeletonProps } from './Skeleton.js';
+export { useToast, ToastContainer } from './Toast.js';
+export type { ToastContainerProps } from './Toast.js';
+export { Modal } from './Modal.js';
+export type { ModalProps } from './Modal.js';
+export { ConfirmDialog } from './ConfirmDialog.js';
+export type { ConfirmDialogProps } from './ConfirmDialog.js';
+export { DataTable } from './DataTable.js';
+export type { DataTableProps } from './DataTable.js';
+export { Pagination } from './Pagination.js';
+export type { PaginationProps } from './Pagination.js';
+export { SearchInput } from './SearchInput.js';
+export type { SearchInputProps } from './SearchInput.js';
+export { CommandPalette } from './CommandPalette.js';
+export type { CommandPaletteProps } from './CommandPalette.js';

package/src/fields/ArrayField.tsx

@@ -0,0 +1,92 @@
+'use client';
+
+import { Button } from '../components/ui/Button.js';
+
+export interface ArrayFieldProps {
+  label: string;
+  value?: any[];
+  onChange: (value: any[]) => void;
+  fields?: any[];
+  helpText?: string;
+}
+
+export function ArrayField({ label, value = [], onChange, helpText }: ArrayFieldProps) {
+  function addItem() {
+    onChange([...value, { id: crypto.randomUUID(), data: {} }]);
+  }
+
+  function removeItem(index: number) {
+    onChange(value.filter((_, i) => i !== index));
+  }
+
+  function moveItem(from: number, to: number) {
+    if (to < 0 || to >= value.length) return;
+    const next = [...value];
+    const [moved] = next.splice(from, 1);
+    next.splice(to, 0, moved);
+    onChange(next);
+  }
+
+  return (
+    <div>
+      <label className="mb-2 block text-sm font-medium">{label}</label>
+
+      <div className="space-y-2">
+        {value.map((item, index) => (
+          <div
+            key={item.id ?? index}
+            className="flex items-center gap-2 rounded-md border border-[var(--border)] bg-[var(--card)] p-3"
+          >
+            <div className="flex flex-col gap-0.5">
+              <button
+                type="button"
+                onClick={() => moveItem(index, index - 1)}
+                disabled={index === 0}
+                className="text-[var(--muted-foreground)] hover:text-[var(--foreground)] disabled:opacity-30"
+                aria-label="Move up"
+              >
+                <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M5 15l7-7 7 7" />
+                </svg>
+              </button>
+              <button
+                type="button"
+                onClick={() => moveItem(index, index + 1)}
+                disabled={index === value.length - 1}
+                className="text-[var(--muted-foreground)] hover:text-[var(--foreground)] disabled:opacity-30"
+                aria-label="Move down"
+              >
+                <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
+                </svg>
+              </button>
+            </div>
+
+            <div className="flex-1 text-sm text-[var(--muted-foreground)]">
+              Item {index + 1}
+            </div>
+
+            <button
+              type="button"
+              onClick={() => removeItem(index)}
+              className="rounded p-1 text-[var(--muted-foreground)] hover:bg-[var(--accent)] hover:text-[var(--destructive)]"
+              aria-label="Remove item"
+            >
+              <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+              </svg>
+            </button>
+          </div>
+        ))}
+      </div>
+
+      <Button variant="secondary" size="sm" onClick={addItem} className="mt-2">
+        Add Item
+      </Button>
+
+      {helpText && (
+        <p className="mt-1 text-xs text-[var(--muted-foreground)]">{helpText}</p>
+      )}
+    </div>
+  );
+}