convex-cms 0.0.3 → 0.0.5-alpha.2

package/admin/src/components/VersionHistory.tsx

@@ -0,0 +1,279 @@
+import { useState, useCallback } from 'react'
+import { useQuery, useMutation } from 'convex/react'
+import { api } from '../../convex/_generated/api'
+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 { X, CheckCircle, History } from 'lucide-react'
+import { cn } from '~/lib/cn'
+
+interface VersionHistoryProps {
+  entryId: string
+  currentVersion: number
+  onRollbackComplete?: () => void
+  onClose: () => void
+}
+
+interface VersionItem {
+  _id: string
+  versionNumber: number
+  changeDescription?: string
+  createdBy?: string
+  _creationTime: number
+  status: string
+  data: Record<string, unknown>
+  wasPublished?: boolean
+}
+
+export function VersionHistory({
+  entryId,
+  currentVersion,
+  onRollbackComplete,
+  onClose,
+}: VersionHistoryProps) {
+  const [selectedVersions, setSelectedVersions] = useState<
+    [number, number] | null
+  >(null)
+  const [rollbackTarget, setRollbackTarget] = useState<number | null>(null)
+  const [isRollingBack, setIsRollingBack] = useState(false)
+  const [rollbackError, setRollbackError] = useState<string | null>(null)
+  const [rollbackSuccess, setRollbackSuccess] = useState(false)
+
+  const versionsQuery = useQuery(api.versions.getHistory, {
+    entryId,
+    paginationOpts: { numItems: 50, cursor: null },
+  })
+
+  const rollbackMutation = useMutation(api.versions.rollback)
+
+  const versions = (versionsQuery?.page ?? []) as VersionItem[]
+  const isLoading = versionsQuery === undefined
+
+  const handleCompare = useCallback(
+    (fromVersion: number, toVersion: number) => {
+      setSelectedVersions([fromVersion, toVersion])
+    },
+    []
+  )
+
+  const handleRollback = useCallback((versionNumber: number) => {
+    setRollbackTarget(versionNumber)
+    setRollbackError(null)
+  }, [])
+
+  const handleConfirmRollback = useCallback(async () => {
+    if (rollbackTarget === null) return
+
+    setIsRollingBack(true)
+    setRollbackError(null)
+
+    try {
+      await rollbackMutation({
+        entryId,
+        versionNumber: rollbackTarget,
+      })
+      setRollbackTarget(null)
+      setRollbackSuccess(true)
+      setTimeout(() => {
+        setRollbackSuccess(false)
+        onRollbackComplete?.()
+      }, 1500)
+    } catch (error) {
+      const message =
+        error instanceof Error ? error.message : 'Failed to rollback'
+      setRollbackError(message)
+    } finally {
+      setIsRollingBack(false)
+    }
+  }, [entryId, rollbackTarget, rollbackMutation, onRollbackComplete])
+
+  const formatDate = (timestamp: number) => {
+    return new Date(timestamp).toLocaleString(undefined, {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+    })
+  }
+
+  // Render compare view or history list - keep outer container stable to avoid DOM issues
+  if (selectedVersions) {
+    return (
+      <div className="flex h-full flex-col border-l bg-background">
+        <VersionCompare
+          entryId={entryId}
+          fromVersion={selectedVersions[0]}
+          toVersion={selectedVersions[1]}
+          onClose={() => setSelectedVersions(null)}
+          onRollback={(version) => {
+            setSelectedVersions(null)
+            handleRollback(version)
+          }}
+        />
+        {rollbackTarget !== null && (
+          <VersionRollbackModal
+            targetVersion={rollbackTarget}
+            currentVersion={currentVersion}
+            isLoading={isRollingBack}
+            error={rollbackError}
+            onConfirm={handleConfirmRollback}
+            onCancel={() => {
+              setRollbackTarget(null)
+              setRollbackError(null)
+            }}
+          />
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex h-full flex-col border-l bg-background">
+      <div className="flex items-center justify-between border-b px-4 py-3">
+        <div className="flex items-center gap-2">
+          <History className="size-4 text-muted-foreground" />
+          <h3 className="font-semibold">Version History</h3>
+        </div>
+        <button
+          type="button"
+          onClick={onClose}
+          className="rounded p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+          aria-label="Close version history"
+        >
+          <X className="size-4" />
+        </button>
+      </div>
+
+      {rollbackSuccess && (
+        <div className="flex items-center gap-2 border-b bg-emerald-50 px-4 py-2 text-sm text-emerald-800">
+          <CheckCircle className="size-4" />
+          Successfully rolled back to previous version
+        </div>
+      )}
+
+      <ScrollArea className="min-h-0 flex-1">
+        <div className="p-4">
+          {isLoading ? (
+            <div className="flex flex-col items-center justify-center py-8">
+              <div className="size-6 animate-spin rounded-full border-2 border-muted border-t-primary" />
+              <p className="mt-2 text-sm text-muted-foreground">
+                Loading versions...
+              </p>
+            </div>
+          ) : versions.length === 0 ? (
+            <div className="py-8 text-center text-sm text-muted-foreground">
+              Save changes to start building version history
+            </div>
+          ) : (
+            <div className="space-y-3">
+              {versions.map((version, index) => {
+                const isCurrent = version.versionNumber === currentVersion
+                const prevVersion = versions[index + 1]
+
+                return (
+                  <div
+                    key={version._id}
+                    className={cn(
+                      'rounded-lg border p-3 transition-colors',
+                      isCurrent ? 'border-primary/50 bg-primary/5' : 'bg-card'
+                    )}
+                  >
+                    <div className="flex items-center justify-between">
+                      <div className="flex items-center gap-2">
+                        <Badge variant="secondary" className="font-mono">
+                          v{version.versionNumber}
+                        </Badge>
+                        {isCurrent && (
+                          <Badge
+                            variant="outline"
+                            className="border-primary/50 text-primary"
+                          >
+                            Current
+                          </Badge>
+                        )}
+                        {version.wasPublished && (
+                          <Badge
+                            variant="outline"
+                            className="border-emerald-500/50 text-emerald-600"
+                          >
+                            Published
+                          </Badge>
+                        )}
+                      </div>
+                      <CmsStatusBadge
+                        status={
+                          version.status as
+                            | 'draft'
+                            | 'published'
+                            | 'scheduled'
+                            | 'archived'
+                        }
+                      />
+                    </div>
+
+                    <div className="mt-2 text-xs text-muted-foreground">
+                      <span>{formatDate(version._creationTime)}</span>
+                      {version.createdBy && (
+                        <span className="ml-2">by {version.createdBy}</span>
+                      )}
+                    </div>
+
+                    {version.changeDescription && (
+                      <p className="mt-2 text-sm text-muted-foreground">
+                        {version.changeDescription}
+                      </p>
+                    )}
+
+                    <div className="mt-3 flex gap-2">
+                      {prevVersion && (
+                        <CmsButton
+                          variant="outline"
+                          size="sm"
+                          onClick={() =>
+                            handleCompare(
+                              prevVersion.versionNumber,
+                              version.versionNumber
+                            )
+                          }
+                        >
+                          Compare with v{prevVersion.versionNumber}
+                        </CmsButton>
+                      )}
+                      {!isCurrent && (
+                        <CmsButton
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => handleRollback(version.versionNumber)}
+                        >
+                          Rollback
+                        </CmsButton>
+                      )}
+                    </div>
+                  </div>
+                )
+              })}
+            </div>
+          )}
+        </div>
+      </ScrollArea>
+
+      {rollbackTarget !== null && (
+        <VersionRollbackModal
+          targetVersion={rollbackTarget}
+          currentVersion={currentVersion}
+          isLoading={isRollingBack}
+          error={rollbackError}
+          onConfirm={handleConfirmRollback}
+          onCancel={() => {
+            setRollbackTarget(null)
+            setRollbackError(null)
+          }}
+        />
+      )}
+    </div>
+  )
+}

package/admin/src/components/VersionRollbackModal.tsx

@@ -0,0 +1,79 @@
+import { CmsDialog } from '~/components/cmsds/CmsDialog'
+import { CmsButton } from '~/components/cmsds/CmsButton'
+import { AlertTriangle } from 'lucide-react'
+
+interface VersionRollbackModalProps {
+  targetVersion: number
+  currentVersion: number
+  isLoading: boolean
+  error: string | null
+  onConfirm: () => void
+  onCancel: () => void
+}
+
+export function VersionRollbackModal({
+  targetVersion,
+  currentVersion,
+  isLoading,
+  error,
+  onConfirm,
+  onCancel,
+}: VersionRollbackModalProps) {
+  return (
+    <CmsDialog
+      open={true}
+      onOpenChange={(open) => !open && !isLoading && onCancel()}
+      title="Confirm Rollback"
+      size="sm"
+      footer={
+        <>
+          <CmsButton variant="outline" onClick={onCancel} disabled={isLoading}>
+            Cancel
+          </CmsButton>
+          <CmsButton variant="warning" onClick={onConfirm} loading={isLoading}>
+            Rollback to v{targetVersion}
+          </CmsButton>
+        </>
+      }
+    >
+      <div className="space-y-4">
+        <p className="text-sm text-muted-foreground">
+          You are about to rollback from{' '}
+          <span className="font-semibold text-foreground">
+            version {currentVersion}
+          </span>{' '}
+          to{' '}
+          <span className="font-semibold text-foreground">
+            version {targetVersion}
+          </span>
+          .
+        </p>
+
+        <div className="rounded-lg border border-amber-200 bg-amber-50 p-3">
+          <div className="flex gap-2">
+            <AlertTriangle className="mt-0.5 size-4 shrink-0 text-amber-600" />
+            <div className="space-y-2">
+              <p className="text-sm font-medium text-amber-800">
+                This action will:
+              </p>
+              <ul className="space-y-1 text-sm text-amber-700">
+                <li>
+                  • Create a new version with the content from version{' '}
+                  {targetVersion}
+                </li>
+                <li>• The current version will be preserved in history</li>
+                <li>• Any unsaved changes will be lost</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+
+        {error && (
+          <div className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-800">
+            <span className="font-medium">Error:</span> {error}
+          </div>
+        )}
+      </div>
+    </CmsDialog>
+  )
+}

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

@@ -0,0 +1,101 @@
+import * as React from 'react'
+import { Button } from '~/components/ui/button'
+import { cn } from '~/lib/cn'
+import { motion } from '~/lib/motion'
+
+type ButtonProps = React.ComponentProps<typeof Button>
+
+export interface CmsButtonProps extends Omit<ButtonProps, 'variant'> {
+  variant?:
+    | 'primary'
+    | 'secondary'
+    | 'danger'
+    | 'ghost'
+    | 'outline'
+    | 'link'
+    | 'success'
+    | 'warning'
+  loading?: boolean
+}
+
+const variantMap = {
+  primary: 'default',
+  secondary: 'secondary',
+  danger: 'destructive',
+  ghost: 'ghost',
+  outline: 'outline',
+  link: 'link',
+  success: 'default',
+  warning: 'default',
+} as const
+
+const customVariantClasses = {
+  success:
+    'bg-emerald-600 text-white hover:bg-emerald-700 focus-visible:ring-emerald-500',
+  warning:
+    'bg-amber-500 text-white hover:bg-amber-600 focus-visible:ring-amber-500',
+} 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,
+  disabled,
+  children,
+  className,
+  asChild,
+  ...props
+}: CmsButtonProps) {
+  const mappedVariant = variantMap[variant]
+  const customClass = customVariantClasses[variant]
+
+  // When asChild is true, Slot expects exactly one child
+  // Don't render loading spinner as sibling - just pass children through
+  if (asChild) {
+    return (
+      <Button
+        variant={mappedVariant}
+        disabled={disabled || loading}
+        className={cn(motion.fast, customClass, className)}
+        asChild
+        {...props}
+      >
+        {children}
+      </Button>
+    )
+  }
+
+  return (
+    <Button
+      variant={mappedVariant}
+      disabled={disabled || loading}
+      className={cn(motion.fast, customClass, className)}
+      {...props}
+    >
+      {loading && <LoadingSpinner />}
+      {children}
+    </Button>
+  )
+}

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

