@liiift-studio/deploy-vercel-from-sanity 0.1.1

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@liiift-studio/deploy-vercel-from-sanity",
+  "version": "0.1.1",
+  "description": "Sanity Studio v5 plugin — trigger and monitor Vercel deployments with full status, history, and build logs",
+  "license": "MIT",
+  "author": "Liiift Studio",
+  "keywords": ["sanity", "sanity-plugin", "vercel", "deploy", "deployment"],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": ["dist", "src"],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "sanity": ">=5"
+  },
+  "devDependencies": {
+    "@sanity/icons": "^3",
+    "@sanity/ui": "^3",
+    "@types/react": "^19",
+    "react": "^19",
+    "sanity": "^5",
+    "tsup": "^8",
+    "typescript": "^5"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Liiift-Studio/Deploy-Vercel-from-Sanity"
+  }
+}

package/src/components/DeployHistory.tsx

@@ -0,0 +1,157 @@
+// Deployment history modal — shows last 10 deployments for a target
+import { useEffect, useState, useCallback } from 'react'
+import {
+	Dialog, Card, Box, Stack, Flex, Text, Badge, Spinner, Button,
+} from '@sanity/ui'
+import { LaunchIcon, CloseIcon } from '@sanity/icons'
+import { listDeployments } from '../lib/api'
+import { parseHookUrl, stateLabel, timeAgo, shortSha, safeHref } from '../lib/helpers'
+import type { DeployTarget, VercelDeployment } from '../types'
+
+interface DeployHistoryProps {
+	target: DeployTarget
+	token: string
+	onClose: () => void
+}
+
+export function DeployHistory({ target, token, onClose }: DeployHistoryProps) {
+	const [deployments, setDeployments] = useState<VercelDeployment[]>([])
+	const [loading, setLoading] = useState(true)
+	const [error, setError] = useState<string | null>(null)
+
+	const { projectId, hookId } = parseHookUrl(target.url)
+
+	const load = useCallback(async () => {
+		setLoading(true)
+		setError(null)
+		try {
+			const data = await listDeployments({ projectId, hookId, token, teamId: target.teamId, limit: 10 })
+			setDeployments(data)
+		} catch (err) {
+			setError(err instanceof Error ? err.message : 'Failed to load history')
+		} finally {
+			setLoading(false)
+		}
+	}, [projectId, hookId, token, target.teamId])
+
+	useEffect(() => { load() }, [load])
+
+	return (
+		<Dialog
+			header={`${target.name} — Deployment History`}
+			id="deploy-history"
+			onClose={onClose}
+			width={2}
+			footer={
+				<Box padding={3}>
+					<Button text="Close" icon={CloseIcon} mode="ghost" onClick={onClose} />
+				</Box>
+			}
+		>
+			<Box padding={4}>
+				{loading && (
+					<Flex justify="center" padding={6}>
+						<Spinner muted />
+					</Flex>
+				)}
+
+				{error && (
+					<Card tone="critical" padding={4} radius={2}>
+						<Text size={1}>{error}</Text>
+					</Card>
+				)}
+
+				{!loading && !error && deployments.length === 0 && (
+					<Card tone="transparent" padding={4}>
+						<Text size={1} muted align="center">No deployments found for this hook.</Text>
+					</Card>
+				)}
+
+				{!loading && deployments.length > 0 && (
+					<Stack space={2}>
+						{/* Column headers */}
+						<Card padding={3} radius={2} tone="transparent">
+							<Flex gap={3}>
+								<Box flex={2}><Text size={0} weight="semibold" muted>Preview URL</Text></Box>
+								<Box flex={1}><Text size={0} weight="semibold" muted>Status</Text></Box>
+								<Box flex={2}><Text size={0} weight="semibold" muted>Branch · Commit</Text></Box>
+								<Box flex={1}><Text size={0} weight="semibold" muted>Deployed</Text></Box>
+								<Box style={{ width: 64 }}><Text size={0} weight="semibold" muted>Logs</Text></Box>
+							</Flex>
+						</Card>
+
+						{deployments.map(d => {
+							const { label, tone } = stateLabel(d.state)
+							const branch = d.meta?.githubCommitRef ?? '—'
+							const sha = shortSha(d.meta?.githubCommitSha)
+							const message = d.meta?.githubCommitMessage?.split('\n')[0] ?? ''
+
+							return (
+								<Card key={d.uid} padding={3} radius={2} shadow={1} tone="default">
+									<Flex gap={3} align="center">
+										{/* Preview URL */}
+										<Box flex={2} style={{ overflow: 'hidden' }}>
+											{d.url ? (
+												<a
+													href={`https://${d.url}`}
+													target="_blank"
+													rel="noreferrer"
+													style={{ color: 'inherit' }}
+												>
+													<Text size={1} style={{ textDecoration: 'underline' }}>
+														{d.url.length > 36 ? `${d.url.slice(0, 36)}…` : d.url}
+													</Text>
+												</a>
+											) : (
+												<Text size={1} muted>—</Text>
+											)}
+										</Box>
+
+										{/* Status */}
+										<Box flex={1}>
+											<Badge tone={tone} mode="outline">{label}</Badge>
+										</Box>
+
+										{/* Branch + commit */}
+										<Box flex={2} style={{ overflow: 'hidden' }}>
+											<Stack space={1}>
+												<Text size={1}>{branch}</Text>
+												{sha && (
+													<Text size={0} muted>
+														{sha}{message ? ` · ${message.slice(0, 40)}${message.length > 40 ? '…' : ''}` : ''}
+													</Text>
+												)}
+											</Stack>
+										</Box>
+
+										{/* Time */}
+										<Box flex={1}>
+											<Text size={1} muted>{timeAgo(d.created)}</Text>
+										</Box>
+
+										{/* Build logs link */}
+										<Box style={{ width: 64 }}>
+											{safeHref(d.inspectorUrl) ? (
+												<a href={safeHref(d.inspectorUrl)} target="_blank" rel="noreferrer">
+													<Button
+														text="Logs"
+														mode="ghost"
+														tone="default"
+														icon={LaunchIcon}
+														style={{ fontSize: '12px' }}
+													/>
+												</a>
+											) : (
+												<Text size={1} muted>—</Text>
+											)}
+										</Box>
+									</Flex>
+								</Card>
+							)
+						})}
+					</Stack>
+				)}
+			</Box>
+		</Dialog>
+	)
+}

