create-start-app 0.8.0 → 0.9.2

package/dist/create-app.js

@@ -290,7 +290,7 @@ export async function createApp(options, { silent = false, environment, }) {
                 await copyFilesRecursively(environment, addOnDir, targetDir, async (file, targetFileName) => templateFile(addOnDir, file, targetFileName));
             }
             if (addOn.command) {
-                await environment.execute(addOn.command.command, addOn.command.args || [], targetDir);
+                await environment.execute(addOn.command.command, addOn.command.args || [], resolve(targetDir));
             }
             s?.stop(`${addOn.name} setup complete`);
         }
@@ -306,8 +306,8 @@ 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`);
+            await environment.execute('npx', ['shadcn@canary', 'add', '--force', ...shadcnComponents], resolve(targetDir));
+            s?.stop(`Installed additional shadcn components`);
         }
     }
     const integrations = [];
@@ -400,7 +400,7 @@ export async function createApp(options, { silent = false, environment, }) {
     await templateFile(templateDirBase, 'README.md.ejs');
     // Install dependencies
     s?.start(`Installing dependencies via ${options.packageManager}...`);
-    await environment.execute(options.packageManager, ['install'], targetDir);
+    await environment.execute(options.packageManager, ['install'], resolve(targetDir));
     s?.stop(`Installed dependencies`);
     if (warnings.length > 0) {
         if (!silent) {
@@ -412,17 +412,17 @@ export async function createApp(options, { silent = false, environment, }) {
         switch (options.packageManager) {
             case 'pnpm':
                 // pnpm automatically forwards extra arguments
-                await environment.execute(options.packageManager, ['run', 'check', '--fix'], targetDir);
+                await environment.execute(options.packageManager, ['run', 'check', '--fix'], resolve(targetDir));
                 break;
             default:
-                await environment.execute(options.packageManager, ['run', 'check', '--', '--fix'], targetDir);
+                await environment.execute(options.packageManager, ['run', 'check', '--', '--fix'], resolve(targetDir));
                 break;
         }
         s?.stop(`Applied toolchain ${options.toolchain}...`);
     }
     if (options.git) {
         s?.start(`Initializing git repository...`);
-        await environment.execute('git', ['init'], targetDir);
+        await environment.execute('git', ['init'], resolve(targetDir));
         s?.stop(`Initialized git repository`);
     }
     environment.finishRun();

package/package.json

@@ -1,10 +1,9 @@
 {
   "name": "create-start-app",
-  "version": "0.8.0",
+  "version": "0.9.2",
   "description": "Tanstack Application Builder",
   "bin": "./dist/index.js",
   "type": "module",
-  "scripts": {},
   "repository": {
     "type": "git",
     "url": "https://github.com/TanStack/create-tsrouter-app.git"

package/src/create-app.ts

@@ -463,7 +463,7 @@ export async function createApp(
         await environment.execute(
           addOn.command.command,
           addOn.command.args || [],
-          targetDir,
+          resolve(targetDir),
         )
       }
 
@@ -487,10 +487,10 @@ export async function createApp(
       )
       await environment.execute(
         'npx',
-        ['shadcn@canary', 'add', ...shadcnComponents],
-        targetDir,
+        ['shadcn@canary', 'add', '--force', ...shadcnComponents],
+        resolve(targetDir),
       )
-      s?.stop(`Installed required shadcn components`)
+      s?.stop(`Installed additional shadcn components`)
     }
   }
 
@@ -658,7 +658,11 @@ export async function createApp(
 
   // Install dependencies
   s?.start(`Installing dependencies via ${options.packageManager}...`)
-  await environment.execute(options.packageManager, ['install'], targetDir)
+  await environment.execute(
+    options.packageManager,
+    ['install'],
+    resolve(targetDir),
+  )
   s?.stop(`Installed dependencies`)
 
   if (warnings.length > 0) {
@@ -675,14 +679,14 @@ export async function createApp(
         await environment.execute(
           options.packageManager,
           ['run', 'check', '--fix'],
-          targetDir,
+          resolve(targetDir),
         )
         break
       default:
         await environment.execute(
           options.packageManager,
           ['run', 'check', '--', '--fix'],
-          targetDir,
+          resolve(targetDir),
         )
         break
     }
@@ -691,7 +695,7 @@ export async function createApp(
 
   if (options.git) {
     s?.start(`Initializing git repository...`)
-    await environment.execute('git', ['init'], targetDir)
+    await environment.execute('git', ['init'], resolve(targetDir))
     s?.stop(`Initialized git repository`)
   }
 

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