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

package/src/{app → lib}/components/Layout.tsx

@@ -3,20 +3,16 @@ import { Outlet, useLocation } from "react-router-dom";
 import { Helmet } from "../core/helmet.js";
 import { useScrollToAnchor } from "../util/useScrollToAnchor.js";
 import { useScrollToTop } from "../util/useScrollToTop.js";
-import { Header } from "./Header.js";
 import { useDevPortal } from "./context/DevPortalProvider.js";
 import { useViewportAnchor } from "./context/ViewportAnchorContext.js";
+import { Header } from "./Header.js";
 import { SideNavigation } from "./navigation/SideNavigation.js";
-import { SideNavigationWrapper } from "./navigation/SideNavigationWrapper.js";
+import { Spinner } from "./Spinner.js";
 
 export const Layout = ({ children }: { children?: ReactNode }) => {
   const location = useLocation();
   const { setActiveAnchor } = useViewportAnchor();
-  const { meta, handleAuthenticationResponse } = useDevPortal();
-
-  useEffect(() => {
-    void handleAuthenticationResponse(location);
-  }, [handleAuthenticationResponse, location]);
+  const { meta } = useDevPortal();
 
   useScrollToAnchor();
   useScrollToTop();
@@ -41,15 +37,25 @@ export const Layout = ({ children }: { children?: ReactNode }) => {
         {meta?.favicon && <link rel="icon" href={meta.favicon} />}
       </Helmet>
       <Header />
-      <div className="max-w-screen-2xl mx-auto pt-[--header-height] px-10 lg:px-12">
+
+      <div className="max-w-screen-2xl mx-auto pt-[--header-height] px-10 lg:px-12 h-full">
         <Suspense
-          fallback={<SideNavigationWrapper>Loading...</SideNavigationWrapper>}
+          fallback={
+            <div className="grid h-full place-items-center">
+              <Spinner />
+            </div>
+          }
         >
           <SideNavigation />
+          <main
+            className="dark:border-white/10 translate-x-0
+          lg:overflow-visible
+          lg:peer-data-[navigation=true]:w-[calc(100%-var(--side-nav-width))]
+          lg:peer-data-[navigation=true]:translate-x-[--side-nav-width] peer-data-[navigation=true]:pl-12"
+          >
+            {children ?? <Outlet />}
+          </main>
         </Suspense>
-        <main className="dark:border-white/10 lg:overflow-visible translate-x-0 lg:w-[calc(100%-var(--side-nav-width))] lg:translate-x-[--side-nav-width] pl-12">
-          {children ?? <Outlet />}
-        </main>
       </div>
     </>
   );

package/src/lib/components/Link.tsx

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

package/src/lib/components/Router.tsx

@@ -0,0 +1,28 @@
+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/Select.tsx

@@ -0,0 +1,157 @@
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
+import * as React from "react";
+import { cn } from "../util/cn.js";
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+      className,
+    )}
+    {...props}
+  >
+    <span className="truncate">{children}</span>
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="flex-shrink-0 h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className,
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className,
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className,
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+    {...props}
+  />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+};

package/src/lib/components/Spinner.tsx

@@ -0,0 +1,5 @@
+import { LoaderCircle } from "lucide-react";
+
+export const Spinner = ({ size = 16 }: { size?: number }) => (
+  <LoaderCircle size={size} className="animate-spin" />
+);

package/src/{app → lib}/components/SyntaxHighlight.tsx

