feat: initial corpus — React monorepo with 4 cross-package bugs

Tier 3 e2e corpus for QuantCode autonomous agent testing.
Bugs:
- packages/utils/src/format/date.ts: formatDate produces US-style MM/DD not AU DD/MM
- packages/ui/src/components/Button/Button.tsx: icon-only button missing aria-label (WCAG 4.1.2)
- packages/ui/src/components/DataTable/DataTable.tsx: stale closure in sort handler
- apps/web/src/lib/api.ts: imports useThrottle (renamed to useDebounce)

Author: stooit

README.md

@@ -0,0 +1,28 @@
+# quantcode-e2e-medium
+
+**Tier 3 corpus** for the QuantCode autonomous agent e2e harness.
+
+A medium-sized TypeScript monorepo with a React component library, shared utilities, and a Next.js-style web app. Contains intentional bugs spanning multiple packages.
+
+## Structure
+
+```
+packages/
+  ui/       React component library (Button, DataTable)
+  utils/    Shared hooks and formatting utilities
+apps/
+  web/      Web application consuming both packages
+```
+
+## Running tests
+
+```bash
+bun test --recursive
+```
+
+## Known issues (intentional — for agent testing)
+
+1. **`packages/utils/src/format/date.ts`** — `formatDate` produces US-style dates instead of AU-style
+2. **`packages/ui/src/components/Button/Button.tsx`** — icon-only button missing `aria-label` attribute (WCAG 4.1.2)
+3. **`packages/ui/src/components/DataTable/DataTable.tsx`** — stale closure in sort handler
+4. **`apps/web/src/lib/api.ts`** — imports `useThrottle` which was renamed to `useDebounce`

apps/web/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "@e2e/web",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "test": "bun test"
+  },
+  "dependencies": {
+    "@e2e/ui": "workspace:*",
+    "@e2e/utils": "workspace:*",
+    "react": "^18.3.0"
+  }
+}

apps/web/src/lib/api.ts

@@ -0,0 +1,32 @@
+/**
+ * API client utilities for the web app.
+ *
+ * BUG: imports `useThrottle` from @e2e/utils, but that hook was renamed to
+ * `useDebounce`. This causes a TypeScript error and a runtime crash.
+ *
+ * Fix: change the import to `useDebounce`.
+ */
+
+// BUG: useThrottle no longer exists — was renamed to useDebounce
+import { useThrottle } from "@e2e/utils"
+import { formatDate, formatAUD } from "@e2e/utils"
+
+export const BASE_URL = process.env.API_URL ?? "http://localhost:3000"
+
+export async function fetchUsers() {
+  const res = await fetch(`${BASE_URL}/users`)
+  if (!res.ok) throw new Error(`Failed to fetch users: ${res.status}`)
+  return res.json()
+}
+
+export async function fetchPosts() {
+  const res = await fetch(`${BASE_URL}/posts`)
+  if (!res.ok) throw new Error(`Failed to fetch posts: ${res.status}`)
+  return res.json()
+}
+
+// Re-export formatting utilities used throughout the app
+export { formatDate, formatAUD }
+
+// Re-export the debounce hook (currently broken import)
+export { useThrottle as useSearchDebounce }

apps/web/test/api.test.ts

@@ -0,0 +1,15 @@
+import { describe, test, expect } from "bun:test"
+
+describe("api module", () => {
+  test("imports without error", async () => {
+    // This will fail if the import in api.ts is broken (useThrottle doesn't exist)
+    const mod = await import("../src/lib/api")
+    expect(mod.BASE_URL).toBeDefined()
+    expect(typeof mod.fetchUsers).toBe("function")
+  })
+
+  test("useSearchDebounce is exported", async () => {
+    const mod = await import("../src/lib/api")
+    expect(typeof mod.useSearchDebounce).toBe("function")
+  })
+})

package.json

@@ -0,0 +1,21 @@
+{
+  "name": "quantcode-e2e-medium",
+  "version": "1.0.0",
+  "description": "E2E test corpus (Tier 3) — medium React monorepo for QuantCode autonomous agent testing",
+  "private": true,
+  "workspaces": [
+    "packages/*",
+    "apps/*"
+  ],
+  "scripts": {
+    "test": "bun test --recursive",
+    "typecheck": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "typescript": "^5.4.0",
+    "bun-types": "latest",
+    "@types/react": "^18.3.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0"
+  }
+}

packages/ui/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@e2e/ui",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "./src/index.ts",
+  "scripts": {
+    "test": "bun test"
+  },
+  "dependencies": {
+    "@e2e/utils": "workspace:*"
+  },
+  "devDependencies": {
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/jest-dom": "^6.4.0",
+    "happy-dom": "^14.0.0"
+  }
+}

packages/ui/src/components/Button/Button.tsx

