@actuate-media/cms-admin 0.8.0 → 0.8.1

package/src/fields/NavBuilderField.tsx

@@ -1,32 +1,29 @@
-'use client';
+'use client'
 
-import { useState } from 'react';
-import { Button } from '../components/ui/Button.js';
+import { useState } from 'react'
+import { Button } from '../components/ui/Button.js'
 
 interface NavNode {
-  id: string;
-  label: string;
-  url: string;
-  children: NavNode[];
+  id: string
+  label: string
+  url: string
+  children: NavNode[]
 }
 
 export interface NavBuilderFieldProps {
-  label: string;
-  value?: NavNode[];
-  onChange: (value: NavNode[]) => void;
-  helpText?: string;
+  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: [] },
-    ]);
+    onChange([...value, { id: crypto.randomUUID(), label: 'New Item', url: '/', children: [] }])
   }
 
   function removeItem(id: string) {
-    onChange(value.filter((n) => n.id !== id));
+    onChange(value.filter((n) => n.id !== id))
   }
 
   function renderNode(node: NavNode, depth: number) {
@@ -38,7 +35,13 @@ export function NavBuilderField({ label, value = [], onChange, helpText }: NavBu
       >
         <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}>
+            <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>
@@ -58,21 +61,17 @@ export function NavBuilderField({ label, value = [], onChange, helpText }: NavBu
           </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>
+      <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>
-      )}
+      {helpText && <p className="mt-1 text-xs text-[var(--muted-foreground)]">{helpText}</p>}
     </div>
-  );
+  )
 }

package/src/fields/NumberField.tsx

@@ -1,17 +1,26 @@
-'use client';
+'use client'
 
 export interface NumberFieldProps {
-  label: string;
-  value?: number;
-  onChange: (value: number) => void;
-  min?: number;
-  max?: number;
-  required?: boolean;
-  helpText?: string;
-  error?: string;
+  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) {
+export function NumberField({
+  label,
+  value,
+  onChange,
+  min,
+  max,
+  required,
+  helpText,
+  error,
+}: NumberFieldProps) {
   return (
     <div>
       <label className="mb-1 block text-sm font-medium">
@@ -37,9 +46,7 @@ export function NumberField({ label, value, onChange, min, max, required, helpTe
       {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>
-      )}
+      {error && <p className="mt-1 text-xs text-[var(--destructive)]">{error}</p>}
     </div>
-  );
+  )
 }

package/src/fields/RelationshipField.tsx

@@ -1,28 +1,28 @@
-'use client';
+'use client'
 
-import { useState, useEffect, useRef, useCallback } from 'react';
-import { Search, X, Loader2, Plus } from 'lucide-react';
-import { cmsApi } from '../lib/api.js';
+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;
+  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>;
+  id: string
+  title?: string
+  status?: string
+  collection?: string
+  updatedAt?: string
+  data?: Record<string, any>
 }
 
 const STATUS_STYLES: Record<string, string> = {
@@ -30,22 +30,22 @@ const STATUS_STYLES: Record<string, string> = {
   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`;
+  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({
@@ -59,88 +59,98 @@ export function RelationshipField({
   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 [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]);
+    ? 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]);
+    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]);
+  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);
+        setOpen(false)
       }
     }
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, []);
+    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 (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;
+      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;
+    return doc.id
   }
 
   function handleToggle(id: string) {
     if (multi) {
       const next = selectedIds.includes(id)
         ? selectedIds.filter((v) => v !== id)
-        : [...selectedIds, id];
-      onChange(next);
+        : [...selectedIds, id]
+      onChange(next)
     } else {
-      onChange(id);
-      setOpen(false);
+      onChange(id)
+      setOpen(false)
     }
   }
 
   function handleRemove(id: string) {
     if (multi) {
-      onChange(selectedIds.filter((v) => v !== id));
+      onChange(selectedIds.filter((v) => v !== id))
     } else {
-      onChange('');
+      onChange('')
     }
   }
 
-  const selectedItems = options.filter((opt) => selectedIds.includes(opt.id));
-  const unselectedItems = options.filter((opt) => !selectedIds.includes(opt.id));
+  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';
+    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
@@ -156,7 +166,9 @@ export function RelationshipField({
           <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>
+              <span className="text-[10px] text-[var(--muted-foreground)]">
+                {relativeTime(opt.updatedAt)}
+              </span>
             )}
           </div>
         </div>
@@ -166,7 +178,7 @@ export function RelationshipField({
           </span>
         )}
       </button>
-    );
+    )
   }
 
   return (
@@ -184,7 +196,11 @@ export function RelationshipField({
               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)]">
+              <button
+                type="button"
+                onClick={() => handleRemove(item.id)}
+                className="hover:text-[var(--destructive)]"
+              >
                 <X className="w-3 h-3" />
               </button>
             </span>
@@ -224,8 +240,8 @@ export function RelationshipField({
               <button
                 type="button"
                 onClick={() => {
-                  setOpen(false);
-                  onNavigate?.(`/${relationTo}/new`);
+                  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)]"
               >
@@ -237,9 +253,7 @@ export function RelationshipField({
         )}
       </div>
 
-      {helpText && (
-        <p className="mt-1 text-xs text-[var(--muted-foreground)]">{helpText}</p>
-      )}
+      {helpText && <p className="mt-1 text-xs text-[var(--muted-foreground)]">{helpText}</p>}
     </div>
-  );
+  )
 }

package/src/fields/RichTextField.tsx

@@ -1,16 +1,22 @@
-'use client';
+'use client'
 
-import { TipTapEditor } from '../components/TipTapEditor.js';
+import { TipTapEditor } from '../components/TipTapEditor.js'
 
 export interface RichTextFieldProps {
-  label: string;
-  value?: string;
-  onChange: (value: string) => void;
-  required?: boolean;
-  helpText?: string;
+  label: string
+  value?: string
+  onChange: (value: string) => void
+  required?: boolean
+  helpText?: string
 }
 
-export function RichTextField({ label, value = '', onChange, required, helpText }: RichTextFieldProps) {
+export function RichTextField({
+  label,
+  value = '',
+  onChange,
+  required,
+  helpText,
+}: RichTextFieldProps) {
   return (
     <div>
       <label className="mb-1 block text-sm font-medium">
@@ -18,9 +24,7 @@ export function RichTextField({ label, value = '', onChange, required, helpText
         {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>
-      )}
+      {helpText && <p className="mt-1 text-xs text-[var(--muted-foreground)]">{helpText}</p>}
     </div>
-  );
+  )
 }

package/src/fields/SelectField.tsx

@@ -1,15 +1,15 @@
-'use client';
+'use client'
 
-import { useState } from 'react';
+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;
+  label: string
+  value?: string | string[]
+  onChange: (value: string | string[]) => void
+  options?: string[]
+  multi?: boolean
+  required?: boolean
+  helpText?: string
 }
 
 export function SelectField({
@@ -21,27 +21,23 @@ export function SelectField({
   required,
   helpText,
 }: SelectFieldProps) {
-  const [searchTerm, setSearchTerm] = useState('');
-  const [open, setOpen] = useState(false);
+  const [searchTerm, setSearchTerm] = useState('')
+  const [open, setOpen] = useState(false)
 
-  const selectedValues = multi
-    ? (Array.isArray(value) ? value : [])
-    : [];
-  const singleValue = multi ? '' : (typeof value === 'string' ? value : '');
+  const selectedValues = multi ? (Array.isArray(value) ? value : []) : []
+  const singleValue = multi ? '' : typeof value === 'string' ? value : ''
 
-  const filtered = options.filter((opt) =>
-    opt.toLowerCase().includes(searchTerm.toLowerCase()),
-  );
+  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);
+        : [...selectedValues, opt]
+      onChange(next)
     } else {
-      onChange(opt);
-      setOpen(false);
+      onChange(opt)
+      setOpen(false)
     }
   }
 
@@ -57,12 +53,22 @@ export function SelectField({
         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)]'}>
+        <span
+          className={singleValue || selectedValues.length ? '' : 'text-[var(--muted-foreground)]'}
+        >
           {multi
-            ? selectedValues.length ? `${selectedValues.length} selected` : 'Select...'
+            ? 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}>
+        <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>
@@ -80,7 +86,7 @@ export function SelectField({
           </div>
           <ul className="max-h-48 overflow-y-auto py-1">
             {filtered.map((opt) => {
-              const isSelected = multi ? selectedValues.includes(opt) : singleValue === opt;
+              const isSelected = multi ? selectedValues.includes(opt) : singleValue === opt
               return (
                 <li key={opt}>
                   <button
@@ -91,16 +97,20 @@ export function SelectField({
                     }`}
                   >
                     {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)]'
