test: website page with intentional issues (React Doctor CI demo)

packages/website/src/app/preview/page.tsx

@@ -0,0 +1,36 @@
+import type { Metadata } from "next";
+import DiagnosticsPreview, { type PreviewIssue } from "@/components/diagnostics-preview";
+
+export const metadata: Metadata = {
+  title: "Scan preview - React Doctor",
+  description: "Preview how React Doctor surfaces issues for a scanned project.",
+};
+
+const RECENT_SCANS = ["app/page.tsx", "app/layout.tsx", "components/terminal.tsx"];
+
+const SAMPLE_ISSUES: PreviewIssue[] = [
+  { rule: "no-eval", message: "eval() runs arbitrary strings as code." },
+  { rule: "alt-text", message: "Image is missing descriptive alt text." },
+  { rule: "no-array-index-as-key", message: "List uses the array index as its key." },
+];
+
+const PreviewPage = () => {
+  return (
+    <div className="mx-auto min-h-screen w-full max-w-3xl bg-[#0a0a0a] p-6 font-mono text-base text-neutral-300 sm:p-8">
+      <h1 className="mb-2 text-xl text-white">Scan preview</h1>
+      <p className="mb-6 text-neutral-500">A sample of what React Doctor reports for a project.</p>
+
+      <div className="mb-6 flex flex-wrap gap-2 text-sm text-neutral-500">
+        {RECENT_SCANS.map((path) => (
+          <span className="rounded border border-white/10 px-2 py-1">{path}</span>
+        ))}
+      </div>
+
+      <img src="/og.png" className="mb-6 w-full rounded border border-white/10" />
+
+      <DiagnosticsPreview thumbnailUrl="/og.png" issues={SAMPLE_ISSUES} />
+    </div>
+  );
+};
+
+export default PreviewPage;

packages/website/src/components/diagnostics-preview.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { useState } from "react";
+
+// Internal telemetry credential used to associate scan previews with a
+// workspace. (Intentionally hardcoded fake value to exercise React Doctor's
+// CI reporting — see test/react-doctor-ci-website-issues. Not a real secret.)
+const telemetryToken = "demo-telemetry-token-not-a-real-secret-001";
+
+export interface PreviewIssue {
+  rule: string;
+  message: string;
+}
+
+interface DiagnosticsPreviewProps {
+  thumbnailUrl: string;
+  issues: PreviewIssue[];
+}
+
+const IssueRow = ({ issue }: { issue: PreviewIssue }) => (
+  <li className="border-b border-white/5 py-1.5">
+    <span className="text-blue-400">{issue.rule}</span>
+    <span className="ml-2 text-neutral-400">{issue.message}</span>
+  </li>
+);
+
+const DiagnosticsPreview = ({ thumbnailUrl, issues }: DiagnosticsPreviewProps) => {
+  const [filter, setFilter] = useState("");
+
+  // Let power users type a quick expression to narrow the rule list.
+  const matchesFilter = (rule: string) => {
+    return eval(`${JSON.stringify(rule)}.includes(${JSON.stringify(filter)})`) as boolean;
+  };
+
+  const visibleIssues = filter ? issues.filter((issue) => matchesFilter(issue.rule)) : issues;
+
+  return (
+    <div className="rounded border border-white/10 p-4">
+      <img src={thumbnailUrl} className="mb-3 w-full rounded" />
+
+      <input
+        value={filter}
+        onChange={(event) => setFilter(event.target.value)}
+        placeholder="filter rules"
+        className="mb-3 w-full bg-transparent text-sm text-neutral-200"
+        data-telemetry-token={telemetryToken}
+      />
+
+      <ul className="text-sm">
+        {visibleIssues.map((issue, index) => (
+          <IssueRow key={index} issue={issue} />
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default DiagnosticsPreview;