zudoku 0.3.0-dev.9 → 0.3.0-dev.91

package/src/lib/authentication/Callback.tsx

@@ -1,60 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-import { useNavigate } from "../core/router.js";
-import { OAuthAuthorizationError } from "./errors.js";
-
-export function Callback({
-  handleCallback,
-}: {
-  handleCallback: () => Promise<void>;
-}) {
-  const didInitialize = useRef(false);
-  const [error, setError] = useState<Error | undefined>(undefined);
-  const navigate = useNavigate();
-
-  // This should not use react query, etc. It is important that it
-  // only ever runs once. The didInitialize ref keeps it from double
-  // initializing in dev mode with ReactStrict enabled.
-  useEffect(() => {
-    if (didInitialize.current) {
-      return;
-    }
-    didInitialize.current = true;
-    handleCallback()
-      .then(() => {
-        // TODO: Handle return url, state, etc
-        navigate("/");
-      })
-      .catch((err) => {
-        setError(err);
-      });
-  }, []);
-
-  if (error) {
-    if (error instanceof OAuthAuthorizationError) {
-      return (
-        <div>
-          <h2>Error</h2>
-          <pre>
-            {error.error.error}
-
-            {error.error.error_description}
-
-            {error.error.error_uri}
-          </pre>
-        </div>
-      );
-    }
-    return (
-      <div>
-        <h2>Error</h2>
-        <pre>
-          {error.message}
-
-          {error.stack}
-        </pre>
-      </div>
-    );
-  }
-
-  return <div>Loading...</div>;
-}

package/src/lib/components/Link.tsx

@@ -1 +0,0 @@
-export { Link } from "../core/router.js";

package/src/lib/components/Router.tsx

@@ -1,28 +0,0 @@
-import { useMemo } from "react";
-import { createBrowserRouter, RouterProvider } from "react-router-dom";
-import { DevPortalPlugin, isNavigationPlugin } from "../core/plugins.js";
-import { Layout } from "./Layout.js";
-
-export function Router({ plugins }: { plugins?: DevPortalPlugin[] }) {
-  const router = useMemo(() => {
-    const routes = (plugins ?? []).flatMap((plugin) =>
-      isNavigationPlugin(plugin) ? plugin.getRoutes() : [],
-    );
-
-    return createBrowserRouter([
-      {
-        path: "/",
-        element: <Layout />,
-        errorElement: (
-          <Layout>
-            <div className="h-[75vh] flex items-center justify-center">
-              Error, look at the console
-            </div>
-          </Layout>
-        ),
-        children: routes,
-      },
-    ]);
-  }, [plugins]);
-  return <RouterProvider router={router} />;
-}

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

@@ -1,54 +0,0 @@
-import { useSuspenseQuery } from "@tanstack/react-query";
-import { createContext, useContext } from "react";
-import { matchPath, useLocation } from "react-router-dom";
-import { DevPortalContext } from "../../core/DevPortalContext.js";
-
-const DevPortalReactContext = createContext<DevPortalContext | undefined>(
-  undefined,
-);
-
-export const DevPortalProvider = DevPortalReactContext.Provider;
-
-export const useDevPortal = () => {
-  const context = useContext(DevPortalReactContext);
-
-  if (!context) {
-    throw new Error("useDevPortal must be used within a DevPortalProvider.");
-  }
-
-  return context;
-};
-
-export const useApiIdentities = () => {
-  const { getApiIdentities } = useDevPortal();
-  return useSuspenseQuery({
-    queryFn: getApiIdentities,
-    queryKey: ["api-identities"],
-  });
-};
-
-export const useTopNavigationItem = () => {
-  const { navigation } = useDevPortal();
-  const location = useLocation();
-
-  return navigation.find((item) =>
-    matchPath({ path: item.path, end: false }, location.pathname),
-  );
-};
-
-export const useNavigation = () => {
-  const { getNavigation } = useDevPortal();
-  const navItem = useTopNavigationItem();
-
-  const path = navItem?.path ?? "";
-
-  return useSuspenseQuery({
-    queryFn: async () => {
-      return {
-        items: [...(navItem?.categories ?? []), ...(await getNavigation(path))],
-        currentTopNavItem: navItem,
-      };
-    },
-    queryKey: ["navigation", path],
-  });
-};

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

