zudoku 0.0.0-ff3bc72 → 0.0.0-zuplo-api-keys.534c6f8

package/src/lib/core/DevPortalContext.ts

@@ -1,135 +0,0 @@
-import { QueryClient } from "@tanstack/react-query";
-import { ReactNode } from "react";
-import type { SidebarConfig } from "../../config/validators/SidebarSchema.js";
-import { type AuthenticationProvider } from "../authentication/authentication.js";
-import type { ComponentsContextType } from "../components/context/ComponentsContext.js";
-import { Slotlets } from "../components/SlotletProvider.js";
-import { joinPath } from "../util/joinPath.js";
-import type { MdxComponentsType } from "../util/MdxComponents.js";
-import {
-  type DevPortalPlugin,
-  isApiIdentityPlugin,
-  isNavigationPlugin,
-  type NavigationPlugin,
-  needsInitialization,
-} from "./plugins.js";
-
-export interface ApiIdentity {
-  authorizeRequest: (request: Request) => Request;
-  label: string;
-  id: string;
-}
-
-export const queryClient = new QueryClient();
-
-export type ApiKeyCache = "api-keys";
-export type DevPortalCacheKey = ApiKeyCache | string;
-
-type Metadata = Partial<{
-  title: string;
-  description: string;
-  logo: string;
-  favicon: string;
-  generator: string;
-  applicationName: string;
-  referrer: string;
-  keywords: string[];
-  authors: string[];
-  creator: string;
-  publisher: string;
-}>;
-
-type Page = Partial<{
-  pageTitle?: string;
-  logo?: {
-    src: {
-      light: string;
-      dark: string;
-    };
-    width?: string;
-    alt?: string;
-  };
-  banner?: {
-    message: ReactNode;
-    color?: "note" | "tip" | "info" | "caution" | "danger" | (string & {});
-    dismissible?: boolean;
-  };
-}>;
-
-export type ZudokuContextOptions = {
-  metadata?: Metadata;
-  page?: Page;
-  authentication?: AuthenticationProvider;
-  topNavigation?: Array<{ id: string; label: string; default?: string }>;
-  sidebars?: SidebarConfig;
-  plugins?: DevPortalPlugin[];
-  slotlets?: Slotlets;
-  mdx?: {
-    components?: MdxComponentsType;
-  };
-  overrides?: ComponentsContextType;
-};
-
-export class DevPortalContext {
-  public plugins: NonNullable<ZudokuContextOptions["plugins"]>;
-  public sidebars: NonNullable<ZudokuContextOptions["sidebars"]>;
-  public topNavigation: NonNullable<ZudokuContextOptions["topNavigation"]>;
-  public meta: ZudokuContextOptions["metadata"];
-  public page: ZudokuContextOptions["page"];
-  public authentication?: ZudokuContextOptions["authentication"];
-  private navigationPlugins: NavigationPlugin[];
-
-  constructor(config: ZudokuContextOptions) {
-    this.plugins = config.plugins ?? [];
-    this.topNavigation = config.topNavigation ?? [];
-    this.sidebars = config.sidebars ?? {};
-    this.navigationPlugins = this.plugins.filter(isNavigationPlugin);
-    this.authentication = config.authentication;
-    this.meta = config.metadata;
-    this.page = config.page;
-  }
-
-  initialize = async (): Promise<void> => {
-    await Promise.all(
-      this.plugins
-        .filter(needsInitialization)
-        .map((plugin) => plugin.initialize?.(this)),
-    );
-  };
-
-  invalidateCache = async (key: DevPortalCacheKey[]) => {
-    await queryClient.invalidateQueries({ queryKey: key });
-  };
-
-  getApiIdentities = async () => {
-    const keys = await Promise.all(
-      this.plugins
-        .filter(isApiIdentityPlugin)
-        .map((plugin) => plugin.getIdentities(this)),
-    );
-
-    return keys.flat();
-  };
-
-  getPluginSidebar = async (path: string) => {
-    const navigations = await Promise.all(
-      this.navigationPlugins.map((plugin) =>
-        plugin.getSidebar?.(joinPath(path)),
-      ),
-    );
-
-    return navigations.flatMap((nav) => nav ?? []);
-  };
-
-  signRequest = async (request: Request) => {
-    if (!this.authentication) {
-      throw new Error("No authentication provider configured");
-    }
-
-    const accessToken = await this.authentication.getAccessToken();
-
-    request.headers.set("Authorization", `Bearer ${accessToken}`);
-
-    return request;
-  };
-}

