@hustle-together/api-dev-tools 3.11.1 → 3.12.2

package/templates/api-showcase/_components/APIModal.tsx

@@ -1,7 +1,7 @@
-'use client';
+"use client";
 
-import { useEffect, useCallback, useState } from 'react';
-import { APITester } from './APITester';
+import { useEffect, useCallback, useState } from "react";
+import { APITester } from "./APITester";
 
 interface RegistryAPI {
   name: string;
@@ -14,15 +14,18 @@ interface RegistryAPI {
   status?: string;
   combines?: string[];
   flow_type?: string;
-  endpoints?: Record<string, {
-    methods: string[];
-    description?: string;
-  }>;
+  endpoints?: Record<
+    string,
+    {
+      methods: string[];
+      description?: string;
+    }
+  >;
 }
 
 interface APIModalProps {
   id: string;
-  type: 'api' | 'combined';
+  type: "api" | "combined";
   data: RegistryAPI;
   onClose: () => void;
 }
@@ -41,31 +44,35 @@ interface APIModalProps {
  * 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 [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') {
+      if (e.key === "Escape") {
         onClose();
       }
     },
-    [onClose]
+    [onClose],
   );
 
   useEffect(() => {
-    document.addEventListener('keydown', handleKeyDown);
-    document.body.style.overflow = 'hidden';
+    document.addEventListener("keydown", handleKeyDown);
+    document.body.style.overflow = "hidden";
 
     return () => {
-      document.removeEventListener('keydown', handleKeyDown);
-      document.body.style.overflow = '';
+      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 endpoints = data.endpoints || {
+    default: { methods: data.methods || ["POST"] },
+  };
   const endpointKeys = Object.keys(endpoints);
   const hasMultipleEndpoints = endpointKeys.length > 1;
 
@@ -76,13 +83,18 @@ export function APIModal({ id, type, data, onClose }: APIModalProps) {
     }
   }, [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';
+  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') {
+    if (selectedEndpoint && selectedEndpoint !== "default") {
       return `/api/v2/${id}/${selectedEndpoint}`;
     }
     return `/api/v2/${id}`;
@@ -92,7 +104,7 @@ export function APIModal({ id, type, data, onClose }: APIModalProps) {
 
   // Generate curl example
   const generateCurl = (method: string) => {
-    if (method === 'GET') {
+    if (method === "GET") {
       return `curl -X GET "${baseUrl}${endpoint}"`;
     }
     return `curl -X ${method} "${baseUrl}${endpoint}" \\
@@ -123,10 +135,13 @@ export function APIModal({ id, type, data, onClose }: APIModalProps) {
           <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">
+                <h2
+                  id="modal-title"
+                  className="text-xl font-bold text-black dark:text-white"
+                >
                   {data.name || id}
                 </h2>
-                {type === 'combined' && (
+                {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>
@@ -145,13 +160,13 @@ export function APIModal({ id, type, data, onClose }: APIModalProps) {
                 <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 === "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}
@@ -195,8 +210,8 @@ export function APIModal({ id, type, data, onClose }: APIModalProps) {
                   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'
+                      ? "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}
@@ -215,31 +230,31 @@ export function APIModal({ id, type, data, onClose }: APIModalProps) {
         <div className="border-b-2 border-black px-6 dark:border-gray-600">
           <nav className="flex gap-4">
             <button
-              onClick={() => setActiveTab('try-it')}
+              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'
+                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')}
+              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'
+                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')}
+              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'
+                activeTab === "curl"
+                  ? "border-[#BA0C2F] text-[#BA0C2F]"
+                  : "border-transparent text-gray-600 hover:text-black dark:text-gray-400 dark:hover:text-white"
               }`}
             >
               Curl Examples
@@ -249,7 +264,7 @@ export function APIModal({ id, type, data, onClose }: APIModalProps) {
 
         {/* Content */}
         <div className="flex-1 overflow-auto p-6">
-          {activeTab === 'try-it' && (
+          {activeTab === "try-it" && (
             <APITester
               id={id}
               endpoint={endpoint}
@@ -259,11 +274,13 @@ export function APIModal({ id, type, data, onClose }: APIModalProps) {
             />
           )}
 
-          {activeTab === 'docs' && (
+          {activeTab === "docs" && (
             <div className="space-y-6">
               {/* Description */}
               <div>
-                <h3 className="mb-2 text-lg font-bold text-black dark:text-white">Description</h3>
+                <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>
@@ -271,46 +288,69 @@ export function APIModal({ id, type, data, onClose }: APIModalProps) {
 
               {/* File Locations */}
               <div>
-                <h3 className="mb-2 text-lg font-bold text-black dark:text-white">File Locations</h3>
+                <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>
+                    <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>
+                      <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>
+                      <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 && (
+              {type === "combined" && data.combines && (
                 <div>
-                  <h3 className="mb-2 text-lg font-bold text-black dark:text-white">Combined APIs</h3>
+                  <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">
+                        <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>
+                        <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>
@@ -319,17 +359,21 @@ export function APIModal({ id, type, data, onClose }: APIModalProps) {
             </div>
           )}
 
-          {activeTab === 'curl' && (
+          {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>
+                  <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))}
+                      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
@@ -355,10 +399,12 @@ export function APIModal({ id, type, data, onClose }: APIModalProps) {
               )}
               <button
                 onClick={() => {
-                  const importPath = data.schemas?.replace(/^src\//, '@/').replace(/\.ts$/, '');
+                  const importPath = data.schemas
+                    ?.replace(/^src\//, "@/")
+                    .replace(/\.ts$/, "");
                   if (importPath) {
                     navigator.clipboard.writeText(
-                      `import { RequestSchema, ResponseSchema } from '${importPath}';`
+                      `import { RequestSchema, ResponseSchema } from '${importPath}';`,
                     );
                   }
                 }}

package/templates/api-showcase/_components/APIShowcase.tsx

@@ -1,8 +1,8 @@
-'use client';
+"use client";
 
-import { useState, useMemo } from 'react';
-import { APICard } from './APICard';
-import { APIModal } from './APIModal';
+import { useState, useMemo } from "react";
+import { APICard } from "./APICard";
+import { APIModal } from "./APIModal";
 
 /**
  * Registry structure from .claude/registry.json
@@ -16,16 +16,22 @@ interface RegistryAPI {
   methods?: string[];
   created_at?: string;
   status?: string;
-  endpoints?: Record<string, {
-    methods: string[];
-    description?: 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 }>;
+  combined?: Record<
+    string,
+    RegistryAPI & { combines?: string[]; flow_type?: string }
+  >;
 }
 
 interface APIShowcaseProps {
@@ -45,31 +51,35 @@ interface APIShowcaseProps {
 export function APIShowcase({ registry: propRegistry }: APIShowcaseProps) {
   const [selectedAPI, setSelectedAPI] = useState<{
     id: string;
-    type: 'api' | 'combined';
+    type: "api" | "combined";
     data: RegistryAPI;
   } | null>(null);
-  const [filter, setFilter] = useState<'all' | 'api' | 'combined'>('all');
-  const [search, setSearch] = useState('');
+  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',
+    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 }> = [];
+    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 });
+      items.push({ id, type: "api", data });
     });
 
     // Add combined APIs
     Object.entries(registry.combined || {}).forEach(([id, data]) => {
-      items.push({ id, type: 'combined', data });
+      items.push({ id, type: "combined", data });
     });
 
     return items;
@@ -79,7 +89,7 @@ export function APIShowcase({ registry: propRegistry }: APIShowcaseProps) {
   const filteredAPIs = useMemo(() => {
     return allAPIs.filter((item) => {
       // Type filter
-      if (filter !== 'all' && item.type !== filter) {
+      if (filter !== "all" && item.type !== filter) {
         return false;
       }
 
@@ -111,16 +121,22 @@ export function APIShowcase({ registry: propRegistry }: APIShowcaseProps) {
       {/* 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-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="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="font-bold text-black dark:text-white">
+            {stats.combined}
+          </span>
           <span className="text-gray-600 dark:text-gray-400">Combined</span>
         </div>
       </div>
@@ -141,31 +157,31 @@ export function APIShowcase({ registry: propRegistry }: APIShowcaseProps) {
         {/* Type Filter */}
         <div className="flex gap-2">
           <button
-            onClick={() => setFilter('all')}
+            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'
+              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')}
+            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'
+              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')}
+            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'
+              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})
@@ -208,11 +224,13 @@ export function APIShowcase({ registry: propRegistry }: APIShowcaseProps) {
               <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="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'}
+              ? "Try a different search term"
+              : "Create your first API with /api-create"}
           </p>
         </div>
       )}