create-zen 1.3.2 → 1.5.0

package/index.js

@@ -3,81 +3,83 @@
 const { execSync } = require('child_process');
 const fs = require('fs');
 const path = require('path');
-const readline = require('readline');
+const inquirer = require('inquirer');
 
-// Vue CLI inspired color palette
+// Vue CLI exact color palette from the photo
 const colors = {
   reset: '\x1b[0m',
   bright: '\x1b[1m',
   dim: '\x1b[2m',
   
-  // Vue CLI colors
-  green: '\x1b[38;2;76;175;80m',       // Material green
-  lightGreen: '\x1b[38;2;129;199;132m', // Light green
-  blue: '\x1b[38;2;33;150;243m',        // Material blue
+  // Exact colors from Vue CLI photo
+  green: '\x1b[38;2;76;175;80m',       // Vue.js green
+  lightBlue: '\x1b[38;2;129;199;132m',  // Light blue for subtitle
+  blue: '\x1b[38;2;33;150;243m',        // Blue diamond
   white: '\x1b[37m',                     // Pure white
   grey: '\x1b[38;2;158;158;158m',       // Medium grey
-  lightGrey: '\x1b[38;2;189;189;189m',  // Light grey
-  
-  // Additional colors
-  red: '\x1b[31m',
-  yellow: '\x1b[33m'
+  lightGrey: '\x1b[38;2;189;189;189m'   // Light grey for descriptions
 };
 
-// Vue CLI inspired text styling
+// Vue CLI exact text styling
 const vue = (text) => `${colors.bright}${colors.green}${text}${colors.reset}`;
-const progressive = (text) => `${colors.lightGreen}${text}${colors.reset}`;
-const framework = (text) => `${colors.blue}${text}${colors.reset}`;
+const subtitle = (text) => `${colors.lightBlue}${text}${colors.reset}`;
 const prompt = (text) => `${colors.white}${text}${colors.reset}`;
-const option = (text) => `${colors.grey}${text}${colors.reset}`;
-const selected = (text) => `${colors.bright}${colors.green}${text}${colors.reset}`;
-const muted = (text) => `${colors.lightGrey}${text}${colors.reset}`;
-const error = (text) => `${colors.red}${text}${colors.reset}`;
+const option = (text) => `${colors.white}${text}${colors.reset}`;
+const description = (text) => `${colors.lightGrey}${text}${colors.reset}`;
+const error = (text) => `\x1b[31m${text}${colors.reset}`;
 const success = (text) => `${colors.green}${text}${colors.reset}`;
 
-// Create readline interface
-const rl = readline.createInterface({
-  input: process.stdin,
-  output: process.stdout
-});
-
-// Display Vue CLI inspired header
+// Display Vue CLI exact header
 const displayHeader = () => {
   console.clear();
   console.log();
-  console.log('  ' + vue('ZEN') + ' - ' + progressive('The Professional') + ' ' + framework('Web Development Starter'));
+  console.log('  ' + vue('ZEN') + ' - ' + subtitle('The Professional Web Development Starter'));
   console.log();
 };
 
