react example

Author: birkskyum

examples/solid/start-basic-auth/.gitignore

@@ -7,12 +7,10 @@ yarn.lock
 .cache
 .vercel
 .output
-
 /build/
 /api/
 /server/build
-/public/build
-# Sentry Config File
+/public/build# Sentry Config File
 .env.sentry-build-plugin
 /test-results/
 /playwright-report/

examples/solid/start-basic-auth/.vscode/settings.json

@@ -0,0 +1,11 @@
+{
+  "files.watcherExclude": {
+    "**/routeTree.gen.ts": true
+  },
+  "search.exclude": {
+    "**/routeTree.gen.ts": true
+  },
+  "files.readonlyInclude": {
+    "**/routeTree.gen.ts": true
+  }
+}

examples/solid/start-basic-auth/README.md

@@ -0,0 +1,72 @@
+# Welcome to TanStack.com!
+
+This site is built with TanStack Router!
+
+- [TanStack Router Docs](https://tanstack.com/router)
+
+It's deployed automagically with Netlify!
+
+- [Netlify](https://netlify.com/)
+
+## Development
+
+From your terminal:
+
+```sh
+pnpm install
+pnpm dev
+```
+
+This starts your app in development mode, rebuilding assets on file changes.
+
+## Editing and previewing the docs of TanStack projects locally
+
+The documentations for all TanStack projects except for `React Charts` are hosted on [https://tanstack.com](https://tanstack.com), powered by this TanStack Router app.
+In production, the markdown doc pages are fetched from the GitHub repos of the projects, but in development they are read from the local file system.
+
+Follow these steps if you want to edit the doc pages of a project (in these steps we'll assume it's [`TanStack/form`](https://github.com/tanstack/form)) and preview them locally :
+
+1. Create a new directory called `tanstack`.
+
+```sh
+mkdir tanstack
+```
+
+2. Enter the directory and clone this repo and the repo of the project there.
+
+```sh
+cd tanstack
+git clone git@github.com:TanStack/tanstack.com.git
+git clone git@github.com:TanStack/form.git
+```
+
+> [!NOTE]
+> Your `tanstack` directory should look like this:
+>
+> ```
+> tanstack/
+>    |
+>    +-- form/
+>    |
+>    +-- tanstack.com/
+> ```
+
+> [!WARNING]
+> Make sure the name of the directory in your local file system matches the name of the project's repo. For example, `tanstack/form` must be cloned into `form` (this is the default) instead of `some-other-name`, because that way, the doc pages won't be found.
+
+3. Enter the `tanstack/tanstack.com` directory, install the dependencies and run the app in dev mode:
+
+```sh
+cd tanstack.com
+pnpm i
+# The app will run on https://localhost:3000 by default
+pnpm dev
+```
+
+4. Now you can visit http://localhost:3000/form/latest/docs/overview in the browser and see the changes you make in `tanstack/form/docs`.
+
+> [!NOTE]
+> The updated pages need to be manually reloaded in the browser.
+
+> [!WARNING]
+> You will need to update the `docs/config.json` file (in the project's repo) if you add a new doc page!

examples/solid/start-basic-auth/package.json

@@ -1,36 +1,35 @@
 {
-  "name": "tanstack-solid-start-e2e-basic-auth",
+  "name": "tanstack-start-example-basic-auth",
   "private": true,
   "sideEffects": false,
   "type": "module",
   "scripts": {
-    "dev": "vite dev --port 3000",
-    "dev:e2e": "vite dev",
+    "dev": "vite dev",
     "build": "vite build",
-    "start": "node .output/server/index.mjs",
-    "prisma-generate": "prisma generate",
-    "test:e2e": "exit 0; rm -rf port*.txt; pnpm run prisma-generate && playwright test --project=chromium"
+    "start": "vite start",
+    "prisma-generate": "prisma generate"
   },
   "dependencies": {
     "@prisma/client": "5.22.0",
-    "@tanstack/solid-router": "workspace:^",
-    "@tanstack/solid-router-devtools": "workspace:^",
-    "@tanstack/solid-start": "workspace:^",
+    "@tanstack/react-router": "^1.133.20",
+    "@tanstack/react-router-devtools": "^1.133.20",
+    "@tanstack/react-start": "^1.133.20",
     "prisma": "^5.22.0",
-    "solid-js": "^1.9.5",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "redaxios": "^0.5.1",
-    "tailwind-merge": "^2.6.0",
-    "vite": "^7.1.7"
+    "tailwind-merge": "^2.6.0"
   },
   "devDependencies": {
-    "@playwright/test": "^1.50.1",
-    "@tanstack/router-e2e-utils": "workspace:^",
-    "@types/node": "^22.10.2",
-    "vite-plugin-solid": "^2.11.9",
-    "autoprefixer": "^10.4.20",
+    "@vitejs/plugin-react": "^4.3.4",
+    "@types/node": "^22.5.4",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
     "postcss": "^8.5.1",
+    "autoprefixer": "^10.4.20",
     "tailwindcss": "^3.4.17",
     "typescript": "^5.7.2",
+    "vite": "^7.1.7",
     "vite-tsconfig-paths": "^5.1.4"
   }
 }

examples/solid/start-basic-auth/playwright.config.ts

@@ -1,52 +1,50 @@
-import type { JSX } from 'solid-js'
-
 export function Auth({
   actionText,
   onSubmit,
   status,
   afterSubmit,
 }: {
   actionText: string
-  onSubmit: (e: HTMLFormElement) => void
+  onSubmit: (e: React.FormEvent<HTMLFormElement>) => void
   status: 'pending' | 'idle' | 'success' | 'error'
-  afterSubmit?: JSX.Element
+  afterSubmit?: React.ReactNode
 }) {
   return (
-    <div class="fixed inset-0 bg-white dark:bg-black flex items-start justify-center p-8">
-      <div class="bg-white dark:bg-gray-900 p-8 rounded-lg shadow-lg">
-        <h1 class="text-2xl font-bold mb-4">{actionText}</h1>
+    <div className="fixed inset-0 bg-white dark:bg-black flex items-start justify-center p-8">
+      <div className="bg-white dark:bg-gray-900 p-8 rounded-lg shadow-lg">
+        <h1 className="text-2xl font-bold mb-4">{actionText}</h1>
         <form
-          onSubmit={(e: any) => {
+          onSubmit={(e) => {
             e.preventDefault()
             onSubmit(e)
           }}
-          class="space-y-4"
+          className="space-y-4"
         >
           <div>
-            <label for="email" class="block text-xs">
+            <label htmlFor="email" className="block text-xs">
               Email
             </label>
             <input
               type="email"
               name="email"
               id="email"
-              class="px-2 py-1 w-full rounded border border-gray-500/20 bg-white dark:bg-gray-800"
+              className="px-2 py-1 w-full rounded border border-gray-500/20 bg-white dark:bg-gray-800"
             />
           </div>
           <div>
-            <label for="password" class="block text-xs">
+            <label htmlFor="password" className="block text-xs">
               Password
             </label>
             <input
               type="password"
               name="password"
               id="password"
-              class="px-2 py-1 w-full rounded border border-gray-500/20 bg-white dark:bg-gray-800"
+              className="px-2 py-1 w-full rounded border border-gray-500/20 bg-white dark:bg-gray-800"
             />
           </div>
           <button
             type="submit"
-            class="w-full bg-cyan-600 text-white rounded py-2 font-black uppercase"
+            className="w-full bg-cyan-600 text-white rounded py-2 font-black uppercase"
             disabled={status === 'pending'}
           >
             {status === 'pending' ? '...' : actionText}

examples/solid/start-basic-auth/src/components/Auth.tsx

@@ -4,8 +4,8 @@ import {
   rootRouteId,
   useMatch,
   useRouter,
-} from '@tanstack/solid-router'
-import type { ErrorComponentProps } from '@tanstack/solid-router'
+} from '@tanstack/react-router'
+import type { ErrorComponentProps } from '@tanstack/react-router'
 
 export function DefaultCatchBoundary({ error }: ErrorComponentProps) {
   const router = useRouter()
@@ -17,28 +17,28 @@ export function DefaultCatchBoundary({ error }: ErrorComponentProps) {
   console.error(error)
 
   return (
-    <div class="min-w-0 flex-1 p-4 flex flex-col items-center justify-center gap-6">
+    <div className="min-w-0 flex-1 p-4 flex flex-col items-center justify-center gap-6">
       <ErrorComponent error={error} />
-      <div class="flex gap-2 items-center flex-wrap">
+      <div className="flex gap-2 items-center flex-wrap">
         <button
           onClick={() => {
             router.invalidate()
           }}
-          class={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
+          className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
         >
           Try Again
         </button>
-        {isRoot() ? (
+        {isRoot ? (
           <Link
             to="/"
-            class={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
+            className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
           >
             Home
           </Link>
         ) : (
           <Link
             to="/"
-            class={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
+            className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
             onClick={(e) => {
               e.preventDefault()
               window.history.back()

examples/solid/start-basic-auth/src/components/DefaultCatchBoundary.tsx

@@ -1,5 +1,5 @@
-import { useRouter } from '@tanstack/solid-router'
-import { useServerFn } from '@tanstack/solid-start'
+import { useRouter } from '@tanstack/react-router'
+import { useServerFn } from '@tanstack/react-start'
 import { useMutation } from '../hooks/useMutation'
 import { loginFn } from '../routes/_authed'
 import { Auth } from './Auth'
@@ -26,9 +26,9 @@ export function Login() {
   return (
     <Auth
       actionText="Login"
-      status={loginMutation.status()}
+      status={loginMutation.status}
       onSubmit={(e) => {
-        const formData = new FormData(e.target as any as HTMLFormElement)
+        const formData = new FormData(e.target as HTMLFormElement)
 
         loginMutation.mutate({
           data: {
@@ -38,13 +38,13 @@ export function Login() {
         })
       }}
       afterSubmit={
-        loginMutation.data() ? (
+        loginMutation.data ? (
           <>
-            <div class="text-red-400">{loginMutation.data()?.message}</div>
-            {loginMutation.data()?.userNotFound ? (
+            <div className="text-red-400">{loginMutation.data.message}</div>
+            {loginMutation.data.userNotFound ? (
               <div>
                 <button
-                  class="text-blue-500"
+                  className="text-blue-500"
                   onClick={(e) => {
                     const formData = new FormData(
                       (e.target as HTMLButtonElement).form!,

examples/solid/start-basic-auth/src/components/Login.tsx

@@ -1,21 +1,21 @@
-import { Link } from '@tanstack/solid-router'
+import { Link } from '@tanstack/react-router'
 
 export function NotFound({ children }: { children?: any }) {
   return (
-    <div class="space-y-2 p-2">
-      <div class="text-gray-600 dark:text-gray-400">
+    <div className="space-y-2 p-2">
+      <div className="text-gray-600 dark:text-gray-400">
         {children || <p>The page you are looking for does not exist.</p>}
       </div>
-      <p class="flex items-center gap-2 flex-wrap">
+      <p className="flex items-center gap-2 flex-wrap">
         <button
           onClick={() => window.history.back()}
-          class="bg-emerald-500 text-white px-2 py-1 rounded uppercase font-black text-sm"
+          className="bg-emerald-500 text-white px-2 py-1 rounded uppercase font-black text-sm"
         >
           Go back
         </button>
         <Link
           to="/"
-          class="bg-cyan-600 text-white px-2 py-1 rounded uppercase font-black text-sm"
+          className="bg-cyan-600 text-white px-2 py-1 rounded uppercase font-black text-sm"
         >
           Start Over
         </Link>