radiant-docs 0.1.7 → 0.1.9

package/template/src/components/endpoint/ResponseDisplay.astro

@@ -1,175 +1,189 @@
 ---
+import CodeTabEdge from "../ui/CodeTabEdge.astro";
 import { Icon } from "astro-icon/components";
 ---
 
 <div
   x-data={`{
+    tabs: [
+      { id: 'body', label: 'Body' },
+      { id: 'header', label: 'Header' }
+    ],
     selected: 'body',
+    pillLeft: 0,
+    pillWidth: 0,
+    pillVisible: false,
+    tabSyncHandler: null,
+    playgroundOpenHandler: null,
+    init() {
+      const sync = () => this.syncPill();
+      this.tabSyncHandler = sync;
+      const onPlaygroundOpen = () => {
+        this.$nextTick(() => this.syncPill());
+      };
+      this.playgroundOpenHandler = onPlaygroundOpen;
+      this.$nextTick(() => {
+        this.syncPill();
+        this.$refs.tabList?.addEventListener('scroll', sync, {
+          passive: true
+        });
+        window.addEventListener('resize', sync);
+        window.addEventListener('rd:playground-opened', onPlaygroundOpen);
+      });
+    },
+    destroy() {
+      if (!this.tabSyncHandler) return;
+      this.$refs.tabList?.removeEventListener('scroll', this.tabSyncHandler);
+      window.removeEventListener('resize', this.tabSyncHandler);
+      if (this.playgroundOpenHandler) {
+        window.removeEventListener('rd:playground-opened', this.playgroundOpenHandler);
+      }
+      this.tabSyncHandler = null;
+      this.playgroundOpenHandler = null;
+    },
+    syncPill() {
+      const tabs = this.$refs.tabList;
+      if (!tabs) return;
+      const activeTab = tabs.querySelector(
+        '[data-rd-response-tab=\"' + this.selected + '\"]'
+      );
+      if (!activeTab) {
+        this.pillVisible = false;
+        return;
+      }
+      const tabsRect = tabs.getBoundingClientRect();
+      const activeRect = activeTab.getBoundingClientRect();
+      this.pillLeft = activeRect.left - tabsRect.left + tabs.scrollLeft;
+      this.pillWidth = activeRect.width;
+      this.pillVisible = true;
+    },
     select(value) {
       this.selected = value;
-      this.$refs.button?.focus();
-      this.close();
+      this.$nextTick(() => {
+        this.syncPill();
+        window.dispatchEvent(new CustomEvent('rd:snippet-content-change'));
+      });
     },
-    close(focusAfter) {
-      if (!this.open) return;
-      this.open = false;
-      focusAfter?.focus();
-    }
   }`}
-  class="bg-neutral-100 rounded-[14px] border border-neutral-200 p-[3px] inset-shadow-xs"
+  class="h-full min-h-0 w-full min-w-0"
   x-bind:class="loading && 'animate-loading'"
 >
-  <div class="flex justify-between items-center">
+  <div
+    class="group/prose-code not-prose relative h-full min-h-0 w-full max-w-full min-w-0"
+  >
     <div
-      class="flex-1 min-w-0 flex items-center font-medium ml-2 text-neutral-700 text-sm"
+      class="flex h-full min-h-0 w-full max-w-full min-w-0 flex-col overflow-hidden rounded-xl border border-neutral-200 bg-white shadow-xs"
     >
