@podoba/react 0.0.7 → 0.0.8

package/src/components/delivery/download-modal.tsx

@@ -0,0 +1,204 @@
+// @app/ui — delivery download modal (issue 14).
+//
+// PRESENTATIONAL download-confirmation dialog built on the @app/ui <Dialog>
+// (React Aria Modal — focus trap, Esc, aria-modal). The user picks a format
+// (PNG / PDF), confirms, and a `download` delivery job is created. While the
+// job's artifact is generating the modal shows a progress note; once the
+// artifact is ready the modal surfaces a download link to the artifact URL.
+//
+// APP-AGNOSTIC (hard rule #1: @app/ui never imports apps/web or calls API
+// hooks). Every string comes through `labels`; the action is delegated via
+// `onConfirm(format)`; the job status / artifact URL are passed in by the
+// owning surface in apps/web, which wires the i18n strings + the REST mutation
+// (`useDeliveryJobMutations().create`) + invalidation.
+//
+// a11y: the format radiogroup is label-associated; the progress note is
+// role="status"; the server error is role="alert"; confirm shows a pending
+// state and disables while in flight.
+
+import { useState } from 'react'
+import {
+	Label,
+	Radio,
+	RadioGroup,
+	type Key,
+} from 'react-aria-components'
+import { Button } from '../button'
+import { Dialog } from '../dialog'
+
+/** The two download formats a `download` job can produce. */
+export const DOWNLOAD_FORMATS = ['png', 'pdf'] as const
+export type DownloadFormat = (typeof DOWNLOAD_FORMATS)[number]
+
+/** Strings the download modal renders — supplied by the app (i18n), not hardcoded. */
+export interface DownloadModalLabels {
+	/** Dialog heading. */
+	title: string
+	/** Explanatory body copy under the title. */
+	body: string
+	/** Label for the format radiogroup. */
+	formatLabel: string
+	/** Label for the PNG option. */
+	formatPng: string
+	/** Label for the PDF option. */
+	formatPdf: string
+	/** Cancel button. */
+	cancel: string
+	/** Confirm (create download job) button — idle state. */
+	confirm: string
+	/** Confirm button — pending state. */
+	submitting: string
+	/** Progress note while the artifact is generating. */
+	preparing: string
+	/** Download-ready action label (links to the artifact). */
+	download: string
+	/** Note shown once the artifact is ready. */
+	ready: string
+}
+
+export interface DownloadModalProps {
+	/** Controlled open state. */
+	isOpen: boolean
+	/** Notified on open/close (false on Esc / click-outside / cancel). */
+	onOpenChange: (isOpen: boolean) => void
+	/** Create the `download` delivery job for the chosen format. */
+	onConfirm: (format: DownloadFormat) => void
+	/** Whether the confirm mutation is in flight (disables + shows pending). */
+	isPending?: boolean
+	/** Server / mutation error message to surface inline (role="alert"). */
+	error?: string
+	/**
+	 * Once the job is created and its artifact is ready, the URL to download.
+	 * While null/undefined the modal shows the create form (or the preparing
+	 * note when `isPreparing`).
+	 */
+	artifactUrl?: string | null
+	/** Whether a created job's artifact is still generating (shows the progress note). */
+	isPreparing?: boolean
+	/** App-supplied i18n strings. */
+	labels: DownloadModalLabels
+	/** Optional test id forwarded to the dialog. */
+	'data-testid'?: string
+}
+
+/** Download modal with a PNG/PDF format choice and a ready-artifact download link. */
+export function DownloadModal({
+	isOpen,
+	onOpenChange,
+	onConfirm,
+	isPending = false,
+	error,
+	artifactUrl,
+	isPreparing = false,
+	labels,
+	'data-testid': testId,
+}: DownloadModalProps): React.ReactNode {
+	const [format, setFormat] = useState<DownloadFormat>('png')
+
+	const handleConfirm = (): void => {
+		onConfirm(format)
+	}
+
+	const hasArtifact = artifactUrl != null && artifactUrl.length > 0
+
+	return (
+		<Dialog
+			title={labels.title}
+			data-testid={testId ?? 'delivery-download-modal'}
+			isOpen={isOpen}
+			onOpenChange={onOpenChange}
+		>
+			<div className="flex flex-col gap-3">
+				<p className="text-sm text-fg-muted">{labels.body}</p>
+
+				{hasArtifact ? (
+					<>
+						<p data-testid="delivery-download-ready" role="status" className="text-sm text-fg">
+							{labels.ready}
+						</p>
+						<div className="mt-2 flex justify-end gap-2">
+							<Button variant="secondary" size="sm" onPress={() => onOpenChange(false)}>
+								{labels.cancel}
+							</Button>
+							{/* React Aria <Button> is a real <button>; a download is a navigation,
+							    so we use a styled anchor (the only anchor in these modals). */}
+							<a
+								data-testid="delivery-download-link"
+								href={artifactUrl ?? undefined}
+								download
+								className="inline-flex h-8 items-center justify-center gap-2 rounded-md bg-brand-primary px-3 text-sm font-medium text-fg-inverted no-underline outline-none transition-colors hover:opacity-90 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+							>
+								{labels.download}
+							</a>
+						</div>
+					</>
+				) : isPreparing ? (
+					<>
+						<p data-testid="delivery-download-preparing" role="status" className="text-sm text-fg-muted">
+							{labels.preparing}
+						</p>
+						<div className="mt-2 flex justify-end gap-2">
+							<Button variant="secondary" size="sm" onPress={() => onOpenChange(false)}>
+								{labels.cancel}
+							</Button>
+						</div>
+					</>
+				) : (
+					<>
+						<RadioGroup
+							aria-label={labels.formatLabel}
+							value={format}
+							onChange={(value: string) => setFormat(value as DownloadFormat)}
+							className="flex flex-col gap-2"
+						>
+							<Label className="text-sm font-medium text-fg">{labels.formatLabel}</Label>
+							<div className="flex gap-2">
+								<DownloadFormatOption value="png" label={labels.formatPng} />
+								<DownloadFormatOption value="pdf" label={labels.formatPdf} />
+							</div>
+						</RadioGroup>
+
+						{error ? (
+							<p data-testid="delivery-download-error" role="alert" className="text-sm text-danger">
+								{error}
+							</p>
+						) : null}
+
+						<div className="mt-2 flex justify-end gap-2">
+							<Button
+								variant="secondary"
+								size="sm"
+								isDisabled={isPending}
+								onPress={() => onOpenChange(false)}
+							>
+								{labels.cancel}
+							</Button>
+							<Button
+								data-testid="delivery-download-confirm"
+								variant="primary"
+								size="sm"
+								isDisabled={isPending}
+								isPending={isPending}
+								onPress={handleConfirm}
+							>
+								{isPending ? labels.submitting : labels.confirm}
+							</Button>
+						</div>
+					</>
+				)}
+			</div>
+		</Dialog>
+	)
+}
+
+/** One radio chip in the download-format group. */
+function DownloadFormatOption({ value, label }: { value: Key; label: string }): React.ReactNode {
+	return (
+		<Radio
+			value={String(value)}
+			className="flex cursor-pointer items-center gap-2 rounded-md border border-border bg-surface px-3 py-2 text-sm text-fg outline-none transition-colors data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring data-[selected]:border-brand-primary data-[selected]:font-medium"
+		>
+			{label}
+		</Radio>
+	)
+}

