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

package/src/components/StatusBadge.tsx

@@ -0,0 +1,23 @@
+// Status badge for a Vercel deployment state
+import { Badge, Spinner, Flex } from '@sanity/ui'
+import { stateLabel } from '../lib/helpers'
+import type { VercelDeployState } from '../types'
+
+interface StatusBadgeProps {
+	state: VercelDeployState | undefined
+	/** When true, shows a spinner alongside the label */
+	showSpinner?: boolean
+}
+
+export function StatusBadge({ state, showSpinner }: StatusBadgeProps) {
+	const { label, tone } = stateLabel(state)
+	const spinning = showSpinner && (state === 'QUEUED' || state === 'INITIALIZING' || state === 'BUILDING')
+	return (
+		<Flex align="center" gap={2}>
+			{spinning && <Spinner muted />}
+			<Badge tone={tone} mode="outline">
+				{label}
+			</Badge>
+		</Flex>
+	)
+}

package/src/components/TokenSetup.tsx

@@ -0,0 +1,92 @@
+// Vercel API token setup — stores token in secrets.vercelDeploy Sanity document
+import { useState, useCallback } from 'react'
+import { useClient } from 'sanity'
+import {
+	Card, Box, Stack, Text, Heading, TextInput, Button, Flex,
+} from '@sanity/ui'
+import { KeyIcon, CheckmarkCircleIcon } from '@sanity/icons'
+
+interface TokenSetupProps {
+	/** Called after the token is successfully saved */
+	onSaved: () => void
+}
+
+const TOKEN_DOC_ID = 'secrets.vercelDeploy'
+
+export function TokenSetup({ onSaved }: TokenSetupProps) {
+	const client = useClient({ apiVersion: '2025-01-01' })
+	const [token, setToken] = useState('')
+	const [saving, setSaving] = useState(false)
+	const [error, setError] = useState<string | null>(null)
+
+	const save = useCallback(async () => {
+		if (!token.trim()) return
+		setSaving(true)
+		setError(null)
+		try {
+			await client.createOrReplace({
+				_id: TOKEN_DOC_ID,
+				_type: 'vercelDeploy.config',
+				accessToken: token.trim(),
+			})
+			onSaved()
+		} catch (err) {
+			setError(err instanceof Error ? err.message : 'Failed to save token')
+		} finally {
+			setSaving(false)
+		}
+	}, [client, token, onSaved])
+
+	return (
+		<Card height="fill" tone="transparent">
+			<Flex align="center" justify="center" height="fill" padding={6}>
+				<Card padding={5} radius={3} shadow={1} style={{ maxWidth: 480, width: '100%' }}>
+					<Stack space={5}>
+						<Flex align="center" gap={3}>
+							<Text size={3}><KeyIcon /></Text>
+							<Heading size={2}>Connect to Vercel</Heading>
+						</Flex>
+
+						<Stack space={3}>
+							<Text size={1} muted>
+								A Vercel API token is required to read deployment status, history, and build logs.
+								Your token is stored securely in the Sanity dataset under a{' '}
+								<code>secrets.*</code> document ID that is not publicly readable.
+							</Text>
+							<Text size={1} muted>
+								Create a token at{' '}
+								<strong>vercel.com → Settings → Tokens</strong>.
+								Choose <strong>Full Account</strong> scope.
+							</Text>
+						</Stack>
+
+						<Stack space={3}>
+							<Text size={1} weight="semibold">Vercel API Token</Text>
+							<TextInput
+								value={token}
+								onChange={e => setToken((e.target as HTMLInputElement).value)}
+								placeholder="xxxxxxxxxxxxxxxxxxxxxxxx"
+								type="password"
+							/>
+						</Stack>
+
+						{error && (
+							<Card tone="critical" padding={3} radius={2}>
+								<Text size={1}>{error}</Text>
+							</Card>
+						)}
+
+						<Button
+							text="Save and connect"
+							tone="primary"
+							icon={CheckmarkCircleIcon}
+							loading={saving}
+							disabled={!token.trim() || saving}
+							onClick={save}
+						/>
+					</Stack>
+				</Card>
+			</Flex>
+		</Card>
+	)
+}

package/src/index.ts

@@ -0,0 +1,42 @@
+// deploy-vercel-from-sanity — Sanity Studio v5 plugin for Vercel deployments
+import { definePlugin } from 'sanity'
+import { RocketIcon } from '@sanity/icons'
+import { DeployTool } from './components/DeployTool'
+import { vercelDeploySchema } from './schema/vercelDeploy'
+import type { VercelDeployPluginConfig } from './types'
+
+export { vercelDeploySchema } from './schema/vercelDeploy'
+export type { VercelDeployPluginConfig, DeployTarget, VercelDeployment, VercelDeployState } from './types'
+
+/**
+ * Sanity Studio v5 plugin — trigger and monitor Vercel deployments.
+ *
+ * @example
+ * // sanity.config.ts
+ * import { vercelDeploy } from 'deploy-vercel-from-sanity'
+ *
+ * export default defineConfig({
+ *   plugins: [
+ *     vercelDeploy(),
+ *     // or with options:
+ *     vercelDeploy({ title: 'Deploy', name: 'vercel-deploy' }),
+ *   ],
+ * })
+ */
+export const vercelDeploy = definePlugin<VercelDeployPluginConfig | void>(options => {
+	const config = options ?? {}
+	return {
+		name: 'deploy-vercel-from-sanity',
+		schema: {
+			types: [vercelDeploySchema],
+		},
+		tools: [
+			{
+				name: config.name ?? 'vercel-deploy',
+				title: config.title ?? 'Deploy',
+				icon: config.icon ?? RocketIcon,
+				component: DeployTool,
+			},
+		],
+	}
+})

