@remit/ui 0.0.66 → 0.0.68

package/package.json

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

package/src/components/folder-row.render.test.ts

@@ -0,0 +1,81 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { FolderRow, type FolderRowProps } from "./folder-row.js";
+
+const render = (props: Partial<FolderRowProps>) =>
+	renderToString(
+		createElement(FolderRow, {
+			label: "Travel",
+			depth: 0,
+			expanded: false,
+			ariaLabel: "Move to Travel",
+			...props,
+		}),
+	);
+
+describe("FolderRow", () => {
+	it("is a tree item that carries its nesting and its label", () => {
+		const html = render({ depth: 2 });
+		assert.match(html, /<button[^>]*role="treeitem"/);
+		assert.match(html, /aria-level="3"/);
+		assert.match(html, /aria-label="Move to Travel"/);
+		assert.match(html, /aria-expanded="false"/);
+		assert.match(html, />Travel</);
+	});
+
+	it("indents by its depth and leaves a root flush", () => {
+		assert.match(render({ depth: 2 }), /width:28px/);
+		assert.doesNotMatch(render({ depth: 0 }), /style="width/);
+	});
+
+	it("turns the chevron once its children are on screen", () => {
+		assert.doesNotMatch(render({}), /rotate-90/);
+		assert.match(render({ expanded: true }), /rotate-90/);
+	});
+
+	it("checks the row that is the destination", () => {
+		const html = render({ selected: true });
+		assert.match(html, /aria-selected="true"/);
+		assert.match(html, /text-accent/);
+	});
+
+	it("leaves an unchosen row unselected and unchecked", () => {
+		const html = render({});
+		assert.match(html, /aria-selected="false"/);
+		assert.doesNotMatch(html, /text-accent/);
+	});
+
+	it("marks where the messages live now without disabling anything", () => {
+		const html = render({ current: true, currentTag: "current" });
+		assert.match(html, /aria-current="true"/);
+		assert.match(html, />current</);
+		assert.doesNotMatch(html, /disabled/);
+	});
+
+	it("renders a context branch as readable, not operable", () => {
+		const html = render({
+			context: true,
+			ariaLabel: "Travel (containing folder)",
+		});
+		assert.doesNotMatch(html, /<button/);
+		assert.match(html, /<div[^>]*role="treeitem"/);
+		assert.match(html, /aria-label="Travel \(containing folder\)"/);
+		assert.match(html, /opacity-60/);
+	});
+
+	it("insets the hairline to where the label starts", () => {
+		assert.match(render({ separated: true, depth: 1 }), /left:74px/);
+		assert.match(
+			render({ separated: true, depth: 1, context: true }),
+			/left:74px/,
+		);
+		assert.doesNotMatch(render({ depth: 1 }), /left:74px/);
+	});
+
+	it("takes its place in a roving tab order", () => {
+		assert.match(render({ tabIndex: 0 }), /tabindex="0"/);
+		assert.match(render({ tabIndex: -1 }), /tabindex="-1"/);
+	});
+});

package/src/components/folder-row.stories.tsx

@@ -0,0 +1,118 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import type { ReactNode } from "react";
+import { FolderRow } from "./folder-row.js";
+
+const meta: Meta<typeof FolderRow> = {
+	title: "Mail/FolderRow",
+	component: FolderRow,
+	parameters: { layout: "centered" },
+};
+export default meta;
+
+type Story = StoryObj<typeof FolderRow>;
+
+function List({ children }: { children: ReactNode }) {
+	return (
+		<div className="w-[320px] overflow-hidden rounded-lg border border-line bg-surface font-sans text-fg">
+			{children}
+		</div>
+	);
+}
+
+export const Closed: Story = {
+	name: "Closed",
+	render: () => (
+		<List>
+			<FolderRow
+				label="Travel"
+				depth={0}
+				expanded={false}
+				ariaLabel="Move to Travel"
+				tabIndex={0}
+			/>
+		</List>
+	),
+};
+
+export const Open: Story = {
+	name: "Open, with its children indented under it",
+	render: () => (
+		<List>
+			<FolderRow
+				label="Travel"
+				depth={0}
+				expanded
+				ariaLabel="Move to Travel"
+				separated
+			/>
+			<FolderRow
+				label="Hotels"
+				depth={1}
+				expanded={false}
+				ariaLabel="Move to Hotels"
+				separated
+			/>
+			<FolderRow
+				label="Flights"
+				depth={1}
+				expanded={false}
+				ariaLabel="Move to Flights"
+			/>
+		</List>
+	),
+};
+
+export const Selected: Story = {
+	name: "The destination",
+	render: () => (
+		<List>
+			<FolderRow
+				label="Hotels"
+				depth={1}
+				expanded={false}
+				selected
+				ariaLabel="Move to Hotels"
+			/>
+		</List>
+	),
+};
+
+/** Where the messages live now: a marker, never a disabled control. */
+export const Current: Story = {
+	name: "The folder you are in",
+	render: () => (
+		<List>
+			<FolderRow
+				label="Inbox"
+				depth={0}
+				expanded={false}
+				current
+				currentTag="current"
+				ariaLabel="Inbox (current folder)"
+			/>
+		</List>
+	),
+};
+
+/** A branch on screen only to hold the match under it: it reads, it never operates. */
+export const Context: Story = {
+	name: "A branch held open by a match below it",
+	render: () => (
+		<List>
+			<FolderRow
+				label="Travel"
+				depth={0}
+				expanded
+				context
+				ariaLabel="Travel (containing folder)"
+				separated
+			/>
+			<FolderRow
+				label="Hotels"
+				depth={1}
+				expanded={false}
+				ariaLabel="Move to Hotels"
+			/>
+		</List>
+	),
+};

package/src/components/folder-row.tsx

@@ -0,0 +1,147 @@
+import { Check, ChevronRight, Folder } from "lucide-react";
+import type { Ref } from "react";
+import { cn } from "../lib/cn.js";
+
+export const FOLDER_ROW_BASE =
+	"flex min-h-11 min-w-0 flex-1 items-center gap-2 px-3 py-2.5 text-left text-sm transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset";
+
+export const FOLDER_INDENT_STEP = 14;
+
+/**
+ * Where a row's text starts: `px-3` plus the chevron and folder icon columns
+ * with their gaps. The hairline separator is inset to it, so the line begins
+ * under the label the way a native mobile list draws it.
+ */
+export const FOLDER_ROW_TEXT_INSET = 60;
+
+export const FolderRowIndent = ({ depth }: { depth: number }) =>
+	depth > 0 ? (
+		<span
+			aria-hidden="true"
+			className="shrink-0"
+			style={{ width: depth * FOLDER_INDENT_STEP }}
+		/>
+	) : null;
+
+export const FolderRowSeparator = ({ depth }: { depth: number }) => (
+	<span
+		aria-hidden="true"
+		className="pointer-events-none absolute right-0 bottom-0 h-px bg-line"
+		style={{ left: FOLDER_ROW_TEXT_INSET + depth * FOLDER_INDENT_STEP }}
+	/>
+);
+
+export interface FolderRowProps {
+	label: string;
+	/** Indents the row and carries the nesting to `aria-level`. */
+	depth: number;
+	/** Its children are on screen. */
+	expanded: boolean;
+	/** What the row is announced as, e.g. `Move to Archive`. */
+	ariaLabel: string;
+	/** Chosen as the destination: checked, and announced as selected. */
+	selected?: boolean;
+	/**
+	 * On screen only to hold a match below it. A branch reads and never
+	 * operates, so it is neither focusable nor a target.
+	 */
+	context?: boolean;
+	/** Where the messages live now: a marker, never a disabled control. */
+	current?: boolean;
+	/** Inline tag shown on the current row, e.g. `current`. */
+	currentTag?: string;
+	/** A hairline under the label, drawn for every row but the last. */
+	separated?: boolean;
+	tabIndex?: number;
+	onActivate?: () => void;
+	onFocus?: () => void;
+	ref?: Ref<HTMLButtonElement>;
+}
+
+/**
+ * One folder in a tree: opens where you tap it, and says whether it is the
+ * destination, the folder you are in, or a branch on the way to a match.
+ */
+export const FolderRow = ({
+	label,
+	depth,
+	expanded,
+	ariaLabel,
+	selected = false,
+	context = false,
+	current = false,
+	currentTag,
+	separated = false,
+	tabIndex,
+	onActivate,
+	onFocus,
+	ref,
+}: FolderRowProps) => {
+	const chevron = (
+		<ChevronRight
+			className={cn(
+				"size-4 shrink-0 text-fg-subtle transition-transform",
+				expanded && "rotate-90",
+			)}
+			aria-hidden="true"
+		/>
+	);
+	const icon = (
+		<Folder className="size-4 shrink-0 text-fg-subtle" aria-hidden="true" />
+	);
+	if (context) {
+		return (
+			<div className="relative flex items-center">
+				{/* biome-ignore lint/a11y/useFocusableInteractive: an ancestor held on screen by a match below it — a branch, not a destination */}
+				<div
+					role="treeitem"
+					aria-level={depth + 1}
+					aria-selected={false}
+					aria-expanded={expanded}
+					aria-label={ariaLabel}
+					className={cn(FOLDER_ROW_BASE, "opacity-60")}
+				>
+					<FolderRowIndent depth={depth} />
+					{chevron}
+					{icon}
+					<span className="min-w-0 flex-1 truncate">{label}</span>
+				</div>
+				{separated && <FolderRowSeparator depth={depth} />}
+			</div>
+		);
+	}
+	return (
+		<div className="relative flex items-center">
+			<button
+				ref={ref}
+				type="button"
+				role="treeitem"
+				aria-level={depth + 1}
+				aria-selected={selected}
+				aria-expanded={expanded}
+				aria-current={current ? "true" : undefined}
+				aria-label={ariaLabel}
+				tabIndex={tabIndex}
+				onClick={onActivate}
+				onFocus={onFocus}
+				className={cn(
+					FOLDER_ROW_BASE,
+					"hover:bg-surface-raised active:bg-surface-sunken",
+					current && "text-fg-muted",
+				)}
+			>
+				<FolderRowIndent depth={depth} />
+				{chevron}
+				{icon}
+				<span className="min-w-0 flex-1 truncate">{label}</span>
+				{current && currentTag && (
+					<span className="shrink-0 text-xs text-fg-muted">{currentTag}</span>
+				)}
+				{selected && (
+					<Check className="size-4 shrink-0 text-accent" aria-hidden="true" />
+				)}
+			</button>
+			{separated && <FolderRowSeparator depth={depth} />}
+		</div>
+	);
+};