zudoku 0.1.1-dev.9 → 0.3.0-dev.100

package/src/app/plugins/markdown/MdxPage.tsx

@@ -1,128 +0,0 @@
-import { useMemo, type PropsWithChildren, type ReactNode } from "react";
-import { Heading } from "../../Heading.js";
-import { CategoryHeading } from "../../components/CategoryHeading.js";
-import { ProseClasses } from "../../components/Markdown.js";
-import { useTopNavigationItem } from "../../components/context/DevPortalProvider.js";
-import { isPathItem } from "../../components/navigation/util.js";
-import { Helmet } from "../../core/helmet.js";
-import { Link, useLocation } from "../../core/router.js";
-import { cn } from "../../util/cn.js";
-import slugify from "../../util/slugify.js";
-import { traverseNavigation } from "../../util/traverseNavigation.js";
-import { Toc } from "./Toc.js";
-import type { MDXImport } from "./index.js";
-
-export const MdxPage = ({
-  children,
-  frontmatter,
-  tableOfContents,
-}: PropsWithChildren<Omit<MDXImport, "default">>) => {
-  const navItem = useTopNavigationItem();
-  const location = useLocation();
-
-  const categoryTitle = navItem
-    ? traverseNavigation(navItem, (_node, fullPath, parentNodes) => {
-        if (fullPath === location.pathname) {
-          return parentNodes.at(0)?.label;
-        }
-      })
-    : undefined;
-
-  const title = frontmatter?.title;
-  const category = frontmatter?.category ?? categoryTitle;
-  const hideToc = frontmatter?.toc === false;
-
-  const pageTitle =
-    tableOfContents.find((item) => item.depth === 1)?.value ?? title;
-
-  const tocEntries =
-    tableOfContents.find((item) => item.depth === 1)?.children ??
-    // if `title` is provided by frontmatter it does not appear in the table of contents
-    tableOfContents.filter((item) => item.depth === 2);
-
-  const showToc = !hideToc && tocEntries.length > 0;
-
-  const { prev, next } = useMemo(() => {
-    let prev = { path: "", label: "" as ReactNode };
-    let next = { path: "", label: "" as ReactNode };
-    let shouldStop = false;
-
-    if (!navItem) return { prev, next };
-
-    traverseNavigation(navItem, (node, fullPath) => {
-      const item = { path: fullPath, label: node.label };
-
-      if (shouldStop && isPathItem(node) && !node.children?.length) {
-        next = item;
-        return true;
-      }
-      if (fullPath === location.pathname) {
-        shouldStop = true;
-      }
-      if (!shouldStop && isPathItem(node) && !node.children?.length) {
-        prev = item;
-      }
-    });
-
-    return { prev, next } as const;
-  }, [navItem, location.pathname]);
-
-  return (
-    <div className="xl:grid grid-cols-[--sidecar-grid-cols] gap-8 justify-between">
-      <Helmet>
-        <title>{pageTitle}</title>
-      </Helmet>
-      <div
-        className={cn(
-          ProseClasses,
-          "mx-auto max-w-full xl:w-full xl:max-w-prose flex-1 flex-shrink pt-[--padding-content-top] pb-[--padding-content-bottom]",
-        )}
-      >
-        <header className="-translate-y-1">
-          {category && <CategoryHeading>{category}</CategoryHeading>}
-          {title && (
-            <Heading level={1} id={slugify(title, { lower: true })}>
-              {title}
-            </Heading>
-          )}
-          {frontmatter?.description && (
-            <p className="prose-lg">{frontmatter.description}</p>
-          )}
-        </header>
-        {children}
-        <hr />
-        <div className="not-prose flex items-center justify-between gap-8">
-          {prev.path ? (
-            <Link
-              to={prev.path}
-              className="flex flex-col items-stretch gap-2 flex-1 truncate border border-border rounded px-6 py-4 text-start hover:border-primary/85 transition shadow-sm hover:shadow-md"
-              title={typeof prev.label === "string" ? prev.label : undefined}
-            >
-              <div className="text-sm text-muted-foreground">
-                ← Previous page
-              </div>
-              <div className="text-lg text-primary truncate">{prev.label}</div>
-            </Link>
-          ) : (
-            <div className="flex-1" />
-          )}
-          {next.path ? (
-            <Link
-              to={next.path}
-              className="flex flex-col items-stretch gap-2 flex-1 truncate border border-border rounded px-6 py-4 text-end hover:border-primary/85 transition shadow-sm hover:shadow-md"
-              title={typeof next.label === "string" ? next.label : undefined}
-            >
-              <div className="text-sm text-muted-foreground">Next page →</div>
-              <div className="text-lg text-primary truncate">{next.label}</div>
-            </Link>
-          ) : (
-            <div className="flex-1" />
-          )}
-        </div>
-      </div>
-      <div className="hidden xl:block">
-        {showToc && <Toc entries={tocEntries} />}
-      </div>
-    </div>
-  );
-};