package/src/components/delivery/publish-modal.tsx

@@ -0,0 +1,170 @@
+// @app/ui — publish modal (issue 14).
+//
+// PRESENTATIONAL publish dialog built on the @app/ui <Dialog> (React Aria Modal
+// — focus trap, Esc, aria-modal). Collects a destination + channel and, on
+// confirm, the owning surface in apps/web creates a `publish` delivery job.
+//
+// VALIDATION: destination + channel are both required (non-blank, trimmed) —
+// confirm stays DISABLED until both hold a value. The channel is a constrained
+// choice (the app supplies the option list as `labels.channels`).
+//
+// APP-AGNOSTIC (hard rule #1): every string is a prop; the action is delegated
+// via `onConfirm(payload)`; apps/web wires i18n + the REST mutation (`publish`
+// kind) + invalidation.
+//
+// a11y: the destination input is label-associated; the channel select is a RAC
+// Select (listbox ARIA); the server error is role="alert"; confirm shows a
+// pending state and disables while in flight / invalid.
+
+import { useState } from 'react'
+import { Button } from '../button'
+import { Dialog } from '../dialog'
+import { Input } from '../input'
+import { Select, SelectItem } from '../select'
+
+/** One publish channel option (value + visible label), supplied by the app. */
+export interface PublishChannelOption {
+	/** Stable channel id stored on the job (e.g. "instagram", "linkedin"). */
+	value: string
+	/** Translated, human-readable channel name. */
+	label: string
+}
+
+/** The publish payload the modal yields on confirm. */
+export interface PublishPayload {
+	/** Destination label (e.g. an account / page name) — non-blank. */
+	destination: string
+	/** Selected channel value. */
+	channel: string
+}
+
+/** Strings the publish modal renders — supplied by the app (i18n). */
+export interface PublishModalLabels {
+	/** Dialog heading. */
+	title: string
+	/** Explanatory body copy under the title. */
+	body: string
+	/** Destination field label + placeholder. */
+	destinationLabel: string
+	destinationPlaceholder: string
+	/** Channel select label + placeholder. */
+	channelLabel: string
+	channelPlaceholder: string
+	/** Cancel button. */
+	cancel: string
+	/** Confirm (create publish job) button — idle state. */
+	confirm: string
+	/** Confirm button — pending state. */
+	submitting: string
+	/** The channel options to choose from. */
+	channels: PublishChannelOption[]
+}
+
+export interface PublishModalProps {
+	/** Controlled open state. */
+	isOpen: boolean
+	/** Notified on open/close (false on Esc / click-outside / cancel). */
+	onOpenChange: (isOpen: boolean) => void
+	/** Create the `publish` delivery job with the chosen destination + channel. */
+	onConfirm: (payload: PublishPayload) => void
+	/** Whether the confirm mutation is in flight (disables + shows pending). */
+	isPending?: boolean
+	/** Server / mutation error message to surface inline (role="alert"). */
+	error?: string
+	/** App-supplied i18n strings. */
+	labels: PublishModalLabels
+	/** Optional test id forwarded to the dialog. */
+	'data-testid'?: string
+}
+
+/** Publish modal with a destination input + a channel choice. */
+export function PublishModal({
+	isOpen,
+	onOpenChange,
+	onConfirm,
+	isPending = false,
+	error,
+	labels,
+	'data-testid': testId,
+}: PublishModalProps): React.ReactNode {
+	const [destination, setDestination] = useState('')
+	const [channel, setChannel] = useState<string>('')
+
+	const reset = (): void => {
+		setDestination('')
+		setChannel('')
+	}
+
+	const canConfirm = !isPending && destination.trim().length > 0 && channel.trim().length > 0
+
+	const handleOpenChange = (open: boolean): void => {
+		if (!open) reset()
+		onOpenChange(open)
+	}
+
+	const handleConfirm = (): void => {
+		if (!canConfirm) return
+		onConfirm({ destination: destination.trim(), channel })
+	}
+
+	return (
+		<Dialog
+			title={labels.title}
+			data-testid={testId ?? 'delivery-publish-modal'}
+			isOpen={isOpen}
+			onOpenChange={handleOpenChange}
+		>
+			<div className="flex flex-col gap-3">
+				<p className="text-sm text-fg-muted">{labels.body}</p>
+
+				<Input
+					label={labels.destinationLabel}
+					placeholder={labels.destinationPlaceholder}
+					value={destination}
+					onChange={setDestination}
+					data-testid="delivery-publish-destination"
+				/>
+				<Select
+					label={labels.channelLabel}
+					placeholder={labels.channelPlaceholder}
+					selectedKey={channel.length > 0 ? channel : null}
+					onSelectionChange={(key) => setChannel(String(key))}
+					data-testid="delivery-publish-channel"
+				>
+					{labels.channels.map((option) => (
+						<SelectItem key={option.value} id={option.value}>
+							{option.label}
+						</SelectItem>
+					))}
+				</Select>
+
+				{error ? (
+					<p data-testid="delivery-publish-error" role="alert" className="text-sm text-danger">
+						{error}
+					</p>
+				) : null}
+
+				<div className="mt-2 flex justify-end gap-2">
+					<Button
+						variant="secondary"
+						size="sm"
+						isDisabled={isPending}
+						onPress={() => handleOpenChange(false)}
+					>
+						{labels.cancel}
+					</Button>
+					<Button
+						data-testid="delivery-publish-confirm"
+						variant="primary"
+						size="sm"
+						isDisabled={!canConfirm}
+						isPending={isPending}
+						onPress={handleConfirm}
+					>
+						{isPending ? labels.submitting : labels.confirm}
+					</Button>
+				</div>
+			</div>
+		</Dialog>
+	)
+}

