@hustle-together/api-dev-tools 3.6.5 → 3.9.2

package/templates/api-showcase/APIModal.tsx

@@ -0,0 +1,375 @@
+'use client';
+
+import { useEffect, useCallback, useState } from 'react';
+import { APITester } from './APITester';
+
+interface RegistryAPI {
+  name: string;
+  description?: string;
+  route: string;
+  schemas?: string;
+  tests?: string;
+  methods?: string[];
+  created_at?: string;
+  status?: string;
+  combines?: string[];
+  flow_type?: string;
+  endpoints?: Record<string, {
+    methods: string[];
+    description?: string;
+  }>;
+}
+
+interface APIModalProps {
+  id: string;
+  type: 'api' | 'combined';
+  data: RegistryAPI;
+  onClose: () => void;
+}
+
+/**
+ * API Modal Component
+ *
+ * Full-screen modal for API documentation and interactive testing.
+ * Includes:
+ * - Endpoint details
+ * - Multi-endpoint selector
+ * - Interactive "Try It" form
+ * - Request/response display
+ * - Curl example generation
+ *
+ * Created with Hustle API Dev Tools (v3.9.2)
+ */
+export function APIModal({ id, type, data, onClose }: APIModalProps) {
+  const [activeTab, setActiveTab] = useState<'try-it' | 'docs' | 'curl'>('try-it');
+  const [selectedEndpoint, setSelectedEndpoint] = useState<string | null>(null);
+
+  // Close on Escape key
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose();
+      }
+    },
+    [onClose]
+  );
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyDown);
+    document.body.style.overflow = 'hidden';
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+      document.body.style.overflow = '';
+    };
+  }, [handleKeyDown]);
+
+  // Get endpoints - either from endpoints object or default single endpoint
+  const endpoints = data.endpoints || { default: { methods: data.methods || ['POST'] } };
+  const endpointKeys = Object.keys(endpoints);
+  const hasMultipleEndpoints = endpointKeys.length > 1;
+
+  // Set initial endpoint
+  useEffect(() => {
+    if (endpointKeys.length > 0 && !selectedEndpoint) {
+      setSelectedEndpoint(endpointKeys[0]);
+    }
+  }, [endpointKeys, selectedEndpoint]);
+
+  const currentEndpoint = selectedEndpoint ? endpoints[selectedEndpoint] : endpoints[endpointKeys[0]];
+  const methods = currentEndpoint?.methods || data.methods || ['POST'];
+  const baseUrl = typeof window !== 'undefined' ? window.location.origin : 'http://localhost:3000';
+
+  // Build endpoint path
+  const getEndpointPath = () => {
+    if (selectedEndpoint && selectedEndpoint !== 'default') {
+      return `/api/v2/${id}/${selectedEndpoint}`;
+    }
+    return `/api/v2/${id}`;
+  };
+
+  const endpoint = getEndpointPath();
+
+  // Generate curl example
+  const generateCurl = (method: string) => {
+    if (method === 'GET') {
+      return `curl -X GET "${baseUrl}${endpoint}"`;
+    }
+    return `curl -X ${method} "${baseUrl}${endpoint}" \\
+  -H "Content-Type: application/json" \\
+  -d '{
+    "example": "value"
+  }'`;
+  };
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="modal-title"
+    >
+      {/* Backdrop */}
+      <div
+        className="absolute inset-0 bg-black/80 backdrop-blur-sm"
+        onClick={onClose}
+        aria-hidden="true"
+      />
+
+      {/* Modal Content */}
+      <div className="relative z-10 flex max-h-[90vh] w-full max-w-5xl flex-col overflow-hidden border-2 border-black bg-white shadow-xl dark:border-gray-600 dark:bg-gray-900">
+        {/* Header */}
+        <header className="flex items-center justify-between border-b-2 border-black px-6 py-4 dark:border-gray-600">
+          <div className="flex items-center gap-4">
+            <div>
+              <div className="flex items-center gap-2">
+                <h2 id="modal-title" className="text-xl font-bold text-black dark:text-white">
+                  {data.name || id}
+                </h2>
+                {type === 'combined' && (
+                  <span className="border border-purple-600 bg-purple-100 px-2 py-0.5 text-xs font-medium text-purple-800 dark:bg-purple-900 dark:text-purple-200">
+                    Combined
+                  </span>
+                )}
+              </div>
+              <p className="mt-1 text-sm text-gray-600 dark:text-gray-400">
+                {endpoint}
+              </p>
+            </div>
+          </div>
+
+          {/* Methods */}
+          <div className="flex items-center gap-4">
+            <div className="flex gap-1">
+              {methods.map((method) => (
+                <span
+                  key={method}
+                  className={`px-2 py-1 text-xs font-medium ${
+                    method === 'GET'
+                      ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
+                      : method === 'POST'
+                        ? 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200'
+                        : method === 'DELETE'
+                          ? 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200'
+                          : 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200'
+                  }`}
+                >
+                  {method}
+                </span>
+              ))}
+            </div>
+
+            <button
+              onClick={onClose}
+              className="border-2 border-black p-2 hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-800"
+              aria-label="Close"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="20"
+                height="20"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <path d="M18 6 6 18" />
+                <path d="m6 6 12 12" />
+              </svg>
+            </button>
+          </div>
+        </header>
+
+        {/* Endpoint Selector (for multi-endpoint APIs) */}
+        {hasMultipleEndpoints && (
+          <div className="border-b-2 border-black bg-gray-50 px-6 py-3 dark:border-gray-600 dark:bg-gray-800">
+            <label className="mb-2 block text-sm font-bold text-black dark:text-white">
+              Select Endpoint
+            </label>
+            <div className="flex flex-wrap gap-2">
+              {endpointKeys.map((key) => (
+                <button
+                  key={key}
+                  onClick={() => setSelectedEndpoint(key)}
+                  className={`border-2 px-3 py-1.5 text-sm font-medium transition-colors ${
+                    selectedEndpoint === key
+                      ? 'border-[#BA0C2F] bg-[#BA0C2F] text-white'
+                      : 'border-black bg-white text-black hover:border-[#BA0C2F] dark:border-gray-600 dark:bg-gray-700 dark:text-white'
+                  }`}
+                >
+                  /{key}
+                </button>
+              ))}
+            </div>
+            {currentEndpoint?.description && (
+              <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">
+                {currentEndpoint.description}
+              </p>
+            )}
+          </div>
+        )}
+
+        {/* Tabs */}
+        <div className="border-b-2 border-black px-6 dark:border-gray-600">
+          <nav className="flex gap-4">
+            <button
+              onClick={() => setActiveTab('try-it')}
+              className={`border-b-2 py-3 text-sm font-bold transition-colors ${
+                activeTab === 'try-it'
+                  ? 'border-[#BA0C2F] text-[#BA0C2F]'
+                  : 'border-transparent text-gray-600 hover:text-black dark:text-gray-400 dark:hover:text-white'
+              }`}
+            >
+              Try It
+            </button>
+            <button
+              onClick={() => setActiveTab('docs')}
+              className={`border-b-2 py-3 text-sm font-bold transition-colors ${
+                activeTab === 'docs'
+                  ? 'border-[#BA0C2F] text-[#BA0C2F]'
+                  : 'border-transparent text-gray-600 hover:text-black dark:text-gray-400 dark:hover:text-white'
+              }`}
+            >
+              Documentation
+            </button>
+            <button
+              onClick={() => setActiveTab('curl')}
+              className={`border-b-2 py-3 text-sm font-bold transition-colors ${
+                activeTab === 'curl'
+                  ? 'border-[#BA0C2F] text-[#BA0C2F]'
+                  : 'border-transparent text-gray-600 hover:text-black dark:text-gray-400 dark:hover:text-white'
+              }`}
+            >
+              Curl Examples
+            </button>
+          </nav>
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 overflow-auto p-6">
+          {activeTab === 'try-it' && (
+            <APITester
+              id={id}
+              endpoint={endpoint}
+              methods={methods}
+              selectedEndpoint={selectedEndpoint}
+              schemaPath={data.schemas}
+            />
+          )}
+
+          {activeTab === 'docs' && (
+            <div className="space-y-6">
+              {/* Description */}
+              <div>
+                <h3 className="mb-2 text-lg font-bold text-black dark:text-white">Description</h3>
+                <p className="text-gray-600 dark:text-gray-400">
+                  {data.description || `API endpoint for ${id}`}
+                </p>
+              </div>
+
+              {/* File Locations */}
+              <div>
+                <h3 className="mb-2 text-lg font-bold text-black dark:text-white">File Locations</h3>
+                <div className="space-y-2 border-2 border-black bg-gray-50 p-4 dark:border-gray-600 dark:bg-gray-800">
+                  <div className="flex justify-between">
+                    <span className="text-sm text-gray-600 dark:text-gray-400">Route:</span>
+                    <code className="text-sm text-black dark:text-white">{data.route || `src/app/api/v2/${id}/route.ts`}</code>
+                  </div>
+                  {data.schemas && (
+                    <div className="flex justify-between">
+                      <span className="text-sm text-gray-600 dark:text-gray-400">Schemas:</span>
+                      <code className="text-sm text-black dark:text-white">{data.schemas}</code>
+                    </div>
+                  )}
+                  {data.tests && (
+                    <div className="flex justify-between">
+                      <span className="text-sm text-gray-600 dark:text-gray-400">Tests:</span>
+                      <code className="text-sm text-black dark:text-white">{data.tests}</code>
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              {/* Combined Info */}
+              {type === 'combined' && data.combines && (
+                <div>
+                  <h3 className="mb-2 text-lg font-bold text-black dark:text-white">Combined APIs</h3>
+                  <div className="border-2 border-black bg-gray-50 p-4 dark:border-gray-600 dark:bg-gray-800">
+                    <p className="mb-2 text-sm text-gray-600 dark:text-gray-400">
+                      This endpoint orchestrates the following APIs:
+                    </p>
+                    <ul className="list-inside list-disc space-y-1">
+                      {data.combines.map((api) => (
+                        <li key={api} className="text-sm text-black dark:text-white">
+                          {api}
+                        </li>
+                      ))}
+                    </ul>
+                    {data.flow_type && (
+                      <p className="mt-3 text-sm">
+                        <span className="text-gray-600 dark:text-gray-400">Flow type:</span>{' '}
+                        <span className="font-bold text-black dark:text-white">{data.flow_type}</span>
+                      </p>
+                    )}
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+
+          {activeTab === 'curl' && (
+            <div className="space-y-4">
+              {methods.map((method) => (
+                <div key={method}>
+                  <h3 className="mb-2 text-sm font-bold text-black dark:text-white">{method} Request</h3>
+                  <div className="relative">
+                    <pre className="overflow-x-auto border-2 border-black bg-zinc-900 p-4 text-sm text-zinc-100">
+                      <code>{generateCurl(method)}</code>
+                    </pre>
+                    <button
+                      onClick={() => navigator.clipboard.writeText(generateCurl(method))}
+                      className="absolute right-2 top-2 border border-zinc-600 bg-zinc-700 px-2 py-1 text-xs text-zinc-300 hover:bg-zinc-600"
+                    >
+                      Copy
+                    </button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Footer */}
+        <footer className="border-t-2 border-black px-6 py-4 dark:border-gray-600">
+          <div className="flex items-center justify-between">
+            <p className="text-sm text-gray-600 dark:text-gray-400">
+              {data.created_at && `Created: ${data.created_at}`}
+            </p>
+            <div className="flex gap-2">
+              {data.tests && (
+                <button className="border-2 border-black px-3 py-1.5 text-sm font-medium hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-800">
+                  View Tests
+                </button>
+              )}
+              <button
+                onClick={() => {
+                  const importPath = data.schemas?.replace(/^src\//, '@/').replace(/\.ts$/, '');
+                  if (importPath) {
+                    navigator.clipboard.writeText(
+                      `import { RequestSchema, ResponseSchema } from '${importPath}';`
+                    );
+                  }
+                }}
+                className="border-2 border-black bg-[#BA0C2F] px-3 py-1.5 text-sm font-medium text-white hover:bg-[#8a0923]"
+              >
+                Copy Schema Import
+              </button>
+            </div>
+          </div>
+        </footer>
+      </div>
+    </div>
+  );
+}

package/templates/api-showcase/APIShowcase.tsx

@@ -0,0 +1,231 @@
+'use client';
+
+import { useState, useMemo } from 'react';
+import { APICard } from './APICard';
+import { APIModal } from './APIModal';
+
+/**
+ * Registry structure from .claude/registry.json
+ */
+interface RegistryAPI {
+  name: string;
+  description?: string;
+  route: string;
+  schemas?: string;
+  tests?: string;
+  methods?: string[];
+  created_at?: string;
+  status?: string;
+  endpoints?: Record<string, {
+    methods: string[];
+    description?: string;
+  }>;
+}
+
+interface Registry {
+  version: string;
+  apis: Record<string, RegistryAPI>;
+  combined?: Record<string, RegistryAPI & { combines?: string[]; flow_type?: string }>;
+}
+
+interface APIShowcaseProps {
+  registry?: Registry;
+}
+
+/**
+ * API Showcase Component
+ *
+ * Displays a grid of all registered APIs with filtering and search.
+ * Click any card to open the interactive testing modal.
+ *
+ * Data source: .claude/registry.json (apis + combined sections)
+ *
+ * Created with Hustle API Dev Tools (v3.9.2)
+ */
+export function APIShowcase({ registry: propRegistry }: APIShowcaseProps) {
+  const [selectedAPI, setSelectedAPI] = useState<{
+    id: string;
+    type: 'api' | 'combined';
+    data: RegistryAPI;
+  } | null>(null);
+  const [filter, setFilter] = useState<'all' | 'api' | 'combined'>('all');
+  const [search, setSearch] = useState('');
+
+  // Use prop registry or default empty structure
+  const registry: Registry = propRegistry || {
+    version: '1.0.0',
+    apis: {},
+    combined: {},
+  };
+
+  // Combine APIs and combined endpoints into single list
+  const allAPIs = useMemo(() => {
+    const items: Array<{ id: string; type: 'api' | 'combined'; data: RegistryAPI }> = [];
+
+    // Add regular APIs
+    Object.entries(registry.apis || {}).forEach(([id, data]) => {
+      items.push({ id, type: 'api', data });
+    });
+
+    // Add combined APIs
+    Object.entries(registry.combined || {}).forEach(([id, data]) => {
+      items.push({ id, type: 'combined', data });
+    });
+
+    return items;
+  }, [registry]);
+
+  // Filter and search
+  const filteredAPIs = useMemo(() => {
+    return allAPIs.filter((item) => {
+      // Type filter
+      if (filter !== 'all' && item.type !== filter) {
+        return false;
+      }
+
+      // Search filter
+      if (search) {
+        const searchLower = search.toLowerCase();
+        return (
+          item.id.toLowerCase().includes(searchLower) ||
+          item.data.name?.toLowerCase().includes(searchLower) ||
+          item.data.description?.toLowerCase().includes(searchLower)
+        );
+      }
+
+      return true;
+    });
+  }, [allAPIs, filter, search]);
+
+  // Stats
+  const stats = useMemo(() => {
+    return {
+      total: allAPIs.length,
+      apis: Object.keys(registry.apis || {}).length,
+      combined: Object.keys(registry.combined || {}).length,
+    };
+  }, [allAPIs, registry]);
+
+  return (
+    <div>
+      {/* Stats Bar */}
+      <div className="mb-6 flex flex-wrap items-center gap-4 border-2 border-black bg-gray-50 p-4 dark:border-gray-600 dark:bg-gray-800">
+        <div className="flex items-center gap-2">
+          <span className="text-2xl font-bold text-black dark:text-white">{stats.total}</span>
+          <span className="text-gray-600 dark:text-gray-400">Total APIs</span>
+        </div>
+        <div className="h-8 w-px bg-black dark:bg-gray-600" />
+        <div className="flex items-center gap-2">
+          <span className="font-bold text-black dark:text-white">{stats.apis}</span>
+          <span className="text-gray-600 dark:text-gray-400">Endpoints</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <span className="font-bold text-black dark:text-white">{stats.combined}</span>
+          <span className="text-gray-600 dark:text-gray-400">Combined</span>
+        </div>
+      </div>
+
+      {/* Filters */}
+      <div className="mb-6 flex flex-wrap items-center gap-4">
+        {/* Search */}
+        <div className="flex-1">
+          <input
+            type="text"
+            placeholder="Search APIs..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className="w-full max-w-md border-2 border-black bg-white px-4 py-2 focus:border-[#BA0C2F] focus:outline-none dark:border-gray-600 dark:bg-gray-800 dark:text-white"
+          />
+        </div>
+
+        {/* Type Filter */}
+        <div className="flex gap-2">
+          <button
+            onClick={() => setFilter('all')}
+            className={`border-2 px-4 py-2 text-sm font-bold transition-colors ${
+              filter === 'all'
+                ? 'border-[#BA0C2F] bg-[#BA0C2F] text-white'
+                : 'border-black bg-white text-black hover:border-[#BA0C2F] dark:border-gray-600 dark:bg-gray-800 dark:text-white'
+            }`}
+          >
+            All ({stats.total})
+          </button>
+          <button
+            onClick={() => setFilter('api')}
+            className={`border-2 px-4 py-2 text-sm font-bold transition-colors ${
+              filter === 'api'
+                ? 'border-[#BA0C2F] bg-[#BA0C2F] text-white'
+                : 'border-black bg-white text-black hover:border-[#BA0C2F] dark:border-gray-600 dark:bg-gray-800 dark:text-white'
+            }`}
+          >
+            APIs ({stats.apis})
+          </button>
+          <button
+            onClick={() => setFilter('combined')}
+            className={`border-2 px-4 py-2 text-sm font-bold transition-colors ${
+              filter === 'combined'
+                ? 'border-[#BA0C2F] bg-[#BA0C2F] text-white'
+                : 'border-black bg-white text-black hover:border-[#BA0C2F] dark:border-gray-600 dark:bg-gray-800 dark:text-white'
+            }`}
+          >
+            Combined ({stats.combined})
+          </button>
+        </div>
+      </div>
+
+      {/* Grid */}
+      {filteredAPIs.length > 0 ? (
+        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+          {filteredAPIs.map((item) => (
+            <APICard
+              key={`${item.type}-${item.id}`}
+              id={item.id}
+              type={item.type}
+              data={item.data}
+              onClick={() => setSelectedAPI(item)}
+            />
+          ))}
+        </div>
+      ) : (
+        <div className="flex flex-col items-center justify-center border-2 border-dashed border-black py-16 dark:border-gray-600">
+          <div className="mb-4 border-2 border-black bg-gray-100 p-4 dark:border-gray-600 dark:bg-gray-800">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="32"
+              height="32"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              className="text-gray-500"
+            >
+              <path d="M10 10h.01" />
+              <path d="M14 10h.01" />
+              <path d="M12 14a4 4 0 0 0 0-8" />
+              <path d="M16 10a4 4 0 0 0-8 0" />
+              <circle cx="12" cy="12" r="10" />
+            </svg>
+          </div>
+          <p className="text-lg font-bold text-black dark:text-white">No APIs found</p>
+          <p className="mt-1 text-sm text-gray-600 dark:text-gray-400">
+            {search
+              ? 'Try a different search term'
+              : 'Create your first API with /api-create'}
+          </p>
+        </div>
+      )}
+
+      {/* Modal */}
+      {selectedAPI && (
+        <APIModal
+          id={selectedAPI.id}
+          type={selectedAPI.type}
+          data={selectedAPI.data}
+          onClose={() => setSelectedAPI(null)}
+        />
+      )}
+    </div>
+  );
+}