@reapi/docs-ui 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,83 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { Root } from 'mdast';
+
+type DocsComponent = (props: any) => ReactNode;
+declare const defaultComponents: Record<string, DocsComponent>;
+declare function MdxContent({ ast, components, }: {
+    ast: Root;
+    components?: Record<string, DocsComponent>;
+}): react.JSX.Element;
+
+type AnyRecord = Record<string, unknown>;
+declare function DocsEmbedProvider({ specs, children, }: {
+    specs: Record<string, AnyRecord>;
+    children?: ReactNode;
+}): react.JSX.Element;
+/** `<ApiOperation api="petstore" operation="GET /pets" />` */
+declare function ApiOperation({ api, operation }: {
+    api?: string;
+    operation?: string;
+}): react.JSX.Element;
+/** `<ApiSchema api="petstore" name="Pet" />` */
+declare function ApiSchema({ api, name }: {
+    api?: string;
+    name?: string;
+}): react.JSX.Element;
+
+declare const Note: (p: {
+    title?: string;
+    children?: ReactNode;
+}) => react.JSX.Element;
+declare const Warning: (p: {
+    title?: string;
+    children?: ReactNode;
+}) => react.JSX.Element;
+declare const Tip: (p: {
+    title?: string;
+    children?: ReactNode;
+}) => react.JSX.Element;
+
+declare function Tab({ children }: {
+    title?: string;
+    children?: ReactNode;
+}): react.JSX.Element;
+/** `<Tabs><Tab title="npm">…</Tab><Tab title="pnpm">…</Tab></Tabs>` */
+declare function Tabs({ children }: {
+    children?: ReactNode;
+}): react.JSX.Element | null;
+
+/**
+ * `<CodeGroup>` with fenced code blocks as children — each block's
+ * ```lang title  meta becomes the tab label (falling back to the language).
+ */
+declare function CodeGroup({ children }: {
+    children?: ReactNode;
+}): react.JSX.Element | null;
+
+declare function Card({ title, href, children, }: {
+    title?: string;
+    href?: string;
+    children?: ReactNode;
+}): react.JSX.Element;
+declare function CardGroup({ cols, children }: {
+    cols?: string;
+    children?: ReactNode;
+}): react.JSX.Element;
+
+/** Native <details> — interactive without any client JS (RSC-friendly). */
+declare function Accordion({ title, children }: {
+    title?: string;
+    children?: ReactNode;
+}): react.JSX.Element;
+declare function AccordionGroup({ children }: {
+    children?: ReactNode;
+}): react.JSX.Element;
+
+/** A captioned figure wrapper (images, screenshots). */
+declare function Frame({ caption, children }: {
+    caption?: string;
+    children?: ReactNode;
+}): react.JSX.Element;
+
+export { Accordion, AccordionGroup, ApiOperation, ApiSchema, Card, CardGroup, CodeGroup, type DocsComponent, DocsEmbedProvider, Frame, MdxContent, Note, Tab, Tabs, Tip, Warning, defaultComponents };

package/dist/index.js