package/src/components/delivery/send-to-print-modal.tsx

@@ -0,0 +1,216 @@
+// @app/ui — send-to-print modal (issue 14).
+//
+// PRESENTATIONAL print-order dialog built on the @app/ui <Dialog> (React Aria
+// Modal — focus trap, Esc, aria-modal). Collects the print spec (size,
+// material, quantity, delivery address) and, on confirm, the owning surface in
+// apps/web creates a `print` delivery job.
+//
+// VALIDATION mirrors the smart-document `print_specs` + `delivery_output`
+// block rules (docs/GOVERNANCE/tasks-delivery.md / the issue-06 validator):
+//   * size      — non-blank (trimmed),
+//   * material  — non-blank (trimmed),
+//   * quantity  — a finite integer strictly > 0,
+//   * address   — non-blank (trimmed, the delivery_output address field).
+// Confirm stays DISABLED until every field is valid; per-field errors are shown
+// inline (the quantity input carries aria-invalid + a role="alert" message).
+//
+// APP-AGNOSTIC (hard rule #1): every string is a prop; the action is delegated
+// via `onConfirm(spec)`; apps/web wires i18n + the REST mutation + invalidation.
+//
+// a11y: every field is label-associated (Input / RAC TextField); the quantity
+// field is aria-invalid when invalid; the server error is role="alert"; confirm
+// shows a pending state and disables while in flight / invalid.
+
+import { useMemo, useState } from 'react'
+import { Button } from '../button'
+import { Dialog } from '../dialog'
+import { Input } from '../input'
+
+/** The validated print spec the modal yields on confirm. */
+export interface PrintSpec {
+	/** Print size (e.g. "A2", "1000×700mm") — non-blank. */
+	size: string
+	/** Material / stock (e.g. "Matte 250g") — non-blank. */
+	material: string
+	/** Quantity — a finite integer > 0. */
+	quantity: number
+	/** Delivery address — non-blank. */
+	address: string
+}
+
+/** Strings the send-to-print modal renders — supplied by the app (i18n). */
+export interface SendToPrintModalLabels {
+	/** Dialog heading. */
+	title: string
+	/** Explanatory body copy under the title. */
+	body: string
+	/** Size field label + placeholder. */
+	sizeLabel: string
+	sizePlaceholder: string
+	/** Material field label + placeholder. */
+	materialLabel: string
+	materialPlaceholder: string
+	/** Quantity field label + placeholder. */
+	quantityLabel: string
+	quantityPlaceholder: string
+	/** Inline error shown when the quantity is not a finite integer > 0. */
+	quantityError: string
+	/** Address field label + placeholder. */
+	addressLabel: string
+	addressPlaceholder: string
+	/** Cancel button. */
+	cancel: string
+	/** Confirm (create print job) button — idle state. */
+	confirm: string
+	/** Confirm button — pending state. */
+	submitting: string
+}
+
+export interface SendToPrintModalProps {
+	/** Controlled open state. */
+	isOpen: boolean
+	/** Notified on open/close (false on Esc / click-outside / cancel). */
+	onOpenChange: (isOpen: boolean) => void
+	/** Create the `print` delivery job with the validated spec. */
+	onConfirm: (spec: PrintSpec) => void
+	/** Whether the confirm mutation is in flight (disables + shows pending). */
+	isPending?: boolean
+	/** Server / mutation error message to surface inline (role="alert"). */
+	error?: string
+	/** App-supplied i18n strings. */
+	labels: SendToPrintModalLabels
+	/** Optional test id forwarded to the dialog. */
+	'data-testid'?: string
+}
+
+/** Parse a raw quantity string into a finite integer > 0, or null when invalid. */
+function parseQuantity(raw: string): number | null {
+	const trimmed = raw.trim()
+	if (trimmed.length === 0) return null
+	const value = Number(trimmed)
+	if (!Number.isFinite(value) || !Number.isInteger(value) || value <= 0) return null
+	return value
+}
+
+/** Send-to-print modal with validated size / material / quantity / address. */
+export function SendToPrintModal({
+	isOpen,
+	onOpenChange,
+	onConfirm,
+	isPending = false,
+	error,
+	labels,
+	'data-testid': testId,
+}: SendToPrintModalProps): React.ReactNode {
+	const [size, setSize] = useState('')
+	const [material, setMaterial] = useState('')
+	const [quantityRaw, setQuantityRaw] = useState('')
+	const [address, setAddress] = useState('')
+
+	const quantity = useMemo(() => parseQuantity(quantityRaw), [quantityRaw])
+	// Surface the quantity error only once the user has typed something invalid
+	// (not on the initial blank state — that would scream before any input).
+	const quantityInvalid = quantityRaw.trim().length > 0 && quantity === null
+
+	const reset = (): void => {
+		setSize('')
+		setMaterial('')
+		setQuantityRaw('')
+		setAddress('')
+	}
+
+	const canConfirm =
+		!isPending &&
+		size.trim().length > 0 &&
+		material.trim().length > 0 &&
+		quantity !== null &&
+		address.trim().length > 0
+
+	const handleOpenChange = (open: boolean): void => {
+		if (!open) reset()
+		onOpenChange(open)
+	}
+
+	const handleConfirm = (): void => {
+		if (!canConfirm || quantity === null) return
+		onConfirm({
+			size: size.trim(),
+			material: material.trim(),
+			quantity,
+			address: address.trim(),
+		})
+	}
+
+	return (
+		<Dialog
+			title={labels.title}
+			data-testid={testId ?? 'delivery-print-modal'}
+			isOpen={isOpen}
+			onOpenChange={handleOpenChange}
+		>
+			<div className="flex flex-col gap-3">
+				<p className="text-sm text-fg-muted">{labels.body}</p>
+
+				<Input
+					label={labels.sizeLabel}
+					placeholder={labels.sizePlaceholder}
+					value={size}
+					onChange={setSize}
+					data-testid="delivery-print-size"
+				/>
+				<Input
+					label={labels.materialLabel}
+					placeholder={labels.materialPlaceholder}
+					value={material}
+					onChange={setMaterial}
+					data-testid="delivery-print-material"
+				/>
+				<Input
+					label={labels.quantityLabel}
+					placeholder={labels.quantityPlaceholder}
+					value={quantityRaw}
+					onChange={setQuantityRaw}
+					type="number"
+					inputMode="numeric"
+					isInvalid={quantityInvalid}
+					errorMessage={quantityInvalid ? labels.quantityError : undefined}
+					data-testid="delivery-print-quantity"
+				/>
+				<Input
+					label={labels.addressLabel}
+					placeholder={labels.addressPlaceholder}
+					value={address}
+					onChange={setAddress}
+					data-testid="delivery-print-address"
+				/>
+
+				{error ? (
+					<p data-testid="delivery-print-error" role="alert" className="text-sm text-danger">
+						{error}
+					</p>
+				) : null}
+
+				<div className="mt-2 flex justify-end gap-2">
+					<Button
+						variant="secondary"
+						size="sm"
+						isDisabled={isPending}
+						onPress={() => handleOpenChange(false)}
+					>
+						{labels.cancel}
+					</Button>
+					<Button
+						data-testid="delivery-print-confirm"
+						variant="primary"
+						size="sm"
+						isDisabled={!canConfirm}
+						isPending={isPending}
+						onPress={handleConfirm}
+					>
+						{isPending ? labels.submitting : labels.confirm}
+					</Button>
+				</div>
+			</div>
+		</Dialog>
+	)
+}

