@actuate-media/cms-admin 0.8.0 → 0.8.2

package/src/components/ui/DataTable.tsx

@@ -1,36 +1,36 @@
-'use client';
+'use client'
 
-import { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect } from 'react'
 
 interface Column {
-  key: string;
-  label: string;
-  sortable?: boolean;
+  key: string
+  label: string
+  sortable?: boolean
 }
 
 interface Row {
-  id: string;
-  [key: string]: any;
+  id: string
+  [key: string]: any
 }
 
 export interface RowAction {
-  key: string;
-  label: string;
-  icon?: React.ReactNode;
-  destructive?: boolean;
-  onClick: (row: Row) => void;
+  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;
+  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({
@@ -44,18 +44,16 @@ export function DataTable({
   rowActions,
   onRowClick,
 }: DataTableProps) {
-  const allSelected = rows.length > 0 && selectedIds.length === rows.length;
+  const allSelected = rows.length > 0 && selectedIds.length === rows.length
 
   function toggleAll() {
-    onSelectionChange(allSelected ? [] : rows.map((r) => r.id));
+    onSelectionChange(allSelected ? [] : rows.map((r) => r.id))
   }
 
   function toggleRow(id: string) {
     onSelectionChange(
-      selectedIds.includes(id)
-        ? selectedIds.filter((s) => s !== id)
-        : [...selectedIds, id],
-    );
+      selectedIds.includes(id) ? selectedIds.filter((s) => s !== id) : [...selectedIds, id],
+    )
   }
 
   return (
@@ -122,23 +120,23 @@ export function DataTable({
         </tbody>
       </table>
     </div>
-  );
+  )
 }
 
 function RowActionsMenu({ actions, row }: { actions: RowAction[]; row: Row }) {
-  const [open, setOpen] = useState(false);
-  const ref = useRef<HTMLDivElement>(null);
+  const [open, setOpen] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
-    if (!open) return;
+    if (!open) return
     function handleClickOutside(e: MouseEvent) {
       if (ref.current && !ref.current.contains(e.target as Node)) {
-        setOpen(false);
+        setOpen(false)
       }
     }
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, [open]);
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => document.removeEventListener('mousedown', handleClickOutside)
+  }, [open])
 
   return (
     <div className="relative flex items-center justify-end gap-1" ref={ref}>
@@ -171,8 +169,8 @@ function RowActionsMenu({ actions, row }: { actions: RowAction[]; row: Row }) {
                 action.destructive ? 'text-[var(--destructive)]' : ''
               }`}
               onClick={() => {
-                action.onClick(row);
-                setOpen(false);
+                action.onClick(row)
+                setOpen(false)
               }}
             >
               {action.icon && <span className="h-4 w-4">{action.icon}</span>}
@@ -182,7 +180,7 @@ function RowActionsMenu({ actions, row }: { actions: RowAction[]; row: Row }) {
         </div>
       )}
     </div>
-  );
+  )
 }
 
 function MoreVerticalIcon() {
@@ -190,5 +188,5 @@ function MoreVerticalIcon() {
     <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

@@ -1,20 +1,18 @@
-import { type ReactNode } from 'react';
-import { Button } from './Button.js';
+import { type ReactNode } from 'react'
+import { Button } from './Button.js'
 
 export interface EmptyStateProps {
-  icon?: ReactNode;
-  title: string;
-  description?: string;
-  actionLabel?: string;
-  onAction?: () => void;
+  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>
-      )}
+      {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>
@@ -25,5 +23,5 @@ export function EmptyState({ icon, title, description, actionLabel, onAction }:
         </Button>
       )}
     </div>
-  );
+  )
 }

package/src/components/ui/Modal.tsx

@@ -1,28 +1,28 @@
-'use client';
+'use client'
 
-import { useEffect, type ReactNode } from 'react';
+import { useEffect, type ReactNode } from 'react'
 
 export interface ModalProps {
-  open: boolean;
-  onClose: () => void;
-  title: string;
-  children: ReactNode;
-  actions?: ReactNode;
+  open: boolean
+  onClose: () => void
+  title: string
+  children: ReactNode
+  actions?: ReactNode
 }
 
 export function Modal({ open, onClose, title, children, actions }: ModalProps) {
   useEffect(() => {
-    if (!open) return;
+    if (!open) return
 
     function handleKey(e: KeyboardEvent) {
-      if (e.key === 'Escape') onClose();
+      if (e.key === 'Escape') onClose()
     }
 
-    document.addEventListener('keydown', handleKey);
-    return () => document.removeEventListener('keydown', handleKey);
-  }, [open, onClose]);
+    document.addEventListener('keydown', handleKey)
+    return () => document.removeEventListener('keydown', handleKey)
+  }, [open, onClose])
 
-  if (!open) return null;
+  if (!open) return null
 
   return (
     <div className="fixed inset-0 z-[60] flex items-center justify-center">
@@ -31,7 +31,13 @@ export function Modal({ open, onClose, title, children, actions }: ModalProps) {
         <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}>
+            <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>
@@ -44,5 +50,5 @@ export function Modal({ open, onClose, title, children, actions }: ModalProps) {
         )}
       </div>
     </div>
-  );
+  )
 }

package/src/components/ui/Pagination.tsx

@@ -1,28 +1,34 @@
-'use client';
+'use client'
 
 export interface PaginationProps {
-  page: number;
-  perPage: number;
-  total: number;
-  onPageChange: (page: number) => void;
-  onPerPageChange: (perPage: number) => void;
+  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);
+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')[] = [];
+    const pages: (number | 'ellipsis')[] = []
     for (let i = 1; i <= totalPages; i++) {
       if (i === 1 || i === totalPages || Math.abs(i - page) <= 1) {
-        pages.push(i);
+        pages.push(i)
       } else if (pages[pages.length - 1] !== 'ellipsis') {
-        pages.push('ellipsis');
+        pages.push('ellipsis')
       }
     }
-    return pages;
+    return pages
   }
 
   return (
@@ -34,11 +40,16 @@ export function Pagination({ page, perPage, total, onPageChange, onPerPageChange
       <div className="flex items-center gap-2">
         <select
           value={perPage}
-          onChange={(e) => { onPerPageChange(Number(e.target.value)); onPageChange(1); }}
+          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>
+            <option key={n} value={n}>
+              {n} / page
+            </option>
           ))}
         </select>
 
@@ -52,13 +63,17 @@ export function Pagination({ page, perPage, total, onPageChange, onPerPageChange
           </button>
           {pageNumbers().map((p, i) =>
             p === 'ellipsis' ? (
-              <span key={`e${i}`} className="px-1 text-[var(--muted-foreground)]">…</span>
+              <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 === page
+                    ? 'bg-[var(--primary)] text-[var(--primary-foreground)]'
+                    : 'hover:bg-[var(--accent)]'
                 }`}
               >
                 {p}
@@ -75,5 +90,5 @@ export function Pagination({ page, perPage, total, onPageChange, onPerPageChange
         </nav>
       </div>
     </div>
-  );
+  )
 }

