zudoku 0.0.0-feat-bundled-types.9aa135e → 0.0.0-feat-openapi-docs-redesign.dab3fc6a

package/src/lib/components/ReactMarkdown.tsx

@@ -1,264 +0,0 @@
-/* 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/plugins/custom-pages/CustomPage.tsx

@@ -1,18 +0,0 @@
-import React from "react";
-import { ProseClasses } from "../../components/Markdown.js";
-import { cn } from "../../util/cn.js";
-import { useExposedProps } from "../../util/useExposedProps.js";
-import type { CustomPageConfig } from "./index.js";
-
-export const CustomPage = ({
-  element,
-  render,
-  prose = true,
-}: Omit<CustomPageConfig, "path">) => {
-  const exposedProps = useExposedProps();
-  const content = render ? React.createElement(render, exposedProps) : element;
-
-  return (
-    <div className={cn(prose && ProseClasses, "max-w-full")}>{content}</div>
-  );
-};

package/src/lib/plugins/markdown/resolver.ts

@@ -1,59 +0,0 @@
-import type {
-  ZudokuConfig,
-  ZudokuDocsConfig,
-} from "../../../config/validators/validate.js";
-
-const DEFAULT_DOCS_FILES = "/pages/**/*.{md,mdx}";
-
-/**
- * Utilities for resolving markdown file paths and routes
- */
-export class DocResolver {
-  constructor(private config: ZudokuConfig) {}
-
-  fileMap = new Map<string, string>();
-
-  /**
-   * Gets the default docs config from the zudoku config
-   */
-  getDocsConfigs() {
-    const docsConfigs: ZudokuDocsConfig[] = this.config.docs
-      ? Array.isArray(this.config.docs)
-        ? this.config.docs
-        : [this.config.docs]
-      : [{ files: DEFAULT_DOCS_FILES }];
-
-    return docsConfigs;
-  }
-
-  /**
-   * Gets the root directory from a files glob
-   */
-  private static getRootDir(filesGlob: string) {
-    let rootDir = filesGlob.split("**")[0];
-    if (!rootDir) {
-      throw new Error("Invalid files glob. Must have '**' in the path.");
-    }
-    rootDir = rootDir.replace("/**", "/");
-    return rootDir;
-  }
-
-  /**
-   * Resolves the route path for a given file system path
-   * @param options - The options to resolve the route path
-   * @returns The string route path
-   */
-  static resolveRoutePath({
-    filesGlob,
-    fsPath,
-  }: {
-    filesGlob: string;
-    fsPath: string;
-  }) {
-    const rootDir = this.getRootDir(filesGlob);
-    const re = new RegExp(`^${rootDir}(.*).mdx?`);
-    const match = fsPath.match(re);
-    const routePath = match?.at(1);
-    return routePath;
-  }
-}

package/src/lib/plugins/openapi/playground/InlineInput.tsx

@@ -1,6 +0,0 @@
-import createVariantComponent from "../../../util/createVariantComponent.js";
-
-export const InlineInput = createVariantComponent(
-  "input",
-  "px-2 bg-transparent h-6 font-mono text-xs m-2",
-);

package/src/lib/plugins/openapi/playground/UrlDisplay.tsx

@@ -1,32 +0,0 @@
-import { useFormContext } from "react-hook-form";
-import type { PlaygroundForm } from "./Playground.js";
-
-export const UrlDisplay = ({ host, path }: { host: string; path: string }) => {
-  const { watch } = useFormContext<PlaygroundForm>();
-  const data = watch();
-  const url = new URL(
-    host +
-      path
-        .split("/")
-        .map((v) =>
-          v.startsWith("{") && v.endsWith("}")
-            ? (data.pathParams.find((part) => part.name === v.slice(1, -1))
-                ?.value ?? v)
-            : v,
-        )
-        .join("/"),
-  );
-
-  data.queryParams.forEach((param) => {
-    if (!param.value) {
-      return;
-    }
-    url.searchParams.set(param.name, param.value);
-  });
-
-  return (
-    <div className="overflow-auto font-mono whitespace-nowrap">
-      {url.toString()}
-    </div>
-  );
-};

