@remit/web-client 0.0.289 → 0.0.290

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.289",
+  "version": "0.0.290",
   "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/auth/AccountMenu.tsx

@@ -1,47 +1,6 @@
-import { Avatar } from "@remit/ui";
-import { LogOut } from "lucide-react";
-import {
-	DropdownMenu,
-	DropdownMenuItem,
-	DropdownMenuSeparator,
-} from "@/components/ui/DropdownMenu";
+import { AccountMenu as AccountMenuView } from "@remit/ui";
 import { AccountSession } from "./AccountSession";
 
-interface AccountMenuViewProps {
-	email: string | null;
-	onSignOut: () => void;
-}
-
-const AccountMenuView = ({ email, onSignOut }: AccountMenuViewProps) => {
-	const displayName = email ?? "Account";
-
-	return (
-		<DropdownMenu
-			trigger={
-				<Avatar name={displayName} email={email ?? undefined} size="sm" />
-			}
-			align="right"
-		>
-			{email && (
-				<>
-					<div
-						className="px-3 py-2 text-xs text-fg-muted truncate"
-						title={email}
-						data-testid="account-menu-email"
-					>
-						{email}
-					</div>
-					<DropdownMenuSeparator />
-				</>
-			)}
-			<DropdownMenuItem onClick={onSignOut}>
-				<LogOut className="size-4" />
-				Sign out
-			</DropdownMenuItem>
-		</DropdownMenu>
-	);
-};
-
 export const AccountMenu = () => (
 	<AccountSession>
 		{({ email, signOut }) => (

package/src/components/ui/AppVersion.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { AppVersion } from "./AppVersion";
+
+const meta: Meta<typeof AppVersion> = {
+	title: "Playground/Shipped/Settings/Advanced/AppVersion",
+	component: AppVersion,
+	parameters: { layout: "padded" },
+	args: {
+		sha: "a1b2c3d",
+		commitUrl: "https://github.com/remit-mail/reader/commit/a1b2c3d4e5f6",
+		buildTime: "2024-06-12T10:30:00.000Z",
+	},
+};
+export default meta;
+
+type Story = StoryObj<typeof AppVersion>;
+
+export const Default: Story = {};
+
+export const DevBuild: Story = {
+	args: { sha: "dev", commitUrl: undefined },
+};
+
+export const InAboutSection: Story = {
+	render: (args) => (
+		<div className="mt-4 max-w-sm border-t border-line pt-4">
+			<p className="mb-1 text-sm font-medium text-fg">About</p>
+			<AppVersion {...args} />
+		</div>
+	),
+};

package/src/components/ui/BugReportButton.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { BugReportButton } from "./BugReportButton";
+
+const meta: Meta<typeof BugReportButton> = {
+	title: "Playground/Shipped/Mail/Nav/BugReportButton",
+	component: BugReportButton,
+	parameters: { layout: "padded" },
+};
+export default meta;
+
+type Story = StoryObj<typeof BugReportButton>;
+
+export const Default: Story = {
+	render: () => (
+		<div className="w-64">
+			<BugReportButton />
+		</div>
+	),
+};

package/src/components/ui/FatalErrorOverlay.stories.tsx

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, within } from "storybook/test";
+import type { FatalError } from "@/lib/fatal-error";
+import { FatalErrorScreen } from "./FatalErrorOverlay";
+
+const meta: Meta<typeof FatalErrorScreen> = {
+	title: "Playground/Shipped/App/FatalErrorOverlay",
+	component: FatalErrorScreen,
+	parameters: { layout: "fullscreen" },
+};
+export default meta;
+
+type Story = StoryObj<typeof FatalErrorScreen>;
+
+const fatal = (overrides: Partial<FatalError>): FatalError => ({
+	error: new Error(overrides.message),
+	message: "",
+	correlationId: "a1b2c3d4-5678-90ab-cdef-1234567890ab",
+	at: Date.UTC(2024, 5, 12, 10, 30),
+	recoverable: true,
+	...overrides,
+});
+
+export const RecoverableTransient: Story = {
+	args: {
+		fatal: fatal({
+			message: "Request failed with status 500",
+			recoverable: true,
+		}),
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(canvas.getByRole("button", { name: "Retry" })).toBeVisible();
+		await expect(
+			canvas.queryByRole("link", { name: "Go to inbox" }),
+		).toBeNull();
+	},
+};
+
+export const DeterministicFatal: Story = {
+	args: {
+		fatal: fatal({
+			message: "date value is not finite in DateTimeFormat format()",
+			correlationId: "def45678-90ab-cdef-1234-567890abcdef",
+			recoverable: false,
+		}),
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(
+			canvas.getByRole("link", { name: "Go to inbox" }),
+		).toBeVisible();
+		await expect(canvas.queryByRole("button", { name: "Retry" })).toBeNull();
+	},
+};