@atelic-action/ui 0.1.0 → 0.2.0

package/src/email/frame.tsx

@@ -0,0 +1,230 @@
+import { Fragment, type ReactNode } from "react";
+import { Card } from "./atoms";
+import { asciiDowncase } from "./text";
+import { eyebrowStyle, fadeStop, tableReset, useEmailTheme } from "./theme";
+
+/*
+ * The frame, ported one to one from the frame section of homebase
+ * `runners/lib/email.jq`. The page shell itself is not a component: it is a
+ * template string in render.tsx, because React emits no doctype and hoists
+ * head tags.
+ */
+
+export type MastheadProps = {
+	title: string;
+	/** The wordmark at the top left. */
+	wordmark?: string;
+};
+
+/**
+ * The wordmark and one orange rule at the top left, the email's title beside
+ * them: the runner's name, not the week.
+ */
+export function Masthead({ title, wordmark = "atelic" }: MastheadProps) {
+	const { palette, fonts } = useEmailTheme();
+	return (
+		<tr>
+			<td style={{ padding: "8px 8px 22px", fontFamily: fonts.sans }}>
+				<table {...tableReset}>
+					<tbody>
+						<tr>
+							<td
+								style={{
+									fontSize: "20px",
+									fontWeight: "600",
+									letterSpacing: "-0.045em",
+									color: palette.ink,
+									paddingRight: "8px",
+									lineHeight: "1",
+								}}
+							>
+								{wordmark}
+							</td>
+							<td
+								width="34"
+								style={{ width: "34px", verticalAlign: "middle", paddingRight: "12px" }}
+							>
+								<div
+									style={{
+										width: "34px",
+										height: "2px",
+										fontSize: "0",
+										lineHeight: "0",
+										backgroundColor: palette.accent,
+										background: `linear-gradient(90deg,${palette.accent},${fadeStop(palette.accent)})`,
+									}}
+								>
+									{"\u00a0"}
+								</div>
+							</td>
+							<td
+								style={{
+									...eyebrowStyle(fonts),
+									color: palette.faint,
+									verticalAlign: "middle",
+									lineHeight: "1",
+								}}
+							>
+								{title}
+							</td>
+						</tr>
+					</tbody>
+				</table>
+			</td>
+		</tr>
+	);
+}
+
+export type TitleCardProps = {
+	eyebrowText: string;
+	/** One to three short lines, broken between them. */
+	headlineLines: string[];
+	lede?: string;
+	/** Whatever rows the runner hands in under the lede: a StatsRow, a Scoreboard. */
+	stats?: ReactNode;
+};
+
+/** The title card: an eyebrow, a headline, a lede, and the runner's own rows. */
+export function TitleCard({ eyebrowText, headlineLines, lede, stats }: TitleCardProps) {
+	const { palette, fonts } = useEmailTheme();
+	return (
+		<Card>
+			<tr>
+				<td style={{ padding: "26px 26px 6px", ...eyebrowStyle(fonts), color: palette.faint }}>
+					{eyebrowText}
+				</td>
+			</tr>
+			<tr>
+				<td
+					style={{
+						padding: "0 26px",
+						fontFamily: fonts.sans,
+						fontSize: "30px",
+						fontWeight: "600",
+						letterSpacing: "-0.03em",
+						lineHeight: "1.1",
+						color: palette.ink,
+					}}
+				>
+					{headlineLines.map((line, i) => (
+						// biome-ignore lint/suspicious/noArrayIndexKey: a line's position is its identity
+						<Fragment key={i}>
+							{i > 0 ? <br /> : null}
+							{line}
+						</Fragment>
+					))}
+				</td>
+			</tr>
+			{lede ? (
+				<tr>
+					<td
+						style={{
+							padding: `14px 26px ${stats ? "0" : "26px"}`,
+							fontFamily: fonts.sans,
+							fontSize: "15px",
+							lineHeight: "1.6",
+							color: palette.dim,
+						}}
+					>
+						{lede}
+					</td>
+				</tr>
+			) : null}
+			{stats}
+		</Card>
+	);
+}
+
+export type FooterProps = { meta: string };
+
+/** One quiet line at the foot: the run's facts. */
+export function Footer({ meta }: FooterProps) {
+	const { palette, fonts } = useEmailTheme();
+	return (
+		<tr>
+			<td
+				style={{
+					padding: "36px 8px 0",
+					fontFamily: fonts.mono,
+					fontSize: "11px",
+					lineHeight: "1.8",
+					color: palette.faint,
+				}}
+			>
+				{meta}
+			</td>
+		</tr>
+	);
+}
+
+export type FailurePageProps = {
+	runnerTitle: string;
+	eyebrowText: string;
+	reason: string;
+	logTail: string;
+};
+
+/**
+ * The body rows of the failure page, in the same cream, so a bad week reads
+ * like a good one with the reason on top and the log's tail beneath.
+ */
+export function FailurePage({ runnerTitle, eyebrowText, reason, logTail }: FailurePageProps) {
+	const { palette, fonts } = useEmailTheme();
+	return (
+		<>
+			<Masthead title={runnerTitle} />
+			<Card>
+				<tr>
+					<td style={{ padding: "26px 26px 6px", ...eyebrowStyle(fonts), color: palette.faint }}>
+						{eyebrowText}
+					</td>
+				</tr>
+				<tr>
+					<td
+						style={{
+							padding: "0 26px",
+							fontFamily: fonts.sans,
+							fontSize: "30px",
+							fontWeight: "600",
+							letterSpacing: "-0.03em",
+							lineHeight: "1.1",
+							color: palette.ink,
+						}}
+					>
+						{`The ${asciiDowncase(runnerTitle)} did not run.`}
+					</td>
+				</tr>
+				<tr>
+					<td
+						style={{
+							padding: "14px 26px 0",
+							fontFamily: fonts.sans,
+							fontSize: "15px",
+							lineHeight: "1.6",
+							color: palette.dim,
+						}}
+					>
+						{reason}
+					</td>
+				</tr>
+				<tr>
+					<td style={{ padding: "20px 26px 26px" }}>
+						<pre
+							style={{
+								fontFamily: fonts.mono,
+								fontSize: "12px",
+								whiteSpace: "pre-wrap",
+								color: palette.dim,
+								borderTop: `1px solid ${palette.line}`,
+								paddingTop: "14px",
+								margin: "0",
+							}}
+						>
+							{logTail}
+						</pre>
+					</td>
+				</tr>
+			</Card>
+		</>
+	);
+}

