@podoba/react 0.0.7 → 0.0.9

package/src/components/request-changes-modal.tsx

@@ -0,0 +1,134 @@
+// @app/ui — request-changes modal (issue 13).
+//
+// PRESENTATIONAL "request changes" dialog built on the @app/ui <Dialog>
+// (React Aria Modal — focus trap, Esc, aria-modal). The note is REQUIRED:
+// confirm stays DISABLED until the textarea holds a non-empty (trimmed) value,
+// mirroring the server contract (`request_changes` 422s on an empty note).
+//
+// APP-AGNOSTIC (hard rule #1): every string is a prop and the action is
+// delegated via `onConfirm(note)`. The owning surface in apps/web wires the
+// i18n strings + the REST mutation + invalidation, and surfaces the auto-created
+// follow-up `changes` task returned by the command.
+//
+// a11y: the textarea is label-associated (htmlFor/id), marked `required` +
+// `aria-invalid` while empty; the server error is role="alert"; confirm shows a
+// pending state and is disabled while in flight or while the note is empty.
+
+import { useId, useState } from 'react'
+import { Button } from './button'
+import { Dialog } from './dialog'
+
+/** Strings the request-changes modal renders — supplied by the app (i18n). */
+export interface RequestChangesModalLabels {
+	/** Dialog heading. */
+	title: string
+	/** Explanatory body copy under the title. */
+	body: string
+	/** Label for the required note textarea. */
+	noteLabel: string
+	/** Placeholder for the note textarea. */
+	notePlaceholder: string
+	/** Cancel button. */
+	cancel: string
+	/** Confirm (request changes) button — idle state. */
+	confirm: string
+	/** Confirm button — pending state. */
+	submitting: string
+}
+
+export interface RequestChangesModalProps {
+	/** Controlled open state. */
+	isOpen: boolean
+	/** Notified on open/close (false on Esc / click-outside / cancel). */
+	onOpenChange: (isOpen: boolean) => void
+	/** Run the request_changes command with the (required, trimmed) note. */
+	onConfirm: (note: string) => 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: RequestChangesModalLabels
+	/** Optional test id forwarded to the dialog. */
+	'data-testid'?: string
+}
+
+/** Request-changes modal with a REQUIRED note (confirm disabled until non-empty). */
+export function RequestChangesModal({
+	isOpen,
+	onOpenChange,
+	onConfirm,
+	isPending = false,
+	error,
+	labels,
+	'data-testid': testId,
+}: RequestChangesModalProps): React.ReactNode {
+	const noteId = useId()
+	// CONTROLLED textarea: the confirm button's disabled state depends on whether
+	// the note is non-empty, so the value drives dependent UI (unlike approve).
+	const [note, setNote] = useState('')
+	const isEmpty = note.trim().length === 0
+	const canConfirm = !isEmpty && !isPending
+
+	const handleConfirm = (): void => {
+		const trimmed = note.trim()
+		if (trimmed.length === 0) return
+		onConfirm(trimmed)
+	}
+
+	return (
+		<Dialog
+			title={labels.title}
+			data-testid={testId ?? 'request-changes-modal'}
+			isOpen={isOpen}
+			onOpenChange={(open) => {
+				if (!open) setNote('')
+				onOpenChange(open)
+			}}
+		>
+			<div className="flex flex-col gap-3">
+				<p className="text-sm text-fg-muted">{labels.body}</p>
+				<label htmlFor={noteId} className="text-sm font-medium text-fg">
+					{labels.noteLabel}
+				</label>
+				<textarea
+					id={noteId}
+					data-testid="request-changes-note"
+					value={note}
+					onChange={(event) => setNote(event.target.value)}
+					maxLength={10_000}
+					rows={4}
+					required
+					aria-invalid={isEmpty ? true : undefined}
+					placeholder={labels.notePlaceholder}
+					className="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm text-fg outline-none transition-colors placeholder:text-fg-muted focus-visible:ring-2 focus-visible:ring-ring"
+				/>
+				{error ? (
+					<p data-testid="request-changes-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="request-changes-confirm"
+						variant="primary"
+						size="sm"
+						isDisabled={!canConfirm}
+						isPending={isPending}
+						onPress={handleConfirm}
+					>
+						{isPending ? labels.submitting : labels.confirm}
+					</Button>
+				</div>
+			</div>
+		</Dialog>
+	)
+}

package/src/components/rich-text-editor.tsx

@@ -1,5 +1,6 @@
 import { type ClipboardEvent as ReactClipboardEvent, type ReactNode, useEffect, useRef } from 'react'
 import { clsx } from 'clsx'
+import { useInFocusOverlay } from './focus-context'
 
 /**
  * RichTextEditor — a dependency-free contentEditable WYSIWYG that emits an HTML
@@ -85,6 +86,9 @@ export function RichTextEditor({
 }: RichTextEditorProps) {
 	const ref = useRef<HTMLDivElement>(null)
 	const last = useRef<string>('')
+	// In a focus overlay, give the body more room to write in.
+	const inFocus = useInFocusOverlay()
+	const bodyMinHeight = inFocus ? Math.max(minHeight, 360) : minHeight
 
 	// Sync only EXTERNAL value changes into the DOM — never on our own keystrokes,
 	// or the caret would jump to the start on every character.
@@ -142,7 +146,7 @@ export function RichTextEditor({
 				<div
 					ref={ref}
 					className="prose prose-sm max-w-none px-4 py-3.5 text-sm leading-relaxed text-fg outline-none empty:before:text-fg-subtle empty:before:content-[attr(data-placeholder)]"
-					style={{ minHeight }}
+					style={{ minHeight: bodyMinHeight }}
 					contentEditable
 					suppressContentEditableWarning
 					data-placeholder={placeholder}

package/src/components/select.tsx

@@ -13,6 +13,7 @@ import {
 	Text,
 } from 'react-aria-components'
 import { uic } from '../utils/uic'
+import { useInFocusOverlay } from './focus-context'
 
 /**
  * Select — accessible dropdown built on React Aria Components `Select`.
@@ -74,41 +75,55 @@ export const Select = <T extends object>({
 	placeholder,
 	children,
 	...props
-}: SelectProps<T>) => (
-	<RACSelect {...props} placeholder={placeholder} className="group flex flex-col gap-2">
-		<Label className="text-heading5 font-medium text-fg">{label}</Label>
-		<SelectTrigger>
-			<SelectValue className="data-[placeholder]:text-fg-muted" />
-			{/* gs chevron: 9.5px caret, dark (neutral-400 → fg), non-interactive. */}
-			<svg
-				width="9.5"
-				height="9.5"
-				viewBox="0 0 12 12"
-				fill="none"
-				aria-hidden="true"
-				className="pointer-events-none shrink-0 text-fg"
-			>
-				<path
-					d="M3 4.5L6 7.5L9 4.5"
-					stroke="currentColor"
-					strokeWidth="1.5"
-					strokeLinecap="round"
-					strokeLinejoin="round"
-				/>
-			</svg>
-		</SelectTrigger>
-		{description ? (
-			<Text slot="description" className="text-xs text-fg-muted">
-				{description}
-			</Text>
-		) : null}
-		<FieldError className="text-xs text-danger">{errorMessage}</FieldError>
-		{/* Cream fill, 8px radius, shadow-lg, NO border. 4px inset so each option's
-		    highlight sits as a padded pill; small gap for an even list rhythm. */}
-		<Popover className="min-w-[var(--trigger-width)] overflow-hidden rounded-lg bg-surface-card shadow-lg">
-			<ListBox className="flex max-h-64 flex-col gap-0.5 overflow-auto overscroll-contain p-1 outline-none">
-				{children}
-			</ListBox>
-		</Popover>
-	</RACSelect>
-)
+}: SelectProps<T>) => {
+	// In a focus overlay, show the options inline (seamless) instead of a popover.
+	const inFocus = useInFocusOverlay()
+	const listbox = (
+		<ListBox className="flex max-h-72 flex-col gap-0.5 overflow-auto overscroll-contain p-1 outline-none">
+			{children}
+		</ListBox>
+	)
+	const desc = description ? (
+		<Text slot="description" className="text-xs text-fg-muted">
+			{description}
+		</Text>
+	) : null
+	const err = <FieldError className="text-xs text-danger">{errorMessage}</FieldError>
+
+	return (
+		<RACSelect {...props} placeholder={placeholder} className="group flex flex-col gap-2">
+			<Label className="text-heading5 font-medium text-fg">{label}</Label>
+			{inFocus ? (
+				<>
+					{listbox}
+					{desc}
+					{err}
+				</>
+			) : (
+				<>
+					<SelectTrigger>
+						<SelectValue className="data-[placeholder]:text-fg-muted" />
+						{/* gs chevron: 9.5px caret, dark (neutral-400 → fg), non-interactive. */}
+						<svg
+							width="9.5"
+							height="9.5"
+							viewBox="0 0 12 12"
+							fill="none"
+							aria-hidden="true"
+							className="pointer-events-none shrink-0 text-fg"
+						>
+							<path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+						</svg>
+					</SelectTrigger>
+					{desc}
+					{err}
+					{/* Cream fill, 8px radius, shadow-lg, NO border. 4px inset so each option's
+					    highlight sits as a padded pill; small gap for an even list rhythm. */}
+					<Popover className="min-w-[var(--trigger-width)] overflow-hidden rounded-lg bg-surface-card shadow-lg">
+						{listbox}
+					</Popover>
+				</>
+			)}
+		</RACSelect>
+	)
+}

