froggy-docs 1.1.1 → 1.1.3

package/frontend/lib/components/file_field.dart

@@ -0,0 +1,75 @@
+import 'dart:js_interop';
+
+import 'package:jaspr/dom.dart';
+import 'package:jaspr/jaspr.dart';
+import 'package:web/web.dart' as web;
+
+/// A modular form field component that renders either a text input or a file
+/// input depending on [isFile]. File bytes are surfaced to the parent via
+/// [onFileSelected]; text changes via [onTextChanged].
+class FileField extends StatelessComponent {
+  const FileField({
+    required this.endpointKey,
+    required this.fieldName,
+    required this.description,
+    required this.isFile,
+    required this.fieldType,
+    this.savedValue = '',
+    required this.onTextChanged,
+    required this.onFileSelected,
+    super.key,
+  });
+
+  final String endpointKey;
+  final String fieldName;
+  final String description;
+  final bool isFile;
+  final String fieldType;
+  final String savedValue;
+  final void Function(String value) onTextChanged;
+  final void Function(List<int> bytes, String name) onFileSelected;
+
+  @override
+  Component build(BuildContext context) {
+    return div(
+      [
+        label([Component.text('$fieldName (${isFile ? 'file' : fieldType})')]),
+        if (description.isNotEmpty)
+          span([Component.text(description)], classes: 'field-desc'),
+        if (isFile)
+          input<List<web.File>>(
+            type: InputType.file,
+            classes: 'form-input file-input',
+            onChange: (files) {
+              if (files.isNotEmpty) {
+                final file = files.first;
+                final fileName = file.name;
+                final reader = web.FileReader();
+                reader.addEventListener(
+                  'load',
+                  ((JSAny? _) {
+                    final result = reader.result;
+                    if (result != null) {
+                      onFileSelected(
+                        (result as JSArrayBuffer).toDart.asUint8List(),
+                        fileName,
+                      );
+                    }
+                  }).toJS,
+                );
+                reader.readAsArrayBuffer(file);
+              }
+            },
+          )
+        else
+          input<String>(
+            type: InputType.text,
+            classes: 'form-input',
+            value: savedValue,
+            onInput: onTextChanged,
+          ),
+      ],
+      classes: 'form-field',
+    );
+  }
+}

package/frontend/web/app.js

@@ -6,6 +6,8 @@ const responses = {};
 const loading = {};
 const requestBodyValues = {};
 const expandedEndpoints = {};
