@liiift-studio/deploy-vercel-from-sanity 1.1.0 → 1.2.0

package/src/lib/api.ts

@@ -55,10 +55,16 @@ export async function cancelDeployment(opts: {
 	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',
-	})
+	// teamId is free text from the target document — encode it rather than splicing it in raw,
+	// or an '&' injects extra parameters into an authenticated request.
+	const params = new URLSearchParams()
+	if (opts.teamId) params.set('teamId', opts.teamId)
+	const query = params.toString() ? `?${params}` : ''
+	await vercelFetch(
+		`/v12/deployments/${encodeURIComponent(opts.deploymentId)}/cancel${query}`,
+		opts.token,
+		{ method: 'PATCH' },
+	)
 }
 
 /**

package/src/lib/helpers.ts

@@ -63,6 +63,23 @@ export function safeHref(url: string | undefined): string | undefined {
 	}
 }
 
+/**
+ * Builds a validated https URL from a Vercel deployment hostname.
+ *
+ * The API returns a bare host, so concatenating it fixes only the scheme —
+ * a value like `@evil.com` yields `https://@evil.com`, which navigates to an
+ * attacker-chosen host. Round-tripping through URL and checking the host was
+ * not rewritten closes that.
+ *
+ * @param host Deployment hostname from the Vercel API, e.g. `my-app-abc123.vercel.app`.
+ */
+export function deploymentHref(host: string | undefined): string | undefined {
+	if (!host) return undefined
+	// Reject anything carrying credentials, a scheme, a port or a path — a plain host only.
+	if (!/^[a-z0-9.-]+$/i.test(host)) return undefined
+	return safeHref(`https://${host}`)
+}
+
 /** Truncates a commit SHA to 7 chars */
 export function shortSha(sha: string | undefined): string {
 	return sha ? sha.slice(0, 7) : ''

package/src/schema/schemaIcon.tsx

@@ -0,0 +1,38 @@
+// Eager rocket glyph for schema icons — Studio serialises these with renderToString, which cannot resolve a lazy component
+import { forwardRef } from 'react'
+import type { SVGProps } from 'react'
+
+/**
+ * Static copy of Sanity's rocket glyph.
+ *
+ * Schema type icons are rendered through `renderToString` when the Studio
+ * publishes its schema to Canvas/Create. On @sanity/icons v5 the resolved icon is
+ * a `React.lazy` component behind Suspense, and a synchronous server render
+ * cannot resolve a dynamic import — so the published icon comes out blank. This
+ * eager component sidesteps that for the one place it matters. Artwork is MIT,
+ * from @sanity/icons.
+ */
+export const SchemaRocketIcon = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>(
+	function SchemaRocketIcon(props, ref) {
+		return (
+			<svg
+				width="1em"
+				height="1em"
+				viewBox="0 0 25 25"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+				aria-hidden="true"
+				focusable="false"
+				{...props}
+				ref={ref}
+			>
+				<path
+					d="M12.5 20.5L15.5 14M11 9.49999L4.5 12.5M9 14C9 14 7.54688 14.9531 6.5 16C5.5 17 4.5 20.5 4.5 20.5C4.5 20.5 8 19.5 9 18.5C10 17.5 11 16 11 16M9 14C9 14 10.1 9.9 12.5 7.5C15.5 4.5 20.5 4.5 20.5 4.5C20.5 4.5 20.5 9.5 17.5 12.5C15.7492 14.2508 11 16 11 16L9 14ZM16.5 9.99999C16.5 10.8284 15.8284 11.5 15 11.5C14.1716 11.5 13.5 10.8284 13.5 9.99999C13.5 9.17157 14.1716 8.49999 15 8.49999C15.8284 8.49999 16.5 9.17157 16.5 9.99999Z"
+					stroke="currentColor"
+					strokeWidth={1.2}
+					strokeLinejoin="round"
+				/>
+			</svg>
+		)
+	},
+)

package/src/schema/vercelConfig.ts

@@ -0,0 +1,34 @@
+// Sanity schema for the vercelDeploy.config singleton that holds the Vercel API token
+import { defineField, defineType } from 'sanity'
+
+/**
+ * Registers the document the plugin stores its Vercel token in.
+ *
+ * The document was previously written without a registered type, which made it
+ * invisible to Structure, absent from schema extraction, and impossible to
+ * inspect or revoke from inside the Studio. Registering it does not change where
+ * the token lives — see the security note in the README about dataset read
+ * access — but it does make the credential visible and removable.
+ */
+export const vercelConfigSchema = defineType({
+	name: 'vercelDeploy.config',
+	title: 'Vercel Deploy Configuration',
+	type: 'document',
+	fields: [
+		defineField({
+			name: 'accessToken',
+			title: 'Vercel API Token',
+			type: 'string',
+			description:
+				'Readable by anyone who can read this dataset. Delete this document to revoke the stored token.',
+		}),
+	],
+	preview: {
+		select: { token: 'accessToken' },
+		prepare: ({ token }: { token?: string }) => ({
+			title: 'Vercel API Token',
+			// Never render the secret itself in a preview.
+			subtitle: token ? 'Connected' : 'Not set',
+		}),
+	},
+})

package/src/schema/vercelDeploy.ts

@@ -1,12 +1,12 @@
 // Sanity schema for vercel_deploy documents — stores deploy hook targets
 import { defineField, defineType } from 'sanity'
-import { RocketIcon } from '../icons'
+import { SchemaRocketIcon } from './schemaIcon'
 
 export const vercelDeploySchema = defineType({
 	name: 'vercel_deploy',
 	title: 'Deploy Target',
 	type: 'document',
-	icon: RocketIcon,
+	icon: SchemaRocketIcon,
 	fields: [
 		defineField({
 			name: 'name',

package/src/version.ts

@@ -1,2 +1,2 @@
 // Package version — keep in sync with package.json
-export const VERSION = '1.1.0'
+export const VERSION = '1.2.0'

package/src/ui.tsx

@@ -1,337 +0,0 @@
-// Version-agnostic access to the @sanity/ui components that v4 moved out of the barrel, with local fallbacks
-import { useCallback, useEffect, useRef, useState } from 'react'
-import type { CSSProperties, ReactNode } from 'react'
-import * as sanityUi from '@sanity/ui'
-import { Box, Button, Card, Flex, Stack as SanityStack, Text } from '@sanity/ui'
-
-/**
- * The installed @sanity/ui namespace, read through an index signature.
- *
- * @sanity/ui v4 relocated Tooltip, Menu, MenuButton, MenuItem, Code, Popover and
- * useToast into subpath entry points (`@sanity/ui/tooltip`, `/menu`, …) and dropped
- * them from the root barrel. Those subpaths do not exist on v2 or v3, so a static
- * import of either shape breaks half the supported Studio range. Reading the barrel
- * dynamically lets one build prefer the real components wherever they are still
- * exported and fall back to the local equivalents below when they are not.
- */
-const INSTALLED = sanityUi as unknown as Record<string, unknown>
-
-/* ------------------------------------------------------------------ stack -- */
-
-/**
- * Whether the installed @sanity/ui is v4 or newer.
- *
- * v4 both emptied the barrel of Tooltip/Menu/Code/useToast and renamed Stack's
- * `space` prop to `gap` (the old name is typed `never` and ignored at runtime, so
- * passing it silently collapses all vertical spacing). Those landed in the same
- * major, so the absence of `useToast` from the barrel identifies v4+ reliably.
- */
-const IS_UI_V4_PLUS = !('useToast' in INSTALLED)
-
-/** Props for the compat Stack — keeps the pre-v4 `space` name at every call site. */
-export type StackProps = {
-	space?: number
-	children: ReactNode
-	[key: string]: unknown
-}
-
-/**
- * Vertical stack. Forwards `space` on @sanity/ui v2 and v3 and `gap` on v4+, so one
- * call site spells spacing correctly on either major.
- *
- * @param space Spacing step on Sanity's scale, forwarded under whichever name applies.
- */
-export function Stack({ space, children, ...rest }: StackProps): React.JSX.Element {
-	const spacing = space === undefined ? {} : IS_UI_V4_PLUS ? { gap: space } : { space }
-	const Component = SanityStack as unknown as React.ComponentType<Record<string, unknown>>
-	return <Component {...rest} {...spacing}>{children}</Component>
-}
-
-/* ------------------------------------------------------------------ toast -- */
-
-/** A toast request, matching the subset of @sanity/ui's ToastParams this plugin uses. */
-export type ToastParams = {
-	status?: 'success' | 'error' | 'warning' | 'info'
-	title?: ReactNode
-	description?: ReactNode
-}
-
-/** The object returned by useToast — only `push` is used here. */
-export type Toaster = { push: (params: ToastParams) => void }
-
-/** A queued fallback toast. `id` is a monotonic counter, unique for the session. */
-type LocalToast = ToastParams & { id: number }
-
-/** How long a fallback toast stays on screen, in milliseconds. */
-const LOCAL_TOAST_MS = 5000
-
-/** Border tone per toast status, used only by the fallback viewport. */
-const LOCAL_TOAST_TONE: Record<string, 'positive' | 'critical' | 'caution' | 'primary'> = {
-	success: 'positive',
-	error: 'critical',
-	warning: 'caution',
-	info: 'primary',
-}
-
-let nextToastId = 0
-let localToasts: LocalToast[] = []
-const toastListeners = new Set<(toasts: LocalToast[]) => void>()
-
-/** Publish the current fallback queue to every mounted viewport. */
-function emitToasts(): void {
-	for (const listener of toastListeners) listener(localToasts)
-}
-
-/** Queue a fallback toast and schedule its removal. */
-function pushLocalToast(params: ToastParams): void {
-	const toast: LocalToast = { ...params, id: nextToastId++ }
-	localToasts = [...localToasts, toast]
-	emitToasts()
-	setTimeout(() => {
-		localToasts = localToasts.filter(t => t.id !== toast.id)
-		emitToasts()
-	}, LOCAL_TOAST_MS)
-}
-
-/** The real hook when the installed @sanity/ui still exports it, otherwise undefined. */
-const installedUseToast = INSTALLED.useToast as (() => Toaster) | undefined
-
-/** Stable fallback toaster — identity never changes, so it is safe in dependency arrays. */
-const localToaster: Toaster = { push: pushLocalToast }
-
-/**
- * Push toasts through Studio's toast system where available, or through the local
- * viewport below on @sanity/ui v4+. Mount `<ToastViewport />` once for the fallback
- * to be visible; it renders nothing when the real hook is present.
- */
-export function useToast(): Toaster {
-	const real = installedUseToast
-	// Hook order is stable across renders because `installedUseToast` is module-level.
-	if (real) return real()
-	return localToaster
-}
-
-/**
- * Renders queued fallback toasts. No-op when the installed @sanity/ui exports its
- * own useToast, because Studio's ToastProvider is already handling them.
- */
-export function ToastViewport(): React.JSX.Element | null {
-	const [toasts, setToasts] = useState<LocalToast[]>(localToasts)
-
-	useEffect(() => {
-		if (installedUseToast) return
-		toastListeners.add(setToasts)
-		return () => { toastListeners.delete(setToasts) }
-	}, [])
-
-	if (installedUseToast || toasts.length === 0) return null
-
-	return (
-		<Box style={{ position: 'fixed', bottom: 16, right: 16, zIndex: 1000000, maxWidth: 360 }}>
-			<Stack space={2}>
-				{toasts.map(toast => (
-					<Card
-						key={toast.id}
-						padding={3}
-						radius={2}
-						shadow={3}
-						tone={LOCAL_TOAST_TONE[toast.status ?? 'info'] ?? 'primary'}
-					>
-						<Stack space={2}>
-							{toast.title && <Text size={1} weight="semibold">{toast.title}</Text>}
-							{toast.description && <Text size={1} muted>{toast.description}</Text>}
-						</Stack>
-					</Card>
-				))}
-			</Stack>
-		</Box>
-	)
-}
-
-/* ---------------------------------------------------------------- tooltip -- */
-
-/** Props for the compat Tooltip — plain text rather than @sanity/ui's ReactNode `content`. */
-export type TooltipProps = { text: string; children: ReactNode }
-
-/** The real Tooltip when the installed @sanity/ui still exports it, otherwise undefined. */
-const InstalledTooltip = INSTALLED.Tooltip as
-	| React.ComponentType<{ content: ReactNode; portal?: boolean; children: ReactNode }>
-	| undefined
-
-/**
- * Hover hint over `children`. Uses Studio's Tooltip where available and degrades to
- * the native `title` attribute on @sanity/ui v4+.
- */
-export function Tooltip({ text, children }: TooltipProps): React.JSX.Element {
-	if (InstalledTooltip) {
-		return (
-			<InstalledTooltip content={<Box padding={2}><Text size={1}>{text}</Text></Box>} portal>
-				{children}
-			</InstalledTooltip>
-		)
-	}
-	return <span title={text} style={{ display: 'inline-flex' }}>{children}</span>
-}
-
-/* ------------------------------------------------------------------- menu -- */
-
-/** One entry in an ActionMenu. Either `onClick` or `href` drives the behaviour. */
-export type MenuAction = {
-	text: string
-	icon: React.ComponentType<React.SVGProps<SVGSVGElement>>
-	onClick?: () => void
-	href?: string
-	tone?: 'critical' | 'default'
-}
-
-/** Props for the compat ActionMenu — a declarative item list rather than nested JSX. */
-export type ActionMenuProps = { id: string; items: MenuAction[]; buttonIcon: MenuAction['icon'] }
-
-const InstalledMenuButton = INSTALLED.MenuButton as React.ComponentType<Record<string, unknown>> | undefined
-const InstalledMenu = INSTALLED.Menu as React.ComponentType<Record<string, unknown>> | undefined
-const InstalledMenuItem = INSTALLED.MenuItem as React.ComponentType<Record<string, unknown>> | undefined
-
-/** Whether the installed @sanity/ui still exports the full menu trio. */
-const HAS_INSTALLED_MENU = Boolean(InstalledMenuButton && InstalledMenu && InstalledMenuItem)
-
-/**
- * Overflow menu for a deploy target. Uses Studio's MenuButton where available and
- * falls back to a locally positioned card on @sanity/ui v4+.
- *
- * @param id        Stable DOM id, required by @sanity/ui's MenuButton.
- * @param items     Actions in display order.
- * @param buttonIcon Icon for the trigger button.
- */
-export function ActionMenu({ id, items, buttonIcon }: ActionMenuProps): React.JSX.Element {
-	const [open, setOpen] = useState(false)
-	const wrapRef = useRef<HTMLDivElement>(null)
-
-	// Fallback only — dismiss on outside click or Escape.
-	useEffect(() => {
-		if (HAS_INSTALLED_MENU || !open) return
-		const onPointerDown = (e: MouseEvent) => {
-			if (!wrapRef.current?.contains(e.target as Node)) setOpen(false)
-		}
-		const onKeyDown = (e: KeyboardEvent) => { if (e.key === 'Escape') setOpen(false) }
-		document.addEventListener('mousedown', onPointerDown)
-		document.addEventListener('keydown', onKeyDown)
-		return () => {
-			document.removeEventListener('mousedown', onPointerDown)
-			document.removeEventListener('keydown', onKeyDown)
-		}
-	}, [open])
-
-	const runAction = useCallback((item: MenuAction) => {
-		setOpen(false)
-		item.onClick?.()
-	}, [])
-
-	if (HAS_INSTALLED_MENU && InstalledMenuButton && InstalledMenu && InstalledMenuItem) {
-		const MenuButton = InstalledMenuButton
-		const Menu = InstalledMenu
-		const MenuItem = InstalledMenuItem
-		return (
-			<MenuButton
-				id={id}
-				button={<Button mode="ghost" icon={buttonIcon} padding={2} />}
-				popover={{ placement: 'bottom-end' }}
-				menu={
-					<Menu>
-						{items.map(item => (
-							<MenuItem
-								key={item.text}
-								text={item.text}
-								icon={item.icon}
-								tone={item.tone}
-								{...(item.href
-									? { as: 'a', href: item.href, target: '_blank', rel: 'noreferrer' }
-									: { onClick: () => item.onClick?.() })}
-							/>
-						))}
-					</Menu>
-				}
-			/>
-		)
-	}
-
-	return (
-		<div ref={wrapRef} style={{ position: 'relative' }}>
-			<Button
-				mode="ghost"
-				icon={buttonIcon}
-				padding={2}
-				id={id}
-				aria-haspopup="menu"
-				aria-expanded={open}
-				onClick={() => setOpen(o => !o)}
-			/>
-			{open && (
-				<Card
-					radius={2}
-					shadow={3}
-					padding={1}
-					role="menu"
-					style={{ position: 'absolute', top: '100%', right: 0, marginTop: 4, zIndex: 1000, minWidth: 180 }}
-				>
-					<Stack space={1}>
-						{items.map(item => {
-							const Icon = item.icon
-							const label = (
-								<Flex align="center" gap={2} paddingX={2} paddingY={2}>
-									<Icon width="1em" height="1em" />
-									<Text size={1}>{item.text}</Text>
-								</Flex>
-							)
-							return item.href ? (
-								<a
-									key={item.text}
-									role="menuitem"
-									href={item.href}
-									target="_blank"
-									rel="noreferrer"
-									onClick={() => setOpen(false)}
-									style={{ color: 'inherit', textDecoration: 'none', display: 'block' }}
-								>
-									{label}
-								</a>
-							) : (
-								<Card
-									key={item.text}
-									as="button"
-									role="menuitem"
-									tone={item.tone === 'critical' ? 'critical' : 'default'}
-									radius={1}
-									onClick={() => runAction(item)}
-									style={{ display: 'block', width: '100%', textAlign: 'left', cursor: 'pointer', border: 0, background: 'none' }}
-								>
-									{label}
-								</Card>
-							)
-						})}
-					</Stack>
-				</Card>
-			)}
-		</div>
-	)
-}
-
-/* ------------------------------------------------------------------- code -- */
-
-/** The real Code when the installed @sanity/ui still exports it, otherwise undefined. */
-const InstalledCode = INSTALLED.Code as
-	| React.ComponentType<{ size?: number; style?: CSSProperties; children: ReactNode }>
-	| undefined
-
-/** Monospace styling for the fallback Code element, approximating @sanity/ui's `size={1}`. */
-const FALLBACK_CODE_STYLE: CSSProperties = {
-	fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace',
-	fontSize: '0.8125rem',
-	lineHeight: 1.4,
-	margin: 0,
-}
-
-/** Monospace block. Uses Studio's Code where available, a plain `<code>` on @sanity/ui v4+. */
-export function Code({ style, children }: { style?: CSSProperties; children: ReactNode }): React.JSX.Element {
-	if (InstalledCode) return <InstalledCode size={1} style={style}>{children}</InstalledCode>
-	return <code style={{ ...FALLBACK_CODE_STYLE, ...style }}>{children}</code>
-}