@lukoweb/apitogo 0.1.24 → 0.1.37

package/src/lib/components/Banner.tsx

@@ -1,52 +1,52 @@
-import { CircleXIcon } from "lucide-react";
-import { useState } from "react";
-import { cn } from "../util/cn.js";
-import { useZudoku } from "./context/ZudokuContext.js";
-
-const COLOR_MAP = {
-  info: "bg-blue-500",
-  note: "bg-gray-500",
-  tip: "bg-green-600",
-  caution: "bg-orange-500",
-  danger: "bg-rose-500",
-} as const;
-
-export const Banner = () => {
-  const { options } = useZudoku();
-  const { site } = options;
-  const [isBannerOpen, setIsBannerOpen] = useState(true);
-
-  if (!site?.banner || !isBannerOpen) {
-    return <style>{`:root { --banner-height: 0px; }`}</style>;
-  }
-
-  const mappedColor =
-    site.banner.color && site.banner.color in COLOR_MAP
-      ? COLOR_MAP[site.banner.color as keyof typeof COLOR_MAP]
-      : !site.banner.color
-        ? "bg-primary"
-        : undefined;
-
-  const style = !mappedColor ? { backgroundColor: site.banner.color } : {};
-
-  return (
-    <div
-      className={cn(
-        "relative text-primary-foreground text-sm font-medium px-4 py-2 flex gap-2 items-center lg:h-(--banner-height)",
-        mappedColor,
-      )}
-      style={style}
-    >
-      <div className="w-full">{site.banner.message}</div>
-      {site.banner.dismissible && (
-        <button
-          type="button"
-          className="md:absolute md:end-4 -m-1.5 p-1.5 hover:bg-accent-foreground/10 rounded-md"
-          onClick={() => setIsBannerOpen(false)}
-        >
-          <CircleXIcon size={16} />
-        </button>
-      )}
-    </div>
-  );
-};
+import { CircleXIcon } from "lucide-react";
+import { useState } from "react";
+import { cn } from "../util/cn.js";
+import { useZudoku } from "./context/ZudokuContext.js";
+
+const COLOR_MAP = {
+  info: "bg-blue-500",
+  note: "bg-gray-500",
+  tip: "bg-green-600",
+  caution: "bg-orange-500",
+  danger: "bg-rose-500",
+} as const;
+
+export const Banner = () => {
+  const { options } = useZudoku();
+  const { site } = options;
+  const [isBannerOpen, setIsBannerOpen] = useState(true);
+
+  if (!site?.banner || !isBannerOpen) {
+    return <style>{`:root { --banner-height: 0px; }`}</style>;
+  }
+
+  const mappedColor =
+    site.banner.color && site.banner.color in COLOR_MAP
+      ? COLOR_MAP[site.banner.color as keyof typeof COLOR_MAP]
+      : !site.banner.color
+        ? "bg-primary"
+        : undefined;
+
+  const style = !mappedColor ? { backgroundColor: site.banner.color } : {};
+
+  return (
+    <div
+      className={cn(
+        "relative text-primary-foreground text-sm font-medium px-4 py-2 flex gap-2 items-center lg:h-(--banner-height)",
+        mappedColor,
+      )}
+      style={style}
+    >
+      <div className="w-full">{site.banner.message}</div>
+      {site.banner.dismissible && (
+        <button
+          type="button"
+          className="md:absolute md:end-4 -m-1.5 p-1.5 hover:bg-accent-foreground/10 rounded-md"
+          onClick={() => setIsBannerOpen(false)}
+        >
+          <CircleXIcon size={16} />
+        </button>
+      )}
+    </div>
+  );
+};

package/src/lib/components/Bootstrap.tsx

