radiant-docs 0.1.0

package/template/src/components/sidebar/SidebarOpenApi.astro

@@ -0,0 +1,207 @@
+---
+import type { NavOpenApi } from "../../lib/validation";
+import { loadOpenApiSpec } from "../../lib/validation";
+import SidebarEndpointLink from "./SidebarEndpointLink.astro";
+import fs from "node:fs";
+import path from "node:path";
+import yaml from "yaml";
+
+interface Props {
+  openapi: string | NavOpenApi;
+  parentSlug?: string;
+}
+
+const { openapi: openApiPathOrConfig, parentSlug = "" } = Astro.props;
+
+// Extract file path and filter options
+let openApiPath: string;
+let include: string[] | undefined;
+let exclude: string[] | undefined;
+
+if (typeof openApiPathOrConfig === "string") {
+  openApiPath = openApiPathOrConfig;
+} else {
+  openApiPath = openApiPathOrConfig.source;
+  include = openApiPathOrConfig.include;
+  exclude = openApiPathOrConfig.exclude;
+}
+
+// Load the OpenAPI spec
+const openApiDoc = await loadOpenApiSpec(openApiPath);
+
+// Helper function to parse endpoint string
+function parseEndpointString(
+  endpointStr: string
+): { method: string; path: string } | null {
+  const trimmed = endpointStr.trim();
+  const parts = trimmed.split(/\s+/);
+
+  if (parts.length !== 2) {
+    return null;
+  }
+
+  const method = parts[0].toUpperCase();
+  let path = parts[1];
+
+  if (!path.startsWith("/")) {
+    path = "/" + path;
+  }
+
+  const normalizedPath = path.toLowerCase();
+
+  return { method, path: normalizedPath };
+}
+
+// Helper function to check if an endpoint should be included
+function shouldIncludeEndpoint(
+  method: string,
+  pathStr: string,
+  include?: string[],
+  exclude?: string[]
+): boolean {
+  const normalizedMethod = method.toUpperCase();
+  const normalizedPath = pathStr.toLowerCase();
+  const endpointKey = `${normalizedMethod} ${normalizedPath}`;
+
+  if (include) {
+    return include.some((entry) => {
+      const parsed = parseEndpointString(entry);
+      if (!parsed) return false;
+      return `${parsed.method} ${parsed.path}` === endpointKey;
+    });
+  }
+
+  if (exclude) {
+    return !exclude.some((entry) => {
+      const parsed = parseEndpointString(entry);
+      if (!parsed) return false;
+      return `${parsed.method} ${parsed.path}` === endpointKey;
+    });
+  }
+
+  return true;
+}
+
+// Extract endpoints from OpenAPI spec
+const paths = openApiDoc.paths || {};
+const httpMethods = [
+  "get",
+  "post",
+  "put",
+  "delete",
+  "patch",
+  "head",
+  "options",
+  "trace",
+];
+
+interface Endpoint {
+  method: string;
+  path: string;
+  summary?: string;
+  tags?: string[];
+}
+
+const endpoints: Endpoint[] = [];
+
+for (const [pathStr, pathItem] of Object.entries(paths)) {
+  if (!pathItem || typeof pathItem !== "object") continue;
+
+  for (const method of httpMethods) {
+    const operation = (pathItem as any)[method];
+    if (!operation) continue;
+
+    if (!shouldIncludeEndpoint(method, pathStr, include, exclude)) {
+      continue;
+    }
+
+    endpoints.push({
+      method,
+      path: pathStr,
+      summary: operation.summary,
+      tags: operation.tags,
+    });
+  }
+}
+
+// Group endpoints by first tag
+interface TagGroup {
+  tag: string;
+  endpoints: Endpoint[];
+}
+
+const tagGroups = new Map<string, Endpoint[]>();
+const untaggedEndpoints: Endpoint[] = [];
+
+for (const endpoint of endpoints) {
+  if (endpoint.tags && endpoint.tags.length > 0) {
+    const firstTag = endpoint.tags[0];
+    if (!tagGroups.has(firstTag)) {
+      tagGroups.set(firstTag, []);
+    }
+    tagGroups.get(firstTag)!.push(endpoint);
+  } else {
+    untaggedEndpoints.push(endpoint);
+  }
+}
+
+// Only add "Other" group if there are other tagged groups
+// If no tags exist at all, we'll render untagged endpoints without a group header
+const hasTaggedGroups = tagGroups.size > 0;
+if (untaggedEndpoints.length > 0 && hasTaggedGroups) {
+  tagGroups.set("Other", untaggedEndpoints);
+}
+
+// Convert to array and sort by tag name
+const sortedTagGroups: TagGroup[] = Array.from(tagGroups.entries())
+  .map(([tag, endpoints]) => ({ tag, endpoints }))
+  .sort((a, b) => {
+    // Put "Other" at the end
+    if (a.tag === "Other") return 1;
+    if (b.tag === "Other") return -1;
+    return a.tag.localeCompare(b.tag);
+  });
+---
+
+<ul class="px-2 pt-4 pb-3">
+  {
+    // If there are tagged groups, render them (including "Other" if it exists)
+    hasTaggedGroups
+      ? sortedTagGroups.map((group, index) => (
+          <li
+            class={
+              index > 0
+                ? "mt-5 pt-[25px] relative before:absolute before:top-0 before:inset-x-0 before:h-px before:bg-linear-[90deg,transparent,var(--color-neutral-200)_20%,var(--color-neutral-200)_80%,transparent] dark:before:bg-linear-[90deg,transparent,var(--color-neutral-700)_20%,var(--color-neutral-700)_80%,transparent]"
+                : ""
+            }
+          >
+            <div class="text-sm font-semibold mb-2 flex items-center gap-2 px-2">
+              {group.tag}
+            </div>
+            <ul>
+              {group.endpoints.map((endpoint) => (
+                <li>
+                  <SidebarEndpointLink
+                    method={endpoint.method}
+                    path={endpoint.path}
+                    summary={endpoint.summary}
+                    parentSlug={parentSlug}
+                  />
+                </li>
+              ))}
+            </ul>
+          </li>
+        ))
+      : // If no tags at all, render untagged endpoints directly without group headers
+        untaggedEndpoints.map((endpoint, index) => (
+          <li>
+            <SidebarEndpointLink
+              method={endpoint.method}
+              path={endpoint.path}
+              summary={endpoint.summary}
+              parentSlug={parentSlug}
+            />
+          </li>
+        ))
+  }
+</ul>