package/src/lib/plugins/custom-page/index.tsx

@@ -1,22 +0,0 @@
-import type { ReactNode } from "react";
-import type { RouteObject } from "react-router-dom";
-import { ProseClasses } from "../../components/Markdown.js";
-import type { DevPortalPlugin, NavigationPlugin } from "../../core/plugins.js";
-
-type CustomPageConfig = Array<{
-  path: string;
-  element: ReactNode;
-}>;
-
-export const customPagePlugin = (
-  config: CustomPageConfig,
-): DevPortalPlugin & NavigationPlugin => {
-  return {
-    getRoutes: (): RouteObject[] =>
-      config.map(({ path, element }) => ({
-        path,
-        // TODO: we should componentize prose pages
-        element: <div className={ProseClasses + " max-w-full"}>{element}</div>,
-      })),
-  };
-};

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

@@ -1,135 +0,0 @@
-import type { TocEntry } from "@stefanprobst/rehype-extract-toc";
-import { ListTreeIcon } from "lucide-react";
-import {
-  useEffect,
-  useRef,
-  useState,
-  type CSSProperties,
-  type PropsWithChildren,
-} from "react";
-import { AnchorLink } from "../../components/AnchorLink.js";
-import { useViewportAnchor } from "../../components/context/ViewportAnchorContext.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 paintedOnce = useRef(false);
-  const [indicatorStyle, setIndicatorStyles] = useState<CSSProperties>({
-    top: 0,
-    opacity: 0,
-  });
-
-  // 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({ top: 0, opacity: 0 });
-      return;
-    }
-
-    const topParent = listWrapperRef.current.getBoundingClientRect().top;
-    const topElement = activeElement.getBoundingClientRect().top;
-
-    setIndicatorStyles({
-      opacity: 1,
-      top: `${topElement - topParent}px`,
-    });
-
-    if (paintedOnce.current) return;
-
-    // after all is painted, the indicator should animate
-    requestIdleCallback(() => {
-      paintedOnce.current = true;
-    });
-  }, [activeAnchor]);
-
-  return (
-    <aside className="sticky scrollbar 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>
-      <div className="relative ms-2 ps-4">
-        <div className="absolute inset-0 right-auto bg-border w-[2px]" />
-        <div
-          className={cn(
-            "absolute -left-px -translate-y-1 h-6 w-[4px] rounded bg-primary",
-            paintedOnce.current &&
-              "ease-out [transition:top_150ms,opacity_325ms]",
-          )}
-          style={indicatorStyle}
-        />
-        <ul
-          ref={listWrapperRef}
-          className="relative font-medium list-none space-y-2"
-        >
-          {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>
-      </div>
-    </aside>
-  );
-};

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

@@ -1,38 +0,0 @@
-import { type RouteObject } from "react-router-dom";
-
-import {
-  MarkdownPluginDefaultOptions,
-  MarkdownPluginOptions,
-} from "./index.js";
-
-export const generateRoutes = (
-  markdownFiles: MarkdownPluginOptions["markdownFiles"],
-  filesPath: string,
-  defaultOptions?: MarkdownPluginDefaultOptions,
-): RouteObject[] =>
-  Object.entries(markdownFiles).flatMap(([file, importPromise]) => {
-    let rootDir = filesPath.split("**")[0];
-    rootDir = rootDir.replace("/**", "/");
-    const re = new RegExp(`^${rootDir}(.*).mdx?`);
-    const match = file.match(re);
-    const fsPath = match?.at(1);
-
-    if (!fsPath) return [];
-
-    return {
-      path: fsPath,
-      lazy: async () => {
-        const { MdxPage } = await import("./MdxPage.js");
-        const { default: Component, ...props } = await importPromise();
-        return {
-          element: (
-            <MdxPage
-              mdxComponent={Component}
-              {...props}
-              defaultOptions={defaultOptions}
-            />
-          ),
-        };
-      },
-    } satisfies RouteObject;
-  });

package/src/lib/plugins/openapi/Route.tsx

