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

package/src/compat/toast.tsx

@@ -1,173 +0,0 @@
-// Toast delivery — Studio's own toast system where available, a local live-region viewport otherwise
-import { useCallback, useEffect, useState } from 'react'
-import type { ReactNode } from 'react'
-import { UI, resolveExport } from './resolve'
-import { Box, Button, Card, Flex, Stack, Text } from './primitives'
-import { CloseIcon } from '../icons'
-
-/** A toast request — 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 non-error fallback toast stays on screen, in milliseconds. */
-const LOCAL_TOAST_MS = 6000
-
-/** Most toasts kept on screen at once; older ones are dropped so the column cannot grow past the viewport. */
-const MAX_VISIBLE_TOASTS = 4
-
-/** Stacking index for the fallback viewport. High enough to clear Studio chrome, since it is not in Sanity's Layer stack. */
-const TOAST_Z_INDEX = 1000000
-
-/** Card 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',
-}
-
-/** Statuses that stay until dismissed — they carry text the user is expected to act on. */
-const PERSISTENT_STATUSES = new Set(['error', 'warning'])
-
-let nextToastId = 0
-let localToasts: LocalToast[] = []
-const toastListeners = new Set<(toasts: LocalToast[]) => void>()
-const dismissTimers = new Map<number, ReturnType<typeof setTimeout>>()
-
-/** Publish the current fallback queue to every mounted viewport. */
-function emitToasts(): void {
-	for (const listener of toastListeners) listener(localToasts)
-}
-
-/** Remove one fallback toast and cancel its pending auto-dismiss. */
-function removeLocalToast(id: number): void {
-	const timer = dismissTimers.get(id)
-	if (timer) {
-		clearTimeout(timer)
-		dismissTimers.delete(id)
-	}
-	localToasts = localToasts.filter(t => t.id !== id)
-	emitToasts()
-}
-
-/** Start (or restart) the auto-dismiss countdown for one toast. Persistent statuses are left alone. */
-function scheduleDismiss(id: number, status: ToastParams['status']): void {
-	if (PERSISTENT_STATUSES.has(status ?? 'info')) return
-	const existing = dismissTimers.get(id)
-	if (existing) clearTimeout(existing)
-	dismissTimers.set(id, setTimeout(() => removeLocalToast(id), LOCAL_TOAST_MS))
-}
-
-/** Queue a fallback toast, trimming the oldest if the column is already full. */
-function pushLocalToast(params: ToastParams): void {
-	const toast: LocalToast = { ...params, id: nextToastId++ }
-	localToasts = [...localToasts, toast].slice(-MAX_VISIBLE_TOASTS)
-	emitToasts()
-	scheduleDismiss(toast.id, toast.status)
-}
-
-/** The real hook when the installed @sanity/ui still exports it, otherwise undefined. */
-const installedUseToast = resolveExport<() => Toaster>(UI, 'useToast')
-
-/** 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
- * {@link ToastViewport} on @sanity/ui v4+.
- *
- * The branch is decided once at module load, so the hook-call order of any
- * component using this is constant across renders.
- */
-export function useToast(): Toaster {
-	const real = installedUseToast
-	if (real) return real()
-	return localToaster
-}
-
-/**
- * Live region for fallback toasts.
- *
- * The wrapper stays mounted and empty when there is nothing to show: assistive
- * tech has to observe a live region *before* content lands in it, so a region
- * created and populated in the same commit is routinely missed. Renders nothing
- * at all when the installed @sanity/ui provides its own toast system.
- */
-export function ToastViewport(): React.JSX.Element | null {
-	const [toasts, setToasts] = useState<LocalToast[]>(localToasts)
-
-	useEffect(() => {
-		if (installedUseToast) return
-		toastListeners.add(setToasts)
-		// Re-read after subscribing: a toast pushed between render and commit would otherwise be missed.
-		setToasts(localToasts)
-		return () => { toastListeners.delete(setToasts) }
-	}, [])
-
-	const hold = useCallback((id: number) => {
-		const timer = dismissTimers.get(id)
-		if (timer) {
-			clearTimeout(timer)
-			dismissTimers.delete(id)
-		}
-	}, [])
-
-	if (installedUseToast) return null
-
-	return (
-		<Box
-			role="status"
-			aria-live="polite"
-			aria-atomic={false}
-			// pointer-events is released so the fixed column cannot swallow clicks on the tool beneath it.
-			style={{
-				position: 'fixed',
-				bottom: 16,
-				right: 16,
-				zIndex: TOAST_Z_INDEX,
-				width: 'min(360px, calc(100vw - 32px))',
-				pointerEvents: 'none',
-			}}
-		>
-			<Stack space={2}>
-				{toasts.map(toast => (
-					<Card
-						key={toast.id}
-						padding={3}
-						radius={2}
-						shadow={3}
-						tone={LOCAL_TOAST_TONE[toast.status ?? 'info'] ?? 'primary'}
-						style={{ pointerEvents: 'auto' }}
-						onMouseEnter={() => hold(toast.id)}
-						onFocusCapture={() => hold(toast.id)}
-						onMouseLeave={() => scheduleDismiss(toast.id, toast.status)}
-					>
-						<Flex align="flex-start" gap={3}>
-							<Stack space={2} flex={1}>
-								{toast.title && <Text size={1} weight="semibold">{toast.title}</Text>}
-								{toast.description && <Text size={1} muted>{toast.description}</Text>}
-							</Stack>
-							<Button
-								mode="bleed"
-								padding={2}
-								icon={CloseIcon}
-								text=""
-								aria-label="Dismiss notification"
-								onClick={() => removeLocalToast(toast.id)}
-							/>
-						</Flex>
-					</Card>
-				))}
-			</Stack>
-		</Box>
-	)
-}