-                      }`}>
+                      <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>
@@ -109,9 +119,7 @@ export function SelectField({
         </div>
       )}
 
-      {helpText && (
-        <p className="mt-1 text-xs text-[var(--muted-foreground)]">{helpText}</p>
-      )}
+      {helpText && <p className="mt-1 text-xs text-[var(--muted-foreground)]">{helpText}</p>}
     </div>
-  );
+  )
 }

package/src/fields/SlugField.tsx

@@ -1,14 +1,14 @@
-'use client';
+'use client'
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react'
 
 export interface SlugFieldProps {
-  label: string;
-  value?: string;
-  onChange: (value: string) => void;
-  from?: string;
-  required?: boolean;
-  helpText?: string;
+  label: string
+  value?: string
+  onChange: (value: string) => void
+  from?: string
+  required?: boolean
+  helpText?: string
 }
 
 function toSlug(text: string): string {
@@ -16,11 +16,11 @@ function toSlug(text: string): string {
     .toLowerCase()
     .replace(/[^\w\s-]/g, '')
     .replace(/[\s_]+/g, '-')
-    .replace(/^-+|-+$/g, '');
+    .replace(/^-+|-+$/g, '')
 }
 
 export function SlugField({ label, value = '', onChange, required, helpText }: SlugFieldProps) {
-  const [locked, setLocked] = useState(true);
+  const [locked, setLocked] = useState(true)
 
   return (
     <div>
@@ -45,11 +45,25 @@ export function SlugField({ label, value = '', onChange, required, helpText }: S
           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}>
+          <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="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" />
+              <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>
@@ -57,9 +71,7 @@ export function SlugField({ label, value = '', onChange, required, helpText }: S
       {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>
-      )}
+      {helpText && <p className="mt-1 text-xs text-[var(--muted-foreground)]">{helpText}</p>}
     </div>
-  );
+  )
 }