froggy-docs 1.0.0

package/frontend/lib/app.dart

@@ -0,0 +1,377 @@
+import 'package:jaspr/dom.dart';
+import 'package:jaspr/jaspr.dart';
+import 'package:http/http.dart' as http;
+import 'dart:convert';
+import 'dart:async';
+import 'dart:html' as html;
+
+class App extends StatefulComponent {
+  const App({super.key});
+
+  @override
+  State<App> createState() => _AppState();
+}
+
+class _AppState extends State<App> {
+  Map<String, dynamic>? apiData;
+  Timer? timer;
+  bool isDark = false;
+  String searchQuery = '';
+  String authHeader = '';
+  final Map<String, String> _responses = {};
+  final Map<String, bool> _loading = {};
+  final Map<String, Map<String, String>> _requestBodyValues = {};
+  final Map<String, bool> _expandedEndpoints = {};
+
+  @override
+  void initState() {
+    super.initState();
+    _loadData();
+    timer = Timer.periodic(const Duration(seconds: 3), (_) => _loadData());
+
+    try {
+      if (html.window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        isDark = true;
+        _applyTheme();
+      }
+    } catch (_) {}
+  }
+
+  @override
+  void dispose() {
+    timer?.cancel();
+    super.dispose();
+  }
+
+  void _applyTheme() {
+    try {
+      html.document.documentElement?.setAttribute('data-theme', isDark ? 'dark' : 'light');
+    } catch (_) {}
+  }
+
+  Future<void> _loadData() async {
+    try {
+      final resp = await http.get(Uri.parse('/froggy_docs.json'));
+      if (resp.statusCode == 200) {
+        final data = jsonDecode(resp.body);
+        setState(() => apiData = data as Map<String, dynamic>);
+      }
+    } catch (_) {}
+  }
+
+  Future<void> _executeRequest(String method, String path, bool hasAuth, Map<String, dynamic>? props) async {
+    final key = '$method-$path';
+    setState(() => _loading[key] = true);
+
+    try {
+      final baseUrl = html.window.location.origin;
+      final url = '$baseUrl$path';
+
+      final headers = <String, String>{
+        'Content-Type': 'application/json',
+      };
+
+      if (authHeader.isNotEmpty) {
+        headers['Authorization'] = authHeader;
+      }
+
+      String body = '{}';
+      if (props != null && props.isNotEmpty) {
+        final Map<String, dynamic> bodyData = {};
+        final savedValues = _requestBodyValues[key] ?? {};
+        for (var prop in props.entries) {
+          final value = savedValues[prop.key] ?? _getDefaultValue(prop.value['type']);
+          if (value.isNotEmpty) {
+            bodyData[prop.key] = _parseValue(value, prop.value['type']);
+          }
+        }
+        body = jsonEncode(bodyData);
+      }
+
+      http.Response resp;
+      switch (method.toUpperCase()) {
+        case 'GET':
+          resp = await http.get(Uri.parse(url), headers: headers);
+          break;
+        case 'POST':
+          resp = await http.post(Uri.parse(url), headers: headers, body: body);
+          break;
+        case 'PUT':
+          resp = await http.put(Uri.parse(url), headers: headers, body: body);
+          break;
+        case 'DELETE':
+          resp = await http.delete(Uri.parse(url), headers: headers);
+          break;
+        case 'PATCH':
+          resp = await http.patch(Uri.parse(url), headers: headers, body: body);
+          break;
+        default:
+          resp = await http.get(Uri.parse(url), headers: headers);
+      }
+
+      setState(() {
+        if (resp.statusCode >= 200 && resp.statusCode < 300) {
+          try {
+            _responses[key] = JsonEncoder.withIndent('  ').convert(jsonDecode(resp.body));
+          } catch (_) {
+            _responses[key] = resp.body;
+          }
+        } else {
+          _responses[key] = 'Error ${resp.statusCode}: ${resp.body}';
+        }
+      });
+    } catch (e) {
+      setState(() {
+        _responses[key] = 'Error: $e';
+      });
+    } finally {
+      setState(() => _loading[key] = false);
+    }
+  }
+
+  String _getDefaultValue(String? type) {
+    switch (type?.toString().toLowerCase()) {
+      case 'number':
+        return '0';
+      case 'boolean':
+        return 'true';
+      case 'array':
+        return '[]';
+      case 'object':
+        return '{}';
+      default:
+        return '';
+    }
+  }
+
+  dynamic _parseValue(String value, String? type) {
+    switch (type?.toString().toLowerCase()) {
+      case 'number':
+        return num.tryParse(value) ?? 0;
+      case 'boolean':
+        return value.toLowerCase() == 'true';
+      case 'array':
+        return [];
+      case 'object':
+        return {};
+      default:
+        return value;
+    }
+  }
+
+  Map<String, List<MapEntry<String, dynamic>>> _getEndpointsByTag() {
+    final Map<String, List<MapEntry<String, dynamic>>> byTag = {};
+    final paths = apiData?['paths'] as Map<String, dynamic>? ?? {};
+
+    for (var path in paths.entries) {
+      for (var method in (path.value as Map<String, dynamic>).entries) {
+        final tags = (method.value['tags'] as List?) ?? ['Untagged'];
+        for (var tag in tags) {
+          byTag.putIfAbsent(tag.toString(), () => []);
+          byTag[tag.toString()]!.add(MapEntry(path.key, method));
+        }
+      }
+    }
+    return byTag;
+  }
+
+  @override
+  Component build(BuildContext context) {
+    return div(classes: 'app-container', [
+      _buildSidebar(),
+      _buildMainContent(),
+    ]);
+  }
+
+  Component _buildSidebar() {
+    final byTag = _getEndpointsByTag();
+
+    final filtered = byTag.entries.where((e) {
+      if (searchQuery.isEmpty) return true;
+      if (e.key.toLowerCase().contains(searchQuery.toLowerCase())) return true;
+      return e.value.any((ep) => ep.key.toLowerCase().contains(searchQuery.toLowerCase()));
+    }).toList();
+
+    return aside(classes: 'sidebar', [
+      div(classes: 'sidebar-header', [
+        h2([
+          span([text('🐸')], attributes: {'style': 'font-size: 24px;'}),
+          text(' FroggyDocs'),
+        ]),
+      ]),
+      div(classes: 'search-container', [
+        input(
+          type: InputType.text,
+          classes: 'search-box',
+          attributes: {'placeholder': 'Search tags or endpoints...'},
+          onInput: (val) => setState(() => searchQuery = val.toString()),
+        ),
+      ]),
+      nav(classes: 'nav-list', [
+        for (var tagGroup in filtered) _buildTagGroup(tagGroup.key, tagGroup.value),
+      ]),
+    ]);
+  }
+
+  Component _buildTagGroup(String tag, List<MapEntry<String, dynamic>> endpoints) {
+    final matchesSearch = searchQuery.isEmpty || tag.toLowerCase().contains(searchQuery.toLowerCase());
+
+    // When searching by tag name, show ALL endpoints in that tag
+    // When searching by endpoint path, filter endpoints
+    final filtered = (searchQuery.isEmpty || matchesSearch)
+        ? endpoints
+        : endpoints.where((ep) => ep.key.toLowerCase().contains(searchQuery.toLowerCase())).toList();
+
+    if (searchQuery.isNotEmpty && filtered.isEmpty) return div([]);
+
+    return div(classes: 'tag-group', [
+      div(classes: 'tag-header', [
+        span([text('▶ $tag')]),
+      ]),
+      div(classes: 'tag-endpoints', [
+        for (var ep in filtered)
+          a(classes: 'nav-item', href: '#${ep.value.key.toUpperCase()}-${ep.key}', [
+            span(classes: 'method-tag ${ep.value.key.toUpperCase()}', [text(ep.value.key.toUpperCase())]),
+            span([text(ep.key)]),
+          ]),
+      ]),
+    ]);
+  }
+
+  Component _buildMainContent() {
+    return div(classes: 'main-content', [
+      header(classes: 'header', [
+        h1([text((apiData?['info'] as Map<String, dynamic>?)?['title'] as String? ?? 'API Documentation')]),
+        button(
+          classes: 'theme-toggle',
+          [text(isDark ? '☀️' : '🌙')],
+          events: {
+            'click': (_) => setState(() {
+              isDark = !isDark;
+              _applyTheme();
+            }),
+          },
+        ),
+      ]),
+      div(classes: 'settings-section', [
+        div([text('Authorization: ')]),
+        input(
+          type: InputType.text,
+          classes: 'auth-input',
+          attributes: {'placeholder': 'Bearer token'},
+          onInput: (val) => setState(() => authHeader = val.toString()),
+        ),
+      ]),
+      if (apiData == null)
+        div(classes: 'api-section', [
+          p([text('Loading...')]),
+        ])
+      else
+        _buildApiList(),
+    ]);
+  }
+
+  Component _buildApiList() {
+    final paths = apiData!['paths'] as Map<String, dynamic>? ?? {};
+    return div([
+      for (var path in paths.entries)
+        for (var method in (path.value as Map<String, dynamic>).entries)
+          _buildEndpoint(path.key, method.key, method.value),
+    ]);
+  }
+
+  Component _buildEndpoint(String path, String method, dynamic spec) {
+    final props =
+        spec['requestBody']?['content']?['application/json']?['schema']?['properties'] as Map<String, dynamic>?;
+    final hasAuth = spec['security'] != null;
+    final key = '$method-$path';
+    final response = _responses[key];
+    final isLoading = _loading[key] ?? false;
+    final isExpanded = _expandedEndpoints[key] ?? false;
+    final savedValues = _requestBodyValues[key] ?? {};
+
+    return section(
+      classes: 'api-section',
+      attributes: {'id': '${method.toUpperCase()}-$path'},
+      [
+        div(classes: 'endpoint-header', [
+          span(classes: 'method-tag ${method.toUpperCase()}', [text(method.toUpperCase())]),
+          span(classes: 'path-text', [text(path)]),
+          if (hasAuth) span(classes: 'auth-badge', [text('🔒 Auth')]),
+        ]),
+        p(classes: 'api-description', [text(spec['summary'] ?? 'No description')]),
+
+        if (props != null && props.isNotEmpty) ...[
+          button(
+            classes: 'try-it-out-btn',
+            [text(isExpanded ? 'Hide Request Body' : 'Show Request Body')],
+            events: {'click': (_) => setState(() => _expandedEndpoints[key] = !isExpanded)},
+          ),
+          if (isExpanded) ...[
+            h3(classes: 'section-title', [text('Request Body')]),
+            div(classes: 'request-body-form', [
+              for (var prop in props.entries)
+                div(classes: 'form-field', [
+                  label([text(prop.key), text(' (${prop.value['type'] ?? 'string'})')]),
+                  if (prop.value['description'] != null && (prop.value['description'] as String).isNotEmpty)
+                    span(classes: 'field-desc', [text(prop.value['description'])]),
+                  input(
+                    type: InputType.text,
+                    classes: 'form-input',
+                    attributes: {
+                      'placeholder': _getDefaultValue(prop.value['type']),
+                      'value': savedValues[prop.key] ?? '',
+                    },
+                    onInput: (val) {
+                      setState(() {
+                        _requestBodyValues[key] ??= {};
+                        _requestBodyValues[key]![prop.key] = val.toString();
+                      });
+                    },
+                  ),
+                ]),
+            ]),
+          ],
+        ],
+
+        button(
+          classes: 'try-it-out-btn ${props != null && props.isNotEmpty ? 'secondary' : ''}',
+          [text(isLoading ? 'Loading...' : 'Try It Out')],
+          events: {'click': (_) => _executeRequest(method, path, hasAuth, props)},
+        ),
+
+        if (response != null) ...[
+          div(classes: 'response-section', [
+            h4([text('Response:')]),
+            pre(classes: 'response-body', [text(response)]),
+          ]),
+        ],
+
+        if (props != null && props.isNotEmpty) ...[
+          h3(classes: 'section-title', [text('Parameters')]),
+          table(classes: 'params-table', [
+            thead([
+              tr([
+                th([text('Field')]),
+                th([text('Type')]),
+                th([text('Description')]),
+              ]),
+            ]),
+            tbody([
+              for (var prop in props.entries)
+                tr([
+                  td([
+                    b([text(prop.key)]),
+                  ]),
+                  td([
+                    span(classes: 'type-label', [text((prop.value['type'] ?? 'string').toString())]),
+                  ]),
+                  td([text((prop.value['description'] ?? '-').toString())]),
+                ]),
+            ]),
+          ]),
+        ],
+      ],
+    );
+  }
+}