@@ -1,77 +1,77 @@
-import {
-  HydrationBoundary,
-  QueryClient,
-  QueryClientProvider,
-} from "@tanstack/react-query";
-import { type HelmetData, HelmetProvider } from "@zudoku/react-helmet-async";
-import { StrictMode } from "react";
-import {
-  type createBrowserRouter,
-  type createStaticRouter,
-  type StaticHandlerContext,
-  StaticRouterProvider,
-} from "react-router";
-import { RouterProvider } from "react-router/dom";
-import {
-  RenderContext,
-  type RenderContextValue,
-} from "./context/RenderContext.js";
-
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      staleTime: 1000 * 60 * 5,
-    },
-  },
-});
-
-const Bootstrap = ({
-  router,
-  hydrate = false,
-}: {
-  hydrate?: boolean;
-  router: ReturnType<typeof createBrowserRouter>;
-}) => (
-  <StrictMode>
-    <QueryClientProvider client={queryClient}>
-      {/* biome-ignore lint/suspicious/noExplicitAny: Allow any type */}
-      <HydrationBoundary state={hydrate ? (window as any).DATA : undefined}>
-        <HelmetProvider>
-          <RouterProvider router={router} />
-        </HelmetProvider>
-      </HydrationBoundary>
-    </QueryClientProvider>
-  </StrictMode>
-);
-
-const BootstrapStatic = ({
-  router,
-  context,
-  queryClient,
-  helmetContext,
-  bypassProtection = false,
-  renderContext,
-}: {
-  helmetContext: HelmetData["context"];
-  context: StaticHandlerContext;
-  queryClient: QueryClient;
-  router: ReturnType<typeof createStaticRouter>;
-  bypassProtection?: boolean;
-  renderContext?: RenderContextValue;
-}) => (
-  <StrictMode>
-    <QueryClientProvider client={queryClient}>
-      <HelmetProvider context={helmetContext}>
-        <RenderContext
-          value={
-            renderContext ?? { status: 200, bypassProtection: bypassProtection }
-          }
-        >
-          <StaticRouterProvider router={router} context={context} />
-        </RenderContext>
-      </HelmetProvider>
-    </QueryClientProvider>
-  </StrictMode>
-);
-
-export { Bootstrap, BootstrapStatic };
+import {
+  HydrationBoundary,
+  QueryClient,
+  QueryClientProvider,
+} from "@tanstack/react-query";
+import { type HelmetData, HelmetProvider } from "@zudoku/react-helmet-async";
+import { StrictMode } from "react";
+import {
+  type createBrowserRouter,
+  type createStaticRouter,
+  type StaticHandlerContext,
+  StaticRouterProvider,
+} from "react-router";
+import { RouterProvider } from "react-router/dom";
+import {
+  RenderContext,
+  type RenderContextValue,
+} from "./context/RenderContext.js";
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 1000 * 60 * 5,
+    },
+  },
+});
+
+const Bootstrap = ({
+  router,
+  hydrate = false,
+}: {
+  hydrate?: boolean;
+  router: ReturnType<typeof createBrowserRouter>;
+}) => (
+  <StrictMode>
+    <QueryClientProvider client={queryClient}>
+      {/* biome-ignore lint/suspicious/noExplicitAny: Allow any type */}
+      <HydrationBoundary state={hydrate ? (window as any).DATA : undefined}>
+        <HelmetProvider>
+          <RouterProvider router={router} />
+        </HelmetProvider>
+      </HydrationBoundary>
+    </QueryClientProvider>
+  </StrictMode>
+);
+
+const BootstrapStatic = ({
+  router,
+  context,
+  queryClient,
+  helmetContext,
+  bypassProtection = false,
+  renderContext,
+}: {
+  helmetContext: HelmetData["context"];
+  context: StaticHandlerContext;
+  queryClient: QueryClient;
+  router: ReturnType<typeof createStaticRouter>;
+  bypassProtection?: boolean;
+  renderContext?: RenderContextValue;
+}) => (
+  <StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <HelmetProvider context={helmetContext}>
+        <RenderContext
+          value={
+            renderContext ?? { status: 200, bypassProtection: bypassProtection }
+          }
+        >
+          <StaticRouterProvider router={router} context={context} />
+        </RenderContext>
+      </HelmetProvider>
+    </QueryClientProvider>
+  </StrictMode>
+);
+
+export { Bootstrap, BootstrapStatic };

package/src/lib/components/BuildCheck.tsx

