@atelic-action/ui 0.17.2 → 1.0.0

package/src/sections/ComparisonTable.tsx

@@ -0,0 +1,114 @@
+import type { ReactNode } from "react";
+
+/**
+ * A graded before and after: one row per graded item, each side carrying a grade and
+ * the points behind it. Built for case studies, where the reader's question is
+ * "what actually changed", and the answer has to survive being scanned.
+ *
+ * The grade sits beside its points rather than above them, and an "after"
+ * grade takes the primary color only when it differs from its "before", so
+ * running an eye down the last column finds every change without reading.
+ *
+ * Row labels, grades and copy all arrive as props: the component knows
+ * nothing about clients or scoring scales.
+ */
+
+export interface ComparisonState {
+	/**
+	 * A grade for this side. A single character renders as a large letter;
+	 * anything longer renders as a small mono note, which is how an ungraded
+	 * state ("not measured") says so without being handed a letter it did not
+	 * earn.
+	 */
+	grade: string;
+	/** What was true. One point renders as prose, several as a list. */
+	points: ReactNode[];
+}
+
+export interface ComparisonRow {
+	id: string;
+	/** The row label, e.g. the thing being graded. */
+	stage: string;
+	before: ComparisonState;
+	after: ComparisonState;
+}
+
+export interface ComparisonTableProps {
+	rows: ComparisonRow[];
+	/** Column headers. Defaults suit a before and after. */
+	columns?: { stage?: string; before?: string; after?: string };
+	/** Small print under the table, e.g. what the grades mean. */
+	footnote?: ReactNode;
+	className?: string;
+}
+
+function Cell({ state, highlight }: { state: ComparisonState; highlight: boolean }) {
+	const isLetter = state.grade.length === 1;
+	return (
+		<div className="cmp-cell">
+			<span
+				className={["cmp-grade", isLetter ? "is-letter" : "is-note", highlight ? "is-moved" : ""]
+					.filter(Boolean)
+					.join(" ")}
+			>
+				{state.grade}
+			</span>
+			<div className="cmp-points">
+				{state.points.length === 1 ? (
+					state.points[0]
+				) : (
+					<ul>
+						{state.points.map((point, i) => (
+							// biome-ignore lint/suspicious/noArrayIndexKey: a row's points are static and never reorder.
+							<li key={i}>{point}</li>
+						))}
+					</ul>
+				)}
+			</div>
+		</div>
+	);
+}
+
+export function ComparisonTable({ rows, columns, footnote, className }: ComparisonTableProps) {
+	const heads = {
+		stage: columns?.stage ?? "Area",
+		before: columns?.before ?? "Before",
+		after: columns?.after ?? "After",
+	};
+
+	return (
+		<div className={["comparison", className].filter(Boolean).join(" ")}>
+			<div className="cmp-scroll">
+				<table className="cmp-table">
+					<colgroup>
+						<col className="cmp-col-stage" />
+						<col className="cmp-col-half" />
+						<col className="cmp-col-half" />
+					</colgroup>
+					<thead>
+						<tr>
+							<th>{heads.stage}</th>
+							<th>{heads.before}</th>
+							<th>{heads.after}</th>
+						</tr>
+					</thead>
+					<tbody>
+						{rows.map((row) => (
+							<tr key={row.id}>
+								<th scope="row">{row.stage}</th>
+								<td>
+									<Cell state={row.before} highlight={false} />
+								</td>
+								<td className="is-after">
+									<Cell state={row.after} highlight={row.before.grade !== row.after.grade} />
+								</td>
+							</tr>
+						))}
+					</tbody>
+				</table>
+			</div>
+
+			{footnote && <p className="cmp-footnote">{footnote}</p>}
+		</div>
+	);
+}

package/src/sections/ContactForm.tsx

