Merge pull request chescalante#14 from martinc1991/feature/add-tansta…

…ck-query-and-router

Add tanstack query and router

packages/ui/package.json

@@ -9,10 +9,14 @@
     "preview": "vite preview"
   },
   "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/hoc/ProvidersWrapper.tsx

@@ -0,0 +1,12 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import React from "react";
+
+const queryClient = new QueryClient();
+
+interface ProvidersWrapperProps {
+  children: React.ReactNode;
+}
+
+export default function ProvidersWrapper({ children }: ProvidersWrapperProps) {
+  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
+}

packages/ui/src/main.tsx

@@ -1,10 +1,13 @@
+import ProvidersWrapper from "@/hoc/ProvidersWrapper.tsx";
 import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App.tsx";
 import "./index.css";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    <App />
+    <ProvidersWrapper>
+      <App />
+    </ProvidersWrapper>
   </React.StrictMode>
 );

packages/ui/src/routeTree.gen.ts

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

packages/ui/src/routes/__root.tsx

@@ -0,0 +1,31 @@
+import { createRootRoute, Link, 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: () => (
+    <div className="w-screen h-screen flex flex-col">
+      <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="flex flex-1">
+        <Outlet />
+      </main>
+      <TanStackRouterDevtools />
+    </div>
+  ),
+});

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

@@ -0,0 +1,13 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/about/")({
+  component: About,
+});
+
+function About() {
+  return (
+    <div className="flex flex-1 items-center justify-center">
+      <h3>About Page</h3>
+    </div>
+  );
+}

packages/ui/src/routes/index.tsx

@@ -0,0 +1,13 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/")({
+  component: Index,
+});
+
+function Index() {
+  return (
+    <div className="flex flex-1 items-center justify-center">
+      <h3>Home Page</h3>
+    </div>
+  );
+}

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"),