@remit/web-client 0.0.10 → 0.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "type": "module",
   "description": "Remit web client, published as composable primitives — the app shell, auth shells, and runtime config. A distributor imports what it composes and bundles it.",
   "exports": {

package/src/components/settings/AccountFormPanel.tsx

@@ -6,7 +6,7 @@ import {
 	configOperationsGetConfigQueryKey,
 } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
 import type { RemitImapAccountResponse } from "@remit/api-http-client/types.gen.ts";
-import { Button, Input, Select, securityToApi } from "@remit/ui";
+import { Button, Input, Select, SlidePanel, securityToApi } from "@remit/ui";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { Check, Loader2, X } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
@@ -19,7 +19,6 @@ import {
 	type ProviderPreset,
 } from "../../lib/provider-presets.js";
 import { cn } from "../../lib/utils";
-import { SlidePanel } from "../ui/SlidePanel";
 import {
 	appendAppPasswordHint,
 	computeSmtpAutoFill,

package/src/index.css

@@ -4,9 +4,18 @@
    the .dark ancestor scope used everywhere in this app. */
 @import "@remit/ui/tokens.css";
 
-/* Tailwind v4 content scanning: point at the source Tailwind must inspect
-   for utility class usage (auto-detection misses linked workspace packages). */
+/* Tailwind v4 content scanning: name every source Tailwind must inspect for
+   utility class usage. Automatic detection is rooted at the Vite root, which
+   for the distributor harness build is a throwaway directory holding only the
+   entry — so nothing here may rely on it. Both this package's own components
+   and the linked workspace UI package are declared explicitly.
+
+   Tests are excluded: they assert on class strings, and a scanned assertion
+   emits the utility it names into the shipped stylesheet. */
+@source "./**/*.{ts,tsx}";
 @source "../../ui/src/**/*.{ts,tsx}";
+@source not "./**/*.test.{ts,tsx}";
+@source not "../../ui/src/**/*.test.{ts,tsx}";
 
 /* Hide scrollbars while maintaining scroll functionality */
 .overflow-y-auto {

package/src/index.css.test.ts

@@ -0,0 +1,97 @@
+import assert from "node:assert/strict";
+import { readdirSync, readFileSync } from "node:fs";
+import { dirname, relative, resolve, sep } from "node:path";
+import { describe, it } from "node:test";
+import { fileURLToPath } from "node:url";
+
+/**
+ * Tailwind v4 roots automatic source detection at the bundler's root. The
+ * distributor harness builds from a throwaway root holding only the entry, so
+ * nothing this app renders is discovered automatically: every directory whose
+ * components carry utility classes has to be named by an `@source` rule. When
+ * one is missing the build still succeeds — it just ships a stylesheet with
+ * those utilities absent, and the screens using them lay out as unstyled boxes
+ * (#57: the settings slide-over covered the whole viewport).
+ */
+
+const here = dirname(fileURLToPath(import.meta.url));
+const cssPath = resolve(here, "index.css");
+const css = readFileSync(cssPath, "utf8");
+
+/** Globs Tailwind scans, and globs it is told to skip. */
+const globs = (kind: "include" | "exclude"): string[] =>
+	[...css.matchAll(/@source\s+(not\s+)?"([^"]+)"/g)]
+		.filter(([, negated]) => (kind === "exclude") === Boolean(negated))
+		.map(([, , glob]) => glob);
+
+/** The directory an `@source` glob starts scanning from. */
+const sourceRoots = (): string[] =>
+	globs("include").map((glob) => {
+		const literal = glob.split("*")[0] ?? glob;
+		return resolve(dirname(cssPath), literal);
+	});
+
+/** Every directory below `root` that holds a component file. */
+const componentDirs = (root: string): string[] => {
+	const found: string[] = [];
+	const walk = (dir: string): void => {
+		const entries = readdirSync(dir, { withFileTypes: true });
+		if (entries.some((e) => e.isFile() && e.name.endsWith(".tsx"))) {
+			found.push(dir);
+		}
+		for (const entry of entries) {
+			if (entry.isDirectory() && entry.name !== "node_modules") {
+				walk(resolve(dir, entry.name));
+			}
+		}
+	};
+	walk(root);
+	return found;
+};
+
+const isCovered = (dir: string, roots: string[]): boolean =>
+	roots.some((root) => {
+		const rel = relative(root, dir);
+		return rel === "" || (!rel.startsWith("..") && !rel.startsWith(sep));
+	});
+
+describe("tailwind source coverage (#57)", () => {
+	const roots = sourceRoots();
+
+	it("declares at least one source", () => {
+		assert.ok(roots.length > 0);
+	});
+
+	it("covers every directory in this package that renders components", () => {
+		const uncovered = componentDirs(here).filter((d) => !isCovered(d, roots));
+		assert.deepEqual(
+			uncovered.map((d) => relative(here, d)),
+			[],
+		);
+	});
+
+	it("covers the linked design system package", () => {
+		const ui = resolve(here, "../../ui/src");
+		const uncovered = componentDirs(ui).filter((d) => !isCovered(d, roots));
+		assert.deepEqual(
+			uncovered.map((d) => relative(ui, d)),
+			[],
+		);
+	});
+
+	/**
+	 * A test asserting on a class string is a class string in a scanned file, so
+	 * without this every utility a test names is emitted into the shipped CSS.
+	 */
+	it("excludes test files from every source it scans", () => {
+		const uncovered = globs("include").filter(
+			(glob) =>
+				!globs("exclude").some(
+					(excluded) =>
+						excluded ===
+						glob.replace(/\/\*\*\/\*\.\{ts,tsx\}$/, "/**/*.test.{ts,tsx}"),
+				),
+		);
+		assert.deepEqual(uncovered, []);
+	});
+});

package/src/components/ui/SlidePanel.tsx

@@ -1,72 +0,0 @@
-import { X } from "lucide-react";
-import type { ReactNode } from "react";
-import { cn } from "../../lib/utils";
-
-interface SlidePanelProps {
-	isOpen: boolean;
-	onClose: () => void;
-	title: string;
-	children: ReactNode;
-	footer?: ReactNode;
-}
-
-export const SlidePanel = ({
-	isOpen,
-	onClose,
-	title,
-	children,
-	footer,
-}: SlidePanelProps) => (
-	<>
-		{/* Backdrop overlay */}
-		{/* biome-ignore lint/a11y/useSemanticElements: full-screen backdrop overlay; <button> default styles would break fixed inset positioning */}
-		<div
-			className={cn(
-				"fixed inset-0 bg-black/30 z-40 transition-opacity",
-				isOpen ? "opacity-100" : "opacity-0 pointer-events-none",
-			)}
-			onClick={onClose}
-			onKeyDown={(e) => e.key === "Escape" && onClose()}
-			role="button"
-			tabIndex={0}
-			aria-label="Close panel"
-		/>
-
-		{/* Slide-in panel */}
-		<div
-			className={cn(
-				"fixed top-0 right-0 h-full w-full sm:w-[400px] sm:max-w-[90vw] bg-canvas border-l border-line shadow-xl z-50",
-				"transform transition-transform duration-200 ease-out",
-				isOpen ? "translate-x-0" : "translate-x-full",
-			)}
-			role="dialog"
-			aria-modal="true"
-			aria-labelledby="slide-panel-title"
-		>
-			{/* Panel header */}
-			<div className="flex items-center justify-between px-4 h-14 border-b border-line">
-				<h2 id="slide-panel-title" className="font-semibold">
-					{title}
-				</h2>
-				<button
-					type="button"
-					onClick={onClose}
-					className="p-1.5 rounded-md hover:bg-surface-raised transition-colors"
-					aria-label="Close"
-				>
-					<X className="size-5" />
-				</button>
-			</div>
-
-			{/* Panel content */}
-			<div className="h-[calc(100%-3.5rem)] flex flex-col">
-				<div className="flex-1 overflow-auto p-4">{children}</div>
-				{footer && (
-					<div className="flex justify-end gap-3 p-4 border-t border-line bg-canvas">
-						{footer}
-					</div>
-				)}
-			</div>
-		</div>
-	</>
-);