@@ -1,87 +1,87 @@
-import { useQuery } from "@tanstack/react-query";
-import { CircleFadingArrowUpIcon, LoaderCircleIcon } from "lucide-react";
-import { useEffect } from "react";
-import { z } from "zod/mini";
-import { Button } from "../ui/Button.js";
-
-const BuildStatusSchema = z.object({
-  buildId: z.string(),
-  timestamp: z.string(),
-  status: z.enum(["in-progress", "success", "failed"]),
-});
-
-export const BuildCheck = ({
-  buildId,
-  environmentType,
-  endpoint = "/__zuplo/docs",
-}: {
-  buildId?: string;
-  environmentType?: string;
-  endpoint?: string;
-}) => {
-  const buildStatusQuery = useQuery({
-    queryKey: ["zuplo-build-check", buildId, endpoint],
-    refetchInterval: 3000,
-    enabled: buildId !== undefined && environmentType === "WORKING_COPY",
-    retry: false,
-    queryFn: async () => {
-      const res = await fetch(endpoint, { signal: AbortSignal.timeout(2000) });
-      if (!res.ok) throw new Error("Failed to fetch build status");
-      const data: unknown = await res.json();
-      return BuildStatusSchema.parse(data);
-    },
-  });
-
-  useEffect(() => {
-    if (
-      buildStatusQuery.data?.status === "success" &&
-      buildStatusQuery.data.buildId
-    ) {
-      // biome-ignore lint/suspicious/noDocumentCookie: CookieStore too new to use
-      document.cookie = `zuplo-build=${buildStatusQuery.data.buildId}; path=/; max-age=300; secure; SameSite=None`;
-    }
-  }, [buildStatusQuery.data]);
-
-  if (
-    buildStatusQuery.isError ||
-    !buildStatusQuery.data ||
-    buildStatusQuery.data.buildId === buildId
-  ) {
-    return null;
-  }
-
-  const isCompleted = buildStatusQuery.data.status === "success";
-
-  return (
-    <div className="fixed flex flex-col gap-3 p-4 rounded-xl w-96 border z-20 bg-background left-0 right-0 top-4 mx-auto shadow-lg">
-      {isCompleted ? (
-        <div className="flex flex-row items-center gap-2">
-          <CircleFadingArrowUpIcon size={16} />
-          <span className="text-sm">New version available</span>
-        </div>
-      ) : (
-        <div className="flex flex-row items-center gap-2">
-          <LoaderCircleIcon size={16} className="animate-spin" />
-          <span className="text-sm">Building new version...</span>
-        </div>
-      )}
-      <span className="text-xs">
-        {!isCompleted
-          ? "A new version of the developer portal will be available soon."
-          : "To see the new version, reload the page now."}
-      </span>
-      {isCompleted && (
-        <Button
-          variant="outline"
-          size="sm"
-          className="w-full"
-          onClick={() => {
-            window.location.reload();
-          }}
-        >
-          Reload
-        </Button>
-      )}
-    </div>
-  );
-};
+import { useQuery } from "@tanstack/react-query";
+import { CircleFadingArrowUpIcon, LoaderCircleIcon } from "lucide-react";
+import { useEffect } from "react";
+import { z } from "zod/mini";
+import { Button } from "../ui/Button.js";
+
+const BuildStatusSchema = z.object({
+  buildId: z.string(),
+  timestamp: z.string(),
+  status: z.enum(["in-progress", "success", "failed"]),
+});
+
+export const BuildCheck = ({
+  buildId,
+  environmentType,
+  endpoint = "/__zuplo/docs",
+}: {
+  buildId?: string;
+  environmentType?: string;
+  endpoint?: string;
+}) => {
+  const buildStatusQuery = useQuery({
+    queryKey: ["zuplo-build-check", buildId, endpoint],
+    refetchInterval: 3000,
+    enabled: buildId !== undefined && environmentType === "WORKING_COPY",
+    retry: false,
+    queryFn: async () => {
+      const res = await fetch(endpoint, { signal: AbortSignal.timeout(2000) });
+      if (!res.ok) throw new Error("Failed to fetch build status");
+      const data: unknown = await res.json();
+      return BuildStatusSchema.parse(data);
+    },
+  });
+
+  useEffect(() => {
+    if (
+      buildStatusQuery.data?.status === "success" &&
+      buildStatusQuery.data.buildId
+    ) {
+      // biome-ignore lint/suspicious/noDocumentCookie: CookieStore too new to use
+      document.cookie = `zuplo-build=${buildStatusQuery.data.buildId}; path=/; max-age=300; secure; SameSite=None`;
+    }
+  }, [buildStatusQuery.data]);
+
+  if (
+    buildStatusQuery.isError ||
+    !buildStatusQuery.data ||
+    buildStatusQuery.data.buildId === buildId
+  ) {
+    return null;
+  }
+
+  const isCompleted = buildStatusQuery.data.status === "success";
+
+  return (
+    <div className="fixed flex flex-col gap-3 p-4 rounded-xl w-96 border z-20 bg-background left-0 right-0 top-4 mx-auto shadow-lg">
+      {isCompleted ? (
+        <div className="flex flex-row items-center gap-2">
+          <CircleFadingArrowUpIcon size={16} />
+          <span className="text-sm">New version available</span>
+        </div>
+      ) : (
+        <div className="flex flex-row items-center gap-2">
+          <LoaderCircleIcon size={16} className="animate-spin" />
+          <span className="text-sm">Building new version...</span>
+        </div>
+      )}
+      <span className="text-xs">
+        {!isCompleted
+          ? "A new version of the developer portal will be available soon."
+          : "To see the new version, reload the page now."}
+      </span>
+      {isCompleted && (
+        <Button
+          variant="outline"
+          size="sm"
+          className="w-full"
+          onClick={() => {
+            window.location.reload();
+          }}
+        >
+          Reload
+        </Button>
+      )}
+    </div>
+  );
+};

