zero-doc 1.0.15 → 1.0.16

package/dist/cli.js

@@ -676,6 +676,11 @@ commander_1.program
             }
         });
         server.listen(CALLBACK_PORT, () => {
+            // Display login link
+            const reset = '\x1b[0m';
+            const blue = '\x1b[34m';
+            const underline = '\x1b[4m';
+            console.log(`\n🔐 Login URL: ${blue}${underline}${LOGIN_URL}${reset}\n`);
             // Open browser silently
             let openCommand;
             if (process.platform === 'win32') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zero-doc",
-  "version": "1.0.15",
+  "version": "1.0.16",
   "description": "Zero-Config API Documentation Generator - Generate beautiful API docs from your code automatically",
   "main": "dist/index.js",
   "bin": {

package/viewer/src/components/CodeSnippet.tsx

@@ -8,6 +8,9 @@ interface CodeSnippetProps {
 
 const CodeSnippet: React.FC<CodeSnippetProps> = ({ endpoint, baseUrl = 'https://api.example.com' }) => {
   const [showToast, setShowToast] = useState(false);
+  const [isExecuting, setIsExecuting] = useState(false);
+  const [response, setResponse] = useState<{ status: number; data: any; headers: Record<string, string> } | null>(null);
+  const [showResponse, setShowResponse] = useState(false);
 
   const pathParams = endpoint.parameters.filter(p => p.in === 'path');
   const queryParams = endpoint.parameters.filter(p => p.in === 'query');
@@ -69,6 +72,89 @@ const CodeSnippet: React.FC<CodeSnippetProps> = ({ endpoint, baseUrl = 'https://
     }
   };
 
+  const executeRequest = async () => {
+    setIsExecuting(true);
+    setResponse(null);
+    setShowResponse(true);
+
+    try {
+      let actualUrl = endpoint.path;
+      pathParams.forEach(param => {
+        actualUrl = actualUrl.replace(`:${param.name}`, '1');
+      });
+
+      const actualQueryString = queryParams.length > 0
+        ? '?' + queryParams.map(p => `${p.name}=${p.inferredType === 'number' ? '1' : 'value'}`).join('&')
+        : '';
+
+      const cleanBaseUrl = baseUrl.replace(/\/$/, '');
+      const cleanPath = actualUrl.startsWith('/') ? actualUrl : `/${actualUrl}`;
+      const requestUrl = `${cleanBaseUrl}${cleanPath}${actualQueryString}`;
+
+      const headers: Record<string, string> = {};
+      
+      if (needsAuth) {
+        if (endpoint.authentication?.type === 'bearer') {
+          headers['Authorization'] = 'Bearer YOUR_TOKEN_HERE';
+        } else if (endpoint.authentication?.type === 'api-key') {
+          headers['X-API-Key'] = 'YOUR_API_KEY_HERE';
+        } else {
+          headers['Authorization'] = 'YOUR_AUTH_TOKEN_HERE';
+        }
+      }
+
+      headerParams.forEach(header => {
+        headers[header.name] = header.required ? 'REQUIRED_VALUE' : 'OPTIONAL_VALUE';
+      });
+
+      let body: string | undefined;
+      if (bodyParams.length > 0) {
+        const bodyObj = bodyParams.reduce((acc, param) => {
+          const value = param.inferredType === 'number' ? 0 : 
+                       param.inferredType === 'boolean' ? true : 
+                       'value';
+          acc[param.name] = value;
+          return acc;
+        }, {} as Record<string, any>);
+        body = JSON.stringify(bodyObj);
+        headers['Content-Type'] = 'application/json';
+      }
+
+      const fetchResponse = await fetch(requestUrl, {
+        method: endpoint.method,
+        headers,
+        body: body,
+      });
+
+      const responseHeaders: Record<string, string> = {};
+      fetchResponse.headers.forEach((value, key) => {
+        responseHeaders[key] = value;
+      });
+
+      let responseData: any;
+      const contentType = fetchResponse.headers.get('content-type');
+      if (contentType && contentType.includes('application/json')) {
+        responseData = await fetchResponse.json();
+      } else {
+        responseData = await fetchResponse.text();
+      }
+
+      setResponse({
+        status: fetchResponse.status,
+        data: responseData,
+        headers: responseHeaders,
+      });
+    } catch (error: any) {
+      setResponse({
+        status: 0,
+        data: { error: error.message || 'Request failed' },
+        headers: {},
+      });
+    } finally {
+      setIsExecuting(false);
+    }
+  };
+
   return (
     <>
       <div className="bg-gray-900 rounded-lg border border-gray-700 overflow-hidden shadow-lg">
@@ -81,13 +167,39 @@ const CodeSnippet: React.FC<CodeSnippetProps> = ({ endpoint, baseUrl = 'https://
             </div>
             <span className="text-xs font-medium text-gray-400 uppercase tracking-wider">curl</span>
           </div>
-          <button
-            onClick={() => copyToClipboard(curlCommand)}
-            className="px-3 py-1.5 text-xs text-gray-400 hover:text-white transition-colors rounded hover:bg-gray-700/50 border border-gray-700 hover:border-gray-600"
-            title="Copy to clipboard"
-          >
-            📋 Copy
-          </button>
+          <div className="flex items-center gap-2">
+            <button
+              onClick={executeRequest}
+              disabled={isExecuting}
+              className="px-3 py-1.5 text-xs text-white bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 disabled:cursor-not-allowed transition-colors rounded border border-blue-500 hover:border-blue-600 flex items-center gap-1.5"
+              title="Try it out"
+            >
+              {isExecuting ? (
+                <>
+                  <svg className="animate-spin h-3 w-3" fill="none" viewBox="0 0 24 24">
+                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                  </svg>
+                  Executing...
+                </>
+              ) : (
+                <>
+                  <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                  </svg>
+                  Try it out
+                </>
+              )}
+            </button>
+            <button
+              onClick={() => copyToClipboard(curlCommand)}
+              className="px-3 py-1.5 text-xs text-gray-400 hover:text-white transition-colors rounded hover:bg-gray-700/50 border border-gray-700 hover:border-gray-600"
+              title="Copy to clipboard"
+            >
+              📋 Copy
+            </button>
+          </div>
         </div>
         <div className="p-5 overflow-x-auto bg-gray-950">
           <pre className="text-sm text-gray-100 font-mono leading-relaxed whitespace-pre-wrap">
@@ -166,6 +278,47 @@ const CodeSnippet: React.FC<CodeSnippetProps> = ({ endpoint, baseUrl = 'https://
         </div>
       </div>
 
+      {/* Response Section */}
+      {showResponse && response && (
+        <div className="mt-4 bg-gray-900 rounded-lg border border-gray-700 overflow-hidden shadow-lg">
+          <div className="flex items-center justify-between px-4 py-3 border-b border-gray-700 bg-gray-800/50">
+            <div className="flex items-center gap-2">
+              <div className="flex gap-1.5">
+                <div className="w-3 h-3 rounded-full bg-red-500"></div>
+                <div className="w-3 h-3 rounded-full bg-yellow-500"></div>
+                <div className="w-3 h-3 rounded-full bg-green-500"></div>
+              </div>
+              <span className="text-xs font-medium text-gray-400 uppercase tracking-wider">Response</span>
+              <span className={`px-2 py-0.5 rounded text-xs font-semibold ${
+                response.status >= 200 && response.status < 300 
+                  ? 'bg-green-900/30 text-green-400' 
+                  : response.status >= 400 
+                  ? 'bg-red-900/30 text-red-400'
+                  : 'bg-yellow-900/30 text-yellow-400'
+              }`}>
+                {response.status || 'Error'}
+              </span>
+            </div>
+            <button
+              onClick={() => setShowResponse(false)}
+              className="px-2 py-1 text-xs text-gray-400 hover:text-white transition-colors rounded hover:bg-gray-700/50"
+              title="Close"
+            >
+              ✕
+            </button>
+          </div>
+          <div className="p-5 overflow-x-auto bg-gray-950">
+            <pre className="text-sm text-gray-100 font-mono leading-relaxed whitespace-pre-wrap">
+              <code className="block">
+                {typeof response.data === 'string' 
+                  ? response.data 
+                  : JSON.stringify(response.data, null, 2)}
+              </code>
+            </pre>
+          </div>
+        </div>
+      )}
+
       {/* Toast Notification */}
       {showToast && (
         <div className="fixed bottom-4 right-4 bg-green-600 text-white px-4 py-3 rounded-lg shadow-lg flex items-center gap-2 z-50 animate-fade-in">