zudoku 0.1.1-dev.15 → 0.1.1-dev.17

package/src/app/components/Header.tsx

@@ -1,69 +0,0 @@
-import { MoonStarIcon, SearchIcon, SunIcon } from "lucide-react";
-import { memo } from "react";
-import { useDevPortalState } from "../core/DevPortalContext.js";
-import { TopNavigation } from "./TopNavigation.js";
-import { useDevPortal } from "./context/DevPortalProvider.js";
-import { useTheme } from "./context/ThemeContext.js";
-
-export const Header = memo(() => {
-  const [isDark, toggleTheme] = useTheme();
-  const { isLoggedIn, email } = useDevPortalState();
-  const { login, logout, meta } = useDevPortal();
-
-  const ThemeIcon = isDark ? MoonStarIcon : SunIcon;
-
-  return (
-    <header className="fixed top-0 w-full z-10 bg-background/80 backdrop-blur">
-      <div className="max-w-screen-2xl mx-auto">
-        <div className="grid grid-cols-[calc(var(--side-nav-width))_1fr] lg:gap-12 items-center border-b border-border px-12 h-[--top-header-height]">
-          <div className="flex items-center gap-3.5">
-            {meta?.logo && (
-              <img src={meta.logo} alt="My Dev Portal" className="h-10" />
-            )}
-            <span className="font-bold text-2xl text-foreground/85 tracking-wide">
-              {meta?.headerTitle}
-            </span>
-          </div>
-          <div className="grid grid-cols-[--sidecar-grid-cols] items-center gap-8">
-            <div className="w-full max-w-prose mx-auto">
-              <button className="flex items-center border border-input hover:bg-accent hover:text-accent-foreground p-4 relative h-8 justify-start rounded-lg bg-background text-sm text-muted-foreground shadow-none w-40 sm:w-72">
-                <div className="flex items-center gap-2 flex-grow">
-                  <SearchIcon size={14} />
-                  Search
-                </div>
-                <kbd className="absolute right-[0.3rem] top-[0.3rem] hidden h-5 select-none items-center gap-1 rounded border border-border bg-muted px-1.5 font-mono text-[11px] font-medium opacity-100 sm:flex">
-                  ⌘K
-                </kbd>
-              </button>
-            </div>
-            <div className="items-center justify-self-end text-sm hidden lg:flex">
-              {!isLoggedIn ? (
-                <button
-                  className="cursor-pointer hover:bg-secondary p-1 px-2 mx-2 rounded"
-                  onClick={logout}
-                >
-                  Logout {email ? `(${email})` : null}
-                </button>
-              ) : (
-                <button
-                  className="cursor-pointer hover:bg-secondary p-1 px-2 mx-2 rounded"
-                  onClick={login}
-                >
-                  Login
-                </button>
-              )}
-
-              <button
-                className="cursor-pointer hover:bg-secondary p-2.5 -m-2.5 rounded-full"
-                onClick={toggleTheme}
-              >
-                <ThemeIcon size={18} />
-              </button>
-            </div>
-          </div>
-        </div>
-        <TopNavigation />
-      </div>
-    </header>
-  );
-});

package/src/app/components/Input.tsx

@@ -1,24 +0,0 @@
-import * as React from "react";
-import { cn } from "../util/cn.js";
-
-export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {}
-
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, ...props }, ref) => {
-    return (
-      <input
-        type={type}
-        className={cn(
-          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-          className,
-        )}
-        ref={ref}
-        {...props}
-      />
-    );
-  },
-);
-Input.displayName = "Input";
-
-export { Input };

package/src/app/components/Layout.tsx

