@podoba/react 0.0.7 → 0.0.9

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)

package/src/components/focus-field.tsx

@@ -0,0 +1,213 @@
+import {
+	createContext,
+	type ReactNode,
+	useCallback,
+	useContext,
+	useEffect,
+	useId,
+	useMemo,
+	useRef,
+	useState,
+} from 'react'
+import { createPortal } from 'react-dom'
+import { clsx } from 'clsx'
+import { FocusOverlayContext } from './focus-context'
+
+/**
+ * FocusFields + FocusField — immersive focus-mode field editing.
+ *
+ * Ported from gs-platform's FormWithPreview overlay pattern. Wrap a form in
+ * `<FocusFields>`; each `<FocusField>` renders as a compact card (icon · label ·
+ * value preview). Clicking one enters focus mode: the rest of the form blurs and
+ * dims, and the field's editor (`children`) takes over the form area at a large
+ * size. Esc or a click on the backdrop closes it.
+ *
+ * Generic by design — `children` is any editor (an input, textarea, select…). The
+ * card owns the label, so pass a *label-less* control as children. Text controls
+ * are auto-enlarged and stripped to a bare headline look in the overlay.
+ */
+
+type FocusCtx = {
+	activeId: string | null
+	activate: (id: string) => void
+	close: () => void
+	host: HTMLElement | null
+}
+
+const FocusFieldsContext = createContext<FocusCtx | null>(null)
+
+function useFocusFields(): FocusCtx {
+	const ctx = useContext(FocusFieldsContext)
+	if (!ctx) throw new Error('<FocusField> must be rendered inside <FocusFields>')
+	return ctx
+}
+
+export function FocusFields({ children, className }: { children: ReactNode; className?: string }) {
+	const [activeId, setActiveId] = useState<string | null>(null)
+	const [host, setHost] = useState<HTMLDivElement | null>(null)
+	const close = useCallback(() => setActiveId(null), [])
+	const activate = useCallback((id: string) => setActiveId(id), [])
+
+	useEffect(() => {
+		if (!activeId) return
+		const onKey = (e: KeyboardEvent) => {
+			if (e.key === 'Escape') close()
+		}
+		document.addEventListener('keydown', onKey)
+		return () => document.removeEventListener('keydown', onKey)
+	}, [activeId, close])
+
+	const ctx = useMemo<FocusCtx>(() => ({ activeId, activate, close, host }), [activeId, activate, close, host])
+
+	return (
+		<FocusFieldsContext.Provider value={ctx}>
+			<div className={clsx('relative', className)}>
+				<div
+					className={clsx(
+						'transition-[filter,opacity] duration-200',
+						activeId && 'pointer-events-none select-none opacity-40 blur-[3px]',
+					)}
+					aria-hidden={activeId ? true : undefined}
+				>
+					{children}
+				</div>
+				{activeId ? (
+					// Backdrop over the form; the portalled editor sits at the top and
+					// stops propagation so only clicks outside it close focus mode.
+					<div className="absolute inset-0 z-20 overflow-auto" onClick={close}>
+						<div ref={setHost} onClick={(e) => e.stopPropagation()} />
+					</div>
+				) : null}
+			</div>
+		</FocusFieldsContext.Provider>
+	)
+}
+
+// In the overlay, enlarge and de-chrome text controls into a bare headline editor.
+const OVERLAY_EDITOR =
+	'[&_input]:w-full [&_input]:border-0 [&_input]:bg-transparent [&_input]:p-0 [&_input]:text-3xl [&_input]:font-medium [&_input]:text-fg [&_input]:outline-none [&_input]:shadow-none [&_input]:ring-0 [&_input]:placeholder:text-fg-subtle ' +
+	'[&_textarea]:min-h-40 [&_textarea]:w-full [&_textarea]:resize-none [&_textarea]:border-0 [&_textarea]:bg-transparent [&_textarea]:p-0 [&_textarea]:text-3xl [&_textarea]:font-medium [&_textarea]:text-fg [&_textarea]:outline-none [&_textarea]:placeholder:text-fg-subtle'
+
+function IconBadge({ icon }: { icon: ReactNode }) {
+	return (
+		<div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-surface-muted text-sm font-medium text-fg">
+			{icon}
+		</div>
+	)
+}
+
+export type FocusFieldProps = {
+	/** Field label (shown on the card and above the overlay editor). */
+	label: ReactNode
+	/** Optional leading icon (e.g. a "T" for text). */
+	icon?: ReactNode
+	/** Current value shown on the collapsed card. */
+	preview?: ReactNode
+	/** Shown on the card when there's no value. */
+	placeholder?: ReactNode
+	/** The editor, shown in the overlay when focused. */
+	children: ReactNode
+	/**
+	 * How the editor is presented in the overlay:
+	 * - `"text"` (default): treat `children` as a bare text control and enlarge it
+	 *   to a headline; FocusField supplies the label.
+	 * - `"control"`: render `children` (a self-labelled field component) as-is, with
+	 *   no enlargement and no FocusField label (the control provides its own).
+	 */
+	editor?: 'text' | 'control'
+	className?: string
+}
+
+export function FocusField({
+	label,
+	icon,
+	preview,
+	placeholder,
+	children,
+	editor = 'text',
+	className,
+}: FocusFieldProps) {
+	const ctx = useFocusFields()
+	const id = useId()
+	const active = ctx.activeId === id
+	const contentRef = useRef<HTMLDivElement>(null)
+
+	// Move focus into the editor once it's mounted (the portal host appears a
+	// render after activation, so wait for ctx.host before focusing).
+	useEffect(() => {
+		if (!active || !ctx.host) return
+		const el = contentRef.current?.querySelector<HTMLElement>('input, textarea, [contenteditable="true"]')
+		el?.focus()
+	}, [active, ctx.host])
+
+	const hasValue = preview !== undefined && preview !== null && preview !== ''
+
+	return (
+		<>
+			<div
+				role="button"
+				tabIndex={0}
+				aria-label={typeof label === 'string' ? label : undefined}
+				onClick={() => ctx.activate(id)}
+				onKeyDown={(e) => {
+					if (e.key === 'Enter' || e.key === ' ') {
+						e.preventDefault()
+						ctx.activate(id)
+					}
+				}}
+				className={clsx(
+					// Field-group divider: a bottom border on each row, none on the last.
+					'flex w-full cursor-text items-start gap-3 border-b border-border p-3 text-left outline-none transition-colors last:border-b-0',
+					'hover:bg-surface-card focus-visible:ring-2 focus-visible:ring-ring',
+					className,
+				)}
+			>
+				{icon ? <IconBadge icon={icon} /> : null}
+				<div className="min-w-0 flex-1">
+					<div className="text-sm text-fg-muted">{label}</div>
+					<div className="mt-1 truncate text-base text-fg">
+						{hasValue ? preview : <span className="text-fg-subtle">{placeholder}</span>}
+					</div>
+				</div>
+			</div>
+			{active && ctx.host
+				? createPortal(
+						// No card/shadow: a full-bleed white area at the top that gradient-fades
+						// to transparent, so it melts into the blurred form below.
+						<div
+							ref={contentRef}
+							className="relative min-h-[60vh] w-full bg-gradient-to-b from-surface from-0% via-surface via-65% to-transparent px-3 pt-3"
+						>
+							<button
+								type="button"
+								onClick={ctx.close}
+								aria-label="Close"
+								className="absolute right-3 top-3 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-fg-subtle outline-none transition-colors hover:bg-surface-muted hover:text-fg focus-visible:ring-2 focus-visible:ring-ring"
+							>
+								<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true">
+									<path d="M6 6l12 12M18 6 6 18" />
+								</svg>
+							</button>
+							{/* Tell field components they're in a focus overlay so they can
+							    render an enhanced view (e.g. an inline open calendar). */}
+							<FocusOverlayContext.Provider value={true}>
+								{editor === 'control' ? (
+									// Self-labelled field component — render it as-is (enhanced by context).
+									<div className="max-w-md pr-10">{children}</div>
+								) : (
+									<div className="flex items-start gap-3">
+										{icon ? <IconBadge icon={icon} /> : null}
+										<div className="min-w-0 flex-1 pr-10">
+											<div className="text-sm text-fg-muted">{label}</div>
+											<div className={OVERLAY_EDITOR}>{children}</div>
+										</div>
+									</div>
+								)}
+							</FocusOverlayContext.Provider>
+						</div>,
+						ctx.host,
+					)
+				: null}
+		</>
+	)
+}