@@ -0,0 +1,139 @@
+import * as React from 'react'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '~/components/ui/dialog'
+import { CmsButton } from './CmsButton'
+import { cn } from '~/lib/cn'
+
+export interface CmsDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  title: string
+  description?: string
+  children: React.ReactNode
+  footer?: React.ReactNode
+  size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl'
+  className?: string
+}
+
+const sizeClasses = {
+  sm: 'max-w-sm',
+  md: 'max-w-md',
+  lg: 'max-w-lg',
+  xl: 'max-w-xl',
+  '2xl': 'max-w-2xl',
+} as const
+
+export function CmsDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  children,
+  footer,
+  size = 'md',
+  className,
+}: CmsDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        className={cn(
+          'flex max-h-[85vh] flex-col overflow-hidden',
+          sizeClasses[size],
+          className
+        )}
+      >
+        <DialogHeader className="shrink-0">
+          <DialogTitle>{title}</DialogTitle>
+          {description && <DialogDescription>{description}</DialogDescription>}
+        </DialogHeader>
+        <div className="min-h-0 flex-1 py-4 scrollbar-none">
+          {children}
+        </div>
+        {footer && <DialogFooter className="shrink-0 border-t pt-4">{footer}</DialogFooter>}
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export interface CmsConfirmDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  title: string
+  description: string
+  confirmLabel?: string
+  cancelLabel?: string
+  onConfirm: () => void
+  onCancel?: () => void
+  variant?: 'default' | 'danger' | 'primary' | 'warning'
+  isLoading?: boolean
+  loading?: boolean
+  error?: string | null
+}
+
+export function CmsConfirmDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  confirmLabel = 'Confirm',
+  cancelLabel = 'Cancel',
+  onConfirm,
+  onCancel,
+  variant = 'default',
+  loading,
+  isLoading,
+  error,
+}: CmsConfirmDialogProps) {
+  const isLoadingState = loading ?? isLoading ?? false
+
+  const handleCancel = () => {
+    onCancel?.()
+    onOpenChange(false)
+  }
+
+  const handleConfirm = () => {
+    onConfirm()
+  }
+
+  const getButtonVariant = () => {
+    if (variant === 'danger') return 'danger'
+    if (variant === 'warning') return 'warning'
+    return 'primary'
+  }
+
+  return (
+    <CmsDialog
+      open={open}
+      onOpenChange={onOpenChange}
+      title={title}
+      size="sm"
+      footer={
+        <>
+          <CmsButton variant="outline" onClick={handleCancel} disabled={isLoadingState}>
+            {cancelLabel}
+          </CmsButton>
+          <CmsButton
+            variant={getButtonVariant()}
+            onClick={handleConfirm}
+            loading={isLoadingState}
+          >
+            {confirmLabel}
+          </CmsButton>
+        </>
+      }
+    >
+      <div className="space-y-3">
+        <p className="text-sm text-muted-foreground">{description}</p>
+        {error && (
+          <p className="text-sm text-destructive">{error}</p>
+        )}
+      </div>
+    </CmsDialog>
+  )
+}

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

