@kyro-cms/admin 0.1.6 → 0.1.8

package/src/pages/admin/api-explorer.astro

@@ -0,0 +1,98 @@
+---
+import AdminLayout from '../../layouts/AdminLayout.astro';
+import { ApiExplorer } from '../../components/ApiExplorer';
+
+const collectionsResponse = await fetch(`${Astro.url.origin}/api/collections`);
+const collectionsData = await collectionsResponse.json();
+const collections = collectionsData.collections || [];
+---
+
+<AdminLayout title="API Explorer">
+  <div class="flex-1 overflow-hidden p-8 pr-12">
+    <!-- Header -->
+    <div class="mb-6">
+      <div class="flex items-center justify-between mb-4">
+        <div>
+          <h1 class="text-3xl font-black tracking-tighter text-[var(--kyro-text-primary)]">
+            API Explorer
+          </h1>
+          <p class="text-[var(--kyro-text-secondary)] font-bold mt-2 text-sm uppercase tracking-wider">
+            Test and explore REST API endpoints interactively
+          </p>
+        </div>
+        <div class="flex items-center gap-3">
+          <a
+            href="/admin/rest-playground"
+            class="flex items-center gap-2 px-4 py-2 bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-primary)] rounded-lg font-bold text-sm hover:bg-[var(--kyro-surface)] transition-all border border-[var(--kyro-border)]"
+          >
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+            </svg>
+            Playground
+          </a>
+          <a
+            href="/api/collections"
+            target="_blank"
+            class="flex items-center gap-2 px-4 py-2 bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-primary)] rounded-lg font-bold text-sm hover:bg-[var(--kyro-surface)] transition-all border border-[var(--kyro-border)]"
+          >
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+            </svg>
+            Collections JSON
+          </a>
+        </div>
+      </div>
+
+      <!-- HTTP Methods Legend -->
+      <div class="flex items-center gap-4 text-xs">
+        <span class="text-[var(--kyro-text-muted)]">Methods:</span>
+        <span class="px-2 py-1 bg-green-500/10 text-green-600 rounded font-bold">GET</span>
+        <span class="px-2 py-1 bg-blue-500/10 text-blue-600 rounded font-bold">POST</span>
+        <span class="px-2 py-1 bg-yellow-500/10 text-yellow-600 rounded font-bold">PATCH</span>
+        <span class="px-2 py-1 bg-red-500/10 text-red-600 rounded font-bold">DELETE</span>
+      </div>
+    </div>
+
+    <!-- Explorer Component -->
+    <div class="surface-tile overflow-hidden p-6">
+      <ApiExplorer client:load collections={collections} />
+    </div>
+
+    <!-- Quick Reference -->
+    <div class="mt-6 surface-tile p-6">
+      <h2 class="text-xl font-black text-[var(--kyro-text-primary)] mb-4">Quick Reference</h2>
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 text-sm">
+        <div class="bg-[var(--kyro-surface-accent)] rounded-lg p-4">
+          <h3 class="font-bold text-[var(--kyro-text-primary)] mb-2">List All</h3>
+          <code class="text-xs text-[var(--kyro-text-secondary)] block">GET /api/:collection</code>
+          <p class="text-xs text-[var(--kyro-text-muted)] mt-2">Returns all documents with pagination</p>
+        </div>
+        <div class="bg-[var(--kyro-surface-accent)] rounded-lg p-4">
+          <h3 class="font-bold text-[var(--kyro-text-primary)] mb-2">Get One</h3>
+          <code class="text-xs text-[var(--kyro-text-secondary)] block">GET /api/:collection/:id</code>
+          <p class="text-xs text-[var(--kyro-text-muted)] mt-2">Returns a single document by ID</p>
+        </div>
+        <div class="bg-[var(--kyro-surface-accent)] rounded-lg p-4">
+          <h3 class="font-bold text-[var(--kyro-text-primary)] mb-2">Create</h3>
+          <code class="text-xs text-[var(--kyro-text-secondary)] block">POST /api/:collection</code>
+          <p class="text-xs text-[var(--kyro-text-muted)] mt-2">Creates a new document</p>
+        </div>
+        <div class="bg-[var(--kyro-surface-accent)] rounded-lg p-4">
+          <h3 class="font-bold text-[var(--kyro-text-primary)] mb-2">Update</h3>
+          <code class="text-xs text-[var(--kyro-text-secondary)] block">PATCH /api/:collection/:id</code>
+          <p class="text-xs text-[var(--kyro-text-muted)] mt-2">Updates an existing document</p>
+        </div>
+        <div class="bg-[var(--kyro-surface-accent)] rounded-lg p-4">
+          <h3 class="font-bold text-[var(--kyro-text-primary)] mb-2">Delete</h3>
+          <code class="text-xs text-[var(--kyro-text-secondary)] block">DELETE /api/:collection/:id</code>
+          <p class="text-xs text-[var(--kyro-text-muted)] mt-2">Deletes a document</p>
+        </div>
+        <div class="bg-[var(--kyro-surface-accent)] rounded-lg p-4">
+          <h3 class="font-bold text-[var(--kyro-text-primary)] mb-2">Pagination</h3>
+          <code class="text-xs text-[var(--kyro-text-secondary)] block">?page=1&amp;limit=10</code>
+          <p class="text-xs text-[var(--kyro-text-muted)] mt-2">Add query params for pagination</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</AdminLayout>

package/src/pages/admin/graphql-explorer.astro

