@tanstack/cta-engine 0.10.0-alpha.6

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

@@ -0,0 +1,352 @@
+import { <% if (fileRouter) { %>createFileRoute<% } else { %>createRoute<% } %> } from '@tanstack/solid-router'
+import { createForm } from '@tanstack/solid-form'
+
+import type { JSX } from 'solid-js/jsx-runtime'
+import type { ValidationError } from '@tanstack/solid-form'
+
+<% if (codeRouter) { %>
+import type { RootRoute } from '@tanstack/solid-router'
+<% } else { %>
+export const Route = createFileRoute('/demo/form')({
+  component: FormExample,
+})
+<% } %>
+function FieldWrapper(props: {
+  children: JSX.Element
+  errors: Array<ValidationError>
+  label: string
+}) {
+  return (
+    <div>
+      <label for={props.label} class="block font-bold mb-1 text-xl">
+        {props.label}
+      </label>
+      {props.children}
+      {props.errors.length ? (
+        <div class="text-red-500 mt-1 font-bold">{props.errors.join(', ')}</div>
+      ) : null}
+    </div>
+  )
+}
+
+function FormExample() {
+  const form = createForm(() => ({
+    defaultValues: {
+      fullName: '',
+      email: '',
+      address: {
+        street: '',
+        city: '',
+        state: '',
+        zipCode: '',
+        country: '',
+      },
+      phone: '',
+    },
+    onSubmit: ({ value }) => {
+      console.log(value)
+      // Show success message
+      alert('Form submitted successfully!')
+    },
+  }))
+
+  return (
+    <div
+      class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-100 to-blue-100 p-4 text-white"
+      style={{
+        'background-image':
+          'radial-gradient(50% 50% at 5% 40%, #f4a460 0%, #8b4513 70%, #1a0f0a 100%)',
+      }}
+    >
+      <div class="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()
+          }}
+          class="space-y-6"
+        >
+          {/* Full Name Field */}
+          <div>
+            <form.Field
+              name="fullName"
+              validators={{
+                onBlur: ({ value }) => {
+                  if (value.trim().length === 0) {
+                    return 'Full name is required'
+                  }
+                  if (value.length < 3) {
+                    return 'Name must be at least 3 characters'
+                  }
+                  return undefined
+                },
+              }}
+              children={(field) => (
+                <FieldWrapper
+                  label="Full Name"
+                  errors={field().state.meta.errors}
+                >
+                  <input
+                    id="fullName"
+                    name="fullName"
+                    value={field().state.value}
+                    onBlur={field().handleBlur}
+                    onChange={(e) => field().handleChange(e.target.value)}
+                    class="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                  />
+                </FieldWrapper>
+              )}
+            />
+          </div>
+
+          {/* Email Field */}
+          <div>
+            <form.Field
+              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) => (
+                <FieldWrapper
+                  label="Email Address"
+                  errors={field().state.meta.errors}
+                >
+                  <input
+                    id="email"
+                    name="email"
+                    type="email"
+                    value={field().state.value}
+                    onBlur={field().handleBlur}
+                    onChange={(e) => field().handleChange(e.target.value)}
+                    class="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                  />
+                </FieldWrapper>
+              )}
+            />
+          </div>
+
+          {/* Street Address */}
+          <div>
+            <form.Field
+              name="address.street"
+              validators={{
+                onBlur: ({ value }) => {
+                  if (!value || value.trim().length === 0) {
+                    return 'Street address is required'
+                  }
+                  return undefined
+                },
+              }}
+              children={(field) => (
+                <FieldWrapper
+                  label="Street Address"
+                  errors={field().state.meta.errors}
+                >
+                  <input
+                    id="street"
+                    name="street"
+                    value={field().state.value}
+                    onBlur={field().handleBlur}
+                    onChange={(e) => field().handleChange(e.target.value)}
+                    class="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                  />
+                </FieldWrapper>
+              )}
+            />
+          </div>
+
+          {/* City, State, Zip in a row */}
+          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+            {/* City */}
+            <form.Field
+              name="address.city"
+              validators={{
+                onBlur: ({ value }) => {
+                  if (!value || value.trim().length === 0) {
+                    return 'City is required'
+                  }
+                  return undefined
+                },
+              }}
+              children={(field) => (
+                <FieldWrapper label="City" errors={field().state.meta.errors}>
+                  <input
+                    id="city"
+                    name="city"
+                    value={field().state.value}
+                    onBlur={field().handleBlur}
+                    onChange={(e) => field().handleChange(e.target.value)}
+                    class="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                  />
+                </FieldWrapper>
+              )}
+            />
+
+            {/* State */}
+            <form.Field
+              name="address.state"
+              validators={{
+                onBlur: ({ value }) => {
+                  if (!value || value.trim().length === 0) {
+                    return 'State is required'
+                  }
+                  return undefined
+                },
+              }}
+              children={(field) => (
+                <FieldWrapper label="State" errors={field().state.meta.errors}>
+                  <input
+                    id="state"
+                    name="state"
+                    value={field().state.value}
+                    onBlur={field().handleBlur}
+                    onChange={(e) => field().handleChange(e.target.value)}
+                    class="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                  />
+                </FieldWrapper>
+              )}
+            />
+
+            {/* Zip Code */}
+            <form.Field
+              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) => (
+                <FieldWrapper
+                  label="Zip Code"
+                  errors={field().state.meta.errors}
+                >
+                  <input
+                    id="zipCode"
+                    name="zipCode"
+                    value={field().state.value}
+                    onBlur={field().handleBlur}
+                    onChange={(e) => field().handleChange(e.target.value)}
+                    class="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                  />
+                </FieldWrapper>
+              )}
+            />
+          </div>
+
+          {/* Country */}
+          <div>
+            <form.Field
+              name="address.country"
+              validators={{
+                onBlur: ({ value }) => {
+                  if (!value || value.trim().length === 0) {
+                    return 'Country is required'
+                  }
+                  return undefined
+                },
+              }}
+              children={(field) => (
+                <FieldWrapper
+                  label="Country"
+                  errors={field().state.meta.errors}
+                >
+                  <select
+                    id="country"
+                    name="country"
+                    value={field().state.value}
+                    onBlur={field().handleBlur}
+                    onChange={(e) => field().handleChange(e.target.value)}
+                    class="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                  >
+                    <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>
+                  </select>
+                </FieldWrapper>
+              )}
+            />
+          </div>
+
+          {/* Phone Number */}
+          <div>
+            <form.Field
+              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) => (
+                <FieldWrapper
+                  label="Phone Number"
+                  errors={field().state.meta.errors}
+                >
+                  <input
+                    id="phone"
+                    name="phone"
+                    type="tel"
+                    value={field().state.value}
+                    onBlur={field().handleBlur}
+                    onChange={(e) => field().handleChange(e.target.value)}
+                    class="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                    placeholder="(123) 456-7890"
+                  />
+                </FieldWrapper>
+              )}
+            />
+          </div>
+
+          {/* Submit Button */}
+          <div class="flex justify-end">
+            <button
+              type="submit"
+              disabled={form.state.isSubmitting}
+              class="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"
+            >
+              {form.state.isSubmitting ? 'Submitting...' : 'Submit'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}
+
+<% if (codeRouter) { %>
+export default (parentRoute: RootRoute) => createRoute({
+  path: '/demo/form',
+  component: FormExample,
+  getParentRoute: () => parentRoute,
+})
+<% } %>
+    

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