package/src/components/file-upload.tsx

@@ -1,6 +1,7 @@
 import { type ReactNode, useState } from 'react'
 import { DropZone, FileTrigger, Text } from 'react-aria-components'
 import { Button } from './button'
+import { useInFocusOverlay } from './focus-context'
 
 /**
  * FileUpload — a drop zone + "choose file" trigger over React Aria Components
@@ -21,6 +22,7 @@ export type FileUploadProps = {
 
 export const FileUpload = ({ label, description, accept, allowsMultiple, onFiles, className }: FileUploadProps) => {
 	const [names, setNames] = useState<string[]>([])
+	const inFocus = useInFocusOverlay()
 
 	const handle = (files: File[]) => {
 		if (files.length === 0) return
@@ -38,7 +40,8 @@ export const FileUpload = ({ label, description, accept, allowsMultiple, onFiles
 					handle(allowsMultiple ? files : files.slice(0, 1))
 				}}
 				className={
-					'flex flex-col items-center justify-center gap-3 rounded-lg border border-dashed border-border bg-surface p-6 text-center outline-none transition-colors ' +
+					'flex flex-col items-center justify-center gap-3 rounded-lg border border-dashed border-border bg-surface text-center outline-none transition-colors ' +
+					(inFocus ? 'min-h-64 p-12 ' : 'p-6 ') +
 					'data-[hovered]:border-fg-subtle ' +
 					'data-[drop-target]:border-brand-green data-[drop-target]:bg-surface-card ' +
 					'data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring'

package/src/components/focus-context.ts

@@ -0,0 +1,11 @@
+import { createContext, useContext } from 'react'
+
+/**
+ * Signals that a field is being rendered inside an active FocusField overlay, so
+ * the field can present an enhanced "focus" view (e.g. DatePicker shows the
+ * calendar inline/open instead of behind a popover). Default `false`.
+ */
+export const FocusOverlayContext = createContext(false)
+
+/** True when a field is rendered inside an active FocusField overlay. */
+export const useInFocusOverlay = (): boolean => useContext(FocusOverlayContext)