@@ -1,21 +0,0 @@
-import { Outlet } from "react-router-dom";
-import { OasConfigProvider } from "./context.js";
-import { OasPluginConfig } from "./interfaces.js";
-
-import { Provider, Client as UrqlClient } from "./util/urql.js";
-
-export function OpenApiRoute({
-  config,
-  client,
-}: {
-  config: OasPluginConfig;
-  client: typeof UrqlClient;
-}) {
-  return (
-    <Provider value={client}>
-      <OasConfigProvider value={{ config }}>
-        <Outlet />
-      </OasConfigProvider>
-    </Provider>
-  );
-}

package/src/lib/plugins/openapi/client/createMemoryClient.ts

@@ -1,56 +0,0 @@
-/* eslint-disable no-console */
-import {
-  cacheExchange,
-  Client,
-  fetchExchange,
-  mapExchange,
-} from "../util/urql.js";
-import { createServer } from "./createServer.js";
-import { CreateClientFunction } from "./interfaces.js";
-
-export type WorkerGraphQLMessage = { id: string; body: string };
-
-const localServer = createServer();
-
-/**
- * Creates an in memory Client that does not use Workers. This allows
- * developers to run the simple standalone version of zudoku using the CDN
- * hosted scripts. Worker's cannot be loaded cross domain so in this case
- * we sacrifice performance for making it work cross domain.
- */
-export const createClient: CreateClientFunction = () => {
-  return new Client({
-    url: "/__z/graphql",
-    // Custom fetch to send the GraphQL request to the worker and convert the response back to a `Response` object
-    fetch: async (req, init) => {
-      if (!init?.body) throw new Error("No body");
-      const response = await localServer.fetch(
-        new Request("http://localhost/__z/graphql", {
-          method: "POST",
-          body: init.body,
-          headers: {
-            "Content-Type": "application/json",
-          },
-        }),
-      );
-      return response;
-      // port.postMessage({
-      //   id: e.data.id,
-      //   body: await response.text(),
-      // } satisfies WorkerGraphQLMessage);
-    },
-    exchanges: [
-      cacheExchange,
-      mapExchange({
-        onError(error, operation) {
-          console.error(error);
-          console.groupCollapsed("Operation info");
-          console.log("body", operation.query.loc?.source.body.trim());
-          console.log("variables", operation.variables);
-          console.groupEnd();
-        },
-      }),
-      fetchExchange,
-    ],
-  });
-};

package/src/lib/plugins/openapi/client/createWorkerClient.ts

@@ -1,80 +0,0 @@
-/* eslint-disable no-console */
-import { monotonicFactory } from "ulidx";
-import { createWaitForNotify } from "../../../util/createWaitForNotify.js";
-import {
-  cacheExchange,
-  Client,
-  fetchExchange,
-  mapExchange,
-} from "../util/urql.js";
-import { createClient as createMemoryClient } from "./createMemoryClient.js";
-import { CreateClientFunction } from "./interfaces.js";
-
-export type WorkerGraphQLMessage = { id: string; body: string };
-const ulid = monotonicFactory();
-
-/**
- * This loads the client from a worker and uses mess port to send requests
- * and responses between the main thread and the worker.
- */
-export const createClient: CreateClientFunction = ({
-  useMemoryClient,
-}: {
-  useMemoryClient: boolean;
-}) => {
-  if (useMemoryClient || typeof SharedWorker === "undefined") {
-    return createMemoryClient({ useMemoryClient });
-  }
-  // NOTE: This URL needs to be inline with the SharedWorker otherwse
-  // vite build does not recognize the worker file as a module.
-  const worker = new SharedWorker(new URL("./worker.ts", import.meta.url), {
-    type: "module",
-  });
-
-  worker.onerror = (e) => {
-    console.error(e);
-  };
-
-  worker.port.start();
-
-  const [waitFor, notify] = createWaitForNotify<string>();
-
-  worker.port.onmessage = (e: MessageEvent<WorkerGraphQLMessage>) => {
-    notify(e.data.id, e.data.body);
-  };
-
-  return new Client({
-    url: "/__z/graphql",
-    // Custom fetch to send the GraphQL request to the worker and convert the response back to a `Response` object
-    fetch: async (_req, init) => {
-      if (!init?.body) throw new Error("No body");
-
-      const id = ulid();
-      worker.port.postMessage({
-        id,
-        body: init.body as string,
-      } satisfies WorkerGraphQLMessage);
-
-      const body = await waitFor(id);
-
-      return new Response(body, {
-        headers: {
-          "Content-Type": "application/json",
-        },
-      });
-    },
-    exchanges: [
-      cacheExchange,
-      mapExchange({
-        onError(error, operation) {
-          console.error(error);
-          console.groupCollapsed("Operation info");
-          console.log("body", operation.query.loc?.source.body.trim());
-          console.log("variables", operation.variables);
-          console.groupEnd();
-        },
-      }),
-      fetchExchange,
-    ],
-  });
-};

