@remit/ui 0.0.22 → 0.0.24

package/package.json

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

package/src/components/compose-form-shell.stories.tsx

@@ -76,7 +76,7 @@ export const InlineReply: Story = {
 
 export const MobileSheet: Story = {
 	name: "Mobile sheet — Send within viewport",
-	parameters: { viewport: { defaultViewport: "mobile1" } },
+	globals: { viewport: { value: "mobile" } },
 	render: () => (
 		<div className="flex h-[95dvh] w-[390px] flex-col rounded-t-lg border border-line bg-canvas">
 			<div className="mx-auto mt-2 mb-1 h-1.5 w-12 rounded-full bg-fg-muted/30" />

package/src/components/pull-to-refresh.stories.tsx

@@ -57,7 +57,6 @@ export const Refreshing: Story = {
 export const DesktopNoop: Story = {
 	name: "Desktop — gesture inert",
 	parameters: {
-		viewport: { defaultViewport: "desktop" },
 		docs: {
 			description: {
 				story:
@@ -65,6 +64,7 @@ export const DesktopNoop: Story = {
 			},
 		},
 	},
+	globals: { viewport: { value: "desktop" } },
 	args: {
 		onRefresh: () => Promise.resolve(),
 	},

package/src/components/swipeable-row.tsx

@@ -286,7 +286,7 @@ export function SwipeableRow({
 					e.stopPropagation();
 					onLongPress();
 				}}
-				className="inline-flex size-7 shrink-0 items-center justify-center rounded-full"
+				className="-m-2 inline-flex size-11 shrink-0 items-center justify-center rounded-full"
 			>
 				<Avatar name={thread.fromName} email={thread.fromEmail} size="sm" />
 			</button>

package/src/components/wizard.stories.tsx

@@ -98,16 +98,6 @@ export const ServerFieldsStory: Story = {
 /** Phone width: the grid stacks so the Security select stays reachable (#780). */
 export const ServerFieldsPhone: Story = {
 	name: "ServerFields — phone",
-	parameters: {
-		viewport: {
-			options: {
-				phone390: {
-					name: "Phone 390",
-					styles: { width: "390px", height: "844px" },
-				},
-			},
-			defaultViewport: "phone390",
-		},
-	},
+	globals: { viewport: { value: "mobile" } },
 	render: () => <ServerFieldsDemo />,
 };

package/src/stories-viewport-globals.test.ts

@@ -0,0 +1,49 @@
+import assert from "node:assert/strict";
+import { readdirSync, readFileSync } from "node:fs";
+import { dirname, relative, resolve } from "node:path";
+import { describe, it } from "node:test";
+import { fileURLToPath } from "node:url";
+
+/**
+ * Storybook 9 dropped `parameters.viewport.defaultViewport` (the Storybook
+ * 6/7 API) — it is silently ignored, so a story written against it renders
+ * full width instead of the intended breakpoint. The replacement is a
+ * per-story viewport global: `globals: { viewport: { value: "mobile" } }`
+ * (#67, #68).
+ */
+
+const here = dirname(fileURLToPath(import.meta.url));
+
+const storyFiles = (root: string): string[] => {
+	const found: string[] = [];
+	const walk = (dir: string): void => {
+		for (const entry of readdirSync(dir, { withFileTypes: true })) {
+			if (entry.isDirectory() && entry.name !== "node_modules") {
+				walk(resolve(dir, entry.name));
+				continue;
+			}
+			if (entry.isFile() && entry.name.endsWith(".stories.tsx")) {
+				found.push(resolve(dir, entry.name));
+			}
+		}
+	};
+	walk(root);
+	return found;
+};
+
+describe("story files use the viewport globals pattern (#68)", () => {
+	const roots = [here, resolve(here, "../../workbench/src")];
+
+	it("scans at least one story file", () => {
+		const files = roots.flatMap((root) => storyFiles(root));
+		assert.ok(files.length > 0);
+	});
+
+	it("never references parameters.viewport.defaultViewport", () => {
+		const offenders = roots
+			.flatMap((root) => storyFiles(root))
+			.filter((file) => readFileSync(file, "utf8").includes("defaultViewport"))
+			.map((file) => relative(here, file));
+		assert.deepEqual(offenders, []);
+	});
+});