create-tsrouter-app 0.6.1 → 0.6.2

package/templates/react/add-on/form/assets/src/routes/demo.form.address.tsx.ejs

@@ -0,0 +1,203 @@
+import { <% if (fileRouter) { %>createFileRoute<% } else { %>createRoute<% } %> } from '@tanstack/react-router'
+
+import { useAppForm } from '../hooks/demo.form'
+
+<% if (codeRouter) { %>
+  import type { RootRoute } from '@tanstack/react-router'
+<% } else { %>
+export const Route = createFileRoute('/demo/form')({
+  component: AddressForm,
+})
+<% } %>
+
+function AddressForm() {
+  const form = useAppForm({
+    defaultValues: {
+      fullName: '',
+      email: '',
+      address: {
+        street: '',
+        city: '',
+        state: '',
+        zipCode: '',
+        country: '',
+      },
+      phone: '',
+    },
+    validators: {
+      onBlur: ({ value }) => {
+        const errors = {
+          fields: {},
+        } as {
+          fields: Record<string, string>
+        }
+        if (value.fullName.trim().length === 0) {
+          errors.fields.fullName = 'Full name is required'
+        }
+        return errors
+      },
+    },
+    onSubmit: ({ value }) => {
+      console.log(value)
+      // Show success message
+      alert('Form submitted successfully!')
+    },
+  })
+
+  return (
+    <div
+      className="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-100 to-blue-100 p-4 text-white"
+      style={{
+        backgroundImage:
+          'radial-gradient(50% 50% at 5% 40%, #f4a460 0%, #8b4513 70%, #1a0f0a 100%)',
+      }}
+    >
+      <div className="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10">
+        <form
+          onSubmit={(e) => {
+            e.preventDefault()
+            e.stopPropagation()
+            form.handleSubmit()
+          }}
+          className="space-y-6"
+        >
+          <form.AppField
+            name="fullName"
+            children={(field) => <field.TextField label="Full Name" />}
+          />
+
+          <form.AppField
+            name="email"
+            validators={{
+              onBlur: ({ value }) => {
+                if (!value || value.trim().length === 0) {
+                  return 'Email is required'
+                }
+                if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(value)) {
+                  return 'Invalid email address'
+                }
+                return undefined
+              },
+            }}
+            children={(field) => <field.TextField label="Email" />}
+          />
+
+          <form.AppField
+            name="address.street"
+            validators={{
+              onBlur: ({ value }) => {
+                if (!value || value.trim().length === 0) {
+                  return 'Street address is required'
+                }
+                return undefined
+              },
+            }}
+            children={(field) => <field.TextField label="Street Address" />}
+          />
+
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <form.AppField
+              name="address.city"
+              validators={{
+                onBlur: ({ value }) => {
+                  if (!value || value.trim().length === 0) {
+                    return 'City is required'
+                  }
+                  return undefined
+                },
+              }}
+              children={(field) => <field.TextField label="City" />}
+            />
+            <form.AppField
+              name="address.state"
+              validators={{
+                onBlur: ({ value }) => {
+                  if (!value || value.trim().length === 0) {
+                    return 'State is required'
+                  }
+                  return undefined
+                },
+              }}
+              children={(field) => <field.TextField label="State" />}
+            />
+            <form.AppField
+              name="address.zipCode"
+              validators={{
+                onBlur: ({ value }) => {
+                  if (!value || value.trim().length === 0) {
+                    return 'Zip code is required'
+                  }
+                  if (!/^\d{5}(-\d{4})?$/.test(value)) {
+                    return 'Invalid zip code format'
+                  }
+                  return undefined
+                },
+              }}
+              children={(field) => <field.TextField label="Zip Code" />}
+            />
+          </div>
+
+          <form.AppField
+            name="address.country"
+            validators={{
+              onBlur: ({ value }) => {
+                if (!value || value.trim().length === 0) {
+                  return 'Country is required'
+                }
+                return undefined
+              },
+            }}
+            children={(field) => (
+              <field.Select label="Country">
+                <option value="">Select a country</option>
+                <option value="US">United States</option>
+                <option value="CA">Canada</option>
+                <option value="UK">United Kingdom</option>
+                <option value="AU">Australia</option>
+                <option value="DE">Germany</option>
+                <option value="FR">France</option>
+                <option value="JP">Japan</option>
+              </field.Select>
+            )}
+          />
+
+          <form.AppField
+            name="phone"
+            validators={{
+              onBlur: ({ value }) => {
+                if (!value || value.trim().length === 0) {
+                  return 'Phone number is required'
+                }
+                if (
+                  !/^(\+\d{1,3})?\s?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4}$/.test(
+                    value,
+                  )
+                ) {
+                  return 'Invalid phone number format'
+                }
+                return undefined
+              },
+            }}
+            children={(field) => (
+              <field.TextField label="Phone" placeholder="123-456-7890" />
+            )}
+          />
+
+          <div className="flex justify-end">
+            <form.AppForm>
+              <form.SubscribeButton label="Submit" />
+            </form.AppForm>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}
+
+<% if (codeRouter) { %>
+export default (parentRoute: RootRoute) => createRoute({
+  path: '/demo/form',
+  component: Addres,
+  getParentRoute: () => parentRoute,
+})
+<% } %>

