@actuate-media/cms-admin 0.1.4 → 0.2.1

package/src/fields/NavBuilderField.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import { useState } from 'react';
+import { Button } from '../components/ui/Button.js';
+
+interface NavNode {
+  id: string;
+  label: string;
+  url: string;
+  children: NavNode[];
+}
+
+export interface NavBuilderFieldProps {
+  label: string;
+  value?: NavNode[];
+  onChange: (value: NavNode[]) => void;
+  helpText?: string;
+}
+
+export function NavBuilderField({ label, value = [], onChange, helpText }: NavBuilderFieldProps) {
+  function addItem() {
+    onChange([
+      ...value,
+      { id: crypto.randomUUID(), label: 'New Item', url: '/', children: [] },
+    ]);
+  }
+
+  function removeItem(id: string) {
+    onChange(value.filter((n) => n.id !== id));
+  }
+
+  function renderNode(node: NavNode, depth: number) {
+    return (
+      <div
+        key={node.id}
+        className="rounded-md border border-[var(--border)] bg-[var(--card)] p-3"
+        style={{ marginLeft: depth * 24 }}
+      >
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2 text-sm">
+            <svg className="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="M4 6h16M4 12h16M4 18h16" />
+            </svg>
+            <span className="font-medium">{node.label}</span>
+            <span className="text-xs text-[var(--muted-foreground)]">{node.url}</span>
+          </div>
+          <button
+            type="button"
+            onClick={() => removeItem(node.id)}
+            className="text-xs text-[var(--muted-foreground)] hover:text-[var(--destructive)]"
+          >
+            Remove
+          </button>
+        </div>
+        {node.children.length > 0 && (
+          <div className="mt-2 space-y-2">
+            {node.children.map((child) => renderNode(child, depth + 1))}
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <label className="mb-2 block text-sm font-medium">{label}</label>
+      <div className="space-y-2">
+        {value.map((node) => renderNode(node, 0))}
+      </div>
+      <Button variant="secondary" size="sm" onClick={addItem} className="mt-2">
+        Add Nav Item
+      </Button>
+      {helpText && (
+        <p className="mt-1 text-xs text-[var(--muted-foreground)]">{helpText}</p>
+      )}
+    </div>
+  );
+}

package/src/fields/NumberField.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+export interface NumberFieldProps {
+  label: string;
+  value?: number;
+  onChange: (value: number) => void;
+  min?: number;
+  max?: number;
+  required?: boolean;
+  helpText?: string;
+  error?: string;
+}
+
+export function NumberField({ label, value, onChange, min, max, required, helpText, error }: NumberFieldProps) {
+  return (
+    <div>
+      <label className="mb-1 block text-sm font-medium">
+        {label}
+        {required && <span className="ml-0.5 text-[var(--destructive)]">*</span>}
+      </label>
+      <input
+        type="number"
+        value={value ?? ''}
+        onChange={(e) => onChange(Number(e.target.value))}
+        min={min}
+        max={max}
+        required={required}
+        className={`w-full rounded-md border bg-[var(--input-background)] px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-[var(--ring)] ${
+          error ? 'border-[var(--destructive)]' : 'border-[var(--border)]'
+        }`}
+      />
+      {min !== undefined && max !== undefined && (
+        <p className="mt-1 text-xs text-[var(--muted-foreground)]">
+          Range: {min} – {max}
+        </p>
+      )}
+      {helpText && !error && (
+        <p className="mt-1 text-xs text-[var(--muted-foreground)]">{helpText}</p>
+      )}
+      {error && (
+        <p className="mt-1 text-xs text-[var(--destructive)]">{error}</p>
+      )}
+    </div>
+  );
+}

package/src/fields/RelationshipField.tsx

@@ -0,0 +1,245 @@
+'use client';
+
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { Search, X, Loader2, Plus } from 'lucide-react';
+import { cmsApi } from '../lib/api.js';
+
+export interface RelationshipFieldProps {
+  label: string;
+  value?: string | string[];
+  onChange: (value: string | string[]) => void;
+  multi?: boolean;
+  required?: boolean;
+  helpText?: string;
+  relationTo?: string;
+  useAsTitle?: string;
+  onNavigate?: (path: string) => void;
+}
+
+interface RelatedDoc {
+  id: string;
+  title?: string;
+  status?: string;
+  collection?: string;
+  updatedAt?: string;
+  data?: Record<string, any>;
+}
+
+const STATUS_STYLES: Record<string, string> = {
+  PUBLISHED: 'bg-green-100 text-green-800',
+  DRAFT: 'bg-yellow-100 text-yellow-800',
+  ARCHIVED: 'bg-gray-100 text-gray-600',
+  SCHEDULED: 'bg-blue-100 text-blue-800',
+};
+
+function relativeTime(dateStr: string | undefined): string {
+  if (!dateStr) return '';
+  const diff = Date.now() - new Date(dateStr).getTime();
+  const seconds = Math.floor(diff / 1000);
+  if (seconds < 60) return 'just now';
+  const minutes = Math.floor(seconds / 60);
+  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`;
+  const months = Math.floor(days / 30);
+  if (months < 12) return `${months}mo ago`;
+  return `${Math.floor(months / 12)}y ago`;
+}
+
+export function RelationshipField({
+  label,
+  value,
+  onChange,
+  multi = false,
+  required,
+  helpText,
+  relationTo = 'pages',
+  useAsTitle = 'title',
+  onNavigate,
+}: RelationshipFieldProps) {
+  const [searchTerm, setSearchTerm] = useState('');
+  const [open, setOpen] = useState(false);
+  const [options, setOptions] = useState<RelatedDoc[]>([]);
+  const [loading, setLoading] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const selectedIds = multi
+    ? (Array.isArray(value) ? value : [])
+    : (typeof value === 'string' && value ? [value] : []);
+
+  const fetchOptions = useCallback(async (query: string) => {
+    setLoading(true);
+    const searchParam = query ? `&search=${encodeURIComponent(query)}` : '';
+    const res = await cmsApi<{ docs: RelatedDoc[] }>(
+      `/collections/${relationTo}?pageSize=50${searchParam}`,
+    );
+    if (res.data) {
+      const docs: RelatedDoc[] = (res.data as any).docs ?? [];
+      setOptions(docs);
+    }
+    setLoading(false);
+  }, [relationTo]);
+
+  useEffect(() => {
+    if (open) fetchOptions(searchTerm);
+  }, [open]);
+
+  const handleSearch = useCallback((query: string) => {
+    setSearchTerm(query);
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => fetchOptions(query), 300);
+  }, [fetchOptions]);
+
+  useEffect(() => {
+    function handleClickOutside(e: MouseEvent) {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  function getDocTitle(doc: RelatedDoc): string {
+    if (doc.title) return doc.title;
+    const d = doc.data;
+    if (d && typeof d === 'object') {
+      if (typeof d[useAsTitle] === 'string') return d[useAsTitle];
+      if (typeof d.title === 'string') return d.title;
+      if (typeof d.name === 'string') return d.name;
+    }
+    return doc.id;
+  }
+
+  function handleToggle(id: string) {
+    if (multi) {
+      const next = selectedIds.includes(id)
+        ? selectedIds.filter((v) => v !== id)
+        : [...selectedIds, id];
+      onChange(next);
+    } else {
+      onChange(id);
+      setOpen(false);
+    }
+  }
+
+  function handleRemove(id: string) {
+    if (multi) {
+      onChange(selectedIds.filter((v) => v !== id));
+    } else {
+      onChange('');
+    }
+  }
+
+  const selectedItems = options.filter((opt) => selectedIds.includes(opt.id));
+  const unselectedItems = options.filter((opt) => !selectedIds.includes(opt.id));
+
+  function renderOption(opt: RelatedDoc, isSelected: boolean) {
+    const status = opt.status ?? (opt.data as any)?.status;
+    const collection = opt.collection ?? relationTo;
+    const statusClass = STATUS_STYLES[status] ?? 'bg-gray-100 text-gray-600';
+
+    return (
+      <button
+        type="button"
+        onClick={() => handleToggle(opt.id)}
+        className={`flex w-full items-center gap-2 px-3 py-2 text-sm hover:bg-[var(--accent)] ${isSelected ? 'font-medium' : ''}`}
+      >
+        <div className="flex-1 min-w-0 text-left">
+          <div className="flex items-center gap-2">
+            <span className="truncate">{getDocTitle(opt)}</span>
+            {isSelected && <span className="shrink-0 text-[var(--primary)]">&#10003;</span>}
+          </div>
+          <div className="flex items-center gap-2 mt-0.5">
+            <span className="text-[10px] text-[var(--muted-foreground)]">{collection}</span>
+            {opt.updatedAt && (
+              <span className="text-[10px] text-[var(--muted-foreground)]">{relativeTime(opt.updatedAt)}</span>
+            )}
+          </div>
+        </div>
+        {status && (
+          <span className={`shrink-0 rounded px-1.5 py-0.5 text-[10px] font-medium ${statusClass}`}>
+            {status}
+          </span>
+        )}
+      </button>
+    );
+  }
+
+  return (
+    <div className="relative" ref={dropdownRef}>
+      <label className="mb-1 block text-sm font-medium">
+        {label}
+        {required && <span className="ml-0.5 text-[var(--destructive)]">*</span>}
+      </label>
+
+      {selectedItems.length > 0 && (
+        <div className="mb-2 flex flex-wrap gap-1">
+          {selectedItems.map((item) => (
+            <span
+              key={item.id}
+              className="inline-flex items-center gap-1 rounded-md bg-[var(--accent)] px-2 py-1 text-xs"
+            >
+              {getDocTitle(item)}
+              <button type="button" onClick={() => handleRemove(item.id)} className="hover:text-[var(--destructive)]">
+                <X className="w-3 h-3" />
+              </button>
+            </span>
+          ))}
+        </div>
+      )}
+
+      <div className="relative">
+        <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--muted-foreground)] pointer-events-none" />
+        <input
+          type="text"
+          value={searchTerm}
+          onChange={(e) => handleSearch(e.target.value)}
+          onFocus={() => setOpen(true)}
+          placeholder={`Search ${relationTo}...`}
+          className="w-full rounded-md border border-[var(--border)] bg-[var(--input-background)] pl-8 pr-3 py-2 text-sm outline-none focus:ring-2 focus:ring-[var(--ring)]"
+        />
+        {loading && (
+          <Loader2 className="absolute right-2.5 top-1/2 -translate-y-1/2 w-4 h-4 animate-spin text-[var(--muted-foreground)]" />
+        )}
+
+        {open && (
+          <ul className="absolute z-50 mt-1 w-full max-h-60 overflow-y-auto rounded-md border border-[var(--border)] bg-[var(--popover)] py-1 shadow-lg">
+            {unselectedItems.map((opt) => (
+              <li key={opt.id}>{renderOption(opt, false)}</li>
+            ))}
+            {selectedItems.length > 0 && unselectedItems.length > 0 && (
+              <li className="border-t border-[var(--border)] my-1" />
+            )}
+            {selectedItems.map((opt) => (
+              <li key={opt.id}>{renderOption(opt, true)}</li>
+            ))}
+            {options.length === 0 && !loading && (
+              <li className="px-3 py-2 text-sm text-[var(--muted-foreground)]">No results</li>
+            )}
+            <li className="border-t border-[var(--border)] mt-1">
+              <button
+                type="button"
+                onClick={() => {
+                  setOpen(false);
+                  onNavigate?.(`/${relationTo}/new`);
+                }}
+                className="flex w-full items-center gap-2 px-3 py-2 text-sm text-[var(--primary)] hover:bg-[var(--accent)]"
+              >
+                <Plus className="w-3.5 h-3.5" />
+                Create New
+              </button>
+            </li>
+          </ul>
+        )}
+      </div>
+
+      {helpText && (
+        <p className="mt-1 text-xs text-[var(--muted-foreground)]">{helpText}</p>
+      )}
+    </div>
+  );
+}

package/src/fields/RichTextField.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import { TipTapEditor } from '../components/TipTapEditor.js';
+
+export interface RichTextFieldProps {
+  label: string;
+  value?: string;
+  onChange: (value: string) => void;
+  required?: boolean;
+  helpText?: string;
+}
+
+export function RichTextField({ label, value = '', onChange, required, helpText }: RichTextFieldProps) {
+  return (
+    <div>
+      <label className="mb-1 block text-sm font-medium">
+        {label}
+        {required && <span className="ml-0.5 text-[var(--destructive)]">*</span>}
+      </label>
+      <TipTapEditor content={value} onChange={onChange} />
+      {helpText && (
+        <p className="mt-1 text-xs text-[var(--muted-foreground)]">{helpText}</p>
+      )}
+    </div>
+  );
+}

package/src/fields/SelectField.tsx

@@ -0,0 +1,117 @@
+'use client';
+
+import { useState } from 'react';
+
+export interface SelectFieldProps {
+  label: string;
+  value?: string | string[];
+  onChange: (value: string | string[]) => void;
+  options?: string[];
+  multi?: boolean;
+  required?: boolean;
+  helpText?: string;
+}
+
+export function SelectField({
+  label,
+  value,
+  onChange,
+  options = [],
+  multi = false,
+  required,
+  helpText,
+}: SelectFieldProps) {
+  const [searchTerm, setSearchTerm] = useState('');
+  const [open, setOpen] = useState(false);
+
+  const selectedValues = multi
+    ? (Array.isArray(value) ? value : [])
+    : [];
+  const singleValue = multi ? '' : (typeof value === 'string' ? value : '');
+
+  const filtered = options.filter((opt) =>
+    opt.toLowerCase().includes(searchTerm.toLowerCase()),
+  );
+
+  function handleSelect(opt: string) {
+    if (multi) {
+      const next = selectedValues.includes(opt)
+        ? selectedValues.filter((v) => v !== opt)
+        : [...selectedValues, opt];
+      onChange(next);
+    } else {
+      onChange(opt);
+      setOpen(false);
+    }
+  }
+
+  return (
+    <div className="relative">
+      <label className="mb-1 block text-sm font-medium">
+        {label}
+        {required && <span className="ml-0.5 text-[var(--destructive)]">*</span>}
+      </label>
+
+      <button
+        type="button"
+        onClick={() => setOpen((o) => !o)}
+        className="flex w-full items-center justify-between rounded-md border border-[var(--border)] bg-[var(--input-background)] px-3 py-2 text-sm"
+      >
+        <span className={singleValue || selectedValues.length ? '' : 'text-[var(--muted-foreground)]'}>
+          {multi
+            ? selectedValues.length ? `${selectedValues.length} selected` : 'Select...'
+            : singleValue || 'Select...'}
+        </span>
+        <svg className="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="M19 9l-7 7-7-7" />
+        </svg>
+      </button>
+
+      {open && (
+        <div className="absolute z-50 mt-1 w-full rounded-md border border-[var(--border)] bg-[var(--popover)] shadow-lg">
+          <div className="border-b border-[var(--border)] p-2">
+            <input
+              type="text"
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              placeholder="Search..."
+              className="w-full rounded bg-[var(--input-background)] px-2 py-1 text-sm outline-none"
+            />
+          </div>
+          <ul className="max-h-48 overflow-y-auto py-1">
+            {filtered.map((opt) => {
+              const isSelected = multi ? selectedValues.includes(opt) : singleValue === opt;
+              return (
+                <li key={opt}>
+                  <button
+                    type="button"
+                    onClick={() => handleSelect(opt)}
+                    className={`flex w-full items-center gap-2 px-3 py-1.5 text-sm hover:bg-[var(--accent)] ${
+                      isSelected ? 'font-medium' : ''
+                    }`}
+                  >
+                    {multi && (
+                      <span className={`flex h-4 w-4 items-center justify-center rounded border ${
+                        isSelected ? 'border-[var(--primary)] bg-[var(--primary)] text-[var(--primary-foreground)]' : 'border-[var(--border)]'
+                      }`}>
+                        {isSelected && '✓'}
+                      </span>
+                    )}
+                    {opt}
+                  </button>
+                </li>
+              );
+            })}
+            {filtered.length === 0 && (
+              <li className="px-3 py-2 text-sm text-[var(--muted-foreground)]">No options found</li>
+            )}
+          </ul>
+        </div>
+      )}
+
+      {helpText && (
+        <p className="mt-1 text-xs text-[var(--muted-foreground)]">{helpText}</p>
+      )}
+    </div>
+  );
+}

package/src/fields/SlugField.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+
+export interface SlugFieldProps {
+  label: string;
+  value?: string;
+  onChange: (value: string) => void;
+  from?: string;
+  required?: boolean;
+  helpText?: string;
+}
+
+function toSlug(text: string): string {
+  return text
+    .toLowerCase()
+    .replace(/[^\w\s-]/g, '')
+    .replace(/[\s_]+/g, '-')
+    .replace(/^-+|-+$/g, '');
+}
+
+export function SlugField({ label, value = '', onChange, required, helpText }: SlugFieldProps) {
+  const [locked, setLocked] = useState(true);
+
+  return (
+    <div>
+      <label className="mb-1 block text-sm font-medium">
+        {label}
+        {required && <span className="ml-0.5 text-[var(--destructive)]">*</span>}
+      </label>
+      <div className="flex items-center gap-2">
+        <div className="flex flex-1 items-center rounded-md border border-[var(--border)] bg-[var(--input-background)]">
+          <span className="pl-3 text-sm text-[var(--muted-foreground)]">/</span>
+          <input
+            type="text"
+            value={value}
+            onChange={(e) => onChange(toSlug(e.target.value))}
+            readOnly={locked}
+            className="flex-1 bg-transparent px-1 py-2 text-sm outline-none"
+          />
+        </div>
+        <button
+          type="button"
+          onClick={() => setLocked((l) => !l)}
+          className="rounded-md border border-[var(--border)] p-2 text-sm hover:bg-[var(--accent)]"
+          aria-label={locked ? 'Unlock slug' : 'Lock slug'}
+        >
+          <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+            {locked ? (
+              <path strokeLinecap="round" strokeLinejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+            ) : (
+              <path strokeLinecap="round" strokeLinejoin="round" d="M8 11V7a4 4 0 118 0m-4 8v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2z" />
+            )}
+          </svg>
+        </button>
+      </div>
+      {value && (
+        <p className="mt-1 text-xs text-[var(--muted-foreground)]">URL preview: /{value}</p>
+      )}
+      {helpText && (
+        <p className="mt-1 text-xs text-[var(--muted-foreground)]">{helpText}</p>
+      )}
+    </div>
+  );
+}

package/src/fields/TextField.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+export interface TextFieldProps {
+  label: string;
+  value?: string;
+  onChange: (value: string) => void;
+  required?: boolean;
+  maxLength?: number;
+  helpText?: string;
+  error?: string;
+}
+
+export function TextField({ label, value = '', onChange, required, maxLength, helpText, error }: TextFieldProps) {
+  const charCount = value.length;
+  const hasError = !!error || (maxLength !== undefined && charCount > maxLength);
+
+  return (
+    <div>
+      <label className="mb-1 flex items-baseline justify-between text-sm font-medium">
+        <span>
+          {label}
+          {required && <span className="ml-0.5 text-[var(--destructive)]">*</span>}
+        </span>
+        {maxLength !== undefined && (
+          <span className={`text-xs ${hasError ? 'text-[var(--destructive)]' : 'text-[var(--muted-foreground)]'}`}>
+            {charCount}/{maxLength}
+          </span>
+        )}
+      </label>
+      <input
+        type="text"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        required={required}
+        maxLength={maxLength}
+        className={`w-full rounded-md border bg-[var(--input-background)] px-3 py-2 text-sm outline-none transition-colors focus:ring-2 focus:ring-[var(--ring)] ${
+          hasError ? 'border-[var(--destructive)]' : 'border-[var(--border)]'
+        }`}
+      />
+      {helpText && !error && (
+        <p className="mt-1 text-xs text-[var(--muted-foreground)]">{helpText}</p>
+      )}
+      {error && (
+        <p className="mt-1 text-xs text-[var(--destructive)]">{error}</p>
+      )}
+    </div>
+  );
+}

package/src/fields/ToggleField.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+export interface ToggleFieldProps {
+  label: string;
+  value?: boolean;
+  onChange: (value: boolean) => void;
+  helpText?: string;
+}
+
+export function ToggleField({ label, value = false, onChange, helpText }: ToggleFieldProps) {
+  return (
+    <div className="flex items-center justify-between">
+      <div>
+        <span className="text-sm font-medium">{label}</span>
+        {helpText && (
+          <p className="text-xs text-[var(--muted-foreground)]">{helpText}</p>
+        )}
+      </div>
+      <button
+        type="button"
+        role="switch"
+        aria-checked={value}
+        onClick={() => onChange(!value)}
+        className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors ${
+          value ? 'bg-[var(--primary)]' : 'bg-[var(--muted)]'
+        }`}
+      >
+        <span
+          className={`pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow-sm ring-0 transition-transform ${
+            value ? 'translate-x-5' : 'translate-x-0'
+          }`}
+        />
+      </button>
+    </div>
+  );
+}