convex-cms 0.0.15 → 0.0.16

package/admin/src/components/VersionCompare.tsx

@@ -1,10 +1,10 @@
 import { useQuery } from 'convex/react'
-import { useApi } from '~/embed/contexts/ApiContext'
-import { CmsButton } from '~/components/cmsds/CmsButton'
-import { Badge } from '~/components/ui/badge'
-import { ScrollArea } from '~/components/ui/scroll-area'
+import { useApi } from '../embed/contexts/ApiContext'
+import { CmsButton } from './cmsds/CmsButton'
+import { Badge } from './ui/badge'
+import { ScrollArea } from './ui/scroll-area'
 import { X, ArrowRight, Plus, Minus, RefreshCw, GitCompare } from 'lucide-react'
-import { cn } from '~/lib/cn'
+import { cn } from '../lib/cn'
 
 interface VersionCompareProps {
   entryId: string
@@ -182,7 +182,7 @@ export function VersionCompare({
                 </p>
               )}
 
-              <div className="space-y-3">
+              <div className="flex flex-col gap-3">
                 {comparison.fieldDiffs.map((change, index) => (
                   <div
                     key={index}
@@ -208,7 +208,7 @@ export function VersionCompare({
                       </Badge>
                     </div>
 
-                    <div className="mt-2 space-y-2">
+                    <div className="mt-2 flex flex-col gap-2">
                       {change.changeType !== 'added' && (
                         <div className="rounded border border-diff-removed-border bg-card p-2">
                           <p className="mb-1 text-xs font-medium text-diff-removed">

package/admin/src/components/VersionHistory.tsx

@@ -1,14 +1,14 @@
 import { useState, useCallback } from 'react'
 import { useQuery, useMutation } from 'convex/react'
-import { useApi } from '~/embed/contexts/ApiContext'
+import { useApi } from '../embed/contexts/ApiContext'
 import { VersionCompare } from './VersionCompare'
 import { VersionRollbackModal } from './VersionRollbackModal'
-import { CmsButton } from '~/components/cmsds/CmsButton'
-import { CmsStatusBadge } from '~/components/cmsds/CmsStatusBadge'
-import { Badge } from '~/components/ui/badge'
-import { ScrollArea } from '~/components/ui/scroll-area'
+import { CmsButton } from './cmsds/CmsButton'
+import { CmsStatusBadge } from './cmsds/CmsStatusBadge'
+import { Badge } from './ui/badge'
+import { ScrollArea } from './ui/scroll-area'
 import { X, CheckCircle, History } from 'lucide-react'
-import { cn } from '~/lib/cn'
+import { cn } from '../lib/cn'
 
 interface VersionHistoryProps {
   entryId: string
@@ -170,7 +170,7 @@ export function VersionHistory({
               Save changes to start building version history
             </div>
           ) : (
-            <div className="space-y-3">
+            <div className="flex flex-col gap-3">
               {versions.map((version, index) => {
                 const isCurrent = version.versionNumber === currentVersion
                 const prevVersion = versions[index + 1]

package/admin/src/components/VersionRollbackModal.tsx

@@ -1,5 +1,5 @@
-import { CmsDialog } from '~/components/cmsds/CmsDialog'
-import { CmsButton } from '~/components/cmsds/CmsButton'
+import { CmsDialog } from './cmsds/CmsDialog'
+import { CmsButton } from './cmsds/CmsButton'
 import { AlertTriangle } from 'lucide-react'
 
 interface VersionRollbackModalProps {
@@ -36,7 +36,7 @@ export function VersionRollbackModal({
         </>
       }
     >
-      <div className="space-y-4">
+      <div className="flex flex-col gap-4">
         <p className="text-sm text-muted-foreground">
           You are about to rollback from{' '}
           <span className="font-semibold text-foreground">
@@ -52,11 +52,11 @@ export function VersionRollbackModal({
         <div className="diff-modified rounded-lg border p-3">
           <div className="flex gap-2">
             <AlertTriangle className="mt-0.5 size-4 shrink-0 text-diff-modified" />
-            <div className="space-y-2">
+            <div className="flex flex-col gap-2">
               <p className="text-sm font-medium text-diff-modified">
                 This action will:
               </p>
-              <ul className="space-y-1 text-sm text-diff-modified-foreground">
+              <ul className="flex flex-col gap-1 text-sm text-diff-modified-foreground">
                 <li>
                   • Create a new version with the content from version{' '}
                   {targetVersion}

package/admin/src/components/cmsds/CmsButton.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react'
-import { Button } from '~/components/ui/button'
-import { cn } from '~/lib/cn'
-import { motion } from '~/lib/motion'
+import { Button } from '../ui/button'
+import { Spinner } from '../ui/spinner'
+import { cn } from '../../lib/cn'
+import { motion } from '../../lib/motion'
 
 type ButtonProps = React.ComponentProps<typeof Button>
 
@@ -36,29 +37,6 @@ const customVariantClasses = {
     'bg-warning text-warning-foreground hover:bg-warning/90 focus-visible:ring-warning',
 } as Record<string, string>
 
-const LoadingSpinner = () => (
-  <svg
-    className="size-4 animate-spin"
-    xmlns="http://www.w3.org/2000/svg"
-    fill="none"
-    viewBox="0 0 24 24"
-  >
-    <circle
-      className="opacity-25"
-      cx="12"
-      cy="12"
-      r="10"
-      stroke="currentColor"
-      strokeWidth="4"
-    />
-    <path
-      className="opacity-75"
-      fill="currentColor"
-      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-    />
-  </svg>
-)
-
 export function CmsButton({
   variant = 'primary',
   loading,
@@ -94,7 +72,7 @@ export function CmsButton({
       className={cn(motion.fast, customClass, className)}
       {...props}
     >
-      {loading && <LoadingSpinner />}
+      {loading && <Spinner data-icon="inline-start" />}
       {children}
     </Button>
   )

package/admin/src/components/cmsds/CmsDialog.tsx

@@ -6,9 +6,9 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from '~/components/ui/dialog'
+} from '../ui/dialog'
 import { CmsButton } from './CmsButton'
-import { cn } from '~/lib/cn'
+import { cn } from '../../lib/cn'
 
 export interface CmsDialogProps {
   open: boolean
@@ -131,7 +131,7 @@ export function CmsConfirmDialog({
         </>
       }
     >
-      <div className="space-y-3">
+      <div className="flex flex-col gap-3">
         <p className="text-sm text-muted-foreground">{description}</p>
         {error && (
           <p className="text-sm text-destructive">{error}</p>

package/admin/src/components/cmsds/CmsDropdown.tsx

@@ -5,7 +5,7 @@ import {
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from '~/components/ui/dropdown-menu'
+} from '../ui/dropdown-menu'
 import { CmsButton } from './CmsButton'
 import { MoreHorizontal } from 'lucide-react'
 

package/admin/src/components/cmsds/CmsEmptyState.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { cn } from '~/lib/cn'
+import { cn } from '../../lib/cn'
 import { CmsButton, type CmsButtonProps } from './CmsButton'
 
 export interface CmsEmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {

package/admin/src/components/cmsds/CmsField.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
-import { Label } from '~/components/ui/label'
-import { cn } from '~/lib/cn'
+import { Label } from '../ui/label'
+import { cn } from '../../lib/cn'
 
 export interface CmsFieldProps {
   label?: string
@@ -22,7 +22,7 @@ export function CmsField({
   children,
 }: CmsFieldProps) {
   return (
-    <div className={cn('space-y-2', className)}>
+    <div className={cn('flex flex-col gap-2', className)}>
       {label && (
         <Label
           htmlFor={htmlFor}

package/admin/src/components/cmsds/CmsFilterBar.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react'
 import { Search, X } from 'lucide-react'
-import { CmsInput } from './CmsInput'
 import { CmsSelect, type CmsSelectOption } from './CmsSelect'
 import { CmsButton } from './CmsButton'
-import { cn } from '~/lib/cn'
+import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText } from '../ui/input-group'
+import { cn } from '../../lib/cn'
 
 export interface CmsFilterBarFilter {
   key: string
@@ -40,16 +40,17 @@ export function CmsFilterBar({
     <div className={cn("flex flex-wrap items-center gap-3 pb-4", className)}>
       <div className="flex flex-1 flex-wrap items-center gap-2">
         {search && (
-          <div className="relative w-full max-w-xs">
-            <Search className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
-            <CmsInput
+          <InputGroup className={cn("w-full max-w-xs", search.className)}>
+            <InputGroupAddon align="inline-start">
+              <InputGroupText><Search /></InputGroupText>
+            </InputGroupAddon>
+            <InputGroupInput
               type="search"
               placeholder={search.placeholder ?? "Search..."}
               value={search.value}
               onChange={(e) => search.onChange(e.target.value)}
-              className={cn("pl-9", search.className)}
             />
-          </div>
+          </InputGroup>
         )}
         {filters?.map((filter) => (
           <CmsSelect

package/admin/src/components/cmsds/CmsInput.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
-import { Input } from '~/components/ui/input'
-import { cn } from '~/lib/cn'
+import { Input } from '../ui/input'
+import { cn } from '../../lib/cn'
 
 export interface CmsInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   error?: boolean

package/admin/src/components/cmsds/CmsPageHeader.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { cn } from '~/lib/cn'
+import { cn } from '../../lib/cn'
 
 export interface CmsPageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
   title: string
@@ -19,9 +19,9 @@ export function CmsPageHeader({
   return (
     <div className={cn('mb-6', className)} {...props}>
       {breadcrumbs && <div className="mb-2">{breadcrumbs}</div>}
-      <div className="flex items-start justify-between gap-4">
-        <div className="space-y-1">
-          <h1 className="text-2xl font-semibold tracking-tight text-foreground">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:gap-4">
+        <div className="flex flex-col gap-1">
+          <h1 className="text-xl font-semibold tracking-tight text-foreground sm:text-2xl">
             {title}
           </h1>
           {description && (

package/admin/src/components/cmsds/CmsPagination.tsx

@@ -5,7 +5,7 @@ import {
 	ChevronsRight,
 } from "lucide-react";
 import { CmsButton } from "./CmsButton";
-import { cn } from "~/lib/cn";
+import { cn } from "../../lib/cn";
 
 export interface CmsPaginationProps {
 	currentPage: number;

package/admin/src/components/cmsds/CmsSelect.tsx

@@ -4,8 +4,8 @@ import {
 	SelectItem,
 	SelectTrigger,
 	SelectValue,
-} from "~/components/ui/select";
-import { cn } from "~/lib/cn";
+} from "../ui/select";
+import { cn } from "../../lib/cn";
 
 export interface CmsSelectOption {
 	value: string;

package/admin/src/components/cmsds/CmsStatCard.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { CmsSurface } from './CmsSurface'
-import { cn } from '~/lib/cn'
+import { cn } from '../../lib/cn'
 
 export interface CmsStatCardProps {
   title: string
@@ -26,7 +26,7 @@ export function CmsStatCard({
   const content = (
     <>
       <div className="flex items-start justify-between">
-        <div className="space-y-1">
+        <div className="flex flex-col gap-1">
           <p className="text-sm font-medium text-muted-foreground">{title}</p>
           {isLoading ? (
             <div className="h-8 w-16 animate-pulse rounded bg-muted" />

package/admin/src/components/cmsds/CmsStatusBadge.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { Badge } from "~/components/ui/badge";
-import { cn } from "~/lib/cn";
+import { Badge } from "../ui/badge";
+import { cn } from "../../lib/cn";
 
 export type ContentStatus = "draft" | "published" | "scheduled" | "archived";
 

package/admin/src/components/cmsds/CmsSurface.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { cn } from '~/lib/cn'
+import { cn } from '../../lib/cn'
 
 export interface CmsSurfaceProps extends React.HTMLAttributes<HTMLDivElement> {
   elevation?: 'base' | 'elevated' | 'floating'

package/admin/src/components/cmsds/CmsTable.tsx

@@ -6,9 +6,9 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from '~/components/ui/table'
-import { Checkbox } from '~/components/ui/checkbox'
-import { cn } from '~/lib/cn'
+} from '../ui/table'
+import { Checkbox } from '../ui/checkbox'
+import { cn } from '../../lib/cn'
 import { ChevronDown, ChevronUp, ChevronsUpDown } from 'lucide-react'
 
 export interface CmsTableColumn<T> {

package/admin/src/components/cmsds/CmsToolbar.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
-import { cn } from '~/lib/cn'
-import { Input } from '~/components/ui/input'
+import { cn } from '../../lib/cn'
+import { Input } from '../ui/input'
 import { Search } from 'lucide-react'
 
 export interface CmsToolbarProps extends React.HTMLAttributes<HTMLDivElement> {

package/admin/src/components/cmsds/index.ts

@@ -1,7 +1,6 @@
 export { CmsButton, type CmsButtonProps } from './CmsButton'
 export { CmsSurface, type CmsSurfaceProps } from './CmsSurface'
 export { CmsStatusBadge, type CmsStatusBadgeProps, type ContentStatus } from './CmsStatusBadge'
-export { CmsField, type CmsFieldProps } from './CmsField'
 export { CmsEmptyState, type CmsEmptyStateProps } from './CmsEmptyState'
 export { CmsPageHeader, type CmsPageHeaderProps } from './CmsPageHeader'
 export { CmsToolbar, type CmsToolbarProps } from './CmsToolbar'

package/admin/src/components/editor/AutosaveIndicator.tsx

@@ -0,0 +1,56 @@
+import { Spinner } from '../ui/spinner'
+import { CheckCircle, AlertCircle } from 'lucide-react'
+import { Button } from '../ui/button'
+
+export type AutosaveStatus = 'idle' | 'saving' | 'saved' | 'error'
+
+interface AutosaveIndicatorProps {
+  status: AutosaveStatus
+  error?: string | null
+  retryCount?: number
+  maxRetries?: number
+  isDirty?: boolean
+  onRetry?: () => void
+}
+
+export function AutosaveIndicator({
+  status,
+  error,
+  retryCount = 0,
+  maxRetries = 3,
+  isDirty = false,
+  onRetry,
+}: AutosaveIndicatorProps) {
+  if (status === 'idle' && !isDirty) return null
+
+  return (
+    <div className="flex items-center gap-2 text-sm">
+      {status === 'saving' && (
+        <span className="flex items-center gap-1.5 text-muted-foreground">
+          <Spinner />
+          {retryCount > 0 ? `Retrying (${retryCount}/${maxRetries})...` : 'Saving...'}
+        </span>
+      )}
+      {status === 'saved' && (
+        <span className="flex items-center gap-1.5 text-success">
+          <CheckCircle />
+          Saved
+        </span>
+      )}
+      {status === 'error' && (
+        <span className="flex items-center gap-1.5 text-destructive">
+          <AlertCircle />
+          {error ?? 'Save failed'}
+          {retryCount === 0 && onRetry && (
+            <Button type="button" variant="ghost" size="sm" onClick={onRetry} className="h-auto px-1.5 py-0.5 text-xs">
+              Retry
+            </Button>
+          )}
+        </span>
+      )}
+      {status === 'idle' && isDirty && (
+        <span className="text-sm text-warning">Unsaved changes</span>
+      )}
+    </div>
+  )
+}

package/admin/src/components/editor/EditorContentPanel.tsx

@@ -0,0 +1,60 @@
+import type { FieldDefinition, FieldError } from '../fields/types'
+import { FieldRenderer } from '../fields/FieldRenderer'
+import { FieldGroupSection, groupFields } from '../FieldGroupSection'
+
+interface EditorContentPanelProps {
+  fields: FieldDefinition[]
+  formData: Record<string, unknown>
+  fieldErrors: Record<string, FieldError>
+  isSubmitting: boolean
+  onFieldChange: (fieldName: string, value: unknown) => void
+}
+
+export function EditorContentPanel({
+  fields,
+  formData,
+  fieldErrors,
+  isSubmitting,
+  onFieldChange,
+}: EditorContentPanelProps) {
+  const groups = groupFields(fields)
+  const isSingleDefaultGroup =
+    groups.length === 1 && groups[0].name === '__default__'
+
+  if (isSingleDefaultGroup) {
+    return (
+      <div className="mx-auto w-full max-w-3xl">
+        <div className="flex flex-col gap-4">
+          {fields.map((field) => (
+            <FieldRenderer
+              key={field.name}
+              field={field}
+              value={formData[field.name]}
+              onChange={(value) => onFieldChange(field.name, value)}
+              error={fieldErrors[field.name]}
+              disabled={isSubmitting}
+            />
+          ))}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="mx-auto w-full max-w-3xl">
+      <div className="flex flex-col gap-6">
+        {groups.map((group, index) => (
+          <FieldGroupSection
+            key={group.name}
+            group={group}
+            formData={formData}
+            fieldErrors={fieldErrors}
+            isSubmitting={isSubmitting}
+            onFieldChange={onFieldChange}
+            initialOpen={index === 0}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}

package/admin/src/components/editor/EditorModals.tsx

@@ -0,0 +1,122 @@
+import { CmsDialog, CmsConfirmDialog } from '../cmsds/CmsDialog'
+import { CmsButton } from '../cmsds/CmsButton'
+import { Input } from '../ui/input'
+
+interface ScheduleModalProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  scheduleDateTime: string
+  onScheduleDateTimeChange: (value: string) => void
+  onSchedule: () => void
+  isPublishing: boolean
+  publishError?: string | null
+  minDateTime: string
+}
+
+export function ScheduleModal({
+  open,
+  onOpenChange,
+  scheduleDateTime,
+  onScheduleDateTimeChange,
+  onSchedule,
+  isPublishing,
+  publishError,
+  minDateTime,
+}: ScheduleModalProps) {
+  return (
+    <CmsDialog
+      open={open}
+      onOpenChange={onOpenChange}
+      title="Schedule Publication"
+      size="sm"
+      footer={
+        <>
+          <CmsButton variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </CmsButton>
+          <CmsButton variant="primary" onClick={onSchedule} loading={isPublishing}>
+            Schedule
+          </CmsButton>
+        </>
+      }
+    >
+      <div className="flex flex-col gap-4">
+        <p className="text-sm text-muted-foreground">
+          Choose when this content should be automatically published:
+        </p>
+        <Input
+          type="datetime-local"
+          value={scheduleDateTime}
+          onChange={(e) => onScheduleDateTimeChange(e.target.value)}
+          min={minDateTime}
+        />
+        {publishError && (
+          <p className="text-sm text-destructive">{publishError}</p>
+        )}
+      </div>
+    </CmsDialog>
+  )
+}
+
+interface PublishConfirmModalProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  action: 'publish' | 'unpublish' | null
+  onConfirm: () => void
+  isPublishing: boolean
+}
+
+export function PublishConfirmModal({
+  open,
+  onOpenChange,
+  action,
+  onConfirm,
+  isPublishing,
+}: PublishConfirmModalProps) {
+  return (
+    <CmsConfirmDialog
+      open={open && action !== null}
+      onOpenChange={onOpenChange}
+      title={action === 'publish' ? 'Confirm Publish' : 'Confirm Unpublish'}
+      description={
+        action === 'publish'
+          ? 'Are you sure you want to publish this entry? It will become publicly visible.'
+          : 'Are you sure you want to unpublish this entry? It will no longer be publicly visible.'
+      }
+      confirmLabel={action === 'publish' ? 'Publish' : 'Unpublish'}
+      variant={action === 'publish' ? 'primary' : 'warning'}
+      onConfirm={onConfirm}
+      isLoading={isPublishing}
+    />
+  )
+}
+
+interface DeleteConfirmModalProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onConfirm: () => void
+  isDeleting: boolean
+  error?: string | null
+}
+
+export function DeleteConfirmModal({
+  open,
+  onOpenChange,
+  onConfirm,
+  isDeleting,
+  error,
+}: DeleteConfirmModalProps) {
+  return (
+    <CmsConfirmDialog
+      open={open}
+      onOpenChange={onOpenChange}
+      title="Delete Entry"
+      description="Are you sure you want to delete this entry? It will be moved to the trash and can be restored within the retention period."
+      confirmLabel="Delete"
+      variant="danger"
+      onConfirm={onConfirm}
+      isLoading={isDeleting}
+      error={error}
+    />
+  )
+}