+const expandedQuery = {};
+const expandedHeaders = {};
 
 const methodColors = {
     GET: '#61affe',
@@ -19,7 +21,11 @@ async function loadData() {
     try {
         const resp = await fetch('/froggy_docs.json');
         if (resp.ok) {
-            apiData = await resp.json();
+            const newData = await resp.json();
+            if (apiData && JSON.stringify(apiData) !== JSON.stringify(newData)) {
+                showHotReloadToast();
+            }
+            apiData = newData;
             render();
         }
     } catch (e) {
@@ -27,6 +33,20 @@ async function loadData() {
     }
 }
 
+function showHotReloadToast() {
+    let toast = document.getElementById('hot-reload-toast');
+    if (!toast) {
+        toast = document.createElement('div');
+        toast.id = 'hot-reload-toast';
+        toast.className = 'toast';
+        document.body.appendChild(toast);
+    }
+    toast.textContent = '🔄 Spec hot-reloaded!';
+    toast.style.display = 'block';
+    clearTimeout(toast._timer);
+    toast._timer = setTimeout(() => { toast.style.display = 'none'; }, 3000);
+}
+
 function getEndpointsByTag() {
     const byTag = {};
     const paths = apiData?.paths || {};
@@ -59,10 +79,10 @@ function renderSidebar() {
     let html = '';
     for (const [tag, endpoints] of filtered) {
         const tagMatchesSearch = searchQuery === '' || tag.toLowerCase().includes(searchQuery.toLowerCase());
-        const tagFiltered = searchQuery === '' || tagMatchesSearch 
-            ? endpoints 
+        const tagFiltered = tagMatchesSearch
+            ? endpoints
             : endpoints.filter(ep => ep.path.toLowerCase().includes(searchQuery.toLowerCase()));
-        
+
         if (searchQuery !== '' && tagFiltered.length === 0) continue;
 
         html += `
@@ -98,31 +118,134 @@ function renderApiList() {
     document.getElementById('apiList').innerHTML = html;
 }
 
+function getBodyProps(spec) {
+    const jsonProps = spec.requestBody?.content?.['application/json']?.schema?.properties;
+    const multipartProps = spec.requestBody?.content?.['multipart/form-data']?.schema?.properties;
+    return { props: jsonProps || multipartProps, hasFiles: !!multipartProps };
+}
+
+function renderFormField(key, name, prop) {
+    const isFile = prop.format === 'binary';
+    const savedValue = (requestBodyValues[key] || {})[name] || '';
+    return `
+        <div class="form-field">
+            <label>${name} (${isFile ? 'file' : (prop.type || 'string')})</label>
+            ${prop.description ? `<span class="field-desc">${prop.description}</span>` : ''}
+            ${isFile
+                ? `<input type="file" class="form-input file-input" id="file-${key}-${name}">`
+                : `<input type="text" class="form-input"
+                       placeholder="${prop.default || ''}"
+                       value="${savedValue}"
+                       oninput="saveBodyValue('${key}', '${name}', this.value)">`
+            }
+        </div>
+    `;
+}
+
+function renderQuerySection(key, params) {
+    if (!params || params.length === 0) return '';
+    const isExpanded = expandedQuery[key] || false;
+    return `
+        <div class="query-section">
+            <button class="collapsible-btn" onclick="toggleQuery('${key}')">
+                ${isExpanded ? '▲' : '▼'} Query Params
+            </button>
+            ${isExpanded ? `
+                <div class="params-form">
+                    ${params.map(qp => {
+                        const savedVal = (requestBodyValues[`query-${key}`] || {})[qp.name] || '';
+                        const defaultVal = qp.schema?.default ?? '';
+                        return `
+                            <div class="form-field">
+                                <label>${qp.name} (${qp.schema?.type || 'string'})</label>
+                                ${qp.description ? `<span class="field-desc">${qp.description}</span>` : ''}
+                                <input type="text" class="form-input"
+                                    placeholder="${defaultVal}"
+                                    value="${savedVal}"
+                                    oninput="saveQueryValue('${key}', '${qp.name}', this.value)">
+                            </div>
+                        `;
+                    }).join('')}
+                </div>
+            ` : ''}
+        </div>
+    `;
+}
+
+function renderHeadersSection(key, params) {
+    if (!params || params.length === 0) return '';
+    const isExpanded = expandedHeaders[key] || false;
+    return `
+        <div class="headers-section">
+            <button class="collapsible-btn" onclick="toggleHeaders('${key}')">
+                ${isExpanded ? '▲' : '▼'} Headers
+            </button>
+            ${isExpanded ? `
+                <div class="params-form">
+                    ${params.map(hp => {
+                        const savedVal = (requestBodyValues[`header-${key}`] || {})[hp.name] || '';
+                        return `
+                            <div class="form-field">
+                                <label>${hp.name} (${hp.schema?.type || 'string'})</label>
+                                ${hp.description ? `<span class="field-desc">${hp.description}</span>` : ''}
+                                <input type="text" class="form-input"
+                                    value="${savedVal}"
+                                    oninput="saveHeaderValue('${key}', '${hp.name}', this.value)">
+                            </div>
+                        `;
+                    }).join('')}
+                </div>
+            ` : ''}
+        </div>
+    `;
+}
+
+function renderResponseSchemas(responses) {
+    if (!responses) return '';
+    const entries = Object.entries(responses);
+    if (entries.length === 0) return '';
+    return `
+        <div class="response-schemas">
+            <h3 class="section-title">Responses</h3>
+            ${entries.map(([code, resp]) => {
+                const content = resp.content?.['application/json'];
+                const schemaType = content?.schema?.type || 'object';
+                const example = content?.example;
+                return `
+                    <div class="response-schema">
+                        <div class="response-code">${code} - ${resp.description || ''}</div>
+                        ${content ? `<div class="schema-type">Type: ${schemaType}</div>` : ''}
+                        ${example != null ? `<pre class="schema-example">${JSON.stringify(example, null, 2)}</pre>` : ''}
+                    </div>
+                `;
+            }).join('')}
+        </div>
+    `;
+}
+
 function renderEndpoint(path, method, spec) {
     const key = `${method}-${path}`;
-    const props = spec.requestBody?.content?.['application/json']?.schema?.properties;
+    const { props, hasFiles } = getBodyProps(spec);
     const hasAuth = spec.security != null;
     const isExpanded = expandedEndpoints[key] || false;
-    const savedValues = requestBodyValues[key] || {};
-
-    let paramsHtml = '';
-    if (props && Object.keys(props).length > 0) {
-        paramsHtml = `
-            <h3 class="section-title">Parameters</h3>
-            <table class="params-table">
-                <thead><tr><th>Field</th><th>Type</th><th>Description</th></tr></thead>
-                <tbody>
-                    ${Object.entries(props).map(([name, prop]) => `
-                        <tr>
-                            <td><b>${name}</b></td>
-                            <td><span class="type-label">${prop.type || 'string'}</span></td>
-                            <td>${prop.description || '-'}</td>
-                        </tr>
-                    `).join('')}
-                </tbody>
-            </table>
-        `;
-    }
+
+    const queryParams = (spec.parameters || []).filter(p => p.in === 'query');
+    const headerParams = (spec.parameters || []).filter(p => p.in === 'header');
+
+    const formHtml = props && Object.keys(props).length > 0 ? `
+        <button class="try-it-out-btn ${isExpanded ? '' : 'secondary'}" onclick="toggleBody('${key}')">
+            ${isExpanded ? 'Hide Request Body' : 'Show Request Body'}
+        </button>
+        ${isExpanded ? `
+            <h3 class="section-title">${hasFiles ? 'Multipart Form Data' : 'Request Body'}</h3>
+            <div class="request-body-form">
+                ${Object.entries(props).map(([name, prop]) => renderFormField(key, name, prop)).join('')}
+            </div>
+        ` : ''}
+    ` : '';
+
+    const propsJson = props ? JSON.stringify(props).replace(/"/g, '&quot;') : 'null';
+    const hasFilesStr = hasFiles ? 'true' : 'false';
 
     return `
         <section class="api-section" id="${method.toUpperCase()}-${path}">
@@ -132,83 +255,117 @@ function renderEndpoint(path, method, spec) {
                 ${hasAuth ? '<span class="auth-badge">🔒 Auth</span>' : ''}
             </div>
             <p class="api-description">${spec.summary || 'No description'}</p>
-            
-            ${props && Object.keys(props).length > 0 ? `
-                <button class="try-it-out-btn ${isExpanded ? '' : 'secondary'}" onclick="toggleBody('${key}')">
-                    ${isExpanded ? 'Hide Request Body' : 'Show Request Body'}
-                </button>
-                ${isExpanded ? `
-                    <h3 class="section-title">Request Body</h3>
-                    <div class="request-body-form">
-                        ${Object.entries(props).map(([name, prop]) => `
-                            <div class="form-field">
-                                <label>${name} (${prop.type || 'string'})</label>
-                                ${prop.description ? `<span class="field-desc">${prop.description}</span>` : ''}
-                                <input type="text" class="form-input" placeholder="${prop.default || ''}" 
-                                    value="${savedValues[name] || ''}" 
-                                    oninput="saveBodyValue('${key}', '${name}', this.value)">
-                            </div>
-                        `).join('')}
-                    </div>
-                ` : ''}
-            ` : ''}
 
-            <button class="try-it-out-btn" onclick="executeRequest('${method}', '${path}', ${hasAuth}, ${props ? JSON.stringify(props).replace(/"/g, '&quot;') : 'null'})">
+            ${formHtml}
+            ${renderQuerySection(key, queryParams)}
+            ${renderHeadersSection(key, headerParams)}
+            ${renderResponseSchemas(spec.responses)}
+
+            <button class="try-it-out-btn" onclick="executeRequest('${method}', '${path}', ${hasAuth}, ${propsJson}, ${hasFilesStr})">
                 ${loading[key] ? 'Loading...' : 'Try It Out'}
             </button>
 
             ${responses[key] ? `
                 <div class="response-section">
                     <h4>Response:</h4>
-                    <pre class="response-body">${responses[key]}</pre>
+                    <pre class="response-body">${escapeHtml(responses[key])}</pre>
                 </div>
             ` : ''}
-
-            ${paramsHtml}
         </section>
     `;
 }
 
+function escapeHtml(str) {
+    return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+
 function toggleBody(key) {
     expandedEndpoints[key] = !expandedEndpoints[key];
     renderApiList();
 }
 
+function toggleQuery(key) {
+    expandedQuery[key] = !expandedQuery[key];
+    renderApiList();
+}
+
+function toggleHeaders(key) {
+    expandedHeaders[key] = !expandedHeaders[key];
+    renderApiList();
+}
+
 function saveBodyValue(key, field, value) {
     if (!requestBodyValues[key]) requestBodyValues[key] = {};
     requestBodyValues[key][field] = value;
 }
 
-async function executeRequest(method, path, hasAuth, props) {
+function saveQueryValue(key, field, value) {
+    const qKey = `query-${key}`;
+    if (!requestBodyValues[qKey]) requestBodyValues[qKey] = {};
+    requestBodyValues[qKey][field] = value;
+}
+
+function saveHeaderValue(key, field, value) {
+    const hKey = `header-${key}`;
+    if (!requestBodyValues[hKey]) requestBodyValues[hKey] = {};
+    requestBodyValues[hKey][field] = value;
+}
+
+async function executeRequest(method, path, hasAuth, props, hasFiles) {
     const key = `${method}-${path}`;
     loading[key] = true;
     renderApiList();
 
     try {
-        const headers = { 'Content-Type': 'application/json' };
+        const headers = {};
         if (authHeader) headers['Authorization'] = authHeader;
 
-        let body = '{}';
-        if (props && Object.keys(props).length > 0) {
-            const bodyData = {};
-            const savedValues = requestBodyValues[key] || {};
-            for (const [name, prop] of Object.entries(props)) {
-                const value = savedValues[name] || prop.default || '';
-                if (value) bodyData[name] = prop.type === 'number' ? Number(value) : value;
-            }
-            body = JSON.stringify(bodyData);
+        // Add saved custom headers
+        const savedHeaders = requestBodyValues[`header-${key}`] || {};
+        for (const [name, val] of Object.entries(savedHeaders)) {
+            if (val) headers[name] = val;
+        }
+
+        // Build URL with query params
+        let url = `${window.location.origin}${path}`;
+        const savedQuery = requestBodyValues[`query-${key}`] || {};
+        const queryParts = Object.entries(savedQuery).filter(([, v]) => v);
+        if (queryParts.length > 0) {
+            url += '?' + queryParts.map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`).join('&');
         }
 
         let resp;
-        const url = `${window.location.origin}${path}`;
-        const options = { method, headers };
 
-        if (method !== 'GET' && method !== 'DELETE') {
-            options.body = body;
+        if (hasFiles && props) {
+            // Multipart: use FormData to carry both text fields and file inputs
+            const formData = new FormData();
+            for (const [name, prop] of Object.entries(props)) {
+                if (prop.format === 'binary') {
+                    const fileInput = document.getElementById(`file-${key}-${name}`);
+                    if (fileInput && fileInput.files && fileInput.files[0]) {
+                        formData.append(name, fileInput.files[0]);
+                    }
+                } else {
+                    const val = (requestBodyValues[key] || {})[name] || prop.default || '';
+                    if (val) formData.append(name, val);
+                }
+            }
+            resp = await fetch(url, { method, headers, body: formData });
+        } else {
+            headers['Content-Type'] = 'application/json';
+            let body;
+            if (props && method !== 'GET' && method !== 'HEAD') {
+                const bodyData = {};
+                const savedValues = requestBodyValues[key] || {};
+                for (const [name, prop] of Object.entries(props)) {
+                    const value = savedValues[name] || prop.default || '';
+                    if (value) bodyData[name] = prop.type === 'number' ? Number(value) : value;
+                }
+                body = JSON.stringify(bodyData);
+            }
+            resp = await fetch(url, { method, headers, body });
         }
 
-        resp = await fetch(url, options);
-
         let responseText;
         try {
             const json = await resp.json();
@@ -248,4 +405,4 @@ if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
 }
 
 loadData();
-setInterval(loadData, 3000);
+setInterval(loadData, 3000);