@hustle-together/api-dev-tools 3.12.3 → 4.5.1

package/templates/hustle-dev-dashboard/page.tsx

@@ -0,0 +1,365 @@
+"use client";
+
+import Link from "next/link";
+import { useMemo } from "react";
+
+// Import registry for stats
+import registryData from "@/../.claude/registry.json";
+
+interface Registry {
+  version: string;
+  apis: Record<string, unknown>;
+  components?: Record<string, unknown>;
+  pages?: Record<string, unknown>;
+  combined?: Record<string, unknown>;
+}
+
+/**
+ * Hustle Dev Dashboard
+ *
+ * Central hub linking to all development tools and showcases.
+ * Provides quick access to:
+ * - API Showcase & Documentation
+ * - UI Showcase & Storybook
+ * - Test Results
+ * - TypeDoc API Documentation
+ *
+ * Created with Hustle API Dev Tools (v3.12.11)
+ */
+export default function HustleDevDashboard() {
+  const registry: Registry = registryData || {
+    version: "1.0.0",
+    apis: {},
+    components: {},
+    pages: {},
+    combined: {},
+  };
+
+  const stats = useMemo(() => {
+    return {
+      apis: Object.keys(registry.apis || {}).length,
+      combined: Object.keys(registry.combined || {}).length,
+      components: Object.keys(registry.components || {}).length,
+      pages: Object.keys(registry.pages || {}).length,
+    };
+  }, [registry]);
+
+  const totalAPIs = stats.apis + stats.combined;
+  const totalUI = stats.components + stats.pages;
+
+  return (
+    <div className="min-h-screen bg-white dark:bg-gray-950">
+      {/* Header */}
+      <header className="border-b-4 border-black bg-[#BA0C2F] px-6 py-8 dark:border-gray-600">
+        <div className="mx-auto max-w-6xl">
+          <h1 className="text-3xl font-black text-white">
+            HUSTLE DEV DASHBOARD
+          </h1>
+          <p className="mt-2 text-white/80">
+            Central hub for all development tools and showcases
+          </p>
+        </div>
+      </header>
+
+      {/* Main Content */}
+      <main className="mx-auto max-w-6xl px-6 py-8">
+        {/* Stats Overview */}
+        <div className="mb-8 grid gap-4 sm:grid-cols-4">
+          <StatCard label="APIs" value={stats.apis} />
+          <StatCard label="Combined" value={stats.combined} />
+          <StatCard label="Components" value={stats.components} />
+          <StatCard label="Pages" value={stats.pages} />
+        </div>
+
+        {/* Links Grid */}
+        <div className="grid gap-6 md:grid-cols-2">
+          {/* APIs Section */}
+          <DashboardSection
+            icon="📡"
+            title="APIs"
+            description={`${totalAPIs} endpoint${totalAPIs !== 1 ? "s" : ""} registered`}
+          >
+            <DashboardLink
+              href="/api-showcase"
+              title="API Showcase"
+              description="Interactive API testing and documentation"
+              primary
+            />
+            <DashboardLink
+              href="/docs/api"
+              title="API Documentation"
+              description="TypeDoc-generated API reference"
+            />
+          </DashboardSection>
+
+          {/* UI Section */}
+          <DashboardSection
+            icon="🧩"
+            title="Components & Pages"
+            description={`${totalUI} item${totalUI !== 1 ? "s" : ""} registered`}
+          >
+            <DashboardLink
+              href="/ui-showcase"
+              title="UI Showcase"
+              description="Component gallery with live previews"
+              primary
+            />
+            <DashboardLink
+              href="http://localhost:6006"
+              title="Storybook"
+              description="Component development environment"
+              external
+            />
+          </DashboardSection>
+
+          {/* Testing Section */}
+          <DashboardSection
+            icon="🧪"
+            title="Testing"
+            description="Test results and coverage reports"
+          >
+            <DashboardLink
+              href="/test-results"
+              title="Test Results"
+              description="Vitest unit test results"
+            />
+            <DashboardLink
+              href="/playwright-report"
+              title="Playwright Reports"
+              description="E2E test results and screenshots"
+            />
+          </DashboardSection>
+
+          {/* Documentation Section */}
+          <DashboardSection
+            icon="📚"
+            title="Documentation"
+            description="Project documentation and guides"
+          >
+            <DashboardLink
+              href="/docs"
+              title="TypeDoc Documentation"
+              description="Auto-generated code documentation"
+            />
+            <DashboardLink
+              href="https://github.com/hustle-together/api-dev-tools"
+              title="GitHub Repository"
+              description="Source code and README"
+              external
+            />
+          </DashboardSection>
+        </div>
+
+        {/* Workflow Status */}
+        <div className="mt-8 border-2 border-black bg-gray-50 p-6 dark:border-gray-600 dark:bg-gray-900">
+          <h2 className="mb-4 text-lg font-bold text-black dark:text-white">
+            Workflow Status
+          </h2>
+          <div className="grid gap-3 sm:grid-cols-2">
+            <StatusItem
+              label="TypeDoc"
+              status="ready"
+              command="pnpm typedoc"
+              description="Auto-generated on build"
+            />
+            <StatusItem
+              label="Unit Tests"
+              status="ready"
+              command="pnpm test"
+              description="Run during TDD phases"
+            />
+            <StatusItem
+              label="Storybook"
+              status="manual"
+              command="pnpm storybook"
+              description="Start server manually"
+            />
+            <StatusItem
+              label="E2E Tests"
+              status="ready"
+              command="pnpm test:e2e"
+              description="Run during verification"
+            />
+          </div>
+          <p className="mt-4 text-xs text-gray-500 dark:text-gray-400">
+            Most commands run automatically during workflows. Manual items require server startup.
+          </p>
+        </div>
+      </main>
+
+      {/* Footer */}
+      <footer className="border-t-2 border-black px-6 py-4 dark:border-gray-600">
+        <div className="mx-auto max-w-6xl text-center text-sm text-gray-600 dark:text-gray-400">
+          Built with{" "}
+          <a
+            href="https://github.com/hustle-together/api-dev-tools"
+            className="font-bold text-[#BA0C2F] hover:underline"
+          >
+            Hustle API Dev Tools
+          </a>
+        </div>
+      </footer>
+    </div>
+  );
+}
+
+function StatCard({ label, value }: { label: string; value: number }) {
+  return (
+    <div className="border-2 border-black bg-white p-4 dark:border-gray-600 dark:bg-gray-900">
+      <p className="text-3xl font-black text-[#BA0C2F]">{value}</p>
+      <p className="text-sm text-gray-600 dark:text-gray-400">{label}</p>
+    </div>
+  );
+}
+
+function DashboardSection({
+  icon,
+  title,
+  description,
+  children,
+}: {
+  icon: string;
+  title: string;
+  description: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="border-2 border-black dark:border-gray-600">
+      <div className="border-b-2 border-black bg-gray-50 px-4 py-3 dark:border-gray-600 dark:bg-gray-800">
+        <div className="flex items-center gap-2">
+          <span className="text-xl">{icon}</span>
+          <div>
+            <h2 className="font-bold text-black dark:text-white">{title}</h2>
+            <p className="text-xs text-gray-600 dark:text-gray-400">
+              {description}
+            </p>
+          </div>
+        </div>
+      </div>
+      <div className="divide-y divide-gray-200 bg-white dark:divide-gray-700 dark:bg-gray-900">
+        {children}
+      </div>
+    </div>
+  );
+}
+
+function DashboardLink({
+  href,
+  title,
+  description,
+  primary,
+  external,
+}: {
+  href: string;
+  title: string;
+  description: string;
+  primary?: boolean;
+  external?: boolean;
+}) {
+  const LinkComponent = external ? "a" : Link;
+  const externalProps = external
+    ? { target: "_blank", rel: "noopener noreferrer" }
+    : {};
+
+  return (
+    <LinkComponent
+      href={href}
+      className={`block px-4 py-3 transition-colors hover:bg-gray-50 dark:hover:bg-gray-800 ${
+        primary ? "bg-[#BA0C2F]/5" : ""
+      }`}
+      {...externalProps}
+    >
+      <div className="flex items-center justify-between">
+        <div>
+          <p
+            className={`font-medium ${
+              primary
+                ? "text-[#BA0C2F]"
+                : "text-black dark:text-white"
+            }`}
+          >
+            {title}
+            {external && (
+              <span className="ml-1 text-xs text-gray-400">↗</span>
+            )}
+          </p>
+          <p className="text-xs text-gray-600 dark:text-gray-400">
+            {description}
+          </p>
+        </div>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className="text-gray-400"
+        >
+          <polyline points="9 18 15 12 9 6" />
+        </svg>
+      </div>
+    </LinkComponent>
+  );
+}
+
+function StatusItem({
+  label,
+  status,
+  command,
+  description,
+}: {
+  label: string;
+  status: "ready" | "manual" | "running" | "error";
+  command: string;
+  description: string;
+}) {
+  const statusConfig = {
+    ready: {
+      bg: "bg-green-100 dark:bg-green-900/30",
+      text: "text-green-700 dark:text-green-400",
+      label: "Auto",
+      icon: "✓",
+    },
+    manual: {
+      bg: "bg-yellow-100 dark:bg-yellow-900/30",
+      text: "text-yellow-700 dark:text-yellow-400",
+      label: "Manual",
+      icon: "⚡",
+    },
+    running: {
+      bg: "bg-blue-100 dark:bg-blue-900/30",
+      text: "text-blue-700 dark:text-blue-400",
+      label: "Running",
+      icon: "◐",
+    },
+    error: {
+      bg: "bg-red-100 dark:bg-red-900/30",
+      text: "text-red-700 dark:text-red-400",
+      label: "Error",
+      icon: "✗",
+    },
+  };
+
+  const config = statusConfig[status];
+
+  return (
+    <div className="rounded border border-gray-200 bg-white p-3 dark:border-gray-700 dark:bg-gray-800">
+      <div className="flex items-center justify-between">
+        <span className="font-medium text-black dark:text-white">{label}</span>
+        <span
+          className={`rounded px-2 py-0.5 text-xs font-medium ${config.bg} ${config.text}`}
+        >
+          {config.icon} {config.label}
+        </span>
+      </div>
+      <code className="mt-1 block text-xs text-[#BA0C2F]">{command}</code>
+      <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+        {description}
+      </p>
+    </div>
+  );
+}

