@lukoweb/apitogo 0.1.23 → 0.1.37

package/src/lib/components/navigation/ZudokuLogo.tsx

@@ -1,25 +1,25 @@
-import type * as React from "react";
-
-const ZudokuLogo = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 132 100"
-    fill="none"
-    {...props}
-  >
-    <path
-      fill="currentColor"
-      fillRule="evenodd"
-      d="M80.092 2.963A4.66 4.66 0 0 1 84.449 0h34.049c6.325 0 10.835 6.135 8.948 12.172L116.653 46.71a4.688 4.688 0 0 1-4.474 3.29H75c-5.178 0-7.813 4.687-9.375 9.374-1.288 3.864-11.07 28.963-14.467 37.662A4.66 4.66 0 0 1 46.801 100H12.75c-6.324 0-10.834-6.134-8.947-12.171l10.793-34.54A4.688 4.688 0 0 1 19.071 50H56.25c5.178 0 7.813-4.687 9.375-9.375 1.288-3.864 11.07-28.962 14.467-37.662Z"
-      clipRule="evenodd"
-    />
-    <path
-      fill="currentColor"
-      d="M83.54 57.813a7.813 7.813 0 0 0-7.316 5.07L63.888 95.777c-.766 2.043.744 4.222 2.926 4.222h36.828c5.211 0 9.875-3.232 11.704-8.11l8.821-23.522c1.915-5.107-1.861-10.555-7.315-10.555H83.539ZM29.17 0a12.5 12.5 0 0 0-11.704 8.111l-8.82 23.521c-1.915 5.107 1.86 10.556 7.315 10.556h33.312a7.813 7.813 0 0 0 7.316-5.07L68.924 4.223C69.691 2.18 68.18 0 65.998 0H29.17Z"
-    />
-  </svg>
-);
-
-ZudokuLogo.displayName = "ZudokuLogo";
-
-export default ZudokuLogo;
+import type * as React from "react";
+
+const ZudokuLogo = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 132 100"
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M80.092 2.963A4.66 4.66 0 0 1 84.449 0h34.049c6.325 0 10.835 6.135 8.948 12.172L116.653 46.71a4.688 4.688 0 0 1-4.474 3.29H75c-5.178 0-7.813 4.687-9.375 9.374-1.288 3.864-11.07 28.963-14.467 37.662A4.66 4.66 0 0 1 46.801 100H12.75c-6.324 0-10.834-6.134-8.947-12.171l10.793-34.54A4.688 4.688 0 0 1 19.071 50H56.25c5.178 0 7.813-4.687 9.375-9.375 1.288-3.864 11.07-28.962 14.467-37.662Z"
+      clipRule="evenodd"
+    />
+    <path
+      fill="currentColor"
+      d="M83.54 57.813a7.813 7.813 0 0 0-7.316 5.07L63.888 95.777c-.766 2.043.744 4.222 2.926 4.222h36.828c5.211 0 9.875-3.232 11.704-8.11l8.821-23.522c1.915-5.107-1.861-10.555-7.315-10.555H83.539ZM29.17 0a12.5 12.5 0 0 0-11.704 8.111l-8.82 23.521c-1.915 5.107 1.86 10.556 7.315 10.556h33.312a7.813 7.813 0 0 0 7.316-5.07L68.924 4.223C69.691 2.18 68.18 0 65.998 0H29.17Z"
+    />
+  </svg>
+);
+
+ZudokuLogo.displayName = "ZudokuLogo";
+
+export default ZudokuLogo;

package/src/lib/components/navigation/ZuploLogo.tsx

@@ -1,14 +1,14 @@
-import type * as React from "react";
-
-const ZuploLogo = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 76 66"
-    fill="none"
-    {...props}
-  >
-    <path d="M55.331 43.537H32.527l24.295-24.343a1.642 1.642 0 0 0-1.157-2.802H17.07V.239h42.336a16.407 16.407 0 0 1 8.81 2.438 16.471 16.471 0 0 1 6.147 6.775 16.037 16.037 0 0 1-3.167 18.201L55.331 43.535v.002Z" />
-    <path d="M20.695 21.888H43.5L19.204 46.23a1.643 1.643 0 0 0 1.158 2.802h38.595v16.153H16.621a16.406 16.406 0 0 1-8.81-2.438 16.471 16.471 0 0 1-6.147-6.775 16.038 16.038 0 0 1 3.167-18.201L20.695 21.89v-.002Z" />
-  </svg>
-);
-export default ZuploLogo;
+import type * as React from "react";
+
+const ZuploLogo = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 76 66"
+    fill="none"
+    {...props}
+  >
+    <path d="M55.331 43.537H32.527l24.295-24.343a1.642 1.642 0 0 0-1.157-2.802H17.07V.239h42.336a16.407 16.407 0 0 1 8.81 2.438 16.471 16.471 0 0 1 6.147 6.775 16.037 16.037 0 0 1-3.167 18.201L55.331 43.535v.002Z" />
+    <path d="M20.695 21.888H43.5L19.204 46.23a1.643 1.643 0 0 0 1.158 2.802h38.595v16.153H16.621a16.406 16.406 0 0 1-8.81-2.438 16.471 16.471 0 0 1-6.147-6.775 16.038 16.038 0 0 1 3.167-18.201L20.695 21.89v-.002Z" />
+  </svg>
+);
+export default ZuploLogo;

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