-      <span
-        class:list={[
-          "shrink-0 text-xs uppercase font-semibold px-1.5 border py-px rounded-md mr-1.5",
-        ]}
-        x-bind:class="{
-            'bg-green-50 text-green-700/70 border-green-700/10': Math.floor(response?.status / 100) === 2,
-            'bg-blue-50 text-blue-700/70 border-blue-700/10': Math.floor(response?.status / 100) === 3,
-            'bg-amber-50 text-amber-600/80 border-amber-700/10': Math.floor(response?.status / 100) === 4,
-            'bg-red-50 text-red-700/70 border-red-700/10': Math.floor(response?.status / 100) === 5
-          }"
-        x-text="response?.status"
-        x-show="response?.status"></span>
-      <span class="truncate" x-text="response?.statusText"></span>
-    </div>
-    <div
-      x-data="{
-    open: false,
-    toggle() {
-        if (this.open) {
-            return this.close()
-        }
-
-        this.$refs.button.focus()
-
-        this.open = true
-    },
-    close(focusAfter) {
-        if (! this.open) return
-
-        this.open = false
-
-        focusAfter && focusAfter.focus()
-    }
-}"
-      x-on:keydown.escape.prevent.stop="close($refs.button)"
-      x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
-      x-id="['dropdown-button']"
-      class="shrink-0 relative max-w-24 w-full"
-    >
-      <button
-        x-ref="button"
-        x-on:click="toggle()"
-        :aria-expanded="open"
-        :aria-controls="$id('dropdown-button')"
-        type="button"
-        class="flex items-center justify-between px-3 pt-2 pb-1.5 relative border-x border-t border-neutral-200 rounded-t-xl w-full text-sm font-medium bg-white shadow-xs cursor-pointer after:absolute after:-bottom-[2px] after:inset-x-0 after:z-50 after:h-[3px] after:bg-white"
+      <div
+        class="flex items-center justify-between gap-2 border-b border-neutral-200 rounded-t-xl bg-neutral-50 inset-shadow-sm inset-shadow-neutral-100/80"
       >
-        <span class="flex items-center gap-2">
-          <span x-text="selected" class="capitalize"></span>
-        </span>
-        <Icon name="lucide:chevrons-up-down" />
-      </button>
-      <!-- Panel -->
-      <ul
-        x-ref="panel"
-        x-show="open"
-        x-transition.origin.top.left
-        x-on:click.outside="close($refs.button)"
-        :id="$id('dropdown-button')"
-        x-cloak
-        role="menu"
-        class="absolute top-full right-2 min-w-28 rounded-lg shadow-xl mt-2 z-10 origin-top-right bg-white py-0.5 outline-none border border-neutral-200"
-      >
-        <li role="menuitem">
-          <button
-            x-on:click="select('header')"
-            type="button"
-            class="w-full text-left px-3 py-2 text-sm text-neutral-700 rounded-md transition-colors flex items-center gap-2 relative before:absolute before:inset-x-1 before:inset-y-0.5 before:-z-10 before:rounded-md before:duration-150 cursor-pointer"
-            x-bind:class="selected === 'header' ? 'before:bg-neutral-200/50 text-neutral-900' : 'hover:before:bg-neutral-100/70'"
-          >
-            Header
-          </button>
-        </li>
-        <li role="menuitem">
-          <button
-            x-on:click="select('body')"
-            type="button"
-            class="w-full text-left px-3 py-2 text-sm text-neutral-700 rounded-md transition-colors flex items-center gap-2 relative before:absolute before:inset-x-1 before:inset-y-0.5 before:-z-10 before:rounded-md before:duration-150 cursor-pointer"
-            x-bind:class="selected === 'body' ? 'before:bg-neutral-200/50 text-neutral-900' : 'hover:before:bg-neutral-100/70'"
+        <div class="min-w-0 flex-1 overflow-hidden rounded-t-xl">
+          <div
+            x-ref="tabList"
+            class="relative flex min-w-0 items-end gap-1 overflow-x-auto px-1 pr-8 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
           >