package/templates/page/page.e2e.test.ts

@@ -37,36 +37,40 @@ test.describe("__PAGE_NAME__ Page", () => {
   });
 
   // ===================================
-  // Responsive Tests
+  // Responsive Tests (7 Viewports)
   // ===================================
 
-  test("should be responsive on mobile", async ({ page }) => {
-    await page.setViewportSize({ width: 375, height: 667 });
-    await page.goto("/__PAGE_ROUTE__");
-
-    // Verify main content is visible
-    await expect(page.getByRole("main")).toBeVisible();
-
-    // Verify no horizontal scroll
-    const body = await page.locator("body");
-    const scrollWidth = await body.evaluate((el) => el.scrollWidth);
-    const clientWidth = await body.evaluate((el) => el.clientWidth);
-    expect(scrollWidth).toBeLessThanOrEqual(clientWidth + 1); // +1 for rounding
-  });
-
-  test("should be responsive on tablet", async ({ page }) => {
-    await page.setViewportSize({ width: 768, height: 1024 });
-    await page.goto("/__PAGE_ROUTE__");
-
-    await expect(page.getByRole("main")).toBeVisible();
-  });
+  // All 7 viewports from performance-budgets.json
+  const viewports = [
+    { name: "mobile-portrait", width: 375, height: 667 },
+    { name: "mobile-notch", width: 393, height: 852 },
+    { name: "mobile-landscape", width: 667, height: 375 },
+    { name: "tablet-portrait", width: 768, height: 1024 },
+    { name: "tablet-landscape", width: 1024, height: 768 },
+    { name: "small-desktop", width: 1280, height: 720 },
+    { name: "desktop", width: 1920, height: 1080 },
+  ];
+
+  for (const viewport of viewports) {
+    test(`should be responsive on ${viewport.name} (${viewport.width}x${viewport.height})`, async ({
+      page,
+    }) => {
+      await page.setViewportSize({
+        width: viewport.width,
+        height: viewport.height,
+      });
+      await page.goto("/__PAGE_ROUTE__");
 
-  test("should be responsive on desktop", async ({ page }) => {
-    await page.setViewportSize({ width: 1920, height: 1080 });
-    await page.goto("/__PAGE_ROUTE__");
+      // Verify main content is visible
+      await expect(page.getByRole("main")).toBeVisible();
 
-    await expect(page.getByRole("main")).toBeVisible();
-  });
+      // Verify no horizontal scroll
+      const body = await page.locator("body");
+      const scrollWidth = await body.evaluate((el) => el.scrollWidth);
+      const clientWidth = await body.evaluate((el) => el.clientWidth);
+      expect(scrollWidth).toBeLessThanOrEqual(clientWidth + 1);
+    });
+  }
 
   // ===================================
   // Accessibility Tests

