@mehdad67/apitogo 0.1.24

package/src/lib/shiki-constants.ts

@@ -0,0 +1,24 @@
+import type { BundledLanguage } from "shiki";
+
+export const HIGHLIGHT_CODE_BLOCK_CLASS =
+  "overflow-x-auto scrollbar not-inline";
+
+export const defaultLanguages: BundledLanguage[] = [
+  "shellscript",
+  "javascript",
+  "jsx",
+  "typescript",
+  "tsx",
+  "json",
+  "jsonc",
+  "yaml",
+  "python",
+  "java",
+  "go",
+  "graphql",
+  "html",
+  "css",
+  "xml",
+  "markdown",
+  "mdx",
+];

package/src/lib/shiki.ts

@@ -0,0 +1,179 @@
+import rehypeShikiFromHighlighter, {
+  type RehypeShikiCoreOptions,
+} from "@shikijs/rehype/core";
+import {
+  transformerMetaHighlight,
+  transformerMetaWordHighlight,
+} from "@shikijs/transformers";
+import type { Root } from "hast";
+import { toJsxRuntime } from "hast-util-to-jsx-runtime";
+import { createElement, Fragment } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import type {
+  BundledTheme,
+  CodeOptionsMultipleThemes,
+  HighlighterCore,
+} from "shiki";
+import { getSingletonHighlighterCore } from "shiki/core";
+import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
+import type { Pluggable } from "unified";
+import { visit } from "unist-util-visit";
+import { HIGHLIGHT_CODE_BLOCK_CLASS } from "./shiki-constants.js";
+import { cn } from "./util/cn.js";
+
+export {
+  HIGHLIGHT_CODE_BLOCK_CLASS,
+  defaultLanguages,
+} from "./shiki-constants.js";
+
+export const highlighterPromise = getSingletonHighlighterCore({
+  engine: createJavaScriptRegexEngine({ forgiving: true }),
+  langAlias: {
+    markup: "html",
+    svg: "xml",
+    mathml: "xml",
+    atom: "xml",
+    ssml: "xml",
+    rss: "xml",
+    webmanifest: "json",
+  },
+});
+
+type ThemesRecord = CodeOptionsMultipleThemes<BundledTheme>["themes"];
+
+const warnedLanguages = new Set<string>();
+
+const warnUnloadedLanguage = (lang: string, highlighter: HighlighterCore) => {
+  const resolved = highlighter.resolveLangAlias(lang);
+  if (
+    warnedLanguages.has(lang) ||
+    resolved === "ansi" ||
+    resolved === "text" ||
+    highlighter.getLoadedLanguages().includes(resolved)
+  )
+    return;
+  warnedLanguages.add(lang);
+  // biome-ignore lint/suspicious/noConsole: Intentional warning
+  console.warn(
+    `Language "${lang}" is not loaded for syntax highlighting. ` +
+      `Add it to \`syntaxHighlighting.languages\` in your config. Falling back to plain text.\n` +
+      `See https://docs.apitogo.com/docs/markdown/code-blocks#configuration`,
+  );
+};
+
+export const parseMetaString = (str: string) => {
+  const matches = str.matchAll(
+    /([a-z0-9]+)(?:=(["'])(.*?)\2|=(.*?)(?:\s|$)|(?:\s|$))/gi,
+  );
+  return Object.fromEntries(
+    Array.from(matches).map((match) => {
+      const key = match[1];
+      const raw = match[3] ?? match[4];
+      const value =
+        raw == null || raw === "true" ? true : raw === "false" ? false : raw;
+      return [key, value];
+    }),
+  );
+};
+
+export const defaultHighlightOptions = {
+  themes: {
+    light: "github-light",
+    dark: "github-dark",
+  },
+  defaultColor: false,
+  defaultLanguage: "text",
+  fallbackLanguage: "text",
+  inline: "tailing-curly-colon",
+  addLanguageClass: true,
+  transformers: [transformerMetaHighlight(), transformerMetaWordHighlight()],
+  parseMetaString,
+} satisfies RehypeShikiCoreOptions;
+
+const rehypeCodeBlockPlugin = () => (tree: Root) => {
+  visit(tree, "element", (node, _index, parent) => {
+    if (node.tagName !== "code") return;
+
+    const isCodeBlock = parent?.type === "element" && parent.tagName === "pre";
+    node.properties.inline = JSON.stringify(!isCodeBlock);
+
+    // Pass through properties from <pre> to <code> so we can handle it in `code` only
+    if (isCodeBlock) {
+      node.properties = {
+        ...node.properties,
+        ...structuredClone(parent.properties),
+        class: cn(node.properties.class, parent.properties.class),
+      };
+      parent.properties = {};
+    }
+  });
+};
+
+const rehypeWarnUnloadedLanguages =
+  (highlighter: HighlighterCore) => () => (tree: Root) => {
+    visit(tree, "element", (node) => {
+      if (!node.properties.className) return;
+      if (node.tagName !== "code" && node.tagName !== "pre") return;
+
+      const lang = (node.properties.className as string[] | undefined)
+        ?.find((c) => c.startsWith("language-"))
+        ?.slice("language-".length);
+
+      if (lang) warnUnloadedLanguage(lang, highlighter);
+    });
+  };
+
+export const createConfiguredShikiRehypePlugins = (
+  highlighterInstance: HighlighterCore,
+  themes: ThemesRecord = defaultHighlightOptions.themes,
+) => [
+  rehypeWarnUnloadedLanguages(highlighterInstance),
+  [
+    rehypeShikiFromHighlighter,
+    highlighterInstance,
+    { ...defaultHighlightOptions, themes },
+  ] satisfies Pluggable,
+  rehypeCodeBlockPlugin,
+];
+
+export const highlight = (
+  highlighter: HighlighterCore,
+  code: string,
+  lang = "text",
+  themes: ThemesRecord = defaultHighlightOptions.themes,
+  meta?: string,
+) => {
+  const resolved = highlighter.resolveLangAlias(lang);
+  const effectiveLang = highlighter.getLoadedLanguages().includes(resolved)
+    ? lang
+    : "text";
+
+  if (effectiveLang !== lang) warnUnloadedLanguage(lang, highlighter);
+
+  const value = highlighter.codeToHast(code, {
+    lang: effectiveLang,
+    ...defaultHighlightOptions,
+    themes,
+    ...(meta && { meta: { __raw: meta } }),
+  });
+
+  // Shiki always outputs <pre><code>...</code></pre>, but callers of this
+  // function (HighlightedCode, CodeTabs) provide their own wrapper so the
+  // <pre> is unwanted. We reuse rehypeCodeBlockPlugin to merge <pre> props
+  // onto <code>, then strip <pre> during JSX conversion.
+  rehypeCodeBlockPlugin()(value);
+
+  return toJsxRuntime(value, {
+    Fragment,
+    jsx,
+    jsxs,
+    components: {
+      pre: (props) => props.children,
+      code: (props) =>
+        createElement("code", {
+          ...props,
+          className: cn(props.className, HIGHLIGHT_CODE_BLOCK_CLASS),
+        }),
+    },
+  });
+};

package/src/lib/testing/index.tsx

@@ -0,0 +1,146 @@
+import {
+  QueryClient,
+  QueryClientProvider,
+  type QueryKey,
+} from "@tanstack/react-query";
+import { HelmetProvider } from "@zudoku/react-helmet-async";
+import { createMemoryRouter, Outlet, RouterProvider } from "react-router";
+import { createRedirectRoutes } from "../../app/utils/createRedirectRoutes.js";
+import type { ZudokuRedirect } from "../../config/validators/ZudokuConfig.js";
+import type { AuthenticationPlugin } from "../authentication/authentication.js";
+import { useAuthState } from "../authentication/state.js";
+import { RenderContext } from "../components/context/RenderContext.js";
+import { Layout } from "../components/Layout.js";
+import { Meta } from "../components/Meta.js";
+import { Zudoku } from "../components/Zudoku.js";
+import { isNavigationPlugin, type RouteObject } from "../core/plugins.js";
+import { RouteGuard } from "../core/RouteGuard.js";
+import type { ZudokuContextOptions } from "../core/ZudokuContext.js";
+import { RouterError } from "../errors/RouterError.js";
+
+type QueryData = {
+  queryKey: QueryKey;
+  data: unknown;
+};
+
+/**
+ * @deprecated Use {@link StaticApitogoProps} instead.
+ */
+export type StaticZudokuProps = ZudokuContextOptions & {
+  path: string;
+  queryData?: QueryData[];
+  env?: Record<string, string>;
+  isAuthenticated?: boolean;
+  redirects?: ZudokuRedirect[];
+};
+
+/** Prefer this over {@link StaticZudokuProps}. */
+export type StaticApitogoProps = StaticZudokuProps;
+
+const getRoutesByOptions = (options: ZudokuContextOptions) => {
+  return [
+    ...(options.plugins ?? []),
+    ...(options.authentication ? [options.authentication] : []),
+  ].flatMap((plugin) => (isNavigationPlugin(plugin) ? plugin.getRoutes() : []));
+};
+
+const wrapWithLayout = (route: RouteObject) => ({
+  element: <Layout />,
+  children: [route],
+});
+
+const noopAuth: AuthenticationPlugin = {
+  signIn: async () => {},
+  signOut: async () => {},
+  signUp: async () => {},
+  signRequest: async (req) => req,
+};
+
+const StaticZudoku = ({
+  path,
+  queryData,
+  env = {},
+  isAuthenticated,
+  redirects,
+  ...options
+}: StaticZudokuProps) => {
+  if (isAuthenticated) {
+    useAuthState.setState({
+      isAuthenticated: true,
+      isPending: false,
+      profile: {
+        sub: "test-user",
+        email: "test@example.com",
+        emailVerified: true,
+        name: "Test User",
+        pictureUrl: undefined,
+      },
+      providerData: null,
+    });
+
+    options.plugins = [...(options.plugins ?? []), noopAuth];
+  }
+
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        staleTime: 1000 * 60 * 5,
+        retry: false,
+        // Ensure un-mocked queries fail immediately instead of hanging
+        queryFn: () => {
+          throw new Error("No queryData provided for this query key");
+        },
+      },
+    },
+  });
+
+  queryClient.setQueryData(["zudoku-initialize", "no-dehydrate"], true);
+
+  for (const { queryKey, data } of queryData ?? []) {
+    queryClient.setQueryData(queryKey, data);
+  }
+
+  const routes = getRoutesByOptions(options);
+  const router = createMemoryRouter(
+    [
+      ...createRedirectRoutes(redirects),
+      {
+        element: (
+          <Zudoku {...options} env={env}>
+            <Outlet />
+          </Zudoku>
+        ),
+        hydrateFallbackElement: <div>Loading...</div>,
+        children: [
+          {
+            element: (
+              <Meta>
+                <RouteGuard />
+              </Meta>
+            ),
+            errorElement: <RouterError />,
+            children: routes.map((r) =>
+              r.handle?.layout === "none" ? r : wrapWithLayout(r),
+            ),
+          },
+        ],
+      },
+    ],
+    { initialEntries: [path] },
+  );
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <HelmetProvider>
+        <RenderContext value={{ status: 200, bypassProtection: false }}>
+          <RouterProvider router={router} />
+        </RenderContext>
+      </HelmetProvider>
+    </QueryClientProvider>
+  );
+};
+
+/**
+ * @deprecated Use {@link StaticApitogo} and {@link StaticApitogoProps} instead.
+ */
+export { StaticZudoku, StaticZudoku as StaticApitogo, type QueryData };

