@lukoweb/apitogo 0.1.23 → 0.1.37

package/src/lib/components/Slot.tsx

@@ -1,64 +1,64 @@
-import { type ReactNode, useId, useLayoutEffect } from "react";
-import {
-  type SlotType,
-  useRenderSlot,
-  useSlotContext,
-} from "./context/SlotProvider.js";
-
-// This is to augment the type of the Slot component with custom slot names
-// This is useful for plugins to add custom slots to the Zudoku context
-// and for the user to use them in their own components
-export type CustomSlotNames = never;
-
-type PredefinedSlotNames =
-  | "api-keys-list-page"
-  | "api-keys-list-page-before-keys"
-  | "footer-after"
-  | "footer-before"
-  | "head-navigation-end"
-  | "head-navigation-start"
-  | "layout-after-head"
-  | "layout-before-head"
-  | "top-navigation-after"
-  | "top-navigation-before"
-  | "top-navigation-side"
-  | "content-before"
-  | "content-after"
-  | "navigation-after"
-  | "navigation-before";
-
-export type SlotName = PredefinedSlotNames | CustomSlotNames;
-
-export const Slot = {
-  Source: ({
-    name,
-    children,
-    type = "replace",
-  }: {
-    name: SlotName;
-    type?: "prepend" | "replace" | "append";
-    children: SlotType;
-  }) => {
-    const id = useId();
-    const setSlot = useSlotContext((s) => s.setSlot);
-    const clearSlot = useSlotContext((s) => s.clearSlot);
-
-    if (import.meta.env.SSR) {
-      setSlot(id, name, children, type);
-    }
-
-    useLayoutEffect(() => {
-      setSlot(id, name, children, type);
-      return () => clearSlot(id, name);
-    }, [id, name, children, type, setSlot, clearSlot]);
-
-    return null;
-  },
-
-  Target: ({ name, fallback }: { name: string; fallback?: ReactNode }) => {
-    const slot = useRenderSlot(name);
-
-    if (slot.length === 0) return fallback;
-    return slot;
-  },
-};
+import { type ReactNode, useId, useLayoutEffect } from "react";
+import {
+  type SlotType,
+  useRenderSlot,
+  useSlotContext,
+} from "./context/SlotProvider.js";
+
+// This is to augment the type of the Slot component with custom slot names
+// This is useful for plugins to add custom slots to the Zudoku context
+// and for the user to use them in their own components
+export type CustomSlotNames = never;
+
+type PredefinedSlotNames =
+  | "api-keys-list-page"
+  | "api-keys-list-page-before-keys"
+  | "footer-after"
+  | "footer-before"
+  | "head-navigation-end"
+  | "head-navigation-start"
+  | "layout-after-head"
+  | "layout-before-head"
+  | "top-navigation-after"
+  | "top-navigation-before"
+  | "top-navigation-side"
+  | "content-before"
+  | "content-after"
+  | "navigation-after"
+  | "navigation-before";
+
+export type SlotName = PredefinedSlotNames | CustomSlotNames;
+
+export const Slot = {
+  Source: ({
+    name,
+    children,
+    type = "replace",
+  }: {
+    name: SlotName;
+    type?: "prepend" | "replace" | "append";
+    children: SlotType;
+  }) => {
+    const id = useId();
+    const setSlot = useSlotContext((s) => s.setSlot);
+    const clearSlot = useSlotContext((s) => s.clearSlot);
+
+    if (import.meta.env.SSR) {
+      setSlot(id, name, children, type);
+    }
+
+    useLayoutEffect(() => {
+      setSlot(id, name, children, type);
+      return () => clearSlot(id, name);
+    }, [id, name, children, type, setSlot, clearSlot]);
+
+    return null;
+  },
+
+  Target: ({ name, fallback }: { name: string; fallback?: ReactNode }) => {
+    const slot = useRenderSlot(name);
+
+    if (slot.length === 0) return fallback;
+    return slot;
+  },
+};

package/src/lib/components/Spinner.tsx

@@ -1,5 +1,5 @@
-import { LoaderCircle } from "lucide-react";
-
-export const Spinner = ({ size = 16 }: { size?: number }) => (
-  <LoaderCircle size={size} className="animate-spin" />
-);
+import { LoaderCircle } from "lucide-react";
+
+export const Spinner = ({ size = 16 }: { size?: number }) => (
+  <LoaderCircle size={size} className="animate-spin" />
+);