-            Body
-          </button>
-        </li>
-      </ul>
-    </div>
-  </div>
-  <div
-    class="bg-white border border-neutral-200 rounded-xl rounded-tr-none shadow-xs transition duration-300"
-  >
-    <div x-bind:class="loading && 'opacity-60 duration-700'">
-      <div x-show="selected === 'body'">
-        <div
-          x-show="!response || !response.highlightedData"
-          class="text-sm px-4 py-4 xs:py-8 flex flex-col items-center justify-center"
-        >
-          <div class="bg-neutral-50 p-2 rounded-xl mb-1">
-            <Icon
-              class="size-6 text-neutral-300"
-              name="lucide:square-arrow-up-right"
-            />
+            <div
+              aria-hidden="true"
+              class="pointer-events-none absolute top-1/2 z-0 h-[28px] -translate-y-1/2 rounded-lg border-[0.5px] border-neutral-200 bg-white shadow-xs transition-[left,width,opacity] duration-200 ease-out"
+              x-bind:class="pillVisible ? 'opacity-100' : 'opacity-0'"
+              x-bind:style="'left:' + pillLeft + 'px;width:' + pillWidth + 'px;'"
+            >
+            </div>
+
+            <template x-for="tab in tabs" :key="tab.id">
+              <button
+                type="button"
+                x-bind:data-rd-response-tab="tab.id"
+                x-on:click="select(tab.id)"
+                class="relative z-10 inline-flex h-9 items-center gap-2 border-0 bg-transparent px-3 py-1.5 text-xs font-medium transition-colors duration-150 focus:outline-none focus-visible:outline-none cursor-pointer"
+                x-bind:class="selected === tab.id ? 'text-neutral-900' : 'text-neutral-600'"
+              >
+                <span class="whitespace-pre leading-none" x-text="tab.label"
+                ></span>
+              </button>
+            </template>
           </div>
-          <div class="text-lg text-center text-neutral-700">Send request</div>
-          <p class="text-sm text-neutral-500 text-center">
-            Send a request to see the response body.
-          </p>
-        </div>
-        <div x-show="response && response.highlightedData">
-          <pre
-            class="bg-transparent! m-0!"><code class="language-json text-[13px]! font-mono! text-neutral-700!" x-html="response?.highlightedData" /></pre>
         </div>
-      </div>
-      <div x-show="selected === 'header'">
+
         <div
-          x-show="!response || !response.headers || Object.keys(response.headers).length === 0"
-          class="text-sm px-4 py-4 xs:py-8 flex flex-col items-center justify-center"
+          class="relative h-9 w-fit max-w-full shrink-0 rounded-tr-xl bg-white"
         >
-          <div class="bg-neutral-50 p-2 rounded-xl mb-1">
-            <Icon
-              class="size-6 text-neutral-300"
-              name="lucide:square-arrow-up-right"
-            />
+          <div class="absolute inset-x-0 -bottom-px h-px bg-white"></div>
+          <CodeTabEdge
+            className="pointer-events-none absolute -top-px right-full z-10 h-[calc(100%+2px)] rotate-y-180"
+          />
+          <div
+            class="relative z-20 inline-flex h-9 max-w-full items-center gap-1.5 w-14 pr-5 py-1.5 text-xs font-medium"
+          >
+            <span
+              class="size-[7px] shrink-0 rounded-full"
+              x-bind:class="{
+                'bg-green-700/70': Math.floor((response?.status || 0) / 100) === 2,
+                'bg-blue-700/70': Math.floor((response?.status || 0) / 100) === 3,
+                'bg-yellow-500/80': Math.floor((response?.status || 0) / 100) === 4,
+                'bg-red-700/70': Math.floor((response?.status || 0) / 100) === 5,
+                'bg-neutral-300': !response?.status || Math.floor((response?.status || 0) / 100) < 2
+              }"
+            ></span>
+            <span
+              class="leading-none"
+              x-bind:class="response?.status ? 'text-neutral-700' : 'text-neutral-300'"
+              x-text="response?.status ?? '---'"></span>
           </div>
-          <div class="text-lg text-center text-neutral-700">Send request</div>
-          <p class="text-sm text-neutral-500 text-center">
-            Send a request to see the response header.
-          </p>
         </div>
+      </div>
+
+      <div class="relative min-h-0 min-w-0 flex-1 overflow-hidden rounded-b-xl">
         <div
