@useatlas/react 0.0.1

package/src/components/ui/toggle-group.tsx

@@ -0,0 +1,83 @@
+"use client"
+
+import * as React from "react"
+import { type VariantProps } from "class-variance-authority"
+import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui"
+
+import { cn } from "../../lib/utils"
+import { toggleVariants } from "./toggle"
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number
+  }
+>({
+  size: "default",
+  variant: "default",
+  spacing: 0,
+})
+
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  spacing = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number
+  }) {
+  return (
+    <ToggleGroupPrimitive.Root
+      data-slot="toggle-group"
+      data-variant={variant}
+      data-size={size}
+      data-spacing={spacing}
+      style={{ "--gap": spacing } as React.CSSProperties}
+      className={cn(
+        "group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs",
+        className
+      )}
+      {...props}
+    >
+      <ToggleGroupContext.Provider value={{ variant, size, spacing }}>
+        {children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive.Root>
+  )
+}
+
+function ToggleGroupItem({
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
+  VariantProps<typeof toggleVariants>) {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <ToggleGroupPrimitive.Item
+      data-slot="toggle-group-item"
+      data-variant={context.variant || variant}
+      data-size={context.size || size}
+      data-spacing={context.spacing}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        "w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10",
+        "data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  )
+}
+
+export { ToggleGroup, ToggleGroupItem }

package/src/components/ui/toggle.tsx

@@ -0,0 +1,47 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Toggle as TogglePrimitive } from "radix-ui"
+
+import { cn } from "../../lib/utils"
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-9 min-w-9 px-2",
+        sm: "h-8 min-w-8 px-1.5",
+        lg: "h-10 min-w-10 px-2.5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Toggle({
+  className,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof TogglePrimitive.Root> &
+  VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive.Root
+      data-slot="toggle"
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Toggle, toggleVariants }