package/src/lib/components/StatusPage.tsx

@@ -1,96 +1,96 @@
-import type { ReactNode } from "react";
-import { ErrorPage } from "./ErrorPage.js";
-import { NotFoundPage } from "./NotFoundPage.js";
-
-type StatusPageProps = {
-  statusCode: number;
-  message?: ReactNode;
-};
-
-const getDefaultContent = (
-  statusCode: number,
-): { title: string; message: string } => {
-  switch (statusCode) {
-    case 400:
-      return {
-        title: "Bad Request",
-        message:
-          "The request could not be understood by the server due to malformed syntax.",
-      };
-    case 403:
-      return {
-        title: "Forbidden",
-        message: "You don't have permission to access this resource.",
-      };
-    case 404:
-      return {
-        title: "Not Found",
-        message: "The requested resource could not be found.",
-      };
-    case 405:
-      return {
-        title: "Method Not Allowed",
-        message:
-          "The request method is not supported for the requested resource.",
-      };
-    case 414:
-      return {
-        title: "Request URI Too Large",
-        message: "The request URI is too large.",
-      };
-    case 416:
-      return {
-        title: "Range Not Satisfiable",
-        message: "The server cannot satisfy the request range.",
-      };
-    case 500:
-      return {
-        title: "Internal Server Error",
-        message: "An unexpected error occurred while processing your request.",
-      };
-    case 501:
-      return {
-        title: "Not Implemented",
-        message:
-          "The server does not support the functionality required to fulfill the request.",
-      };
-    case 502:
-      return {
-        title: "Bad Gateway",
-        message:
-          "The server received an invalid response from the upstream server.",
-      };
-    case 503:
-      return {
-        title: "Service Unavailable",
-        message: "The server is temporarily unable to handle the request.",
-      };
-    case 504:
-      return {
-        title: "Gateway Timeout",
-        message:
-          "The server did not receive a timely response from the upstream server.",
-      };
-    default:
-      return {
-        title: "An error occurred",
-        message: "Something went wrong while processing your request.",
-      };
-  }
-};
-
-export const StatusPage = ({ statusCode, message }: StatusPageProps) => {
-  if (statusCode === 404) {
-    return <NotFoundPage />;
-  }
-
-  const defaultContent = getDefaultContent(statusCode);
-
-  return (
-    <ErrorPage
-      title={defaultContent.title}
-      message={message ?? defaultContent.message}
-      category={statusCode}
-    />
-  );
-};
+import type { ReactNode } from "react";
+import { ErrorPage } from "./ErrorPage.js";
+import { NotFoundPage } from "./NotFoundPage.js";
+
+type StatusPageProps = {
+  statusCode: number;
+  message?: ReactNode;
+};
+
+const getDefaultContent = (
+  statusCode: number,
+): { title: string; message: string } => {
+  switch (statusCode) {
+    case 400:
+      return {
+        title: "Bad Request",
+        message:
+          "The request could not be understood by the server due to malformed syntax.",
+      };
+    case 403:
+      return {
+        title: "Forbidden",
+        message: "You don't have permission to access this resource.",
+      };
+    case 404:
+      return {
+        title: "Not Found",
+        message: "The requested resource could not be found.",
+      };
+    case 405:
+      return {
+        title: "Method Not Allowed",
+        message:
+          "The request method is not supported for the requested resource.",
+      };
+    case 414:
+      return {
+        title: "Request URI Too Large",
+        message: "The request URI is too large.",
+      };
+    case 416:
+      return {
+        title: "Range Not Satisfiable",
+        message: "The server cannot satisfy the request range.",
+      };
+    case 500:
+      return {
+        title: "Internal Server Error",
+        message: "An unexpected error occurred while processing your request.",
+      };
+    case 501:
+      return {
+        title: "Not Implemented",
+        message:
+          "The server does not support the functionality required to fulfill the request.",
+      };
+    case 502:
+      return {
+        title: "Bad Gateway",
+        message:
+          "The server received an invalid response from the upstream server.",
+      };
+    case 503:
+      return {
+        title: "Service Unavailable",
+        message: "The server is temporarily unable to handle the request.",
+      };
+    case 504:
+      return {
+        title: "Gateway Timeout",
+        message:
+          "The server did not receive a timely response from the upstream server.",
+      };
+    default:
+      return {
+        title: "An error occurred",
+        message: "Something went wrong while processing your request.",
+      };
+  }
+};
+
+export const StatusPage = ({ statusCode, message }: StatusPageProps) => {
+  if (statusCode === 404) {
+    return <NotFoundPage />;
+  }
+
+  const defaultContent = getDefaultContent(statusCode);
+
+  return (
+    <ErrorPage
+      title={defaultContent.title}
+      message={message ?? defaultContent.message}
+      category={statusCode}
+    />
+  );
+};