package/src/lib/plugins/openapi/client/interfaces.ts

@@ -1,5 +0,0 @@
-import { Client } from "urql";
-
-export type CreateClientFunction = (config: {
-  useMemoryClient: boolean;
-}) => Client;

package/src/lib/plugins/openapi/client/worker.ts

@@ -1,30 +0,0 @@
-import { createServer } from "./createServer.js";
-import { type WorkerGraphQLMessage } from "./createWorkerClient.js";
-
-const localServer = createServer();
-
-const worker = self as unknown as SharedWorkerGlobalScope;
-
-worker.addEventListener(
-  "connect",
-  function (event: MessageEvent<{ id: string; body: string }>) {
-    const port = event.ports[0];
-
-    port.onmessage = async function (e) {
-      const response = await localServer.fetch(
-        new Request("/__z/graphql", {
-          method: "POST",
-          body: e.data.body,
-          headers: {
-            "Content-Type": "application/json",
-          },
-        }),
-      );
-
-      port.postMessage({
-        id: e.data.id,
-        body: await response.text(),
-      } satisfies WorkerGraphQLMessage);
-    };
-  },
-);

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

@@ -1,4 +0,0 @@
-export const Editor = () => {
-  // const XoXo = lazy(() => import("@monaco-editor/react"));
-  // return <XoXo />;
-};

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

@@ -1,76 +0,0 @@
-import { useState } from "react";
-import { SyntaxHighlight } from "../../../components/SyntaxHighlight.js";
-import { Card } from "../../../ui/Card.js";
-import { SimpleSelect } from "../SimpleSelect.js";
-
-const mimeTypeToLanguage = (mimeType: string) => {
-  const mimeTypeMapping = {
-    "application/json": "json",
-    "text/json": "json",
-    "text/html": "html",
-    "text/css": "css",
-    "text/javascript": "javascript",
-    "application/xml": "xml",
-    "application/xhtml+xml": "xhtml",
-  };
-
-  return Object.entries(mimeTypeMapping).find(([mime]) =>
-    mimeType.includes(mime),
-  )?.[1];
-};
-
-const detectLanguage = (headers: Headers) => {
-  const contentType = headers.get("Content-Type") || "";
-  return mimeTypeToLanguage(contentType);
-};
-
-const tryParseJson = (body: string) => {
-  try {
-    return JSON.stringify(JSON.parse(body), null, 2);
-  } catch {
-    return null;
-  }
-};
-
-export const ResponseTab = ({
-  body = "",
-  headers,
-}: {
-  body?: string;
-  headers: Headers;
-}) => {
-  const detectedLanguage = detectLanguage(headers);
-  const jsonContent = tryParseJson(body);
-  const beautifiedBody = jsonContent || body;
-  const [view, setView] = useState<"formatted" | "raw">(
-    jsonContent ? "formatted" : "raw",
-  );
-
-  return (
-    <div className="flex flex-col gap-2">
-      <Card className="shadow-none">
-        <SyntaxHighlight
-          language={
-            view === "raw" ? (jsonContent ? "plain" : detectedLanguage) : "json"
-          }
-          noBackground
-          // playground dialog has h-5/6 ≈ 83.333vh
-          className="overflow-x-auto p-4 text-xs max-h-[calc(83.333vh-180px)]"
-          code={view === "raw" ? body : beautifiedBody}
-        />
-      </Card>
-      {jsonContent && (
-        <div className="flex justify-end">
-          <SimpleSelect
-            value={view}
-            onChange={(e) => setView(e.target.value as "formatted" | "raw")}
-            options={[
-              { value: "formatted", label: "Formatted" },
-              { value: "raw", label: "Raw" },
-            ]}
-          />
-        </div>
-      )}
-    </div>
-  );
-};