package/src/lib/plugins/openapi/playground/result-panel/RequestTab.tsx

@@ -1,73 +0,0 @@
-import { ChevronRightIcon } from "lucide-react";
-import { Fragment } from "react";
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "../../../../ui/Collapsible.js";
-import { cn } from "../../../../util/cn.js";
-import { methodForColor } from "../../util/methodToColor.js";
-
-export const RequestTab = ({
-  method,
-  url,
-  headers,
-  body,
-}: {
-  method: string;
-  url: string;
-  headers: Array<[string, string]>;
-  body?: string;
-}) => {
-  return (
-    <div className="flex flex-col gap-2 font-mono text-xs">
-      <div className="gap-2 p-2 bg-muted rounded-md">
-        <span className={cn(methodForColor(method), "font-semibold")}>
-          {method}
-        </span>
-        &nbsp;
-        <span className="break-all">{url}</span>&nbsp;
-        <span className="text-muted-foreground">HTTP/1.1</span>
-      </div>
-      <div className="mx-1.5 flex flex-col gap-3">
-        <Collapsible defaultOpen>
-          <CollapsibleTrigger className="flex items-center gap-2 hover:text-primary group">
-            <ChevronRightIcon className="h-4 w-4 transition-transform duration-200 group-data-[state=open]:rotate-[90deg]" />
-            <span className="font-semibold">Headers</span>
-          </CollapsibleTrigger>
-          <CollapsibleContent>
-            <div className="grid grid-cols-[auto,1fr] gap-x-8 gap-y-1 ps-1.5 pt-2">
-              {headers.map(([key, value]) => (
-                <Fragment key={key}>
-                  <div className="text-primary">{key}</div>
-                  <div className="break-all">{value}</div>
-                </Fragment>
-              ))}
-            </div>
-          </CollapsibleContent>
-        </Collapsible>
-
-        <Collapsible defaultOpen>
-          <CollapsibleTrigger className="flex items-center gap-2 hover:text-primary group">
-            <ChevronRightIcon className="h-4 w-4 transition-transform duration-200 group-data-[state=open]:rotate-[90deg]" />
-            <span className="font-semibold">Body</span>
-          </CollapsibleTrigger>
-          <CollapsibleContent>
-            <div className="ps-0 pt-2">
-              <div
-                className={cn(
-                  "whitespace-pre-wrap break-all bg-muted p-2 rounded-md",
-                  !body && "text-muted-foreground",
-                )}
-              >
-                {body ?? "Empty body"}
-              </div>
-            </div>
-          </CollapsibleContent>
-        </Collapsible>
-      </div>
-    </div>
-  );
-};
-
-export default RequestTab;

package/src/lib/plugins/openapi/schema/LogicalGroup/LogicalGroup.tsx

@@ -1,40 +0,0 @@
-import * as Collapsible from "@radix-ui/react-collapsible";
-import { SquareMinusIcon, SquarePlusIcon } from "lucide-react";
-import type { SchemaObject } from "../../../../oas/parser/index.js";
-import { Card } from "../../../../ui/Card.js";
-import type { LogicalGroupType } from "../utils.js";
-import { LogicalGroupItem } from "./LogicalGroupItem.js";
-
-const typeLabel = {
-  AND: "All of",
-  OR: "Any of",
-  ONE: "One of",
-};
-
-export const LogicalGroup = ({
-  schemas,
-  type,
-  isOpen,
-  toggleOpen,
-}: {
-  schemas: SchemaObject[];
-  type: LogicalGroupType;
-  isOpen: boolean;
-  toggleOpen: () => void;
-}) => (
-  <Collapsible.Root open={isOpen} onOpenChange={toggleOpen} asChild>
-    <Card className="px-6">
-      <Collapsible.Trigger className="flex gap-2 items-center py-2 w-full text-sm text-muted-foreground -translate-x-1.5">
-        {isOpen ? <SquareMinusIcon size={14} /> : <SquarePlusIcon size={14} />}
-        <span>{typeLabel[type]}</span>
-      </Collapsible.Trigger>
-
-      <Collapsible.Content className="pb-4">
-        {schemas.map((subSchema, index) => (
-          // eslint-disable-next-line react/no-array-index-key
-          <LogicalGroupItem key={index} type={type} schema={subSchema} />
-        ))}
-      </Collapsible.Content>
-    </Card>
-  </Collapsible.Root>
-);