package/src/context.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import { createContext, useContext, useMemo, type ReactNode } from "react";
+
+/**
+ * Duck-typed interface that matches better-auth's client shape.
+ * Components like ManagedAuthCard call signIn/signUp/signOut and useSession().
+ */
+export interface AtlasAuthClient {
+  signIn: {
+    email: (opts: { email: string; password: string }) => Promise<{ error?: { message?: string } | null }>;
+  };
+  signUp: {
+    email: (opts: { email: string; password: string; name: string }) => Promise<{ error?: { message?: string } | null }>;
+  };
+  signOut: () => Promise<unknown>;
+  useSession: () => { data?: { user?: { email?: string } } | null; isPending?: boolean };
+}
+
+export interface AtlasUIConfig {
+  apiUrl: string;
+  authClient: AtlasAuthClient;
+}
+
+/** Internal context value — includes derived `isCrossOrigin` computed by the provider. */
+interface AtlasUIContextValue extends AtlasUIConfig {
+  isCrossOrigin: boolean;
+}
+
+const AtlasUIContext = createContext<AtlasUIContextValue | null>(null);
+
+export function useAtlasConfig(): AtlasUIContextValue {
+  const ctx = useContext(AtlasUIContext);
+  if (!ctx) throw new Error("useAtlasConfig must be used within <AtlasUIProvider>");
+  return ctx;
+}
+
+export function AtlasUIProvider({
+  config,
+  children,
+}: {
+  config: AtlasUIConfig;
+  children: ReactNode;
+}) {
+  const isCrossOrigin = typeof window !== "undefined"
+    && config.apiUrl !== ""
+    && !config.apiUrl.startsWith(window.location.origin);
+  return (
+    <AtlasUIContext.Provider value={{ ...config, isCrossOrigin }}>
+      {children}
+    </AtlasUIContext.Provider>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  ActionAuth — internal context for passing auth to action cards     */
+/* ------------------------------------------------------------------ */
+
+export interface ActionAuthValue {
+  getHeaders: () => Record<string, string>;
+  getCredentials: () => RequestCredentials;
+}
+
+const ActionAuthContext = createContext<ActionAuthValue | null>(null);
+
+/** Returns auth helpers for action API calls, or null when no provider is present. */
+export function useActionAuth(): ActionAuthValue | null {
+  return useContext(ActionAuthContext);
+}
+
+export function ActionAuthProvider({
+  getHeaders,
+  getCredentials,
+  children,
+}: ActionAuthValue & { children: ReactNode }) {
+  const value = useMemo(
+    () => ({ getHeaders, getCredentials }),
+    [getHeaders, getCredentials],
+  );
+  return (
+    <ActionAuthContext.Provider value={value}>
+      {children}
+    </ActionAuthContext.Provider>
+  );
+}

package/src/env.d.ts

@@ -0,0 +1,9 @@
+/** Optional runtime dependency — dynamically imported for Excel export. */
+declare module "xlsx" {
+  const utils: {
+    json_to_sheet: (data: unknown[], opts?: { header?: string[] }) => unknown;
+    book_new: () => unknown;
+    book_append_sheet: (wb: unknown, ws: unknown, name: string) => void;
+  };
+  function write(wb: unknown, opts: { bookType: string; type: string }): ArrayBuffer;
+}

package/src/hooks/__tests__/provider.test.tsx

@@ -0,0 +1,83 @@
+import { describe, it, expect } from "bun:test";
+import { renderHook } from "@testing-library/react";
+import { AtlasProvider, useAtlasContext } from "../provider";
+import type { ReactNode } from "react";
+
+function wrapper({ children }: { children: ReactNode }) {
+  return (
+    <AtlasProvider apiUrl="https://api.example.com" apiKey="test-key">
+      {children}
+    </AtlasProvider>
+  );
+}
+
+describe("AtlasProvider", () => {
+  it("provides context values to children", () => {
+    const { result } = renderHook(() => useAtlasContext(), { wrapper });
+
+    expect(result.current.apiUrl).toBe("https://api.example.com");
+    expect(result.current.apiKey).toBe("test-key");
+    expect(result.current.isCrossOrigin).toBe(true);
+    expect(result.current.authClient).toBeDefined();
+  });
+
+  it("throws when useAtlasContext is called outside provider", () => {
+    expect(() => {
+      renderHook(() => useAtlasContext());
+    }).toThrow("useAtlasContext must be used within <AtlasProvider>");
+  });
+
+  it("noop auth client warns and returns error on use", async () => {
+    const { result } = renderHook(() => useAtlasContext(), { wrapper });
+
+    const session = result.current.authClient.useSession();
+    expect(session.data).toBeNull();
+    expect(session.isPending).toBe(false);
+
+    const signInResult = await result.current.authClient.signIn.email({
+      email: "test@test.com",
+      password: "pass",
+    });
+    expect(signInResult.error?.message).toBe("Auth client not configured");
+  });
+
+  it("detects same-origin URLs", () => {
+    function sameOriginWrapper({ children }: { children: ReactNode }) {
+      return (
+        <AtlasProvider apiUrl="">
+          {children}
+        </AtlasProvider>
+      );
+    }
+
+    const { result } = renderHook(() => useAtlasContext(), {
+      wrapper: sameOriginWrapper,
+    });
+
+    expect(result.current.isCrossOrigin).toBe(false);
+  });
+
+  it("accepts a custom auth client", () => {
+    const customAuthClient = {
+      signIn: { email: async () => ({ error: null }) },
+      signUp: { email: async () => ({ error: null }) },
+      signOut: async () => {},
+      useSession: () => ({ data: { user: { email: "test@test.com" } }, isPending: false }),
+    };
+
+    function customWrapper({ children }: { children: ReactNode }) {
+      return (
+        <AtlasProvider apiUrl="https://api.example.com" authClient={customAuthClient}>
+          {children}
+        </AtlasProvider>
+      );
+    }
+
+    const { result } = renderHook(() => useAtlasContext(), {
+      wrapper: customWrapper,
+    });
+
+    const session = result.current.authClient.useSession();
+    expect(session.data?.user?.email).toBe("test@test.com");
+  });
+});

package/src/hooks/__tests__/use-atlas-auth.test.tsx

@@ -0,0 +1,283 @@
+import { describe, it, expect, beforeEach, afterEach, mock } from "bun:test";
+import { renderHook, waitFor, act } from "@testing-library/react";
+import { AtlasProvider } from "../provider";
+import { useAtlasAuth } from "../use-atlas-auth";
+import type { ReactNode } from "react";
+
+const fetchMock = mock(() =>
+  Promise.resolve(
+    new Response(
+      JSON.stringify({ checks: { auth: { mode: "simple-key" } } }),
+      { status: 200, headers: { "Content-Type": "application/json" } },
+    ),
+  ),
+);
+
+const originalFetch = globalThis.fetch;
+
+beforeEach(() => {
+  globalThis.fetch = fetchMock as unknown as typeof fetch;
+  fetchMock.mockClear();
+});
+
+afterEach(() => {
+  globalThis.fetch = originalFetch;
+});
+
+function wrapper({ children }: { children: ReactNode }) {
+  return (
+    <AtlasProvider apiUrl="https://api.example.com" apiKey="test-key">
+      {children}
+    </AtlasProvider>
+  );
+}
+
+describe("useAtlasAuth", () => {
+  it("starts in loading state", () => {
+    const { result } = renderHook(() => useAtlasAuth(), { wrapper });
+    expect(result.current.authMode).toBeNull();
+    expect(result.current.isLoading).toBe(true);
+    expect(result.current.isAuthenticated).toBe(false);
+    expect(result.current.error).toBeNull();
+  });
+
+  it("detects auth mode from health endpoint", async () => {
+    const { result } = renderHook(() => useAtlasAuth(), { wrapper });
+
+    await waitFor(() => {
+      expect(result.current.authMode).toBe("simple-key");
+    });
+
+    expect(result.current.isLoading).toBe(false);
+    expect(result.current.isAuthenticated).toBe(true);
+    expect(result.current.error).toBeNull();
+  });
+
+  it("reports unauthenticated when no API key for simple-key mode", async () => {
+    function noKeyWrapper({ children }: { children: ReactNode }) {
+      return (
+        <AtlasProvider apiUrl="https://api.example.com">
+          {children}
+        </AtlasProvider>
+      );
+    }
+
+    const { result } = renderHook(() => useAtlasAuth(), {
+      wrapper: noKeyWrapper,
+    });
+
+    await waitFor(() => {
+      expect(result.current.authMode).toBe("simple-key");
+    });
+
+    expect(result.current.isAuthenticated).toBe(false);
+  });
+
+  it("reports authenticated for none auth mode without credentials", async () => {
+    fetchMock.mockImplementation(() =>
+      Promise.resolve(
+        new Response(
+          JSON.stringify({ checks: { auth: { mode: "none" } } }),
+          { status: 200, headers: { "Content-Type": "application/json" } },
+        ),
+      ),
+    );
+
+    function noKeyWrapper({ children }: { children: ReactNode }) {
+      return (
+        <AtlasProvider apiUrl="https://api.example.com">
+          {children}
+        </AtlasProvider>
+      );
+    }
+
+    const { result } = renderHook(() => useAtlasAuth(), {
+      wrapper: noKeyWrapper,
+    });
+
+    await waitFor(() => {
+      expect(result.current.authMode).toBe("none");
+    });
+
+    expect(result.current.isAuthenticated).toBe(true);
+  });
+
+  it("reports authenticated for byot mode with API key", async () => {
+    fetchMock.mockImplementation(() =>
+      Promise.resolve(
+        new Response(
+          JSON.stringify({ checks: { auth: { mode: "byot" } } }),
+          { status: 200, headers: { "Content-Type": "application/json" } },
+        ),
+      ),
+    );
+
+    const { result } = renderHook(() => useAtlasAuth(), { wrapper });
+
+    await waitFor(() => {
+      expect(result.current.authMode).toBe("byot");
+    });
+
+    expect(result.current.isAuthenticated).toBe(true);
+  });
+
+  it("falls back to none and sets error on health endpoint failure", async () => {
+    fetchMock.mockImplementation(() =>
+      Promise.resolve(new Response("", { status: 500 })),
+    );
+
+    const { result } = renderHook(() => useAtlasAuth(), { wrapper });
+
+    await waitFor(
+      () => {
+        expect(result.current.authMode).toBe("none");
+      },
+      { timeout: 10000 },
+    );
+
+    expect(result.current.error).not.toBeNull();
+    expect(result.current.error!.message).toContain("500");
+  });
+
+  it("falls back to none and sets error on network failure", async () => {
+    fetchMock.mockImplementation(() =>
+      Promise.reject(new Error("Network unreachable")),
+    );
+
+    const { result } = renderHook(() => useAtlasAuth(), { wrapper });
+
+    await waitFor(
+      () => {
+        expect(result.current.authMode).toBe("none");
+      },
+      { timeout: 10000 },
+    );
+
+    expect(result.current.error).not.toBeNull();
+    expect(result.current.error!.message).toBe("Network unreachable");
+  });
+
+  it("login delegates to authClient and returns error", async () => {
+    const mockSignIn = mock(() =>
+      Promise.resolve({ error: { message: "Invalid credentials" } }),
+    );
+    const customAuthClient = {
+      signIn: { email: mockSignIn },
+      signUp: { email: async () => ({ error: null }) },
+      signOut: async () => {},
+      useSession: () => ({ data: null, isPending: false }),
+    };
+
+    function customWrapper({ children }: { children: ReactNode }) {
+      return (
+        <AtlasProvider apiUrl="https://api.example.com" authClient={customAuthClient}>
+          {children}
+        </AtlasProvider>
+      );
+    }
+
+    const { result } = renderHook(() => useAtlasAuth(), { wrapper: customWrapper });
+
+    let loginResult: { error?: string } = {};
+    await act(async () => {
+      loginResult = await result.current.login("user@test.com", "wrong");
+    });
+
+    expect(mockSignIn).toHaveBeenCalledWith({
+      email: "user@test.com",
+      password: "wrong",
+    });
+    expect(loginResult.error).toBe("Invalid credentials");
+  });
+
+  it("login catches thrown exceptions from auth client", async () => {
+    const customAuthClient = {
+      signIn: { email: async () => { throw new Error("Network error"); } },
+      signUp: { email: async () => ({ error: null }) },
+      signOut: async () => {},
+      useSession: () => ({ data: null, isPending: false }),
+    };
+
+    function customWrapper({ children }: { children: ReactNode }) {
+      return (
+        <AtlasProvider apiUrl="https://api.example.com" authClient={customAuthClient}>
+          {children}
+        </AtlasProvider>
+      );
+    }
+
+    const { result } = renderHook(() => useAtlasAuth(), { wrapper: customWrapper });
+
+    let loginResult: { error?: string } = {};
+    await act(async () => {
+      loginResult = await result.current.login("user@test.com", "pass");
+    });
+
+    expect(loginResult.error).toBe("Network error");
+  });
+
+  it("logout returns error instead of throwing", async () => {
+    const customAuthClient = {
+      signIn: { email: async () => ({ error: null }) },
+      signUp: { email: async () => ({ error: null }) },
+      signOut: async () => { throw new Error("Session expired"); },
+      useSession: () => ({ data: null, isPending: false }),
+    };
+
+    function customWrapper({ children }: { children: ReactNode }) {
+      return (
+        <AtlasProvider apiUrl="https://api.example.com" authClient={customAuthClient}>
+          {children}
+        </AtlasProvider>
+      );
+    }
+
+    const { result } = renderHook(() => useAtlasAuth(), { wrapper: customWrapper });
+
+    let logoutResult: { error?: string } = {};
+    await act(async () => {
+      logoutResult = await result.current.logout();
+    });
+
+    expect(logoutResult.error).toBe("Session expired");
+  });
+
+  it("managed auth with active session is authenticated", async () => {
+    fetchMock.mockImplementation(() =>
+      Promise.resolve(
+        new Response(
+          JSON.stringify({ checks: { auth: { mode: "managed" } } }),
+          { status: 200, headers: { "Content-Type": "application/json" } },
+        ),
+      ),
+    );
+
+    const customAuthClient = {
+      signIn: { email: async () => ({ error: null }) },
+      signUp: { email: async () => ({ error: null }) },
+      signOut: async () => {},
+      useSession: () => ({
+        data: { user: { email: "user@test.com" } },
+        isPending: false,
+      }),
+    };
+
+    function managedWrapper({ children }: { children: ReactNode }) {
+      return (
+        <AtlasProvider apiUrl="https://api.example.com" authClient={customAuthClient}>
+          {children}
+        </AtlasProvider>
+      );
+    }
+
+    const { result } = renderHook(() => useAtlasAuth(), { wrapper: managedWrapper });
+
+    await waitFor(() => {
+      expect(result.current.authMode).toBe("managed");
+    });
+
+    expect(result.current.isAuthenticated).toBe(true);
+    expect(result.current.isLoading).toBe(false);
+    expect(result.current.session?.user?.email).toBe("user@test.com");
+  });
+});