@assistant-ui/docs-theme 0.0.2 → 0.0.3

package/src/site/footer.tsx

@@ -0,0 +1,59 @@
+import Link from "next/link";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import type { ReactNode } from "react";
+
+type FooterItem = {
+  name: ReactNode;
+  url: string;
+  section?: ReactNode;
+};
+
+type DocsFooterProps = {
+  previous?: FooterItem | undefined;
+  next?: FooterItem | undefined;
+};
+
+export function DocsFooter({ previous, next }: DocsFooterProps) {
+  if (!previous && !next) return null;
+
+  return (
+    <nav
+      aria-label="Previous and next page"
+      className="not-prose mt-16 flex items-center justify-between gap-4 text-sm"
+    >
+      {previous ? (
+        <Link
+          href={previous.url}
+          className="group text-muted-foreground hover:text-foreground inline-flex min-w-0 items-center gap-1.5 transition-colors"
+        >
+          <ChevronLeft className="size-4 shrink-0 transition-transform group-hover:-translate-x-0.5" />
+          <span className="min-w-0 truncate">
+            {previous.section ? (
+              <span className="opacity-60">{previous.section} / </span>
+            ) : null}
+            {previous.name}
+          </span>
+        </Link>
+      ) : (
+        <span />
+      )}
+
+      {next ? (
+        <Link
+          href={next.url}
+          className="group text-muted-foreground hover:text-foreground inline-flex min-w-0 items-center gap-1.5 transition-colors"
+        >
+          <span className="min-w-0 truncate">
+            {next.section ? (
+              <span className="opacity-60">{next.section} / </span>
+            ) : null}
+            {next.name}
+          </span>
+          <ChevronRight className="size-4 shrink-0 transition-transform group-hover:translate-x-0.5" />
+        </Link>
+      ) : (
+        <span />
+      )}
+    </nav>
+  );
+}

package/src/site/header.test.tsx

@@ -0,0 +1,89 @@
+// @vitest-environment jsdom
+
+import { act, Fragment, useState } from "react";
+import { createRoot } from "react-dom/client";
+import { expect, it, vi } from "vitest";
+import { DocsSiteHeader } from "./header";
+import { DocsSidebar, DocsSidebarProvider } from "./sidebar";
+
+function SidebarState() {
+  const [value, setValue] = useState(0);
+  return <button onClick={() => setValue(value + 1)}>Section {value}</button>;
+}
+
+it("keeps one sidebar mounted and closes the competing mobile menu", async () => {
+  vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+  vi.stubGlobal("matchMedia", () => ({
+    addEventListener() {},
+    removeEventListener() {},
+  }));
+  const container = document.createElement("div");
+  document.body.append(container);
+  const root = createRoot(container);
+  const button = (label: string) =>
+    container.querySelector<HTMLButtonElement>(
+      `button[aria-label="${label}"]`,
+    )!;
+  try {
+    await act(async () =>
+      root.render(
+        <DocsSidebarProvider>
+          <DocsSiteHeader
+            brand="Project"
+            mobileControls={null}
+            condensedNavigation={null}
+            desktopNavigation={null}
+            navigationRoot={Fragment}
+            scrolled={false}
+            mobileNavigation={(close) => (
+              <button aria-label="Navigate" onClick={close}>
+                Home
+              </button>
+            )}
+          />
+          <DocsSidebar>
+            <SidebarState />
+          </DocsSidebar>
+        </DocsSidebarProvider>,
+      ),
+    );
+    expect(button("Toggle sidebar").getAttribute("aria-controls")).toBe(
+      container.querySelector("aside")?.id,
+    );
+    const navigation = document.getElementById(
+      button("Site navigation").getAttribute("aria-controls")!,
+    );
+    expect(navigation?.hasAttribute("inert")).toBe(true);
+    await act(async () => button("Toggle sidebar").click());
+    expect(button("Toggle sidebar").getAttribute("aria-expanded")).toBe("true");
+    await act(async () =>
+      container.querySelector<HTMLButtonElement>("aside button")!.click(),
+    );
+    await act(async () => button("Site navigation").click());
+    expect(button("Site navigation").getAttribute("aria-expanded")).toBe(
+      "true",
+    );
+    expect(navigation?.hasAttribute("inert")).toBe(false);
+    expect(button("Toggle sidebar").getAttribute("aria-expanded")).toBe(
+      "false",
+    );
+    await act(async () => button("Toggle sidebar").click());
+    expect(button("Site navigation").getAttribute("aria-expanded")).toBe(
+      "false",
+    );
+    expect(container.querySelectorAll("aside")).toHaveLength(1);
+    expect(container.querySelector("aside button")?.textContent).toBe(
+      "Section 1",
+    );
+    await act(async () => button("Site navigation").click());
+    await act(async () => button("Navigate").click());
+    expect(button("Site navigation").getAttribute("aria-expanded")).toBe(
+      "false",
+    );
+    expect(document.activeElement).toBe(button("Site navigation"));
+  } finally {
+    await act(async () => root.unmount());
+    container.remove();
+    vi.unstubAllGlobals();
+  }
+});