package/src/lib/plugins/openapi/schema/LogicalGroup/LogicalGroupConnector.tsx

@@ -1,57 +0,0 @@
-import {
-  ChevronDownIcon,
-  CircleDotIcon,
-  CircleFadingPlusIcon,
-  CircleIcon,
-} from "lucide-react";
-import { cn } from "../../../../util/cn.js";
-
-import type { LogicalGroupType } from "../utils.js";
-
-const iconMap = {
-  AND: <CircleFadingPlusIcon size={16} className="fill-card" />,
-  OR: <CircleDotIcon size={16} className="fill-card" />,
-  ONE: <CircleIcon size={14} className="fill-card" />,
-} as const;
-
-const colorClass = {
-  AND: "text-green-500 dark:text-green-300/60",
-  OR: "text-blue-400 dark:text-blue-500",
-  ONE: "text-purple-500 dark:text-purple-300/60",
-} as const;
-
-export const LogicalGroupConnector = ({
-  type,
-  isOpen,
-  className,
-  schemeName,
-}: {
-  type: LogicalGroupType;
-  isOpen: boolean;
-  className?: string;
-  schemeName?: string;
-}) => {
-  return (
-    <div
-      className={cn(
-        colorClass[type],
-        "relative text-sm flex py-2",
-        "before:border-l before:absolute before:-top-2 before:-bottom-2 before:border-border before:border-dashed before:content-['']",
-        className,
-      )}
-    >
-      <div className="-translate-x-[7px] flex gap-1 items-center">
-        {iconMap[type]}
-        <div
-          className={cn(
-            "translate-y-px mx-px opacity-0 group-hover:opacity-100 transition",
-            !isOpen && "-rotate-90",
-          )}
-        >
-          <ChevronDownIcon size={16} />
-        </div>
-        <span className="text-sm text-foreground">{schemeName}</span>
-      </div>
-    </div>
-  );
-};

package/src/lib/plugins/openapi/schema/LogicalGroup/LogicalGroupItem.tsx

@@ -1,33 +0,0 @@
-import * as Collapsible from "@radix-ui/react-collapsible";
-import { useState } from "react";
-import type { SchemaObject } from "../../../../oas/parser/index.js";
-import { SchemaView } from "../SchemaView.js";
-import type { LogicalGroupType } from "../utils.js";
-import { LogicalGroupConnector } from "./LogicalGroupConnector.js";
-
-export const LogicalGroupItem = (props: {
-  type: LogicalGroupType;
-  schema: SchemaObject;
-}) => {
-  const [isOpen, setIsOpen] = useState(true);
-
-  return (
-    <Collapsible.Root
-      open={isOpen}
-      onOpenChange={() => setIsOpen((prev) => !prev)}
-      className="group"
-    >
-      <Collapsible.Trigger>
-        <LogicalGroupConnector
-          type={props.type}
-          isOpen={isOpen}
-          schemeName={props.schema.title}
-        />
-      </Collapsible.Trigger>
-      {!isOpen && <div className="wavy-line bg-border translate-y-1" />}
-      <Collapsible.Content>
-        <SchemaView schema={props.schema} />
-      </Collapsible.Content>
-    </Collapsible.Root>
-  );
-};