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

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/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>
-  );
-};

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

@@ -1,143 +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 { DynamicIcon, isValidIcon } from "../DynamicIcon.js";
-import { useNavigationCollapsibleState } from "./useNavigationCollapsibleState.js";
-import { checkHasActiveItem, isLinkItem, isPathItem } from "./util.js";
-
-export const linkItem = 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",
-      },
-    },
-  },
-);
-
-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",
-      linkItem({ 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">
-        {isValidIcon(item.icon) && <DynamicIcon name={item.icon} size={16} />}
-        {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", linkItem({ 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={linkItem({
-            isActive: item.path.slice(1) === activeAnchor,
-          })}
-        >
-          {linkContent}
-        </AnchorLink>
-      ) : (
-        <NavLink
-          className={({ isActive }) => linkItem({ isActive })}
-          to={currentPath}
-        >
-          {linkContent}
-        </NavLink>
-      )}
-    </li>
-  );
-};

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

@@ -1,15 +0,0 @@
-import { forwardRef, type PropsWithChildren } from "react";
-
-export const SideNavigationWrapper = forwardRef<
-  HTMLDivElement,
-  PropsWithChildren
->(({ children }, ref) => {
-  return (
-    <nav
-      className="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"
-      ref={ref}
-    >
-      {children}
-    </nav>
-  );
-});

package/src/app/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/app/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/app/core/DevPortalContext.ts

@@ -1,164 +0,0 @@
-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 {
-  isApiKeyPlugin,
-  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;
-  id: string;
-}
-
-type BaseNavigationCategoryItem = {
-  label: ReactNode;
-  title?: string;
-  icon?: ReactNode | IconName;
-};
-
-export type PathNavigationCategoryItem = BaseNavigationCategoryItem & {
-  path: string;
-  children?: NavigationCategoryItem[];
-};
-
-export type HrefNavigationCategoryItem = BaseNavigationCategoryItem & {
-  href: string;
-};
-
-export type NavigationCategoryItem =
-  | PathNavigationCategoryItem
-  | HrefNavigationCategoryItem;
-
-export type NavigationCategory = {
-  label: string;
-  path?: string;
-  expanded?: boolean;
-  collapsible?: boolean;
-  icon?: LucideIcon;
-  children: NavigationCategoryItem[];
-};
-
-export type NavigationItem = {
-  label: string;
-  path: DevPortalPath;
-  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 type ApiKeyCache = "api-keys";
-export type DevPortalCacheKey = ApiKeyCache | string;
-
-export class DevPortalContext {
-  private plugins: DevPortalPlugin[] = [];
-  private navigationPlugins: NavigationPlugin[];
-
-  public navigation: NavigationItem[];
-  public meta: DevPortalProps["meta"];
-  public authentication?: AuthProvider;
-  public state: typeof useDevPortalState;
-
-  constructor(private 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;
-  }
-
-  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 });
-  };
-
-  getApiIdentities = async () => {
-    const keys = await Promise.all(
-      this.plugins
-        .filter(isApiKeyPlugin)
-        .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) =>
-        plugin.getNavigation?.(path),
-      ),
-    );
-
-    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),
-  };
-}

package/src/app/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/app/core/icons.tsx

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

package/src/app/core/plugins.ts

@@ -1,43 +0,0 @@
-import { type RouteObject } from "react-router-dom";
-import {
-  DevPortalContext,
-  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 interface NavigationPlugin {
-  getRoutes: () => RouteObject[];
-  getNavigation?: (path: string) => Promise<PluginNavigationCategory[]>;
-}
-
-export interface ApiIdentityPlugin {
-  getIdentities: (context: DevPortalContext) => Promise<ApiIdentity[]>;
-}
-
-export interface InitializationPlugin {
-  initialize: (context: DevPortalContext) => Promise<void> | void;
-}
-
-export const isNavigationPlugin = (
-  obj: DevPortalPlugin,
-): obj is NavigationPlugin =>
-  "getRoutes" in obj && typeof obj.getRoutes === "function";
-
-export const needsInitialization = (
-  obj: DevPortalPlugin,
-): obj is InitializationPlugin =>
-  "initialize" in obj && typeof obj.initialize === "function";
-
-export const isApiKeyPlugin = (
-  obj: DevPortalPlugin,
-): obj is ApiIdentityPlugin =>
-  "getIdentities" in obj && typeof obj.getIdentities === "function";

package/src/app/core/router.tsx

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

package/src/app/core/types/combine.ts

@@ -1,16 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (
-  k: infer I,
-) => void
-  ? I
-  : never;
-
-type AnyCombination<T, U = T> = T extends any
-  ? U extends any
-    ? T | (T & U)
-    : never
-  : never;
-
-export type Combine<T extends any[]> =
-  | UnionToIntersection<T[number]>
-  | AnyCombination<T[number]>;