package/src/lib/api.ts

@@ -0,0 +1,59 @@
+// Vercel REST API helpers — all calls require a bearer token
+import type { VercelDeployment } from '../types'
+
+const BASE = 'https://api.vercel.com'
+
+async function vercelFetch<T>(path: string, token: string, init?: RequestInit): Promise<T> {
+	const res = await fetch(`${BASE}${path}`, {
+		...init,
+		headers: {
+			Authorization: `Bearer ${token}`,
+			'Content-Type': 'application/json',
+			...init?.headers,
+		},
+	})
+	if (!res.ok) {
+		const text = await res.text().catch(() => res.statusText)
+		throw new Error(`Vercel API ${res.status}: ${text}`)
+	}
+	return res.json() as Promise<T>
+}
+
+/** Fetch the last N deployments triggered by a specific deploy hook */
+export async function listDeployments(opts: {
+	projectId: string
+	hookId: string
+	token: string
+	teamId?: string
+	limit?: number
+}): Promise<VercelDeployment[]> {
+	const params = new URLSearchParams({
+		projectId: opts.projectId,
+		'meta-deployHookId': opts.hookId,
+		limit: String(opts.limit ?? 10),
+	})
+	if (opts.teamId) params.set('teamId', opts.teamId)
+	const data = await vercelFetch<{ deployments: VercelDeployment[] }>(
+		`/v6/deployments?${params}`,
+		opts.token,
+	)
+	return data.deployments ?? []
+}
+
+/** Cancel an in-progress deployment */
+export async function cancelDeployment(opts: {
+	deploymentId: string
+	token: string
+	teamId?: string
+}): Promise<void> {
+	const params = opts.teamId ? `?teamId=${opts.teamId}` : ''
+	await vercelFetch(`/v12/deployments/${opts.deploymentId}/cancel${params}`, opts.token, {
+		method: 'PATCH',
+	})
+}
+
+/** Trigger a deploy by POSTing to the hook URL — no auth needed */
+export async function triggerDeploy(hookUrl: string): Promise<void> {
+	const res = await fetch(hookUrl, { method: 'POST' })
+	if (!res.ok) throw new Error(`Deploy hook returned ${res.status}`)
+}

package/src/lib/helpers.ts

