@checkstack/theme-frontend 0.0.6 → 0.1.0

package/CHANGELOG.md

@@ -1,5 +1,68 @@
 # @checkstack/theme-frontend
 
+## 0.1.0
+
+### Minor Changes
+
+- 7a23261: ## TanStack Query Integration
+
+  Migrated all frontend components to use `usePluginClient` hook with TanStack Query integration, replacing the legacy `forPlugin()` pattern.
+
+  ### New Features
+
+  - **`usePluginClient` hook**: Provides type-safe access to plugin APIs with `.useQuery()` and `.useMutation()` methods
+  - **Automatic request deduplication**: Multiple components requesting the same data share a single network request
+  - **Built-in caching**: Configurable stale time and cache duration per query
+  - **Loading/error states**: TanStack Query provides `isLoading`, `error`, `isRefetching` states automatically
+  - **Background refetching**: Stale data is automatically refreshed when components mount
+
+  ### Contract Changes
+
+  All RPC contracts now require `operationType: "query"` or `operationType: "mutation"` metadata:
+
+  ```typescript
+  const getItems = proc()
+    .meta({ operationType: "query", access: [access.read] })
+    .output(z.array(itemSchema))
+    .query();
+
+  const createItem = proc()
+    .meta({ operationType: "mutation", access: [access.manage] })
+    .input(createItemSchema)
+    .output(itemSchema)
+    .mutation();
+  ```
+
+  ### Migration
+
+  ```typescript
+  // Before (forPlugin pattern)
+  const api = useApi(myPluginApiRef);
+  const [items, setItems] = useState<Item[]>([]);
+  useEffect(() => {
+    api.getItems().then(setItems);
+  }, [api]);
+
+  // After (usePluginClient pattern)
+  const client = usePluginClient(MyPluginApi);
+  const { data: items, isLoading } = client.getItems.useQuery({});
+  ```
+
+  ### Bug Fixes
+
+  - Fixed `rpc.test.ts` test setup for middleware type inference
+  - Fixed `SearchDialog` to use `setQuery` instead of deprecated `search` method
+  - Fixed null→undefined warnings in notification and queue frontends
+
+### Patch Changes
+
+- Updated dependencies [7a23261]
+  - @checkstack/frontend-api@0.2.0
+  - @checkstack/common@0.3.0
+  - @checkstack/auth-frontend@0.3.0
+  - @checkstack/theme-common@0.1.0
+  - @checkstack/ui@0.2.1
+
 ## 0.0.6
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/theme-frontend",
-  "version": "0.0.6",
+  "version": "0.1.0",
   "type": "module",
   "main": "src/index.tsx",
   "scripts": {

package/src/components/ThemeSynchronizer.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from "react";
-import { useApi, rpcApiRef } from "@checkstack/frontend-api";
+import { useApi, usePluginClient } from "@checkstack/frontend-api";
 import { authApiRef } from "@checkstack/auth-frontend/api";
 import { useTheme } from "@checkstack/ui";
 import { ThemeApi } from "@checkstack/theme-common";
@@ -17,14 +17,22 @@ import { ThemeApi } from "@checkstack/theme-common";
 export const ThemeSynchronizer = () => {
   const { setTheme } = useTheme();
   const authApi = useApi(authApiRef);
-  const rpcApi = useApi(rpcApiRef);
-  const themeClient = rpcApi.forPlugin(ThemeApi);
+  const themeClient = usePluginClient(ThemeApi);
   const { data: session, isPending } = authApi.useSession();
 
   // Track if we've already synced for this session to avoid repeated API calls
   const hasSyncedRef = useRef(false);
   const lastUserIdRef = useRef<string | undefined>(undefined);
 
+  // Fetch theme from backend - only enabled when user is logged in
+  const { data: themeData, isSuccess } = themeClient.getTheme.useQuery(
+    undefined,
+    {
+      enabled: !!session?.user && !isPending && !hasSyncedRef.current,
+      staleTime: Infinity, // Don't refetch automatically
+    }
+  );
+
   useEffect(() => {
     // Wait for session to load
     if (isPending) {
@@ -44,24 +52,16 @@ export const ThemeSynchronizer = () => {
       return;
     }
 
-    // For logged-in users, fetch theme from backend
-    if (session?.user) {
-      themeClient
-        .getTheme()
-        .then(({ theme }) => {
-          setTheme(theme);
-          hasSyncedRef.current = true;
-        })
-        .catch((error) => {
-          console.error("Failed to sync theme from backend:", error);
-          hasSyncedRef.current = true; // Still mark as synced to prevent retry loops
-        });
-    } else {
+    // For logged-in users, apply theme from backend when query succeeds
+    if (session?.user && isSuccess && themeData) {
+      setTheme(themeData.theme);
+      hasSyncedRef.current = true;
+    } else if (!session?.user) {
       // For non-logged-in users, local storage theme is already applied
       // by ThemeProvider, so nothing to do
       hasSyncedRef.current = true;
     }
-  }, [session, isPending, setTheme, themeClient]);
+  }, [session, isPending, setTheme, themeData, isSuccess]);
 
   // Headless component - renders nothing
   return <></>;

package/src/components/ThemeToggleMenuItem.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { Moon, Sun } from "lucide-react";
 import { Toggle, useTheme, useToast } from "@checkstack/ui";
-import { useApi, rpcApiRef } from "@checkstack/frontend-api";
+import { usePluginClient } from "@checkstack/frontend-api";
 import { ThemeApi } from "@checkstack/theme-common";
 
 /**
@@ -14,10 +14,9 @@ import { ThemeApi } from "@checkstack/theme-common";
  */
 export const ThemeToggleMenuItem = () => {
   const { theme, setTheme } = useTheme();
-  const rpcApi = useApi(rpcApiRef);
-  const themeClient = rpcApi.forPlugin(ThemeApi);
+  const themeClient = usePluginClient(ThemeApi);
+  const setThemeMutation = themeClient.setTheme.useMutation();
 
-  const [saving, setSaving] = useState(false);
   const [isDark, setIsDark] = useState(theme === "dark");
   const toast = useToast();
 
@@ -34,9 +33,8 @@ export const ThemeToggleMenuItem = () => {
     setTheme(newTheme); // Also updates local storage via ThemeProvider
 
     // Save to backend
-    setSaving(true);
     try {
-      await themeClient.setTheme({ theme: newTheme });
+      await setThemeMutation.mutateAsync({ theme: newTheme });
     } catch (error) {
       const message =
         error instanceof Error
@@ -47,8 +45,6 @@ export const ThemeToggleMenuItem = () => {
       // Revert on error
       setIsDark(!checked);
       setTheme(checked ? "light" : "dark");
-    } finally {
-      setSaving(false);
     }
   };
 
@@ -61,7 +57,7 @@ export const ThemeToggleMenuItem = () => {
       <Toggle
         checked={isDark}
         onCheckedChange={handleToggle}
-        disabled={saving}
+        disabled={setThemeMutation.isPending}
         aria-label="Toggle dark mode"
       />
     </div>