create-tsrouter-app 0.8.0 → 0.9.0

package/dist/create-app.js

@@ -307,7 +307,7 @@ export async function createApp(options, { silent = false, environment, }) {
         if (shadcnComponents.size > 0) {
             s?.start(`Installing shadcn components (${Array.from(shadcnComponents).join(', ')})...`);
             await environment.execute('npx', ['shadcn@canary', 'add', ...shadcnComponents], targetDir);
-            s?.stop(`Installed required shadcn components`);
+            s?.stop(`Installed additional shadcn components`);
         }
     }
     const integrations = [];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-tsrouter-app",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "Tanstack Application Builder",
   "bin": "./dist/index.js",
   "type": "module",

package/src/create-app.ts

@@ -490,7 +490,7 @@ export async function createApp(
         ['shadcn@canary', 'add', ...shadcnComponents],
         targetDir,
       )
-      s?.stop(`Installed required shadcn components`)
+      s?.stop(`Installed additional shadcn components`)
     }
   }
 

package/templates/react/add-on/form/assets/src/components/demo.FormComponents.tsx.ejs

@@ -0,0 +1,300 @@
+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/routes/demo.form.address.tsx.ejs

@@ -153,18 +153,21 @@ function AddressForm() {
             }}
           >
             {(field) => (
-              <field.Select label="Country">
-                <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>
-              </field.Select>
+              <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>
 
           <form.AppField
             name="phone"

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

@@ -13,5 +13,14 @@
       "url": "/demo/form/address",
       "name": "Address Form"
     }
+  ],
+  "shadcnComponents": [
+    "button",
+    "select",
+    "input",
+    "textarea",
+    "slider",
+    "switch",
+    "label"
   ]
 }

package/templates/react/add-on/form/assets/src/components/demo.FormComponents.tsx

@@ -1,121 +0,0 @@
-import { useStore } from '@tanstack/react-form'
-import { useFieldContext, useFormContext } from '../hooks/demo.form-context'
-
-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,
-  children,
-}: {
-  label: string
-  children: React.ReactNode
-}) {
-  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"
-      >
-        {children}
-      </select>
-      {field.state.meta.isTouched && <ErrorMessages errors={errors} />}
-    </div>
-  )
-}