package/template/src/components/ui/Field.astro

@@ -0,0 +1,69 @@
+---
+import { renderMarkdown } from "../../lib/utils";
+
+interface Props {
+  name: string;
+  type: string;
+  description?: string;
+  required?: boolean;
+  optional?: boolean;
+  enum?: (string | number)[];
+}
+
+const {
+  name,
+  type,
+  description,
+  required,
+  optional,
+  enum: enumValues,
+} = Astro.props;
+
+const formattedDescription = description
+  ? await renderMarkdown(description)
+  : null;
+---
+
+<div>
+  <div class="flex items-center gap-2">
+    <h5 class="font-normal font-mono text-[15px] text-neutral-400">
+        {name.split(".").map((part, i, a) => (
+        <>{i > 0 && <span class="inline">.</span>}<span class:list={["inline", a.length - 1 === i && "text-neutral-900 font-semibold"]}>{part}</span></>
+      ))}
+      <!-- {name.split(".").map((part, i, a) => (
+       <>{i > 0 && <span class="inline">.</span>}<span class:list={["inline", a.length - 1 === i && "text-neutral-900 font-semibold"]}>{part}</span></>
+     ))} -->
+    </h5>
+    <code
+      class="text-[11px] font-medium text-neutral-600 border border-neutral-200 bg-neutral-50 px-1 rounded-md"
+      >{type}</code
+    >
+    {
+      required && (
+        <div class="text-red-700/70 bg-red-50 border border-red-700/10 rounded-full px-2 text-[11px] font-mono leading-none py-0.5 pb-0.5 font-[450] h-fit">
+          required
+        </div>
+      )
+    }
+    {
+      optional && (
+        <div class="text-blue-700/70 bg-blue-50 border border-blue-700/10 rounded-full px-2 text-[13px] leading-none py-px pb-0.5 font-[450] h-fit">
+          optional
+        </div>
+      )
+    }
+  </div>
+  {
+    enumValues && (
+      <div class="text-sm mt-1.5">
+        <span class="font-medium.">Options:</span>
+        {enumValues.map((v, i, a) => (
+          <>
+            <code class="text-[11px] font-medium text-neutral-600 border border-neutral-200 bg-neutral-50 px-1 py-px rounded-md">{v}</code>{a.length - 2 === i ? " or " : a.length - 1 !== i && ", "}
+          </>
+        ))}
+      </div>
+    )
+  }
+  <div class="mt-1.5 prose-rules prose-sm!" set:html={formattedDescription} />
+</div>

package/template/src/components/ui/Tag.astro

@@ -0,0 +1,5 @@
+<span
+  class="text-[9px] bg-blue-100 text-blue-800 border border-blue-800/20 px-1.5 py-px rounded-full tracking-wide font-bold"
+>
+  <slot />
+</span>

