zudoku 0.0.0-e88b02e → 0.0.0-e8a949d

package/src/lib/components/ReactMarkdown.tsx

@@ -0,0 +1,264 @@
+/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
+/* eslint-disable @typescript-eslint/no-unnecessary-condition */
+
+/**
+ * This is a fork of `react-markdown` converted to typescript.
+ * The reason we fork it is because react-markdown is comptaible with
+ * unified 11, but references the unified 10 and related packages causing
+ * type errors and a bunch of extra imports
+ *
+ * Source: https://github.com/remarkjs/react-markdown/blob/main/index.js
+ */
+
+import { unreachable } from "devlop";
+import type { Element, ElementContent, Nodes, Parents } from "hast";
+import {
+  Components as JsxRuntimeComponents,
+  toJsxRuntime,
+} from "hast-util-to-jsx-runtime";
+import { urlAttributes } from "html-url-attributes";
+import { ReactElement } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import remarkParse from "remark-parse";
+import remarkRehype, { Options as RemarkRehypeOptions } from "remark-rehype";
+import { PluggableList, unified } from "unified";
+import { visit } from "unist-util-visit";
+import { VFile } from "vfile";
+
+const changelog =
+  "https://github.com/remarkjs/react-markdown/blob/main/changelog.md";
+
+const emptyPlugins: PluggableList = [];
+const emptyRemarkRehypeOptions: Readonly<RemarkRehypeOptions> = {
+  allowDangerousHtml: true,
+};
+const safeProtocol = /^(https?|ircs?|mailto|xmpp)$/i;
+
+interface Deprecation {
+  from: string;
+  id: string;
+  to?: keyof Options;
+}
+
+interface AllowElement {
+  (
+    element: Readonly<Element>,
+    index: number,
+    parent: Readonly<Parents> | undefined,
+  ): boolean | null | undefined;
+}
+
+interface UrlTransform {
+  (
+    url: string,
+    key: string,
+    node: Readonly<Element>,
+  ): string | null | undefined;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+interface Components extends Partial<JsxRuntimeComponents> {}
+
+interface Options {
+  allowElement?: AllowElement | null;
+  allowedElements?: ReadonlyArray<string> | null;
+  children?: string | null;
+  className?: string | null;
+  components?: Components | null;
+  disallowedElements?: ReadonlyArray<string> | null;
+  rehypePlugins?: PluggableList | null;
+  remarkPlugins?: PluggableList | null;
+  remarkRehypeOptions?: Readonly<RemarkRehypeOptions> | null;
+  skipHtml?: boolean | null;
+  unwrapDisallowed?: boolean | null;
+  urlTransform?: UrlTransform | null;
+}
+
+const deprecations: ReadonlyArray<Readonly<Deprecation>> = [
+  { from: "astPlugins", id: "remove-buggy-html-in-markdown-parser" },
+  { from: "allowDangerousHtml", id: "remove-buggy-html-in-markdown-parser" },
+  {
+    from: "allowNode",
+    id: "replace-allownode-allowedtypes-and-disallowedtypes",
+    to: "allowElement",
+  },
+  {
+    from: "allowedTypes",
+    id: "replace-allownode-allowedtypes-and-disallowedtypes",
+    to: "allowedElements",
+  },
+  {
+    from: "disallowedTypes",
+    id: "replace-allownode-allowedtypes-and-disallowedtypes",
+    to: "disallowedElements",
+  },
+  { from: "escapeHtml", id: "remove-buggy-html-in-markdown-parser" },
+  { from: "includeElementIndex", id: "#remove-includeelementindex" },
+  {
+    from: "includeNodeIndex",
+    id: "change-includenodeindex-to-includeelementindex",
+  },
+  { from: "linkTarget", id: "remove-linktarget" },
+  {
+    from: "plugins",
+    id: "change-plugins-to-remarkplugins",
+    to: "remarkPlugins",
+  },
+  { from: "rawSourcePos", id: "#remove-rawsourcepos" },
+  { from: "renderers", id: "change-renderers-to-components", to: "components" },
+  { from: "source", id: "change-source-to-children", to: "children" },
+  { from: "sourcePos", id: "#remove-sourcepos" },
+  { from: "transformImageUri", id: "#add-urltransform", to: "urlTransform" },
+  { from: "transformLinkUri", id: "#add-urltransform", to: "urlTransform" },
+];
+
+export function ReactMarkdown(options: Readonly<Options>): ReactElement {
+  const allowedElements = options.allowedElements;
+  const allowElement = options.allowElement;
+  const children = options.children || "";
+  const className = options.className;
+  const components = options.components;
+  const disallowedElements = options.disallowedElements;
+  const rehypePlugins = options.rehypePlugins || emptyPlugins;
+  const remarkPlugins = options.remarkPlugins || emptyPlugins;
+  const remarkRehypeOptions = options.remarkRehypeOptions
+    ? { ...options.remarkRehypeOptions, ...emptyRemarkRehypeOptions }
+    : emptyRemarkRehypeOptions;
+  const skipHtml = options.skipHtml;
+  const unwrapDisallowed = options.unwrapDisallowed;
+  const urlTransform = options.urlTransform || defaultUrlTransform;
+
+  const processor = unified()
+    .use(remarkParse)
+    .use(remarkPlugins)
+    .use(remarkRehype, remarkRehypeOptions)
+    .use(rehypePlugins);
+
+  const file = new VFile();
+
+  if (typeof children === "string") {
+    file.value = children;
+  } else {
+    unreachable(
+      `Unexpected value '${children}' for 'children' prop, expected 'string'`,
+    );
+  }
+
+  if (allowedElements && disallowedElements) {
+    unreachable(
+      "Unexpected combined `allowedElements` and `disallowedElements`, expected one or the other",
+    );
+  }
+
+  for (const deprecation of deprecations) {
+    if (Object.prototype.hasOwnProperty.call(options, deprecation.from)) {
+      unreachable(
+        `Unexpected '${deprecation.from}' prop, ` +
+          (deprecation.to ? `use '${deprecation.to}' instead` : "remove it") +
+          ` (see <${changelog}#${deprecation.id}> for more info)`,
+      );
+    }
+  }
+
+  const mdastTree = processor.parse(file);
+  let hastTree: Nodes = processor.runSync(mdastTree, file);
+
+  if (className) {
+    hastTree = {
+      type: "element",
+      tagName: "div",
+      properties: { className },
+      children:
+        hastTree.type === "root"
+          ? (hastTree.children as ElementContent[])
+          : [hastTree],
+    };
+  }
+
+  // Nodes type is slightly off, different versions of `hast` have different types
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  visit(hastTree, transform);
+
+  return toJsxRuntime(hastTree, {
+    Fragment,
+    components,
+    ignoreInvalidStyle: true,
+    jsx,
+    jsxs,
+    passKeys: true,
+    passNode: true,
+  });
+
+  function transform(
+    node: Nodes,
+    index: number | null,
+    parent: Parents | undefined,
+  ): number | void {
+    if (node.type === "raw" && parent && typeof index === "number") {
+      if (skipHtml) {
+        parent.children.splice(index, 1);
+      } else {
+        parent.children[index] = { type: "text", value: node.value };
+      }
+      return index;
+    }
+
+    if (node.type === "element") {
+      for (const key in urlAttributes) {
+        if (
+          Object.prototype.hasOwnProperty.call(urlAttributes, key) &&
+          Object.prototype.hasOwnProperty.call(node.properties, key)
+        ) {
+          const value = node.properties[key];
+          const test = urlAttributes[key];
+          if (
+            test === null ||
+            test === undefined ||
+            test.includes(node.tagName)
+          ) {
+            node.properties[key] = urlTransform(String(value || ""), key, node);
+          }
+        }
+      }
+
+      let remove = allowedElements
+        ? !allowedElements.includes(node.tagName)
+        : disallowedElements
+          ? disallowedElements.includes(node.tagName)
+          : false;
+
+      if (!remove && allowElement && typeof index === "number") {
+        remove = !allowElement(node, index, parent);
+      }
+
+      if (remove && parent && typeof index === "number") {
+        if (unwrapDisallowed && node.children) {
+          parent.children.splice(index, 1, ...node.children);
+        } else {
+          parent.children.splice(index, 1);
+        }
+        return index;
+      }
+    }
+  }
+}
+
+function defaultUrlTransform(value: string): string {
+  const colon = value.indexOf(":");
+  const questionMark = value.indexOf("?");
+  const numberSign = value.indexOf("#");
+  const slash = value.indexOf("/");
+
+  if (
+    colon < 0 ||
+    (slash > -1 && colon > slash) ||
+    (questionMark > -1 && colon > questionMark) ||
+    (numberSign > -1 && colon > numberSign) ||
+    safeProtocol.test(value.slice(0, colon))
+  ) {
+    return value;
+  }
+
+  return "";
+}

package/src/lib/components/SlotletProvider.tsx

@@ -10,7 +10,7 @@ import {
   type NavigateFunction,
   type Params,
   type SetURLSearchParams,
-} from "react-router-dom";
+} from "react-router";
 import { useExposedProps } from "../util/useExposedProps.js";
 
 export type Slotlets = Record<