package/src/email/index.ts

@@ -0,0 +1,98 @@
+export { atelicFonts, atelicPalette, type Fonts, type Palette } from "../tokens";
+export {
+	BigFold,
+	type BigFoldProps,
+	Card,
+	type CardProps,
+	EmptyRow,
+	type EmptyRowProps,
+	Eyebrow,
+	type EyebrowProps,
+	Fold,
+	type FoldProps,
+	FoldRow,
+	type FoldRowProps,
+	Item,
+	type ItemProps,
+	LeadRow,
+	type LeadRowProps,
+	List,
+	type ListProps,
+	ListRow,
+	type ListRowProps,
+	MonoTable,
+	type MonoTableProps,
+	Note,
+	type NoteProps,
+	Row,
+	type RowProps,
+	Stat,
+	type StatProps,
+	StatsRow,
+	type StatsRowProps,
+	TitleLine,
+	type TitleLineProps,
+} from "./atoms";
+export {
+	FailurePage,
+	type FailurePageProps,
+	Footer,
+	type FooterProps,
+	Masthead,
+	type MastheadProps,
+	TitleCard,
+	type TitleCardProps,
+} from "./frame";
+export {
+	Badge,
+	type BadgeProps,
+	Bar,
+	type BarProps,
+	type Day,
+	type DayEntry,
+	DayStrip,
+	type DayStripProps,
+	GroupRow,
+	type GroupRowProps,
+	ReadBlock,
+	type ReadBlockProps,
+	Records,
+	type RecordsCell,
+	type RecordsColumn,
+	type RecordsProps,
+	Scoreboard,
+	type ScoreboardProps,
+	StatStrip,
+	type StatStripEntry,
+	type StatStripProps,
+	SubEyebrow,
+	type SubEyebrowProps,
+	TargetRow,
+	type TargetRowProps,
+	WhatMoved,
+	type WhatMovedItem,
+	type WhatMovedProps,
+} from "./scoreboard";
+export {
+	asciiDowncase,
+	asciiUpcase,
+	lpad,
+	rpad,
+	spaces,
+	type TextTarget,
+	textBar,
+	textRead,
+	textRule,
+	textSection,
+	textTable,
+	textTableGrid,
+	textTarget,
+	wrap,
+} from "./text";
+export {
+	type EmailTheme,
+	EmailThemeProvider,
+	type EmailThemeProviderProps,
+	eyebrowStyle,
+	useEmailTheme,
+} from "./theme";

