@tanstack/cta-engine 0.10.0-alpha.21 → 0.10.0-alpha.25

package/templates/react/add-on/convex/assets/src/routes/demo.convex.tsx

@@ -0,0 +1,33 @@
+import { Suspense } from 'react'
+import { createFileRoute } from '@tanstack/react-router'
+import { useQuery } from 'convex/react'
+
+import { api } from '../../convex/_generated/api'
+
+export const Route = createFileRoute('/demo/convex')({
+  component: App,
+})
+
+function Products() {
+  const products = useQuery(api.products.get)
+
+  return (
+    <ul>
+      {(products || []).map((p) => (
+        <li key={p._id}>
+          {p.title} - {p.price}
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+function App() {
+  return (
+    <div className="p-4">
+      <Suspense fallback={<div>Loading...</div>}>
+        <Products />
+      </Suspense>
+    </div>
+  )
+}

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

@@ -0,0 +1,13 @@
+{
+  "name": "Convex",
+  "description": "Add the Convex database to your application.",
+  "link": "https://convex.dev",
+  "phase": "add-on",
+  "templates": ["file-router"],
+  "routes": [
+    {
+      "url": "/demo/convex",
+      "name": "Convex"
+    }
+  ]
+}

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

@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "@convex-dev/react-query": "0.0.0-alpha.8",
+    "convex": "^1.19.2"
+  }
+}

package/templates/react/add-on/form/assets/src/components/demo.FormComponents.tsx.ejs

@@ -0,0 +1,300 @@
+import { useStore } from '@tanstack/react-form'
+
+import { useFieldContext, useFormContext } from '../hooks/demo.form-context'
+<% if (addOnEnabled.shadcn) { %>
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Textarea as ShadcnTextarea } from '@/components/ui/textarea'
+import * as ShadcnSelect from '@/components/ui/select'
+import { Slider as ShadcnSlider } from '@/components/ui/slider'
+import { Switch as ShadcnSwitch } from '@/components/ui/switch'
+import { Label } from '@/components/ui/label'
+
+export function SubscribeButton({ label }: { label: string }) {
+  const form = useFormContext()
+  return (
+    <form.Subscribe selector={(state) => state.isSubmitting}>
+      {(isSubmitting) => (
+        <Button type="submit" disabled={isSubmitting}>
+          {label}
+        </Button>
+      )}
+    </form.Subscribe>
+  )
+}
+
+function ErrorMessages({
+  errors,
+}: {
+  errors: Array<string | { message: string }>
+}) {
+  return (
+    <>
+      {errors.map((error) => (
+        <div
+          key={typeof error === 'string' ? error : error.message}
+          className="text-red-500 mt-1 font-bold"
+        >
+          {typeof error === 'string' ? error : error.message}
+        </div>
+      ))}
+    </>
+  )
+}
+
+export function TextField({
+  label,
+  placeholder,
+}: {
+  label: string
+  placeholder?: string
+}) {
+  const field = useFieldContext<string>()
+  const errors = useStore(field.store, (state) => state.meta.errors)
+
+  return (
+    <div>
+      <Label htmlFor={label} className="mb-2 text-xl font-bold">
+        {label}
+      </Label>
+      <Input
+        value={field.state.value}
+        placeholder={placeholder}
+        onBlur={field.handleBlur}
+        onChange={(e) => field.handleChange(e.target.value)}
+      />
+      {field.state.meta.isTouched && <ErrorMessages errors={errors} />}
+    </div>
+  )
+}
+
+export function TextArea({
+  label,
+  rows = 3,
+}: {
+  label: string
+  rows?: number
+}) {
+  const field = useFieldContext<string>()
+  const errors = useStore(field.store, (state) => state.meta.errors)
+
+  return (
+    <div>
+      <Label htmlFor={label} className="mb-2 text-xl font-bold">
+        {label}
+      </Label>
+      <ShadcnTextarea
+        id={label}
+        value={field.state.value}
+        onBlur={field.handleBlur}
+        rows={rows}
+        onChange={(e) => field.handleChange(e.target.value)}
+      />
+      {field.state.meta.isTouched && <ErrorMessages errors={errors} />}
+    </div>
+  )
+}
+
+export function Select({
+  label,
+  values,
+  placeholder,
+}: {
+  label: string
+  values: Array<{ label: string; value: string }>
+  placeholder?: string
+}) {
+  const field = useFieldContext<string>()
+  const errors = useStore(field.store, (state) => state.meta.errors)
+
+  return (
+    <div>
+      <ShadcnSelect.Select
+        name={field.name}
+        value={field.state.value}
+        onValueChange={(value) => field.handleChange(value)}
+      >
+        <ShadcnSelect.SelectTrigger className="w-full">
+          <ShadcnSelect.SelectValue placeholder={placeholder} />
+        </ShadcnSelect.SelectTrigger>
+        <ShadcnSelect.SelectContent>
+          <ShadcnSelect.SelectGroup>
+            <ShadcnSelect.SelectLabel>{label}</ShadcnSelect.SelectLabel>
+            {values.map((value) => (
+              <ShadcnSelect.SelectItem key={value.value} value={value.value}>
+                {value.label}
+              </ShadcnSelect.SelectItem>
+            ))}
+          </ShadcnSelect.SelectGroup>
+        </ShadcnSelect.SelectContent>
+      </ShadcnSelect.Select>
+      {field.state.meta.isTouched && <ErrorMessages errors={errors} />}
+    </div>
+  )
+}
+
+export function Slider({ label }: { label: string }) {
+  const field = useFieldContext<number>()
+  const errors = useStore(field.store, (state) => state.meta.errors)
+
+  return (
+    <div>
+      <Label htmlFor={label} className="mb-2 text-xl font-bold">
+        {label}
+      </Label>
+      <ShadcnSlider
+        id={label}
+        onBlur={field.handleBlur}
+        value={[field.state.value]}
+        onValueChange={(value) => field.handleChange(value[0])}
+      />
+      {field.state.meta.isTouched && <ErrorMessages errors={errors} />}
+    </div>
+  )
+}
+
+export function Switch({ label }: { label: string }) {
+  const field = useFieldContext<boolean>()
+  const errors = useStore(field.store, (state) => state.meta.errors)
+
+  return (
+    <div>
+      <div className="flex items-center gap-2">
+        <ShadcnSwitch
+          id={label}
+          onBlur={field.handleBlur}
+          checked={field.state.value}
+          onCheckedChange={(checked) => field.handleChange(checked)}
+        />
+        <Label htmlFor={label}>{label}</Label>
+      </div>
+      {field.state.meta.isTouched && <ErrorMessages errors={errors} />}
+    </div>
+  )
+}
+  
+<% } else { %>
+export function SubscribeButton({ label }: { label: string }) {
+  const form = useFormContext()
+  return (
+    <form.Subscribe selector={(state) => state.isSubmitting}>
+      {(isSubmitting) => (
+        <button
+          type="submit"
+          disabled={isSubmitting}
+          className="px-6 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition-colors disabled:opacity-50"
+        >
+          {label}
+        </button>
+      )}
+    </form.Subscribe>
+  )
+}
+
+function ErrorMessages({
+  errors,
+}: {
+  errors: Array<string | { message: string }>
+}) {
+  return (
+    <>
+      {errors.map((error) => (
+        <div
+          key={typeof error === 'string' ? error : error.message}
+          className="text-red-500 mt-1 font-bold"
+        >
+          {typeof error === 'string' ? error : error.message}
+        </div>
+      ))}
+    </>
+  )
+}
+
+export function TextField({
+  label,
+  placeholder,
+}: {
+  label: string
+  placeholder?: string
+}) {
+  const field = useFieldContext<string>()
+  const errors = useStore(field.store, (state) => state.meta.errors)
+
+  return (
+    <div>
+      <label htmlFor={label} className="block font-bold mb-1 text-xl">
+        {label}
+        <input
+          value={field.state.value}
+          placeholder={placeholder}
+          onBlur={field.handleBlur}
+          onChange={(e) => field.handleChange(e.target.value)}
+          className="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+        />
+      </label>
+      {field.state.meta.isTouched && <ErrorMessages errors={errors} />}
+    </div>
+  )
+}
+
+export function TextArea({
+  label,
+  rows = 3,
+}: {
+  label: string
+  rows?: number
+}) {
+  const field = useFieldContext<string>()
+  const errors = useStore(field.store, (state) => state.meta.errors)
+
+  return (
+    <div>
+      <label htmlFor={label} className="block font-bold mb-1 text-xl">
+        {label}
+        <textarea
+          value={field.state.value}
+          onBlur={field.handleBlur}
+          rows={rows}
+          onChange={(e) => field.handleChange(e.target.value)}
+          className="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+        />
+      </label>
+      {field.state.meta.isTouched && <ErrorMessages errors={errors} />}
+    </div>
+  )
+}
+
+export function Select({
+  label,
+  values,
+}: {
+  label: string
+  values: Array<{ label: string; value: string }>
+  placeholder?: string
+}) {
+  const field = useFieldContext<string>()
+  const errors = useStore(field.store, (state) => state.meta.errors)
+
+  return (
+    <div>
+      <label htmlFor={label} className="block font-bold mb-1 text-xl">
+        {label}
+      </label>
+      <select
+        name={field.name}
+        value={field.state.value}
+        onBlur={field.handleBlur}
+        onChange={(e) => field.handleChange(e.target.value)}
+        className="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+      >
+        {values.map((value) => (
+          <option key={value.value} value={value.value}>
+            {value.label}
+          </option>
+        ))}
+      </select>
+      {field.state.meta.isTouched && <ErrorMessages errors={errors} />}
+    </div>
+  )
+}
+<% } %>

package/templates/react/add-on/form/assets/src/hooks/demo.form-context.ts

@@ -0,0 +1,4 @@
+import { createFormHookContexts } from '@tanstack/react-form'
+
+export const { fieldContext, useFieldContext, formContext, useFormContext } =
+  createFormHookContexts()

package/templates/react/add-on/form/assets/src/hooks/demo.form.ts

@@ -0,0 +1,22 @@
+import { createFormHook } from '@tanstack/react-form'
+
+import {
+  Select,
+  SubscribeButton,
+  TextArea,
+  TextField,
+} from '../components/demo.FormComponents'
+import { fieldContext, formContext } from './demo.form-context'
+
+export const { useAppForm } = createFormHook({
+  fieldComponents: {
+    TextField,
+    Select,
+    TextArea,
+  },
+  formComponents: {
+    SubscribeButton,
+  },
+  fieldContext,
+  formContext,
+})

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

@@ -0,0 +1,213 @@
+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">
+            {(field) => <field.TextField label="Full Name" />}
+          </form.AppField>
+
+          <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
+              },
+            }}
+          >
+            {(field) => <field.TextField label="Email" />}
+          </form.AppField>
+
+          <form.AppField
+            name="address.street"
+            validators={{
+              onBlur: ({ value }) => {
+                if (!value || value.trim().length === 0) {
+                  return 'Street address is required'
+                }
+                return undefined
+              },
+            }}
+          >
+            {(field) => <field.TextField label="Street Address" />}
+          </form.AppField>
+
+          <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
+                },
+              }}
+            >
+              {(field) => <field.TextField label="City" />}
+            </form.AppField>
+            <form.AppField
+              name="address.state"
+              validators={{
+                onBlur: ({ value }) => {
+                  if (!value || value.trim().length === 0) {
+                    return 'State is required'
+                  }
+                  return undefined
+                },
+              }}
+            >
+              {(field) => <field.TextField label="State" />}
+            </form.AppField>
+            <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
+                },
+              }}
+            >
+              {(field) => <field.TextField label="Zip Code" />}
+            </form.AppField>
+          </div>
+
+          <form.AppField
+            name="address.country"
+            validators={{
+              onBlur: ({ value }) => {
+                if (!value || value.trim().length === 0) {
+                  return 'Country is required'
+                }
+                return undefined
+              },
+            }}
+          >
+            {(field) => (
+              <field.Select
+                label="Country"
+                values={[
+                  { label: 'United States', value: 'US' },
+                  { label: 'Canada', value: 'CA' },
+                  { label: 'United Kingdom', value: 'UK' },
+                  { label: 'Australia', value: 'AU' },
+                  { label: 'Germany', value: 'DE' },
+                  { label: 'France', value: 'FR' },
+                  { label: 'Japan', value: 'JP' },
+                ]}
+                placeholder="Select a country"
+              />
+            )}
+        </form.AppField>
+
+          <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
+              },
+            }}
+          >
+            {(field) => (
+              <field.TextField label="Phone" placeholder="123-456-7890" />
+            )}
+          </form.AppField>
+
+          <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/address',
+  component: AddressForm,
+  getParentRoute: () => parentRoute,
+})
+<% } %>

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

@@ -0,0 +1,77 @@
+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">
+            {(field) => <field.TextField label="Title" />}
+          </form.AppField>
+
+          <form.AppField name="description">
+            {(field) => <field.TextArea label="Description" />}
+          </form.AppField>
+
+          <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/simple',
+  component: SimpleForm,
+  getParentRoute: () => parentRoute,
+})
+<% } %>

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

@@ -0,0 +1,26 @@
+{
+  "name": "Form",
+  "description": "TanStack Form",
+  "phase": "add-on",
+  "templates": ["file-router", "code-router"],
+  "link": "https://tanstack.com/form/latest",
+  "routes": [
+    {
+      "url": "/demo/form/simple",
+      "name": "Simple Form"
+    },
+    {
+      "url": "/demo/form/address",
+      "name": "Address Form"
+    }
+  ],
+  "shadcnComponents": [
+    "button",
+    "select",
+    "input",
+    "textarea",
+    "slider",
+    "switch",
+    "label"
+  ]
+}