@@ -1,21 +0,0 @@
-import { useRef } from "react";
-
-import { useNavigation } from "../context/DevPortalProvider.js";
-import { SideNavigationCategory } from "./SideNavigationCategory.js";
-import { SideNavigationWrapper } from "./SideNavigationWrapper.js";
-
-export const SideNavigation = () => {
-  const navRef = useRef<HTMLDivElement | null>(null);
-  const navigation = useNavigation();
-
-  return (
-    <SideNavigationWrapper
-      ref={navRef}
-      pushMainContent={navigation.data.items.length > 0}
-    >
-      {navigation.data.items.map((category) => (
-        <SideNavigationCategory key={category.label} category={category} />
-      ))}
-    </SideNavigationWrapper>
-  );
-};

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

@@ -1,76 +0,0 @@
-import * as Collapsible from "@radix-ui/react-collapsible";
-import { ChevronRightIcon } from "lucide-react";
-import { useLocation } from "react-router-dom";
-import type { NavigationCategory } from "../../core/DevPortalContext.js";
-import { cn } from "../../util/cn.js";
-import { joinPath } from "../../util/joinPath.js";
-import { useTopNavigationItem } from "../context/DevPortalProvider.js";
-import { useViewportAnchor } from "../context/ViewportAnchorContext.js";
-import { SideNavigationItem } from "./SideNavigationItem.js";
-import { useNavigationCollapsibleState } from "./useNavigationCollapsibleState.js";
-import { checkHasActiveItem, isPathItem } from "./util.js";
-
-export const SideNavigationCategory = ({
-  category,
-}: {
-  category: NavigationCategory;
-}) => {
-  const { activeAnchor } = useViewportAnchor();
-  const navItem = useTopNavigationItem();
-  const location = useLocation();
-
-  const isCollapsible = category.collapsible ?? true;
-
-  const [isOpen, setIsOpen] = useNavigationCollapsibleState({
-    item: category,
-    path: navItem?.path ?? "",
-    defaultOpen: () =>
-      !isCollapsible ||
-      category.expanded ||
-      checkHasActiveItem(category, location.pathname, navItem?.path ?? ""),
-  });
-
-  return (
-    <Collapsible.Root
-      key={category.label}
-      open={isOpen}
-      onOpenChange={() => setIsOpen((prev) => !prev)}
-    >
-      {category.label.length > 0 ? (
-        <Collapsible.Trigger asChild={isCollapsible} disabled={!isCollapsible}>
-          <h5
-            className={cn(
-              "flex group items-center justify-between cursor-pointer font-semibold text-foreground/90 px-[--padding-nav-item] py-1.5 rounded-lg transition-colors duration-300 -mx-[--padding-nav-item]",
-              isCollapsible ? "hover:bg-accent" : "cursor-auto",
-            )}
-          >
-            {category.label}
-            {isCollapsible && (
-              <ChevronRightIcon
-                className="group-data-[state=open]:rotate-90 transition"
-                size={16}
-              />
-            )}
-          </h5>
-        </Collapsible.Trigger>
-      ) : (
-        "Endpoints"
-      )}
-      <Collapsible.Content className="CollapsibleContent -mx-[--padding-nav-item]">
-        {/* margin on Collapsible.Content will lead jumpiness when animating because it's not added to the calculated height */}
-        <ul className="space-y-0.5 mt-1.5 mb-4 ms-3">
-          {category.children.map((item) => (
-            <SideNavigationItem
-              key={isPathItem(item) ? item.path + item.label : item.href}
-              category={category}
-              item={item}
-              activeAnchor={activeAnchor}
-              currentTopNavItem={navItem}
-              basePath={joinPath(navItem?.path, category.path)}
-            />
-          ))}
-        </ul>
-      </Collapsible.Content>
-    </Collapsible.Root>
-  );
-};

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