@@ -0,0 +1,86 @@
+// URL parsing and time formatting utilities
+import type { VercelDeployState } from '../types'
+
+/**
+ * Extracts projectId and hookId from a Vercel deploy hook URL.
+ * Format: https://api.vercel.com/v1/integrations/deploy/{projectId}/{hookId}
+ */
+export function parseHookUrl(url: string): { projectId: string; hookId: string } {
+	try {
+		const path = new URL(url).pathname
+		const parts = path.split('/').filter(Boolean)
+		// parts: ['v1', 'integrations', 'deploy', '{projectId}', '{hookId}']
+		return {
+			projectId: parts[3] ?? '',
+			hookId: parts[4] ?? '',
+		}
+	} catch {
+		return { projectId: '', hookId: '' }
+	}
+}
+
+/** Active states — deployment is in progress and should be polled */
+const ACTIVE_STATES: ReadonlySet<VercelDeployState> = new Set([
+	'QUEUED',
+	'INITIALIZING',
+	'BUILDING',
+])
+
+export function isActiveState(state: VercelDeployState | undefined): boolean {
+	return !!state && ACTIVE_STATES.has(state)
+}
+
+/** Human-readable elapsed duration from a number of seconds */
+export function formatDuration(seconds: number): string {
+	if (seconds < 60) return `${seconds}s`
+	const m = Math.floor(seconds / 60)
+	const s = seconds % 60
+	return `${m}m ${s}s`
+}
+
+/** Human-readable relative time from a Unix ms timestamp */
+export function timeAgo(ms: number): string {
+	const diff = Math.floor((Date.now() - ms) / 1000)
+	if (diff < 60) return `${diff}s ago`
+	if (diff < 3600) return `${Math.floor(diff / 60)}m ago`
+	if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`
+	return `${Math.floor(diff / 86400)}d ago`
+}
+
+/**
+ * Validates a URL is safe to use as an href.
+ * Rejects anything that isn't http/https to block javascript: injection
+ * from a compromised API response.
+ */
+export function safeHref(url: string | undefined): string | undefined {
+	if (!url) return undefined
+	try {
+		const parsed = new URL(url)
+		if (parsed.protocol !== 'https:' && parsed.protocol !== 'http:') return undefined
+		return url
+	} catch {
+		return undefined
+	}
+}
+
+/** Truncates a commit SHA to 7 chars */
+export function shortSha(sha: string | undefined): string {
+	return sha ? sha.slice(0, 7) : ''
+}
+
+/** Returns a label and tone for a Vercel deployment state */
+export function stateLabel(state: VercelDeployState | undefined): {
+	label: string
+	tone: 'positive' | 'caution' | 'critical' | 'default'
+} {
+	switch (state) {
+		case 'READY':       return { label: 'Ready',        tone: 'positive' }
+		case 'BUILDING':    return { label: 'Building',     tone: 'caution' }
+		case 'QUEUED':      return { label: 'Queued',       tone: 'caution' }
+		case 'INITIALIZING':return { label: 'Initializing', tone: 'caution' }
+		case 'ERROR':       return { label: 'Error',        tone: 'critical' }
+		case 'CANCELED':    return { label: 'Canceled',     tone: 'default' }
+		case 'LOADING':     return { label: 'Loading…',     tone: 'default' }
+		default:            return { label: 'Unknown',      tone: 'default' }
+	}
+}

package/src/schema/vercelDeploy.ts

@@ -0,0 +1,49 @@
+// Sanity schema for vercel_deploy documents — stores deploy hook targets
+import { defineField, defineType } from 'sanity'
+import { RocketIcon } from '@sanity/icons'
+
+export const vercelDeploySchema = defineType({
+	name: 'vercel_deploy',
+	title: 'Deploy Target',
+	type: 'document',
+	icon: RocketIcon,
+	fields: [
+		defineField({
+			name: 'name',
+			title: 'Name',
+			type: 'string',
+			description: 'Display label shown in the Deploy tool (e.g. "Production", "Staging")',
+			validation: Rule => Rule.required(),
+		}),
+		defineField({
+			name: 'url',
+			title: 'Deploy Hook URL',
+			type: 'url',
+			description: 'From Vercel → Project Settings → Git → Deploy Hooks',
+			validation: Rule =>
+				Rule.required().uri({ scheme: ['https'] }).custom(url => {
+					if (typeof url !== 'string') return true
+					if (!url.includes('api.vercel.com/v1/integrations/deploy/')) {
+						return 'Must be a Vercel deploy hook URL (api.vercel.com/v1/integrations/deploy/…)'
+					}
+					return true
+				}),
+		}),
+		defineField({
+			name: 'teamId',
+			title: 'Vercel Team ID',
+			type: 'string',
+			description: 'Required for team-owned projects — find it in Vercel Team Settings',
+		}),
+		defineField({
+			name: 'disableDeleteAction',
+			title: 'Prevent deletion',
+			type: 'boolean',
+			description: 'Lock this target so it cannot be deleted from the Studio',
+			initialValue: false,
+		}),
+	],
+	preview: {
+		select: { title: 'name', subtitle: 'url' },
+	},
+})

package/src/types.ts

@@ -0,0 +1,63 @@
+// TypeScript types for deploy-vercel-from-sanity
+
+export type VercelDeployState =
+	| 'QUEUED'
+	| 'INITIALIZING'
+	| 'BUILDING'
+	| 'READY'
+	| 'ERROR'
+	| 'CANCELED'
+	| 'LOADING' // internal — before first API response
+
+/** A vercel_deploy document stored in the Sanity dataset */
+export interface DeployTarget {
+	_id: string
+	_type: 'vercel_deploy'
+	name: string
+	/** Full Vercel deploy hook URL */
+	url: string
+	/** Vercel team ID — optional, only needed for team projects */
+	teamId?: string
+	/** Prevent editors from deleting this target */
+	disableDeleteAction?: boolean
+}
+
+/** A single deployment returned by GET /v6/deployments */
+export interface VercelDeployment {
+	uid: string
+	/** Preview hostname, e.g. my-project-abc123.vercel.app */
+	url: string
+	state: VercelDeployState
+	/** Unix ms timestamp */
+	created: number
+	/** Link to the Vercel dashboard page for this deployment */
+	inspectorUrl?: string
+	creator?: {
+		uid: string
+		username: string
+		avatar?: string
+	}
+	meta?: {
+		githubCommitMessage?: string
+		githubCommitRef?: string
+		githubCommitSha?: string
+		githubCommitAuthorName?: string
+	}
+}
+
+/** Vercel secrets document stored at _id: 'secrets.vercelDeploy' */
+export interface VercelSecrets {
+	_id: 'secrets.vercelDeploy'
+	_type: 'vercelDeploy.config'
+	accessToken: string
+}
+
+/** Plugin configuration options */
+export interface VercelDeployPluginConfig {
+	/** Tool name slug shown in Studio sidebar (default: 'vercel-deploy') */
+	name?: string
+	/** Tool label shown in Studio sidebar (default: 'Deploy') */
+	title?: string
+	/** Custom icon component */
+	icon?: React.ComponentType
+}