package/src/lib/components/TopNavigation.tsx

@@ -1,6 +1,6 @@
 import { cx } from "class-variance-authority";
 import { Suspense } from "react";
-import { NavLink, useNavigation } from "react-router-dom";
+import { NavLink, useNavigation } from "react-router";
 import { TopNavigationItem } from "../../config/validators/common.js";
 import { useAuth } from "../authentication/hook.js";
 import { ZudokuError } from "../util/invariant.js";

package/src/lib/components/Zudoku.tsx

@@ -11,7 +11,7 @@ import {
   useState,
 } from "react";
 import { ErrorBoundary } from "react-error-boundary";
-import { Outlet, useNavigation } from "react-router-dom";
+import { Outlet, useNavigation } from "react-router";
 import { hasHead, isMdxProviderPlugin } from "../core/plugins.js";
 import { ZudokuContext, ZudokuContextOptions } from "../core/ZudokuContext.js";
 import { TopLevelError } from "../errors/TopLevelError.js";

package/src/lib/components/context/ZudokuContext.ts

@@ -1,6 +1,6 @@
 import { useQuery, useSuspenseQuery } from "@tanstack/react-query";
 import { createContext, useContext } from "react";
-import { matchPath, useLocation } from "react-router-dom";
+import { matchPath, useLocation } from "react-router";
 import { ZudokuContext } from "../../core/ZudokuContext.js";
 import { joinPath } from "../../util/joinPath.js";
 import { traverseSidebar } from "../navigation/utils.js";

