zudoku 0.0.2-dev.0

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

@@ -0,0 +1,20 @@
+import type { ZudokuConfig } from "../config/config.js";
+
+interface ZuploConfigImport {
+  default: ZudokuConfig;
+}
+
+// Search for config files
+const configs = import.meta.glob<ZuploConfigImport>(
+  "/zudoku.config.{js,jsx,ts,tsx,mjs}",
+  { eager: true },
+);
+
+let config: ZudokuConfig = {};
+
+// If we found any, load the first one
+if (Object.keys(configs).length > 0) {
+  config = configs[Object.keys(configs)[0]].default;
+}
+
+export default config;

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

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

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

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

package/src/app/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]>;

package/src/app/main.css

@@ -0,0 +1,137 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --top-header-height: 65px;
+    --top-nav-height: 50px;
+    --side-nav-width: theme("spacing.72");
+    --header-height: calc(var(--top-header-height) + var(--top-nav-height));
+    --scroll-padding: calc(var(--header-height) + 10px);
+    --padding-content-top: theme("spacing.12");
+    --padding-content-bottom: theme("spacing.12");
+    --padding-nav-item: theme("spacing[2.5]");
+    --sidecar-grid-cols: 1fr minmax(200px, 260px);
+  }
+
+  html,
+  body,
+  #root {
+    @apply h-full min-h-screen;
+  }
+
+  html {
+    scroll-padding-block: var(--scroll-padding);
+  }
+
+  body {
+    @apply antialiased bg-background text-foreground;
+  }
+
+  .dark {
+    color-scheme: dark;
+  }
+
+  .prose.prose {
+    @apply prose-a:decoration-primary/60 hover:prose-a:decoration-primary prose-a:underline-offset-4 hover:prose-a:decoration-2;
+    @apply prose-blockquote:not-italic prose-blockquote:text-neutral-500/75 prose-blockquote:dark:text-neutral-400;
+    @apply prose-headings:prose-code:mx-2;
+    @apply prose-code:before:content-none prose-code:after:content-none;
+
+    ul.contains-task-list {
+      @apply list-none px-0;
+      li {
+        @apply flex items-center gap-2;
+      }
+    }
+  }
+
+  select {
+    @apply focus-visible:ring-primary focus-visible:ring-[1.5px] focus:outline-none;
+  }
+
+  .CollapsibleContent {
+    --easing: cubic-bezier(0.4, 0, 0.2, 1);
+    --slide-offset: -0.75rem;
+    @apply overflow-hidden;
+  }
+  .CollapsibleContent[data-state="open"] {
+    animation: slideDown 300ms var(--easing);
+  }
+  .CollapsibleContent[data-state="closed"] {
+    animation: slideUp 300ms var(--easing);
+  }
+
+  @keyframes slideDown {
+    from {
+      height: 0;
+      opacity: 0;
+      transform: translateY(var(--slide-offset));
+    }
+    to {
+      height: var(--radix-collapsible-content-height);
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes slideUp {
+    from {
+      height: var(--radix-collapsible-content-height);
+      opacity: 1;
+      transform: translateY(0);
+    }
+    to {
+      height: 0;
+      opacity: 0;
+      transform: translateY(var(--slide-offset));
+    }
+  }
+
+  /* Theme */
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 221.2 83.2% 53.3%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 72.22% 50.59%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 221.2 83.2% 53.3%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 217.2 91.2% 59.8%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 224.3 76.3% 48%;
+  }
+}

package/src/app/main.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./app.js";
+
+// if (import.meta.env.DEV) {
+//   const { default: wdyr } = await import(
+//     "@welldone-software/why-did-you-render"
+//   );
+//
+//   wdyr(React, {
+//     include: [/.*/],
+//     exclude: [/^BrowserRouter/, /^Link/, /^Route/],
+//     trackHooks: true,
+//     trackAllPureComponents: true,
+//   });
+// }
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

package/src/app/markdowns.ts

@@ -0,0 +1,7 @@
+import { MDXImport } from "./plugins/markdown/index.js";
+
+const markdowns = import.meta.glob<MDXImport>("/pages/**/*.mdx", {
+  eager: false,
+});
+
+export default markdowns;