Add tanstack query and router

packages/ui/package.json

@@ -10,10 +10,13 @@
   },
   "dependencies": {
     "@tanstack/react-query": "^5.40.0",
+    "@tanstack/react-router": "^1.34.7",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
   "devDependencies": {
+    "@tanstack/router-devtools": "^1.34.7",
+    "@tanstack/router-vite-plugin": "^1.34.8",
     "@types/react": "18.2.66",
     "@types/react-dom": "18.2.22",
     "@vitejs/plugin-react-swc": "3.5.0",

packages/ui/src/App.tsx

@@ -1,32 +1,8 @@
-import reactLogo from "@/assets/react.svg";
-import { Button } from "@/components";
-import { useState } from "react";
-import "./App.css";
-import viteLogo from "/vite.svg";
+import { router } from "@/shared/config/tanstackRouter";
+import { RouterProvider } from "@tanstack/react-router";
 
 function App() {
-  const [count, setCount] = useState(0);
-
-  return (
-    <>
-      <div className="flex flex-col items-center">
-        <a href="https://vitejs.dev" target="_blank" rel="noreferrer">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank" rel="noreferrer">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <Button onClick={() => setCount((count) => count + 1)}>count is {count}</Button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">Click on the Vite and React logos to learn more</p>
-    </>
-  );
+  return <RouterProvider router={router} />;
 }
 
 export default App;

packages/ui/src/layout.tsx

@@ -0,0 +1,18 @@
+import { Link } from "@tanstack/react-router";
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="w-screen h-screen">
+      <div className="p-2 flex gap-2">
+        <Link to="/" className="[&.active]:font-bold">
+          Home
+        </Link>{" "}
+        <Link to="/about" className="[&.active]:font-bold">
+          About
+        </Link>
+      </div>
+      <hr />
+      <main className="p-2">{children}</main>
+    </div>
+  );
+}

packages/ui/src/routeTree.gen.ts

@@ -0,0 +1,82 @@
+/* prettier-ignore-start */
+
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file is auto-generated by TanStack Router
+
+import { createFileRoute } from '@tanstack/react-router'
+
+// Import Routes
+
+import { Route as rootRoute } from './routes/__root'
+
+// Create Virtual Routes
+
+const AboutLazyImport = createFileRoute('/about')()
+const IndexLazyImport = createFileRoute('/')()
+
+// Create/Update Routes
+
+const AboutLazyRoute = AboutLazyImport.update({
+  path: '/about',
+  getParentRoute: () => rootRoute,
+} as any).lazy(() => import('./routes/about.lazy').then((d) => d.Route))
+
+const IndexLazyRoute = IndexLazyImport.update({
+  path: '/',
+  getParentRoute: () => rootRoute,
+} as any).lazy(() => import('./routes/index.lazy').then((d) => d.Route))
+
+// Populate the FileRoutesByPath interface
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexLazyImport
+      parentRoute: typeof rootRoute
+    }
+    '/about': {
+      id: '/about'
+      path: '/about'
+      fullPath: '/about'
+      preLoaderRoute: typeof AboutLazyImport
+      parentRoute: typeof rootRoute
+    }
+  }
+}
+
+// Create and export the route tree
+
+export const routeTree = rootRoute.addChildren({
+  IndexLazyRoute,
+  AboutLazyRoute,
+})
+
+/* prettier-ignore-end */
+
+/* ROUTE_MANIFEST_START
+{
+  "routes": {
+    "__root__": {
+      "filePath": "__root.tsx",
+      "children": [
+        "/",
+        "/about"
+      ]
+    },
+    "/": {
+      "filePath": "index.lazy.tsx"
+    },
+    "/about": {
+      "filePath": "about.lazy.tsx"
+    }
+  }
+}
+ROUTE_MANIFEST_END */

packages/ui/src/routes/__root.tsx

@@ -0,0 +1,20 @@
+import { createRootRoute, Outlet } from "@tanstack/react-router";
+import React from "react";
+
+const TanStackRouterDevtools =
+  process.env.NODE_ENV === "production"
+    ? () => null // Render nothing in production
+    : React.lazy(() =>
+        import("@tanstack/router-devtools").then((res) => ({
+          default: res.TanStackRouterDevtools,
+        }))
+      );
+
+export const Route = createRootRoute({
+  component: () => (
+    <>
+      <Outlet />
+      <TanStackRouterDevtools />
+    </>
+  ),
+});

packages/ui/src/routes/about.lazy.tsx

@@ -0,0 +1,10 @@
+import Layout from "@/layout";
+import { createLazyFileRoute } from "@tanstack/react-router";
+
+export const Route = createLazyFileRoute("/about")({
+  component: About,
+});
+
+function About() {
+  return <Layout>Hello /about!</Layout>;
+}

packages/ui/src/routes/index.lazy.tsx

@@ -0,0 +1,14 @@
+import Layout from "@/layout";
+import { createLazyFileRoute } from "@tanstack/react-router";
+
+export const Route = createLazyFileRoute("/")({
+  component: Index,
+});
+
+function Index() {
+  return (
+    <Layout>
+      <h3>Welcome Home!</h3>
+    </Layout>
+  );
+}

packages/ui/src/shared/config/tanstackRouter.ts

@@ -0,0 +1,10 @@
+import { routeTree } from "@/routeTree.gen";
+import { createRouter } from "@tanstack/react-router";
+
+export const router = createRouter({ routeTree });
+
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: typeof router;
+  }
+}

packages/ui/vite.config.ts

@@ -1,12 +1,13 @@
-import { defineConfig } from "vite";
+import { TanStackRouterVite } from "@tanstack/router-vite-plugin";
 import react from "@vitejs/plugin-react-swc";
-import tsconfigPaths from "vite-tsconfig-paths";
 import path from "path";
+import { defineConfig } from "vite";
+import tsconfigPaths from "vite-tsconfig-paths";
 
 // https://vitejs.dev/config/
 export default defineConfig({
   base: "./",
-  plugins: [react(), tsconfigPaths()],
+  plugins: [react(), tsconfigPaths(), TanStackRouterVite()],
   resolve: {
     alias: {
       "@": path.resolve(__dirname, "./src"),