package/frontend/lib/constants/theme.dart

@@ -0,0 +1,27 @@
+import 'package:jaspr/dom.dart';
+
+// As your CSS styles are defined using just Dart, you can simply
+// use global variables or methods for common things like colors.
+const primaryColor = Color('#01589B');
+
+// Defines the global CSS styles for this project.
+//
+// By using the @css annotation, these will be rendered automatically to CSS and included in your page.
+@css
+List<StyleRule> get styles => [
+  // Special import rule to include to another css file.
+  css.import('https://fonts.googleapis.com/css?family=Roboto'),
+  // Each style rule takes a valid css selector and a set of styles.
+  // Styles are defined using type-safe css bindings and can be freely chained and nested.
+  css('html, body').styles(
+    width: 100.percent,
+    minHeight: 100.vh,
+    padding: .zero,
+    margin: .zero,
+    fontFamily: const .list([FontFamily('Roboto'), FontFamilies.sansSerif]),
+  ),
+  css('h1').styles(
+    margin: .unset,
+    fontSize: 4.rem,
+  ),
+];

package/frontend/lib/main.client.dart

@@ -0,0 +1,12 @@
+import 'package:jaspr/client.dart';
+
+import 'app.dart';
+import 'main.client.options.dart';
+
+void main() {
+  Jaspr.initializeApp(
+    options: defaultClientOptions,
+  );
+
+  runApp(const App());
+}

