@prenta/admin 1.17.0 → 1.17.2

package/src/components/ui/DataTable.tsx

@@ -1,204 +0,0 @@
-'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="bg-muted border-b border-[var(--border)]">
-          <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"
-                aria-sort={
-                  col.sortable && onSort
-                    ? sortField === col.key
-                      ? sortDir === 'asc'
-                        ? 'ascending'
-                        : 'descending'
-                      : 'none'
-                    : undefined
-                }
-              >
-                {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="hover:bg-muted rounded p-1 text-[var(--muted-foreground)] hover:text-[var(--foreground)]"
-            aria-label={action.label}
-            title={action.label}
-          >
-            {action.icon}
-          </button>
-        ))}
-      <button
-        onClick={() => setOpen((o) => !o)}
-        className="hover:bg-muted rounded p-1"
-        aria-label="More actions"
-      >
-        <MoreVerticalIcon />
-      </button>
-      {open && (
-        <div className="absolute top-full right-0 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/Pagination.tsx

@@ -1,94 +0,0 @@
-'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/Select.tsx

@@ -1,53 +0,0 @@
-import { forwardRef, type SelectHTMLAttributes, type ReactNode } from 'react'
-import { cv, type VariantProps } from '../../lib/cv.js'
-import { formControlBase, formControlState } from './form-control.js'
-
-const select = cv(`${formControlBase} appearance-none pr-8`, {
-  variants: {
-    size: {
-      sm: 'py-1.5 pr-7 pl-3 text-[length:var(--fs-sub)]',
-      md: '',
-      lg: 'py-2.5 pr-9 pl-3',
-    },
-    state: {
-      default: formControlState.default,
-      invalid: formControlState.invalid,
-      valid: formControlState.valid,
-    },
-  },
-  defaultVariants: { size: 'md', state: 'default' },
-})
-
-export type SelectVariants = VariantProps<typeof select>
-
-export interface SelectProps
-  extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'>, SelectVariants {
-  children?: ReactNode
-}
-
-export const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select(
-  { size, state, className, children, ...rest },
-  ref,
-) {
-  return (
-    <div className="relative">
-      <select ref={ref} className={select({ size, state, class: className })} {...rest}>
-        {children}
-      </select>
-      <svg
-        aria-hidden
-        className="pointer-events-none absolute top-1/2 right-2 h-4 w-4 -translate-y-1/2 text-[var(--muted)]"
-        viewBox="0 0 20 20"
-        fill="currentColor"
-      >
-        <path
-          fillRule="evenodd"
-          d="M5.23 7.21a.75.75 0 011.06.02L10 11.06l3.71-3.83a.75.75 0 111.08 1.04l-4.25 4.39a.75.75 0 01-1.08 0L5.21 8.27a.75.75 0 01.02-1.06z"
-          clipRule="evenodd"
-        />
-      </svg>
-    </div>
-  )
-})
-
-export { select as selectVariants }

package/src/components/ui/Toast.tsx

@@ -1,72 +0,0 @@
-'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-success bg-success/10 text-success',
-  error: 'border-destructive bg-destructive/10 text-destructive',
-  warning: 'border-warning bg-warning/10 text-warning',
-  info: 'border-info bg-info/10 text-info',
-}
-
-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 right-4 bottom-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

@@ -1,61 +0,0 @@
-export { Button, buttonVariants } from './Button.js'
-export type { ButtonProps, ButtonVariants } from './Button.js'
-export { Badge, badgeVariants, STATUS_TONE, STATUS_LABEL } from './Badge.js'
-export type { BadgeProps, BadgeVariants, DocumentStatus } from './Badge.js'
-export {
-  Card,
-  CardHeader,
-  CardTitle,
-  CardDescription,
-  CardContent,
-  CardFooter,
-  cardVariants,
-} from './Card.js'
-export type { CardProps, CardVariants } from './Card.js'
-export { Input, inputVariants } from './Input.js'
-export type { InputProps, InputVariants } from './Input.js'
-export { Select, selectVariants } from './Select.js'
-export type { SelectProps, SelectVariants } from './Select.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 { ReauthDialog } from './ReauthDialog.js'
-export type { ReauthDialogProps } from './ReauthDialog.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 { Toggle, toggleTrackVariants, toggleThumbVariants } from './Toggle.js'
-export type { ToggleProps, ToggleVariants } from './Toggle.js'
-export { StatusBadge, statusBadgeVariants } from './StatusBadge.js'
-export type { StatusBadgeProps, StatusBadgeVariants, StatusBadgeTone } from './StatusBadge.js'
-export { FilterPill } from './FilterPill.js'
-export type { FilterPillProps } from './FilterPill.js'
-export { StatPill } from './StatPill.js'
-export type { StatPillProps } from './StatPill.js'
-export { RowActions, RowActionButton } from './RowActions.js'
-export type { RowActionButtonProps } from './RowActions.js'
-export {
-  SplitPaneLayout,
-  SplitPaneList,
-  InspectorPane,
-  InspectorPaneHeader,
-  InspectorPaneBody,
-  InspectorPaneSection,
-  InspectorPaneFooter,
-} from './InspectorPane.js'
-export type { InspectorPaneProps } from './InspectorPane.js'
-export { formControlBase, formControlState } from './form-control.js'
-export { CommandPalette } from './CommandPalette.js'
-export type { CommandPaletteProps } from './CommandPalette.js'

package/src/hooks/useContentLock.ts

@@ -1,55 +0,0 @@
-'use client'
-
-import { useState, useEffect, useCallback } from 'react'
-
-interface ContentLock {
-  lockedBy: string | null
-  lockedAt: Date | null
-  isLocked: boolean
-  isLockedByMe: boolean
-}
-
-export function useContentLock(
-  documentId: string | undefined,
-  userId: string,
-): ContentLock & {
-  acquireLock: () => Promise<boolean>
-  releaseLock: () => Promise<void>
-} {
-  const [lock, setLock] = useState<ContentLock>({
-    lockedBy: null,
-    lockedAt: null,
-    isLocked: false,
-    isLockedByMe: false,
-  })
-
-  const acquireLock = useCallback(async () => {
-    if (!documentId) return false
-    setLock({
-      lockedBy: userId,
-      lockedAt: new Date(),
-      isLocked: true,
-      isLockedByMe: true,
-    })
-    return true
-  }, [documentId, userId])
-
-  const releaseLock = useCallback(async () => {
-    setLock({
-      lockedBy: null,
-      lockedAt: null,
-      isLocked: false,
-      isLockedByMe: false,
-    })
-  }, [])
-
-  useEffect(() => {
-    return () => {
-      if (lock.isLockedByMe) {
-        releaseLock()
-      }
-    }
-  }, [lock.isLockedByMe, releaseLock])
-
-  return { ...lock, acquireLock, releaseLock }
-}

package/src/hooks/useDebounce.ts

@@ -1,14 +0,0 @@
-'use client'
-
-import { useState, useEffect } from 'react'
-
-export function useDebounce<T>(value: T, delayMs: number): T {
-  const [debouncedValue, setDebouncedValue] = useState(value)
-
-  useEffect(() => {
-    const timer = setTimeout(() => setDebouncedValue(value), delayMs)
-    return () => clearTimeout(timer)
-  }, [value, delayMs])
-
-  return debouncedValue
-}