@tanstack/cta-engine 0.10.0-alpha.14 → 0.10.0-alpha.16

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

@@ -1,13 +0,0 @@
-{
-  "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

@@ -1,6 +0,0 @@
-{
-  "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

@@ -1,300 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,213 +0,0 @@
-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

@@ -1,77 +0,0 @@
-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

@@ -1,26 +0,0 @@
-{
-  "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"
-  ]
-}

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

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