-          x-show="response && response.headers && Object.keys(response.headers).length > 0"
-          class=""
+          class="relative h-full overflow-auto [scrollbar-width:thin] [scrollbar-color:var(--color-neutral-300)_transparent] [&::-webkit-scrollbar]:h-1.5 [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-neutral-300/70 hover:[&::-webkit-scrollbar-thumb]:bg-neutral-300/90"
         >
-          <table class="w-full border-collapse text-xs table-fixed">
-            <tbody>
-              <template x-for="(value, key) in response?.headers" :key="key">
-                <tr
-                  class="flex border-b last:border-b-0 divide-x divide-neutral-100 border-neutral-100 hover:bg-neutral-50/50"
-                >
-                  <td
-                    class="py-2 px-3 basis-1/2 font-mono font-medium text-neutral-700 overflow-x-auto whitespace-nowrap"
-                    x-text="key"></td>
-                  <td
-                    class="py-2 px-3 basis-1/2 font-mono text-neutral-600 overflow-x-auto whitespace-nowrap"
-                    x-text="value"></td>
-                </tr>
-              </template>
-            </tbody>
-          </table>
+          <div
+            class="pointer-events-none sticky top-0 z-10 -mb-4 h-4 w-full bg-linear-to-b from-white to-transparent"
+          >
+          </div>
+          <div x-show="selected === 'body'" class="h-full">
+            <div
+              x-show="!response || !response.highlightedData"
+              class="text-sm px-4 py-4 xs:py-8 flex flex-col items-center justify-center h-full"
+            >
+              <div class="bg-neutral-50 p-2 rounded-xl mb-1">
+                <Icon
+                  class="size-6 text-neutral-300"
+                  name="lucide:square-arrow-up-right"
+                />
+              </div>
+              <div class="text-lg font-medium text-center">Send request</div>
+              <p class="text-sm text-neutral-500 text-center">
+                Send a request to see the response body.
+              </p>
+            </div>
+            <div x-show="response && response.highlightedData">
+              <pre
+                class="relative m-0 min-w-full bg-white p-0 text-[13px] leading-6"><code class="block min-w-full px-4 py-2.5 font-mono text-neutral-800" x-html="response?.highlightedData" /></pre>
+            </div>
+          </div>
+
+          <div x-show="selected === 'header'" x-cloak class="h-full">
+            <div
+              x-show="!response || !response.highlightedHeaders"
+              class="text-sm px-4 py-4 xs:py-8 flex flex-col items-center justify-center h-full"
+            >
+              <div class="bg-neutral-50 p-2 rounded-xl mb-1">
+                <Icon
+                  class="size-6 text-neutral-300"
+                  name="lucide:square-arrow-up-right"
+                />
+              </div>
+              <div class="text-lg font-medium text-center">Send request</div>
+              <p class="text-sm text-neutral-500 text-center">
+                Send a request to see the response header.
+              </p>
+            </div>
+            <div x-show="response && response.highlightedHeaders">
+              <pre
+                class="relative m-0 min-w-full bg-white p-0 text-[13px] leading-6"><code class="block min-w-full px-4 py-2.5 font-mono text-neutral-800" x-html="response?.highlightedHeaders" /></pre>
+            </div>
+          </div>
         </div>
       </div>
     </div>

package/template/src/components/endpoint/ResponseFieldTree.astro