package/src/lib/components/ThemeSwitch.tsx

@@ -1,49 +1,49 @@
-import { MoonIcon, SunIcon } from "lucide-react";
-import { useTheme } from "next-themes";
-import { focusRing } from "../ui/util.js";
-import { cn } from "../util/cn.js";
-import { useIsClient } from "./ClientOnly.js";
-
-export const ThemeSwitch = () => {
-  const { resolvedTheme, setTheme } = useTheme();
-  const isClient = useIsClient();
-
-  const theme = isClient ? resolvedTheme : undefined;
-
-  return (
-    <button
-      type="button"
-      className={cn("flex rounded-full border p-0.5 gap-0.5 group", focusRing)}
-      onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}
-      aria-label={
-        !isClient
-          ? "Toggle theme"
-          : theme === "dark"
-            ? "Switch to light mode"
-            : "Switch to dark mode"
-      }
-    >
-      <div
-        className={cn(
-          "rounded-full p-0.5 border border-transparent [&>svg>circle]:transition-colors [&>svg>path]:transition-transform transition-all [&>svg>path]:duration-200 [&>svg>circle]:duration-500 [&>svg>circle]:fill-transparent",
-          theme === "light" && "border-border bg-muted",
-          theme === "dark" &&
-            "group-hover:[&>svg>path]:scale-110 group-hover:[&>svg>path]:-translate-x-px group-hover:[&>svg>path]:-translate-y-px group-hover:rotate-15",
-        )}
-      >
-        <SunIcon size={16} />
-      </div>
-      <div
-        className={cn(
-          "rounded-full p-0.5 border border-transparent transition-transform transform-gpu duration-500",
-          theme === "dark" &&
-            "border-border bg-muted [&>svg>path]:fill-white [&>svg>path]:stroke-transparent",
-          theme === "light" &&
-            "group-hover:rotate-[-10deg] [&>svg>path]:stroke-currentColor",
-        )}
-      >
-        <MoonIcon size={16} />
-      </div>
-    </button>
-  );
-};
+import { MoonIcon, SunIcon } from "lucide-react";
+import { useTheme } from "next-themes";
+import { focusRing } from "../ui/util.js";
+import { cn } from "../util/cn.js";
+import { useIsClient } from "./ClientOnly.js";
+
+export const ThemeSwitch = () => {
+  const { resolvedTheme, setTheme } = useTheme();
+  const isClient = useIsClient();
+
+  const theme = isClient ? resolvedTheme : undefined;
+
+  return (
+    <button
+      type="button"
+      className={cn("flex rounded-full border p-0.5 gap-0.5 group", focusRing)}
+      onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}
+      aria-label={
+        !isClient
+          ? "Toggle theme"
+          : theme === "dark"
+            ? "Switch to light mode"
+            : "Switch to dark mode"
+      }
+    >
+      <div
+        className={cn(
+          "rounded-full p-0.5 border border-transparent [&>svg>circle]:transition-colors [&>svg>path]:transition-transform transition-all [&>svg>path]:duration-200 [&>svg>circle]:duration-500 [&>svg>circle]:fill-transparent",
+          theme === "light" && "border-border bg-muted",
+          theme === "dark" &&
+            "group-hover:[&>svg>path]:scale-110 group-hover:[&>svg>path]:-translate-x-px group-hover:[&>svg>path]:-translate-y-px group-hover:rotate-15",
+        )}
+      >
+        <SunIcon size={16} />
+      </div>
+      <div
+        className={cn(
+          "rounded-full p-0.5 border border-transparent transition-transform transform-gpu duration-500",
+          theme === "dark" &&
+            "border-border bg-muted [&>svg>path]:fill-white [&>svg>path]:stroke-transparent",
+          theme === "light" &&
+            "group-hover:rotate-[-10deg] [&>svg>path]:stroke-currentColor",
+        )}
+      >
+        <MoonIcon size={16} />
+      </div>
+    </button>
+  );
+};