package/src/lib/ui/Accordion.tsx

@@ -0,0 +1,55 @@
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDown } from "lucide-react";
+import * as React from "react";
+import { cn } from "../util/cn.js";
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+));
+AccordionItem.displayName = "AccordionItem";
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+));
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/src/lib/ui/ActionButton.tsx

@@ -0,0 +1,21 @@
+import { Button, type ButtonProps } from "@lukoweb/apitogo/ui/Button.js";
+import { Spinner } from "../components/Spinner.js";
+import { cn } from "../util/cn.js";
+
+type ActionButtonProps = ButtonProps & { isPending?: boolean };
+
+export const ActionButton = ({
+  isPending,
+  children,
+  className,
+  ...props
+}: ActionButtonProps) => (
+  <Button disabled={isPending} {...props} className={cn("relative", className)}>
+    {isPending && (
+      <div className="absolute inset-0 grid place-items-center">
+        <Spinner />
+      </div>
+    )}
+    <span className={cn("block", isPending && "invisible")}>{children}</span>
+  </Button>
+);

package/src/lib/ui/Alert.tsx

@@ -0,0 +1,84 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+import { cn } from "../util/cn.js";
+
+const alertVariants = cva(
+  "grid gap-0.5 rounded-lg border text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        info: "bg-blue-50 text-blue-700 border-blue-200 dark:bg-blue-900/45 dark:text-blue-200 dark:border-blue-900/75",
+        destructive:
+          "text-destructive bg-card bg-destructive/5 border-destructive/20 *:data-[slot=alert-description]:text-destructive *:[svg]:text-current",
+        warning:
+          "text-warning-foreground bg-card bg-warning/5 border-warning/50 *:data-[slot=alert-description]:text-warning-foreground *:[svg]:text-current",
+      },
+      fit: {
+        default: "px-2.5 py-2",
+        loose: "p-4",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      fit: "default",
+    },
+  },
+);
+
+function Alert({
+  className,
+  fit,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant, fit }), className)}
+      {...props}
+    />
+  );
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "font-medium group-has-[>svg]/alert:col-start-2 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-action"
+      className={cn("absolute top-2 right-2", className)}
+      {...props}
+    />
+  );
+}
+
+export { Alert, AlertTitle, AlertDescription, AlertAction };

package/src/lib/ui/AlertDialog.tsx

@@ -0,0 +1,195 @@
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import { cn } from "../util/cn.js";
+import { Button } from "./Button.js";
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  );
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  );
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogContent({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {
+  size?: "default" | "sm";
+}) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        data-size={size}
+        className={cn(
+          "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 bg-background ring-foreground/10 gap-4 rounded-xl p-4 ring-1 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 outline-none",
+          className,
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  );
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn(
+        "grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4 flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogMedia({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-media"
+      className={cn(
+        "bg-muted mb-2 inline-flex size-10 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn(
+        "text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn(
+        "text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogAction({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action> &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+  return (
+    <Button variant={variant} size={size} asChild>
+      <AlertDialogPrimitive.Action
+        data-slot="alert-dialog-action"
+        className={cn(className)}
+        {...props}
+      />
+    </Button>
+  );
+}
+
+function AlertDialogCancel({
+  className,
+  variant = "outline",
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+  return (
+    <Button variant={variant} size={size} asChild>
+      <AlertDialogPrimitive.Cancel
+        data-slot="alert-dialog-cancel"
+        className={cn(className)}
+        {...props}
+      />
+    </Button>
+  );
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+};