chore(deps): upgrade React Router to v7 (#419)

Author: kjmitchelljr

.gitignore

@@ -48,4 +48,7 @@ build
 .cache
 
 # macOS
-.DS_Store
+.DS_Store
+
+# React Router
+.react-router/

eslint.config.js

@@ -16,6 +16,7 @@ export default [
   pluginJs.configs.recommended,
   ...tseslint.configs.recommended,
   {
+    files: ['frontend/**/*.{ts,tsx}', 'components/**/*.{ts,tsx}'],
     ...pluginReact.configs.flat.recommended,
     settings: {
       react: {
@@ -40,6 +41,13 @@ export default [
     }
   },
   {
-    ignores: ['**/node_modules/', '**/dist/', '**/build/', '**/public/init.js']
+    ignores: [
+      '**/node_modules/',
+      '**/dist/',
+      '**/build/',
+      '**/public/init.js',
+      '**/.react-router/',
+      '**/.wrangler/'
+    ]
   }
 ]

frontend/app/components/ButtonOrLink.tsx

@@ -1,4 +1,4 @@
-import { Link, type LinkProps } from '@remix-run/react'
+import { Link, type LinkProps } from 'react-router'
 import { forwardRef, type ComponentProps } from 'react'
 
 type AnchorOrLinkProps = ComponentProps<'a'> & Partial<LinkProps>

frontend/app/components/redesign/components/BuilderBackground.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { useSnapshot } from 'valtio'
 import { cx } from 'class-variance-authority'
 import { toolState } from '~/stores/toolStore'
-import { ToolsSecondaryButton } from '@/components'
+import { ToolsSecondaryButton } from '@/components/ToolsSecondaryButton'
 import { SLIDE_ANIMATION } from '@shared/types'
 
 const DOT_PATTERN_SVG = `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="6" cy="6" r="2" fill="white" fill-opacity="0.5" /></svg>`

frontend/app/components/redesign/components/HeadingCore.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { GhostButton } from '@/components'
+import { GhostButton } from '@/components/GhostButton'
 import { Heading1, Heading2SemiBold } from '@/typography'
 import { SVGArrowLeft } from '@/assets'
 

frontend/app/components/redesign/components/landing/ToolCard.tsx

@@ -1,5 +1,5 @@
 import React, { useId } from 'react'
-import { Link } from '@remix-run/react'
+import { Link } from 'react-router'
 import { PillTag } from '@/components'
 import arrowOutwardIcon from '~/assets/images/landing/arrow-outward.svg'
 

frontend/app/entry.client.tsx

@@ -4,7 +4,7 @@
  * For more information, see https://remix.run/file-conventions/entry.client
  */
 
-import { RemixBrowser } from '@remix-run/react'
+import { HydratedRouter } from 'react-router/dom'
 import { startTransition, StrictMode } from 'react'
 import { hydrateRoot } from 'react-dom/client'
 import { scan } from 'react-scan'
@@ -22,7 +22,7 @@ startTransition(() => {
   hydrateRoot(
     document,
     <StrictMode>
-      <RemixBrowser />
+      <HydratedRouter />
     </StrictMode>
   )
 })

frontend/app/entry.server.tsx

@@ -4,32 +4,31 @@
  * For more information, see https://remix.run/file-conventions/entry.server
  */
 
-import type { AppLoadContext, EntryContext } from '@remix-run/cloudflare'
-import { RemixServer } from '@remix-run/react'
+import {
+  ServerRouter,
+  type AppLoadContext,
+  type EntryContext
+} from 'react-router'
 import { isbot } from 'isbot'
 import { renderToReadableStream } from 'react-dom/server'
 
-const ABORT_DELAY = 5000
+export const streamTimeout = 5000
 
 export default async function handleRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  remixContext: EntryContext,
+  reactRouterContext: EntryContext,
   // This is ignored so we can keep it in the template for visibility.  Feel
   // free to delete this parameter in your app if you're not using it!
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   loadContext: AppLoadContext
 ) {
   const controller = new AbortController()
-  const timeoutId = setTimeout(() => controller.abort(), ABORT_DELAY)
+  const timeoutId = setTimeout(() => controller.abort(), streamTimeout)
 
   const body = await renderToReadableStream(
-    <RemixServer
-      context={remixContext}
-      url={request.url}
-      abortDelay={ABORT_DELAY}
-    />,
+    <ServerRouter context={reactRouterContext} url={request.url} />,
     {
       signal: controller.signal,
       onError(error: unknown) {

frontend/app/hooks/usePathTracker.ts

@@ -1,4 +1,4 @@
-import { useLocation } from '@remix-run/react'
+import { useLocation } from 'react-router'
 import { useEffect } from 'react'
 import { TOOL_TYPES, toolActions, type ToolType } from '~/stores/toolStore'
 

frontend/app/root.tsx

@@ -1,13 +1,14 @@
-import type { LinksFunction, MetaFunction } from '@remix-run/cloudflare'
 import {
   Links,
   Meta,
   Outlet,
   Scripts,
   ScrollRestoration,
   useRouteError,
-  isRouteErrorResponse
-} from '@remix-run/react'
+  isRouteErrorResponse,
+  type LinksFunction,
+  type MetaFunction
+} from 'react-router'
 import type { ReactNode } from 'react'
 import stylesheet from '~/tailwind.css?url'
 import { Button } from './components/index.js'