package/src/components/stats-card.tsx

@@ -0,0 +1,146 @@
+import { Button as RACButton } from 'react-aria-components'
+import { type ReactElement, type ReactNode, cloneElement, isValidElement } from 'react'
+import { uic } from '../utils/uic'
+
+/**
+ * StatsCard — KPI card (port of gs-platform `GSStatsCard` / `StatsCard`).
+ *
+ * gs-platform renders title (heading-5) · large value (label-1) · footer
+ * (small body) inside a spacious cream `Tile` with panel radius. The `dark`
+ * variant mirrors gs's dark "Cloud" tile (inverted surface, light text).
+ *
+ * Presentational only (hard rule #1): all copy via props, no API/i18n.
+ *
+ * When `onPress` is set the whole card becomes a React Aria `Button` — it gets
+ * keyboard activation, `data-[focus-visible]` ring and `data-[pressed]` for
+ * free. Otherwise it renders as a plain non-interactive `div`.
+ */
+export type StatsCardProps = {
+	/** Small uppercase-ish label above the value. */
+	title: ReactNode
+	/** The large headline number / value. */
+	value: ReactNode
+	/** Optional supporting footer line (e.g. "+3 this week"). */
+	footer?: ReactNode
+	/** When provided the card becomes a clickable React Aria Button. */
+	onPress?: () => void
+	/**
+	 * Render the card AS the provided child element (e.g. a router `<Link>`) instead
+	 * of a button — so the whole tile is a real anchor (cmd/middle-click, open in
+	 * new tab, link semantics). The card styling + hover/focus are merged onto the
+	 * child and the title/value/footer are injected as its children. Takes
+	 * precedence over `onPress`.
+	 */
+	asChild?: boolean
+	/** The element to render as the card when `asChild` is set (a single element). */
+	children?: ReactNode
+	/** Dark/inverted surface (gs's dark "Cloud" tile). */
+	dark?: boolean
+	/** Accessible label for the clickable card (defaults to nothing — title is read). */
+	'aria-label'?: string
+	className?: string
+}
+
+// gs Tile: `--radius-lg` (8px) corners, 16px padding, min-height 208px (size
+// "compact"), and it FILLS its grid cell (h-full) so a tall dashboard tile is a
+// tall card. The three bands (title top / value centered / footer bottom) are laid
+// out by StatsCardBody. The "skin" (surface + border) is split out so the dark
+// variant can override it cleanly.
+const baseSurface = 'flex h-full min-h-[208px] flex-col gap-2 rounded-lg p-4 text-left'
+const lightSkin = 'border border-border bg-surface-card'
+const darkSkin = 'border border-transparent bg-surface-inverted'
+
+function StatsCardBody({
+	title,
+	value,
+	footer,
+	dark,
+}: Pick<StatsCardProps, 'title' | 'value' | 'footer' | 'dark'>) {
+	return (
+		<>
+			<span
+				className={`text-body font-medium leading-5 ${dark ? 'text-white' : 'text-fg'}`}
+			>
+				{title}
+			</span>
+			{/*
+			 * gs Tile `contentAlign="center"`: the value sits in the CENTRE band of the
+			 * three-band tile (title top / value centred / footer bottom). The `flex-1`
+			 * band grows to fill the 208px tile and vertically centres the value, pushing
+			 * any footer to the bottom (no `mt-auto` needed). Value ramp = gs label-1
+			 * (1.875rem / 500 / 2rem line). Letter-spacing tracks gs 1:1: light tiles use
+			 * -0.56px via `tracking-wide`; the dark "Cloud" count tile uses gs's em-based
+			 * `-0.02em` (`AssetsTile.module.scss .count`).
+			 */}
+			<span
+				className={`flex flex-1 items-center text-[1.875rem] font-medium leading-[2rem] ${dark ? 'tracking-[-0.02em] text-white' : 'tracking-wide text-fg'}`}
+			>
+				{value}
+			</span>
+			{footer ? (
+				<span className={`pt-4 text-compact leading-4 ${dark ? 'text-white/50' : 'text-fg-muted'}`}>
+					{footer}
+				</span>
+			) : null}
+		</>
+	)
+}
+
+const PressableCard = uic(RACButton, {
+	displayName: 'StatsCardButton',
+	baseClass:
+		`${baseSurface} ${lightSkin} ` +
+		'w-full outline-none transition-transform duration-150 ' +
+		'data-[hovered]:scale-[1.02] ' +
+		'data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring data-[focus-visible]:ring-offset-2 ' +
+		'data-[pressed]:scale-100',
+})
+
+// Anchor interaction skin: same subtle scale-up as the pressable card (gs Tile
+// `whileHover` scale 1.02, no shadow), but driven by CSS `:hover`/`:focus-visible`
+// (real <a>) rather than RAC `data-` attributes.
+const anchorInteractive =
+	'no-underline outline-none transition-transform duration-150 ' +
+	'hover:scale-[1.02] ' +
+	'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2'
+
+export function StatsCard({
+	title,
+	value,
+	footer,
+	onPress,
+	asChild,
+	children,
+	dark,
+	className,
+	...rest
+}: StatsCardProps) {
+	// asChild wins: render the supplied element (typically a router <Link>) as the
+	// card. The body is injected as its children so callers pass a self-closing link.
+	if (asChild && isValidElement(children)) {
+		const child = children as ReactElement<{ className?: string }>
+		const cardClass = [baseSurface, dark ? darkSkin : lightSkin, anchorInteractive, child.props.className, className]
+			.filter(Boolean)
+			.join(' ')
+		return cloneElement(child, { className: cardClass } as { className: string }, <StatsCardBody title={title} value={value} footer={footer} dark={dark} />)
+	}
+
+	if (onPress) {
+		// uic merges via tailwind-merge, so `darkSkin` cleanly overrides the
+		// light surface/border in the base class.
+		return (
+			<PressableCard
+				onPress={onPress}
+				className={[dark ? darkSkin : '', className].filter(Boolean).join(' ')}
+				aria-label={rest['aria-label']}
+			>
+				<StatsCardBody title={title} value={value} footer={footer} dark={dark} />
+			</PressableCard>
+		)
+	}
+	return (
+		<div className={[baseSurface, dark ? darkSkin : lightSkin, className].filter(Boolean).join(' ')}>
+			<StatsCardBody title={title} value={value} footer={footer} dark={dark} />
+		</div>
+	)
+}