@@ -0,0 +1,134 @@
+---
+import Field from "../ui/Field.astro";
+import ListChevronsToggle from "../ui/ListChevronsToggle.astro";
+
+interface ResponseFieldVariant {
+  label: string;
+  fields: ResponseField[];
+}
+
+interface ResponseField {
+  name: string;
+  required: boolean;
+  type: string;
+  description: string;
+  nested?: ResponseField[];
+  enum?: (string | number)[];
+  minLength?: number;
+  maxLength?: number;
+  minimum?: number;
+  maximum?: number;
+  exclusiveMinimum?: number;
+  exclusiveMaximum?: number;
+  variants?: ResponseFieldVariant[];
+  variantType?: "oneOf" | "anyOf";
+}
+
+interface Props {
+  fields: ResponseField[];
+  depth?: number;
+}
+
+const { fields, depth = 0 } = Astro.props;
+
+function getDisplayName(name: string, depth: number): string {
+  if (depth <= 0 || !name.includes(".")) return name;
+  const segments = name.split(".");
+  return segments[segments.length - 1] || name;
+}
+
+function countImmediateChildren(field: ResponseField): number {
+  const nestedCount = field.nested ? field.nested.length : 0;
+  const variantCount = field.variants
+    ? field.variants.reduce((sum, variant) => sum + variant.fields.length, 0)
+    : 0;
+  return nestedCount + variantCount;
+}
+---
+
+<div class="flex flex-col gap-4 divide-y divide-neutral-100 *:pb-3 *:last:pb-0">
+  {
+    fields.map((field) => {
+      const revealedFieldCount = countImmediateChildren(field);
+      const nestedFieldCount = field.nested ? field.nested.length : 0;
+      const hasExpandableContent = revealedFieldCount > 0;
+
+      return (
+        <div x-data="{ expanded: false }">
+          <Field
+            name={getDisplayName(field.name, depth)}
+            type={field.type}
+            required={field.required}
+            description={field.description}
+            enum={field.enum}
+            minLength={field.minLength}
+            maxLength={field.maxLength}
+            minimum={field.minimum}
+            maximum={field.maximum}
+            exclusiveMinimum={field.exclusiveMinimum}
+            exclusiveMaximum={field.exclusiveMaximum}
+          />
+          {hasExpandableContent && (
+            <div
+              class="mt-2 w-full overflow-hidden rounded-lg border border-neutral-200 bg-white transition-colors duration-200"
+              x-bind:class="expanded ? 'border-neutral-300' : 'border-neutral-200'"
+            >
+              <button
+                type="button"
+                x-on:click="expanded = !expanded"
+                x-bind:aria-expanded="expanded"
+                class="group flex w-full items-center justify-between gap-3 px-3 py-2 text-left text-xs font-medium text-neutral-700 hover:bg-neutral-50 cursor-pointer transition-colors duration-200"
+              >
+                <span class="inline-flex items-center gap-2">
+                  <ListChevronsToggle class="size-4 shrink-0 text-neutral-400 group-hover:text-neutral-600 transition duration-200" />
+                  <span>
+                    {revealedFieldCount}{" "}
+                    {revealedFieldCount === 1
+                      ? "field"
+                      : "fields"}
+                  </span>
+                </span>
+              </button>
+              <div x-show="expanded" x-collapse x-cloak>
+                <div class="border-t border-neutral-100 px-3 py-3">
+                  {field.nested && field.nested.length > 0 && nestedFieldCount > 0 && (
+                    <Astro.self fields={field.nested} depth={depth + 1} />
+                  )}
+                  {field.variants && field.variants.length > 0 && (
+                    <div class:list={["space-y-2", nestedFieldCount > 0 && "mt-3"]}>
+                      <p class="text-xs text-neutral-500">
+                        {field.variantType === "anyOf"
+                          ? "One or more variants may apply."
+                          : "One of these variants applies."}
+                      </p>
+                      {field.variants.map((variant, index) => (
+                        <>
+                          <div class="rounded-lg border border-neutral-200 bg-white p-3">
+                            <div class="mb-2 text-xs font-medium text-neutral-600">
+                              {variant.label}
+                            </div>
+                            <Astro.self fields={variant.fields} depth={depth + 1} />
+                          </div>
+                          {field.variantType === "oneOf" &&
+                            index < field.variants.length - 1 && (
+                              <div class="flex items-center gap-2 py-0">
+                                <div class="h-px flex-1 bg-neutral-200" />
+                                <span class="px-1 text-[10px] uppercase tracking-wide text-neutral-500">
+                                  OR
+                                </span>
+                                <div class="h-px flex-1 bg-neutral-200" />
+                              </div>
+                            )}
+                        </>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      );
+    })
+  }
+</div>