package/src/site/header.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import {
+  useId,
+  useRef,
+  useState,
+  type ComponentType,
+  type ReactNode,
+} from "react";
+import { Menu, PanelLeft, X } from "lucide-react";
+import { DOCS_SIDEBAR_ID, useDocsSidebar } from "./sidebar";
+import { cn } from "./utils";
+
+export function DocsSiteHeader({
+  brand,
+  mobileControls,
+  condensedNavigation,
+  desktopNavigation,
+  mobileNavigation,
+  navigationRoot: NavigationRoot,
+  scrolled,
+}: {
+  brand: ReactNode;
+  mobileControls: ReactNode;
+  condensedNavigation: ReactNode;
+  desktopNavigation: ReactNode;
+  mobileNavigation: (close: () => void) => ReactNode;
+  navigationRoot: ComponentType<{ children: ReactNode }>;
+  scrolled: boolean;
+}) {
+  const {
+    open: sidebarOpen,
+    setOpen: setSidebarOpen,
+    toggle: toggleSidebar,
+  } = useDocsSidebar();
+  const [navMenuOpen, setNavMenuOpen] = useState(false);
+  const navMenuId = useId();
+  const navMenuToggle = useRef<HTMLButtonElement>(null);
+  const closeNavigation = () => {
+    setNavMenuOpen(false);
+    navMenuToggle.current?.focus();
+  };
+  const toggleNavigation = () => {
+    if (!navMenuOpen) setSidebarOpen(false);
+    setNavMenuOpen((open) => !open);
+  };
+  const toggleMenu = () => {
+    if (!sidebarOpen) setNavMenuOpen(false);
+    toggleSidebar();
+  };
+  return (
+    <header className="sticky top-0 z-50">
+      <NavigationRoot>
+        <div
+          className={cn(
+            "relative z-10 transition-colors duration-200",
+            scrolled ? "bg-background/80 backdrop-blur-md" : "bg-transparent",
+            "group-data-[menu-open=true]:bg-background",
+            "flex h-12 w-full items-center px-4",
+          )}
+        >
+          <div className="flex min-w-0 flex-1 items-center">{brand}</div>
+          <div className="ml-auto flex shrink-0 items-center gap-1 md:hidden">
+            {mobileControls}
+            <button
+              type="button"
+              ref={navMenuToggle}
+              onClick={toggleNavigation}
+              className="text-muted-foreground hover:text-foreground flex size-8 items-center justify-center transition-colors"
+              aria-label="Site navigation"
+              aria-expanded={navMenuOpen}
+              aria-controls={navMenuId}
+            >
+              {navMenuOpen ? (
+                <X className="size-4" />
+              ) : (
+                <Menu className="size-4" />
+              )}
+            </button>
+            <button
+              type="button"
+              onClick={toggleMenu}
+              className="text-muted-foreground hover:text-foreground flex size-8 items-center justify-center transition-colors"
+              aria-label="Toggle sidebar"
+              aria-expanded={sidebarOpen}
+              aria-controls={DOCS_SIDEBAR_ID}
+            >
+              {sidebarOpen ? (
+                <X className="size-4" />
+              ) : (
+                <PanelLeft className="size-4" />
+              )}
+            </button>
+          </div>
+          <div className="ml-auto hidden items-center gap-4 md:flex lg:hidden">
+            {condensedNavigation}
+          </div>
+          <div className="ml-auto hidden items-center gap-4 lg:flex">
+            {desktopNavigation}
+          </div>
+        </div>
+        <div
+          className={cn(
+            "bg-background fixed inset-x-0 top-12 bottom-0 z-40 transition-opacity duration-200 md:hidden",
+            navMenuOpen ? "opacity-100" : "pointer-events-none opacity-0",
+          )}
+          id={navMenuId}
+          inert={!navMenuOpen}
+        >
+          <div className="flex h-full flex-col gap-1 overflow-y-auto px-4 pt-4">
+            {mobileNavigation(closeNavigation)}
+          </div>
+        </div>
+      </NavigationRoot>
+    </header>
+  );
+}