@@ -1,56 +0,0 @@
-import { Suspense, useEffect, useRef, type ReactNode } from "react";
-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 { SideNavigation } from "./navigation/SideNavigation.js";
-import { SideNavigationWrapper } from "./navigation/SideNavigationWrapper.js";
-
-export const Layout = ({ children }: { children?: ReactNode }) => {
-  const location = useLocation();
-  const { setActiveAnchor } = useViewportAnchor();
-  const { meta, handleAuthenticationResponse } = useDevPortal();
-
-  useEffect(() => {
-    void handleAuthenticationResponse(location);
-  }, [handleAuthenticationResponse, location]);
-
-  useScrollToAnchor();
-  useScrollToTop();
-
-  const previousLocationPath = useRef(location.pathname);
-
-  useEffect(() => {
-    // always reset on location change
-    if (location.pathname !== previousLocationPath.current) {
-      setActiveAnchor("");
-    }
-    previousLocationPath.current = location.pathname;
-  }, [location.pathname, setActiveAnchor]);
-
-  return (
-    <>
-      <Helmet titleTemplate={meta?.pageTitle}>
-        <title>Home</title>
-        {meta?.description && (
-          <meta name="description" content={meta.description} />
-        )}
-        {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">
-        <Suspense
-          fallback={<SideNavigationWrapper>Loading...</SideNavigationWrapper>}
-        >
-          <SideNavigation />
-        </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/app/components/Markdown.tsx

@@ -1,37 +0,0 @@
-import ReactMarkdown from "react-markdown";
-import remarkGfm from "remark-gfm";
-import { visit } from "unist-util-visit";
-import { MdxComponents } from "../util/MdxComponents.js";
-
-// same as in packages/dev-portal/framework/vite.ts
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const rehypeCodeBlockPlugin = () => (tree: any) => {
-  visit(tree, "element", (node, _index, parent) => {
-    if (node.tagName === "code") {
-      node.properties.inline = parent?.tagName !== "pre";
-    }
-  });
-};
-
-const remarkPlugins = [remarkGfm];
-const rehypePlugins = [rehypeCodeBlockPlugin];
-
-// other styles are defined in main.css .prose
-export const ProseClasses = "prose dark:prose-invert prose-neutral";
-
-export const Markdown = ({
-  content,
-  className,
-}: {
-  content: string;
-  className?: string;
-}) => (
-  <ReactMarkdown
-    remarkPlugins={remarkPlugins}
-    rehypePlugins={rehypePlugins}
-    components={MdxComponents}
-    className={className}
-  >
-    {content}
-  </ReactMarkdown>
-);

package/src/app/components/SyntaxHighlight.tsx

@@ -1,94 +0,0 @@
-import {
-  Highlight,
-  Prism,
-  themes,
-  type HighlightProps,
-} from "prism-react-renderer";
-
-import { CheckIcon, CopyIcon } from "lucide-react";
-
-if (!import.meta.env.SSR) {
-  globalThis.Prism = Prism;
-  // @ts-expect-error This is untyped
-  import("prismjs/components/prism-bash.min.js");
-  // @ts-expect-error This is untyped
-  import("prismjs/components/prism-ruby.min.js");
-  // @ts-expect-error This is untyped
-  import("prismjs/components/prism-markup-templating.js");
-  // @ts-expect-error This is untyped
-  import("prismjs/components/prism-php.min.js");
-  // @ts-expect-error This is untyped
-  import("prismjs/components/prism-json.min.js");
-  // @ts-expect-error This is untyped
-  import("prismjs/components/prism-java.min.js");
-}
-
-import { useState } from "react";
-import { cn } from "../util/cn.js";
-import { useTheme } from "./context/ThemeContext.js";
-
-type SyntaxHighlightProps = {
-  className?: string;
-  noBackground?: boolean;
-  wrapLines?: boolean;
-  copyable?: boolean;
-} & Omit<HighlightProps, "children">;
-
-export const SyntaxHighlight = ({
-  copyable = true,
-  ...props
-}: SyntaxHighlightProps) => {
-  const [isDark] = useTheme();
-  const [isCopied, setIsCopied] = useState(false);
-
-  return (
-    <Highlight theme={isDark ? themes.vsDark : themes.github} {...props}>
-      {({ className, style, tokens, getLineProps, getTokenProps }) => (
-        <pre
-          className={cn(
-            "group relative",
-            className,
-            props.className,
-            props.noBackground && "!bg-transparent",
-            props.wrapLines && "whitespace-pre-wrap break-words",
-          )}
-          style={style}
-        >
-          {copyable && (
-            <button
-              type="button"
-              aria-label="Copy code"
-              className="absolute top-1.5 right-3 p-3 opacity-0 group-hover:opacity-100 transition hover:bg-zinc-500/10 hover:dark:bg-zinc-700/25 rounded-lg text-sm text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-400"
-              disabled={isCopied}
-              onClick={() => {
-                setIsCopied(true);
-                navigator.clipboard.writeText(
-                  tokens
-                    .map((line) => line.map(({ content }) => content).join(""))
-                    .join("\n"),
-                );
-                setTimeout(() => setIsCopied(false), 2000);
-              }}
-            >
-              {isCopied ? (
-                <CheckIcon className="text-emerald-600" size={18} />
-              ) : (
-                <CopyIcon size={18} />
-              )}
-            </button>
-          )}
-          <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) => (
-                <span key={key} {...getTokenProps({ token })} />
-              ))}
-            </div>
-          ))}
-        </pre>
-      )}
-    </Highlight>
-  );
-};