package/src/components/ui/SearchInput.tsx

@@ -1,9 +1,9 @@
-'use client';
+'use client'
 
 export interface SearchInputProps {
-  value: string;
-  onChange: (value: string) => void;
-  placeholder?: string;
+  value: string
+  onChange: (value: string) => void
+  placeholder?: string
 }
 
 export function SearchInput({ value, onChange, placeholder = 'Search...' }: SearchInputProps) {
@@ -16,7 +16,11 @@ export function SearchInput({ value, onChange, placeholder = 'Search...' }: Sear
         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" />
+        <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"
@@ -31,7 +35,13 @@ export function SearchInput({ value, onChange, placeholder = 'Search...' }: Sear
           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}>
+          <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>
@@ -40,5 +50,5 @@ export function SearchInput({ value, onChange, placeholder = 'Search...' }: Sear
         ⌘K
       </kbd>
     </div>
-  );
+  )
 }

package/src/components/ui/Skeleton.tsx

@@ -1,9 +1,9 @@
-type SkeletonVariant = 'text' | 'card' | 'table-row';
+type SkeletonVariant = 'text' | 'card' | 'table-row'
 
 export interface SkeletonProps {
-  variant?: SkeletonVariant;
-  lines?: number;
-  className?: string;
+  variant?: SkeletonVariant
+  lines?: number
+  className?: string
 }
 
 export function Skeleton({ variant = 'text', lines = 3, className = '' }: SkeletonProps) {
@@ -16,7 +16,7 @@ export function Skeleton({ variant = 'text', lines = 3, className = '' }: Skelet
           <div className="h-3 w-2/3 rounded bg-[var(--muted)]" />
         </div>
       </div>
-    );
+    )
   }
 
   if (variant === 'table-row') {
@@ -31,7 +31,7 @@ export function Skeleton({ variant = 'text', lines = 3, className = '' }: Skelet
           </div>
         ))}
       </div>
-    );
+    )
   }
 
   return (
@@ -44,5 +44,5 @@ export function Skeleton({ variant = 'text', lines = 3, className = '' }: Skelet
         />
       ))}
     </div>
-  );
+  )
 }

package/src/components/ui/Toast.tsx

@@ -1,47 +1,48 @@
-'use client';
+'use client'
 
-import { useState, useCallback } from 'react';
+import { useState, useCallback } from 'react'
 
-type ToastType = 'success' | 'error' | 'warning' | 'info';
+type ToastType = 'success' | 'error' | 'warning' | 'info'
 
 interface Toast {
-  id: string;
-  type: ToastType;
-  message: string;
+  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',
+  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 [toasts, setToasts] = useState<Toast[]>([])
 
   const addToast = useCallback((type: ToastType, message: string) => {
-    const id = crypto.randomUUID();
-    setToasts((prev) => [...prev, { id, type, message }]);
+    const id = crypto.randomUUID()
+    setToasts((prev) => [...prev, { id, type, message }])
     setTimeout(() => {
-      setToasts((prev) => prev.filter((t) => t.id !== id));
-    }, 5000);
-  }, []);
+      setToasts((prev) => prev.filter((t) => t.id !== id))
+    }, 5000)
+  }, [])
 
   const dismissToast = useCallback((id: string) => {
-    setToasts((prev) => prev.filter((t) => t.id !== id));
-  }, []);
+    setToasts((prev) => prev.filter((t) => t.id !== id))
+  }, [])
 
-  return { toasts, addToast, dismissToast };
+  return { toasts, addToast, dismissToast }
 }
 
 export interface ToastContainerProps {
-  toasts: Toast[];
-  onDismiss: (id: string) => void;
+  toasts: Toast[]
+  onDismiss: (id: string) => void
 }
 
 export function ToastContainer({ toasts, onDismiss }: ToastContainerProps) {
-  if (toasts.length === 0) return null;
+  if (toasts.length === 0) return null
 
   return (
     <div className="fixed bottom-4 right-4 z-[100] flex flex-col gap-2">
@@ -55,12 +56,18 @@ export function ToastContainer({ toasts, onDismiss }: ToastContainerProps) {
             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}>
+            <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

@@ -1,24 +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';
+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'