package/src/email/render.tsx

@@ -0,0 +1,116 @@
+import type { ReactNode } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { atelicFonts, atelicPalette, type Fonts, type Palette } from "../tokens";
+import { FailurePage } from "./frame";
+import { EmailThemeProvider } from "./theme";
+
+/*
+ * The page shell is a template string rather than JSX, and deliberately so:
+ * React emits no doctype, React 19 hoists and reorders head tags, and it would
+ * escape the `>` in `details>summary` inside a style block. Only the rows
+ * inside the 680 column go through React.
+ */
+
+/** jq's `esc`, in the same order, for the strings that land in the shell. */
+function esc(value: string): string {
+	return value
+		.replace(/&/g, "&")
+		.replace(/</g, "&lt;")
+		.replace(/>/g, "&gt;")
+		.replace(/"/g, "&quot;")
+		.replace(/'/g, "&#39;");
+}
+
+const WRAPPER_OPEN = "<table><tbody>";
+const WRAPPER_CLOSE = "</tbody></table>";
+
+/**
+ * Rows render inside a throwaway table so React's nesting validation sees a
+ * `<tr>` where one belongs; the wrapper is sliced back off.
+ */
+function renderRows(children: ReactNode, palette: Palette, fonts: Fonts): string {
+	const markup = renderToStaticMarkup(
+		<EmailThemeProvider palette={palette} fonts={fonts}>
+			<table>
+				<tbody>{children}</tbody>
+			</table>
+		</EmailThemeProvider>,
+	);
+	if (markup.startsWith(WRAPPER_OPEN) && markup.endsWith(WRAPPER_CLOSE)) {
+		return markup.slice(WRAPPER_OPEN.length, markup.length - WRAPPER_CLOSE.length);
+	}
+	return markup;
+}
+
+export type RenderEmailOptions = {
+	title: string;
+	/** The inbox preview line, hidden in the body. */
+	preheader?: string;
+	/** The rows inside the 680 column: a Masthead, cards, a Footer. */
+	children?: ReactNode;
+	palette?: Palette;
+	fonts?: Fonts;
+};
+
+/** The whole document: preheader for the inbox preview, the 680 column, the rows. */
+export function renderEmail({
+	title,
+	preheader,
+	children,
+	palette = atelicPalette,
+	fonts = atelicFonts,
+}: RenderEmailOptions): string {
+	const ground = palette.ground;
+	const rows = renderRows(children, palette, fonts);
+	return (
+		`<!doctype html><html lang="en"><head><meta charset="utf-8">` +
+		`<meta name="viewport" content="width=device-width, initial-scale=1">` +
+		`<meta name="color-scheme" content="light"><title>${esc(title)}</title>` +
+		`<style>body{margin:0;padding:0;background:${ground}}a{color:${palette.ink}}` +
+		`details>summary{list-style:none}details>summary::-webkit-details-marker{display:none}` +
+		`@media (max-width:700px){.wrap{width:100%!important}}</style></head>` +
+		`<body style="margin:0;padding:0;background:${ground};-webkit-text-size-adjust:100%">` +
+		(preheader
+			? `<span style="display:none;font-size:1px;color:${ground};max-height:0;overflow:hidden">${esc(preheader)}</span>`
+			: "") +
+		`<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="background:${ground}">` +
+		`<tr><td align="center" style="padding:28px 12px 48px">` +
+		`<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="680" class="wrap" style="width:680px;max-width:680px">` +
+		rows +
+		`</table></td></tr></table></body></html>`
+	);
+}
+
+export type RenderFailureEmailOptions = {
+	runnerTitle: string;
+	eyebrowText: string;
+	reason: string;
+	logTail: string;
+	palette?: Palette;
+	fonts?: Fonts;
+};
+
+/** The failure page: the reason on top and the log's tail beneath. */
+export function renderFailureEmail({
+	runnerTitle,
+	eyebrowText,
+	reason,
+	logTail,
+	palette,
+	fonts,
+}: RenderFailureEmailOptions): string {
+	return renderEmail({
+		title: `${runnerTitle}: did not run`,
+		preheader: reason,
+		palette,
+		fonts,
+		children: (
+			<FailurePage
+				runnerTitle={runnerTitle}
+				eyebrowText={eyebrowText}
+				reason={reason}
+				logTail={logTail}
+			/>
+		),
+	});
+}