@tanstack/cta-engine 0.14.3 → 0.15.0

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"
-  }
-}

package/templates/react/add-on/module-federation/assets/module-federation.config.js.ejs

@@ -1,31 +0,0 @@
-import packageJSON from './package.json'
-
-function remoteConfig(name, url) {
-  return {
-    type: 'module',
-    name,
-    entry: url,
-    entryGlobalName: 'remote',
-    shareScope: 'default',
-  }
-}
-
-export default {
-  filename: 'remoteEntry.js',
-  name: '<%= projectName %>',
-  exposes: {
-    './DemoMfComponent': './src/demo-mf-component.tsx',
-    './DemoMfSelfContained': './src/demo-mf-self-contained.tsx',
-  },
-  remotes: {},
-  shared: {
-    react: {
-      singleton: true,
-      requiredVersion: packageJSON.dependencies.react,
-    },
-    'react-dom': {
-      singleton: true,
-      requiredVersion: packageJSON.dependencies['react-dom'],
-    },
-  },
-}

package/templates/react/add-on/module-federation/assets/src/demo-mf-component.tsx

@@ -1,3 +0,0 @@
-export function DemoMfComponent() {
-  return <div>Demo Mf Component</div>
-}

package/templates/react/add-on/module-federation/assets/src/demo-mf-self-contained.tsx

@@ -1,11 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-
-function App() {
-  return <div>Hello from self-contained module federation</div>
-}
-
-export function DemoMfSelfContained(rootElement: HTMLElement) {
-  const root = ReactDOM.createRoot(rootElement)
-  root.render(<App />)
-}

package/templates/react/add-on/module-federation/info.json

@@ -1,7 +0,0 @@
-{
-  "name": "Module Federation",
-  "description": "Module Federation",
-  "phase": "add-on",
-  "templates": ["code-router"],
-  "link": "https://module-federation.io/"
-}

package/templates/react/add-on/module-federation/package.json

@@ -1,5 +0,0 @@
-{
-  "dependencies": {
-    "@module-federation/vite": "^1.1.9"
-  }
-}

package/templates/react/add-on/netlify/README.md

@@ -1,11 +0,0 @@
-## Setting up Netlify
-
-First install the Netlify CLI with:
-
-```bash
-npm install -g netlify-cli`
-```
-
-```bash
-netlify init
-```

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

@@ -1,7 +0,0 @@
-{
-  "name": "Netlify",
-  "description": "Netlify deployment setup",
-  "link": "https://docs.netlify.com",
-  "phase": "add-on",
-  "templates": ["file-router", "code-router"]
-}

package/templates/react/add-on/sentry/assets/_dot_cursorrules.append

@@ -1,22 +0,0 @@
-We use Sentry for watching for errors in our deployed application, as well as for instrumentation of our application.
-
-## Error collection
-
-Error collection is automatic and configured in `src/router.tsx`.
-
-## Instrumentation
-
-We want our server functions instrumented. So if you see a function name like `createServerFn`, you can instrument it with Sentry. You'll need to import `Sentry`:
-
-```tsx
-import * as Sentry from '@sentry/tanstackstart-react'
-```
-
-And then wrap the implementation of the server function with `Sentry.startSpan`, like so:
-
-```tsx
-Sentry.startSpan({ name: 'Requesting all the pokemon' }, async () => {
-  // Some lengthy operation here
-  await fetch('https://api.pokemon.com/data/')
-})
-```

package/templates/react/add-on/sentry/assets/_dot_env.local.append

@@ -1,11 +0,0 @@
-# Your Sentry DSN (from your Sentry account)
-VITE_SENTRY_DSN=
-
-# Your Sentry organization (from your Sentry account)
-VITE_SENTRY_ORG=
-
-# Your Sentry project (from your Sentry account)
-VITE_SENTRY_PROJECT=
-
-# Your Sentry authentication token (from your Sentry account)
-SENTRY_AUTH_TOKEN=

package/templates/react/add-on/sentry/assets/src/app/global-middleware.ts

@@ -1,11 +0,0 @@
-import * as Sentry from "@sentry/tanstackstart-react";
-import {
-	createMiddleware,
-	registerGlobalMiddleware,
-} from "@tanstack/react-start";
-
-registerGlobalMiddleware({
-	middleware: [
-		createMiddleware().server(Sentry.sentryGlobalServerMiddlewareHandler()),
-	],
-});