-// Get project name with Vue CLI styling
-const getProjectName = () => {
-  return new Promise((resolve) => {
-    console.log('  ' + '◇' + ' ' + prompt('Project name (target directory):'));
-    rl.question('    ', (answer) => {
-      const projectName = answer.trim() || 'zen-starter-app';
-      console.log('    ' + selected(projectName));
-      resolve(projectName);
-    });
-  });
+// Get project name with Vue CLI exact styling
+const getProjectName = async () => {
+  const { projectName } = await inquirer.prompt([
+    {
+      type: 'input',
+      name: 'projectName',
+      message: 'Project name (target directory):',
+      default: 'zen-starter-app',
+      prefix: '◇'
+    }
+  ]);
+  
+  console.log('    ' + option(projectName));
+  return projectName;
 };
 
-// Get project version choice with Vue CLI styling
-const getProjectVersion = () => {
-  return new Promise((resolve) => {
-    console.log();
-    console.log('  ' + '◇' + ' ' + prompt('Select ZEN starter version:'));
-    console.log('    ' + option('o') + ' ' + option('Standard Version') + ' - Full-featured with all components');
-    console.log('    ' + selected('●') + ' ' + selected('Lite Version') + ' - Lightweight for static sites');
-    console.log();
-    console.log('    ' + muted('↑/↓ to navigate, enter to confirm'));
-    
-    // For now, we'll use simple input, but this simulates the Vue CLI experience
-    rl.question('    ', (answer) => {
-      const choice = answer.trim() || '2'; // Default to Lite version as shown selected
-      const isLite = choice === '2' || choice.toLowerCase() === 'lite';
-      resolve(isLite);
-    });
-  });
+// Get project version choice with Vue CLI exact styling and arrow navigation
+const getProjectVersion = async () => {
+  console.log();
+  console.log('  ' + '◇' + ' ' + prompt('Select ZEN starter version:'));
+  console.log('    ' + description('(↑/↓ to navigate, space to select, enter to confirm)'));
+  
+  const { version } = await inquirer.prompt([
+    {
+      type: 'list',
+      name: 'version',
+      message: '',
+      choices: [
+        {
+          name: '□ Standard Version (Full-featured with all components)',
+          value: 'standard'
+        },
+        {
+          name: '□ Lite Version (Lightweight for static sites)',
+          value: 'lite'
+        }
+      ],
+      prefix: '  ',
+      pageSize: 2
+    }
+  ]);
+  
+  return version === 'lite';
 };
 
 // Get repository URL based on choice
@@ -96,16 +98,6 @@ const getVersionDescription = (isLite) => {
   return 'Standard Version - Full-featured with all components';
 };
 
-// Display project summary
-const displaySummary = (projectName, versionDesc, repoUrl) => {
-  console.log();
-  console.log('  ' + '◇' + ' ' + prompt('Project Summary:'));
-  console.log('    ' + option('Name:') + ' ' + selected(projectName));
-  console.log('    ' + option('Version:') + ' ' + selected(versionDesc));
-  console.log('    ' + option('Repository:') + ' ' + muted(repoUrl));
-  console.log();
-};
-
 // Main function
 const main = async () => {
   try {
@@ -116,16 +108,15 @@ const main = async () => {
     const REPO_URL = getRepositoryUrl(isLite);
     const VERSION_DESC = getVersionDescription(isLite);
     
-    displaySummary(PROJECT_NAME, VERSION_DESC, REPO_URL);
-    
     if (fs.existsSync(PROJECT_NAME)) {
+      console.log();
       console.log('  ' + error('⛔ Directory "' + PROJECT_NAME + '" already exists!'));
-      console.log('  💡 ' + muted('Please choose a different name or remove the existing directory.'));
+      console.log('  💡 ' + description('Please choose a different name or remove the existing directory.'));
       process.exit(1);
     }
     
-    console.log('  ' + '◇' + ' ' + prompt('Cloning repository...'));
     console.log();
+    console.log('  ' + '◇' + ' ' + prompt('Cloning repository...'));
     
     try {
       execSync(`git clone --depth=1 "${REPO_URL}" "${PROJECT_NAME}"`, { stdio: 'inherit' });
@@ -141,9 +132,9 @@ const main = async () => {
     console.log('  ' + success('✅ Project created successfully!'));
     console.log();
     console.log('  ' + '◇' + ' ' + prompt('Next steps:'));
-    console.log('    ' + selected(`cd ${PROJECT_NAME}`));
-    console.log('    ' + selected('npm install'));
-    console.log('    ' + selected('npm run dev'));
+    console.log('    ' + option(`cd ${PROJECT_NAME}`));
+    console.log('    ' + option('npm install'));
+    console.log('    ' + option('npm run dev'));
     console.log();
     console.log('  ' + vue('Happy coding with ZEN!') + ' ✨');
     console.log();
@@ -151,8 +142,6 @@ const main = async () => {
   } catch (error) {
     console.log('  ' + error('❌ An error occurred:'), error.message);
     process.exit(1);
-  } finally {
-    rl.close();
   }
 };
 

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "create-zen",
-  "version": "1.3.2",
+  "version": "1.5.0",
   "description": "✨ Create a new web development project with modern setup powered by Vite 🚀",
   "bin": {
     "create-zen": "./index.js"
   },
   "dependencies": {
-    "fs-extra": "^11.1.1"
+    "fs-extra": "^11.1.1",
+    "inquirer": "^9.2.12"
   }
 }