@@ -0,0 +1,163 @@
+import { type FormEvent, type ReactNode, useState } from "react";
+import { isHoneypotFilled } from "../lib/honeypot";
+import { trackEvent } from "../lib/trackEvent";
+import { Button } from "../primitives/Button";
+import { useWithBase } from "../routing/BasePathProvider";
+
+export interface ContactFormProps {
+	/**
+	 * POST target for a real form backend (e.g. "/api/contact"). The body is
+	 * JSON: { name, email, topic, message, company } where company is the
+	 * honeypot and must be relayed verbatim. When omitted, the form falls
+	 * back to a mailto handoff via toEmail.
+	 */
+	endpoint?: string;
+	/** Destination inbox for the mailto fallback (required without endpoint). */
+	toEmail?: string;
+	/** Options for the topic select. */
+	topics: string[];
+	/** Message shown after a successful submit (or after the mail draft opens). */
+	successMessage: string;
+	/** Message shown when the endpoint submission fails. */
+	errorMessage?: string;
+	/** Small footer line under the submit button. */
+	footnote?: ReactNode;
+	/**
+	 * Called once for each human submission the endpoint accepted: never on a
+	 * press of the button, a failed send, a honeypot catch, or the mailto
+	 * handoff. Defaults to the GA4 `generate_lead` event with
+	 * `form_name: "contact"`, a silent no op on a page without the Google tag.
+	 * It is passed nothing, so no personal data can ride along.
+	 */
+	onLead?: () => void;
+}
+
+function sendLead() {
+	trackEvent("generate_lead", { form_name: "contact" });
+}
+
+interface FieldErrors {
+	name?: boolean;
+	email?: boolean;
+	message?: boolean;
+}
+
+type Status = "idle" | "sending" | "sent" | "failed";
+
+const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+/**
+ * Contact form with client validation and a honeypot. POSTs to `endpoint`
+ * when one is configured; otherwise hands off to the visitor's mail app.
+ */
+export function ContactForm({
+	endpoint,
+	toEmail,
+	topics,
+	successMessage,
+	errorMessage = "Something went wrong sending your message. Please try again.",
+	footnote,
+	onLead = sendLead,
+}: ContactFormProps) {
+	const withBase = useWithBase();
+	const [errors, setErrors] = useState<FieldErrors>({});
+	const [status, setStatus] = useState<Status>("idle");
+
+	async function handleSubmit(event: FormEvent<HTMLFormElement>) {
+		event.preventDefault();
+		if (status === "sending") return;
+		const form = event.currentTarget;
+		const data = new FormData(form);
+		const name = String(data.get("name") ?? "").trim();
+		const email = String(data.get("email") ?? "").trim();
+		const topic = String(data.get("topic") ?? "");
+		const message = String(data.get("message") ?? "").trim();
+		const company = String(data.get("company") ?? "");
+
+		const nextErrors: FieldErrors = {
+			name: !name,
+			email: !EMAIL_PATTERN.test(email),
+			message: !message,
+		};
+		setErrors(nextErrors);
+		if (nextErrors.name || nextErrors.email || nextErrors.message) {
+			setStatus("idle");
+			return;
+		}
+
+		if (!endpoint) {
+			if (!toEmail) {
+				setStatus("failed");
+				return;
+			}
+			const subject = encodeURIComponent(`Website inquiry: ${topic}`);
+			const body = encodeURIComponent(`${name} (${email}) wrote:\n\n${message}`);
+			setStatus("sent");
+			window.location.href = `mailto:${toEmail}?subject=${subject}&body=${body}`;
+			return;
+		}
+
+		setStatus("sending");
+		try {
+			const response = await fetch(withBase(endpoint), {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({ name, email, topic, message, company }),
+			});
+			if (!response.ok) throw new Error(`status ${response.status}`);
+			setStatus("sent");
+			form.reset();
+			// The conversion: only a relay the endpoint accepted counts, never a
+			// press of the button, a failed send, or a honeypot catch (which the
+			// relay answers with the same success so the bot never learns). No
+			// personal data rides along.
+			if (!isHoneypotFilled(company)) onLead();
+		} catch {
+			setStatus("failed");
+		}
+	}
+
+	return (
+		<form onSubmit={handleSubmit} noValidate>
+			{status === "sent" && <div className="form-success">{successMessage}</div>}
+			{status === "failed" && <div className="form-error">{errorMessage}</div>}
+			<div className={["field", errors.name && "invalid"].filter(Boolean).join(" ")}>
+				<label htmlFor="contact-name">Your name</label>
+				<input id="contact-name" name="name" type="text" autoComplete="name" required />
+				<span className="err">Please enter your name.</span>
+			</div>
+			<div className={["field", errors.email && "invalid"].filter(Boolean).join(" ")}>
+				<label htmlFor="contact-email">Email</label>
+				<input id="contact-email" name="email" type="email" autoComplete="email" required />
+				<span className="err">Please enter a valid email.</span>
+			</div>
+			<div className="field">
+				<label htmlFor="contact-topic">What can we help with?</label>
+				<select id="contact-topic" name="topic">
+					{topics.map((topic) => (
+						<option key={topic}>{topic}</option>
+					))}
+				</select>
+			</div>
+			<div className={["field", errors.message && "invalid"].filter(Boolean).join(" ")}>
+				<label htmlFor="contact-message">Message</label>
+				<textarea id="contact-message" name="message" required />
+				<span className="err">Please add a short message.</span>
+			</div>
+			{/* Honeypot: visually hidden and skipped by keyboard/screen readers;
+			    bots that fill it are quietly dropped by the backend. */}
+			<div className="hp-field" aria-hidden="true">
+				<label htmlFor="contact-company">Company</label>
+				<input id="contact-company" name="company" type="text" tabIndex={-1} autoComplete="off" />
+			</div>
+			<Button type="submit" size="lg" arrow style={{ width: "100%" }}>
+				{status === "sending" ? "Sending…" : "Send Message"}
+			</Button>
+			{footnote && (
+				<p className="muted form-footnote" style={{ fontSize: "0.82rem", marginTop: 14 }}>
+					{footnote}
+				</p>
+			)}
+		</form>
+	);
+}