package/src/components/task-approval-modal.tsx

@@ -0,0 +1,123 @@
+// @app/ui — task approval modal (issue 13).
+//
+// PRESENTATIONAL approve-confirmation dialog built on the @app/ui <Dialog>
+// (React Aria Modal — focus trap, Esc, aria-modal). The note is OPTIONAL on
+// approve; confirm is always enabled (a press with an empty note is valid).
+//
+// This component is APP-AGNOSTIC (hard rule #1: @app/ui never imports apps/web
+// or calls API hooks). Every string is supplied via the `labels` prop and the
+// confirm action is delegated through `onConfirm(note?)` — the owning surface
+// in apps/web wires the i18n strings + the REST mutation + invalidation.
+//
+// a11y: the textarea is label-associated via htmlFor/id; the server error is
+// role="alert"; confirm shows a pending state and disables while in flight.
+
+import { useId, useRef } from 'react'
+import { Button } from './button'
+import { Dialog } from './dialog'
+
+/** Strings the approval modal renders — supplied by the app (i18n), not hardcoded. */
+export interface TaskApprovalModalLabels {
+	/** Dialog heading. */
+	title: string
+	/** Explanatory body copy under the title. */
+	body: string
+	/** Label for the optional note textarea. */
+	noteLabel: string
+	/** Placeholder for the note textarea. */
+	notePlaceholder: string
+	/** Cancel button. */
+	cancel: string
+	/** Confirm (approve) button — idle state. */
+	confirm: string
+	/** Confirm button — pending state. */
+	submitting: string
+}
+
+export interface TaskApprovalModalProps {
+	/** Controlled open state. */
+	isOpen: boolean
+	/** Notified on open/close (false on Esc / click-outside / cancel). */
+	onOpenChange: (isOpen: boolean) => void
+	/** Run the approve command with the (trimmed, optional) note. */
+	onConfirm: (note?: string) => 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: TaskApprovalModalLabels
+	/** Optional test id forwarded to the dialog. */
+	'data-testid'?: string
+}
+
+/** Approve-confirmation modal with an optional note. */
+export function TaskApprovalModal({
+	isOpen,
+	onOpenChange,
+	onConfirm,
+	isPending = false,
+	error,
+	labels,
+	'data-testid': testId,
+}: TaskApprovalModalProps): React.ReactNode {
+	const noteId = useId()
+	// UNCONTROLLED textarea (read at submit via ref): the note has no dependent UI
+	// on approve, so controlled state would only add a re-render per keystroke.
+	const noteRef = useRef<HTMLTextAreaElement | null>(null)
+
+	const handleConfirm = (): void => {
+		const trimmed = (noteRef.current?.value ?? '').trim()
+		onConfirm(trimmed.length > 0 ? trimmed : undefined)
+	}
+
+	return (
+		<Dialog
+			title={labels.title}
+			data-testid={testId ?? 'task-approval-modal'}
+			isOpen={isOpen}
+			onOpenChange={onOpenChange}
+		>
+			<div className="flex flex-col gap-3">
+				<p className="text-sm text-fg-muted">{labels.body}</p>
+				<label htmlFor={noteId} className="text-sm font-medium text-fg">
+					{labels.noteLabel}
+				</label>
+				<textarea
+					id={noteId}
+					data-testid="task-approval-note"
+					ref={noteRef}
+					maxLength={10_000}
+					rows={3}
+					placeholder={labels.notePlaceholder}
+					className="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm text-fg outline-none transition-colors placeholder:text-fg-muted focus-visible:ring-2 focus-visible:ring-ring"
+				/>
+				{error ? (
+					<p data-testid="task-approval-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="task-approval-confirm"
+						variant="primary"
+						size="sm"
+						isDisabled={isPending}
+						isPending={isPending}
+						onPress={handleConfirm}
+					>
+						{isPending ? labels.submitting : labels.confirm}
+					</Button>
+				</div>
+			</div>
+		</Dialog>
+	)
+}

package/src/index.ts

@@ -1,9 +1,10 @@
 // @podoba/react — the universal component library.
 //
 // React Aria Components + Tailwind, composed with `uic`. Seeded from graphic-standard's
-// @app/ui — atomic primitives + layout ONLY. Product-specific components (schema
-// renderer, delivery/approval modals, brand headers) stay in GS and consume this.
-// See ../../EXTRACTION.md.
+// @app/ui — atomic primitives + layout, PLUS the label-driven product patterns
+// (delivery/approval modals, brand header, stats/dashboard). Podoba is the single
+// source of truth for UI. Only GS-DOMAIN-coupled UI (the @app/schema-driven component
+// renderer) stays in GS and consumes this. See ../../EXTRACTION.md.
 
 // --- factory ---
 export { uic, uiconfig, type ConfigVariants, type NoInfer } from "./utils/uic";
@@ -13,6 +14,8 @@ export * from "./components/button";
 export * from "./components/input";
 export * from "./components/textarea";
 export * from "./components/rich-text-editor";
+export * from "./components/focus-field";
+export * from "./components/focus-context";
 export * from "./components/checkbox";
 export * from "./components/radio";
 export * from "./components/switch";
@@ -32,6 +35,7 @@ export * from "./components/context-menu";
 export * from "./components/tooltip";
 export * from "./components/toast";
 export * from "./components/disclosure";
+export * from "./components/collapsible-card";
 export * from "./components/tabs";
 export * from "./components/section-tabs";
 export * from "./components/separator";
@@ -45,3 +49,14 @@ export * from "./layout/page-container";
 export * from "./layout/app-shell";
 export * from "./layout/topbar";
 export * from "./layout/persistent-page-shell";
+
+// --- product patterns (label-driven; no domain coupling) ---
+export * from "./components/brand-page-header";
+export * from "./components/stats-card";
+export * from "./components/dashboard-grid";
+export * from "./components/task-approval-modal";
+export * from "./components/request-changes-modal";
+export * from "./components/delivery/download-modal";
+export * from "./components/delivery/send-to-print-modal";
+export * from "./components/delivery/publish-modal";
+export * from "./components/delivery/delivery-status-module";