@@ -1,152 +0,0 @@
-import * as Collapsible from "@radix-ui/react-collapsible";
-import { cva } from "class-variance-authority";
-import { ChevronRightIcon, ExternalLinkIcon } from "lucide-react";
-import { NavLink, useLocation } from "react-router-dom";
-
-import type {
-  NavigationCategory,
-  NavigationCategoryItem,
-  NavigationItem,
-} from "../../core/DevPortalContext.js";
-import { cn } from "../../util/cn.js";
-import { joinPath } from "../../util/joinPath.js";
-import { AnchorLink } from "../AnchorLink.js";
-import { useNavigationCollapsibleState } from "./useNavigationCollapsibleState.js";
-import { checkHasActiveItem, isLinkItem, isPathItem } from "./util.js";
-
-export const navigationListItem = cva(
-  "flex px-[--padding-nav-item] py-1.5 rounded-lg hover:bg-accent transition-colors duration-300",
-  {
-    variants: {
-      isActive: {
-        true: "text-primary font-medium",
-        false: "text-foreground/80",
-      },
-      isMuted: {
-        true: "text-foreground/30",
-        false: "",
-      },
-    },
-  },
-);
-
-export const DATA_ANCHOR_ATTR = "data-anchor";
-
-export const SideNavigationItem = ({
-  category,
-  item,
-  activeAnchor,
-  currentTopNavItem,
-  basePath = "",
-}: {
-  category: NavigationCategory;
-  item: NavigationCategoryItem;
-  activeAnchor?: string;
-  currentTopNavItem?: NavigationItem;
-  basePath?: string;
-}) => {
-  const currentPath = isPathItem(item) ? joinPath(basePath, item.path) : "";
-  const location = useLocation();
-
-  const [isOpen, setIsOpen] = useNavigationCollapsibleState({
-    item,
-    path: currentPath,
-    defaultOpen: () => checkHasActiveItem(item, location.pathname, currentPath),
-  });
-
-  if (isLinkItem(item)) {
-    const classes = cn(
-      "flex items-center gap-2",
-      navigationListItem({
-        isActive: item.href === location.pathname,
-      }),
-    );
-    return item.href.startsWith("http") ? (
-      <a
-        className={classes}
-        href={item.href}
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        {item.label}
-        <ExternalLinkIcon size={14} />
-      </a>
-    ) : (
-      <NavLink className={classes} to={item.href}>
-        {item.label}
-      </NavLink>
-    );
-  }
-
-  const linkContent = (
-    <div className="flex justify-between w-full">
-      <div className="flex items-center gap-2 truncate w-full">
-        {item.icon}
-        {typeof item.label !== "string" ? (
-          item.label
-        ) : (
-          <span className="truncate">{item.label}</span>
-        )}
-      </div>
-      {item.children && (
-        <ChevronRightIcon
-          size={16}
-          className="transition shrink-0 group-data-[state=open]:rotate-90"
-        />
-      )}
-    </div>
-  );
-
-  return (
-    <li title={typeof item.label === "string" ? item.label : item.title}>
-      {item.children ? (
-        <Collapsible.Root
-          open={isOpen}
-          onOpenChange={() => setIsOpen((prev) => !prev)}
-          className="flex flex-col"
-        >
-          <Collapsible.Trigger
-            className={cn(
-              "group text-start",
-              navigationListItem({ isActive: false }),
-            )}
-          >
-            {linkContent}
-          </Collapsible.Trigger>
-          <Collapsible.Content className="CollapsibleContent ms-[calc(var(--padding-nav-item)*1.125)]">
-            <ul className="mt-1 border-border border-l ps-1.5">
-              {item.children.map((child) => (
-                <SideNavigationItem
-                  key={isPathItem(child) ? child.path : child.href}
-                  category={category}
-                  item={child}
-                  activeAnchor={activeAnchor}
-                  currentTopNavItem={currentTopNavItem}
-                  basePath={currentPath}
-                />
-              ))}
-            </ul>
-          </Collapsible.Content>
-        </Collapsible.Root>
-      ) : item.path.startsWith("#") ? (
-        <AnchorLink
-          to={item.path}
-          {...{ [DATA_ANCHOR_ATTR]: item.path }}
-          className={navigationListItem({
-            isActive: item.path.slice(1) === activeAnchor,
-            isMuted: item.muted,
-          })}
-        >
-          {linkContent}
-        </AnchorLink>
-      ) : (
-        <NavLink
-          className={({ isActive }) => navigationListItem({ isActive })}
-          to={currentPath}
-        >
-          {linkContent}
-        </NavLink>
-      )}
-    </li>
-  );
-};

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

