Merge pull request #1169 from joshunrau/dev

Migrate to tanstack router

Author: joshunrau

.prettierignore

@@ -2,3 +2,4 @@
 
 /dist
 /coverage
+apps/web/src/route-tree.ts

apps/gateway/package.json

@@ -47,6 +47,7 @@
     "nodemon": "catalog:",
     "prisma": "catalog:",
     "tailwindcss": "catalog:",
+    "tsx": "catalog:",
     "type-fest": "workspace:type-fest__4.x@*",
     "vite": "catalog:"
   },

apps/gateway/vite.config.ts

@@ -5,6 +5,7 @@ import tailwindcss from '@tailwindcss/vite';
 import react from '@vitejs/plugin-react-swc';
 import { defineConfig } from 'vite';
 
+// @ts-expect-error - conflict with vite version of subdependency, but works with v6
 export default defineConfig(({ mode }) => ({
   build: {
     chunkSizeWarningLimit: 1000,

apps/web/package.json

@@ -35,6 +35,8 @@
     "@opendatacapture/subject-utils": "workspace:*",
     "@tanstack/react-query": "^5.75.2",
     "@tanstack/react-query-devtools": "^5.75.2",
+    "@tanstack/react-router": "^1.127.3",
+    "@tanstack/react-router-devtools": "^1.127.3",
     "axios": "catalog:",
     "clsx": "^2.1.1",
     "html2canvas": "^1.4.1",
@@ -46,8 +48,6 @@
     "papaparse": "workspace:papaparse__5.x@*",
     "react": "workspace:react__19.x@*",
     "react-dom": "workspace:react-dom__19.x@*",
-    "react-error-boundary": "^5.0.0",
-    "react-router-dom": "^6.30.0",
     "ts-pattern": "workspace:ts-pattern__5.x@*",
     "type-fest": "workspace:type-fest__4.x@*",
     "xlsx": "^0.18.5",
@@ -59,6 +59,8 @@
     "@opendatacapture/vite-plugin-runtime": "workspace:*",
     "@storybook/react-vite": "catalog:",
     "@tailwindcss/vite": "catalog:",
+    "@tanstack/react-query-devtools": "^5.83.0",
+    "@tanstack/router-plugin": "^1.127.3",
     "@vitejs/plugin-react-swc": "^3.9.0",
     "happy-dom": "catalog:",
     "tailwindcss": "catalog:",

apps/web/src/App.tsx

@@ -1,36 +1,14 @@
-import React from 'react';
-
-import { NotificationHub } from '@douglasneuroinformatics/libui/components';
-import { ErrorPage } from '@opendatacapture/react-core';
 import { QueryClientProvider } from '@tanstack/react-query';
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
-import { ErrorBoundary } from 'react-error-boundary';
-import { BrowserRouter } from 'react-router-dom';
+import { RouterProvider } from '@tanstack/react-router';
 
-import { LoadingFallback } from '@/components/LoadingFallback';
-import { Routes } from '@/Routes';
 import { queryClient } from '@/services/react-query';
 
-import { SetupProvider } from './features/setup';
-
-import './services/axios';
-import './services/i18n';
-import './services/zod';
+import { router } from './router';
 
 export const App = () => {
   return (
-    <React.Suspense fallback={<LoadingFallback />}>
-      <ErrorBoundary FallbackComponent={ErrorPage}>
-        <QueryClientProvider client={queryClient}>
-          <NotificationHub />
-          <SetupProvider>
-            <BrowserRouter>
-              <Routes />
-            </BrowserRouter>
-          </SetupProvider>
-          <ReactQueryDevtools />
-        </QueryClientProvider>
-      </ErrorBoundary>
-    </React.Suspense>
+    <QueryClientProvider client={queryClient}>
+      <RouterProvider router={router} />
+    </QueryClientProvider>
   );
 };

apps/web/src/Routes.tsx

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { MemoryRouter } from 'react-router-dom';
 
 import { Footer } from './Footer';
 
@@ -10,11 +9,7 @@ export default { component: Footer } as Meta<typeof Footer>;
 export const Default: Story = {
   decorators: [
     (Story) => {
-      return (
-        <MemoryRouter>
-          <Story />
-        </MemoryRouter>
-      );
+      return <Story />;
     }
   ]
 };