package/src/app/components/TopNavigation.tsx

@@ -1,32 +0,0 @@
-import { cx } from "class-variance-authority";
-import { NavLink } from "react-router-dom";
-
-import { useDevPortal } from "./context/DevPortalProvider.js";
-
-export const TopNavigation = () => {
-  const { navigation } = useDevPortal();
-
-  return (
-    <nav className="border-b border-border text-sm px-12 h-[--top-nav-height]">
-      <ul className="flex flex-row items-center gap-8">
-        {navigation.map((item) => (
-          <li key={item.label}>
-            <NavLink
-              className={({ isActive }) =>
-                cx(
-                  "block py-3.5 font-medium -mb-px border-b-2",
-                  isActive
-                    ? "border-primary text-foreground"
-                    : "border-transparent text-foreground/75 hover:text-foreground hover:border-accent-foreground/25",
-                )
-              }
-              to={item.path}
-            >
-              {item.label}
-            </NavLink>
-          </li>
-        ))}
-      </ul>
-    </nav>
-  );
-};

package/src/app/components/context/ComponentsContext.tsx

@@ -1,24 +0,0 @@
-import {
-  createContext,
-  useContext,
-  type ComponentProps,
-  type ComponentType,
-} from "react";
-import { Header } from "../Header.js";
-
-export const DEFAULT_COMPONENTS = {
-  Header,
-};
-
-export type ComponentsContextType = {
-  Header?: ComponentType<ComponentProps<typeof Header>>;
-};
-
-const ComponentsContext =
-  createContext<Required<ComponentsContextType>>(DEFAULT_COMPONENTS);
-
-export const ComponentsProvider = ComponentsContext.Provider;
-
-export const useComponents = () => {
-  return useContext(ComponentsContext);
-};

package/src/app/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-keys"],
-  });
-};
-
-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/app/components/context/ThemeContext.tsx

@@ -1,46 +0,0 @@
-import {
-  createContext,
-  type ReactNode,
-  useCallback,
-  useEffect,
-  useState,
-  useContext,
-} from "react";
-
-const ThemeContext = createContext<readonly [boolean, () => void]>([
-  false,
-  () => {},
-]);
-
-export const useTheme = () => {
-  const context = useContext(ThemeContext);
-  if (!context) {
-    throw new Error("useTheme must be used within a ThemeProvider");
-  }
-  return context;
-};
-
-export const ThemeProvider = (props: { children: ReactNode }) => {
-  const [dark, setDark] = useState(false);
-
-  // On mount, read the preferred theme from the persistence
-  useEffect(() => {
-    const theme = localStorage.getItem("theme");
-    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
-    const isDark = theme === "dark" || (!theme && prefersDark.matches);
-
-    setDark(isDark);
-  }, [dark]);
-
-  // To toggle between dark and light modes
-  const toggle = useCallback(() => {
-    const toggled = !dark;
-    document.documentElement.classList.toggle("dark", toggled);
-    localStorage.setItem("theme", toggled ? "dark" : "light");
-    setDark(toggled);
-  }, [dark]);
-
-  const value = [dark, toggle] as const;
-
-  return <ThemeContext.Provider value={value} {...props} />;
-};

