feat: Add project name validation

packages/cta-cli/package.json

@@ -40,13 +40,15 @@
     "commander": "^13.1.0",
     "express": "^4.21.2",
     "semver": "^7.7.2",
+    "validate-npm-package-name": "^7.0.0",
     "zod": "^3.24.2"
   },
   "devDependencies": {
     "@tanstack/config": "^0.16.2",
     "@types/express": "^5.0.1",
     "@types/node": "^22.13.4",
     "@types/semver": "^7.7.0",
+    "@types/validate-npm-package-name": "^4.0.2",
     "@vitest/coverage-v8": "3.1.1",
     "eslint": "^9.20.0",
     "typescript": "^5.6.3",

packages/cta-cli/src/command-line.ts

@@ -12,6 +12,7 @@ import {
 import type { Options } from '@tanstack/cta-engine'
 
 import type { CliOptions } from './types.js'
+import { validateProjectName } from './utils.js'
 
 export async function normalizeOptions(
   cliOptions: CliOptions,
@@ -27,6 +28,15 @@ export async function normalizeOptions(
     return undefined
   }
 
+  // Validate project name
+  if (projectName) {
+    const { valid, error } = validateProjectName(projectName)
+    if (!valid) {
+      console.error(error);
+      process.exit(1);
+    }
+  }
+
   let tailwind = !!cliOptions.tailwind
 
   let mode: string =

packages/cta-cli/src/options.ts

@@ -24,6 +24,7 @@ import {
 import type { Options } from '@tanstack/cta-engine'
 
 import type { CliOptions } from './types.js'
+import { validateProjectName } from './utils.js'
 
 export async function promptForCreateOptions(
   cliOptions: CliOptions,
@@ -41,7 +42,16 @@ export async function promptForCreateOptions(
 
   options.framework = getFrameworkById(cliOptions.framework || 'react-cra')!
 
-  options.projectName = cliOptions.projectName || (await getProjectName())
+  if (cliOptions.projectName) {
+    const { valid, error } = validateProjectName(cliOptions.projectName)
+    if (!valid) {
+      console.error(error)
+      process.exit(1)
+    }
+    options.projectName = cliOptions.projectName
+  } else {
+    options.projectName = await getProjectName()
+  }
 
   // Router type selection
   if (forcedMode) {

packages/cta-cli/src/ui-prompts.ts

@@ -17,6 +17,7 @@ import type { AddOn, PackageManager } from '@tanstack/cta-engine'
 
 import type { Framework } from '@tanstack/cta-engine/dist/types/types.js'
 import { InitialData } from '../../cta-ui/src/types'
+import { validateProjectName } from './utils.js'
 
 export async function getProjectName(): Promise<string> {
   const value = await text({
@@ -26,6 +27,11 @@ export async function getProjectName(): Promise<string> {
       if (!value) {
         return 'Please enter a name'
       }
+
+      const { valid, error } = validateProjectName(value);
+      if (!valid) {
+        return error;
+      }
     },
   })
 

packages/cta-cli/src/utils.ts

@@ -1,8 +1,24 @@
 import type { TemplateOptions } from './types.js'
+import validatePackageName from "validate-npm-package-name";
 
 export function convertTemplateToMode(template: TemplateOptions): string {
   if (template === 'typescript' || template === 'javascript') {
     return 'code-router'
   }
   return 'file-router'
 }
+
+export function validateProjectName(name: string) {
+  const {
+    validForNewPackages,
+    validForOldPackages,
+    errors,
+    warnings,
+  } = validatePackageName(name);
+  const error = errors?.[0] || warnings?.[0];
+
+  return {
+    valid: validForNewPackages && validForOldPackages,
+    error: error?.replace('name', 'Project name') || 'Invalid project name',
+  }
+}