package/src/sections/ContactInfoCard.tsx

@@ -0,0 +1,92 @@
+import { newTabProps } from "../lib/newTabProps";
+import { useWithBase } from "../routing/BasePathProvider";
+import type { SiteConfig } from "./siteConfig";
+
+export interface ContactPhone {
+	/** Who picks up, e.g. "Owner" or "Co Owner". */
+	role: string;
+	display: string;
+	e164: string;
+}
+
+/** The keys of the site config the card reads; a whole `SiteConfig` passes as it is. */
+export type ContactInfoCardSite = Pick<SiteConfig, "phone" | "email" | "address" | "footerLinks">;
+
+export interface ContactInfoCardProps {
+	site: ContactInfoCardSite;
+	/** Card heading. */
+	title?: string;
+	/**
+	 * Labelled phone lines for a business that publishes more than one (a
+	 * family shop with an owner and a co owner, say). When set, these replace
+	 * the single `site.phone` row and each carries its own role label.
+	 */
+	phones?: ContactPhone[];
+	/**
+	 * Render the street address row. Off for businesses that publish a service
+	 * area but no storefront: an address row with an empty street reads as a
+	 * broken card, and inventing one is worse.
+	 */
+	showAddress?: boolean;
+}
+
+/** Dark card with direct contact rows: call, email, visit, portal. */
+export function ContactInfoCard({
+	site,
+	title = "Reach us directly",
+	phones,
+	showAddress = true,
+}: ContactInfoCardProps) {
+	const withBase = useWithBase();
+	const portal = site.footerLinks?.find((link) => link.label.toLowerCase().includes("portal"));
+	return (
+		<div className="contact-info-card">
+			<h3>{title}</h3>
+			<div className="ci-rows">
+				{phones?.length
+					? phones.map((phone) => (
+							<div className="ci-row" key={phone.e164}>
+								<span className="k">{phone.role}</span>
+								<span className="v">
+									<a href={`tel:${phone.e164}`}>{phone.display}</a>
+								</span>
+							</div>
+						))
+					: site.phone && (
+							<div className="ci-row">
+								<span className="k">Call / Text</span>
+								<span className="v">
+									<a href={`tel:${site.phone.e164}`}>{site.phone.display}</a>
+								</span>
+							</div>
+						)}
+				<div className={["ci-row", !showAddress && !portal && "last"].filter(Boolean).join(" ")}>
+					<span className="k">Email</span>
+					<span className="v">
+						<a href={`mailto:${site.email}`}>{site.email}</a>
+					</span>
+				</div>
+				{showAddress && (
+					<div className="ci-row">
+						<span className="k">Visit</span>
+						<span className="v">
+							{site.address.street}
+							<br />
+							{site.address.locality}, {site.address.region} {site.address.postalCode}
+						</span>
+					</div>
+				)}
+				{portal && (
+					<div className="ci-row last">
+						<span className="k">Portal</span>
+						<span className="v">
+							<a href={withBase(portal.href)} {...newTabProps(portal.href, portal.external)}>
+								{portal.label} →
+							</a>
+						</span>
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}

package/src/sections/CredentialList.tsx

@@ -0,0 +1,28 @@
+export interface Credential {
+	/** Short mono code, e.g. "DPT", "OCS". */
+	code: string;
+	title: string;
+	detail?: string;
+}
+
+export interface CredentialListProps {
+	items: Credential[];
+	className?: string;
+}
+
+/** Card rows of credentials or certifications with mono code prefixes. */
+export function CredentialList({ items, className }: CredentialListProps) {
+	return (
+		<ul className={["cert-list", className].filter(Boolean).join(" ")}>
+			{items.map((item) => (
+				<li key={item.code + item.title}>
+					<span className="ci">{item.code}</span>
+					<div>
+						<strong>{item.title}</strong>
+						{item.detail && <small>{item.detail}</small>}
+					</div>
+				</li>
+			))}
+		</ul>
+	);
+}

package/src/sections/DeviceShowcase.tsx

@@ -0,0 +1,39 @@
+import { useWithBase } from "../routing/BasePathProvider";
+
+export interface DeviceImage {
+	src: string;
+	alt: string;
+}
+
+export interface DeviceShowcaseProps {
+	/** Desktop screenshot, shown inside a browser window frame. */
+	desktop: DeviceImage;
+	/** Phone screenshot, shown in a device frame overlapping the desktop. */
+	phone: DeviceImage;
+}
+
+/**
+ * A desktop browser mockup with a phone mockup overlapping its lower-left,
+ * for showing a rebuilt site the way it will actually look. Reusable; both
+ * images arrive via props.
+ */
+export function DeviceShowcase({ desktop, phone }: DeviceShowcaseProps) {
+	const withBase = useWithBase();
+	return (
+		<div className="devices">
+			<div className="dv-desktop">
+				<div className="dv-bar">
+					<i />
+					<i />
+					<i />
+				</div>
+				<div className="dv-screen">
+					<img src={withBase(desktop.src)} alt={desktop.alt} loading="lazy" />
+				</div>
+			</div>
+			<div className="dv-phone">
+				<img src={withBase(phone.src)} alt={phone.alt} loading="lazy" />
+			</div>
+		</div>
+	);
+}

package/src/sections/ExpandList.tsx

@@ -0,0 +1,58 @@
+import { ChevronDown } from "lucide-react";
+import { type ReactNode, useState } from "react";
+import { useOpenHeight } from "../lib/useOpenHeight";
+
+export interface ExpandListItem {
+	title: string;
+	body: ReactNode;
+}
+
+export interface ExpandListProps {
+	items: ExpandListItem[];
+	className?: string;
+}
+
+function ExpandRow({ index, item }: { index: number; item: ExpandListItem }) {
+	const [open, setOpen] = useState(false);
+	const { ref, maxHeight } = useOpenHeight(open);
+	const num = String(index + 1).padStart(2, "0");
+
+	return (
+		<div className={["xl-row", open && "open"].filter(Boolean).join(" ")}>
+			<button
+				type="button"
+				className="xl-head"
+				aria-expanded={open}
+				onClick={() => setOpen((prev) => !prev)}
+			>
+				<span className="xl-num">{num}</span>
+				<span className="xl-title">{item.title}</span>
+				<ChevronDown className="xl-chevron" size={18} strokeWidth={2} aria-hidden="true" />
+			</button>
+			{/* Closed, the body stays in the HTML but is inert: out of the tab
+			    order and a screen reader's reach while it is clipped to nothing. */}
+			<div className="xl-body" style={{ maxHeight }} inert={!open}>
+				<div className="xl-body-inner" ref={ref}>
+					{item.body}
+				</div>
+			</div>
+		</div>
+	);
+}
+
+/**
+ * A light accordion of numbered fold-out rows: mono index, title, and an
+ * expandable body — for amenity lists, add-ons, and other compact
+ * disclosures that don't warrant the full FAQBrowser help center. Bodies
+ * ship in the static HTML (collapsed visually, present for crawlers),
+ * matching how FAQBrowser handles answers.
+ */
+export function ExpandList({ items, className }: ExpandListProps) {
+	return (
+		<div className={["expand-list", className].filter(Boolean).join(" ")}>
+			{items.map((item, index) => (
+				<ExpandRow key={item.title} index={index} item={item} />
+			))}
+		</div>
+	);
+}