@@ -0,0 +1,62 @@
+import * as React from 'react'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '~/components/ui/dropdown-menu'
+import { CmsButton } from './CmsButton'
+import { MoreHorizontal } from 'lucide-react'
+
+export interface CmsDropdownAction {
+  label: string
+  icon?: React.ReactNode
+  onClick: () => void
+  variant?: 'default' | 'danger'
+  disabled?: boolean
+}
+
+export interface CmsDropdownProps {
+  actions: (CmsDropdownAction | 'separator')[]
+  trigger?: React.ReactNode
+  align?: 'start' | 'center' | 'end'
+}
+
+export function CmsDropdown({ actions, trigger, align = 'end' }: CmsDropdownProps) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        {trigger ?? (
+          <CmsButton variant="ghost" size="icon" className="size-8">
+            <MoreHorizontal className="size-4" />
+            <span className="sr-only">Open menu</span>
+          </CmsButton>
+        )}
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align={align} className="w-48">
+        {actions.map((action, index) => {
+          if (action === 'separator') {
+            return <DropdownMenuSeparator key={`sep-${index}`} />
+          }
+
+          return (
+            <DropdownMenuItem
+              key={action.label}
+              onClick={action.onClick}
+              disabled={action.disabled}
+              className={
+                action.variant === 'danger'
+                  ? 'text-destructive focus:text-destructive'
+                  : undefined
+              }
+            >
+              {action.icon && <span className="mr-2">{action.icon}</span>}
+              {action.label}
+            </DropdownMenuItem>
+          )
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}