package/frontend/lib/main.client.options.dart

@@ -0,0 +1,25 @@
+// dart format off
+// ignore_for_file: type=lint
+
+// GENERATED FILE, DO NOT MODIFY
+// Generated with jaspr_builder
+
+import 'package:jaspr/client.dart';
+
+/// Default [ClientOptions] for use with your Jaspr project.
+///
+/// Use this to initialize Jaspr **before** calling [runApp].
+///
+/// Example:
+/// ```dart
+/// import 'main.client.options.dart';
+///
+/// void main() {
+///   Jaspr.initializeApp(
+///     options: defaultClientOptions,
+///   );
+///
+///   runApp(...);
+/// }
+/// ```
+ClientOptions get defaultClientOptions => ClientOptions();

package/frontend/pubspec.yaml

@@ -0,0 +1,20 @@
+name: frontend
+description: A new Jaspr project
+version: 0.0.1
+
+environment:
+  sdk: ^3.10.0
+
+dependencies:
+  jaspr: ^0.23.0
+  http: ^1.6.0
+  web: ^1.0.0
+
+dev_dependencies:
+  build_runner: ^2.10.0
+  build_web_compilers: ^4.4.18
+  jaspr_builder: ^0.23.0
+  lints: ^5.0.0
+
+jaspr:
+  mode: client

