feat: Add project name validation (#226)

* feat: add project name validation when creating a new project

* refactor: remove redundant fallback in validateProjectName

* fix: resolve ESLint warnings & improve error message in validateProjectName

* fix: pnpm-lock update

---------

Co-authored-by: Jack Herrington <jherr@pobox.com>

Author: egvr2002

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

@@ -9,6 +9,7 @@ import {
   populateAddOnOptionsDefaults,
 } from '@tanstack/cta-engine'
 
+import { validateProjectName } from './utils.js'
 import type { Options } from '@tanstack/cta-engine'
 
 import type { CliOptions } from './types.js'
@@ -27,6 +28,14 @@ export async function normalizeOptions(
     return undefined
   }
 
+  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

@@ -21,6 +21,7 @@ import {
   selectTypescript,
 } from './ui-prompts.js'
 
+import { validateProjectName } from './utils.js'
 import type { Options } from '@tanstack/cta-engine'
 
 import type { CliOptions } from './types.js'
@@ -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

@@ -14,6 +14,7 @@ import {
   getAllAddOns,
 } from '@tanstack/cta-engine'
 
+import { validateProjectName } from './utils.js'
 import type { AddOn, PackageManager } from '@tanstack/cta-engine'
 
 import type { Framework } from '@tanstack/cta-engine/dist/types/types.js'
@@ -27,6 +28,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,3 +1,4 @@
+import validatePackageName from 'validate-npm-package-name'
 import type { TemplateOptions } from './types.js'
 
 export function convertTemplateToMode(template: TemplateOptions): string {
@@ -6,3 +7,16 @@ export function convertTemplateToMode(template: TemplateOptions): string {
   }
   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/g, 'Project name') ||
+      'Project name does not meet npm package naming requirements',
+  }
+}