package/src/components/DeployItem.tsx

@@ -0,0 +1,298 @@
+// Per-deploy-target card — shows status, build timer, history, cancel, and deploy
+import { useState, useEffect, useCallback, useRef } from 'react'
+import {
+	Card, Box, Stack, Flex, Text, Button, Tooltip, Badge, Spinner, MenuButton, Menu, MenuItem,
+} from '@sanity/ui'
+import {
+	RocketIcon, ClockIcon, HistoryIcon, TrashIcon, EllipsisVerticalIcon, LaunchIcon,
+} from '@sanity/icons'
+import { listDeployments, cancelDeployment, triggerDeploy } from '../lib/api'
+import { parseHookUrl, isActiveState, formatDuration, timeAgo, shortSha, safeHref } from '../lib/helpers'
+import { StatusBadge } from './StatusBadge'
+import { DeployHistory } from './DeployHistory'
+import type { DeployTarget, VercelDeployment } from '../types'
+
+const POLL_INTERVAL_MS = 5_000
+
+interface DeployItemProps {
+	target: DeployTarget
+	token: string
+	onDelete: (target: DeployTarget) => void
+}
+
+export function DeployItem({ target, token, onDelete }: DeployItemProps) {
+	const { projectId, hookId } = parseHookUrl(target.url)
+
+	const [deployments, setDeployments] = useState<VercelDeployment[]>([])
+	const [loadingInitial, setLoadingInitial] = useState(true)
+	const [triggering, setTriggering] = useState(false) // hook fired, waiting for deploy to appear
+	const [canceling, setCanceling] = useState(false)
+	const [deployError, setDeployError] = useState<string | null>(null)
+	const [showHistory, setShowHistory] = useState(false)
+	const [elapsed, setElapsed] = useState(0) // build timer in seconds
+
+	const latest = deployments[0]
+	const isActive = triggering || isActiveState(latest?.state)
+
+	// ── Fetch deployments ──────────────────────────────────────────────────────
+	const fetchDeployments = useCallback(async () => {
+		if (!projectId || !hookId || !token) return
+		try {
+			const data = await listDeployments({ projectId, hookId, token, teamId: target.teamId })
+			setDeployments(data)
+		} catch (err) {
+			console.error('deploy-vercel-from-sanity: fetch error', err)
+		}
+	}, [projectId, hookId, token, target.teamId])
+
+	// Initial fetch
+	useEffect(() => {
+		fetchDeployments().finally(() => setLoadingInitial(false))
+	}, [fetchDeployments])
+
+	// Polling while active
+	useEffect(() => {
+		if (!isActive) return
+		const id = setInterval(fetchDeployments, POLL_INTERVAL_MS)
+		return () => clearInterval(id)
+	}, [isActive, fetchDeployments])
+
+	// Stop triggering once a deployment appears in an active state
+	useEffect(() => {
+		if (triggering && latest && latest.state !== undefined) {
+			setTriggering(false)
+		}
+	}, [triggering, latest])
+
+	// ── Build timer ───────────────────────────────────────────────────────────
+	const timerRef = useRef<ReturnType<typeof setInterval> | null>(null)
+	useEffect(() => {
+		if (isActive) {
+			const start = latest?.created ?? Date.now()
+			setElapsed(Math.floor((Date.now() - start) / 1000))
+			timerRef.current = setInterval(() => {
+				setElapsed(Math.floor((Date.now() - start) / 1000))
+			}, 1000)
+		} else {
+			setElapsed(0)
+			if (timerRef.current) clearInterval(timerRef.current)
+		}
+		return () => {
+			if (timerRef.current) clearInterval(timerRef.current)
+		}
+	}, [isActive, latest?.created])
+
+	// ── Actions ───────────────────────────────────────────────────────────────
+	const deploy = useCallback(async () => {
+		setDeployError(null)
+		setTriggering(true)
+		try {
+			await triggerDeploy(target.url)
+			// Poll immediately to pick up the new deployment faster
+			setTimeout(fetchDeployments, 2000)
+		} catch (err) {
+			setTriggering(false)
+			setDeployError(err instanceof Error ? err.message : 'Deploy failed')
+		}
+	}, [target.url, fetchDeployments])
+
+	const cancel = useCallback(async () => {
+		if (!latest?.uid) return
+		setCanceling(true)
+		try {
+			await cancelDeployment({ deploymentId: latest.uid, token, teamId: target.teamId })
+			await fetchDeployments()
+		} catch (err) {
+			console.error('deploy-vercel-from-sanity: cancel error', err)
+		} finally {
+			setCanceling(false)
+		}
+	}, [latest?.uid, token, target.teamId, fetchDeployments])
+
+	// ── Derived display values ────────────────────────────────────────────────
+	const branch = latest?.meta?.githubCommitRef
+	const commitMsg = latest?.meta?.githubCommitMessage?.split('\n')[0]
+	const sha = shortSha(latest?.meta?.githubCommitSha)
+	const creator = latest?.creator?.username
+	const deployedAt = latest?.created ? timeAgo(latest.created) : null
+
+	return (
+		<>
+			<Card padding={4} radius={2} shadow={1} tone="default">
+				<Stack space={4}>
+					{/* ── Header ──────────────────────────────────────────────── */}
+					<Flex align="flex-start" justify="space-between" gap={3}>
+						<Stack space={2} flex={1}>
+							<Text size={2} weight="semibold">{target.name}</Text>
+							<Flex gap={2} wrap="wrap">
+								<Text size={0} muted>
+									{projectId ? `${projectId.slice(0, 18)}…` : '—'}
+								</Text>
+								<Text size={0} muted>·</Text>
+								<Text size={0} muted>Hook: {hookId || '—'}</Text>
+								{target.teamId && (
+									<>
+										<Text size={0} muted>·</Text>
+										<Text size={0} muted>Team: {target.teamId}</Text>
+									</>
+								)}
+							</Flex>
+						</Stack>
+
+						{/* Action menu */}
+						<MenuButton
+							button={
+								<Button mode="ghost" icon={EllipsisVerticalIcon} />
+							}
+							id={`menu-${target._id}`}
+							menu={
+								<Menu>
+									<MenuItem
+										text="History"
+										icon={HistoryIcon}
+										onClick={() => setShowHistory(true)}
+									/>
+									{safeHref(latest?.inspectorUrl) && (
+										<MenuItem
+											text="Build logs"
+											icon={LaunchIcon}
+											as="a"
+											href={safeHref(latest?.inspectorUrl)}
+											target="_blank"
+											rel="noreferrer"
+										/>
+									)}
+									{!target.disableDeleteAction && (
+										<MenuItem
+											text="Delete"
+											icon={TrashIcon}
+											tone="critical"
+											onClick={() => onDelete(target)}
+										/>
+									)}
+								</Menu>
+							}
+							popover={{ placement: 'bottom-end' }}
+						/>
+					</Flex>
+
+					{/* ── Status row ──────────────────────────────────────────── */}
+					{loadingInitial ? (
+						<Flex align="center" gap={2}>
+							<Spinner muted />
+							<Text size={1} muted>Loading…</Text>
+						</Flex>
+					) : (
+						<Stack space={3}>
+							<Flex align="center" gap={3} wrap="wrap">
+								{/* Status badge */}
+								{triggering ? (
+									<Flex align="center" gap={2}>
+										<Spinner muted />
+										<Badge tone="caution" mode="outline">Triggering…</Badge>
+									</Flex>
+								) : (
+									<StatusBadge state={latest?.state} showSpinner />
+								)}
+
+								{/* Build timer */}
+								{isActive && elapsed > 0 && (
+									<Flex align="center" gap={1}>
+										<ClockIcon />
+										<Text size={1} muted>{formatDuration(elapsed)}</Text>
+									</Flex>
+								)}
+
+								{/* Time since deploy */}
+								{!isActive && deployedAt && (
+									<Text size={1} muted>{deployedAt}</Text>
+								)}
+
+								{/* Branch */}
+								{branch && (
+									<>
+										<Text size={1} muted>·</Text>
+										<Badge tone="default" mode="outline">{branch}</Badge>
+									</>
+								)}
+
+								{/* Commit */}
+								{sha && (
+									<Tooltip
+										content={
+											<Box padding={2}>
+												<Text size={1}>{commitMsg ?? sha}</Text>
+											</Box>
+										}
+										portal
+									>
+										<Text size={1} muted style={{ cursor: 'default' }}>
+											{sha}
+										</Text>
+									</Tooltip>
+								)}
+
+								{/* Creator */}
+								{creator && (
+									<Text size={1} muted>by {creator}</Text>
+								)}
+
+								{/* Preview link */}
+								{latest?.url && latest.state === 'READY' && (
+									<a
+										href={`https://${latest.url}`}
+										target="_blank"
+										rel="noreferrer"
+										style={{ color: 'inherit' }}
+									>
+										<Flex align="center" gap={1}>
+											<LaunchIcon />
+											<Text size={1}>Preview</Text>
+										</Flex>
+									</a>
+								)}
+							</Flex>
+
+							{/* Error message from commit meta */}
+							{deployError && (
+								<Card tone="critical" padding={2} radius={2}>
+									<Text size={1}>{deployError}</Text>
+								</Card>
+							)}
+						</Stack>
+					)}
+
+					{/* ── Action buttons ──────────────────────────────────────── */}
+					<Flex align="center" justify="flex-end" gap={2}>
+						{isActiveState(latest?.state) && (
+							<Button
+								text="Cancel"
+								mode="ghost"
+								tone="critical"
+								loading={canceling}
+								disabled={canceling}
+								onClick={cancel}
+							/>
+						)}
+						<Button
+							text="Deploy"
+							tone="primary"
+							icon={RocketIcon}
+							loading={triggering}
+							disabled={isActive}
+							onClick={deploy}
+						/>
+					</Flex>
+				</Stack>
+			</Card>
+
+			{showHistory && (
+				<DeployHistory
+					target={target}
+					token={token}
+					onClose={() => setShowHistory(false)}
+				/>
+			)}
+		</>
+	)
+}