@@ -1,27 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-import { useLocation } from "react-router-dom";
-import type { NavigationNode } from "../../util/traverseNavigation.js";
-import { checkHasActiveItem } from "./util.js";
-
-export const useNavigationCollapsibleState = ({
-  item,
-  defaultOpen,
-  path,
-}: {
-  item: NavigationNode;
-  defaultOpen: () => boolean;
-  path: string;
-}) => {
-  const [isOpen, setIsOpen] = useState(defaultOpen);
-  const location = useLocation();
-  const previousLocationPath = useRef(location.pathname);
-
-  useEffect(() => {
-    if (!isOpen && previousLocationPath.current !== location.pathname) {
-      setIsOpen(checkHasActiveItem(item, location.pathname, path));
-    }
-    previousLocationPath.current = location.pathname;
-  }, [isOpen, item, path, location.pathname]);
-
-  return [isOpen, setIsOpen] as const;
-};

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

@@ -1,38 +0,0 @@
-import { matchPath } from "react-router-dom";
-import type {
-  HrefNavigationCategoryItem,
-  PathNavigationCategoryItem,
-} from "../../core/DevPortalContext.js";
-import {
-  traverseNavigationNode,
-  type NavigationNode,
-} from "../../util/traverseNavigation.js";
-
-export const isPathItem = (
-  item: NavigationNode,
-): item is PathNavigationCategoryItem => "path" in item;
-
-export const isLinkItem = (
-  item: NavigationNode,
-): item is HrefNavigationCategoryItem => "href" in item;
-
-/**
- * Recursively checks if the current item or any of its children are active.
- */
-export const checkHasActiveItem = (
-  item: NavigationNode,
-  locationPath: string,
-  basePath: string,
-) => {
-  return Boolean(
-    traverseNavigationNode(
-      item,
-      (node, fullPath) => {
-        if (isPathItem(node) && matchPath(fullPath, locationPath)) {
-          return true;
-        }
-      },
-      basePath,
-    ),
-  );
-};

package/src/lib/core/helmet.ts

@@ -1,5 +0,0 @@
-import * as helmet from "react-helmet-async";
-
-export const Helmet = helmet.Helmet;
-export const HelmetData = helmet.HelmetData;
-export const HelmetProvider = helmet.HelmetProvider;

package/src/lib/core/icons.tsx

@@ -1 +0,0 @@
-export * from "lucide-react";

package/src/lib/core/router.tsx

@@ -1 +0,0 @@
-export * from "react-router-dom";

package/src/lib/plugins/index.ts

@@ -1,4 +0,0 @@
-export { apiKeyPlugin } from "./api-key/index.js";
-export { markdownPlugin } from "./markdown/index.js";
-export { openApiPlugin } from "./openapi/index.js";
-export { redirectPlugin } from "./redirect/index.js";

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