package/src/lib/components/CategoryHeading.tsx

@@ -1,19 +1,19 @@
-import { cx } from "class-variance-authority";
-import type { ReactNode } from "react";
-
-export const CategoryHeading = ({
-  children,
-  className,
-}: {
-  children: ReactNode;
-  className?: string;
-}) => {
-  return (
-    <div
-      className={cx("text-sm font-semibold text-primary", className)}
-      data-pagefind-ignore="all"
-    >
-      {children}
-    </div>
-  );
-};
+import { cx } from "class-variance-authority";
+import type { ReactNode } from "react";
+
+export const CategoryHeading = ({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}) => {
+  return (
+    <div
+      className={cx("text-sm font-semibold text-primary", className)}
+      data-pagefind-ignore="all"
+    >
+      {children}
+    </div>
+  );
+};

package/src/lib/components/ClientOnly.tsx

@@ -1,19 +1,19 @@
-import { type ReactNode, useSyncExternalStore } from "react";
-
-const noop = () => () => {};
-
-export const useIsClient = () => {
-  const value = useSyncExternalStore(
-    noop,
-    () => "client",
-    () => "server",
-  );
-  return value === "client";
-};
-
-export const ClientOnly = (props: {
-  children: ReactNode;
-  fallback?: ReactNode;
-}) => {
-  return useIsClient() ? props.children : props.fallback;
-};
+import { type ReactNode, useSyncExternalStore } from "react";
+
+const noop = () => () => {};
+
+export const useIsClient = () => {
+  const value = useSyncExternalStore(
+    noop,
+    () => "client",
+    () => "server",
+  );
+  return value === "client";
+};
+
+export const ClientOnly = (props: {
+  children: ReactNode;
+  fallback?: ReactNode;
+}) => {
+  return useIsClient() ? props.children : props.fallback;
+};

package/src/lib/components/ErrorPage.tsx

@@ -1,26 +1,26 @@
-import type { ReactNode } from "react";
-import { CategoryHeading } from "./CategoryHeading.js";
-import { Heading } from "./Heading.js";
-import { Typography } from "./Typography.js";
-
-export const ErrorPage = ({
-  title = "An error occurred",
-  message,
-  category,
-}: {
-  title?: ReactNode;
-  message?: ReactNode;
-  category?: ReactNode;
-}) => {
-  return (
-    <Typography className={"h-full pt-(--padding-content-top)"}>
-      {category && <CategoryHeading>{category}</CategoryHeading>}
-      {title && (
-        <Heading level={1} className="flex gap-3.5 items-center">
-          {title}
-        </Heading>
-      )}
-      <p>{message}</p>
-    </Typography>
-  );
-};
+import type { ReactNode } from "react";
+import { CategoryHeading } from "./CategoryHeading.js";
+import { Heading } from "./Heading.js";
+import { Typography } from "./Typography.js";
+
+export const ErrorPage = ({
+  title = "An error occurred",
+  message,
+  category,
+}: {
+  title?: ReactNode;
+  message?: ReactNode;
+  category?: ReactNode;
+}) => {
+  return (
+    <Typography className={"h-full pt-(--padding-content-top)"}>
+      {category && <CategoryHeading>{category}</CategoryHeading>}
+      {title && (
+        <Heading level={1} className="flex gap-3.5 items-center">
+          {title}
+        </Heading>
+      )}
+      <p>{message}</p>
+    </Typography>
+  );
+};