package/src/lib/components/index.ts

@@ -1,11 +1,13 @@
 import { useMDXComponents as useMDXComponentsImport } from "@mdx-js/react";
 import { Helmet } from "@zudoku/react-helmet-async";
-import { Link as LinkImport } from "react-router-dom";
-import { useAuthState } from "../authentication/state.js";
+import { Link as LinkImport } from "react-router";
+import { useAuth as useAuthImport } from "../authentication/hook.js";
 import { RouterError as RouterErrorImport } from "../errors/RouterError.js";
 import { ServerError as ServerErrorImport } from "../errors/ServerError.js";
 import { Button as ButtonImport } from "../ui/Button.js";
 import { Callout as CalloutImport } from "../ui/Callout.js";
+import { Spinner as SpinnerImport } from "./Spinner.js";
+import { Markdown as MarkdownImport } from "./Markdown.js";
 import {
   Bootstrap as BootstrapImport,
   BootstrapStatic as BootstrapStaticImport,
@@ -24,10 +26,12 @@ export const BootstrapStatic = /*@__PURE__*/ BootstrapStaticImport;
 export const Head = /*@__PURE__*/ Helmet;
 
 export const useZudoku = /*@__PURE__*/ useZudokuImport;
-export const useAuth = /*@__PURE__*/ useAuthState;
+export const useAuth = /*@__PURE__*/ useAuthImport;
 export const Zudoku = /*@__PURE__*/ ZudokuImport;
 
 export const Callout = /*@__PURE__*/ CalloutImport;
+export const Markdown = /*@__PURE__*/ MarkdownImport;
+export const Spinner = /*@__PURE__*/ SpinnerImport;
 export const ClientOnly = /*@__PURE__*/ ClientOnlyImport;
 export const Button = /*@__PURE__*/ ButtonImport;
-export const Link: typeof LinkImport = /*@__PURE__*/ LinkImport;
+export const Link = /*@__PURE__*/ LinkImport;

package/src/lib/components/navigation/Sidebar.tsx

@@ -31,7 +31,7 @@ export const Sidebar = ({
         className="lg:hidden h-[100dvh] left-0 w-[320px] rounded-none"
         aria-describedby={undefined}
       >
-        <div className="p-6 overflow-y-auto overscroll-none">
+        <div className="p-4 overflow-y-auto overscroll-none">
           <VisuallyHidden>
             <DrawerTitle>Sidebar</DrawerTitle>
           </VisuallyHidden>

package/src/lib/components/navigation/SidebarBadge.tsx

@@ -1,15 +1,5 @@
 import { cn } from "../../util/cn.js";
 
-export const TextColorMap = {
-  green: "text-green-600",
-  blue: "text-sky-600",
-  yellow: "text-yellow-600",
-  red: "text-red-600",
-  purple: "text-purple-600",
-  indigo: "text-indigo-600",
-  gray: "text-gray-600",
-};
-
 export const ColorMap = {
   green: "bg-green-400 dark:bg-green-800",
   blue: "bg-sky-400 dark:bg-sky-800",

package/src/lib/components/navigation/SidebarCategory.tsx

@@ -1,7 +1,7 @@
 import * as Collapsible from "@radix-ui/react-collapsible";
 import { ChevronRightIcon } from "lucide-react";
 import { useEffect, useState } from "react";
-import { NavLink, useMatch } from "react-router-dom";
+import { NavLink, useMatch } from "react-router";
 import type { SidebarItemCategory } from "../../../config/validators/SidebarSchema.js";
 import { cn } from "../../util/cn.js";
 import { joinPath } from "../../util/joinPath.js";

package/src/lib/components/navigation/SidebarItem.tsx

@@ -1,6 +1,6 @@
 import { cva } from "class-variance-authority";
 import { ExternalLinkIcon } from "lucide-react";
-import { NavLink, useSearchParams } from "react-router-dom";
+import { NavLink, useSearchParams } from "react-router";
 
 import type { SidebarItem as SidebarItemType } from "../../../config/validators/SidebarSchema.js";
 import { joinPath } from "../../util/joinPath.js";

package/src/lib/components/navigation/utils.ts

@@ -1,4 +1,4 @@
-import { useLocation } from "react-router-dom";
+import { useLocation } from "react-router";
 import type {
   SidebarItem,
   SidebarItemCategory,

package/src/lib/core/plugins.ts

@@ -1,6 +1,6 @@
-import type { LucideProps } from "lucide-react";
+import type { LucideIcon } from "lucide-react";
 import { type ReactElement } from "react";
-import { type RouteObject } from "react-router-dom";
+import { type RouteObject } from "react-router";
 import type { Sidebar } from "../../config/validators/SidebarSchema.js";
 import { MdxComponentsType } from "../util/MdxComponents.js";
 import { ZudokuContext, type ApiIdentity } from "./ZudokuContext.js";
@@ -40,11 +40,7 @@ export type ProfileNavigationItem = {
   weight?: number;
   category?: "top" | "middle" | "bottom";
   children?: ProfileNavigationItem[];
-  icon?: React.ComponentType<
-    LucideProps & {
-      [key: string]: any;
-    }
-  >;
+  icon?: LucideIcon;
 };
 
 export interface CommonPlugin {

package/src/lib/errors/RouterError.tsx

@@ -1,4 +1,4 @@
-import { isRouteErrorResponse, useRouteError } from "react-router-dom";
+import { isRouteErrorResponse, useRouteError } from "react-router";
 import { NotFoundPage } from "../components/NotFoundPage.js";
 import { ErrorAlert } from "./ErrorAlert.js";
 

package/src/lib/oas/parser/dereference/index.ts

@@ -3,6 +3,8 @@ import { resolveLocalRef } from "./resolveRef.js";
 
 export type JSONSchema = JSONSchema4 | JSONSchema6;
 
+export const CIRCULAR_REF = "$[Circular Reference]";
+
 type CustomResolver = (ref: string) => Promise<JSONSchema | undefined>;
 
 const cache = new Map<JSONSchema, JSONSchema>();
@@ -21,12 +23,12 @@ export const dereference = async (
   }
 
   const cloned = structuredClone(schema);
-  const visited = new Set();
+  const visited = new Set<unknown>();
 
   const resolve = async (current: unknown, path: string) => {
     if (isIndexableObject(current)) {
       if (visited.has(current)) {
-        return current;
+        return CIRCULAR_REF;
       }
 
       visited.add(current);
@@ -39,15 +41,18 @@ export const dereference = async (
         if ("$ref" in current && typeof current.$ref === "string") {
           for (const resolver of resolvers) {
             const resolved = await resolver(current.$ref);
-            if (resolved) return resolved;
+            if (resolved) return await resolve(resolved, path);
           }
-          return await resolveLocalRef(cloned, current.$ref);
+          const resolved = await resolveLocalRef(cloned, current.$ref);
+          return await resolve(resolved, path);
         }
 
         for (const key in current) {
           current[key] = await resolve(current[key], `${path}/${key}`);
         }
       }
+
+      visited.delete(current);
     }
 
     return current;

package/src/lib/plugins/api-catalog/Catalog.tsx

@@ -1,37 +1,45 @@
 import slugify from "@sindresorhus/slugify";
-import { Fragment } from "react";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { useSearchParams } from "react-router";
 import { Head, Link } from "zudoku/components";
+import { useAuthState } from "../../authentication/state.js";
 import { Markdown } from "../../components/Markdown.js";
-import { useExposedProps } from "../../util/useExposedProps.js";
-import type { ApiCatalogItem, CatalogCategory } from "./index.js";
+import { cn } from "../../util/cn.js";
+import type { ApiCatalogPluginOptions } from "./index.js";
+
+const getKey = (category: string, tag: string) => slugify(`${category}-${tag}`);
 
 export const Catalog = ({
   items,
+  filterCatalogItems = (items) => items,
   categories,
   label = "API Library",
-}: {
-  label: string;
-  items: ApiCatalogItem[];
-  categories: CatalogCategory[];
-}) => {
-  const { searchParams, setSearchParams } = useExposedProps();
+}: Omit<ApiCatalogPluginOptions, "navigationId">) => {
+  const [searchParams, setSearchParams] = useSearchParams();
   const activeCategory = searchParams.get("category");
+  const auth = useAuthState();
+
+  const catalogItems = useSuspenseQuery({
+    queryFn: () => filterCatalogItems(items, { auth }),
+    queryKey: ["catalogItems", auth],
+  });
+
   return (
     <section className="pt-[--padding-content-top] pb-[--padding-content-bottom]">
       <Head>
         <title>{label}</title>
       </Head>
       <div className="grid grid-cols-12 gap-12">
-        <div className="flex flex-col gap-4 col-span-3 px-4 not-prose sticky top-48">
-          <div className="justify-between">
-            {categories.map((category, idx) => (
-              <Fragment key={category.label}>
+        <div className="flex flex-col gap-4 col-span-3 not-prose sticky top-48">
+          <div className="max-w-[--side-nav-width] flex flex-col gap-4 justify-between">
+            {categories?.map((category, idx) => (
+              <div key={category.label}>
                 <div className="flex justify-between mb-2.5">
                   <span className="font-medium text-sm">{category.label}</span>
                   {idx === 0 && activeCategory && (
                     <button
                       type="button"
-                      className="text-end text-sm mr-8 text-foreground/60 hover:text-foreground"
+                      className="text-end text-sm text-foreground/60 hover:text-foreground"
                       onClick={() => setSearchParams({})}
                     >
                       Clear
@@ -39,45 +47,41 @@ export const Catalog = ({
                   )}
                 </div>
                 <ul className="space-y-1 [&>li]:py-2">
-                  {Array.from(
-                    new Set(
-                      category.tags
-                        .map((tag) => ({
-                          tag,
-                          count: items.filter((api) =>
-                            api.categories.find((c) => c.tags.includes(tag)),
-                          ).length,
-                        }))
-                        .map(({ tag, count }) => (
-                          <li
-                            key={slugify(category.label + " " + tag)}
-                            className={`flex px-4 rounded-lg -translate-x-4 justify-between text-sm cursor-pointer hover:text-primary transition ${
-                              slugify(tag) === activeCategory
-                                ? "font-medium bg-border/30 rounded"
-                                : ""
-                            }`}
-                            onClick={() =>
-                              setSearchParams({
-                                category: slugify(category.label + " " + tag),
-                              })
-                            }
+                  {category.tags
+                    .map((tag) => ({
+                      tag,
+                      count: items.filter((api) =>
+                        api.categories.find((c) => c.tags.includes(tag)),
+                      ).length,
+                    }))
+                    .map(({ tag, count }) => {
+                      const slug = getKey(category.label, tag);
+                      const isActive = slug === activeCategory;
+
+                      return (
+                        <li
+                          key={slug}
+                          className={cn(
+                            "flex rounded-lg justify-between text-sm cursor-pointer hover:text-primary transition px-[--padding-nav-item] -mx-[--padding-nav-item]",
+                            isActive && "bg-border/30 rounded",
+                          )}
+                          onClick={() => setSearchParams({ category: slug })}
+                        >
+                          <span>{tag}</span>
+                          <span
+                            className={cn(
+                              "flex items-center justify-center border rounded-md w-8 text-xs font-semibold",
+                              isActive &&
+                                "bg-primary border-primary text-primary-foreground",
+                            )}
                           >
-                            <span>{tag}</span>
-                            <span
-                              className={`flex items-center justify-center border rounded-md w-8 text-xs font-semibold ${
-                                slugify(tag) === activeCategory
-                                  ? "bg-primary border-primary text-primary-foreground"
-                                  : ""
-                              }`}
-                            >
-                              {count}
-                            </span>
-                          </li>
-                        )),
-                    ),
-                  )}
+                            {count}
+                          </span>
+                        </li>
+                      );
+                    })}
                 </ul>
-              </Fragment>
+              </div>
             ))}
           </div>
         </div>
@@ -85,17 +89,15 @@ export const Catalog = ({
           <h3 className="mt-0 text-2xl font-bold mb-4">{label}</h3>
 
           <div className="grid grid-cols-2 gap-4">
-            {items
+            {catalogItems.data
               .filter(
                 (api) =>
                   !activeCategory ||
                   api.categories.find((c) =>
-                    c.tags.find(
-                      (t) => slugify(c.label + " " + t) === activeCategory,
-                    ),
+                    c.tags.find((t) => getKey(c.label, t) === activeCategory),
                   ),
               )
-              .map((api, i) => (
+              .map((api) => (
                 <Link
                   to={{
                     pathname: `/${api.path}`,
@@ -104,10 +106,7 @@ export const Catalog = ({
                   className="no-underline hover:!text-foreground"
                   key={api.path}
                 >
-                  <div
-                    className="border h-full rounded p-4 flex flex-col gap-2 cursor-pointer hover:bg-border/20 font-normal"
-                    key={i}
-                  >
+                  <div className="border h-full rounded p-4 flex flex-col gap-2 cursor-pointer hover:bg-border/20 font-normal">
                     <span className="font-semibold">{api.label}</span>
                     <Markdown
                       className="text-sm whitespace-pre-wrap mb-6 line-clamp-2"