@@ -0,0 +1,13 @@
+{
+  "name": "Form",
+  "description": "TanStack Form",
+  "phase": "add-on",
+  "link": "https://tanstack.com/form/latest",
+  "templates": ["file-router", "code-router"],
+  "routes": [
+    {
+      "url": "/demo/form",
+      "name": "Form"
+    }
+  ]
+}

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

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "@tanstack/solid-form": "^1.0.0"
+  }
+}

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

@@ -0,0 +1,27 @@
+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: {
+    'solid-js': {
+      singleton: true,
+      requiredVersion: packageJSON.dependencies['solid-js'],
+    },
+  },
+}

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

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

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

@@ -0,0 +1,9 @@
+import { render } from 'solid-js/web'
+
+function App() {
+  return <div>Hello from Solid Self Contained</div>
+}
+
+export function DemoMfSelfContained(rootElement: HTMLElement) {
+  render(() => <App />, rootElement)
+}

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

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

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

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

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

@@ -0,0 +1,22 @@
+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 intstrumented. 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/browser'
+```
+
+And then wrap the implementation of the server function with `Sentry.startSpan`, liks so:
+
+```tsx
+Sentry.startSpan({ name: 'Requesting all the pokemon' }, async () => {
+  // Some lengthy operation here
+  await fetch('https://api.pokemon.com/data/')
+})
+```

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

@@ -0,0 +1,2 @@
+# Your Sentry DSN (from your Sentry account)
+VITE_SENTRY_DSN=

package/templates/solid/add-on/sentry/assets/src/routes/demo.sentry.bad-event-handler.tsx

@@ -0,0 +1,20 @@
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/demo/sentry/bad-event-handler')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return (
+    <div className="p-4">
+      <button
+        type="button"
+        onClick={() => {
+          throw new Error('Sentry Frontend Error')
+        }}
+      >
+        Throw error
+      </button>
+    </div>
+  )
+}

package/templates/solid/add-on/sentry/info.json

@@ -0,0 +1,13 @@
+{
+  "name": "Sentry",
+  "phase": "setup",
+  "description": "Add Sentry for error monitoring and crash reporting (requires Start).",
+  "link": "https://sentry.com/",
+  "templates": ["file-router"],
+  "routes": [
+    {
+      "url": "/demo/sentry/bad-event-handler",
+      "name": "Sentry"
+    }
+  ]
+}

package/templates/solid/add-on/sentry/package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "@sentry/solid": "^9.1.0"
+  }
+}

package/templates/solid/add-on/solid-ui/README.md

@@ -0,0 +1,9 @@
+## Solid-UI
+
+This installation of Solid-UI follows the manual instructions but was modified to work with Tailwind V4.
+
+To install the components, run the following command (this install button):
+
+```bash
+npx solidui-cli@latest add button
+```

package/templates/solid/add-on/solid-ui/assets/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/templates/solid/add-on/solid-ui/assets/src/styles.css

@@ -0,0 +1,138 @@
+@import 'tailwindcss';
+
+@plugin "tailwindcss-animate";
+
+@custom-variant dark (&:is(.dark *));
+
+body {
+  @apply m-0;
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family:
+    source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+}
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.21 0.006 285.885);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.871 0.006 286.286);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.21 0.006 285.885);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.871 0.006 286.286);
+}
+
+.dark {
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.141 0.005 285.823);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.141 0.005 285.823);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.21 0.006 285.885);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.396 0.141 25.723);
+  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --border: oklch(0.274 0.006 286.033);
+  --input: oklch(0.274 0.006 286.033);
+  --ring: oklch(0.442 0.017 285.786);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.274 0.006 286.033);
+  --sidebar-ring: oklch(0.442 0.017 285.786);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/templates/solid/add-on/solid-ui/assets/ui.config.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "https://solid-ui.com/schema.json",
+  "tsx": true,
+  "tailwind": {
+    "css": "src/styles.css",
+    "config": "tailwind.config.cjs",
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "~/components/ui",
+    "utils": "~/lib/utils"
+  }
+}

package/templates/solid/add-on/solid-ui/info.json

@@ -0,0 +1,11 @@
+{
+  "name": "Solid-UI",
+  "description": "Add Solid-UI to your application.",
+  "phase": "add-on",
+  "link": "https://ui.shadcn.com/",
+  "templates": ["file-router", "code-router"],
+  "command": {
+    "command": "npx",
+    "args": ["solidui-cli@latest", "add", "button", "input"]
+  }
+}