@podoba/react 0.0.6 → 0.0.8

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";
@@ -45,3 +48,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";