package/templates/react/add-on/form/assets/src/routes/demo.form.simple.tsx.ejs

@@ -0,0 +1,79 @@
+import { <% if (fileRouter) { %>createFileRoute<% } else { %>createRoute<% } %> } from '@tanstack/react-router'
+import { z } from 'zod'
+
+import { useAppForm } from '../hooks/demo.form'
+
+<% if (codeRouter) { %>
+  import type { RootRoute } from '@tanstack/react-router'
+<% } else { %>
+export const Route = createFileRoute('/demo/form')({
+  component: SimpleForm,
+})
+<% } %>
+
+const schema = z.object({
+  title: z.string().min(1, 'Title is required'),
+  description: z.string().min(1, 'Description is required'),
+})
+
+function SimpleForm() {
+  const form = useAppForm({
+    defaultValues: {
+      title: '',
+      description: '',
+    },
+    validators: {
+      onBlur: schema,
+    },
+    onSubmit: ({ value }) => {
+      console.log(value)
+      // Show success message
+      alert('Form submitted successfully!')
+    },
+  })
+
+  return (
+    <div
+      className="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-100 to-blue-100 p-4 text-white"
+      style={{
+        backgroundImage:
+          'radial-gradient(50% 50% at 5% 40%, #add8e6 0%, #0000ff 70%, #00008b 100%)',
+      }}
+    >
+      <div className="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10">
+        <form
+          onSubmit={(e) => {
+            e.preventDefault()
+            e.stopPropagation()
+            form.handleSubmit()
+          }}
+          className="space-y-6"
+        >
+          <form.AppField
+            name="title"
+            children={(field) => <field.TextField label="Title" />}
+          />
+
+          <form.AppField
+            name="description"
+            children={(field) => <field.TextArea label="Description" />}
+          />
+
+          <div className="flex justify-end">
+            <form.AppForm>
+              <form.SubscribeButton label="Submit" />
+            </form.AppForm>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}
+
+<% if (codeRouter) { %>
+export default (parentRoute: RootRoute) => createRoute({
+  path: '/demo/form',
+  component: SimpleForm,
+  getParentRoute: () => parentRoute,
+})
+<% } %>

package/templates/react/add-on/form/info.json

@@ -6,8 +6,12 @@
   "link": "https://tanstack.com/form/latest",
   "routes": [
     {
-      "url": "/demo/form",
-      "name": "Form"
+      "url": "/demo/form/simple",
+      "name": "Simple Form"
+    },
+    {
+      "url": "/demo/form/address",
+      "name": "Address Form"
     }
   ]
 }

package/templates/react/add-on/form/package.json

@@ -1,5 +1,6 @@
 {
   "dependencies": {
-    "@tanstack/react-form": "^0.42.0"
+    "@tanstack/react-form": "^1.0.0",
+    "zod": "^3.24.2"
   }
 }

package/templates/react/base/README.md.ejs

@@ -47,7 +47,7 @@ This project uses [Biome](https://biomejs.dev/) for linting and formatting. The
 <% } %>
 
 ## Routing
-<% if (fileRouter) { %>This project uses [TanStack Router](https://tanstack.com/router). The initial setup is a file based router. Which means that the routes are managed as fiels in `src/routes`.<% } else { %>This project uses [TanStack Router](https://tanstack.com/router). The initial setup is a code based router. Which means that the routes are defined in code (in the `./src/main.<%= jsx %>` file). If you like you can also use a file based routing setup by following the [File Based Routing](https://tanstack.com/router/latest/docs/framework/react/guide/file-based-routing) guide.<% } %>
+<% if (fileRouter) { %>This project uses [TanStack Router](https://tanstack.com/router). The initial setup is a file based router. Which means that the routes are managed as files in `src/routes`.<% } else { %>This project uses [TanStack Router](https://tanstack.com/router). The initial setup is a code based router. Which means that the routes are defined in code (in the `./src/main.<%= jsx %>` file). If you like you can also use a file based routing setup by following the [File Based Routing](https://tanstack.com/router/latest/docs/framework/react/guide/file-based-routing) guide.<% } %>
 
 ### Adding A Route
 <% if (fileRouter) { %>

package/templates/react/example/tanchat/info.json

@@ -1,6 +1,6 @@
 {
   "name": "TanStack Chat",
-  "description": "A chat example that uses TanStack Start and TanStack Store. Features chat with Antrhopic Sonnet, chat history and custom prompts.",
+  "description": "A chat example that uses TanStack Start and TanStack Store. Features chat with Anthropic Sonnet, chat history and custom prompts.",
   "phase": "example",
   "templates": ["file-router"],
   "link": "",