@tanstack/cta-framework-solid 0.10.0-alpha.20

package/ADD-ON-AUTHORING.md

@@ -0,0 +1,129 @@
+# Add-on Authoring for the CTA Framework for Solid
+
+# Available Integrations
+
+These are the available integration points for the Solid Framework.
+
+## header-user
+
+Integrates into the `Header` component shared by all routes. These components are placed in the right hand side of the header bar.
+
+The code is always integrated into the `src/components/Header.(tsx|jsx)` file.
+
+### Examples
+
+Code in `assets/src/components/my-header.tsx`:
+
+```ts
+export default function MyHeader() {
+  return <div>Header User</div>
+}
+```
+
+Configuration in `info.json`:
+
+```json
+"integrations": [
+  {
+    "type": "header-user",
+    "jsName": "MyHeader",
+    "path": "src/components/my-header.tsx"
+  },
+]
+```
+
+## layout
+
+Handles injecting a component into the layout of the page:
+
+The code is integrated into these locations with these application architectures:
+
+- `code-router` - In the `src/main.tsx` (or `src/main.jsx`) file
+- `file-router` - In the `src/__root.tsx` file
+- `file-router` with `start` - In the `src/main.tsx` file
+
+### Examples
+
+Code in `assets/src/components/my-layout.tsx`:
+
+```ts
+export default function MyLayout() {
+  return <div>Hi from MyLayout!</div>
+}
+```
+
+Configuration in `info.json`:
+
+```json
+"integrations": [
+  {
+    "type": "layout",
+    "jsName": "MyLayout",
+    "path": "src/components/my-layout.tsx"
+  },
+]
+```
+
+## provider
+
+Handles placing UI style provider wrappers into the right spot in three different applicatin setups:
+
+The code is integrated into these locations with these application architectures:
+
+- `code-router` - In the `src/main.tsx` (or `src/main.jsx`) file
+- `file-router` - In the `src/__root.tsx` file
+- `file-router` with `start` - In the `src/main.tsx` file
+
+### Examples
+
+Code in `assets/src/components/my-provider.tsx`:
+
+```ts
+export default function MyProvider({ children }: { children: React.ReactNode }) {
+  return <SomeKindOfProvider>{children}</SomeKindOfProvider>
+}
+```
+
+Configuration in `info.json`:
+
+```json
+"integrations": [
+  {
+    "type": "provider",
+    "jsName": "MyProvider",
+    "path": "src/components/my-provider.tsx"
+  },
+]
+```
+
+# Routes
+
+If your add-on creates routes you need to specify those in the `info.json` file.
+
+This example will define a route at `/demo/my-demo-route` that will be rendered by the `DemoMyDemoRoute` component. There will be a `Demo Route` link in the header to this route.
+
+```json
+"routes": [
+  {
+    "url": "/demo/my-demo-route",
+    "name": "Demo Route",
+    "path": "src/routes/demo.my-demo-route.tsx",
+    "jsName": "DemoMyDemoRoute"
+  }
+],
+```
+
+If you don't want a header link you can omit the `url` and `name` properties.
+
+```json
+"routes": [
+  {
+    "path": "src/routes/demo.my-hidden-demo-route.tsx",
+    "jsName": "DemoMyHiddenDemoRoute"
+  }
+],
+```
+
+You **MUST** specify routes in the `info.json` file if your add-on supports the `code-router` mode. This is because the `code-routers` setup needs to import the routes in order to add them to the router.
+
+By convension you should prefix demo routes with `demo` to make it clear that they are demo routes so they can be easily identified and removed.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021-present Tanner Linsley
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/add-ons/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/add-ons/form/info.json

@@ -0,0 +1,16 @@
+{
+  "name": "Form",
+  "description": "TanStack Form",
+  "phase": "add-on",
+  "link": "https://tanstack.com/form/latest",
+  "modes": ["file-router", "code-router"],
+  "type": "add-on",
+  "routes": [
+    {
+      "url": "/demo/form",
+      "name": "Form",
+      "path": "src/routes/demo.form.tsx",
+      "jsName": "FormDemo"
+    }
+  ]
+}

package/add-ons/form/package.json

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

package/add-ons/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/add-ons/module-federation/assets/src/demo-mf-component.tsx

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

package/add-ons/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/add-ons/module-federation/info.json

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

package/add-ons/module-federation/package.json

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

package/add-ons/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/add-ons/sentry/assets/_dot_env.local.append

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

package/add-ons/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/add-ons/sentry/info.json

@@ -0,0 +1,16 @@
+{
+  "name": "Sentry",
+  "phase": "setup",
+  "description": "Add Sentry for error monitoring and crash reporting (requires Start).",
+  "link": "https://sentry.com/",
+  "modes": ["file-router"],
+  "type": "add-on",
+  "routes": [
+    {
+      "url": "/demo/sentry/bad-event-handler",
+      "name": "Sentry",
+      "path": "src/routes/demo.sentry.bad-event-handler.tsx",
+      "jsName": "SentryBadEventHandlerDemo"
+    }
+  ]
+}

package/add-ons/sentry/package.json

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

package/add-ons/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/add-ons/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))
+}