package/src/site/layout.tsx

@@ -0,0 +1,33 @@
+import type { ReactNode } from "react";
+import { DOCS_SIDEBAR_WIDTH } from "./constants";
+
+export function DocsShell({ children }: { children: ReactNode }): ReactNode {
+  return (
+    <div
+      className="docs-shell"
+      style={
+        {
+          "--sidebar-width": `${DOCS_SIDEBAR_WIDTH}px`,
+        } as React.CSSProperties
+      }
+    >
+      {children}
+    </div>
+  );
+}
+
+export function DocsContent({ children }: { children: ReactNode }): ReactNode {
+  return (
+    <div
+      data-docs-content=""
+      className="@container md:ml-(--sidebar-width)"
+      style={
+        {
+          "--sidebar-width": `${DOCS_SIDEBAR_WIDTH}px`,
+        } as React.CSSProperties
+      }
+    >
+      {children}
+    </div>
+  );
+}

package/src/site/page.tsx

@@ -0,0 +1,38 @@
+import type { ComponentProps, ReactNode } from "react";
+import { cn } from "./utils";
+
+export function DocsPageShell({
+  toc,
+  footer,
+  children,
+  mainProps,
+}: {
+  toc?: ReactNode;
+  footer?: ReactNode;
+  children: ReactNode;
+  mainProps?: Omit<ComponentProps<"main">, "children">;
+}) {
+  return (
+    <div className="docs-layout">
+      <main
+        {...mainProps}
+        className={cn(
+          "mx-auto w-full max-w-(--docs-article-width) justify-self-center px-4 pt-4 pb-10 md:px-6",
+          mainProps?.className,
+        )}
+      >
+        {children}
+      </main>
+      {toc}
+      {footer && (
+        <footer className="mx-auto w-full max-w-(--docs-article-width) justify-self-center px-4 pb-10 md:px-6">
+          <div className="border-t pt-6">{footer}</div>
+        </footer>
+      )}
+    </div>
+  );
+}
+
+export function DocsBody({ className, ...props }: ComponentProps<"article">) {
+  return <article {...props} className={cn("docs-prose prose", className)} />;
+}

package/src/site/pager.tsx