package/src/app/plugins/markdown/Toc.tsx

@@ -1,122 +0,0 @@
-import type { TocEntry } from "@stefanprobst/rehype-extract-toc";
-import {
-  useEffect,
-  useRef,
-  useState,
-  type CSSProperties,
-  type PropsWithChildren,
-} from "react";
-import { AnchorLink } from "../../components/AnchorLink.js";
-import { useViewportAnchor } from "../../components/context/ViewportAnchorContext.js";
-import { ListTreeIcon } from "../../core/icons.js";
-import { cn } from "../../util/cn.js";
-
-const DATA_ANCHOR_ATTR = "data-active";
-
-const TocItem = ({
-  item,
-  children,
-  className,
-  isActive,
-}: PropsWithChildren<{
-  item: TocEntry;
-  isActive: boolean;
-  className?: string;
-}>) => {
-  return (
-    <li
-      className={cn(
-        "truncate",
-        isActive
-          ? "text-primary"
-          : "text-foreground/65 dark:text-foreground/75",
-        className,
-      )}
-      title={item.value}
-    >
-      <AnchorLink
-        to={`#${item.id}`}
-        {...{ [DATA_ANCHOR_ATTR]: item.id }}
-        className={cn(
-          isActive
-            ? "text-primary"
-            : "text-foreground/65 dark:text-foreground/75 hover:text-foreground",
-        )}
-      >
-        {item.value}
-      </AnchorLink>
-      {children}
-    </li>
-  );
-};
-
-export const Toc = ({ entries }: { entries: TocEntry[] }) => {
-  const { activeAnchor } = useViewportAnchor();
-  const listWrapperRef = useRef<HTMLUListElement>(null);
-  const [indicatorStyle, setIndicatorStyles] = useState<CSSProperties>({});
-
-  // synchronize active anchor indicator with the scroll position
-  useEffect(() => {
-    if (!listWrapperRef.current) return;
-
-    const activeElement = listWrapperRef.current.querySelector(
-      `[${DATA_ANCHOR_ATTR}='${activeAnchor}']`,
-    );
-
-    if (!activeElement) {
-      setIndicatorStyles({
-        "--indicator-top": "0",
-        "--indicator-opacity": 0,
-      } as CSSProperties);
-      return;
-    }
-
-    const topParent = listWrapperRef.current.getBoundingClientRect().top;
-    const topElement = activeElement.getBoundingClientRect().top;
-
-    setIndicatorStyles({
-      "--indicator-top": `${topElement - topParent}px`,
-      "--indicator-opacity": 1,
-    } as CSSProperties);
-  }, [activeAnchor]);
-
-  return (
-    <aside className="sticky top-[--header-height] h-[calc(100vh-var(--header-height))] pt-[--padding-content-top] pb-[--padding-content-bottom] overflow-y-auto ps-1 text-sm">
-      <div className="flex items-center gap-2 font-medium mb-2">
-        <ListTreeIcon size={16} />
-        On this page
-      </div>
-
-      <ul
-        ref={listWrapperRef}
-        style={indicatorStyle}
-        className={cn(
-          "relative ms-2 ps-4 font-medium list-none mt-0 space-y-2",
-          "before:absolute before:inset-0 before:right-auto before:bg-border before:w-[2px]",
-          "after:absolute after:-left-px after:-translate-y-1 after:top-[--indicator-top] after:opacity-[--indicator-opacity] after:h-6 after:bg-primary after:w-[4px] after:rounded after:ease-out after:[transition:top__150ms,opacity_325ms]",
-        )}
-      >
-        {entries.map((item) => (
-          <TocItem
-            isActive={item.id === activeAnchor}
-            key={item.id}
-            item={item}
-            className="pl-0"
-          >
-            {item.children && (
-              <ul className="list-none pl-4 pt-2 space-y-2">
-                {item.children.map((child) => (
-                  <TocItem
-                    item={child}
-                    isActive={child.id === activeAnchor}
-                    key={child.id}
-                  />
-                ))}
-              </ul>
-            )}
-          </TocItem>
-        ))}
-      </ul>
-    </aside>
-  );
-};

