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

package/templates/docs/page.tsx

@@ -0,0 +1,230 @@
+"use client";
+
+import Link from "next/link";
+import { useEffect, useState } from "react";
+
+/**
+ * Documentation Page
+ *
+ * Shows TypeDoc-generated documentation or instructions to generate it.
+ * Links to the generated markdown files in docs/api/.
+ *
+ * Created with Hustle API Dev Tools (v3.12.12)
+ */
+export default function DocsPage() {
+  const [hasContent, setHasContent] = useState<boolean | null>(null);
+
+  useEffect(() => {
+    // Check if docs exist by trying to fetch the index
+    fetch("/docs/api/README.md")
+      .then((res) => {
+        setHasContent(res.ok);
+      })
+      .catch(() => {
+        setHasContent(false);
+      });
+  }, []);
+
+  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-4xl">
+          <div className="flex items-center gap-2">
+            <Link
+              href="/hustle-dev-dashboard"
+              className="text-white/80 hover:text-white"
+            >
+              Dashboard
+            </Link>
+            <span className="text-white/60">/</span>
+            <span className="text-white">Documentation</span>
+          </div>
+          <h1 className="mt-2 text-3xl font-black text-white">
+            API DOCUMENTATION
+          </h1>
+          <p className="mt-2 text-white/80">
+            TypeDoc-generated code documentation
+          </p>
+        </div>
+      </header>
+
+      {/* Main Content */}
+      <main className="mx-auto max-w-4xl px-6 py-8">
+        {hasContent === null ? (
+          <div className="flex items-center justify-center py-16">
+            <div className="h-8 w-8 animate-spin rounded-full border-4 border-[#BA0C2F] border-t-transparent" />
+          </div>
+        ) : hasContent ? (
+          <DocsContent />
+        ) : (
+          <EmptyState />
+        )}
+      </main>
+
+      {/* Footer */}
+      <footer className="border-t-2 border-black px-6 py-4 dark:border-gray-600">
+        <div className="mx-auto max-w-4xl 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 DocsContent() {
+  return (
+    <div className="space-y-6">
+      <div className="border-2 border-black p-6 dark:border-gray-600">
+        <h2 className="mb-4 text-xl font-bold text-black dark:text-white">
+          Generated Documentation
+        </h2>
+        <p className="mb-4 text-gray-600 dark:text-gray-400">
+          Documentation has been generated. Browse the API reference:
+        </p>
+        <div className="space-y-2">
+          <DocLink href="/docs/api" title="API Reference" description="Full API documentation" />
+        </div>
+      </div>
+
+      <div className="border-2 border-black bg-gray-50 p-6 dark:border-gray-600 dark:bg-gray-900">
+        <h3 className="mb-2 font-bold text-black dark:text-white">
+          Regenerate Documentation
+        </h3>
+        <p className="mb-4 text-sm text-gray-600 dark:text-gray-400">
+          Run this command to update the documentation:
+        </p>
+        <code className="block rounded bg-white px-4 py-2 font-mono text-[#BA0C2F] dark:bg-gray-800">
+          pnpm typedoc
+        </code>
+      </div>
+    </div>
+  );
+}
+
+function EmptyState() {
+  return (
+    <div className="space-y-6">
+      {/* Status Card */}
+      <div className="border-2 border-black p-6 dark:border-gray-600">
+        <div className="flex items-center gap-3">
+          <div className="flex h-12 w-12 items-center justify-center rounded-full bg-gray-100 text-2xl dark:bg-gray-800">
+            0
+          </div>
+          <div>
+            <h2 className="text-xl font-bold text-black dark:text-white">
+              No Documentation Generated
+            </h2>
+            <p className="text-gray-600 dark:text-gray-400">
+              Run TypeDoc to generate API documentation
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Instructions */}
+      <div className="border-2 border-black bg-gray-50 p-6 dark:border-gray-600 dark:bg-gray-900">
+        <h3 className="mb-4 font-bold text-black dark:text-white">
+          Generate Documentation
+        </h3>
+        <div className="space-y-4">
+          <Step
+            number={1}
+            title="Run TypeDoc"
+            command="pnpm typedoc"
+            description="Generates Markdown documentation from TSDoc comments"
+          />
+          <Step
+            number={2}
+            title="View Output"
+            command="ls docs/api/"
+            description="Documentation files are generated in the docs/api/ folder"
+          />
+          <Step
+            number={3}
+            title="Refresh Page"
+            description="Refresh this page to see your documentation"
+          />
+        </div>
+      </div>
+
+      {/* Requirements */}
+      <div className="border-2 border-black p-6 dark:border-gray-600">
+        <h3 className="mb-4 font-bold text-black dark:text-white">
+          Requirements
+        </h3>
+        <ul className="space-y-2 text-sm text-gray-600 dark:text-gray-400">
+          <li className="flex items-center gap-2">
+            <span className="text-[#BA0C2F]">*</span>
+            typedoc.json configuration file in project root
+          </li>
+          <li className="flex items-center gap-2">
+            <span className="text-[#BA0C2F]">*</span>
+            TSDoc comments in your TypeScript files
+          </li>
+          <li className="flex items-center gap-2">
+            <span className="text-[#BA0C2F]">*</span>
+            typedoc and typedoc-plugin-markdown installed
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+}
+
+function Step({
+  number,
+  title,
+  command,
+  description,
+}: {
+  number: number;
+  title: string;
+  command?: string;
+  description: string;
+}) {
+  return (
+    <div className="flex gap-4">
+      <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-[#BA0C2F] text-sm font-bold text-white">
+        {number}
+      </div>
+      <div>
+        <p className="font-medium text-black dark:text-white">{title}</p>
+        {command && (
+          <code className="mt-1 block rounded bg-white px-3 py-1 font-mono text-sm text-[#BA0C2F] dark:bg-gray-800">
+            {command}
+          </code>
+        )}
+        <p className="mt-1 text-sm text-gray-600 dark:text-gray-400">
+          {description}
+        </p>
+      </div>
+    </div>
+  );
+}
+
+function DocLink({
+  href,
+  title,
+  description,
+}: {
+  href: string;
+  title: string;
+  description: string;
+}) {
+  return (
+    <Link
+      href={href}
+      className="block rounded border border-gray-200 p-4 transition-colors hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-800"
+    >
+      <p className="font-medium text-[#BA0C2F]">{title}</p>
+      <p className="text-sm text-gray-600 dark:text-gray-400">{description}</p>
+    </Link>
+  );
+}

package/templates/hustle-build-defaults.json

@@ -0,0 +1,84 @@
+{
+  "$schema": "hustle-build-defaults",
+  "description": "Pre-configured default answers for --auto mode. These are used when no explicit answer is provided.",
+
+  "orchestrator": {
+    "auth_required": true,
+    "error_handling": "partial-success",
+    "brand_guide": true,
+    "testing_level": "full",
+    "caching_strategy": "individual",
+    "documentation_level": "comprehensive"
+  },
+
+  "api": {
+    "include_all_params": true,
+    "rate_limiting": true,
+    "caching": "individual",
+    "error_format": "detailed",
+    "validation": "strict",
+    "logging": true,
+    "metrics": true
+  },
+
+  "component": {
+    "all_variants": true,
+    "accessibility": "wcag-aa",
+    "animations": true,
+    "responsive": true,
+    "dark_mode": true,
+    "loading_states": true,
+    "error_states": true,
+    "storybook": true
+  },
+
+  "page": {
+    "layout": "responsive-grid",
+    "seo": true,
+    "loading_states": true,
+    "error_boundary": true,
+    "suspense": true,
+    "prefetch": true,
+    "meta_tags": true
+  },
+
+  "combined": {
+    "execution_order": "parallel",
+    "caching": "unified",
+    "error_handling": "partial-success",
+    "retry_strategy": "exponential",
+    "timeout": 30000
+  },
+
+  "testing": {
+    "unit_tests": true,
+    "integration_tests": true,
+    "e2e_tests": true,
+    "visual_tests": true,
+    "coverage_threshold": 80,
+    "snapshot_tests": true
+  },
+
+  "documentation": {
+    "tsdoc": true,
+    "readme": true,
+    "changelog": true,
+    "storybook_docs": true,
+    "api_reference": true
+  },
+
+  "question_mappings": {
+    "auth": "auth_required",
+    "authentication": "auth_required",
+    "error": "error_handling",
+    "brand": "brand_guide",
+    "styling": "brand_guide",
+    "testing": "testing_level",
+    "cache": "caching_strategy",
+    "variant": "all_variants",
+    "a11y": "accessibility",
+    "accessibility": "accessibility",
+    "layout": "layout",
+    "seo": "seo"
+  }
+}

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>
+  );
+}