feat(spu-ui): migrate API imports to use @sophys-web/api-client

apps/spu-ui/next.config.js

@@ -13,7 +13,12 @@ const config = {
   /** enable standalone output for docker self-hosting */
   // output: "standalone",
   /** Enables hot reloading for local packages without a build step */
-  transpilePackages: ["@sophys-web/ui", "@sophys-web/api", "@sophys-web/auth"],
+  transpilePackages: [
+    "@sophys-web/ui",
+    "@sophys-web/api",
+    "@sophys-web/auth",
+    "@sophys-web/api-client",
+  ],
   /** We already do linting and typechecking as separate tasks in CI */
   eslint: { ignoreDuringBuilds: true },
   typescript: { ignoreBuildErrors: true },

apps/spu-ui/package.json

@@ -18,6 +18,7 @@
     "@sophys-web/api": "workspace:*",
     "@sophys-web/auth": "workspace:*",
     "@sophys-web/ui": "workspace:*",
+    "@sophys-web/api-client": "workspace:*",
     "@t3-oss/env-nextjs": "^0.10.1",
     "@trpc/next": "11.0.0-rc.645",
     "@tanstack/react-query-devtools": "catalog:",

apps/spu-ui/src/app/_components/console.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useRef } from "react";
 import { DownloadIcon, RotateCcwIcon, Trash2Icon } from "lucide-react";
+import { api } from "@sophys-web/api-client/react";
 import { cn } from "@sophys-web/ui";
 import { Button } from "@sophys-web/ui/button";
 import { ScrollArea } from "@sophys-web/ui/scroll-area";
@@ -11,7 +12,6 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@sophys-web/ui/tooltip";
-import { api } from "../../trpc/react";
 
 export function Console({ className }: { className?: string }) {
   const { data: messages, refetch } = api.consoleOutput.stream.useQuery();

apps/spu-ui/src/app/_components/history.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { RotateCcwIcon } from "lucide-react";
+import { api } from "@sophys-web/api-client/react";
 import { cn } from "@sophys-web/ui";
 import { Badge } from "@sophys-web/ui/badge";
 import { Button } from "@sophys-web/ui/button";
@@ -16,7 +17,6 @@ import { ScrollArea } from "@sophys-web/ui/scroll-area";
 import type { HistoryItemProps } from "../../lib/types";
 import { useQueue } from "../_hooks/use-queue";
 import { schema } from "../../lib/schemas/plans/complete-acquisition";
-import { api } from "../../trpc/react";
 
 function RedoButton(props: HistoryItemProps) {
   const { add } = useQueue();

apps/spu-ui/src/app/_components/queue/queue.tsx

@@ -2,6 +2,7 @@
 
 import { useCallback } from "react";
 import { PlayIcon, SquareIcon, Trash2Icon } from "lucide-react";
+import { api } from "@sophys-web/api-client/react";
 import { Button } from "@sophys-web/ui/button";
 import {
   DropdownMenu,
@@ -13,7 +14,6 @@ import { ScrollArea } from "@sophys-web/ui/scroll-area";
 import { toast } from "@sophys-web/ui/sonner";
 import { useQueue } from "../../_hooks/use-queue";
 import { useStatus } from "../../_hooks/use-status";
-import { api } from "../../../trpc/react";
 import { EnvMenu } from "../env-menu";
 import { History } from "../history";
 import { getEngineStatus } from "../run-engine-controls";

apps/spu-ui/src/app/_components/queue/upload.tsx

@@ -5,6 +5,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { MoveRightIcon, UploadIcon } from "lucide-react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
+import { api } from "@sophys-web/api-client/react";
 import { Button } from "@sophys-web/ui/button";
 import { Checkbox } from "@sophys-web/ui/checkbox";
 import {
@@ -33,7 +34,6 @@ import type {
   cleaningSchema as cleaningKwargsSchema,
 } from "../../../lib/schemas/plans/complete-acquisition";
 import type { Sample } from "../sample";
-import { api } from "~/trpc/react";
 import { useQueue } from "../../_hooks/use-queue";
 import { name as cleanCapillaryPlanName } from "../../../lib/schemas/plans/clean-and-acquire";
 import { name as acquisitionPlanName } from "../../../lib/schemas/plans/complete-acquisition";

apps/spu-ui/src/app/_components/run-engine-controls.tsx

@@ -7,6 +7,7 @@ import {
   Play,
   Square,
 } from "lucide-react";
+import { api } from "@sophys-web/api-client/react";
 import { Button } from "@sophys-web/ui/button";
 import {
   DropdownMenu,
@@ -16,7 +17,6 @@ import {
 } from "@sophys-web/ui/dropdown-menu";
 import { toast } from "@sophys-web/ui/sonner";
 import { useStatus } from "../_hooks/use-status";
-import { api } from "../../trpc/react";
 
 type EngineStatus = "idle" | "running" | "paused" | "unknown";
 type EngineAction = "pause" | "resume" | "stop" | "halt" | "abort";

apps/spu-ui/src/app/_components/select-plan.tsx

@@ -1,14 +1,14 @@
 "use client";
 
 import { useState } from "react";
+import { api } from "@sophys-web/api-client/react";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
 } from "@sophys-web/ui/select";
-import { api } from "../../trpc/react";
 
 export function SelectPlan() {
   const { data } = api.plans.allowed.useQuery(undefined);

apps/spu-ui/src/app/_hooks/use-capillary-state.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { api } from "@sophys-web/api-client/react";
 import type {
   sampleTypeOptions,
   trayColumns,
@@ -11,7 +12,6 @@ import {
   schema as loadSampleKwargs,
   name as loadSamplePlan,
 } from "../../lib/schemas/plans/load";
-import { api } from "../../trpc/react";
 
 const STALE_TIME_IN_SECONDS = 15 * 60; // 15 minutes
 

apps/spu-ui/src/app/_hooks/use-queue.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import { nanoid } from "nanoid";
+import { api } from "@sophys-web/api-client/react";
 import type { QueueItemProps } from "../../lib/types";
-import { api } from "../../trpc/react";
 
 export const useQueue = () => {
   const utils = api.useUtils();

apps/spu-ui/src/app/_hooks/use-status.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { api } from "../../trpc/react";
+import { api } from "@sophys-web/api-client/react";
 
 export const useStatus = () => {
   const utils = api.useUtils();

apps/spu-ui/src/app/layout.tsx

@@ -3,9 +3,9 @@ import "./globals.css";
 import type { Metadata } from "next";
 import Image from "next/image";
 import { GeistMono } from "geist/font/mono";
+import { TRPCReactProvider } from "@sophys-web/api-client/react";
 import { Toaster } from "@sophys-web/ui/sonner";
 import { env } from "../env";
-import { TRPCReactProvider } from "../trpc/react";
 import UserAvatar from "./_components/user-avatar";
 
 export const metadata: Metadata = {