package/src/app/plugins/markdown/generateRoutes.tsx

@@ -1,72 +0,0 @@
-import { Heading } from "../../Heading.js";
-import { useTopNavigationItem } from "../../components/context/DevPortalProvider.js";
-import { isPathItem } from "../../components/navigation/util.js";
-import { Navigate, type RouteObject } from "../../core/router.js";
-import type { MdxComponentsType } from "../../util/MdxComponents.js";
-import { traverseNavigation } from "../../util/traverseNavigation.js";
-import { MdxPage } from "./MdxPage.js";
-import type { MarkdownPluginOptions } from "./index.js";
-
-const MarkdownHeadings = {
-  h2: ({ children, id }) => (
-    <Heading level={2} id={id} children={children} registerSidebarAnchor />
-  ),
-  h3: ({ children, id }) => (
-    <Heading level={3} id={id} children={children} registerSidebarAnchor />
-  ),
-} satisfies MdxComponentsType;
-
-export const generateRoutes = (
-  markdownFiles: MarkdownPluginOptions["markdownFiles"],
-): RouteObject[] => {
-  const routes = Object.entries(markdownFiles).flatMap(
-    ([file, importPromise]) => {
-      // @todo we can pass in the folder name and then filter the markdown files based on that path
-      const match = file.match(/pages\/(.*).mdx?$/);
-      const path = match?.at(1);
-
-      if (!path) return [];
-
-      const pathSegments = path.split("/");
-      const isIndexFile = pathSegments.at(-1) === "index";
-      const routePath = isIndexFile
-        ? pathSegments.slice(0, -1).join("/")
-        : path;
-
-      return {
-        path: routePath,
-        lazy: async () => {
-          const { default: Component, ...props } = await importPromise();
-
-          return {
-            element: (
-              <MdxPage {...props}>
-                <Component components={MarkdownHeadings} />
-              </MdxPage>
-            ),
-          };
-        },
-      } satisfies RouteObject;
-    },
-  );
-
-  const rootRoutes = Array.from(
-    new Set(routes.map((route) => route.path.split("/").at(0))),
-  ).map((dir) => ({
-    path: `/${dir}`,
-    element: <Redirect />,
-  }));
-
-  return [...routes, ...rootRoutes];
-};
-
-const Redirect = () => {
-  const navItem = useTopNavigationItem();
-
-  if (!navItem) return null;
-
-  return traverseNavigation(navItem, (node, fullPath) => {
-    if ("children" in node || !isPathItem(node)) return;
-    return <Navigate to={fullPath} replace />;
-  });
-};