@@ -1,63 +0,0 @@
-import { graphql } from "./graphql/index.js";
-import { useOasConfig } from "./index.js";
-import type { OperationListItemResult } from "./OperationList.js";
-import { Playground } from "./playground/Playground.js";
-
-import { useQuery } from "urql";
-
-const GetServerQuery = graphql(/* GraphQL */ `
-  query getServerQuery($input: JSON!, $type: SchemaType!) {
-    schema(input: $input, type: $type) {
-      url
-    }
-  }
-`);
-
-export const MakeRequest = ({
-  operation,
-}: {
-  operation: OperationListItemResult;
-}) => {
-  const variables = useOasConfig();
-  const [server] = useQuery({ query: GetServerQuery, variables });
-
-  const headers = operation.parameters
-    ?.filter((p) => p.in === "header")
-    .map((p) => ({
-      name: p.name,
-      value: p.examples?.find((x) => x.value)?.value ?? "",
-    }));
-  const queryParams = operation.parameters
-    ?.filter((p) => p.in === "query")
-    .sort((a, b) => (a.required && !b.required ? -1 : 1))
-    .map((p) => {
-      return {
-        name: p.name,
-        value: "",
-        active: p.required ?? false,
-        isRequired: p.required ?? false,
-      };
-    });
-  const pathParams = operation.parameters
-    ?.filter((p) => p.in === "path")
-    .map((p) => ({
-      name: p.name,
-      value: "",
-    }));
-
-  const hasParams =
-    operation.parameters?.some((p) => p.in === "query" || p.in === "path") ??
-    false;
-
-  return (
-    <Playground
-      host={server.data?.schema.url ?? ""}
-      method={operation.method}
-      url={operation.path}
-      headers={headers}
-      queryParams={queryParams}
-      pathParams={pathParams}
-      hasParams={hasParams}
-    />
-  );
-};

package/src/lib/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/lib/plugins/openapi/worker/shared-worker.ts

@@ -1,5 +0,0 @@
-export function createSharedWorker() {
-  return new SharedWorker(new URL("./worker.ts", import.meta.url), {
-    type: "module",
-  });
-}

package/src/lib/ui/button-variants.ts

@@ -1,31 +0,0 @@
-import { cva } from "class-variance-authority";
-
-export const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
-  {
-    variants: {
-      variant: {
-        default:
-          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-        outline:
-          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-        secondary:
-          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
-        icon: "h-9 w-9",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  },
-);

package/src/lib/util/traverseNavigation.ts

@@ -1,55 +0,0 @@
-import { isPathItem } from "../components/navigation/util.js";
-import type {
-  NavigationCategory,
-  NavigationCategoryItem,
-  NavigationItem,
-} from "../core/DevPortalContext.js";
-import { joinPath } from "./joinPath.js";
-
-export type NavigationNode = NavigationCategoryItem | NavigationCategory;
-type Callback<T> = (
-  node: NavigationNode,
-  fullPath: string,
-  parentNodes: NavigationNode[],
-) => T | undefined;
-
-export const traverseNavigationNode = <T>(
-  node: NavigationNode,
-  callback: Callback<T>,
-  parentPath: string,
-  parentNodes: NavigationNode[] = [],
-): T | undefined => {
-  const newPath = isPathItem(node)
-    ? joinPath(parentPath, node.path)
-    : parentPath;
-  const result = callback(node, newPath, parentNodes);
-
-  if (result !== undefined) return result;
-
-  if ("children" in node && node.children) {
-    const newParentNodes = [...parentNodes, node];
-    for (const child of node.children) {
-      const childResult = traverseNavigationNode(
-        child,
-        callback,
-        newPath,
-        newParentNodes,
-      );
-      if (childResult !== undefined) return childResult;
-    }
-  }
-  return undefined;
-};
-
-export const traverseNavigation = <T>(
-  navItem: NavigationItem,
-  callback: Callback<T>,
-): T | undefined => {
-  if (navItem.categories) {
-    for (const category of navItem.categories) {
-      const result = traverseNavigationNode(category, callback, navItem.path);
-      if (result !== undefined) return result;
-    }
-  }
-  return undefined;
-};