package/src/app/components/context/ViewportAnchorContext.tsx

@@ -1,139 +0,0 @@
-import {
-  type ReactNode,
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-
-type AnchorContextType = {
-  activeAnchor?: string;
-  setActiveAnchor: (anchor: string) => void;
-  observe: (element: HTMLElement | null) => void;
-  unobserve: (element: HTMLElement | null) => void;
-};
-
-const ViewportAnchorContext = createContext<AnchorContextType | undefined>(
-  undefined,
-);
-
-export const useViewportAnchor = () => {
-  const context = useContext(ViewportAnchorContext);
-
-  if (!context) {
-    throw new Error(
-      "useViewportAnchor must be used within a CurrentAnchorProvider",
-    );
-  }
-
-  return context;
-};
-
-export const useRegisterAnchorElement = () => {
-  const elementRef = useRef<HTMLElement | null>(null);
-
-  const { observe, unobserve } = useViewportAnchor();
-
-  useEffect(() => {
-    const element = elementRef.current;
-
-    if (!element) return;
-
-    observe(element);
-
-    return () => unobserve(element);
-  }, [observe, unobserve]);
-
-  const setRef = useCallback((el: HTMLElement | null) => {
-    if (!el) return;
-    elementRef.current = el;
-  }, []);
-
-  return { ref: setRef };
-};
-
-export const ViewportAnchorProvider = ({
-  children,
-}: {
-  children: ReactNode;
-}) => {
-  const [activeAnchor, setActiveAnchor] = useState("");
-  const observerRef = useRef<IntersectionObserver | null>(null);
-  const registeredElements = useRef(new Set<HTMLElement>());
-
-  useEffect(() => {
-    observerRef.current = new IntersectionObserver(
-      (entries) => {
-        for (const entry of entries) {
-          if (entry.isIntersecting && entry.target.id) {
-            setActiveAnchor(entry.target.id);
-          }
-        }
-      },
-      {
-        // 115px is the height of the sticky header
-        // see --header-height in `main.css`
-        rootMargin: "115px 0px -80% 0px",
-        threshold: 0.75,
-      },
-    );
-
-    return () => observerRef.current?.disconnect();
-  }, []);
-
-  useEffect(() => {
-    const elements = registeredElements.current;
-    const handleScroll = () => {
-      const hasReachedTop = window.scrollY === 0;
-      const hasReachedBottom =
-        window.innerHeight + window.scrollY >= document.body.scrollHeight;
-
-      if (hasReachedTop) {
-        // reset the active anchor when we reach the top
-        setActiveAnchor("");
-      } else if (hasReachedBottom) {
-        requestIdleCallback(() => {
-          // set the last anchor when we reach the bottom
-          const lastItem = Array.from(elements).pop();
-          setActiveAnchor(lastItem?.id ?? "");
-        });
-      }
-    };
-
-    document.addEventListener("scroll", handleScroll);
-
-    return () => {
-      elements.clear();
-      document.removeEventListener("scroll", handleScroll);
-    };
-  }, []);
-
-  const observeFns = useMemo(() => {
-    return {
-      observe: (element: HTMLElement | null) => {
-        if (!element || !observerRef.current) return;
-        registeredElements.current.add(element);
-        observerRef.current.observe(element);
-      },
-      unobserve: (element: HTMLElement | null) => {
-        if (!element || !observerRef.current) return;
-        registeredElements.current.delete(element);
-        observerRef.current.unobserve(element);
-      },
-    };
-  }, []);
-
-  const value = useMemo(
-    () => ({ activeAnchor, setActiveAnchor, ...observeFns }),
-    [activeAnchor, setActiveAnchor, observeFns],
-  );
-
-  return (
-    <ViewportAnchorContext.Provider value={value}>
-      {children}
-    </ViewportAnchorContext.Provider>
-  );
-};

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

@@ -1,18 +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}>
-      {navigation.data.items.map((category) => (
-        <SideNavigationCategory key={category.label} category={category} />
-      ))}
-    </SideNavigationWrapper>
-  );
-};

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

@@ -1,74 +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>
-      )}
-      <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>
-  );
-};