Add mobile responsive primitives (Slice 1)
Foundation for the mobile-responsive-parity change. Adds: - useIsMobile() hook: single source of truth for the md:768px cut (SSR-safe) - MobileCardRow<T>: stacked card list for wide tables below md, with getRowId stable keys, primary field as title, optional onRowClick + actions slot - SheetForm: full-height form host (h-[100dvh], flex column, sticky header + footer via flex not position:sticky) for mobile edit flows - HoverEditButton: mobile prop (default 'always') -- always visible below md, hover-revealed at md+; desktop aesthetic preserved - .mobile-touch-target CSS utility: 44x44 min hit area below md (WCAG 2.5.5) - App.tsx refactored to use useIsMobile(); shell behavior unchanged Tests cover primary/field rendering, onRowClick, actions slot, empty rows, no-primary, stable keys (no duplicate-key warning), and all SheetForm interactions. 86 tests pass; lint/build green. MobileCardRow key strategy: uses getRowId when provided (falls back to index); per design §trade-offs, fields are declared per-table to prioritize by mobile importance rather than auto-derived from column defs. Refs openspec/changes/mobile-responsive-parity/ (design §Shared primitives, spec R1/R5/R6, tasks slice 1).
This commit is contained in:
Developer
@@ -0,0 +1,101 @@
|
||||
import { describe, it, expect, vi } from "vitest";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import { MobileCardRow, type MobileCardField } from "../mobile-card";
|
||||
|
||||
interface Row {
|
||||
id: string;
|
||||
title: string;
|
||||
size: string;
|
||||
year: number;
|
||||
}
|
||||
|
||||
const rows: Row[] = [
|
||||
{ id: "a", title: "Movie A", size: "4.2GB", year: 2026 },
|
||||
{ id: "b", title: "Movie B", size: "2.1GB", year: 2025 },
|
||||
];
|
||||
|
||||
const fields: MobileCardField<Row>[] = [
|
||||
{ key: "title", label: "Title", render: (r) => r.title, primary: true },
|
||||
{ key: "size", label: "Size", render: (r) => r.size },
|
||||
{ key: "year", label: "Year", render: (r) => r.year },
|
||||
];
|
||||
|
||||
describe("MobileCardRow", () => {
|
||||
it("renders the primary field as a title and the rest as key/value pairs", () => {
|
||||
render(<MobileCardRow rows={rows} fields={fields} />);
|
||||
|
||||
// Primary title
|
||||
expect(screen.getByText("Movie A")).toBeInTheDocument();
|
||||
expect(screen.getByText("Movie B")).toBeInTheDocument();
|
||||
|
||||
// Field labels and values (appear once per row)
|
||||
expect(screen.getAllByText("Size")).toHaveLength(2);
|
||||
expect(screen.getAllByText("4.2GB")).toHaveLength(1);
|
||||
expect(screen.getAllByText("Year")).toHaveLength(2);
|
||||
expect(screen.getAllByText("2026")).toHaveLength(1);
|
||||
});
|
||||
|
||||
it("fires onRowClick when the card is tapped", async () => {
|
||||
const onRowClick = vi.fn();
|
||||
render(
|
||||
<MobileCardRow rows={rows} fields={fields} onRowClick={onRowClick} />,
|
||||
);
|
||||
|
||||
await userEvent.click(screen.getByText("Movie A"));
|
||||
expect(onRowClick).toHaveBeenCalledTimes(1);
|
||||
expect(onRowClick).toHaveBeenCalledWith(rows[0]);
|
||||
});
|
||||
|
||||
it("renders the actions slot per row", () => {
|
||||
render(
|
||||
<MobileCardRow
|
||||
rows={rows}
|
||||
fields={fields}
|
||||
actions={(r) => (
|
||||
<button type="button" onClick={() => undefined}>
|
||||
edit-{r.id}
|
||||
</button>
|
||||
)}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(screen.getByText("edit-a")).toBeInTheDocument();
|
||||
expect(screen.getByText("edit-b")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders a non-interactive card when onRowClick is absent", () => {
|
||||
render(<MobileCardRow rows={rows} fields={fields} />);
|
||||
// No buttons wrapping the cards.
|
||||
expect(screen.queryAllByRole("button")).toHaveLength(0);
|
||||
expect(screen.getByText("Movie A")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders nothing when rows is empty", () => {
|
||||
const { container } = render(<MobileCardRow rows={[]} fields={fields} />);
|
||||
const cards = container.querySelector(".flex.flex-col.gap-2");
|
||||
expect(cards?.children).toHaveLength(0);
|
||||
expect(screen.queryByText("Size")).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders a card without a title when no primary field is set", () => {
|
||||
const noPrimary: MobileCardField<Row>[] = fields.filter(
|
||||
(f) => f.key !== "title",
|
||||
);
|
||||
render(<MobileCardRow rows={rows} fields={noPrimary} />);
|
||||
// No title text rendered, but the key/value stack still is.
|
||||
expect(screen.queryByText("Movie A")).not.toBeInTheDocument();
|
||||
expect(screen.getAllByText("Size")).toHaveLength(2);
|
||||
});
|
||||
|
||||
it("uses getRowId for stable keys and emits no duplicate-key warning", () => {
|
||||
const errorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
|
||||
render(<MobileCardRow rows={rows} fields={fields} getRowId={(r) => r.id} />);
|
||||
// No React duplicate-key warning should fire.
|
||||
const duplicateKeyCalls = errorSpy.mock.calls.filter((args) =>
|
||||
String(args[0] ?? "").includes("same key"),
|
||||
);
|
||||
expect(duplicateKeyCalls).toHaveLength(0);
|
||||
errorSpy.mockRestore();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,96 @@
|
||||
import { describe, it, expect, vi } from "vitest";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import { SheetForm } from "../sheet-form";
|
||||
|
||||
describe("SheetForm", () => {
|
||||
it("renders the title and children", () => {
|
||||
render(
|
||||
<SheetForm
|
||||
open
|
||||
onOpenChange={() => {}}
|
||||
title="Edit service"
|
||||
onSave={() => {}}
|
||||
onCancel={() => {}}
|
||||
>
|
||||
<input aria-label="Name" />
|
||||
</SheetForm>,
|
||||
);
|
||||
|
||||
expect(screen.getByText("Edit service")).toBeInTheDocument();
|
||||
expect(screen.getByLabelText("Name")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("calls onSave when Save is clicked", async () => {
|
||||
const onSave = vi.fn();
|
||||
render(
|
||||
<SheetForm
|
||||
open
|
||||
onOpenChange={() => {}}
|
||||
title="Edit"
|
||||
onSave={onSave}
|
||||
onCancel={() => {}}
|
||||
>
|
||||
<div />
|
||||
</SheetForm>,
|
||||
);
|
||||
|
||||
await userEvent.click(screen.getByRole("button", { name: "Save" }));
|
||||
expect(onSave).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it("calls onCancel when Cancel is clicked", async () => {
|
||||
const onCancel = vi.fn();
|
||||
render(
|
||||
<SheetForm
|
||||
open
|
||||
onOpenChange={() => {}}
|
||||
title="Edit"
|
||||
onSave={() => {}}
|
||||
onCancel={onCancel}
|
||||
>
|
||||
<div />
|
||||
</SheetForm>,
|
||||
);
|
||||
|
||||
await userEvent.click(screen.getByRole("button", { name: "Cancel" }));
|
||||
expect(onCancel).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it("disables Save and shows a pending label when isPending", () => {
|
||||
render(
|
||||
<SheetForm
|
||||
open
|
||||
onOpenChange={() => {}}
|
||||
title="Edit"
|
||||
onSave={() => {}}
|
||||
onCancel={() => {}}
|
||||
isPending
|
||||
>
|
||||
<div />
|
||||
</SheetForm>,
|
||||
);
|
||||
|
||||
const saveButton = screen.getByRole("button", { name: /Saving/i });
|
||||
expect(saveButton).toBeDisabled();
|
||||
expect(screen.getByText("Saving…")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("calls onCancel when the close (X) button is clicked", async () => {
|
||||
const onCancel = vi.fn();
|
||||
render(
|
||||
<SheetForm
|
||||
open
|
||||
onOpenChange={() => {}}
|
||||
title="Edit"
|
||||
onSave={() => {}}
|
||||
onCancel={onCancel}
|
||||
>
|
||||
<div />
|
||||
</SheetForm>,
|
||||
);
|
||||
|
||||
await userEvent.click(screen.getByRole("button", { name: "Close" }));
|
||||
expect(onCancel).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,116 @@
|
||||
import * as React from "react";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
/**
|
||||
* Field descriptor for a {@link MobileCardRow}.
|
||||
*
|
||||
* The consuming page decides which fields to show and in what order; this
|
||||
* primitive does not pick them. Exactly one field should set `primary: true` —
|
||||
* it renders as the card title (bold, larger). The rest render as a key/value
|
||||
* stack below the title.
|
||||
*/
|
||||
export interface MobileCardField<T> {
|
||||
key: string;
|
||||
label: string;
|
||||
render: (row: T) => React.ReactNode;
|
||||
/** When true, render as the card title (bold, larger). One per card. */
|
||||
primary?: boolean;
|
||||
}
|
||||
|
||||
export interface MobileCardRowProps<T> {
|
||||
rows: T[];
|
||||
fields: MobileCardField<T>[];
|
||||
/** Stable per-row identity; falls back to the row index when omitted. */
|
||||
getRowId?: (row: T) => string;
|
||||
/** When set, the whole card becomes a button (44px min height). */
|
||||
onRowClick?: (row: T) => void;
|
||||
/** Optional right-aligned action slot (edit/delete icon buttons). */
|
||||
actions?: (row: T) => React.ReactNode;
|
||||
/** Optional className for the outer list container. */
|
||||
className?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Stacked card list for wide tables below the `md:` breakpoint.
|
||||
*
|
||||
* Each row renders as a card: the `primary` field as the title and the
|
||||
* remaining fields as a key/value stack. When `onRowClick` is provided the
|
||||
* whole card is a button with a 44px minimum touch target (spec R6.1). An
|
||||
* optional `actions` slot renders right-aligned controls.
|
||||
*
|
||||
* This is the mobile counterpart to {@link DataTable}; pages branch on
|
||||
* `useIsMobile()`. See OpenSpec change `mobile-responsive-parity`, design
|
||||
* §`MobileCardRow`.
|
||||
*/
|
||||
export function MobileCardRow<T>({
|
||||
rows,
|
||||
fields,
|
||||
getRowId,
|
||||
onRowClick,
|
||||
actions,
|
||||
className,
|
||||
}: MobileCardRowProps<T>) {
|
||||
const primary = fields.find((f) => f.primary);
|
||||
const rest = fields.filter((f) => !f.primary);
|
||||
|
||||
return (
|
||||
<div className={cn("flex flex-col gap-2", className)}>
|
||||
{rows.map((row, index) => {
|
||||
const rowKey = getRowId?.(row) ?? String(index);
|
||||
const body = (
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="flex min-w-0 flex-col gap-1">
|
||||
{primary ? (
|
||||
<div className="truncate text-sm font-medium text-foreground">
|
||||
{primary.render(row)}
|
||||
</div>
|
||||
) : null}
|
||||
{rest.length > 0 ? (
|
||||
<dl className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-0.5 text-xs text-muted-foreground">
|
||||
{rest.map((field) => (
|
||||
<React.Fragment key={field.key}>
|
||||
<dt className="font-medium text-muted-foreground">
|
||||
{field.label}
|
||||
</dt>
|
||||
<dd className="truncate text-foreground">
|
||||
{field.render(row)}
|
||||
</dd>
|
||||
</React.Fragment>
|
||||
))}
|
||||
</dl>
|
||||
) : null}
|
||||
</div>
|
||||
{actions ? (
|
||||
<div className="flex shrink-0 items-center gap-1">
|
||||
{actions(row)}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
|
||||
if (onRowClick) {
|
||||
return (
|
||||
<button
|
||||
key={rowKey}
|
||||
type="button"
|
||||
onClick={() => onRowClick(row)}
|
||||
className="mobile-touch-target min-h-11 w-full rounded-lg border border-border bg-card p-3 text-left transition-colors hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
||||
>
|
||||
{body}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
key={rowKey}
|
||||
className="min-h-11 rounded-lg border border-border bg-card p-3"
|
||||
>
|
||||
{body}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
import * as React from "react";
|
||||
import { Loader2, XIcon } from "lucide-react";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Sheet, SheetContent, SheetTitle } from "@/components/ui/sheet";
|
||||
|
||||
export interface SheetFormProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
title: string;
|
||||
onSave: () => void;
|
||||
onCancel: () => void;
|
||||
/** Disable Save and show a pending spinner. */
|
||||
isPending?: boolean;
|
||||
/** Override the Save button label (default "Save"). */
|
||||
saveLabel?: string;
|
||||
children: React.ReactNode;
|
||||
/** Optional className applied to the scrolling body. */
|
||||
bodyClassName?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Full-height form host for the mobile (`< md`) breakpoint.
|
||||
*
|
||||
* Wraps the shadcn `Sheet` primitive with a fixed header (title + close) and a
|
||||
* fixed footer (Cancel + Save). The body scrolls between them. Laid out as a
|
||||
* flex column (NOT `position: sticky`) because Radix `Sheet` uses transforms,
|
||||
* which break sticky positioning — see OpenSpec change
|
||||
* `mobile-responsive-parity`, design §`SheetForm` / risks.
|
||||
*
|
||||
* Uses `h-[100dvh]` (not `h-screen`) to avoid the iOS Safari URL-bar resize
|
||||
* jump. Consumers choose this host vs the desktop `Dialog` via `useIsMobile()`.
|
||||
*/
|
||||
export function SheetForm({
|
||||
open,
|
||||
onOpenChange,
|
||||
title,
|
||||
onSave,
|
||||
onCancel,
|
||||
isPending = false,
|
||||
saveLabel = "Save",
|
||||
children,
|
||||
bodyClassName,
|
||||
}: SheetFormProps) {
|
||||
return (
|
||||
<Sheet open={open} onOpenChange={onOpenChange}>
|
||||
<SheetContent
|
||||
side="bottom"
|
||||
showCloseButton={false}
|
||||
className="flex h-[100dvh] w-full flex-col gap-0 p-0 sm:max-w-full"
|
||||
>
|
||||
{/* Header — fixed at top */}
|
||||
<div className="flex h-14 shrink-0 items-center justify-between border-b border-border px-4">
|
||||
<SheetTitle className="font-heading text-base font-medium">
|
||||
{title}
|
||||
</SheetTitle>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
aria-label="Close"
|
||||
onClick={onCancel}
|
||||
>
|
||||
<XIcon />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Body — scrolls */}
|
||||
<div className={cn("flex-1 overflow-y-auto p-4", bodyClassName)}>
|
||||
{children}
|
||||
</div>
|
||||
|
||||
{/* Footer — fixed at bottom */}
|
||||
<div className="flex shrink-0 items-center justify-end gap-2 border-t border-border bg-muted/50 p-4">
|
||||
<Button variant="outline" onClick={onCancel} disabled={isPending}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={onSave} disabled={isPending}>
|
||||
{isPending ? (
|
||||
<>
|
||||
<Loader2 className="animate-spin" />
|
||||
Saving…
|
||||
</>
|
||||
) : (
|
||||
saveLabel
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user