zudoku 0.1.1-dev.18 → 0.1.1-dev.19

package/src/lib/components/navigation/useNavigationCollapsibleState.ts

@@ -0,0 +1,27 @@
+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/lib/components/navigation/util.ts

@@ -0,0 +1,38 @@
+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/lib/components.ts

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

package/src/lib/core/DevPortalContext.ts

@@ -0,0 +1,164 @@
+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/lib/core/helmet.ts

@@ -0,0 +1,5 @@
+import * as helmet from "react-helmet-async";
+
+export const Helmet = helmet.Helmet;
+export const HelmetData = helmet.HelmetData;
+export const HelmetProvider = helmet.HelmetProvider;

package/src/lib/core/icons.tsx

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

package/src/lib/core/plugins.ts

@@ -0,0 +1,43 @@
+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/lib/core/router.tsx

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

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

@@ -0,0 +1,16 @@
+/* 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]>;