@wangs-ui/create-react-app 1.0.26-alpha.4 → 1.0.28

package/dist/bin.js

@@ -3,7 +3,7 @@ import path from "node:path";
 import process$1 from "node:process";
 import fs from "node:fs";
 import { fileURLToPath } from "node:url";
-import readline from "node:readline/promises";
+import { cancel, intro, isCancel, multiselect, outro, select, spinner, text } from "@clack/prompts";
 //#region src/utils/fs.ts
 /**
 * Recursively copy a template directory into the target directory,
@@ -132,7 +132,8 @@ function generateProject(options) {
 	const { projectName, targetDir, preset, agents } = options;
 	let templateDir = path.resolve(__dirname, "../template");
 	if (!fs.existsSync(templateDir)) templateDir = path.resolve(__dirname, "template");
-	console.log(`\n\x1b[36m🚀 Scaffolding Wangs UI React Application in \x1b[1m${targetDir}\x1b[0m...`);
+	const s = spinner();
+	s.start(`Scaffolding Wangs UI React Application in ${path.basename(targetDir)}...`);
 	copyProjectTemplate({
 		srcDir: templateDir,
 		destDir: targetDir,
@@ -150,90 +151,108 @@ function generateProject(options) {
 		templateDir,
 		agents
 	});
+	s.stop("Project structure initialized.");
 	const pm = detectPackageManager();
 	const installCmd = getInstallCommand(pm);
 	const devCmd = getRunCommand(pm, "dev");
 	const lintCmd = getRunCommand(pm, "lint");
-	console.log("\n\x1B[32m✨ Project created successfully!\x1B[0m\n");
 	if (configuredAgents.length > 0) {
-		console.log("\x1B[1m🤖 AI Agent MCP & Skills Configured:\x1B[0m");
-		for (const agent of configuredAgents) console.log(`   \x1b[32m✔\x1b[0m ${agent}`);
-		console.log();
+		console.log("\n\x1B[1m🤖 AI Agent MCP & Skills Configured:\x1B[0m");
+		for (const agent of configuredAgents) console.log(`  \x1b[32m✔\x1b[0m ${agent}`);
 	}
-	console.log("\x1B[1mNext steps:\x1B[0m");
-	if (!(targetDir === process.cwd())) {
-		const relPath = path.relative(process.cwd(), targetDir);
-		console.log(`  \x1b[36mcd\x1b[0m ${relPath}`);
-	}
-	console.log(`  \x1b[36m${installCmd}\x1b[0m`);
-	console.log(`  \x1b[36m${devCmd}\x1b[0m`);
-	console.log(`  \x1b[36m${lintCmd}\x1b[0m  \x1b[2m(runs Oxlint)\x1b[0m\n`);
+	outro(`\x1b[32m✨ Project created successfully!\x1b[0m\n\n\x1b[1mNext steps:\x1b[0m\n  ${targetDir === process.cwd() ? "" : `cd ${path.relative(process.cwd(), targetDir)}\n  `}${installCmd}\n  ${devCmd}\n  ${lintCmd} \x1b[2m(runs Oxlint)\x1b[0m`);
 }
 //#endregion
 //#region src/prompts.ts
 async function promptUser(initialOptions) {
-	const rl = readline.createInterface({
-		input: process$1.stdin,
-		output: process$1.stdout
-	});
-	try {
-		let { projectName, preset, agents } = initialOptions;
-		if (!projectName) projectName = (await rl.question("\x1B[36m?\x1B[0m \x1B[1mProject name:\x1B[0m (\x1B[2mmy-wangs-app\x1B[0m) ")).trim() || "my-wangs-app";
-		if (!preset) if (initialOptions.yes) preset = "fixedasset";
-		else {
-			console.log("\n\x1B[1mSelect a Wangs UI Design Preset:\x1B[0m");
-			console.log("  \x1B[32m1)\x1B[0m fixedasset \x1B[2m(Recommended - Standard Theme)\x1B[0m");
-			console.log("  \x1B[32m2)\x1B[0m globalsettings \x1B[2m(Global Settings Theme)\x1B[0m");
-			preset = (await rl.question("\x1B[36m?\x1B[0m \x1B[1mEnter choice [1-2]:\x1B[0m (1) ")).trim() === "2" ? "globalsettings" : "fixedasset";
-		}
-		if (!agents) if (initialOptions.yes) agents = [
-			"kilo",
+	let { projectName, preset, agents } = initialOptions;
+	if (initialOptions.yes) return {
+		projectName: projectName || "my-wangs-app",
+		preset: "fixedasset",
+		agents: agents || [
+			"antigravity",
 			"opencode",
 			"claude",
-			"antigravity"
-		];
-		else {
-			console.log("\n\x1B[1mAI Agent & MCP Tooling Setup:\x1B[0m");
-			console.log("  \x1B[32m1)\x1B[0m All Supported Agents \x1B[2m(Kilo, OpenCode, Claude Code, Antigravity)\x1B[0m");
-			console.log("  \x1B[32m2)\x1B[0m Kilo only");
-			console.log("  \x1B[32m3)\x1B[0m OpenCode only");
-			console.log("  \x1B[32m4)\x1B[0m Claude Code only");
-			console.log("  \x1B[32m5)\x1B[0m Antigravity IDE & CLI only");
-			console.log("  \x1B[32m6)\x1B[0m Skip Agent Setup");
-			switch ((await rl.question("\x1B[36m?\x1B[0m \x1B[1mEnter choice [1-6]:\x1B[0m (1) ")).trim()) {
-				case "2":
-					agents = ["kilo"];
-					break;
-				case "3":
-					agents = ["opencode"];
-					break;
-				case "4":
-					agents = ["claude"];
-					break;
-				case "5":
-					agents = ["antigravity"];
-					break;
-				case "6":
-					agents = [];
-					break;
-				default:
-					agents = [
-						"kilo",
-						"opencode",
-						"claude",
-						"antigravity"
-					];
-					break;
+			"kilo"
+		]
+	};
+	intro("\x1B[36m🚀 Wangs UI React App Scaffolder\x1B[0m");
+	if (!projectName) {
+		const nameResponse = await text({
+			message: "What is your project name?",
+			placeholder: "my-wangs-app",
+			defaultValue: "my-wangs-app",
+			validate: (value) => {
+				if (!value || value.trim().length === 0) return "Project name cannot be empty";
+				if (/[<>:"/\\|?*]/.test(value)) return "Project name contains invalid characters";
 			}
+		});
+		if (isCancel(nameResponse)) {
+			cancel("Project scaffolding cancelled.");
+			process$1.exit(0);
 		}
-		return {
-			projectName,
-			preset,
-			agents
-		};
-	} finally {
-		rl.close();
+		projectName = nameResponse.trim();
 	}
+	if (!preset) {
+		const presetResponse = await select({
+			message: "Select a Wangs UI Design Preset:",
+			options: [{
+				value: "fixedasset",
+				label: "Fixed Asset",
+				hint: "Recommended & Official Theme Preset"
+			}],
+			initialValue: "fixedasset"
+		});
+		if (isCancel(presetResponse)) {
+			cancel("Project scaffolding cancelled.");
+			process$1.exit(0);
+		}
+		preset = presetResponse;
+	}
+	if (!agents) {
+		const agentsResponse = await multiselect({
+			message: "Select AI Agent configurations to include: (Space to select/deselect, Enter to submit)",
+			options: [
+				{
+					value: "antigravity",
+					label: "Google Antigravity IDE",
+					hint: ".agents/skills + MCP rules"
+				},
+				{
+					value: "opencode",
+					label: "OpenCode",
+					hint: "opencode.json MCP tooling"
+				},
+				{
+					value: "claude",
+					label: "Claude Code",
+					hint: "CLAUDE.md developer instructions"
+				},
+				{
+					value: "kilo",
+					label: "Kilo Code",
+					hint: ".kilo MCP config"
+				}
+			],
+			initialValues: [
+				"antigravity",
+				"opencode",
+				"claude",
+				"kilo"
+			],
+			required: false
+		});
+		if (isCancel(agentsResponse)) {
+			cancel("Project scaffolding cancelled.");
+			process$1.exit(0);
+		}
+		agents = agentsResponse;
+	}
+	return {
+		projectName,
+		preset: "fixedasset",
+		agents
+	};
 }
 //#endregion
 //#region bin.ts
@@ -245,10 +264,10 @@ async function main() {
 		if (arg === "-y" || arg === "--yes") options.yes = true;
 		else if (arg.startsWith("--preset=")) {
 			const val = arg.split("=")[1];
-			if (val === "fixedasset" || val === "globalsettings") options.preset = val;
+			if (val === "fixedasset") options.preset = val;
 		} else if (arg === "--preset" && args[i + 1]) {
 			const val = args[++i];
-			if (val === "fixedasset" || val === "globalsettings") options.preset = val;
+			if (val === "fixedasset") options.preset = val;
 		} else if (arg.startsWith("--agent=") || arg.startsWith("--agents=")) {
 			const val = arg.split("=")[1];
 			if (val === "all") options.agents = [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wangs-ui/create-react-app",
-  "version": "1.0.26-alpha.4",
+  "version": "1.0.28",
   "description": "Scaffold a modern React app with Wangs UI, Vite 8, Oxlint, Oxfmt, and AI Agent MCP integration",
   "keywords": [
     "antigravity",
@@ -24,9 +24,9 @@
     "directory": "packages/create-react-app"
   },
   "bin": {
-    "create-react-app": "./dist/bin.js",
-    "create-wangs-app": "./dist/bin.js",
-    "create-wangs-ui-react-app": "./dist/bin.js"
+    "create-react-app": "dist/bin.js",
+    "create-wangs-app": "dist/bin.js",
+    "create-wangs-ui-react-app": "dist/bin.js"
   },
   "files": [
     "dist",
@@ -48,8 +48,9 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "dependencies": {},
-  "devDependencies": {},
+  "devDependencies": {
+    "@clack/prompts": "^1.7.0"
+  },
   "scripts": {
     "build": "vite build",
     "check:publint": "publint",

package/template/package.json

@@ -13,10 +13,10 @@
     "format:check": "oxfmt --check"
   },
   "dependencies": {
-    "@wangs-ui/react-core": "^1.0.26-alpha.4",
-    "@wangs-ui/react-i18n": "^1.0.26-alpha.4",
-    "@wangs-ui/react-icons": "^1.0.26-alpha.4",
-    "@wangs-ui/react-presets": "^1.0.26-alpha.4",
+    "@wangs-ui/react-core": "^1.0.28",
+    "@wangs-ui/react-i18n": "^1.0.28",
+    "@wangs-ui/react-icons": "^1.0.28",
+    "@wangs-ui/react-presets": "^1.0.28",
     "clsx": "^2.1.1",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",