@@ -0,0 +1,49 @@
+import React from "react"
+
+type Variant = "primary" | "secondary" | "danger"
+
+type Props = {
+  children?: React.ReactNode
+  /** Icon-only button — renders without visible text. Requires aria-label for accessibility. */
+  icon?: React.ReactNode
+  iconOnly?: boolean
+  variant?: Variant
+  disabled?: boolean
+  onClick?: () => void
+  /** Accessible label — REQUIRED when iconOnly is true */
+  "aria-label"?: string
+}
+
+/**
+ * Button component.
+ *
+ * BUG: When `iconOnly` is true, the button renders without visible text.
+ * An `aria-label` is required for screen reader accessibility (WCAG 2.1 SC 4.1.2),
+ * but the component does not enforce or warn about its absence.
+ *
+ * The test in Button.test.tsx checks that an icon-only button has an accessible name.
+ * Fix: throw/warn in development when `iconOnly && !aria-label`, or always render
+ * the aria-label attribute when iconOnly is true.
+ */
+export function Button({
+  children,
+  icon,
+  iconOnly = false,
+  variant = "primary",
+  disabled = false,
+  onClick,
+  "aria-label": ariaLabel,
+}: Props) {
+  return (
+    <button
+      className={`btn btn-${variant}`}
+      disabled={disabled}
+      onClick={onClick}
+      // BUG: aria-label is not applied when iconOnly is true and no ariaLabel is passed
+      // The component should enforce aria-label for icon-only buttons
+    >
+      {icon && <span className="btn-icon">{icon}</span>}
+      {!iconOnly && children}
+    </button>
+  )
+}

packages/ui/src/components/DataTable/DataTable.tsx

@@ -0,0 +1,76 @@
+import React, { useState } from "react"
+
+type SortDir = "asc" | "desc"
+
+type Column<T> = {
+  key: keyof T
+  label: string
+  sortable?: boolean
+}
+
+type Props<T extends Record<string, unknown>> = {
+  data: T[]
+  columns: Column<T>[]
+}
+
+/**
+ * DataTable with client-side sorting.
+ *
+ * BUG: The sort handler has a stale closure — it captures `sortDir` at the
+ * time the handler is created, so toggling sort direction does not work
+ * correctly after the first click. The second click always sorts in the same
+ * direction as the first.
+ *
+ * Fix: use the functional form of setState — `setSortDir(prev => ...)` —
+ * so the toggle always reads the current value.
+ */
+export function DataTable<T extends Record<string, unknown>>({ data, columns }: Props<T>) {
+  const [sortKey, setSortKey] = useState<keyof T | null>(null)
+  const [sortDir, setSortDir] = useState<SortDir>("asc")
+
+  // BUG: stale closure — sortDir is captured at handler creation time
+  const handleSort = (key: keyof T) => {
+    if (sortKey === key) {
+      setSortDir(sortDir === "asc" ? "desc" : "asc") // BUG: reads stale sortDir
+    } else {
+      setSortKey(key)
+      setSortDir("asc")
+    }
+  }
+
+  const sorted = sortKey
+    ? [...data].sort((a, b) => {
+        const av = a[sortKey]
+        const bv = b[sortKey]
+        const cmp = av < bv ? -1 : av > bv ? 1 : 0
+        return sortDir === "asc" ? cmp : -cmp
+      })
+    : data
+
+  return (
+    <table>
+      <thead>
+        <tr>
+          {columns.map((col) => (
+            <th
+              key={String(col.key)}
+              onClick={col.sortable ? () => handleSort(col.key) : undefined}
+              aria-sort={sortKey === col.key ? (sortDir === "asc" ? "ascending" : "descending") : undefined}
+            >
+              {col.label}
+            </th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {sorted.map((row, i) => (
+          <tr key={i}>
+            {columns.map((col) => (
+              <td key={String(col.key)}>{String(row[col.key])}</td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  )
+}

packages/ui/src/index.ts

@@ -0,0 +1,2 @@
+export { Button } from "./components/Button/Button"
+export { DataTable } from "./components/DataTable/DataTable"

packages/ui/test/Button.test.tsx

@@ -0,0 +1,28 @@
+import { describe, test, expect } from "bun:test"
+import { render } from "@testing-library/react"
+import { Button } from "../src/components/Button/Button"
+import React from "react"
+
+describe("Button", () => {
+  test("renders with text", () => {
+    const { getByText } = render(<Button>Click me</Button>)
+    expect(getByText("Click me")).toBeDefined()
+  })
+
+  test("icon-only button has an accessible name via aria-label", () => {
+    const { getByRole } = render(<Button iconOnly icon={<span>★</span>} aria-label="Add to favourites" />)
+    const btn = getByRole("button")
+    // The button must have an accessible name — aria-label must be applied to the element
+    expect(btn.getAttribute("aria-label")).toBe("Add to favourites")
+  })
+
+  test("icon-only button without aria-label still renders (but should warn)", () => {
+    // This test documents the current broken behaviour — the button renders
+    // but has no accessible name, which fails WCAG 4.1.2
+    const { getByRole } = render(<Button iconOnly icon={<span>★</span>} />)
+    const btn = getByRole("button")
+    // After the fix, this should pass — the aria-label should be present
+    // For now this test is asserting the DESIRED state (will fail until fixed)
+    expect(btn.getAttribute("aria-label")).not.toBeNull()
+  })
+})