package/template/src/components/ui/demo/CodeDemo.astro

@@ -0,0 +1,15 @@
+<span class="demo-component">
+  <slot />
+</span>
+
+<style>
+  @reference "../../../styles/global.css";
+
+  :global(.demo-component .frame) {
+    @apply shadow-none! my-0!;
+  }
+
+  :global(.demo-component .frame pre) {
+    @apply border-none! rounded-none rounded-b-xl bg-neutral-50! inset-shadow-xs;
+  }
+</style>

package/template/src/components/ui/demo/Demo.astro

@@ -0,0 +1,3 @@
+<div class="border border-neutral-200 rounded-xl shadow-xs my-5!">
+  <slot />
+</div>

package/template/src/components/ui/demo/UiDisplay.astro

@@ -0,0 +1,13 @@
+---
+interface Props {
+  centerUi?: boolean;
+}
+
+const { centerUi } = Astro.props;
+---
+
+<div
+  class:list={["px-8 flex justify-center", centerUi && "items-center min-h-96"]}
+>
+  <slot />
+</div>

package/template/src/components/user/Accordian.astro

@@ -0,0 +1,69 @@
+---
+import { Icon } from "astro-icon/components";
+import { validateProps } from "../../lib/component-error";
+
+interface Props {
+  title: string;
+  icon?: string;
+  defaultOpen?: boolean;
+  titleSize?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+}
+
+const { title, icon, defaultOpen = false, titleSize } = Astro.props;
+
+validateProps(
+  "Accordion",
+  { title, icon, defaultOpen, titleSize },
+  {
+    title: { required: true, type: "string" },
+    icon: { type: "string" },
+    defaultOpen: { type: "boolean" },
+    titleSize: { enum: ["xs", "sm", "md", "lg", "xl", "2xl"] },
+  },
+  Astro.url.pathname
+);
+---
+
+<div
+  x-data=`{
+    id: null,
+    localExpanded: ${defaultOpen},
+    get expanded() {
+        return (typeof active !== 'undefined') ? (active === this.id) : this.localExpanded;
+    },
+    set expanded(value) {
+        if (typeof active !== 'undefined') {
+            active = value ? this.id : null;
+        } else {
+            this.localExpanded = value;
+        }
+    }
+}`
+  x-init="id = (typeof register === 'function') ? register() : Math.random()"
+  role="region"
+  class="block border-b border-neutral-800/10 pb-4 pt-4 first:pt-0 last:border-b-0 last:pb-0"
+>
+  <h4 class="not-prose">
+    <button
+      type="button"
+      x-on:click="expanded = !expanded"
+      :aria-expanded="expanded"
+      class="group flex w-full items-center justify-between gap-2.5 text-left font-medium text-neutral-800"
+    >
+      {icon && <Icon name={`lucide:${icon}`} />}
+      <span class:list={["flex-1", titleSize && `text-${titleSize}`]}
+        >{title}</span
+      >
+      <Icon
+        name="lucide:chevron-down"
+        class="size-5 shrink-0 text-neutral-400 group-hover:text-neutral-600 transition duration-200"
+        x-bind:class="expanded && 'rotate-180'"
+      />
+    </button>
+  </h4>
+  <div x-show="expanded" x-collapse>
+    <div class="pt-2 *:first:mt-0 *:last:mb-0">
+      <slot />
+    </div>
+  </div>
+</div>

package/template/src/components/user/AccordianGroup.astro

@@ -0,0 +1,13 @@
+<div
+  x-data="{
+        active: null,
+        count: 0,
+        register() {
+            this.count++;
+            return this.count;
+        }
+    }"
+  class="my-5 w-full"
+>
+  <slot />
+</div>

package/template/src/components/user/Callout.astro