package/src/components/multiselect.tsx

@@ -13,6 +13,7 @@ import {
 } from 'react-aria-components'
 import { clsx } from 'clsx'
 import { uic } from '../utils/uic'
+import { useInFocusOverlay } from './focus-context'
 
 /**
  * MultiSelect — a dropdown that selects several options at once.
@@ -96,6 +97,7 @@ export const MultiSelect = ({
 	const triggerRef = useRef<HTMLButtonElement>(null)
 	const [open, setOpen] = useState(false)
 	const { contains } = useFilter({ sensitivity: 'base' })
+	const inFocus = useInFocusOverlay()
 	const [internal, setInternal] = useState<Set<string>>(() => new Set(defaultSelectedKeys ?? []))
 	const selected = selectedKeys ?? internal
 
@@ -126,48 +128,64 @@ export const MultiSelect = ({
 		</ListBox>
 	)
 
+	const listContent = searchable ? (
+		<Autocomplete filter={contains}>
+			<SearchField aria-label="Filter options" autoFocus className="border-b border-border p-1">
+				<RACInput
+					placeholder="Search…"
+					className="w-full rounded-md bg-surface px-3 py-2 text-sm text-fg outline-none placeholder:text-fg-muted"
+				/>
+			</SearchField>
+			{list}
+		</Autocomplete>
+	) : (
+		list
+	)
+
+	const desc = description ? <span className="text-xs text-fg-muted">{description}</span> : null
+	const err = isInvalid && errorMessage ? <span className="text-xs text-danger">{errorMessage}</span> : null
+
 	return (
 		<div className={clsx('flex flex-col gap-2', className)}>
 			<span id={labelId} className="text-heading5 font-medium text-fg">
 				{label}
 			</span>
-			<RACButton
-				ref={triggerRef}
-				aria-labelledby={labelId}
-				isDisabled={isDisabled}
-				onPress={() => setOpen(true)}
-				className={clsx(
-					'flex h-12 w-full items-center justify-between gap-2.5 rounded-lg border bg-surface px-4 text-sm text-fg outline-none transition-colors',
-					'data-[hovered]:border-fg-subtle data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring',
-					'data-[disabled]:bg-surface-muted data-[disabled]:opacity-60 data-[disabled]:pointer-events-none',
-					isInvalid ? 'border-danger ring-2 ring-danger' : 'border-border',
-				)}
-			>
-				<span className={clsx('truncate', chosen.length === 0 && 'text-fg-muted')}>{summary}</span>
-				<Chevron />
-			</RACButton>
-			{description ? <span className="text-xs text-fg-muted">{description}</span> : null}
-			{isInvalid && errorMessage ? <span className="text-xs text-danger">{errorMessage}</span> : null}
-			<Popover
-				triggerRef={triggerRef}
-				isOpen={open}
-				onOpenChange={setOpen}
-				className="min-w-[var(--trigger-width)] overflow-hidden rounded-lg bg-surface-card shadow-lg"
-			>
-				{searchable ? (
-					<Autocomplete filter={contains}>
-						<SearchField aria-label="Filter options" autoFocus className="border-b border-border p-1">
-							<RACInput
-								placeholder="Search…"
-								className="w-full rounded-md bg-surface px-3 py-2 text-sm text-fg outline-none placeholder:text-fg-muted"
-							/>
-						</SearchField>
-						{list}
-					</Autocomplete>
-				) : (
-					list
-				)}
-			</Popover>
+			{inFocus ? (
+				// Seamless: no trigger/popover — the checklist sits inline on the panel.
+				<>
+					{listContent}
+					{desc}
+					{err}
+				</>
+			) : (
+				<>
+					<RACButton
+						ref={triggerRef}
+						aria-labelledby={labelId}
+						isDisabled={isDisabled}
+						onPress={() => setOpen(true)}
+						className={clsx(
+							'flex h-12 w-full items-center justify-between gap-2.5 rounded-lg border bg-surface px-4 text-sm text-fg outline-none transition-colors',
+							'data-[hovered]:border-fg-subtle data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring',
+							'data-[disabled]:bg-surface-muted data-[disabled]:opacity-60 data-[disabled]:pointer-events-none',
+							isInvalid ? 'border-danger ring-2 ring-danger' : 'border-border',
+						)}
+					>
+						<span className={clsx('truncate', chosen.length === 0 && 'text-fg-muted')}>{summary}</span>
+						<Chevron />
+					</RACButton>
+					{desc}
+					{err}
+					<Popover
+						triggerRef={triggerRef}
+						isOpen={open}
+						onOpenChange={setOpen}
+						className="min-w-[var(--trigger-width)] overflow-hidden rounded-lg bg-surface-card shadow-lg"
+					>
+						{listContent}
+					</Popover>
+				</>
+			)}
 		</div>
 	)
 }