package/src/components/DeployTool.tsx

@@ -0,0 +1,184 @@
+// Main deploy tool — fetches targets + token, renders per-project cards
+import { useState, useEffect, useCallback } from 'react'
+import { useClient } from 'sanity'
+import {
+	Card, Box, Stack, Flex, Text, Heading, Spinner, Button, Dialog, useToast,
+} from '@sanity/ui'
+import { RocketIcon, KeyIcon, TrashIcon, WarningOutlineIcon } from '@sanity/icons'
+import { DeployItem } from './DeployItem'
+import { TokenSetup } from './TokenSetup'
+import type { DeployTarget } from '../types'
+
+const TOKEN_QUERY = `*[_id == "secrets.vercelDeploy"][0].accessToken`
+const TARGETS_QUERY = `*[_type == "vercel_deploy"] | order(_createdAt asc)`
+
+export function DeployTool() {
+	const client = useClient({ apiVersion: '2025-01-01' })
+	const toast = useToast()
+
+	const [token, setToken] = useState<string | null>(null)
+	const [targets, setTargets] = useState<DeployTarget[]>([])
+	const [loading, setLoading] = useState(true)
+	const [showTokenSetup, setShowTokenSetup] = useState(false)
+	const [pendingDelete, setPendingDelete] = useState<DeployTarget | null>(null)
+	const [deleting, setDeleting] = useState(false)
+
+	// ── Fetch token + targets ─────────────────────────────────────────────────
+	const load = useCallback(async () => {
+		setLoading(true)
+		try {
+			const [fetchedToken, fetchedTargets] = await Promise.all([
+				client.fetch<string | null>(TOKEN_QUERY),
+				client.fetch<DeployTarget[]>(TARGETS_QUERY),
+			])
+			setToken(fetchedToken ?? null)
+			setTargets(fetchedTargets)
+		} catch (err) {
+			console.error('deploy-vercel-from-sanity: load error', err)
+		} finally {
+			setLoading(false)
+		}
+	}, [client])
+
+	useEffect(() => { load() }, [load])
+
+	// Live subscription — update targets when documents change
+	useEffect(() => {
+		const sub = client
+			.listen<DeployTarget>(TARGETS_QUERY)
+			.subscribe(() => {
+				client.fetch<DeployTarget[]>(TARGETS_QUERY).then(setTargets).catch(err => {
+					console.error('deploy-vercel-from-sanity: subscription refresh error', err)
+				})
+			})
+		return () => sub.unsubscribe()
+	}, [client])
+
+	// ── Delete target ─────────────────────────────────────────────────────────
+	const confirmDelete = useCallback(async () => {
+		if (!pendingDelete) return
+		setDeleting(true)
+		try {
+			await client.delete(pendingDelete._id)
+			setTargets(prev => prev.filter(t => t._id !== pendingDelete._id))
+			toast.push({ status: 'success', title: `Deleted "${pendingDelete.name}"` })
+		} catch (err) {
+			toast.push({ status: 'error', title: 'Delete failed', description: String(err) })
+		} finally {
+			setDeleting(false)
+			setPendingDelete(null)
+		}
+	}, [client, pendingDelete, toast])
+
+	// ── Render ────────────────────────────────────────────────────────────────
+	if (loading) {
+		return (
+			<Card height="fill" tone="transparent">
+				<Flex align="center" justify="center" height="fill">
+					<Spinner muted />
+				</Flex>
+			</Card>
+		)
+	}
+
+	if (!token && !showTokenSetup) {
+		return <TokenSetup onSaved={() => { setShowTokenSetup(false); load() }} />
+	}
+
+	if (showTokenSetup) {
+		return (
+			<TokenSetup
+				onSaved={() => {
+					setShowTokenSetup(false)
+					load()
+				}}
+			/>
+		)
+	}
+
+	return (
+		<Card height="fill" tone="transparent">
+			<Box padding={5}>
+				<Stack space={5}>
+					{/* ── Header ──────────────────────────────────────────────── */}
+					<Flex align="center" justify="space-between">
+						<Flex align="center" gap={3}>
+							<RocketIcon />
+							<Heading size={2}>Deploy</Heading>
+						</Flex>
+						<Button
+							text="API Token"
+							mode="ghost"
+							icon={KeyIcon}
+							fontSize={1}
+							onClick={() => setShowTokenSetup(true)}
+						/>
+					</Flex>
+
+					{/* ── No targets ──────────────────────────────────────────── */}
+					{targets.length === 0 && (
+						<Card padding={5} radius={2} tone="transparent" shadow={1}>
+							<Stack space={3} style={{ textAlign: 'center' }}>
+								<Text size={2} weight="semibold">No deploy targets configured</Text>
+								<Text size={1} muted>
+									Create a <code>vercel_deploy</code> document in the dataset with a Vercel deploy
+									hook URL, or add one via the Sanity CLI.
+								</Text>
+							</Stack>
+						</Card>
+					)}
+
+					{/* ── Deploy targets ──────────────────────────────────────── */}
+					{token && targets.map(target => (
+						<DeployItem
+							key={target._id}
+							target={target}
+							token={token}
+							onDelete={setPendingDelete}
+						/>
+					))}
+				</Stack>
+			</Box>
+
+			{/* ── Delete confirmation ─────────────────────────────────────────── */}
+			{pendingDelete && (
+				<Dialog
+					header="Delete deploy target?"
+					id="confirm-delete"
+					onClose={() => setPendingDelete(null)}
+					width={1}
+					footer={
+						<Flex padding={3} gap={2} justify="flex-end">
+							<Button
+								text="Cancel"
+								mode="ghost"
+								onClick={() => setPendingDelete(null)}
+							/>
+							<Button
+								text="Delete"
+								tone="critical"
+								icon={TrashIcon}
+								loading={deleting}
+								disabled={deleting}
+								onClick={confirmDelete}
+							/>
+						</Flex>
+					}
+				>
+					<Box padding={4}>
+						<Stack space={3}>
+							<Flex align="center" gap={2}>
+								<WarningOutlineIcon />
+								<Text size={2} weight="semibold">{pendingDelete.name}</Text>
+							</Flex>
+							<Text size={1} muted>
+								This removes the deploy target from the dataset. The Vercel deploy hook itself is
+								not affected.
+							</Text>
+						</Stack>
+					</Box>
+				</Dialog>
+			)}
+		</Card>
+	)
+}