@podoba/react 0.0.7 → 0.0.9

package/src/components/delivery/delivery-status-module.tsx

@@ -0,0 +1,113 @@
+// @app/ui — delivery status module (issue 17).
+//
+// PRESENTATIONAL "black status module" — the signature delivery-UI surface ported
+// from the gs-platform `FinalOutputsHandoffPanel` (`.statusModule`): a dark
+// inverted surface (white-on-#242423) carrying a status header row, muted status
+// text, an optional progress track with a GREEN progress bar, and optional
+// trailing "ready" pills. Used by BOTH the final-outputs handoff panel and the
+// live delivery-status cards so the two read as one visual language.
+//
+// APP-AGNOSTIC (hard rule #1): no apps/web imports, no API hooks, no i18n. Every
+// string is passed in; the owning surface in apps/web supplies the i18n copy and
+// wires behaviour. Pure markup + Tailwind classes bound to @app/tokens CSS vars.
+//
+// ── Styling (hard rule #3) ────────────────────────────────────────────────────
+// Tailwind + @app/tokens only — NO SCSS, NO raw hex.
+//   gs-platform `--color-text-primary` (#000 module surface) → our `surface-inverted`
+//   gs-platform `--color-background` (white text)            → our `fg-inverted`
+//   gs-platform `--color-brand-green` (#22c55e progress)     → our `success`
+//   gs-platform `--radius-full` (track / pills)              → `rounded-full`
+//   gs-platform `--radius-panel-sm` (module)                 → `rounded-md`
+//
+// ── a11y ──────────────────────────────────────────────────────────────────────
+// White (#fff) on the dark surface (#242423) ≈ 14.9:1 — passes WCAG AA. The muted
+// status text uses `text-white/70` (white at 70% over the dark surface) ≈ 8.6:1 —
+// still AA. (We use the stock `white`/opacity utilities for the muted tints rather
+// than `fg-inverted/NN`: Tailwind cannot inject an alpha channel into an arbitrary
+// `var(--color-…)`, so an opacity modifier on `fg-inverted` would be a no-op; the
+// `fg-inverted` token IS white, so `text-white` is the same colour, alpha-capable.)
+// The green bar (#22c55e on #242423) is a NON-TEXT graphical indicator (~5.6:1,
+// above the 3:1 non-text minimum). The progress track is `aria-hidden`; when a
+// numeric value matters, expose it in the header (text), not the bar.
+
+import type { ReactNode } from 'react'
+import { uic } from '../../utils/uic'
+
+/** The dark status-module shell (inverted surface + white text). */
+export const DeliveryStatusModuleRoot = uic('div', {
+	displayName: 'DeliveryStatusModule',
+	baseClass:
+		'grid gap-3 rounded-md bg-surface-inverted p-4 text-fg-inverted',
+})
+
+export interface DeliveryStatusModuleProps {
+	/** Status header — left-aligned headline (e.g. "Files ready"). */
+	heading: ReactNode
+	/** Optional right-aligned header annotation (e.g. "50 %", "3 ready"). */
+	headingMeta?: ReactNode
+	/** Muted status sentence under the header. */
+	statusText?: ReactNode
+	/**
+	 * Optional progress fraction in [0, 1]. When provided, renders the green
+	 * progress track. Clamped; the track itself is decorative (`aria-hidden`).
+	 */
+	progress?: number
+	/** Optional trailing pills / actions row (e.g. "ready" chips). */
+	children?: ReactNode
+	/** Forwarded test id. */
+	'data-testid'?: string
+}
+
+/**
+ * Black status module with an optional green progress bar. The visual heart of the
+ * delivery UI — stack it under a white output card or use it as a job-status card.
+ */
+export function DeliveryStatusModule({
+	heading,
+	headingMeta,
+	statusText,
+	progress,
+	children,
+	'data-testid': testId,
+}: DeliveryStatusModuleProps): React.ReactNode {
+	const hasProgress = progress != null
+	const pct = hasProgress ? Math.max(0, Math.min(1, progress)) * 100 : 0
+
+	return (
+		<DeliveryStatusModuleRoot data-testid={testId}>
+			<div className="flex items-center justify-between gap-4 text-sm font-medium">
+				<span>{heading}</span>
+				{headingMeta != null ? <span>{headingMeta}</span> : null}
+			</div>
+
+			{statusText != null ? (
+				<p className="m-0 text-xs text-white/70">{statusText}</p>
+			) : null}
+
+			{hasProgress ? (
+				<div
+					className="h-2 overflow-hidden rounded-full bg-white/25"
+					aria-hidden="true"
+				>
+					<span
+						className="block h-full rounded-full bg-success transition-[width]"
+						style={{ width: `${pct}%` }}
+					/>
+				</div>
+			) : null}
+
+			{children != null ? (
+				<div className="flex flex-wrap items-center gap-2 text-xs text-white/80">
+					{children}
+				</div>
+			) : null}
+		</DeliveryStatusModuleRoot>
+	)
+}
+
+/** A hairline "ready" pill for the trailing actions row (inverted palette). */
+export const DeliveryStatusPill = uic('span', {
+	displayName: 'DeliveryStatusPill',
+	baseClass:
+		'inline-flex min-h-5 items-center rounded-full border border-white/30 px-3',
+})

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>
+	)
+}