@@ -0,0 +1,40 @@
+---
+import AdminLayout from '../../layouts/AdminLayout.astro';
+import { GraphQLExplorer } from '../../components/GraphQLExplorer';
+---
+
+<AdminLayout title="GraphQL Explorer">
+  <div class="flex-1 overflow-hidden p-8 pr-12">
+    <!-- Header -->
+    <div class="mb-6">
+      <div class="flex items-center justify-between mb-4">
+        <div>
+          <h1 class="text-3xl font-black tracking-tighter text-[var(--kyro-text-primary)]">
+            GraphQL Explorer
+          </h1>
+          <p class="text-[var(--kyro-text-secondary)] font-bold mt-2 text-sm uppercase tracking-wider">
+            Schema documentation and type explorer
+          </p>
+        </div>
+        <div class="flex items-center gap-4">
+          <a
+            href="/admin/graphql"
+            class="flex items-center gap-2 px-4 py-2 bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-primary)] rounded-lg font-bold text-sm hover:bg-[var(--kyro-surface)] transition-all border border-[var(--kyro-border)]"
+          >
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
+            </svg>
+            Playground
+          </a>
+        </div>
+      </div>
+    </div>
+
+    <!-- Explorer Container -->
+    <div class="h-[calc(100vh-200px)] overflow-hidden">
+      <div class="surface-tile h-full overflow-hidden p-6">
+        <GraphQLExplorer client:load endpoint="/api/graphql" />
+      </div>
+    </div>
+  </div>
+</AdminLayout>

package/src/pages/admin/graphql.astro

@@ -0,0 +1,97 @@
+---
+import AdminLayout from '../../layouts/AdminLayout.astro';
+import { GraphQLPlayground } from '../../components/GraphQLPlayground';
+
+const url = Astro.request.url;
+const params = new URL(url).searchParams;
+const initialQuery = params.get('query') || '';
+---
+
+<AdminLayout title="GraphQL Playground">
+  <div class="flex-1 overflow-hidden p-8 pr-12">
+    <!-- Header -->
+    <div class="mb-6">
+      <div class="flex items-center justify-between mb-4">
+        <div>
+          <h1 class="text-3xl font-black tracking-tighter text-[var(--kyro-text-primary)]">
+            GraphQL Playground
+          </h1>
+          <p class="text-[var(--kyro-text-secondary)] font-bold mt-2 text-sm uppercase tracking-wider">
+            Interactive GraphQL query editor and explorer
+          </p>
+        </div>
+        <div class="flex items-center gap-4">
+          <a
+            href="/admin/graphql-explorer"
+            class="flex items-center gap-2 px-4 py-2 bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-primary)] rounded-lg font-bold text-sm hover:bg-[var(--kyro-surface)] transition-all border border-[var(--kyro-border)]"
+          >
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+            </svg>
+            Explorer
+          </a>
+          <div class="flex items-center gap-2 px-4 py-2 bg-[var(--kyro-surface-accent)] rounded-lg border border-[var(--kyro-border)]">
+            <div class="w-2 h-2 rounded-full bg-green-500"></div>
+            <span class="text-sm font-bold text-[var(--kyro-text-primary)]">API Active</span>
+          </div>
+          <a
+            href="/api/graphql"
+            target="_blank"
+            class="flex items-center gap-2 px-4 py-2 bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-primary)] rounded-lg font-bold text-sm hover:bg-[var(--kyro-surface)] transition-all border border-[var(--kyro-border)]"
+          >
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+            </svg>
+            Open Endpoint
+          </a>
+        </div>
+      </div>
+
+      <!-- Quick Examples -->
+      <div class="flex flex-wrap gap-2">
+        <button
+          onclick="copyToClipboard('{ __schema { types { name } } }')"
+          class="px-3 py-1.5 text-xs font-bold text-[var(--kyro-text-secondary)] bg-[var(--kyro-surface-accent)] rounded-lg hover:bg-[var(--kyro-surface)] transition-all border border-[var(--kyro-border)]"
+        >
+          Introspection
+        </button>
+        <button
+          onclick="copyToClipboard('{ collections { slug name } }')"
+          class="px-3 py-1.5 text-xs font-bold text-[var(--kyro-text-secondary)] bg-[var(--kyro-surface-accent)] rounded-lg hover:bg-[var(--kyro-surface)] transition-all border border-[var(--kyro-border)]"
+        >
+          Collections
+        </button>
+        <button
+          onclick="copyToClipboard('{ ping }')"
+          class="px-3 py-1.5 text-xs font-bold text-[var(--kyro-text-secondary)] bg-[var(--kyro-surface-accent)] rounded-lg hover:bg-[var(--kyro-surface)] transition-all border border-[var(--kyro-border)]"
+        >
+          Ping
+        </button>
+        <button
+          onclick="copyToClipboard('{ posts(page: 1, limit: 10) { docs { id title slug } totalDocs } }')"
+          class="px-3 py-1.5 text-xs font-bold text-[var(--kyro-text-secondary)] bg-[var(--kyro-surface-accent)] rounded-lg hover:bg-[var(--kyro-surface)] transition-all border border-[var(--kyro-border)]"
+        >
+          Posts Query
+        </button>
+      </div>
+    </div>
+
+    <!-- GraphQL Playground Container -->
+    <div class="h-[calc(100vh-280px)] overflow-hidden">
+      <GraphQLPlayground client:load endpoint="/api/graphql" initialQuery={initialQuery} />
+    </div>
+  </div>
+
+  <script is:inline>
+    function copyToClipboard(text) {
+      navigator.clipboard.writeText(text);
+    }
+  </script>
+
+  <style is:global>
+    /* Ensure proper styling for textarea editors */
+    .graphiql-container textarea {
+      font-family: var(--font-mono) !important;
+    }
+  </style>
+</AdminLayout>