@@ -0,0 +1,54 @@
+import Link from "next/link";
+import type { ReactNode } from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+const pagerLabel = (direction: "Previous" | "Next", name: ReactNode) =>
+  typeof name === "string" && name !== ""
+    ? `${direction}: ${name}`
+    : `${direction} page`;
+
+export function DocsPagerNavigation({
+  previous,
+  next,
+  children,
+}: {
+  previous?: { url: string; name?: ReactNode } | undefined;
+  next?: { url: string; name?: ReactNode } | undefined;
+  children?: ReactNode;
+}) {
+  const buttonClass =
+    "flex size-7 items-center justify-center rounded-md bg-muted/50 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground sm:size-8";
+  const disabledClass =
+    "flex size-7 items-center justify-center rounded-md bg-muted/30 text-muted-foreground/40 cursor-not-allowed sm:size-8";
+  return (
+    <div className="flex items-center gap-1">
+      {previous ? (
+        <Link
+          href={previous.url}
+          className={buttonClass}
+          aria-label={pagerLabel("Previous", previous.name)}
+        >
+          <ChevronLeft className="size-4" />
+        </Link>
+      ) : (
+        <div className={disabledClass}>
+          <ChevronLeft className="size-4" />
+        </div>
+      )}
+      {next ? (
+        <Link
+          href={next.url}
+          className={buttonClass}
+          aria-label={pagerLabel("Next", next.name)}
+        >
+          <ChevronRight className="size-4" />
+        </Link>
+      ) : (
+        <div className={disabledClass}>
+          <ChevronRight className="size-4" />
+        </div>
+      )}
+      {children}
+    </div>
+  );
+}

package/src/site/sidebar-navigation.test.tsx

@@ -0,0 +1,92 @@
+// @vitest-environment jsdom
+
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, expect, it, vi } from "vitest";
+import { DocsSidebarNavigation } from "./sidebar-navigation";
+import type { DocsFolder } from "./tree";
+
+const sections: DocsFolder[] = [
+  {
+    type: "folder",
+    $id: "start",
+    name: "Getting started",
+    children: [
+      { type: "page", $id: "intro", name: "Overview", url: "/docs" },
+      {
+        type: "folder",
+        $id: "install",
+        name: "Install",
+        index: { type: "page", name: "Install", url: "/docs/install" },
+        children: [
+          {
+            type: "page",
+            $id: "next",
+            name: "Next.js",
+            url: "/docs/install/next",
+          },
+          { type: "page", $id: "vue", name: "Vue", url: "/docs/install/vue" },
+        ],
+      },
+    ],
+  },
+  {
+    type: "folder",
+    $id: "guides",
+    name: "Guides",
+    children: [
+      { type: "page", $id: "tools", name: "Tools", url: "/docs/tools" },
+    ],
+  },
+];
+
+afterEach(() => vi.unstubAllGlobals());
+
+it("opens the active hierarchy, filters host-specific pages, and follows route changes after manual collapse", async () => {
+  vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+  const container = document.createElement("div");
+  document.body.append(container);
+  const root = createRoot(container);
+  const onNavigate = vi.fn();
+  const render = (pathname: string, activeSectionId: string) =>
+    act(async () => {
+      root.render(
+        <DocsSidebarNavigation
+          sections={sections}
+          pathname={pathname}
+          activeSectionId={activeSectionId}
+          isVisible={(node) => node.$id !== "vue"}
+          onNavigate={onNavigate}
+        />,
+      );
+    });
+  try {
+    await render("/docs/install/next", "start");
+    expect(container.querySelector('[data-active="true"]')?.textContent).toBe(
+      "Next.js",
+    );
+    expect(container.textContent).not.toContain("Vue");
+    expect(container.querySelector('a[href="/docs/tools"]')).toBeNull();
+    const section = container.querySelector<HTMLButtonElement>("button")!;
+    await act(async () => section.click());
+    expect(section.getAttribute("aria-expanded")).toBe("false");
+    await render("/docs/install", "start");
+    expect(section.getAttribute("aria-expanded")).toBe("true");
+    expect(container.querySelector('[data-active="true"]')?.textContent).toBe(
+      "Install",
+    );
+    await render("/docs/tools", "guides");
+    expect(
+      container.querySelectorAll("button")[1]?.getAttribute("aria-expanded"),
+    ).toBe("true");
+    const link = container.querySelector<HTMLAnchorElement>(
+      'a[href="/docs/tools"]',
+    )!;
+    link.addEventListener("click", (event) => event.preventDefault());
+    await act(async () => link.click());
+    expect(onNavigate).toHaveBeenCalledOnce();
+  } finally {
+    await act(async () => root.unmount());
+    container.remove();
+  }
+});