package/src/app/plugins/markdown/index.tsx

@@ -1,31 +0,0 @@
-import type { Toc } from "@stefanprobst/rehype-extract-toc";
-import type { MDXProps } from "mdx/types.js";
-import type { DevPortalPlugin } from "../../core/plugins.js";
-import { generateRoutes } from "./generateRoutes.js";
-
-export type MarkdownPluginOptions = {
-  markdownFiles: Record<string, () => Promise<MDXImport>>;
-};
-
-export type Frontmatter = {
-  title?: string;
-  description?: string;
-  category?: string;
-  toc?: boolean;
-};
-
-export type MDXImport = {
-  tableOfContents: Toc;
-  frontmatter: Frontmatter;
-  default: (props: MDXProps) => JSX.Element;
-};
-
-export const markdownPlugin = ({
-  markdownFiles,
-}: MarkdownPluginOptions): DevPortalPlugin => {
-  return {
-    getRoutes() {
-      return generateRoutes(markdownFiles);
-    },
-  };
-};

package/src/app/plugins/openapi/ColorizedParam.tsx

@@ -1,82 +0,0 @@
-import { useEffect, useRef, type ReactNode } from "react";
-import { useTheme } from "../../components/context/ThemeContext.js";
-import { cn } from "../../util/cn.js";
-import { pastellize } from "../../util/pastellize.js";
-
-export const DATA_ATTR = "data-linked-param";
-
-export const usePastellizedColor = (name: string) => {
-  const [isDark] = useTheme();
-  return pastellize(
-    name,
-    !isDark ? { saturation: 100, lightness: 70 } : undefined,
-  );
-};
-
-export const ColorizedParam = ({
-  name,
-  value,
-  className,
-  backgroundOpacity = "100%",
-  slug,
-  children,
-  onClick,
-}: {
-  name: string;
-  value?: string;
-  className?: string;
-  backgroundOpacity?: string;
-  slug?: string;
-  children?: ReactNode;
-  onClick?: () => void;
-}) => {
-  const ref = useRef<HTMLSpanElement>(null);
-  const normalized = name.replace("{", "").replace("}", "");
-  const color = usePastellizedColor(normalized);
-
-  const borderColor = `hsl(${color})`;
-  const backgroundColor = `hsl(${color} / ${backgroundOpacity})`;
-
-  useEffect(() => {
-    if (!slug) return;
-    if (!ref.current) return;
-
-    const onMouseEnter = () => {
-      document.querySelectorAll(`[${DATA_ATTR}="${slug}"]`).forEach((el) => {
-        if (el instanceof HTMLElement) {
-          el.dataset.active = "true";
-        }
-      });
-    };
-    const onMouseLeave = () => {
-      document.querySelectorAll(`[${DATA_ATTR}="${slug}"]`).forEach((el) => {
-        if (el instanceof HTMLElement) {
-          el.dataset.active = "false";
-        }
-      });
-    };
-
-    ref.current.addEventListener("mouseenter", onMouseEnter);
-    ref.current.addEventListener("mouseleave", onMouseLeave);
-
-    return () => {
-      ref.current?.removeEventListener("mouseenter", onMouseEnter);
-      ref.current?.removeEventListener("mouseleave", onMouseLeave);
-    };
-  }, [slug]);
-
-  return (
-    <span
-      className={cn("inline-flex relative rounded group", className)}
-      {...{ [DATA_ATTR]: slug }}
-      ref={ref}
-      onClick={onClick}
-    >
-      <span
-        className="absolute inset-0 border-b-2 transition-opacity duration-200 opacity-30 group-data-[active=true]:opacity-100"
-        style={{ borderColor, backgroundColor }}
-      />
-      <span className="relative">{children || name}</span>
-    </span>
-  );
-};

package/src/app/plugins/openapi/MakeRequest.tsx