package/frontend/web/froggy_docs.json

@@ -0,0 +1,134 @@
+{
+  "openapi": "3.0.0",
+  "info": {
+    "title": "FroggyDocs Generated API",
+    "version": "1.0.0",
+    "description": "Auto-generated by FroggyDocs"
+  },
+  "paths": {
+    "/api/simple": {
+      "get": {
+        "summary": "Simple setup using method 1",
+        "responses": {
+          "200": {
+            "description": "Successful response"
+          }
+        },
+        "tags": [
+          "Users"
+        ],
+        "requestBody": {
+          "content": {
+            "application/json": {
+              "schema": {
+                "type": "object",
+                "properties": {
+                  "title": {
+                    "type": "string",
+                    "description": "Post title"
+                  },
+                  "views": {
+                    "type": "number",
+                    "description": "Total views count"
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/api/me": {
+      "get": {
+        "summary": "Extracting from external file called mock.json using method 2",
+        "responses": {
+          "200": {
+            "description": "Successful response"
+          }
+        },
+        "tags": [
+          "Users"
+        ],
+        "requestBody": {
+          "content": {
+            "application/json": {
+              "schema": {
+                "type": "object",
+                "properties": {
+                  "email": {
+                    "type": "string",
+                    "description": "Inferred from file"
+                  },
+                  "age": {
+                    "type": "number",
+                    "description": "Inferred from file"
+                  },
+                  "isAdmin": {
+                    "type": "boolean",
+                    "description": "Inferred from file"
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/api/inline-json": {
+      "put": {
+        "summary": "Extracting from inline JSON block using method 3",
+        "responses": {
+          "200": {
+            "description": "Successful response"
+          }
+        },
+        "tags": [
+          "Users"
+        ]
+      }
+    },
+    "/api/login": {
+      "post": {
+        "summary": "User login endpoint with inline JSON body",
+        "responses": {
+          "200": {
+            "description": "Successful response"
+          }
+        },
+        "tags": [
+          "Auth"
+        ]
+      }
+    },
+    "/api/register": {
+      "post": {
+        "summary": "User registration endpoint with inline JSON body",
+        "responses": {
+          "200": {
+            "description": "Successful response"
+          }
+        },
+        "tags": [
+          "Auth"
+        ]
+      }
+    }
+  },
+  "components": {
+    "securitySchemes": {
+      "bearerAuth": {
+        "type": "http",
+        "scheme": "bearer",
+        "bearerFormat": "JWT"
+      }
+    }
+  },
+  "tags": [
+    {
+      "name": "Users"
+    },
+    {
+      "name": "Auth"
+    }
+  ]
+}

package/frontend/web/images/logo.svg

@@ -0,0 +1,16 @@
+<svg width="210" height="274" viewBox="0 0 210 274" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M63.9999 231L122.5 273.5C122.5 273.5 169 220.5 185 209L181.5 192L198.5 201C197 186.5 188.5 169.5 188.5 169.5C197 162 204.5 153.5 204.5 125.5C204.5 114 196.5 119.5 189.5 92.5L198 93.5C198 81.5 189 66.5 189 66.5L199.5 55.5L207.5 64C207.5 64 213 43 207.5 31C202 19 163 0 150.5 0C138 0 124 22 124 22H98.4999C98.4999 22 89.5 2.5 71 2.5C50.5001 2.5 10.5 25 4.49999 33.5C-1.50001 42 1.99992 65.5 1.99992 65.5L12.9999 56L25.4999 72.5C8.99992 92.5 -7.58171e-05 123.5 3.99992 158L17.4999 153C11.9999 164.5 10.4999 186.5 14.4999 204L29.4999 198C33.9999 214 47.4999 235 59.9999 244.5C60.4999 240 63.9999 231 63.9999 231Z" fill="#09387E"/>
+<path d="M81 26.5C65 39 59.5 64.5 45 77L23.5 47.5C35 35.5 62 22.5 77 22L81 26.5Z" fill="#0066B4"/>
+<path d="M152.5 20.5C175 28 187.5 39 191.5 45L183.5 55C176.5 44 166.5 34.5 146 26.5L152.5 20.5Z" fill="#0066B4"/>
+<path d="M57.5 212.5C69 224.5 107 241 122.5 254C140.5 237 169 204 169 204C170.5 198.5 169 184.5 167.5 177.5L182.5 182C181 176.5 180 174 175.5 170C171 166 150.542 164.097 138 163.5C127.5 163 114.5 159 112.5 146C124 147 122 153.5 132.5 154.5L167.5 157C175.5 158 191.5 151 194.5 128.5L192.5 119C171 98 188.5 83 175.5 61.5C167.632 48.487 149 35.5 131.5 35.5H100C91 35.5 77 45.5 76 59.5C71 84 54.5 91 37.5 100.5C24 109 16.5 119.5 16.5 135.5L27.5 132C38.4097 112.908 53.7479 109.544 74 106C47 119 25.5 143 26.5 181L36 177.5C37.5 189 44 211.5 54.5 223L57.5 212.5Z" fill="#0066B4"/>
+<path d="M83 194.5C95.5 235 110 240.5 122.5 253.5C150.5 232 163 192 154.5 173.5C143.5 178 134 185.5 132 194.5C112.5 184.5 106 166.5 112.5 146C125.452 156.462 145.091 156.952 166.761 157.494L167 157.5C187 158 191.5 143 193 137.5C194.5 132 196.5 124 193 119C179.622 103.295 143.065 107.948 145 81.5C146.5 61 138.5 52.5 134.5 46.5C130.5 40.5 124.5 36.5 121 37.5C117.5 38.5 119.2 46 121 50.5C125.135 60.8386 138.333 70.8257 139.5 82.5C141.95 107 115.073 117.463 97 126.5C75 140 66 163 65 181.5C64 205 73 219.5 81 228C79 219.5 77 204.5 83 194.5Z" fill="#40C4FF"/>
+<path d="M163 125.5C163 133.5 168.5 139 180 139C187.5 139 194 135 193.5 126C193.5 122.5 191.5 118 186 118H171C166 118 163 121.5 163 125.5Z" fill="#09387E"/>
+<path d="M23.5 47.5C20.3 49.9 15.1667 54.1667 13 56L15 58.5C24 53 28.5 50.2 42.5 41C56.5 31.8 65.5 28 78.5 23.5L77 22C53.5 24 28.5 42 23.5 47.5Z" fill="black" fill-opacity="0.12"/>
+<path d="M191.5 45L199.5 55.5L199 56L191 46.5C184 38.5 170.5 28.2035 151.5 21.5L152.5 20.5C160.5 23 182.5 32 191.5 45Z" fill="black" fill-opacity="0.12"/>
+<path d="M109.281 80.015C101.528 79.6946 96 84.5557 96 88.961C96 93.3663 100.954 101 109.281 101C117.609 101 123.886 97.7715 123.999 93.3663C124.112 88.961 117.035 80.3354 109.281 80.015Z" fill="#09387E"/>
+<path d="M109.281 80.015C101.528 79.6946 96 84.5557 96 88.961C96 93.3663 100.954 101 109.281 101C117.609 101 123.886 97.7715 123.999 93.3663C124.112 88.961 117.035 80.3354 109.281 80.015Z" stroke="#09387E"/>
+<path d="M162.957 80.645C158.105 83.1798 155.508 89.44 156.906 92.2618C158.304 95.0835 165.851 97.0356 171.288 94.1601C176.121 91.6042 177.861 82.4891 175.904 80.5952C173.946 78.7013 167.182 78.4376 162.957 80.645Z" fill="#09387E"/>
+<path d="M162.957 80.645C158.105 83.1798 155.508 89.44 156.906 92.2618C158.304 95.0835 165.851 97.0356 171.288 94.1601C176.121 91.6042 177.861 82.4891 175.904 80.5952C173.946 78.7013 167.182 78.4376 162.957 80.645Z" stroke="#09387E"/>
+<circle cx="112" cy="92" r="6" fill="#0066B4"/>
+<path d="M172 88C172 90.7614 169.761 93 167 93C164.239 93 162 90.7614 162 88C162 85.2386 164.239 83 167 83C169.761 83 172 85.2386 172 88Z" fill="#0066B4"/>
+</svg>

package/frontend/web/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>FroggyDocs</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <script defer src="main.client.dart.js"></script>
+</body>
+</html>