feat: Adding solid-ui, sentry and form

Author: jherr

src/create-app.ts

@@ -273,6 +273,14 @@ export async function createApp(options: Required<Options>) {
     await mkdir(resolve(targetDir, 'src/components'), { recursive: true })
   }
 
+  // Check for a .cursorrules file
+  if (existsSync(resolve(templateDirBase, '.cursorrules'))) {
+    await copyFile(
+      resolve(templateDirBase, '.cursorrules'),
+      resolve(targetDir, '.cursorrules'),
+    )
+  }
+
   // Copy in Vite and Tailwind config and CSS
   if (!options.tailwind) {
     await copyFiles(templateDirBase, ['./src/App.css'])

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

@@ -0,0 +1,136 @@
+import { createFileRoute } from '@tanstack/solid-router'
+
+import { createForm } from '@tanstack/solid-form'
+import type { AnyFieldApi } from '@tanstack/solid-form'
+
+interface FieldInfoProps {
+  field: AnyFieldApi
+}
+
+export const Route = createFileRoute('/demo/form')({
+  component: FormExample,
+})
+
+function FieldInfo(props: FieldInfoProps) {
+  return (
+    <>
+      {props.field.state.meta.isTouched &&
+      props.field.state.meta.errors.length ? (
+        <em>{props.field.state.meta.errors.join(',')}</em>
+      ) : null}
+      {props.field.state.meta.isValidating ? 'Validating...' : null}
+    </>
+  )
+}
+
+function FormExample() {
+  const form = createForm(() => ({
+    defaultValues: {
+      firstName: '',
+      lastName: '',
+    },
+    onSubmit: async ({ value }) => {
+      // Do something with form data
+      console.log(value)
+    },
+  }))
+
+  return (
+    <div class="max-w-md mx-auto mt-10 p-6 bg-white rounded-lg shadow-md">
+      <h1 class="text-2xl font-bold mb-8 text-gray-800 leading-tight">
+        Simple Form Example
+      </h1>
+      <form
+        class="space-y-6"
+        onSubmit={(e) => {
+          e.preventDefault()
+          e.stopPropagation()
+          form.handleSubmit()
+        }}
+      >
+        <div class="space-y-1">
+          <form.Field
+            name="firstName"
+            validators={{
+              onChange: ({ value }) =>
+                !value
+                  ? 'A first name is required'
+                  : value.length < 3
+                    ? 'First name must be at least 3 characters'
+                    : undefined,
+              onChangeAsyncDebounceMs: 500,
+              onChangeAsync: async ({ value }) => {
+                await new Promise((resolve) => setTimeout(resolve, 1000))
+                return (
+                  value.includes('error') && 'No "error" allowed in first name'
+                )
+              },
+            }}
+            children={(field) => {
+              return (
+                <>
+                  <label
+                    for={field().name}
+                    class="block text-sm font-medium text-gray-700 mb-1 leading-tight"
+                  >
+                    First Name:
+                  </label>
+                  <input
+                    id={field().name}
+                    name={field().name}
+                    value={field().state.value}
+                    onBlur={field().handleBlur}
+                    onInput={(e) => field().handleChange(e.target.value)}
+                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm leading-relaxed p-2"
+                  />
+                  <FieldInfo field={field()} />
+                </>
+              )
+            }}
+          />
+        </div>
+        <div class="space-y-1">
+          <form.Field
+            name="lastName"
+            children={(field) => (
+              <>
+                <label
+                  for={field().name}
+                  class="block text-sm font-medium text-gray-700 mb-1 leading-tight"
+                >
+                  Last Name:
+                </label>
+                <input
+                  id={field().name}
+                  name={field().name}
+                  value={field().state.value}
+                  onBlur={field().handleBlur}
+                  onInput={(e) => field().handleChange(e.target.value)}
+                  class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm leading-relaxed p-2"
+                />
+                <FieldInfo field={field()} />
+              </>
+            )}
+          />
+        </div>
+        <form.Subscribe
+          selector={(state) => ({
+            canSubmit: state.canSubmit,
+            isSubmitting: state.isSubmitting,
+          })}
+          children={(state) => {
+            return (
+              <button
+                type="submit"
+                disabled={!state().canSubmit}
+                class="w-full flex justify-center py-2.5 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed leading-tight"
+              >
+                {state().isSubmitting ? '...' : 'Submit'}
+              </button>
+            )
+          }}
+        />
+      </form>
+    </div>
+  )
+}

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

@@ -0,0 +1,12 @@
+{
+  "name": "Form",
+  "description": "TansStack Form",
+  "phase": "add-on",
+  "link": "https://tanstack.com/form/latest",
+  "routes": [
+    {
+      "url": "/demo/form",
+      "name": "Form"
+    }
+  ]
+}

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

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

templates/solid/add-on/sentry/assets/.cursorrules

@@ -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/')
+})
+```

templates/solid/add-on/sentry/assets/.env.local.append

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

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>
+  )
+}

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

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

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

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

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
+```