@@ -1,49 +0,0 @@
-import { useApiIdentities } from "../../components/context/DevPortalProvider.js";
-import type { OperationListItemResult } from "./OperationList.js";
-import { Playground } from "./playground/Playground.js";
-import { useOasConfig } from "./index.js";
-import { gql, useQuery } from "urql";
-
-const getServerQuery = gql`
-  query getServerQuery($input: JSON!, $type: SchemaType!) {
-    schema(input: $input, type: $type) {
-      url
-    }
-  }
-`;
-
-export const MakeRequest = ({
-  operation,
-}: {
-  operation: OperationListItemResult;
-}) => {
-  const identities = useApiIdentities();
-  const variables = useOasConfig();
-  const [server] = useQuery({ query: getServerQuery, variables });
-
-  return (
-    <div>
-      <Playground
-        host={server.data?.schema.url}
-        method={operation.method}
-        url={operation.path}
-        defaultHeaders={[]}
-      />
-      {identities.data.map((identity) => (
-        <button
-          key={identity.id}
-          onClick={() => {
-            const test = new Request(
-              "https://zudoku-customer-main-b36fa2f.d2.zuplo.dev" +
-                operation.path,
-            );
-            void fetch(identity.authorizeRequest(test));
-          }}
-          className="p-2 border border-border rounded hover:bg-accent"
-        >
-          Test Request {operation.path} ({identity.name})
-        </button>
-      ))}
-    </div>
-  );
-};

package/src/app/plugins/openapi/MethodBadge.tsx

@@ -1,36 +0,0 @@
-import { cn } from "../../util/cn.js";
-
-export const MethodTextColorMap = {
-  get: "text-green-600",
-  post: "text-sky-600",
-  put: "text-yellow-600",
-  delete: "text-red-600",
-  patch: "text-purple-600",
-  options: "text-indigo-600",
-  head: "text-gray-600",
-  trace: "text-gray-600",
-};
-
-const MethodColorMap = {
-  get: "bg-green-400 dark:bg-green-800",
-  post: "bg-sky-400 dark:bg-sky-800",
-  put: "bg-yellow-400 dark:bg-yellow-800",
-  delete: "bg-red-400 dark:bg-red-800",
-  patch: "bg-purple-400 dark:bg-purple-600",
-  options: "bg-indigo-400 dark:bg-indigo-600",
-  head: "bg-gray-400 dark:bg-gray-600",
-  trace: "bg-gray-400 dark:bg-gray-600",
-};
-
-export const MethodBadge = ({ method }: { method: string }) => {
-  return (
-    <span
-      className={cn(
-        "mt-0.5 flex items-center duration-200 transition-opacity text-center uppercase font-mono text-[0.65rem] font-bold rounded text-background dark:text-zinc-50 h-4 px-1",
-        MethodColorMap[method as keyof typeof MethodColorMap],
-      )}
-    >
-      {method}
-    </span>
-  );
-};

package/src/app/plugins/openapi/OperationList.tsx

