@remit/ui 0.0.4 → 0.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/ui",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "type": "module",
   "files": [
     "src"

package/src/components/app-shell-types.ts

@@ -161,6 +161,7 @@ export interface NavLinkRenderProps {
 export type NavLinkComponent = (props: NavLinkRenderProps) => ReactElement;
 
 export type ThreadCategory =
+	| "uncategorized"
 	| "personal"
 	| "newsletter"
 	| "marketing"
@@ -182,6 +183,7 @@ export const briefCategories: ReadonlyArray<{
 }> = [
 	{ id: "all", label: "All" },
 	{ id: "personal", label: "Personal" },
+	{ id: "uncategorized", label: "Unclassified" },
 	{ id: "newsletter", label: "Newsletters" },
 	{ id: "marketing", label: "Marketing" },
 	{ id: "automated", label: "Automated" },
@@ -319,6 +321,7 @@ export const categoryTone: Record<
 	ThreadCategory,
 	"neutral" | "accent" | "positive" | "warning"
 > = {
+	uncategorized: "neutral",
 	personal: "accent",
 	newsletter: "neutral",
 	marketing: "neutral",

package/src/components/category-badge.tsx

@@ -1,6 +1,7 @@
 import { cn } from "../lib/cn.js";
 
 export type MessageCategory =
+	| "uncategorized"
 	| "personal"
 	| "newsletter"
 	| "marketing"
@@ -15,8 +16,14 @@ export type MessageCategory =
  * so it has no entry here. `transactional` shows as "receipt" and `automated`
  * shows as "notification" — wording chosen so the badge reads naturally next
  * to a subject line.
+ *
+ * `uncategorized` does render a badge. It used to be displayed as `personal`,
+ * which made "the classifier never ran on this message" indistinguishable from
+ * "the classifier decided this is a person writing to you" — a classification
+ * gap presented as a full personal inbox (issue #45).
  */
 const CATEGORY_LABELS: Record<Exclude<MessageCategory, "personal">, string> = {
+	uncategorized: "unclassified",
 	newsletter: "newsletter",
 	marketing: "marketing",
 	automated: "notification",

package/src/components/slide-panel.render.test.ts

@@ -0,0 +1,85 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { SlidePanel, type SlidePanelProps } from "./slide-panel.js";
+
+const render = (isOpen: boolean) =>
+	renderToStaticMarkup(
+		createElement(
+			SlidePanel,
+			// createElement never folds the children argument into the props type,
+			// so a component with required children needs the props cast.
+			{
+				isOpen,
+				onClose: () => undefined,
+				title: "Add Account",
+			} as SlidePanelProps,
+			"panel body",
+		),
+	);
+
+/** The panel element itself, as distinct from the scrim behind it. */
+const dialog = (html: string): string => {
+	const match = html.match(/<div[^>]*role="dialog"[^>]*>/);
+	assert.ok(match, "no dialog element rendered");
+	return match[0];
+};
+
+/** The click-to-dismiss scrim: the first element, before the dialog. */
+const scrim = (html: string): string => {
+	const match = html.match(/^<div[^>]*>/);
+	assert.ok(match, "no scrim element rendered");
+	return match[0];
+};
+
+describe("SlidePanel (#57)", () => {
+	it("is a fixed right-edge column, never a full-viewport takeover above sm", () => {
+		const html = render(true);
+		assert.match(html, /fixed top-0 right-0/);
+		assert.match(html, /sm:w-\[400px\]/);
+		assert.match(html, /translate-x-0/);
+	});
+
+	it("a closed panel is off-canvas and takes no pointer events", () => {
+		const html = render(false);
+		assert.match(html, /translate-x-full/);
+		assert.match(html, /pointer-events-none/);
+	});
+
+	it("a closed panel is inert and hidden from assistive tech", () => {
+		const tag = dialog(render(false));
+		assert.match(tag, /inert=""/);
+		assert.match(tag, /aria-hidden="true"/);
+	});
+
+	it("an open panel is reachable", () => {
+		const tag = dialog(render(true));
+		assert.doesNotMatch(tag, /inert=""/);
+		assert.match(tag, /aria-hidden="false"/);
+		assert.match(tag, /role="dialog"/);
+	});
+
+	it("scrolls its body rather than the page", () => {
+		const html = render(true);
+		assert.match(html, /overflow-auto/);
+	});
+
+	/**
+	 * The scrim is a pointer shortcut for the header's Close button, not a
+	 * control of its own: posing as a focusable button while answering only
+	 * Escape strands a keyboard user on a thing that looks activatable.
+	 */
+	it("the scrim never poses as a focusable control", () => {
+		for (const html of [render(true), render(false)]) {
+			const tag = scrim(html);
+			assert.doesNotMatch(tag, /role="button"/);
+			assert.doesNotMatch(tag, /tabindex=/);
+			assert.match(tag, /aria-hidden="true"/);
+		}
+	});
+
+	it("always offers a labelled close control in the header", () => {
+		assert.match(render(true), /aria-label="Close"/);
+	});
+});

package/src/components/slide-panel.stories.tsx

@@ -0,0 +1,129 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import { Button } from "./button.js";
+import { FieldLabel } from "./field-label.js";
+import { Input } from "./input.js";
+import { SlidePanel } from "./slide-panel.js";
+
+const meta: Meta<typeof SlidePanel> = {
+	title: "Components/SlidePanel",
+	component: SlidePanel,
+	parameters: { layout: "fullscreen" },
+};
+export default meta;
+
+type Story = StoryObj<typeof SlidePanel>;
+
+const backdropRows = Array.from({ length: 12 }, (_, i) => `Row ${i + 1}`);
+
+const Backdrop = () => (
+	<div className="h-dvh space-y-3 bg-canvas p-6">
+		<h1 className="text-md font-semibold text-fg">Screen behind the panel</h1>
+		{backdropRows.map((row) => (
+			<div
+				key={row}
+				className="rounded-sm border border-line bg-surface px-4 py-3 text-sm text-fg-muted"
+			>
+				{row}
+			</div>
+		))}
+	</div>
+);
+
+const Body = () => (
+	<div className="space-y-4">
+		<div>
+			<FieldLabel htmlFor="slide-panel-email">Email address</FieldLabel>
+			<Input id="slide-panel-email" placeholder="alice@example.com" />
+		</div>
+		<div>
+			<FieldLabel htmlFor="slide-panel-name">Display name</FieldLabel>
+			<Input id="slide-panel-name" placeholder="Alice" />
+		</div>
+	</div>
+);
+
+const Footer = ({ onClose }: { onClose: () => void }) => (
+	<>
+		<Button variant="secondary" size="sm" onClick={onClose}>
+			Cancel
+		</Button>
+		<Button variant="primary" size="sm">
+			Save
+		</Button>
+	</>
+);
+
+/** Open: a fixed-width column at the right edge, the screen behind it dimmed. */
+export const Open: Story = {
+	globals: { viewport: { value: "desktop" } },
+	render: () => (
+		<>
+			<Backdrop />
+			<SlidePanel isOpen onClose={() => {}} title="Add Account" footer={null}>
+				<Body />
+			</SlidePanel>
+		</>
+	),
+};
+
+/**
+ * Closed. The panel stays mounted so it can animate, so this is the state that
+ * has to be provably invisible: a closed panel that is not pushed off-canvas
+ * takes over the whole screen (#57).
+ */
+export const Closed: Story = {
+	globals: { viewport: { value: "desktop" } },
+	render: () => (
+		<>
+			<Backdrop />
+			<SlidePanel
+				isOpen={false}
+				onClose={() => {}}
+				title="Add Account"
+				footer={null}
+			>
+				<Body />
+			</SlidePanel>
+		</>
+	),
+};
+
+/** On a phone the panel owns the full width. */
+export const Phone: Story = {
+	globals: { viewport: { value: "mobile" } },
+	render: () => (
+		<>
+			<Backdrop />
+			<SlidePanel isOpen onClose={() => {}} title="Add Account" footer={null}>
+				<Body />
+			</SlidePanel>
+		</>
+	),
+};
+
+/** Opening and closing from the screen behind it. */
+export const Interactive: Story = {
+	globals: { viewport: { value: "desktop" } },
+	render: function Render() {
+		const [open, setOpen] = useState(false);
+		return (
+			<>
+				<div className="h-dvh space-y-3 bg-canvas p-6">
+					<Button variant="primary" size="sm" onClick={() => setOpen(true)}>
+						Add account
+					</Button>
+					<Backdrop />
+				</div>
+				<SlidePanel
+					isOpen={open}
+					onClose={() => setOpen(false)}
+					title="Add Account"
+					footer={<Footer onClose={() => setOpen(false)} />}
+				>
+					<Body />
+				</SlidePanel>
+			</>
+		);
+	},
+};

package/src/components/slide-panel.tsx

@@ -0,0 +1,92 @@
+import { X } from "lucide-react";
+import { type ReactNode, useEffect } from "react";
+import { cn } from "../lib/cn.js";
+
+/* ------------------------------------------------------------------ */
+/* SlidePanel: right-edge slide-over for a focused sub-task (editing   */
+/* an account) without leaving the screen behind it. Full width on     */
+/* phones, a fixed-width column from `sm` up.                          */
+/*                                                                     */
+/* A closed panel stays mounted so it can animate, so it must be inert */
+/* in every sense that is not visual: no pointer events, out of the    */
+/* tab order, hidden from assistive technology.                        */
+/* ------------------------------------------------------------------ */
+
+export interface SlidePanelProps {
+	isOpen: boolean;
+	onClose: () => void;
+	title: string;
+	children: ReactNode;
+	footer?: ReactNode;
+}
+
+export function SlidePanel({
+	isOpen,
+	onClose,
+	title,
+	children,
+	footer,
+}: SlidePanelProps) {
+	// Escape closes the panel from anywhere inside it, which is what a dialog
+	// owes the keyboard. The scrim is a pointer affordance only.
+	useEffect(() => {
+		if (!isOpen) return;
+		const onKeyDown = (event: KeyboardEvent) => {
+			if (event.key === "Escape") onClose();
+		};
+		document.addEventListener("keydown", onKeyDown);
+		return () => document.removeEventListener("keydown", onKeyDown);
+	}, [isOpen, onClose]);
+
+	return (
+		<>
+			{/* Click-to-dismiss scrim: a pointer shortcut for the header's Close
+			    button, never the only way out, so it stays out of the tab order and
+			    the a11y tree rather than posing as a control. */}
+			<div
+				className={cn(
+					"fixed inset-0 z-40 bg-black/30 transition-opacity",
+					isOpen ? "opacity-100" : "pointer-events-none opacity-0",
+				)}
+				onClick={onClose}
+				aria-hidden="true"
+			/>
+
+			<div
+				className={cn(
+					"fixed top-0 right-0 z-50 h-full w-full border-l border-line bg-canvas shadow-xl sm:w-[400px] sm:max-w-[90vw]",
+					"transform transition-transform duration-200 ease-out",
+					isOpen ? "translate-x-0" : "pointer-events-none translate-x-full",
+				)}
+				role="dialog"
+				aria-modal="true"
+				aria-hidden={!isOpen}
+				inert={!isOpen}
+				aria-labelledby="slide-panel-title"
+			>
+				<div className="flex h-14 items-center justify-between border-b border-line px-4">
+					<h2 id="slide-panel-title" className="font-semibold">
+						{title}
+					</h2>
+					<button
+						type="button"
+						onClick={onClose}
+						className="rounded-md p-1.5 transition-colors hover:bg-surface-raised"
+						aria-label="Close"
+					>
+						<X className="size-5" />
+					</button>
+				</div>
+
+				<div className="flex h-[calc(100%-3.5rem)] flex-col">
+					<div className="flex-1 overflow-auto p-4">{children}</div>
+					{footer && (
+						<div className="flex justify-end gap-3 border-t border-line bg-canvas p-4">
+							{footer}
+						</div>
+					)}
+				</div>
+			</div>
+		</>
+	);
+}

package/src/index.ts

@@ -342,6 +342,10 @@ export {
 	SettingsShell,
 	type SettingsShellProps,
 } from "./components/settings-screen.js";
+export {
+	SlidePanel,
+	type SlidePanelProps,
+} from "./components/slide-panel.js";
 export {
 	commitPeek,
 	SwipeableRow,

package/src/lib/email-render-treatment.ts

@@ -22,6 +22,7 @@
  * in fresh checkouts).
  */
 export type EmailRenderCategory =
+	| "uncategorized"
 	| "personal"
 	| "newsletter"
 	| "marketing"