@actuate-media/cms-admin 0.9.0 → 0.10.0

package/src/components/SchedulePublishDialog.tsx

@@ -0,0 +1,241 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { Calendar, Clock, Loader2, X } from 'lucide-react'
+import { toast } from 'sonner'
+import { cmsApi } from '../lib/api.js'
+
+export interface SchedulePublishDialogProps {
+  collectionSlug: string
+  documentId: string
+  /** Existing scheduled publish time, if any. */
+  scheduledAt?: string | null
+  /** Existing scheduled unpublish time, if any. */
+  scheduledUnpublishAt?: string | null
+  open: boolean
+  onClose: () => void
+  /** Called with the updated schedule fields after a successful save. */
+  onScheduled?: (next: {
+    status: string
+    scheduledAt: string | null
+    scheduledUnpublishAt: string | null
+  }) => void
+}
+
+/**
+ * Convert a Date or ISO string to the `YYYY-MM-DDTHH:mm` shape that the
+ * `<input type="datetime-local">` element expects, in the user's local
+ * timezone (the input is timezone-naive but we present + parse it as local).
+ */
+function toLocalDateTimeInput(value: string | Date | null | undefined): string {
+  if (!value) return ''
+  const d = typeof value === 'string' ? new Date(value) : value
+  if (Number.isNaN(d.getTime())) return ''
+  const pad = (n: number) => String(n).padStart(2, '0')
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`
+}
+
+/** Round "now + 1 hour" to the next quarter-hour for a friendly default. */
+function defaultScheduleTime(): string {
+  const d = new Date(Date.now() + 60 * 60 * 1000)
+  d.setMinutes(Math.ceil(d.getMinutes() / 15) * 15, 0, 0)
+  return toLocalDateTimeInput(d)
+}
+
+export function SchedulePublishDialog({
+  collectionSlug,
+  documentId,
+  scheduledAt,
+  scheduledUnpublishAt,
+  open,
+  onClose,
+  onScheduled,
+}: SchedulePublishDialogProps) {
+  const [publishAt, setPublishAt] = useState('')
+  const [unpublishAt, setUnpublishAt] = useState('')
+  const [includeUnpublish, setIncludeUnpublish] = useState(false)
+  const [saving, setSaving] = useState(false)
+  const [cancelling, setCancelling] = useState(false)
+
+  const hasExistingSchedule = Boolean(scheduledAt || scheduledUnpublishAt)
+
+  useEffect(() => {
+    if (!open) return
+    setPublishAt(scheduledAt ? toLocalDateTimeInput(scheduledAt) : defaultScheduleTime())
+    setUnpublishAt(scheduledUnpublishAt ? toLocalDateTimeInput(scheduledUnpublishAt) : '')
+    setIncludeUnpublish(Boolean(scheduledUnpublishAt))
+  }, [open, scheduledAt, scheduledUnpublishAt])
+
+  async function handleSave() {
+    if (!publishAt && !(includeUnpublish && unpublishAt)) {
+      toast.error('Pick a publish or unpublish time')
+      return
+    }
+
+    // datetime-local is parsed by the browser as local time; new Date() on
+    // that string respects the user's timezone and serialises to a UTC
+    // ISO string the server can compare against `Date.now()` cleanly.
+    const publishDate = publishAt ? new Date(publishAt) : null
+    const unpublishDate = includeUnpublish && unpublishAt ? new Date(unpublishAt) : null
+
+    if (publishDate && publishDate.getTime() <= Date.now()) {
+      toast.error('Publish time must be in the future')
+      return
+    }
+    if (unpublishDate && unpublishDate.getTime() <= Date.now()) {
+      toast.error('Unpublish time must be in the future')
+      return
+    }
+    if (publishDate && unpublishDate && unpublishDate <= publishDate) {
+      toast.error('Unpublish time must be after publish time')
+      return
+    }
+
+    setSaving(true)
+    const res = await cmsApi<any>(`/collections/${collectionSlug}/${documentId}/schedule`, {
+      method: 'POST',
+      body: JSON.stringify({
+        scheduledAt: publishDate ? publishDate.toISOString() : null,
+        scheduledUnpublishAt: unpublishDate ? unpublishDate.toISOString() : null,
+      }),
+    })
+    setSaving(false)
+    if (res.error) {
+      toast.error(res.error)
+      return
+    }
+    toast.success(publishDate ? 'Publish scheduled' : 'Unpublish scheduled')
+    onScheduled?.({
+      status: res.data?.status ?? 'SCHEDULED',
+      scheduledAt: res.data?.scheduledAt ?? (publishDate ? publishDate.toISOString() : null),
+      scheduledUnpublishAt:
+        res.data?.scheduledUnpublishAt ?? (unpublishDate ? unpublishDate.toISOString() : null),
+    })
+    onClose()
+  }
+
+  async function handleCancelSchedule() {
+    setCancelling(true)
+    const res = await cmsApi<any>(`/collections/${collectionSlug}/${documentId}/schedule`, {
+      method: 'DELETE',
+    })
+    setCancelling(false)
+    if (res.error) {
+      toast.error(res.error)
+      return
+    }
+    toast.success('Schedule cancelled')
+    onScheduled?.({
+      status: res.data?.status ?? 'DRAFT',
+      scheduledAt: null,
+      scheduledUnpublishAt: null,
+    })
+    onClose()
+  }
+
+  if (!open) return null
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+      <div className="fixed inset-0 bg-black/40" onClick={onClose} />
+      <div className="relative w-full max-w-md rounded-lg bg-white shadow-xl">
+        <div className="flex items-center justify-between border-b border-gray-200 px-4 py-3">
+          <div className="flex items-center gap-2">
+            <Calendar className="h-5 w-5 text-gray-600" />
+            <h2 className="text-lg font-semibold text-gray-900">Schedule publishing</h2>
+          </div>
+          <button
+            onClick={onClose}
+            className="rounded-lg p-1.5 transition-colors hover:bg-gray-100"
+          >
+            <X className="h-5 w-5 text-gray-500" />
+          </button>
+        </div>
+
+        <div className="space-y-4 px-4 py-4">
+          <div className="space-y-1.5">
+            <label className="text-sm font-medium text-gray-700">Publish at</label>
+            <div className="relative">
+              <Clock className="pointer-events-none absolute left-2.5 top-2.5 h-4 w-4 text-gray-400" />
+              <input
+                type="datetime-local"
+                value={publishAt}
+                onChange={(e) => setPublishAt(e.target.value)}
+                min={toLocalDateTimeInput(new Date(Date.now() + 60 * 1000))}
+                className="w-full rounded-md border border-gray-300 bg-white py-2 pl-9 pr-3 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+              />
+            </div>
+            <p className="text-xs text-gray-500">
+              The document will move from DRAFT to PUBLISHED at this time (your local timezone).
+            </p>
+          </div>
+
+          <label className="flex items-center gap-2 text-sm text-gray-700">
+            <input
+              type="checkbox"
+              checked={includeUnpublish}
+              onChange={(e) => setIncludeUnpublish(e.target.checked)}
+              className="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+            />
+            Also schedule an unpublish
+          </label>
+
+          {includeUnpublish && (
+            <div className="space-y-1.5">
+              <label className="text-sm font-medium text-gray-700">Unpublish at</label>
+              <div className="relative">
+                <Clock className="pointer-events-none absolute left-2.5 top-2.5 h-4 w-4 text-gray-400" />
+                <input
+                  type="datetime-local"
+                  value={unpublishAt}
+                  onChange={(e) => setUnpublishAt(e.target.value)}
+                  min={publishAt || toLocalDateTimeInput(new Date(Date.now() + 60 * 1000))}
+                  className="w-full rounded-md border border-gray-300 bg-white py-2 pl-9 pr-3 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+                />
+              </div>
+            </div>
+          )}
+        </div>
+
+        <div className="flex items-center justify-between gap-2 border-t border-gray-200 px-4 py-3">
+          {hasExistingSchedule ? (
+            <button
+              onClick={handleCancelSchedule}
+              disabled={cancelling || saving}
+              className="inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium text-red-700 hover:bg-red-50 disabled:opacity-50"
+            >
+              {cancelling ? (
+                <Loader2 className="h-4 w-4 animate-spin" />
+              ) : (
+                <X className="h-4 w-4" />
+              )}
+              Cancel schedule
+            </button>
+          ) : (
+            <span />
+          )}
+          <div className="flex items-center gap-2">
+            <button
+              onClick={onClose}
+              className="rounded-md px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100"
+            >
+              Close
+            </button>
+            <button
+              onClick={handleSave}
+              disabled={saving || cancelling}
+              className="inline-flex items-center gap-1.5 rounded-md bg-blue-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50"
+            >
+              {saving ? (
+                <Loader2 className="h-4 w-4 animate-spin" />
+              ) : (
+                <Calendar className="h-4 w-4" />
+              )}
+              {hasExistingSchedule ? 'Reschedule' : 'Schedule'}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/SharePreviewLinkDialog.tsx

@@ -0,0 +1,227 @@
+'use client'
+
+import { useState } from 'react'
+import { Check, Copy, Link2, Loader2, Share2, X } from 'lucide-react'
+import { toast } from 'sonner'
+import { cmsApi } from '../lib/api.js'
+
+export interface SharePreviewLinkDialogProps {
+  collectionSlug: string
+  documentId: string
+  /** Document slug, used to build a friendly preview URL. */
+  documentSlug?: string | null
+  /**
+   * Optional site URL (https://...) to prepend. If omitted we just emit the
+   * relative path and ask the admin to share it however they want.
+   */
+  siteUrl?: string
+  /** Custom URL prefix for this collection (e.g. /blog). Defaults to slug. */
+  urlPrefix?: string
+  open: boolean
+  onClose: () => void
+}
+
+interface TTLChoice {
+  label: string
+  seconds: number
+  hint: string
+}
+
+const TTL_CHOICES: TTLChoice[] = [
+  { label: '1 hour', seconds: 60 * 60, hint: 'Quick review' },
+  { label: '1 day', seconds: 24 * 60 * 60, hint: 'Single workday' },
+  { label: '7 days', seconds: 7 * 24 * 60 * 60, hint: 'Client review' },
+  { label: '30 days', seconds: 30 * 24 * 60 * 60, hint: 'Long-running staging' },
+]
+
+function buildPreviewUrl({
+  siteUrl,
+  urlPrefix,
+  collectionSlug,
+  documentSlug,
+  token,
+}: {
+  siteUrl?: string
+  urlPrefix?: string
+  collectionSlug: string
+  documentSlug?: string | null
+  token: string
+}): string {
+  const base = (siteUrl ?? '').replace(/\/+$/, '')
+  // Build the same path /resolve would match: <urlPrefix>/<slug>, or
+  // /<slug> for top-level page collections. If there's no slug yet we
+  // fall back to /admin's preview endpoint as a safety net.
+  const slug = documentSlug?.toString().trim() ?? ''
+  if (!slug) {
+    return `${base}/preview/${collectionSlug}/_?token=${encodeURIComponent(token)}`
+  }
+  const prefix = (urlPrefix ?? collectionSlug).replace(/^\/+|\/+$/g, '')
+  const path = prefix ? `/${prefix}/${slug}` : `/${slug}`
+  return `${base}${path}?preview=${encodeURIComponent(token)}`
+}
+
+export function SharePreviewLinkDialog({
+  collectionSlug,
+  documentId,
+  documentSlug,
+  siteUrl,
+  urlPrefix,
+  open,
+  onClose,
+}: SharePreviewLinkDialogProps) {
+  const [ttl, setTtl] = useState<number>(TTL_CHOICES[2]!.seconds)
+  const [token, setToken] = useState<string>('')
+  const [previewUrl, setPreviewUrl] = useState<string>('')
+  const [expiresAt, setExpiresAt] = useState<string>('')
+  const [generating, setGenerating] = useState(false)
+  const [copied, setCopied] = useState(false)
+
+  async function generate() {
+    setGenerating(true)
+    const res = await cmsApi<{
+      token: string
+      expiresAt: string
+      slug?: string | null
+    }>('/preview/token', {
+      method: 'POST',
+      body: JSON.stringify({
+        collection: collectionSlug,
+        documentId,
+        ttlSeconds: ttl,
+      }),
+    })
+    setGenerating(false)
+    if (res.error || !res.data) {
+      toast.error(res.error ?? 'Failed to create preview token')
+      return
+    }
+    const data = res.data
+    setToken(data.token)
+    setExpiresAt(data.expiresAt ?? '')
+    const url = buildPreviewUrl({
+      siteUrl,
+      urlPrefix,
+      collectionSlug,
+      documentSlug: data.slug ?? documentSlug,
+      token: data.token,
+    })
+    setPreviewUrl(url)
+    setCopied(false)
+  }
+
+  async function copyToClipboard() {
+    if (!previewUrl) return
+    try {
+      await navigator.clipboard.writeText(previewUrl)
+      setCopied(true)
+      toast.success('Preview link copied')
+      setTimeout(() => setCopied(false), 2000)
+    } catch {
+      toast.error("Couldn't copy to clipboard")
+    }
+  }
+
+  if (!open) return null
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+      <div className="fixed inset-0 bg-black/40" onClick={onClose} />
+      <div className="relative w-full max-w-lg rounded-lg bg-white shadow-xl">
+        <div className="flex items-center justify-between border-b border-gray-200 px-4 py-3">
+          <div className="flex items-center gap-2">
+            <Share2 className="h-5 w-5 text-gray-600" />
+            <h2 className="text-lg font-semibold text-gray-900">Share preview link</h2>
+          </div>
+          <button
+            onClick={onClose}
+            className="rounded-lg p-1.5 transition-colors hover:bg-gray-100"
+          >
+            <X className="h-5 w-5 text-gray-500" />
+          </button>
+        </div>
+
+        <div className="space-y-4 px-4 py-4">
+          <p className="text-sm text-gray-600">
+            Generate a signed URL that lets anyone with the link view the current draft of this
+            document — even if it's never been published.
+          </p>
+
+          <div className="space-y-2">
+            <label className="text-sm font-medium text-gray-700">Link lifetime</label>
+            <div className="grid grid-cols-2 gap-2">
+              {TTL_CHOICES.map((choice) => {
+                const selected = ttl === choice.seconds
+                return (
+                  <button
+                    key={choice.seconds}
+                    onClick={() => setTtl(choice.seconds)}
+                    className={`rounded-md border px-3 py-2 text-left text-sm transition-colors ${
+                      selected
+                        ? 'border-blue-500 bg-blue-50 text-blue-900'
+                        : 'border-gray-200 hover:border-gray-300 hover:bg-gray-50'
+                    }`}
+                  >
+                    <div className="font-medium">{choice.label}</div>
+                    <div className="text-xs text-gray-500">{choice.hint}</div>
+                  </button>
+                )
+              })}
+            </div>
+            <p className="text-xs text-gray-500">
+              Preview tokens can't be revoked individually — pick the shortest TTL that fits.
+            </p>
+          </div>
+
+          {previewUrl ? (
+            <div className="space-y-2 rounded-lg border border-gray-200 bg-gray-50 p-3">
+              <label className="text-xs font-medium uppercase tracking-wide text-gray-500">
+                Preview URL
+              </label>
+              <div className="flex items-stretch gap-2">
+                <input
+                  readOnly
+                  value={previewUrl}
+                  onFocus={(e) => e.currentTarget.select()}
+                  className="flex-1 rounded-md border border-gray-300 bg-white px-2 py-1.5 font-mono text-xs"
+                />
+                <button
+                  onClick={copyToClipboard}
+                  className="inline-flex items-center gap-1.5 rounded-md bg-gray-900 px-3 py-1.5 text-xs font-medium text-white hover:bg-gray-700"
+                >
+                  {copied ? <Check className="h-3.5 w-3.5" /> : <Copy className="h-3.5 w-3.5" />}
+                  {copied ? 'Copied' : 'Copy'}
+                </button>
+              </div>
+              {expiresAt && (
+                <p className="text-xs text-gray-500">
+                  Expires {new Date(expiresAt).toLocaleString()}
+                </p>
+              )}
+            </div>
+          ) : null}
+        </div>
+
+        <div className="flex items-center justify-end gap-2 border-t border-gray-200 px-4 py-3">
+          <button
+            onClick={onClose}
+            className="rounded-md px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100"
+          >
+            Close
+          </button>
+          <button
+            onClick={generate}
+            disabled={generating}
+            className="inline-flex items-center gap-1.5 rounded-md bg-blue-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50"
+          >
+            {generating ? (
+              <Loader2 className="h-4 w-4 animate-spin" />
+            ) : (
+              <Link2 className="h-4 w-4" />
+            )}
+            {previewUrl ? 'Generate new link' : 'Generate link'}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/index.ts

@@ -60,6 +60,10 @@ export type { SEOData, SEOPanelProps } from './components/SEOPanel.js'
 export { LivePreview } from './components/LivePreview.js'
 export { VersionHistory } from './components/VersionHistory.js'
 export type { VersionHistoryProps } from './components/VersionHistory.js'
+export { SchedulePublishDialog } from './components/SchedulePublishDialog.js'
+export type { SchedulePublishDialogProps } from './components/SchedulePublishDialog.js'
+export { SharePreviewLinkDialog } from './components/SharePreviewLinkDialog.js'
+export type { SharePreviewLinkDialogProps } from './components/SharePreviewLinkDialog.js'
 export { MediaPickerModal } from './components/MediaPickerModal.js'
 export type { MediaPickerModalProps } from './components/MediaPickerModal.js'
 export { ThemeProvider, useTheme } from './components/ThemeProvider.js'

package/src/views/DocumentEdit.tsx

@@ -1,7 +1,18 @@
 'use client'
 
 import { useState, useEffect, useCallback, useRef } from 'react'
-import { AlertTriangle, Eye, EyeOff, Save, Copy, Loader2, Clock } from 'lucide-react'
+import {
+  AlertTriangle,
+  Calendar,
+  Eye,
+  EyeOff,
+  Save,
+  Copy,
+  Loader2,
+  Clock,
+  Share2,
+  XCircle,
+} from 'lucide-react'
 import { toast } from 'sonner'
 import { FieldRenderer } from '../fields/FieldRenderer.js'
 import { RelationshipField } from '../fields/RelationshipField.js'
@@ -12,6 +23,8 @@ import { VersionHistory } from '../components/VersionHistory.js'
 import { PresenceIndicator } from '../components/PresenceIndicator.js'
 import { SEOPanel } from '../components/SEOPanel.js'
 import type { SEOData } from '../components/SEOPanel.js'
+import { SchedulePublishDialog } from '../components/SchedulePublishDialog.js'
+import { SharePreviewLinkDialog } from '../components/SharePreviewLinkDialog.js'
 import { cmsApi } from '../lib/api.js'
 
 export interface DocumentEditProps {
@@ -40,7 +53,11 @@ export function DocumentEdit({
   const [loading, setLoading] = useState(!isNew)
   const [showPreview, setShowPreview] = useState(false)
   const [showVersions, setShowVersions] = useState(false)
+  const [showSchedule, setShowSchedule] = useState(false)
+  const [showShareLink, setShowShareLink] = useState(false)
   const [docStatus, setDocStatus] = useState<string>('DRAFT')
+  const [scheduledAt, setScheduledAt] = useState<string | null>(null)
+  const [scheduledUnpublishAt, setScheduledUnpublishAt] = useState<string | null>(null)
   const hasLoadedRef = useRef(false)
 
   const collections = config?.collections
@@ -125,6 +142,8 @@ export function DocumentEdit({
       setValues(merged)
       setInitialValues(merged)
       setDocStatus(doc.status ?? 'DRAFT')
+      setScheduledAt(doc.scheduledAt ?? null)
+      setScheduledUnpublishAt(doc.scheduledUnpublishAt ?? null)
 
       const loadedSeo: SEOData = {}
       for (const key of SEO_FIELDS) {
@@ -309,6 +328,14 @@ export function DocumentEdit({
           </button>
           {!isNew && (
             <>
+              <button
+                onClick={() => setShowShareLink(true)}
+                className="inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm text-[var(--muted-foreground)] hover:bg-[var(--muted)] hover:text-[var(--foreground)]"
+                title="Share a signed preview link for the current draft"
+              >
+                <Share2 className="h-4 w-4" />
+                Share preview
+              </button>
               <button
                 onClick={() => setShowVersions(true)}
                 className="inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm text-[var(--muted-foreground)] hover:bg-[var(--muted)] hover:text-[var(--foreground)]"
@@ -379,6 +406,31 @@ export function DocumentEdit({
                         Unpublish
                       </Button>
                     )}
+                    {!isNew && (
+                      <button
+                        onClick={() => setShowSchedule(true)}
+                        className="inline-flex w-full items-center justify-center gap-1.5 rounded-md border border-[var(--border)] bg-white px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-50"
+                      >
+                        <Calendar className="h-4 w-4" />
+                        {scheduledAt || scheduledUnpublishAt ? 'Reschedule' : 'Schedule'}
+                      </button>
+                    )}
+                    {!isNew && (scheduledAt || scheduledUnpublishAt) && (
+                      <div className="space-y-1 rounded-md border border-blue-100 bg-blue-50 px-3 py-2 text-xs text-blue-900">
+                        {scheduledAt && (
+                          <div className="flex items-center gap-1.5">
+                            <Calendar className="h-3.5 w-3.5" />
+                            Publishes {new Date(scheduledAt).toLocaleString()}
+                          </div>
+                        )}
+                        {scheduledUnpublishAt && (
+                          <div className="flex items-center gap-1.5">
+                            <XCircle className="h-3.5 w-3.5" />
+                            Unpublishes {new Date(scheduledUnpublishAt).toLocaleString()}
+                          </div>
+                        )}
+                      </div>
+                    )}
                   </div>
                 </div>
 
@@ -495,6 +547,34 @@ export function DocumentEdit({
           }}
         />
       )}
+
+      {!isNew && documentId && (
+        <SchedulePublishDialog
+          collectionSlug={collectionSlug}
+          documentId={documentId}
+          scheduledAt={scheduledAt}
+          scheduledUnpublishAt={scheduledUnpublishAt}
+          open={showSchedule}
+          onClose={() => setShowSchedule(false)}
+          onScheduled={(next) => {
+            setDocStatus(next.status)
+            setScheduledAt(next.scheduledAt)
+            setScheduledUnpublishAt(next.scheduledUnpublishAt)
+          }}
+        />
+      )}
+
+      {!isNew && documentId && (
+        <SharePreviewLinkDialog
+          collectionSlug={collectionSlug}
+          documentId={documentId}
+          documentSlug={docSlug}
+          siteUrl={config?.siteUrl}
+          urlPrefix={collection?.urlPrefix ?? collectionSlug}
+          open={showShareLink}
+          onClose={() => setShowShareLink(false)}
+        />
+      )}
     </div>
   )
 }