@@ -1,117 +0,0 @@
-import { Heading } from "../../Heading.js";
-import { CategoryHeading } from "../../components/CategoryHeading.js";
-import { Markdown, ProseClasses } from "../../components/Markdown.js";
-import { cn } from "../../util/cn.js";
-import { OperationListItem } from "./OperationListItem.js";
-import { useOasConfig } from "./index.js";
-import { graphql } from "./graphql/index.js";
-import { useQuery } from "./util/urql.js";
-import { ResultOf } from "@graphql-typed-document-node/core";
-
-export const OperationsFragment = graphql(/* GraphQL */ `
-  fragment OperationsFragment on OperationItem {
-    slug
-    summary
-    method
-    description
-    operationId
-    contentTypes
-    path
-    parameters {
-      name
-      in
-      description
-      required
-      schema
-      style
-    }
-    requestBody {
-      content {
-        mediaType
-        encoding {
-          name
-        }
-        schema
-      }
-      description
-      required
-    }
-    responses {
-      statusCode
-      links
-      description
-      content {
-        mediaType
-        encoding {
-          name
-        }
-        schema
-      }
-    }
-  }
-`);
-
-export type OperationListItemResult = ResultOf<typeof OperationsFragment>;
-
-const AllOperationsQuery = graphql(/* GraphQL */ `
-  query AllOperations($input: JSON!, $type: SchemaType!) {
-    schema(input: $input, type: $type) {
-      description
-      title
-      url
-      version
-      tags {
-        name
-        description
-        operations {
-          slug
-          ...OperationsFragment
-        }
-      }
-    }
-  }
-`);
-
-export const OperationList = () => {
-  const { type, input } = useOasConfig();
-
-  const [result] = useQuery({
-    query: AllOperationsQuery,
-    variables: { type, input },
-  });
-
-  if (!result.data) return null;
-
-  return (
-    <div className="pt-[--padding-content-top]">
-      <div className={cn(ProseClasses, "mb-16")}>
-        <CategoryHeading>Overview</CategoryHeading>
-        <Heading level={1} id="description" registerSidebarAnchor>
-          {result.data.schema.title}
-        </Heading>
-        <Markdown content={result.data.schema.description ?? ""} />
-      </div>
-      {result.data?.schema.tags
-        .filter((tag) => tag.operations.length > 0)
-        .map((tag) => (
-          <div key={tag.name}>
-            {tag.name && <CategoryHeading>{tag.name}</CategoryHeading>}
-            {tag.description && (
-              <Markdown
-                className={`${ProseClasses} mt-2 mb-12`}
-                content={tag.description}
-              />
-            )}
-            <div className="operation mb-12">
-              {tag.operations.map((fragment) => (
-                <OperationListItem
-                  key={fragment.slug}
-                  operationFragment={fragment}
-                />
-              ))}
-            </div>
-          </div>
-        ))}
-    </div>
-  );
-};

package/src/app/plugins/openapi/OperationListItem.tsx

@@ -1,55 +0,0 @@
-import { Heading } from "../../Heading.js";
-import { Markdown, ProseClasses } from "../../components/Markdown.js";
-import { groupBy } from "../../util/groupBy.js";
-import { OperationsFragment } from "./OperationList.js";
-import { ParameterList } from "./ParameterList.js";
-import { Sidecar } from "./Sidecar.js";
-import { FragmentType, useFragment } from "./graphql/index.js";
-
-export const PARAM_GROUPS = ["path", "query", "header", "cookie"] as const;
-export type ParameterGroup = (typeof PARAM_GROUPS)[number];
-
-export const OperationListItem = ({
-  operationFragment,
-}: {
-  operationFragment: FragmentType<typeof OperationsFragment>;
-}) => {
-  const operation = useFragment(OperationsFragment, operationFragment);
-  const groupedParameters = groupBy(operation?.parameters ?? [], "in");
-
-  return (
-    <div
-      key={operation.operationId}
-      className="grid grid-cols-2 gap-8 items-start border-b-2 mb-16 pb-16 border-border"
-    >
-      <div className={ProseClasses}>
-        <Heading
-          level={2}
-          className="mt-0"
-          id={operation.slug}
-          registerSidebarAnchor
-        >
-          {operation.summary}
-        </Heading>
-        {operation.description && <Markdown content={operation.description} />}
-        {operation.parameters && operation.parameters.length > 0 && (
-          <div className="mt-4">
-            {PARAM_GROUPS.flatMap((group) =>
-              groupedParameters?.[group]?.length ? (
-                <ParameterList
-                  key={group}
-                  id={operation.slug}
-                  groupedParameters={groupedParameters}
-                  group={group}
-                />
-              ) : (
-                []
-              ),
-            )}
-          </div>
-        )}
-      </div>
-      <Sidecar operation={operation} />
-    </div>
-  );
-};