@@ -32,6 +32,7 @@ type SyntaxHighlightProps = {
   noBackground?: boolean;
   wrapLines?: boolean;
   copyable?: boolean;
+  showLanguageIndicator?: boolean;
 } & Omit<HighlightProps, "children">;
 
 export const SyntaxHighlight = ({
@@ -41,6 +42,10 @@ export const SyntaxHighlight = ({
   const [isDark] = useTheme();
   const [isCopied, setIsCopied] = useState(false);
 
+  if (!props.code) {
+    return null;
+  }
+
   return (
     <Highlight theme={isDark ? themes.vsDark : themes.github} {...props}>
       {({ className, style, tokens, getLineProps, getTokenProps }) => (
@@ -77,9 +82,11 @@ export const SyntaxHighlight = ({
               )}
             </button>
           )}
-          <span className="absolute top-1.5 right-3 text-[11px] font-mono text-muted-foreground transition group-hover:opacity-0">
-            {props.language}
-          </span>
+          {props.showLanguageIndicator && (
+            <span className="absolute top-1.5 right-3 text-[11px] font-mono text-muted-foreground transition group-hover:opacity-0">
+              {props.language}
+            </span>
+          )}
           {tokens.map((line, i) => (
             <div key={i} {...getLineProps({ line })}>
               {line.map((token, key) => (

package/src/{app → lib}/components/context/DevPortalProvider.ts

@@ -23,7 +23,7 @@ export const useApiIdentities = () => {
   const { getApiIdentities } = useDevPortal();
   return useSuspenseQuery({
     queryFn: getApiIdentities,
-    queryKey: ["api-keys"],
+    queryKey: ["api-identities"],
   });
 };
 

package/src/lib/components/index.ts

@@ -0,0 +1,3 @@
+export { useMDXComponents } from "@mdx-js/react";
+export { DevPortal } from "./DevPortal.js";
+export { Link } from "./Link.js";

package/src/{app → lib}/components/navigation/SideNavigation.tsx

@@ -9,7 +9,10 @@ export const SideNavigation = () => {
   const navigation = useNavigation();
 
   return (
-    <SideNavigationWrapper ref={navRef}>
+    <SideNavigationWrapper
+      ref={navRef}
+      pushMainContent={navigation.data.items.length > 0}
+    >
       {navigation.data.items.map((category) => (
         <SideNavigationCategory key={category.label} category={category} />
       ))}

package/src/{app → lib}/components/navigation/SideNavigationCategory.tsx

@@ -36,7 +36,7 @@ export const SideNavigationCategory = ({
       open={isOpen}
       onOpenChange={() => setIsOpen((prev) => !prev)}
     >
-      {category.label.length > 0 && (
+      {category.label.length > 0 ? (
         <Collapsible.Trigger asChild={isCollapsible} disabled={!isCollapsible}>
           <h5
             className={cn(
@@ -53,6 +53,8 @@ export const SideNavigationCategory = ({
             )}
           </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 */}

package/src/{app → lib}/components/navigation/SideNavigationItem.tsx

@@ -11,11 +11,10 @@ import type {
 import { cn } from "../../util/cn.js";
 import { joinPath } from "../../util/joinPath.js";
 import { AnchorLink } from "../AnchorLink.js";
-import { DynamicIcon, isValidIcon } from "../DynamicIcon.js";
 import { useNavigationCollapsibleState } from "./useNavigationCollapsibleState.js";
 import { checkHasActiveItem, isLinkItem, isPathItem } from "./util.js";
 
-export const linkItem = cva(
+export const navigationListItem = cva(
   "flex px-[--padding-nav-item] py-1.5 rounded-lg hover:bg-accent transition-colors duration-300",
   {
     variants: {
@@ -23,6 +22,10 @@ export const linkItem = cva(
         true: "text-primary font-medium",
         false: "text-foreground/80",
       },
+      isMuted: {
+        true: "text-foreground/30",
+        false: "",
+      },
     },
   },
 );
@@ -54,7 +57,9 @@ export const SideNavigationItem = ({
   if (isLinkItem(item)) {
     const classes = cn(
       "flex items-center gap-2",
-      linkItem({ isActive: item.href === location.pathname }),
+      navigationListItem({
+        isActive: item.href === location.pathname,
+      }),
     );
     return item.href.startsWith("http") ? (
       <a
@@ -76,7 +81,7 @@ export const SideNavigationItem = ({
   const linkContent = (
     <div className="flex justify-between w-full">
       <div className="flex items-center gap-2 truncate w-full">
-        {isValidIcon(item.icon) && <DynamicIcon name={item.icon} size={16} />}
+        {item.icon}
         {typeof item.label !== "string" ? (
           item.label
         ) : (
@@ -101,7 +106,10 @@ export const SideNavigationItem = ({
           className="flex flex-col"
         >
           <Collapsible.Trigger
-            className={cn("group text-start", linkItem({ isActive: false }))}
+            className={cn(
+              "group text-start",
+              navigationListItem({ isActive: false }),
+            )}
           >
             {linkContent}
           </Collapsible.Trigger>
@@ -124,15 +132,16 @@ export const SideNavigationItem = ({
         <AnchorLink
           to={item.path}
           {...{ [DATA_ANCHOR_ATTR]: item.path }}
-          className={linkItem({
+          className={navigationListItem({
             isActive: item.path.slice(1) === activeAnchor,
+            isMuted: item.muted,
           })}
         >
           {linkContent}
         </AnchorLink>
       ) : (
         <NavLink
-          className={({ isActive }) => linkItem({ isActive })}
+          className={({ isActive }) => navigationListItem({ isActive })}
           to={currentPath}
         >
           {linkContent}

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

@@ -0,0 +1,24 @@
+import { forwardRef, type PropsWithChildren } from "react";
+import { cn } from "../../util/cn.js";
+
+export const SideNavigationWrapper = forwardRef<
+  HTMLDivElement,
+  PropsWithChildren<{ pushMainContent?: boolean; className?: string }>
+>(function SideNavigation({ children, className, pushMainContent }, ref) {
+  return (
+    <nav
+      // this data attribute is used in `Layout.tsx` to determine if side navigation
+      // is present for the current page so the main content is pushed to the right
+      // it's also important to set `peer` class here.
+      // maybe this could be simplified by adjusting the layout
+      data-navigation={String(pushMainContent)}
+      className={cn(
+        "peer hidden lg:flex flex-col fixed text-sm overflow-y-auto shrink-0 p-[--padding-nav-item] -mx-[--padding-nav-item] pb-20 pt-[--padding-content-top] w-[--side-nav-width] h-[calc(100%-var(--header-height))] scroll-pt-2 gap-2",
+        className,
+      )}
+      ref={ref}
+    >
+      {children}
+    </nav>
+  );
+});

package/src/{app → lib}/core/DevPortalContext.ts

@@ -1,29 +1,30 @@
 import { QueryClient } from "@tanstack/react-query";
 import { type ReactNode } from "react";
 import { create } from "zustand";
-import { type DevPortalPath, type DevPortalProps } from "../DevPortal.js";
-import { type AuthProvider } from "../authentication/authentication.js";
+import { type AuthenticationProvider } from "../authentication/authentication.js";
 import {
-  isApiKeyPlugin,
+  type DevPortalPath,
+  type DevPortalProps,
+} from "../components/DevPortal.js";
+import {
+  isApiIdentityPlugin,
   isNavigationPlugin,
   needsInitialization,
   type DevPortalPlugin,
   type NavigationPlugin,
 } from "./plugins.js";
 
-import type { LucideIcon } from "lucide-react";
-import type { IconName } from "../components/DynamicIcon.js";
-
 export interface ApiIdentity {
   authorizeRequest: (request: Request) => Request;
-  name: string;
+  label: string;
   id: string;
 }
 
 type BaseNavigationCategoryItem = {
   label: ReactNode;
   title?: string;
-  icon?: ReactNode | IconName;
+  muted?: boolean;
+  icon?: ReactNode;
 };
 
 export type PathNavigationCategoryItem = BaseNavigationCategoryItem & {
@@ -44,7 +45,7 @@ export type NavigationCategory = {
   path?: string;
   expanded?: boolean;
   collapsible?: boolean;
-  icon?: LucideIcon;
+  icon?: ReactNode;
   children: NavigationCategoryItem[];
 };
 
@@ -54,26 +55,13 @@ export type NavigationItem = {
   categories?: NavigationCategory[];
 };
 
-export type SessionProfileState = {
-  isLoggedIn: boolean;
-  sub?: string;
-  email?: string;
-  name?: string;
-  email_verified?: string;
-  picture?: string;
-};
-
 export type RoutingState = {
   path?: string;
 };
 
 export const queryClient = new QueryClient();
 
-export const useDevPortalState = create<SessionProfileState & RoutingState>(
-  () => ({
-    isLoggedIn: false,
-  }),
-);
+export const useRoutingState = create<RoutingState>(() => ({}));
 
 export type ApiKeyCache = "api-keys";
 export type DevPortalCacheKey = ApiKeyCache | string;
@@ -84,67 +72,38 @@ export class DevPortalContext {
 
   public navigation: NavigationItem[];
   public meta: DevPortalProps["meta"];
-  public authentication?: AuthProvider;
-  public state: typeof useDevPortalState;
+  public authentication?: AuthenticationProvider;
+  public state: typeof useRoutingState;
 
-  constructor(private config: DevPortalProps) {
+  constructor(config: DevPortalProps) {
     this.plugins = config.plugins ?? [];
     this.navigation = config.navigation;
     this.navigationPlugins = this.plugins.filter(isNavigationPlugin);
     this.authentication = config.authentication;
     this.meta = config.meta;
-    this.state = useDevPortalState;
+    this.state = useRoutingState;
   }
 
   initialize = async () => {
     this.plugins
       .filter(needsInitialization)
       .forEach((plugin) => plugin.initialize(this));
-    this.authentication?.initialize(this);
-  };
-
-  setUserProfile = async (profile: Partial<SessionProfileState>) => {
-    return useDevPortalState.setState(profile);
   };
 
   invalidateCache = async (key: DevPortalCacheKey[]) => {
-    queryClient.invalidateQueries({ queryKey: key });
+    await queryClient.invalidateQueries({ queryKey: key });
   };
 
   getApiIdentities = async () => {
     const keys = await Promise.all(
       this.plugins
-        .filter(isApiKeyPlugin)
+        .filter(isApiIdentityPlugin)
         .map((plugin) => plugin.getIdentities(this)),
     );
 
     return keys.flat();
   };
 
-  login = async () => {
-    if (!this.authentication) {
-      throw new Error("No authentication configured");
-    }
-
-    return this.authentication.login(this);
-  };
-
-  logout = async () => {
-    if (!this.authentication) {
-      throw new Error("No authentication configured");
-    }
-
-    return this.authentication.signOut(this);
-  };
-
-  handleAuthenticationResponse = async (path: {
-    pathname: string;
-    search: string;
-    hash: string;
-  }) => {
-    this.config.authentication?.handleAuthenticationResponse?.(path, this);
-  };
-
   getNavigation = async (path: string) => {
     const navigations = await Promise.all(
       this.navigationPlugins.map(async (plugin) =>
@@ -155,10 +114,15 @@ export class DevPortalContext {
     return navigations.flatMap((nav) => nav ?? []);
   };
 
-  sessionStorage = {
-    get: async (key: string) => localStorage.getItem(`session-${key}`) ?? "",
-    setProfile: async () => {},
-    set: async (key: string, value: string) =>
-      localStorage.setItem(`session-${key}`, value),
-  };
+  async signRequest(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/{app → lib}/core/plugins.ts

@@ -4,15 +4,15 @@ import {
   type ApiIdentity,
   type NavigationCategory,
 } from "./DevPortalContext.js";
-import { type Combine } from "./types/combine.js";
 
 export type PluginNavigationCategory = {
   path: string;
 } & NavigationCategory;
 
-export type DevPortalPlugin = Combine<
-  [NavigationPlugin, ApiIdentityPlugin, InitializationPlugin]
->;
+export type DevPortalPlugin =
+  | NavigationPlugin
+  | ApiIdentityPlugin
+  | InitializationPlugin;
 
 export interface NavigationPlugin {
   getRoutes: () => RouteObject[];
@@ -37,7 +37,7 @@ export const needsInitialization = (
 ): obj is InitializationPlugin =>
   "initialize" in obj && typeof obj.initialize === "function";
 
-export const isApiKeyPlugin = (
+export const isApiIdentityPlugin = (
   obj: DevPortalPlugin,
 ): obj is ApiIdentityPlugin =>
   "getIdentities" in obj && typeof obj.getIdentities === "function";

package/src/{app → lib}/oas/graphql/index.ts

@@ -69,7 +69,7 @@ const getAllOperations = (paths?: PathsObject, tag?: string) => {
       if (!value?.[method]) return [];
 
       const operation = value[method] as OperationObject;
-      const pathParameters = value?.parameters ?? [];
+      const pathParameters = value.parameters ?? [];
       const operationParameters = operation.parameters ?? [];
 
       // parameters are inherited from the parent path object,
@@ -189,7 +189,7 @@ const ParameterItem = builder
         resolve: (parent) =>
           Object.entries(parent.examples ?? {}).map(([name, value]) => ({
             name,
-            ...value,
+            ...(typeof value === "string" ? { value } : value),
           })),
         nullable: true,
       }),