@@ -1,234 +1,234 @@
-import { cva } from "class-variance-authority";
-import { useLocation } from "react-router";
-import type {
-  NavigationCategory,
-  NavigationItem,
-} from "../../../config/validators/NavigationSchema.js";
-import type { UseAuthReturn } from "../../authentication/hook.js";
-import type { ZudokuContext } from "../../core/ZudokuContext.js";
-import { joinUrl } from "../../util/joinUrl.js";
-import { useCurrentNavigation } from "../context/ZudokuContext.js";
-
-export type TraverseCallback<T> = (
-  item: NavigationItem,
-  parentCategories: NavigationItem[],
-) => T | void;
-
-export const traverseNavigation = <T>(
-  navigation: NavigationItem[],
-  callback: TraverseCallback<T>,
-): T | undefined => {
-  for (const item of navigation) {
-    const result = traverseNavigationItem(item, callback);
-    if (result !== undefined) return result;
-  }
-};
-
-export const traverseNavigationItem = <T>(
-  item: NavigationItem,
-  callback: TraverseCallback<T>,
-  parentCategories: NavigationItem[] = [],
-): T | undefined => {
-  const result = callback(item, parentCategories);
-  if (result !== undefined) return result;
-
-  if (item.type === "category") {
-    for (const child of item.items) {
-      const childResult = traverseNavigationItem(child, callback, [
-        ...parentCategories,
-        item,
-      ]);
-      if (childResult !== undefined) return childResult;
-    }
-  }
-};
-
-export const getItemPath = (item: NavigationItem): string | undefined => {
-  switch (item.type) {
-    case "doc":
-    case "custom-page":
-      return joinUrl(item.path);
-    case "link":
-      return item.to;
-    case "category":
-      return item.link ? joinUrl(item.link.path) : undefined;
-    default:
-      return undefined;
-  }
-};
-
-export const getFirstMatchingPath = (item: NavigationItem): string => {
-  switch (item.type) {
-    case "doc":
-    case "custom-page":
-      return joinUrl(item.path);
-    case "link":
-      return item.to;
-    case "category": {
-      if (item.link?.path) {
-        return joinUrl(item.link.path);
-      }
-      return (
-        traverseNavigationItem(item, (child) => {
-          if (
-            child.type !== "category" &&
-            child.type !== "separator" &&
-            child.type !== "section" &&
-            child.type !== "filter"
-          ) {
-            return getFirstMatchingPath(child);
-          }
-        }) ?? ""
-      );
-    }
-    default:
-      return "";
-  }
-};
-
-export const useCurrentItem = () => {
-  const pathname = joinUrl(useLocation().pathname);
-  const { navigation } = useCurrentNavigation();
-
-  return traverseNavigation(navigation, (item) => {
-    if (item.type === "doc" && joinUrl(item.path) === pathname) {
-      return item;
-    }
-  });
-};
-
-export const useIsCategoryOpen = (category: NavigationCategory) => {
-  const pathname = joinUrl(useLocation().pathname);
-
-  return traverseNavigationItem(category, (item) => {
-    switch (item.type) {
-      case "category":
-        if (!item.link) {
-          return undefined;
-        }
-        return joinUrl(item.link.path) === pathname ? true : undefined;
-      case "custom-page":
-      case "doc":
-        return joinUrl(item.path) === pathname ? true : undefined;
-      default:
-        return undefined;
-    }
-  });
-};
-
-export const usePrevNext = (): {
-  prev?: { label?: string; id: string };
-  next?: { label?: string; id: string };
-} => {
-  const currentId = joinUrl(useLocation().pathname);
-  const { navigation } = useCurrentNavigation();
-
-  let prev: { label?: string; id: string } | undefined;
-  let next: { label?: string; id: string } | undefined;
-
-  let foundCurrent = false;
-
-  traverseNavigation(navigation, (item) => {
-    if (
-      item.type === "separator" ||
-      item.type === "section" ||
-      item.type === "filter"
-    )
-      return;
-
-    const itemId =
-      item.type === "doc"
-        ? joinUrl(item.path)
-        : item.type === "category" && item.link
-          ? joinUrl(item.link.path)
-          : undefined;
-
-    if (!itemId) return;
-
-    if (foundCurrent) {
-      next = { label: item.label, id: itemId };
-      return true;
-    }
-
-    if (currentId === itemId) {
-      foundCurrent = true;
-    } else {
-      prev = { label: item.label, id: itemId };
-    }
-  });
-
-  return { prev, next };
-};
-
-export const navigationListItem = cva(
-  "relative flex items-center gap-2 px-(--padding-nav-item) my-px py-1.5 rounded-lg hover:bg-accent tabular-nums",
-  {
-    variants: {
-      isActive: {
-        true: "bg-accent font-medium",
-        false: "text-foreground/80",
-      },
-      isMuted: {
-        true: "text-foreground/30",
-        false: "",
-      },
-      isPending: {
-        true: "bg-accent animate-pulse",
-        false: "",
-      },
-    },
-    defaultVariants: {
-      isActive: false,
-    },
-  },
-);
-
-export const itemMatchesFilter = (
-  item: NavigationItem,
-  query: string,
-): boolean => {
-  if (["separator", "section", "filter"].includes(item.type)) {
-    return true;
-  }
-  if (item.label?.toLowerCase().includes(query.toLowerCase())) {
-    return true;
-  }
-
-  if (item.type === "category") {
-    return item.items.some((child) => itemMatchesFilter(child, query));
-  }
-
-  return false;
-};
-
-export const shouldShowItem =
-  ({
-    auth,
-    context,
-    filterQuery,
-  }: {
-    auth: UseAuthReturn;
-    context: ZudokuContext;
-    filterQuery?: string;
-  }) =>
-  (item: NavigationItem): boolean => {
-    if (item.type === "filter") return true;
-
-    if (filterQuery?.trim() && !itemMatchesFilter(item, filterQuery)) {
-      return false;
-    }
-
-    if (typeof item.display === "function") {
-      return item.display({ context, auth });
-    }
-
-    if (item.display === "hide") return false;
-    if (!item.label) return false;
-
-    return (
-      (item.display === "auth" && auth.isAuthenticated) ||
-      (item.display === "anon" && !auth.isAuthenticated) ||
-      !item.display ||
-      item.display === "always"
-    );
-  };
+import { cva } from "class-variance-authority";
+import { useLocation } from "react-router";
+import type {
+  NavigationCategory,
+  NavigationItem,
+} from "../../../config/validators/NavigationSchema.js";
+import type { UseAuthReturn } from "../../authentication/hook.js";
+import type { ZudokuContext } from "../../core/ZudokuContext.js";
+import { joinUrl } from "../../util/joinUrl.js";
+import { useCurrentNavigation } from "../context/ZudokuContext.js";
+
+export type TraverseCallback<T> = (
+  item: NavigationItem,
+  parentCategories: NavigationItem[],
+) => T | void;
+
+export const traverseNavigation = <T>(
+  navigation: NavigationItem[],
+  callback: TraverseCallback<T>,
+): T | undefined => {
+  for (const item of navigation) {
+    const result = traverseNavigationItem(item, callback);
+    if (result !== undefined) return result;
+  }
+};
+
+export const traverseNavigationItem = <T>(
+  item: NavigationItem,
+  callback: TraverseCallback<T>,
+  parentCategories: NavigationItem[] = [],
+): T | undefined => {
+  const result = callback(item, parentCategories);
+  if (result !== undefined) return result;
+
+  if (item.type === "category") {
+    for (const child of item.items) {
+      const childResult = traverseNavigationItem(child, callback, [
+        ...parentCategories,
+        item,
+      ]);
+      if (childResult !== undefined) return childResult;
+    }
+  }
+};
+
+export const getItemPath = (item: NavigationItem): string | undefined => {
+  switch (item.type) {
+    case "doc":
+    case "custom-page":
+      return joinUrl(item.path);
+    case "link":
+      return item.to;
+    case "category":
+      return item.link ? joinUrl(item.link.path) : undefined;
+    default:
+      return undefined;
+  }
+};
+
+export const getFirstMatchingPath = (item: NavigationItem): string => {
+  switch (item.type) {
+    case "doc":
+    case "custom-page":
+      return joinUrl(item.path);
+    case "link":
+      return item.to;
+    case "category": {
+      if (item.link?.path) {
+        return joinUrl(item.link.path);
+      }
+      return (
+        traverseNavigationItem(item, (child) => {
+          if (
+            child.type !== "category" &&
+            child.type !== "separator" &&
+            child.type !== "section" &&
+            child.type !== "filter"
+          ) {
+            return getFirstMatchingPath(child);
+          }
+        }) ?? ""
+      );
+    }
+    default:
+      return "";
+  }
+};
+
+export const useCurrentItem = () => {
+  const pathname = joinUrl(useLocation().pathname);
+  const { navigation } = useCurrentNavigation();
+
+  return traverseNavigation(navigation, (item) => {
+    if (item.type === "doc" && joinUrl(item.path) === pathname) {
+      return item;
+    }
+  });
+};
+
+export const useIsCategoryOpen = (category: NavigationCategory) => {
+  const pathname = joinUrl(useLocation().pathname);
+
+  return traverseNavigationItem(category, (item) => {
+    switch (item.type) {
+      case "category":
+        if (!item.link) {
+          return undefined;
+        }
+        return joinUrl(item.link.path) === pathname ? true : undefined;
+      case "custom-page":
+      case "doc":
+        return joinUrl(item.path) === pathname ? true : undefined;
+      default:
+        return undefined;
+    }
+  });
+};
+
+export const usePrevNext = (): {
+  prev?: { label?: string; id: string };
+  next?: { label?: string; id: string };
+} => {
+  const currentId = joinUrl(useLocation().pathname);
+  const { navigation } = useCurrentNavigation();
+
+  let prev: { label?: string; id: string } | undefined;
+  let next: { label?: string; id: string } | undefined;
+
+  let foundCurrent = false;
+
+  traverseNavigation(navigation, (item) => {
+    if (
+      item.type === "separator" ||
+      item.type === "section" ||
+      item.type === "filter"
+    )
+      return;
+
+    const itemId =
+      item.type === "doc"
+        ? joinUrl(item.path)
+        : item.type === "category" && item.link
+          ? joinUrl(item.link.path)
+          : undefined;
+
+    if (!itemId) return;
+
+    if (foundCurrent) {
+      next = { label: item.label, id: itemId };
+      return true;
+    }
+
+    if (currentId === itemId) {
+      foundCurrent = true;
+    } else {
+      prev = { label: item.label, id: itemId };
+    }
+  });
+
+  return { prev, next };
+};
+
+export const navigationListItem = cva(
+  "relative flex items-center gap-2 px-(--padding-nav-item) my-px py-1.5 rounded-lg hover:bg-accent tabular-nums",
+  {
+    variants: {
+      isActive: {
+        true: "bg-accent font-medium",
+        false: "text-foreground/80",
+      },
+      isMuted: {
+        true: "text-foreground/30",
+        false: "",
+      },
+      isPending: {
+        true: "bg-accent animate-pulse",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      isActive: false,
+    },
+  },
+);
+
+export const itemMatchesFilter = (
+  item: NavigationItem,
+  query: string,
+): boolean => {
+  if (["separator", "section", "filter"].includes(item.type)) {
+    return true;
+  }
+  if (item.label?.toLowerCase().includes(query.toLowerCase())) {
+    return true;
+  }
+
+  if (item.type === "category") {
+    return item.items.some((child) => itemMatchesFilter(child, query));
+  }
+
+  return false;
+};
+
+export const shouldShowItem =
+  ({
+    auth,
+    context,
+    filterQuery,
+  }: {
+    auth: UseAuthReturn;
+    context: ZudokuContext;
+    filterQuery?: string;
+  }) =>
+  (item: NavigationItem): boolean => {
+    if (item.type === "filter") return true;
+
+    if (filterQuery?.trim() && !itemMatchesFilter(item, filterQuery)) {
+      return false;
+    }
+
+    if (typeof item.display === "function") {
+      return item.display({ context, auth });
+    }
+
+    if (item.display === "hide") return false;
+    if (!item.label) return false;
+
+    return (
+      (item.display === "auth" && auth.isAuthenticated) ||
+      (item.display === "anon" && !auth.isAuthenticated) ||
+      !item.display ||
+      item.display === "always"
+    );
+  };

package/src/lib/core/RouteGuard.tsx

@@ -17,6 +17,7 @@ import {
   useNavigate,
 } from "react-router";
 import { REASON_CODES } from "../../config/validators/reason-codes.js";
+import { ProductionUnlockPage } from "../authentication/components/ProductionUnlockPage.js";
 import { useAuth } from "../authentication/hook.js";
 import { RenderContext } from "../components/context/RenderContext.js";
 import { useZudoku } from "../components/context/ZudokuContext.js";
@@ -174,7 +175,16 @@ export const RouteGuard = () => {
     return null;
   }
 
-  const showDialog = needsToSignIn || isBlocked;
+  if (
+    isProtectedRoute &&
+    needsToSignIn &&
+    auth.isAuthEnabled &&
+    !auth.isBackendAvailable
+  ) {
+    return <ProductionUnlockPage />;
+  }
+
+  const showDialog = auth.isBackendAvailable && (needsToSignIn || isBlocked);
   const redirectTo = isBlocked
     ? blocker.location.pathname + blocker.location.search
     : location.pathname + location.search;