package/templates/performance-budgets.json

@@ -48,11 +48,69 @@
   },
 
   "responsive": {
-    "description": "Responsive breakpoints to test",
+    "description": "Responsive breakpoints to test (7 comprehensive viewports)",
     "breakpoints": [
-      { "name": "mobile", "width": 375, "height": 667 },
-      { "name": "tablet", "width": 768, "height": 1024 },
-      { "name": "desktop", "width": 1920, "height": 1080 }
-    ]
+      {
+        "name": "mobile-portrait",
+        "width": 375,
+        "height": 667,
+        "description": "iPhone SE baseline",
+        "safeArea": null
+      },
+      {
+        "name": "mobile-notch",
+        "width": 393,
+        "height": 852,
+        "description": "iPhone 14 Pro with notch and home indicator",
+        "safeArea": {
+          "top": 47,
+          "bottom": 34,
+          "left": 0,
+          "right": 0
+        }
+      },
+      {
+        "name": "mobile-landscape",
+        "width": 667,
+        "height": 375,
+        "description": "iPhone rotated landscape",
+        "safeArea": null
+      },
+      {
+        "name": "tablet-portrait",
+        "width": 768,
+        "height": 1024,
+        "description": "iPad Mini baseline",
+        "safeArea": null
+      },
+      {
+        "name": "tablet-landscape",
+        "width": 1024,
+        "height": 768,
+        "description": "iPad Mini rotated",
+        "safeArea": null
+      },
+      {
+        "name": "small-desktop",
+        "width": 1280,
+        "height": 720,
+        "description": "Laptop screens, 720p displays",
+        "safeArea": null
+      },
+      {
+        "name": "desktop",
+        "width": 1920,
+        "height": 1080,
+        "description": "Standard desktop 1080p",
+        "safeArea": null
+      }
+    ],
+    "safeAreaCSS": {
+      "description": "CSS environment variables for safe area insets",
+      "top": "env(safe-area-inset-top, 0px)",
+      "bottom": "env(safe-area-inset-bottom, 0px)",
+      "left": "env(safe-area-inset-left, 0px)",
+      "right": "env(safe-area-inset-right, 0px)"
+    }
   }
 }