{image ? ( <>

{/* Fades the photo into the background towards the bottom, where the text sits. */}

) : null} {pattern ?

: null}

{children}

); } interface StoryPartProps { style?: CSSProperties; children?: ReactNode; } /** A row at the top: a `StoryBrand` at the start and, say, a date `StoryChip` at the end. */ function StoryHeader({ style, children }: StoryPartProps) { return (

{children}

); } interface StoryBrandProps { name: string; /** A URL that allows CORS, or a data URL. */ logo?: string; style?: CSSProperties; } /** The logo and name of whoever posts the story. */ function StoryBrand({ name, logo, style }: StoryBrandProps) { return (

{logo ? (

) : null}

{name}

); } /** A short label above the title, in the accent: "Free slots", "New", "This Friday". */ function StoryEyebrow({ style, children }: StoryPartProps) { return (

{children}

); } function textLength(node: ReactNode): number { if (typeof node === "string" || typeof node === "number") return String(node).length; if (Array.isArray(node)) return node.reduce((sum: number, child) => sum + textLength(child), 0); if (isValidElement<{ children?: ReactNode }>(node)) return textLength(node.props.children); return 0; } interface StoryTitleProps extends StoryPartProps { /** Font size in px. By default it gets smaller as the title gets longer, to stay within `lines`. */ size?: number; /** Lines before it is cut with an ellipsis. */ lines?: number; } /** The headline, large and tight. */ function StoryTitle({ size, lines = 3, style, children }: StoryTitleProps) { const length = textLength(children); const fontSize = size ?? (length <= 12 ? 150 : length <= 20 ? 124 : length <= 32 ? 104 : length <= 48 ? 88 : 76); return (

{children}

); } interface StoryTextProps extends StoryPartProps { size?: number; lines?: number; } /** A line or two in the muted colour: the day, the place, the details. */ function StoryText({ size = 46, lines = 3, style, children }: StoryTextProps) { return (

{children}

); } interface StoryBodyProps extends StoryPartProps { justify?: "start" | "center" | "end"; gap?: number; } /** * Takes the height the other parts leave, so the footer stays at the * bottom of the safe area. What does not fit is clipped: give grids and * lists a `max`. */ function StoryBody({ justify = "start", gap = 28, style, children }: StoryBodyProps) { return (

{children}

); } type StoryVariant = "solid" | "soft" | "outline" | "muted"; function look(variant: StoryVariant | "dashed") { switch (variant) { case "soft": return { backgroundColor: v.surface, borderColor: "rgba(0, 0, 0, 0)", color: v.foreground }; case "outline": return { backgroundColor: "rgba(0, 0, 0, 0)", borderColor: v.accent, color: v.foreground }; case "muted": return { backgroundColor: v.surface, borderColor: "rgba(0, 0, 0, 0)", color: v.muted }; case "dashed": return { backgroundColor: "rgba(0, 0, 0, 0)", borderColor: v.border, color: v.foreground }; default: return { backgroundColor: v.accent, borderColor: v.accent, color: v.accentForeground }; } } /** Keeps the first `max` items; the last place goes to a "+N" for the rest. */ function limit(children: ReactNode, max: number | undefined) { const items = Children.toArray(children); if (!max || items.length <= max) return { items, hidden: 0 }; const shown = items.slice(0, Math.max(0, max - 1)); return { items: shown, hidden: items.length - shown.length }; } interface StoryTileProps { label: ReactNode; /** A smaller line under the label: a price, "2 left". */ note?: ReactNode; /** `solid` in the accent, `soft` on the surface, `outline`, or `muted` for what is gone. */ variant?: StoryVariant; /** Strikes the label through, for what is taken or sold out. */ strike?: boolean; /** What screen readers hear instead of the text, e.g. "19h, taken". Used by `storyAlt`. */ alt?: string; style?: CSSProperties; } function labelSize(length: number) { if (length <= 4) return 64; if (length <= 6) return 56; if (length <= 9) return 46; return 38; } /** One cell of a `StoryGrid`: a time, a size, a seat. */ function StoryTile({ label, note, variant = "solid", strike, style }: StoryTileProps) { return (

{label}

{note ? (

{note}

) : null} ); } function StoryTileBox({ variant, style, children, }: { variant: StoryVariant | "dashed"; style?: CSSProperties; children: ReactNode; }) { const colors = look(variant); return (

{children}

); } interface StoryGridProps extends StoryPartProps { columns?: number; gap?: number; /** The most cells shown; the last one becomes `more` for the rest. */ max?: number; /** Label of the cell that stands for what did not fit. */ more?: (hidden: number) => string; /** Width the grid fills, in px. The content width by default. */ width?: number; } /** Tiles in rows of `columns`, ending in "+N" when there are more than `max`. */ function StoryGrid({ columns = 3, gap = 24, max, more = (hidden) => `+${hidden}`, width = STORY_CONTENT_WIDTH, style, children, }: StoryGridProps) { const { items, hidden } = limit(children, max); const cell = Math.floor((width - gap * (columns - 1)) / columns); const moreLabel = hidden > 0 ? more(hidden) : ""; return (

{items.map((item, index) => (

{item}

))} {hidden > 0 ? (

{moreLabel}

) : null}

); } interface StoryChipProps { children: ReactNode; variant?: StoryVariant; strike?: boolean; alt?: string; style?: CSSProperties; } /** A pill: a time in a row, a date in the header, a price, "New". */ function StoryChip({ variant = "soft", strike, style, children }: StoryChipProps) { return (

{children}

); } interface StoryListProps extends StoryPartProps { /** Lines between rows. */ divider?: boolean; } /** Rows one under the other: a day per row, a menu, a line-up. */ function StoryList({ divider = true, style, children }: StoryListProps) { const rows = Children.toArray(children); return (

{rows.map((row, index) => isValidElement(row) ? cloneElement(row, { divider: divider && index < rows.length - 1 }) : row )}

); } interface StoryRowProps { /** At the start, in bold: "Mon", "Haircut". */ label: ReactNode; /** Under the label, muted: "30 min". */ detail?: ReactNode; /** At the end: a price, a time. */ value?: ReactNode; /** Chips between the label and the value. */ children?: ReactNode; /** The most chips shown; the last place says how many more. */ max?: number; more?: (hidden: number) => string; /** Width of the label column, in px, to line rows up. */ labelWidth?: number; /** Set by StoryList. */ divider?: boolean; style?: CSSProperties; } /** One row of a `StoryList`. */ function StoryRow({ label, detail, value, children, max, more = (hidden) => `+${hidden}`, labelWidth, divider, style, }: StoryRowProps) { const { items, hidden } = limit(children, max); return (

{label}

{detail ? (

{detail}

) : null}

{items} {hidden > 0 ? ( {more(hidden)} ) : null}

{value ? (

{value}

) : null}

); } interface StoryHighlightProps extends StoryPartProps { /** Above, muted: "Tonight at". */ label?: ReactNode; /** Below, muted: "Only one left". */ caption?: ReactNode; /** `accent` draws the big text in the accent colour. */ tone?: "default" | "accent"; /** Font size in px; by default it fits the length. */ size?: number; } /** One thing in very large type: a time, a date, a price, a score. */ function StoryHighlight({ label, caption, tone = "default", size, style, children, }: StoryHighlightProps) { const length = textLength(children); const fontSize = size ?? (length <= 3 ? 320 : length <= 5 ? 260 : length <= 8 ? 190 : 140); return (

{label ? (

{label}

) : null}

{children}

{caption ? (

{caption}

) : null}

); } interface StoryImageProps { /** A URL that allows CORS, or a data URL. */ src: string; height?: number; width?: number; style?: CSSProperties; } /** A photo inside the content, with the theme's corners. */ function StoryImage({ src, height = 560, width = STORY_CONTENT_WIDTH, style }: StoryImageProps) { return (

); } /** The bottom of the story: a `StoryCta` and a `StoryLinkHint`. */ function StoryFooter({ style, children }: StoryPartProps) { return (

{children}

); } interface StoryCtaProps extends StoryPartProps { variant?: "solid" | "outline"; /** An arrow after the text. */ arrow?: boolean; } /** The call to action: "Book through the link". */ function StoryCta({ variant = "solid", arrow = true, style, children }: StoryCtaProps) { const solid = variant === "solid"; const color = solid ? v.accentForeground : v.foreground; return (

{children}

{arrow ? : null}

); } function Arrow({ color }: { color: string }) { return ( ); } /** A small line pointing at where the link sticker goes: "Tap the link". */ function StoryLinkHint({ style, children }: StoryPartProps) { return (

{children}

); } /** A line across the content, in the border colour. */ function StoryDivider({ style }: { style?: CSSProperties }) { return (

); } type AnyProps = Record & { children?: ReactNode; alt?: unknown }; /** * The text of a story, in reading order, for the image's `alt`. Parts with * an `alt` prop (tiles, chips) are read by it instead of their text, so a * struck-through "19h" can say "19h, taken". * * @example * */ function storyAlt(story: ReactNode): string { const runs: string[] = []; const walk = (node: ReactNode) => { if (node === null || node === undefined || typeof node === "boolean") return; if (typeof node === "string" || typeof node === "number") { const text = String(node).trim(); if (text) runs.push(text); return; } if (Array.isArray(node)) { node.forEach(walk); return; } if (!isValidElement(node)) return; const { props, type } = node; if (typeof props.alt === "string" && type !== "img") { if (props.alt.trim()) runs.push(props.alt.trim()); return; } // Parts are plain functions without hooks, so they can be expanded here as Satori does. if (typeof type === "function") { walk((type as (props: AnyProps) => ReactNode)(props)); return; } walk(props.children); }; walk(story); return runs.map((run) => (/[.!?…:]$/.test(run) ? run : `${run}.`)).join(" "); } export { Story, STORY_CONTENT_WIDTH, STORY_THEMES, storyAlt, StoryBody, StoryBrand, StoryChip, StoryCta, StoryDivider, StoryEyebrow, StoryFooter, StoryGrid, StoryHeader, StoryHighlight, StoryImage, StoryLinkHint, StoryList, StoryRow, StoryText, StoryTile, StoryTitle, type StoryDecoration, type StoryProps, type StoryTheme, type StoryThemeName, type StoryVariant, }; ```