package/src/lib/components/Typography.tsx

@@ -1,12 +1,12 @@
-import type { AllHTMLAttributes } from "react";
-import { cn } from "../util/cn.js";
-
-// other styles are defined in main.css .prose
-export const ProseClasses = "prose dark:prose-invert prose-neutral typography";
-
-export const Typography = ({
-  className,
-  ...props
-}: AllHTMLAttributes<HTMLDivElement>) => {
-  return <div className={cn(ProseClasses, className)} {...props} />;
-};
+import type { AllHTMLAttributes } from "react";
+import { cn } from "../util/cn.js";
+
+// other styles are defined in main.css .prose
+export const ProseClasses = "prose dark:prose-invert prose-neutral typography";
+
+export const Typography = ({
+  className,
+  ...props
+}: AllHTMLAttributes<HTMLDivElement>) => {
+  return <div className={cn(ProseClasses, className)} {...props} />;
+};

package/src/lib/components/Zudoku.tsx

@@ -1,106 +1,106 @@
-import { MDXProvider } from "@mdx-js/react";
-import { useQueryClient } from "@tanstack/react-query";
-import { ThemeProvider } from "next-themes";
-import {
-  memo,
-  type PropsWithChildren,
-  useEffect,
-  useMemo,
-  useState,
-} from "react";
-import { ErrorBoundary } from "react-error-boundary";
-import { Outlet, useLocation, useNavigation } from "react-router";
-import { isMdxProviderPlugin } from "../core/plugins.js";
-import {
-  ZudokuContext,
-  type ZudokuContextOptions,
-} from "../core/ZudokuContext.js";
-import { TopLevelError } from "../errors/TopLevelError.js";
-import { MdxComponents } from "../util/MdxComponents.js";
-import { RouterEventsEmitter } from "./context/RouterEventsEmitter.js";
-import { SlotProvider } from "./context/SlotProvider.js";
-import { ViewportAnchorProvider } from "./context/ViewportAnchorContext.js";
-import { ApitogoProvider } from "./context/ZudokuProvider.js";
-import { PluginHeads } from "./PluginHeads.js";
-
-let apitogoContext: ZudokuContext | undefined;
-
-const ZudokuInner = memo(
-  ({
-    children,
-    env,
-    ...props
-  }: PropsWithChildren<
-    ZudokuContextOptions & { env: Record<string, string> }
-  >) => {
-    const location = useLocation();
-    const mdxComponents = useMemo(() => {
-      const componentsFromPlugins = (props.plugins ?? [])
-        .filter(isMdxProviderPlugin)
-        .flatMap((plugin) =>
-          plugin.getMdxComponents ? [plugin.getMdxComponents()] : [],
-        );
-
-      return {
-        ...componentsFromPlugins.reduce(
-          (acc, curr) => ({ ...acc, ...curr }),
-          {},
-        ),
-        ...MdxComponents,
-        ...props.mdx?.components,
-      };
-    }, [props.mdx?.components, props.plugins]);
-    const [didNavigate, setDidNavigate] = useState(false);
-    const navigation = useNavigation();
-    const queryClient = useQueryClient();
-
-    useEffect(() => {
-      if (didNavigate || !navigation.location) {
-        return;
-      }
-      setDidNavigate(true);
-    }, [didNavigate, navigation.location]);
-
-    apitogoContext ??= new ZudokuContext(props, queryClient, env);
-
-    return (
-      <>
-        <PluginHeads plugins={props.plugins ?? []} location={location} />
-        <ApitogoProvider context={apitogoContext}>
-          <RouterEventsEmitter />
-          <SlotProvider slots={props.slots ?? props.UNSAFE_slotlets}>
-            <MDXProvider components={mdxComponents}>
-              <ThemeProvider attribute="class" disableTransitionOnChange>
-                <ViewportAnchorProvider>
-                  {children ?? <Outlet />}
-                </ViewportAnchorProvider>
-              </ThemeProvider>
-            </MDXProvider>
-          </SlotProvider>
-        </ApitogoProvider>
-      </>
-    );
-  },
-);
-
-ZudokuInner.displayName = "ZudokuInner";
-
-const Apitogo = (
-  props: PropsWithChildren<
-    ZudokuContextOptions & { env?: Record<string, string> }
-  >,
-) => {
-  return (
-    <ErrorBoundary FallbackComponent={TopLevelError}>
-      <ZudokuInner {...props} env={props.env ?? {}} />
-    </ErrorBoundary>
-  );
-};
-Apitogo.displayName = "Apitogo";
-
-/**
- * @deprecated Use {@link Apitogo} instead.
- */
-const Zudoku = Apitogo;
-
-export { Apitogo, Zudoku };
+import { MDXProvider } from "@mdx-js/react";
+import { useQueryClient } from "@tanstack/react-query";
+import { ThemeProvider } from "next-themes";
+import {
+  memo,
+  type PropsWithChildren,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+import { ErrorBoundary } from "react-error-boundary";
+import { Outlet, useLocation, useNavigation } from "react-router";
+import { isMdxProviderPlugin } from "../core/plugins.js";
+import {
+  ZudokuContext,
+  type ZudokuContextOptions,
+} from "../core/ZudokuContext.js";
+import { TopLevelError } from "../errors/TopLevelError.js";
+import { MdxComponents } from "../util/MdxComponents.js";
+import { RouterEventsEmitter } from "./context/RouterEventsEmitter.js";
+import { SlotProvider } from "./context/SlotProvider.js";
+import { ViewportAnchorProvider } from "./context/ViewportAnchorContext.js";
+import { ApitogoProvider } from "./context/ZudokuProvider.js";
+import { PluginHeads } from "./PluginHeads.js";
+
+let apitogoContext: ZudokuContext | undefined;
+
+const ZudokuInner = memo(
+  ({
+    children,
+    env,
+    ...props
+  }: PropsWithChildren<
+    ZudokuContextOptions & { env: Record<string, string> }
+  >) => {
+    const location = useLocation();
+    const mdxComponents = useMemo(() => {
+      const componentsFromPlugins = (props.plugins ?? [])
+        .filter(isMdxProviderPlugin)
+        .flatMap((plugin) =>
+          plugin.getMdxComponents ? [plugin.getMdxComponents()] : [],
+        );
+
+      return {
+        ...componentsFromPlugins.reduce(
+          (acc, curr) => ({ ...acc, ...curr }),
+          {},
+        ),
+        ...MdxComponents,
+        ...props.mdx?.components,
+      };
+    }, [props.mdx?.components, props.plugins]);
+    const [didNavigate, setDidNavigate] = useState(false);
+    const navigation = useNavigation();
+    const queryClient = useQueryClient();
+
+    useEffect(() => {
+      if (didNavigate || !navigation.location) {
+        return;
+      }
+      setDidNavigate(true);
+    }, [didNavigate, navigation.location]);
+
+    apitogoContext ??= new ZudokuContext(props, queryClient, env);
+
+    return (
+      <>
+        <PluginHeads plugins={props.plugins ?? []} location={location} />
+        <ApitogoProvider context={apitogoContext}>
+          <RouterEventsEmitter />
+          <SlotProvider slots={props.slots ?? props.UNSAFE_slotlets}>
+            <MDXProvider components={mdxComponents}>
+              <ThemeProvider attribute="class" disableTransitionOnChange>
+                <ViewportAnchorProvider>
+                  {children ?? <Outlet />}
+                </ViewportAnchorProvider>
+              </ThemeProvider>
+            </MDXProvider>
+          </SlotProvider>
+        </ApitogoProvider>
+      </>
+    );
+  },
+);
+
+ZudokuInner.displayName = "ZudokuInner";
+
+const Apitogo = (
+  props: PropsWithChildren<
+    ZudokuContextOptions & { env?: Record<string, string> }
+  >,
+) => {
+  return (
+    <ErrorBoundary FallbackComponent={TopLevelError}>
+      <ZudokuInner {...props} env={props.env ?? {}} />
+    </ErrorBoundary>
+  );
+};
+Apitogo.displayName = "Apitogo";
+
+/**
+ * @deprecated Use {@link Apitogo} instead.
+ */
+const Zudoku = Apitogo;
+
+export { Apitogo, Zudoku };