zudoku 0.0.0-ff3751f → 0.0.0-fix-display-option-navigation-items.4bdfe991

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

@@ -1,11 +1,13 @@
 import { useQuery, useSuspenseQuery } from "@tanstack/react-query";
 import { createContext, useContext } from "react";
-import { matchPath, useLocation } from "react-router-dom";
-import { DevPortalContext } from "../../core/DevPortalContext.js";
-import { joinPath } from "../../util/joinPath.js";
-import { traverseSidebar } from "../navigation/utils.js";
+import { matchPath, useLocation } from "react-router";
+import { type NavigationItem } from "../../../config/validators/NavigationSchema.js";
+import type { ZudokuContext } from "../../core/ZudokuContext.js";
+import { joinUrl } from "../../util/joinUrl.js";
+import { CACHE_KEYS } from "../cache.js";
+import { traverseNavigation } from "../navigation/utils.js";
 
-export const ZudokuReactContext = createContext<DevPortalContext | undefined>(
+export const ZudokuReactContext = createContext<ZudokuContext | undefined>(
   undefined,
 );
 
@@ -13,7 +15,7 @@ export const useZudoku = () => {
   const context = useContext(ZudokuReactContext);
 
   if (!context) {
-    throw new Error("useDevPortal must be used within a DevPortalProvider.");
+    throw new Error("useZudoku must be used within a ZudokuProvider.");
   }
 
   return context;
@@ -21,46 +23,85 @@ export const useZudoku = () => {
 
 export const useApiIdentities = () => {
   const { getApiIdentities } = useZudoku();
+
   return useQuery({
     queryFn: getApiIdentities,
-    queryKey: ["api-identities"],
+    queryKey: CACHE_KEYS.API_IDENTITIES,
   });
 };
 
+const getItemPath = (item: NavigationItem) => {
+  switch (item.type) {
+    case "doc":
+      return joinUrl(item.path);
+    case "category":
+      return item.link ? joinUrl(item.link.path) : undefined;
+    case "link":
+      return item.to;
+    case "custom-page":
+      return item.path;
+    default:
+      return undefined;
+  }
+};
+
+const extractAllPaths = (items: NavigationItem[]) => {
+  const paths = new Set<string>();
+
+  const collectPaths = (items: NavigationItem[]) => {
+    for (const item of items) {
+      const itemPath = getItemPath(item)?.split("?").at(0)?.split("#").at(0);
+
+      if (itemPath) paths.add(itemPath);
+      if (item.type === "category") {
+        collectPaths(item.items);
+      }
+    }
+  };
+  collectPaths(items);
+
+  return [...paths];
+};
+
 export const useCurrentNavigation = () => {
-  const { getPluginSidebar, sidebars, topNavigation } = useZudoku();
+  const { getPluginNavigation, navigation } = useZudoku();
   const location = useLocation();
 
-  const currentSidebarItem = Object.entries(sidebars).find(([, sidebar]) => {
-    return traverseSidebar(sidebar, (item) => {
-      const itemId =
-        item.type === "doc"
-          ? joinPath(item.id)
-          : item.type === "category" && item.link
-            ? joinPath(item.link.id)
-            : undefined;
-
-      if (itemId === location.pathname) {
-        return item;
-      }
-    });
+  const navItem = traverseNavigation(navigation, (item, parentCategories) => {
+    if (getItemPath(item) === location.pathname) {
+      return parentCategories.at(0) ?? item;
+    }
   });
-  const currentTopNavItem =
-    topNavigation.find((t) => t.id === currentSidebarItem?.[0]) ??
-    topNavigation.find((item) => matchPath(item.id, location.pathname));
-
-  return useSuspenseQuery({
-    queryFn: async () => {
-      const pluginSidebar = await getPluginSidebar(location.pathname);
-
-      return {
-        sidebar: [
-          ...(currentSidebarItem ? currentSidebarItem[1] : []),
-          ...pluginSidebar,
-        ],
-        topNavItem: currentTopNavItem,
-      };
-    },
-    queryKey: ["navigation", location.pathname],
+
+  const { data } = useSuspenseQuery({
+    queryFn: () => getPluginNavigation(location.pathname),
+    queryKey: ["plugin-navigation", location.pathname],
   });
+
+  let topNavItem = navItem;
+  if (!navItem && data.length > 0) {
+    const pluginBasePaths = extractAllPaths(data);
+
+    topNavItem = navigation
+      .flatMap((item) => {
+        const itemPath = getItemPath(item);
+        return itemPath ? [{ item, path: itemPath }] : [];
+      })
+      .sort((a, b) => b.path.length - a.path.length)
+      .find(({ path }) => {
+        return pluginBasePaths.some(
+          (basePath) =>
+            matchPath({ path, end: false }, basePath) ??
+            matchPath({ path: basePath, end: false }, path),
+        );
+      })?.item;
+  }
+
+  return {
+    navigation: [
+      ...(navItem?.type === "category" ? navItem.items : []),
+      ...data,
+    ],
+    topNavItem,
+  };
 };

package/src/lib/components/context/ZudokuProvider.tsx

@@ -1,18 +1,19 @@
 import { useSuspenseQuery } from "@tanstack/react-query";
 import type { PropsWithChildren } from "react";
-import { DevPortalContext } from "../../core/DevPortalContext.js";
+import { type ZudokuContext } from "../../core/ZudokuContext.js";
+import { NO_DEHYDRATE } from "../cache.js";
 import { ZudokuReactContext } from "./ZudokuContext.js";
 
 export const ZudokuProvider = ({
   children,
   context,
-}: PropsWithChildren<{ context: DevPortalContext }>) => {
+}: PropsWithChildren<{ context: ZudokuContext }>) => {
   useSuspenseQuery({
     queryFn: async () => {
       await context.initialize();
       return true;
     },
-    queryKey: ["zudoku-initialize"],
+    queryKey: ["zudoku-initialize", NO_DEHYDRATE],
   });
 
   return (

package/src/lib/components/index.ts

@@ -1,7 +1,9 @@
 import { useMDXComponents as useMDXComponentsImport } from "@mdx-js/react";
 import { Helmet } from "@zudoku/react-helmet-async";
-import { Link as LinkImport } from "react-router-dom";
-import { useAuthState } from "../authentication/state.js";
+import { useTheme as useThemeImport } from "next-themes";
+import { Link as LinkImport } from "react-router";
+import { useAuth as useAuthImport } from "../authentication/hook.js";
+import { RouteGuard as RouteGuardImport } from "../core/RouteGuard.js";
 import { RouterError as RouterErrorImport } from "../errors/RouterError.js";
 import { ServerError as ServerErrorImport } from "../errors/ServerError.js";
 import { Button as ButtonImport } from "../ui/Button.js";
@@ -10,25 +12,47 @@ import {
   Bootstrap as BootstrapImport,
   BootstrapStatic as BootstrapStaticImport,
 } from "./Bootstrap.js";
+import { BuildCheck as BuildCheckImport } from "./BuildCheck.js";
+import {
+  CACHE_KEYS as CACHE_KEYS_IMPORT,
+  useCache as useCacheImport,
+} from "./cache.js";
 import { ClientOnly as ClientOnlyImport } from "./ClientOnly.js";
-import { DevPortal as DevPortalImport } from "./DevPortal.js";
-import { Layout as LayoutImport } from "./Layout.js";
 import { useZudoku as useZudokuImport } from "./context/ZudokuContext.js";
-export const useMDXComponents = /*@__PURE__*/ useMDXComponentsImport;
-export const DevPortal = /*@__PURE__*/ DevPortalImport;
+import { Layout as LayoutImport } from "./Layout.js";
+import { Markdown as MarkdownImport } from "./Markdown.js";
+import { Spinner as SpinnerImport } from "./Spinner.js";
+import { StatusPage as StatusPageImport } from "./StatusPage.js";
+import { Typography as TypographyImport } from "./Typography.js";
+import { Zudoku as ZudokuImport } from "./Zudoku.js";
+
 export const Layout = /*@__PURE__*/ LayoutImport;
 export const RouterError = /*@__PURE__*/ RouterErrorImport;
 export const ServerError = /*@__PURE__*/ ServerErrorImport;
 export const Bootstrap = /*@__PURE__*/ BootstrapImport;
 export const BootstrapStatic = /*@__PURE__*/ BootstrapStaticImport;
-
+export const RouteGuard = /*@__PURE__*/ RouteGuardImport;
 export const Head = /*@__PURE__*/ Helmet;
-
-export const useZudoku = /*@__PURE__*/ useZudokuImport;
-export const useAuth = /*@__PURE__*/ useAuthState;
-export const Zudoku = /*@__PURE__*/ DevPortalImport;
-
+export const StatusPage = /*@__PURE__*/ StatusPageImport;
 export const Callout = /*@__PURE__*/ CalloutImport;
+export const Markdown = /*@__PURE__*/ MarkdownImport;
+export const Spinner = /*@__PURE__*/ SpinnerImport;
 export const ClientOnly = /*@__PURE__*/ ClientOnlyImport;
 export const Button = /*@__PURE__*/ ButtonImport;
-export const Link: typeof LinkImport = /*@__PURE__*/ LinkImport;
+export const Link = /*@__PURE__*/ LinkImport;
+export const BuildCheck = /*@__PURE__*/ BuildCheckImport;
+export const Zudoku = /*@__PURE__*/ ZudokuImport;
+export const Typography = /*@__PURE__*/ TypographyImport;
+
+/** @deprecated Import from `zudoku/hooks` instead */
+export const useMDXComponents = /*@__PURE__*/ useMDXComponentsImport;
+/** @deprecated Import from `zudoku/hooks` instead */
+export const useZudoku = /*@__PURE__*/ useZudokuImport;
+/** @deprecated Import from `zudoku/hooks` instead */
+export const useAuth = /*@__PURE__*/ useAuthImport;
+/** @deprecated Import from `zudoku/hooks` instead */
+export const useCache = /*@__PURE__*/ useCacheImport;
+/** @deprecated Import from `zudoku/hooks` instead */
+export const CACHE_KEYS = /*@__PURE__*/ CACHE_KEYS_IMPORT;
+/** @deprecated Import from `zudoku/hooks` instead */
+export const useTheme = /*@__PURE__*/ useThemeImport;

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

@@ -0,0 +1,50 @@
+import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
+import type { NavigationItem as NavigationItemType } from "../../../config/validators/NavigationSchema.js";
+import { DrawerContent, DrawerTitle } from "../../ui/Drawer.js";
+import { Slot } from "../Slot.js";
+import { NavigationItem } from "./NavigationItem.js";
+import { NavigationWrapper } from "./NavigationWrapper.js";
+
+export const Navigation = ({
+  onRequestClose,
+  navigation,
+}: {
+  onRequestClose?: () => void;
+  navigation: NavigationItemType[];
+}) => (
+  <>
+    <NavigationWrapper>
+      <Slot.Target name="navigation-before" />
+      {navigation.map((item) => (
+        <NavigationItem
+          key={
+            item.type +
+            (item.label ?? "") +
+            ("path" in item ? item.path : "") +
+            ("file" in item ? item.file : "") +
+            ("to" in item ? item.to : "")
+          }
+          item={item}
+        />
+      ))}
+      <Slot.Target name="navigation-after" />
+    </NavigationWrapper>
+    <DrawerContent
+      className="lg:hidden h-[100dvh] start-0 w-[320px] rounded-none"
+      aria-describedby={undefined}
+    >
+      <div className="p-4 overflow-y-auto overscroll-none">
+        <VisuallyHidden>
+          <DrawerTitle>Navigation</DrawerTitle>
+        </VisuallyHidden>
+        {navigation.map((item) => (
+          <NavigationItem
+            key={item.label}
+            item={item}
+            onRequestClose={onRequestClose}
+          />
+        ))}
+      </div>
+    </DrawerContent>
+  </>
+);

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

@@ -0,0 +1,48 @@
+import { cn } from "../../util/cn.js";
+
+export const ColorMap = {
+  green: "bg-green-400 dark:bg-green-800",
+  blue: "bg-sky-400 dark:bg-sky-800",
+  yellow: "bg-yellow-400 dark:bg-yellow-800",
+  red: "bg-red-400 dark:bg-red-800",
+  purple: "bg-purple-400 dark:bg-purple-600",
+  indigo: "bg-indigo-400 dark:bg-indigo-600",
+  gray: "bg-gray-400 dark:bg-gray-600",
+  outline: "border border-border rounded-md text-foreground",
+};
+
+export const ColorMapInvert = {
+  green: "text-green-500 dark:text-green-600",
+  blue: "text-sky-400 dark:text-sky-600",
+  yellow: "text-yellow-400 dark:text-yellow-600",
+  red: "text-red-400 dark:text-red-600",
+  purple: "text-purple-400 dark:text-purple-600",
+  indigo: "text-indigo-400 dark:text-indigo-600",
+  gray: "text-gray-400 dark:text-gray-600",
+  outline: "",
+};
+
+export const NavigationBadge = ({
+  color,
+  label,
+  className,
+  invert,
+}: {
+  color: keyof typeof ColorMap;
+  label: string;
+  className?: string;
+  invert?: boolean;
+}) => {
+  return (
+    <span
+      className={cn(
+        "flex items-center duration-200 transition-opacity text-center uppercase text-[0.65rem] leading-5 font-bold rounded-sm text-background dark:text-zinc-50 h-full",
+        color === "outline" ? "px-3" : "mt-0.5 px-1",
+        invert ? ColorMapInvert[color] : ColorMap[color],
+        className,
+      )}
+    >
+      {label}
+    </span>
+  );
+};

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

@@ -0,0 +1,146 @@
+import * as Collapsible from "@radix-ui/react-collapsible";
+import { deepEqual } from "fast-equals";
+import { ChevronRightIcon } from "lucide-react";
+import { memo, useEffect, useState } from "react";
+import { NavLink, useLocation, useMatch } from "react-router";
+import { Button } from "zudoku/ui/Button.js";
+import type { NavigationCategory as NavigationCategoryType } from "../../../config/validators/NavigationSchema.js";
+import { cn } from "../../util/cn.js";
+import { joinUrl } from "../../util/joinUrl.js";
+import { NavigationItem } from "./NavigationItem.js";
+import { navigationListItem, useIsCategoryOpen } from "./utils.js";
+
+const NavigationCategoryInner = ({
+  category,
+  onRequestClose,
+}: {
+  category: NavigationCategoryType;
+  onRequestClose?: () => void;
+}) => {
+  const isCategoryOpen = useIsCategoryOpen(category);
+  const [hasInteracted, setHasInteracted] = useState(false);
+  const location = useLocation();
+
+  const isCollapsible = category.collapsible ?? true;
+  const isCollapsed = category.collapsed ?? true;
+  const isDefaultOpen = Boolean(
+    !isCollapsible || !isCollapsed || isCategoryOpen,
+  );
+  const [open, setOpen] = useState(isDefaultOpen);
+  const isActive = useMatch(category.link?.path ?? "");
+
+  useEffect(() => {
+    // this is triggered when an item from the navigation is clicked
+    // and the navigation, enclosing this item, is not opened
+    if (isCategoryOpen) {
+      setOpen(true);
+    }
+  }, [isCategoryOpen]);
+
+  const ToggleButton = isCollapsible && (
+    <Button
+      onClick={(e) => {
+        e.preventDefault();
+        setOpen((prev) => !prev);
+        setHasInteracted(true);
+      }}
+      variant="ghost"
+      size="icon"
+      className="size-6 hover:bg-[hsl(from_hsl(var(--accent))_h_s_calc(l-5))] hover:dark:bg-[hsl(from_hsl(var(--accent))_h_s_calc(l+5))]"
+    >
+      <ChevronRightIcon
+        size={16}
+        className={cn(
+          hasInteracted && "transition",
+          "shrink-0 group-data-[state=open]:rotate-90 rtl:rotate-180",
+        )}
+      />
+    </Button>
+  );
+
+  const icon = category.icon && (
+    <category.icon
+      size={16}
+      className={cn("align-[-0.125em] ", isActive && "text-primary")}
+    />
+  );
+
+  const styles = navigationListItem({
+    className: [
+      "group text-start font-medium",
+      isCollapsible || typeof category.link !== "undefined"
+        ? "cursor-pointer"
+        : "cursor-default hover:bg-transparent",
+    ],
+  });
+
+  return (
+    <Collapsible.Root
+      className="flex flex-col"
+      defaultOpen={isDefaultOpen}
+      open={open}
+      onOpenChange={() => setOpen(true)}
+    >
+      <Collapsible.Trigger className="group" asChild disabled={!isCollapsible}>
+        {category.link?.type === "doc" ? (
+          <NavLink
+            to={{
+              pathname: joinUrl(category.link.path),
+              search: location.search,
+            }}
+            className={styles}
+            onClick={() => {
+              setHasInteracted(true);
+              // if it is the current path and closed then open it because there's no path change to trigger the open
+              if (isActive && !open) {
+                setOpen(true);
+              }
+            }}
+          >
+            {icon}
+            <div className="flex items-center gap-2 justify-between w-full text-foreground/80 group-aria-[current='page']:text-primary">
+              <div className="truncate">{category.label}</div>
+              {ToggleButton}
+            </div>
+          </NavLink>
+        ) : (
+          <div onClick={() => setHasInteracted(true)} className={styles}>
+            {icon}
+            <div className="flex items-center justify-between w-full">
+              <div className="flex gap-2 truncate w-full">{category.label}</div>
+              {ToggleButton}
+            </div>
+          </div>
+        )}
+      </Collapsible.Trigger>
+      <Collapsible.Content
+        className={cn(
+          // CollapsibleContent class is used to animate and it should only be applied when the user has triggered the toggle
+          hasInteracted && "CollapsibleContent",
+          category.items.length === 0 && "hidden",
+          "ms-6 my-1",
+        )}
+      >
+        <ul className="relative after:absolute after:-start-(--padding-nav-item) after:translate-x-[1.5px] after:top-0 after:bottom-0 after:w-px after:bg-border">
+          {category.items.map((item) => (
+            <NavigationItem
+              key={
+                item.type +
+                (item.label ?? "") +
+                ("path" in item ? item.path : "") +
+                ("file" in item ? item.file : "") +
+                ("to" in item ? item.to : "")
+              }
+              onRequestClose={onRequestClose}
+              item={item}
+            />
+          ))}
+        </ul>
+      </Collapsible.Content>
+    </Collapsible.Root>
+  );
+};
+
+export const NavigationCategory = memo(NavigationCategoryInner, deepEqual);
+
+NavigationCategory.displayName = "NavigationCategory";

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

@@ -0,0 +1,159 @@
+import { ExternalLinkIcon } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { NavLink, useLocation } from "react-router";
+import {
+  Tooltip,
+  TooltipArrow,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "zudoku/ui/Tooltip.js";
+import type { NavigationItem as NavigationItemType } from "../../../config/validators/NavigationSchema.js";
+import { useAuth } from "../../authentication/hook.js";
+import { cn } from "../../util/cn.js";
+import { joinUrl } from "../../util/joinUrl.js";
+import { AnchorLink } from "../AnchorLink.js";
+import { useViewportAnchor } from "../context/ViewportAnchorContext.js";
+import { useZudoku } from "../context/ZudokuContext.js";
+import { NavigationBadge } from "./NavigationBadge.js";
+import { NavigationCategory } from "./NavigationCategory.js";
+import { isHiddenItem, navigationListItem } from "./utils.js";
+
+const TruncatedLabel = ({
+  label,
+  className,
+}: {
+  label: string;
+  className?: string;
+}) => {
+  const ref = useRef<HTMLSpanElement>(null);
+  const [isTruncated, setIsTruncated] = useState(false);
+
+  useEffect(() => {
+    if (!ref.current) return;
+
+    if (ref.current.offsetWidth < ref.current.scrollWidth) {
+      setIsTruncated(true);
+    }
+  }, []);
+
+  return (
+    <>
+      <span
+        className={cn("truncate flex-1", className)}
+        title={label}
+        ref={ref}
+      >
+        {label}
+      </span>
+      {isTruncated && (
+        <TooltipProvider delayDuration={500}>
+          <Tooltip disableHoverableContent>
+            <TooltipTrigger className="absolute inset-0 z-10" />
+            <TooltipContent
+              className="max-w-64 rounded-lg"
+              side="bottom"
+              align="center"
+            >
+              <TooltipArrow />
+              {label}
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      )}
+    </>
+  );
+};
+
+export const DATA_ANCHOR_ATTR = "data-anchor";
+
+export const NavigationItem = ({
+  item,
+  onRequestClose,
+}: {
+  item: NavigationItemType;
+  onRequestClose?: () => void;
+}) => {
+  const location = useLocation();
+  const { activeAnchor } = useViewportAnchor();
+  const auth = useAuth();
+  const context = useZudoku();
+
+  if (!isHiddenItem(auth, context)(item)) {
+    return null;
+  }
+
+  switch (item.type) {
+    case "category":
+      return (
+        <NavigationCategory category={item} onRequestClose={onRequestClose} />
+      );
+    case "doc":
+      return (
+        <NavLink
+          viewTransition
+          className={({ isActive, isPending }) =>
+            navigationListItem({ isActive, isPending })
+          }
+          to={joinUrl(item.path)}
+          onClick={onRequestClose}
+          end
+        >
+          {item.icon && <item.icon size={16} className="align-[-0.125em]" />}
+          {item.badge ? (
+            <>
+              {item.label && (
+                <TruncatedLabel label={item.label} className="flex-1" />
+              )}
+              <NavigationBadge {...item.badge} />
+            </>
+          ) : (
+            item.label
+          )}
+        </NavLink>
+      );
+    case "link":
+    case "custom-page": {
+      const href = item.type === "link" ? item.to : item.path;
+      return !href.startsWith("http") ? (
+        <AnchorLink
+          to={{
+            pathname: href.split("#")[0],
+            hash: href.split("#")[1],
+            search: location.search,
+          }}
+          {...{ [DATA_ANCHOR_ATTR]: href.split("#")[1] }}
+          className={navigationListItem({
+            isActive: href === [location.pathname, activeAnchor].join("#"),
+          })}
+          onClick={onRequestClose}
+        >
+          {item.icon && <item.icon size={16} className="align-[-0.125em]" />}
+          {item.badge ? (
+            <>
+              {item.label && <TruncatedLabel label={item.label} />}
+              <NavigationBadge {...item.badge} />
+            </>
+          ) : (
+            <span className="break-all">{item.label}</span>
+          )}
+        </AnchorLink>
+      ) : (
+        <a
+          className={navigationListItem()}
+          href={href}
+          target="_blank"
+          rel="noopener noreferrer"
+          onClick={onRequestClose}
+        >
+          {item.icon && <item.icon size={16} className="align-[-0.125em]" />}
+          <span className="whitespace-normal">{item.label}</span>
+          {/* This prevents that the icon would be positioned in its own line if the text fills a line entirely */}
+          <span className="whitespace-nowrap">
+            <ExternalLinkIcon className="inline -translate-y-0.5" size={12} />
+          </span>
+        </a>
+      );
+    }
+  }
+};