@@ -0,0 +1,101 @@
+---
+import { Icon } from "astro-icon/components";
+import warningIcon from "../../assets/icons/warning.svg?url";
+import infoIcon from "../../assets/icons/info.svg?url";
+import lightbulbIcon from "../../assets/icons/lightbulb.svg?url";
+import dangerIcon from "../../assets/icons/danger.svg?url";
+import checkIcon from "../../assets/icons/check.svg?url";
+import { validateProps } from "../../lib/component-error";
+
+type CalloutType = "warning" | "info" | "tip" | "danger" | "check";
+
+interface Props {
+  type?: CalloutType;
+  title?: string;
+  icon?: string;
+  color?: string;
+}
+
+const typeDefaults: Record<
+  CalloutType,
+  { icon: string; color: string; title: string }
+> = {
+  warning: {
+    icon: warningIcon,
+    color: "bg-amber-500",
+    title: "Warning",
+  },
+  info: {
+    icon: infoIcon,
+    color: "bg-sky-600/80",
+    title: "Info",
+  },
+  tip: {
+    icon: lightbulbIcon,
+    color: "bg-yellow-500",
+    title: "Tip",
+  },
+  danger: {
+    icon: dangerIcon,
+    color: "bg-red-600",
+    title: "Danger",
+  },
+  check: {
+    icon: checkIcon,
+    color: "bg-green-600",
+    title: "Success",
+  },
+};
+
+const { type = "info", title, icon, color } = Astro.props;
+
+validateProps(
+  "Callout",
+  { type, title, icon, color },
+  {
+    type: { enum: ["warning", "info", "tip", "danger", "check"] },
+    title: { type: "string" },
+    icon: { type: "string" },
+    color: { type: "string" },
+  },
+  Astro.url.pathname
+);
+
+const defaults = typeDefaults[type];
+const resolvedTitle = title ?? defaults.title;
+---
+
+<aside
+  class:list={[
+    "my-5 space-y-1 rounded-lg border border-neutral-200/80 shadow-xs px-4 py-3.5 pl-6 relative",
+  ]}
+  role="note"
+>
+  <div
+    class:list={[
+      "absolute left-2 inset-y-2 w-[2.5px] rounded-full",
+      defaults.color,
+    ]}
+    style={color && { backgroundColor: color }}
+  >
+  </div>
+  <div class="flex items-center gap-2 not-prose">
+    {
+      icon ? (
+        <Icon
+          name={`lucide:${icon}`}
+          class=""
+          style={color && { color: color }}
+        />
+      ) : (
+        <img src={defaults.icon} alt="" width="16" height="16" class="" />
+      )
+    }
+    <h6 class:list={["font-semibold text-sm"]}>
+      {resolvedTitle}
+    </h6>
+  </div>
+  <div class="[&>p]:m-0 [&>p:not(:last-child)]:mb-2">
+    <slot />
+  </div>
+</aside>

package/template/src/components/user/Step.astro

@@ -0,0 +1,51 @@
+---
+import { Icon } from "astro-icon/components";
+import { validateProps } from "../../lib/component-error";
+
+interface Props {
+  title: string;
+}
+
+const { title } = Astro.props;
+
+validateProps(
+  "Step",
+  { title },
+  {
+    title: { required: true, type: "string" },
+  },
+  Astro.url.pathname
+);
+---
+
+<div
+  class:list={[
+    "relative pl-10 step-item pb-4 last:pb-0 space-y-4",
+    "before:absolute before:left-[10.5px] before:top-8 before:bottom-0 before:w-px before:bg-linear-[transparent,var(--color-neutral-200)_10%,var(--color-neutral-200)_90%,transparent]",
+  ]}
+  data-step-panel
+>
+  <div
+    class:list={[
+      "flex items-center gap-1.5 not-prose",
+      "step-number before:bg-neutral-900 before:size-[22px] before:rounded-full before:text-white before:flex before:items-center before:justify-center before:text-xs before:font-bold before:absolute before:left-px before:top-[3px] before:shadow-[inset_0_1px_0_rgb(255,255,255,0.2),0_0_0_1px_var(--color-neutral-800),var(--shadow-md)]",
+    ]}
+  >
+    <h3 class="text-lg font-semibold text-neutral-900">
+      {title}
+    </h3>
+  </div>
+  <div class="[&>p]:m-0 [&>p:not(:last-child)]:mb-2">
+    <slot />
+  </div>
+</div>
+
+<style>
+  .step-item {
+    counter-increment: step-counter;
+  }
+
+  .step-number::before {
+    content: counter(step-counter);
+  }
+</style>

package/template/src/components/user/Steps.astro

@@ -0,0 +1,9 @@
+---
+interface Props {}
+
+const stepsId = `steps-${Math.random().toString(36).substring(2, 9)}`;
+---
+
+<div class="my-6 space-y-1.5" id={stepsId}>
+  <slot />
+</div>

package/template/src/components/user/Tab.astro

@@ -0,0 +1,25 @@
+---
+import { validateProps, validateRequired } from "../../lib/component-error";
+
+interface Props {
+  label: string;
+  icon?: string;
+}
+const { label, icon } = Astro.props;
+
+validateProps(
+  "Tab",
+  { label, icon },
+  {
+    label: { required: true, type: "string" },
+    icon: { type: "string" },
+  },
+  Astro.url.pathname
+);
+---
+
+<section data-label={label} data-icon={icon || ""}>
+  <div class="*:m-0! *:mb-2">
+    <slot />
+  </div>
+</section>