@@ -0,0 +1,350 @@
+// src/renderer.tsx
+import { Fragment as Fragment2, createElement } from "react";
+
+// src/components/callout.tsx
+import { Info, AlertTriangle, Lightbulb } from "lucide-react";
+import { cn } from "@reapi/spec-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+var VARIANTS = {
+  note: {
+    icon: Info,
+    classes: "border-sky-200 bg-sky-50 text-sky-900 dark:border-sky-900 dark:bg-sky-950 dark:text-sky-200"
+  },
+  warning: {
+    icon: AlertTriangle,
+    classes: "border-amber-200 bg-amber-50 text-amber-900 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-200"
+  },
+  tip: {
+    icon: Lightbulb,
+    classes: "border-emerald-200 bg-emerald-50 text-emerald-900 dark:border-emerald-900 dark:bg-emerald-950 dark:text-emerald-200"
+  }
+};
+function Callout({
+  variant,
+  title,
+  children
+}) {
+  const { icon: Icon, classes } = VARIANTS[variant];
+  return /* @__PURE__ */ jsxs("div", { className: cn("not-prose my-4 flex gap-2.5 rounded-lg border p-3 text-sm", classes), children: [
+    /* @__PURE__ */ jsx(Icon, { className: "mt-0.5 size-4 shrink-0" }),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 [&>p]:my-0 [&>p+p]:mt-2", children: [
+      title && /* @__PURE__ */ jsx("p", { className: "mb-1 font-semibold", children: title }),
+      children
+    ] })
+  ] });
+}
+var Note = (p) => /* @__PURE__ */ jsx(Callout, { variant: "note", ...p });
+var Warning = (p) => /* @__PURE__ */ jsx(Callout, { variant: "warning", ...p });
+var Tip = (p) => /* @__PURE__ */ jsx(Callout, { variant: "tip", ...p });
+
+// src/components/tabs.tsx
+import { Children, isValidElement, useState } from "react";
+import { cn as cn2 } from "@reapi/spec-ui";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function Tab({ children }) {
+  return /* @__PURE__ */ jsx2("div", { children });
+}
+function Tabs({ children }) {
+  const items = Children.toArray(children).filter(
+    (c) => isValidElement(c) && c.type === Tab
+  );
+  const [active, setActive] = useState(0);
+  if (!items.length) return null;
+  return /* @__PURE__ */ jsxs2("div", { className: "not-prose my-4 rounded-lg border", children: [
+    /* @__PURE__ */ jsx2("div", { className: "flex gap-1 border-b bg-muted/40 px-2 pt-1.5", children: items.map((item, i) => /* @__PURE__ */ jsx2(
+      "button",
+      {
+        type: "button",
+        onClick: () => setActive(i),
+        className: cn2(
+          "-mb-px rounded-t-md border-x border-t px-3 py-1.5 text-xs font-medium",
+          i === active ? "border-border bg-background" : "border-transparent text-muted-foreground hover:text-foreground"
+        ),
+        children: item.props.title ?? `Tab ${i + 1}`
+      },
+      i
+    )) }),
+    /* @__PURE__ */ jsx2("div", { className: "p-3 text-sm [&>p]:my-0 [&>p+p]:mt-2", children: items[active] })
+  ] });
+}
+
+// src/components/code-group.tsx
+import { Children as Children2, isValidElement as isValidElement2, useState as useState2 } from "react";
+import { cn as cn3 } from "@reapi/spec-ui";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function CodeGroup({ children }) {
+  const blocks = Children2.toArray(children).filter(isValidElement2);
+  const [active, setActive] = useState2(0);
+  if (!blocks.length) return null;
+  const label = (el, i) => {
+    const props = el.props;
+    return props["data-title"] ?? props["data-language"] ?? `Code ${i + 1}`;
+  };
+  return /* @__PURE__ */ jsxs3("div", { className: "not-prose my-4 overflow-hidden rounded-lg border bg-muted/30", children: [
+    /* @__PURE__ */ jsx3("div", { className: "flex gap-1 border-b bg-muted/60 px-2 pt-1.5", children: blocks.map((b, i) => /* @__PURE__ */ jsx3(
+      "button",
+      {
+        type: "button",
+        onClick: () => setActive(i),
+        className: cn3(
+          "-mb-px rounded-t-md px-3 py-1.5 font-mono text-[11px] font-medium",
+          i === active ? "bg-background" : "text-muted-foreground hover:text-foreground"
+        ),
+        children: label(b, i)
+      },
+      i
+    )) }),
+    /* @__PURE__ */ jsx3("div", { className: "[&_pre]:my-0 [&_pre]:rounded-none [&_pre]:border-0", children: blocks[active] })
+  ] });
+}
+
+// src/components/card.tsx
+import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function Card({
+  title,
+  href,
+  children
+}) {
+  const body = /* @__PURE__ */ jsxs4(Fragment, { children: [
+    title && /* @__PURE__ */ jsx4("p", { className: "mb-1 text-sm font-semibold", children: title }),
+    /* @__PURE__ */ jsx4("div", { className: "text-sm text-muted-foreground [&>p]:my-0 [&>p+p]:mt-2", children })
+  ] });
+  const classes = "not-prose block rounded-lg border p-4";
+  return href ? /* @__PURE__ */ jsx4("a", { href, className: `${classes} transition-colors hover:bg-accent`, children: body }) : /* @__PURE__ */ jsx4("div", { className: classes, children: body });
+}
+function CardGroup({ cols, children }) {
+  const n = Math.min(Math.max(Number(cols) || 2, 1), 4);
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      className: "not-prose my-4 grid gap-3",
+      style: { gridTemplateColumns: `repeat(${n}, minmax(0, 1fr))` },
+      children
+    }
+  );
+}
+
+// src/components/accordion.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function Accordion({ title, children }) {
+  return /* @__PURE__ */ jsxs5("details", { className: "not-prose group my-2 rounded-lg border", children: [
+    /* @__PURE__ */ jsx5("summary", { className: "cursor-pointer select-none px-4 py-2.5 text-sm font-medium marker:text-muted-foreground", children: title ?? "Details" }),
+    /* @__PURE__ */ jsx5("div", { className: "border-t px-4 py-3 text-sm [&>p]:my-0 [&>p+p]:mt-2", children })
+  ] });
+}
+function AccordionGroup({ children }) {
+  return /* @__PURE__ */ jsx5("div", { className: "not-prose my-4 [&>details]:my-0 [&>details+details]:-mt-px [&>details]:rounded-none [&>details:first-child]:rounded-t-lg [&>details:last-child]:rounded-b-lg", children });
+}
+
+// src/components/frame.tsx
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function Frame({ caption, children }) {
+  return /* @__PURE__ */ jsxs6("figure", { className: "not-prose my-4 overflow-hidden rounded-lg border", children: [
+    /* @__PURE__ */ jsx6("div", { className: "flex justify-center bg-muted/30 p-3 [&_img]:rounded-md", children }),
+    caption && /* @__PURE__ */ jsx6("figcaption", { className: "border-t px-3 py-1.5 text-center text-xs text-muted-foreground", children: caption })
+  ] });
+}
+
+// src/components/api-embeds.tsx
+import { createContext, useContext } from "react";
+import {
+  ConstraintPills,
+  Markdown,
+  OperationSection,
+  SchemaFields,
+  createRefResolver,
+  isRef
+} from "@reapi/spec-ui";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+var EmbedSpecsContext = createContext({});
+function DocsEmbedProvider({
+  specs,
+  children
+}) {
+  return /* @__PURE__ */ jsx7(EmbedSpecsContext.Provider, { value: specs, children });
+}
+function MissingEmbed({ children }) {
+  return /* @__PURE__ */ jsx7("div", { className: "not-prose my-4 rounded-lg border border-dashed px-4 py-3 text-sm text-muted-foreground", children });
+}
+function ApiOperation({ api, operation }) {
+  const specs = useContext(EmbedSpecsContext);
+  const spec = api ? specs[api] : void 0;
+  const parts = (operation ?? "").trim().split(/\s+/);
+  if (!api || parts.length !== 2) {
+    return /* @__PURE__ */ jsx7(MissingEmbed, { children: '<ApiOperation> needs api="\u2026" and operation="GET /path"' });
+  }
+  if (!spec) {
+    return /* @__PURE__ */ jsx7(MissingEmbed, { children: `API "${api}" is not published \u2014 publish it to render this embed.` });
+  }
+  const [method, path] = parts;
+  const op = spec.paths?.[path]?.[method.toLowerCase()];
+  if (!op) {
+    return /* @__PURE__ */ jsx7(MissingEmbed, { children: `Operation ${method.toUpperCase()} ${path} not found in "${api}".` });
+  }
+  return /* @__PURE__ */ jsx7("div", { className: "not-prose my-4 rounded-lg border px-5 [&>section]:border-t-0 [&>section]:py-5", children: /* @__PURE__ */ jsx7(
+    OperationSection,
+    {
+      spec,
+      id: `embed-${method}-${path}`.replace(/[^a-zA-Z0-9-]+/g, "-"),
+      method: method.toUpperCase(),
+      path,
+      resolve: createRefResolver(spec, null)
+    }
+  ) });
+}
+function ApiSchema({ api, name }) {
+  const specs = useContext(EmbedSpecsContext);
+  const spec = api ? specs[api] : void 0;
+  if (!api || !name) {
+    return /* @__PURE__ */ jsx7(MissingEmbed, { children: '<ApiSchema> needs api="\u2026" and name="\u2026"' });
+  }
+  if (!spec) {
+    return /* @__PURE__ */ jsx7(MissingEmbed, { children: `API "${api}" is not published \u2014 publish it to render this embed.` });
+  }
+  const schema = (spec.components?.schemas ?? {})[name];
+  if (!schema) {
+    return /* @__PURE__ */ jsx7(MissingEmbed, { children: `Schema "${name}" not found in "${api}".` });
+  }
+  return /* @__PURE__ */ jsxs7("div", { className: "not-prose my-4 rounded-lg border px-4 py-3", children: [
+    /* @__PURE__ */ jsx7("p", { className: "font-mono text-sm font-semibold", children: name }),
+    !isRef(schema) && typeof schema.description === "string" && schema.description && /* @__PURE__ */ jsx7(Markdown, { compact: true, children: schema.description }),
+    /* @__PURE__ */ jsx7(ConstraintPills, { schema }),
+    /* @__PURE__ */ jsx7("div", { className: "mt-1", children: /* @__PURE__ */ jsx7(SchemaFields, { schema, resolve: createRefResolver(spec, null) }) })
+  ] });
+}
+
+// src/renderer.tsx
+import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+var defaultComponents = {
+  Note,
+  Warning,
+  Tip,
+  Tabs,
+  Tab,
+  CodeGroup,
+  Card,
+  CardGroup,
+  Accordion,
+  AccordionGroup,
+  Frame,
+  ApiOperation,
+  ApiSchema
+};
+function jsxProps(node) {
+  const out = {};
+  for (const attr of node.attributes ?? []) {
+    if (attr.type !== "mdxJsxAttribute" || typeof attr.name !== "string") continue;
+    out[attr.name] = attr.value === null || attr.value === void 0 ? true : attr.value;
+  }
+  return out;
+}
+function render(node, key, components) {
+  const kids = (extra) => (extra ?? node.children ?? []).map((c, i) => render(c, i, components));
+  switch (node.type) {
+    case "root":
+      return /* @__PURE__ */ jsx8(Fragment2, { children: kids() }, key);
+    case "text":
+      return node.value ?? "";
+    case "paragraph":
+      return /* @__PURE__ */ jsx8("p", { children: kids() }, key);
+    case "heading": {
+      const depth = Math.min(Math.max(Number(node.depth) || 2, 1), 6);
+      const id = node.data?.id;
+      return createElement(`h${depth}`, { key, id, className: "scroll-mt-20" }, kids());
+    }
+    case "emphasis":
+      return /* @__PURE__ */ jsx8("em", { children: kids() }, key);
+    case "strong":
+      return /* @__PURE__ */ jsx8("strong", { children: kids() }, key);
+    case "delete":
+      return /* @__PURE__ */ jsx8("del", { children: kids() }, key);
+    case "inlineCode":
+      return /* @__PURE__ */ jsx8("code", { children: node.value ?? "" }, key);
+    case "code": {
+      const lang = typeof node.lang === "string" ? node.lang : void 0;
+      const meta = typeof node.meta === "string" ? node.meta.trim() : void 0;
+      return /* @__PURE__ */ jsx8("pre", { "data-language": lang, "data-title": meta || void 0, children: /* @__PURE__ */ jsx8("code", { className: lang ? `language-${lang}` : void 0, children: node.value ?? "" }) }, key);
+    }
+    case "blockquote":
+      return /* @__PURE__ */ jsx8("blockquote", { children: kids() }, key);
+    case "list":
+      return node.ordered ? /* @__PURE__ */ jsx8("ol", { start: typeof node.start === "number" ? node.start : void 0, children: kids() }, key) : /* @__PURE__ */ jsx8("ul", { children: kids() }, key);
+    case "listItem": {
+      const checked = node.checked;
+      const children = node.spread === true ? node.children ?? [] : (node.children ?? []).flatMap((c) => c.type === "paragraph" ? c.children ?? [] : [c]);
+      return /* @__PURE__ */ jsxs8("li", { className: checked != null ? "list-none" : void 0, children: [
+        checked != null && /* @__PURE__ */ jsx8("input", { type: "checkbox", checked: checked === true, readOnly: true, className: "mr-1.5 align-middle" }),
+        kids(children)
+      ] }, key);
+    }
+    case "thematicBreak":
+      return /* @__PURE__ */ jsx8("hr", {}, key);
+    case "break":
+      return /* @__PURE__ */ jsx8("br", {}, key);
+    case "link": {
+      const href = typeof node.url === "string" ? node.url : "#";
+      const external = /^https?:\/\//.test(href);
+      return /* @__PURE__ */ jsx8("a", { href, target: external ? "_blank" : void 0, rel: external ? "noreferrer" : void 0, children: kids() }, key);
+    }
+    case "image":
+      return /* @__PURE__ */ jsx8(
+        "img",
+        {
+          src: typeof node.url === "string" ? node.url : void 0,
+          alt: typeof node.alt === "string" ? node.alt : "",
+          title: typeof node.title === "string" ? node.title : void 0
+        },
+        key
+      );
+    case "table": {
+      const rows = node.children ?? [];
+      const align = node.align ?? [];
+      const [head, ...body] = rows;
+      const renderRow = (row, ri, header) => /* @__PURE__ */ jsx8("tr", { children: (row.children ?? []).map(
+        (cell, ci) => createElement(
+          header ? "th" : "td",
+          { key: ci, style: align[ci] ? { textAlign: align[ci] } : void 0 },
+          cell.children?.map((c, i) => render(c, i, components))
+        )
+      ) }, ri);
+      return /* @__PURE__ */ jsxs8("table", { children: [
+        head && /* @__PURE__ */ jsx8("thead", { children: renderRow(head, 0, true) }),
+        /* @__PURE__ */ jsx8("tbody", { children: body.map((r, i) => renderRow(r, i, false)) })
+      ] }, key);
+    }
+    case "mdxJsxFlowElement":
+    case "mdxJsxTextElement": {
+      const name = typeof node.name === "string" ? node.name : "";
+      const Component = components[name];
+      if (!Component) return /* @__PURE__ */ jsx8(Fragment2, { children: kids() }, key);
+      return /* @__PURE__ */ jsx8(Component, { ...jsxProps(node), children: node.children?.length ? kids() : void 0 }, key);
+    }
+    default:
+      return node.children ? /* @__PURE__ */ jsx8(Fragment2, { children: kids() }, key) : null;
+  }
+}
+function MdxContent({
+  ast,
+  components
+}) {
+  const registry = components ? { ...defaultComponents, ...components } : defaultComponents;
+  return /* @__PURE__ */ jsx8(Fragment3, { children: render(ast, 0, registry) });
+}
+export {
+  Accordion,
+  AccordionGroup,
+  ApiOperation,
+  ApiSchema,
+  Card,
+  CardGroup,
+  CodeGroup,
+  DocsEmbedProvider,
+  Frame,
+  MdxContent,
+  Note,
+  Tab,
+  Tabs,
+  Tip,
+  Warning,
+  defaultComponents
+};

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@reapi/docs-ui",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "AST→React renderer + preset components for the ReAPI docs dialect",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "dependencies": {
+    "lucide-react": "^0.469.0",
+    "@reapi/spec-ui": "0.1.0"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/mdast": "^4.0.4",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "tsup": "^8.4.0",
+    "typescript": "^5.7.3",
+    "vitest": "^4.1.8",
+    "@reapi/docs-compile": "0.1.0"
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "test": "vitest --run",
+    "build": "tsup"
+  }
+}