package/src/compat/tooltip.tsx

@@ -1,78 +0,0 @@
-// Hover/focus hint — Studio's Tooltip where available, an accessible local tooltip otherwise
-import { useId, useState } from 'react'
-import type { ReactNode } from 'react'
-import { UI, resolveExport } from './resolve'
-import { Box, Card, Text } from './primitives'
-import type { ComponentType } from 'react'
-
-/** Props for the compat Tooltip — plain text rather than @sanity/ui's ReactNode `content`. */
-export type TooltipProps = {
-	/** Hint text. Also used as the accessible description of the wrapped control. */
-	text: string
-	children: ReactNode
-}
-
-/** The real Tooltip when the installed @sanity/ui still exports it, otherwise undefined. */
-const InstalledTooltip = resolveExport<ComponentType<{
-	content: ReactNode
-	portal?: boolean
-	children: ReactNode
-}>>(UI, 'Tooltip')
-
-/**
- * Hint shown on hover and on keyboard focus.
- *
- * The fallback deliberately does not use the native `title` attribute: `title`
- * never appears on keyboard focus, never appears on touch, cannot be dismissed,
- * and browsers will not re-read it while the pointer is stationary — which
- * silently broke the copy button's "Copied!" confirmation. This renders a real
- * element instead and wires it to the wrapped control via `aria-describedby`,
- * so the text is announced and updates when it changes.
- */
-export function Tooltip({ text, children }: TooltipProps): React.JSX.Element {
-	const id = useId()
-	const [visible, setVisible] = useState(false)
-
-	if (InstalledTooltip) {
-		return (
-			<InstalledTooltip content={<Box padding={2}><Text size={1}>{text}</Text></Box>} portal>
-				{children}
-			</InstalledTooltip>
-		)
-	}
-
-	return (
-		<span
-			style={{ position: 'relative', display: 'inline-flex' }}
-			aria-describedby={id}
-			onMouseEnter={() => setVisible(true)}
-			onMouseLeave={() => setVisible(false)}
-			onFocusCapture={() => setVisible(true)}
-			onBlurCapture={() => setVisible(false)}
-			onKeyDown={e => { if (e.key === 'Escape') setVisible(false) }}
-		>
-			{children}
-			<Card
-				id={id}
-				role="tooltip"
-				radius={2}
-				shadow={2}
-				padding={2}
-				style={{
-					position: 'absolute',
-					bottom: '100%',
-					left: '50%',
-					transform: 'translateX(-50%)',
-					marginBottom: 4,
-					whiteSpace: 'nowrap',
-					pointerEvents: 'none',
-					zIndex: 1000,
-					// Kept in the accessibility tree when hidden so `aria-describedby` still resolves.
-					visibility: visible ? 'visible' : 'hidden',
-				}}
-			>
-				<Text size={1}>{text}</Text>
-			</Card>
-		</span>
-	)
-}

package/src/components/DeployHistory.tsx

@@ -1,160 +0,0 @@
-// Deployment history modal — shows last 10 deployments for a target
-import { useEffect, useState, useCallback } from 'react'
-import { LaunchIcon, CloseIcon } from '../icons'
-import { listDeployments } from '../lib/api'
-import { parseHookUrl, stateLabel, timeAgo, shortSha, safeHref, deploymentHref } from '../lib/helpers'
-import type { DeployTarget, VercelDeployment } from '../types'
-import { Badge, Box, Button, Card, Dialog, Flex, Spinner, Stack, Text } from '../compat'
-
-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' }}>
-											{deploymentHref(d.url) ? (
-												<a
-													href={deploymentHref(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}>{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. Rendered as a link, not a Button inside an anchor:
-										    nesting interactive content in <a> gives two focus stops and Enter
-										    activates the button, which has no handler, so the link never opens
-										    for keyboard users. */}
-										<Box style={{ width: 64 }}>
-											{safeHref(d.inspectorUrl) ? (
-												<Button
-													as="a"
-													href={safeHref(d.inspectorUrl)}
-													target="_blank"
-													rel="noreferrer"
-													text="Logs"
-													mode="ghost"
-													tone="default"
-													icon={LaunchIcon}
-													style={{ fontSize: '12px' }}
-												/>
-											) : (
-												<Text size={1} muted>—</Text>
-											)}
-										</Box>
-									</Flex>
-								</Card>
-							)
-						})}
-					</Stack>
-				)}
-			</Box>
-		</Dialog>
-	)
-}