create-zen 1.5.2 → 1.6.0

package/index.js

@@ -1,83 +1,98 @@
 #!/usr/bin/env node
 
-const { execSync } = require('child_process');
-const fs = require('fs');
-const path = require('path');
-const inquirer = require('inquirer');
+import { execSync } from 'child_process';
+import fs from 'fs';
+import path from 'path';
+import prompts from 'prompts';
+import chalk from 'chalk';
+import ora from 'ora';
+import boxen from 'boxen';
 
-// Vue CLI exact color palette from the photo
+// Color palette inspired by the ZEN website
 const colors = {
-  reset: '\x1b[0m',
-  bright: '\x1b[1m',
-  dim: '\x1b[2m',
-  
-  // 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 for descriptions
+  green: '#00FF88',      // Bright neon green
+  lightGreen: '#00CC6A', // Darker green
+  purple: '#8B5CF6',     // Purple accent
+  white: '#FFFFFF',      // Pure white
+  lightGrey: '#9CA3AF',  // Light grey
+  darkGrey: '#374151',   // Dark grey
+  bgDark: '#1F2937'      // Background dark
 };
 
-// Vue CLI exact text styling
-const vue = (text) => `${colors.bright}${colors.green}${text}${colors.reset}`;
-const subtitle = (text) => `${colors.lightBlue}${text}${colors.reset}`;
-const prompt = (text) => `${colors.white}${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}`;
+// Enhanced text styling with chalk
+const zen = (text) => chalk.hex(colors.green).bold(text);
+const accent = (text) => chalk.hex(colors.purple).bold(text);
+const title = (text) => chalk.hex(colors.white).bold(text);
+const subtitle = (text) => chalk.hex(colors.lightGrey)(text);
+const highlight = (text) => chalk.hex(colors.lightGreen)(text);
+const error = (text) => chalk.red.bold(text);
+const success = (text) => chalk.green.bold(text);
+const info = (text) => chalk.blue(text);
 
-// Display Vue CLI exact header
+// Display stunning header with boxen
 const displayHeader = () => {
   console.clear();
   console.log();
-  console.log('  ' + vue('ZEN') + ' - ' + subtitle('The Professional Web Development Starter'));
+  
+  const headerBox = boxen(
+    `${zen('ZEN')} - ${title('The Professional Web Development Starter')}\n${subtitle('v1.6.0 • Professional Starter Kit • MIT License')}`,
+    {
+      padding: 1,
+      margin: 1,
+      borderStyle: 'round',
+      borderColor: colors.green,
+      backgroundColor: colors.bgDark,
+      textAlignment: 'center'
+    }
+  );
+  
+  console.log(headerBox);
   console.log();
 };
 
-// Get project name with Vue CLI exact styling
+// Get project name with enhanced styling
 const getProjectName = async () => {
-  const { projectName } = await inquirer.default.prompt([
-    {
-      type: 'input',
-      name: 'projectName',
-      message: 'Project name (target directory):',
-      default: 'zen-starter-app',
-      prefix: '◇'
+  const { projectName } = await prompts({
+    type: 'text',
+    name: 'projectName',
+    message: 'Project name:',
+    initial: 'zen-starter-app',
+    validate: (value) => {
+      if (!value.trim()) return 'Project name is required';
+      if (fs.existsSync(value.trim())) return 'Directory already exists';
+      return true;
     }
-  ]);
+  });
   
-  console.log('    ' + option(projectName));
+  console.log(`  ${chalk.hex(colors.green)('◇')} ${title('Project name:')} ${highlight(projectName)}`);
   return projectName;
 };
 
-// Get project version choice with Vue CLI exact styling and arrow navigation
+// Get project version with beautiful selection
 const getProjectVersion = async () => {
   console.log();
-  console.log('  ' + '◇' + ' ' + prompt('Select ZEN starter version:'));
-  console.log('    ' + description('(↑/↓ to navigate, space to select, enter to confirm)'));
+  console.log(`  ${chalk.hex(colors.green)('◇')} ${title('Select ZEN starter version:')}`);
+  console.log();
   
-  const { version } = await inquirer.default.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
-    }
-  ]);
+  const { version } = await prompts({
+    type: 'select',
+    name: 'version',
+    message: '',
+    choices: [
+      {
+        title: `${chalk.hex(colors.white)('Standard Version')} ${chalk.hex(colors.lightGrey)('(Full-featured with all components)')}`,
+        value: 'standard'
+      },
+      {
+        title: `${chalk.hex(colors.purple)('Lite Version')} ${chalk.hex(colors.lightGrey)('(Essential features only)')}`,
+        value: 'lite'
+      }
+    ],
+    initial: 0
+  });
+  
+  const selectedText = version === 'lite' ? 'Lite Version' : 'Standard Version';
+  console.log(`  ${chalk.hex(colors.green)('◇')} ${title('Selected:')} ${highlight(selectedText)}`);
   
   return version === 'lite';
 };
@@ -93,12 +108,35 @@ const getRepositoryUrl = (isLite) => {
 // Get version description
 const getVersionDescription = (isLite) => {
   if (isLite) {
-    return 'Lite Version - Lightweight for static sites';
+    return 'Lite Version - Essential features only';
   }
   return 'Standard Version - Full-featured with all components';
 };
 
-// Main function
+// Display project summary in a beautiful box
+const displaySummary = (projectName, versionDesc, repoUrl) => {
+  console.log();
+  
+  const summaryBox = boxen(
+    `${chalk.hex(colors.green)('📋')} ${title('Project Summary')}\n\n` +
+    `${chalk.hex(colors.purple)('🏷️')}  ${title('Project Name:')} ${highlight(projectName)}\n` +
+    `${chalk.hex(colors.purple)('🎯')}  ${title('Version:')} ${highlight(versionDesc)}\n` +
+    `${chalk.hex(colors.purple)('🔗')}  ${title('Repository:')} ${subtitle(repoUrl)}`,
+    {
+      padding: 1,
+      margin: 1,
+      borderStyle: 'round',
+      borderColor: colors.purple,
+      backgroundColor: colors.bgDark,
+      textAlignment: 'left'
+    }
+  );
+  
+  console.log(summaryBox);
+  console.log();
+};
+
+// Main function with enhanced UX
 const main = async () => {
   try {
     displayHeader();
@@ -108,39 +146,68 @@ const main = async () => {
     const REPO_URL = getRepositoryUrl(isLite);
     const VERSION_DESC = getVersionDescription(isLite);
     
-    if (fs.existsSync(PROJECT_NAME)) {
-      console.log();
-      console.log('  ' + error('⛔ Directory "' + PROJECT_NAME + '" already exists!'));
-      console.log('  💡 ' + description('Please choose a different name or remove the existing directory.'));
-      process.exit(1);
-    }
+    displaySummary(PROJECT_NAME, VERSION_DESC, REPO_URL);
     
-    console.log();
-    console.log('  ' + '◇' + ' ' + prompt('Cloning repository...'));
+    // Cloning with spinner
+    const spinner = ora({
+      text: `${chalk.hex(colors.green)('◇')} ${title('Cloning repository...')}`,
+      color: 'green'
+    }).start();
     
     try {
-      execSync(`git clone --depth=1 "${REPO_URL}" "${PROJECT_NAME}"`, { stdio: 'inherit' });
+      execSync(`git clone --depth=1 "${REPO_URL}" "${PROJECT_NAME}"`, { stdio: 'pipe' });
+      spinner.succeed(`${chalk.hex(colors.green)('◇')} ${success('Repository cloned successfully!')}`);
     } catch (err) {
-      console.log('  ' + error('❌ Clone failed. Please check your internet connection or permissions.'));
+      spinner.fail(`${chalk.hex(colors.green)('◇')} ${error('Clone failed!')}`);
+      console.log(`  ${subtitle('Please check your internet connection or permissions.')}`);
       process.exit(1);
     }
     
-    // Remove .git so the created project is not a git repo
+    // Remove .git
     fs.rmSync(path.join(PROJECT_NAME, '.git'), { recursive: true, force: true });
     
+    // Success message with beautiful box
     console.log();
-    console.log('  ' + success('✅ Project created successfully!'));
+    const successBox = boxen(
+      `${chalk.hex(colors.green)('✅')} ${success('SUCCESS! Your project is ready to go!')} ${chalk.hex(colors.purple)('🎉')}`,
+      {
+        padding: 1,
+        margin: 1,
+        borderStyle: 'round',
+        borderColor: colors.green,
+        backgroundColor: colors.bgDark,
+        textAlignment: 'center'
+      }
+    );
+    
+    console.log(successBox);
     console.log();
-    console.log('  ' + '◇' + ' ' + prompt('Next steps:'));
-    console.log('    ' + option(`cd ${PROJECT_NAME}`));
-    console.log('    ' + option('npm install'));
-    console.log('    ' + option('npm run dev'));
+    
+    // Next steps
+    console.log(`  ${chalk.hex(colors.green)('◇')} ${title('Next steps:')}`);
+    console.log(`    ${chalk.hex(colors.purple)('📁')} ${highlight(`cd ${PROJECT_NAME}`)}`);
+    console.log(`    ${chalk.hex(colors.purple)('📦')} ${highlight('npm install')}`);
+    console.log(`    ${chalk.hex(colors.purple)('🧑‍💻')} ${highlight('npm run dev')}`);
     console.log();
-    console.log('  ' + vue('Happy coding with ZEN!') + ' ✨');
+    
+    // Final message
+    const finalBox = boxen(
+      `${zen('Happy coding with ZEN!')} ${chalk.hex(colors.purple)('✨')}`,
+      {
+        padding: 1,
+        margin: 1,
+        borderStyle: 'round',
+        borderColor: colors.purple,
+        backgroundColor: colors.bgDark,
+        textAlignment: 'center'
+      }
+    );
+    
+    console.log(finalBox);
     console.log();
     
   } catch (err) {
-    console.log('  ' + error('❌ An error occurred:'), err.message);
+    console.log(`  ${error('❌ An error occurred:')} ${err.message}`);
     process.exit(1);
   }
 };

package/package.json

@@ -1,12 +1,16 @@
 {
   "name": "create-zen",
-  "version": "1.5.2",
+  "version": "1.6.0",
+  "type": "module",
   "description": "✨ Create a new web development project with modern setup powered by Vite 🚀",
   "bin": {
     "create-zen": "./index.js"
   },
   "dependencies": {
     "fs-extra": "^11.1.1",
-    "inquirer": "^9.2.12"
+    "prompts": "^2.4.2",
+    "chalk": "^5.3.0",
+    "ora": "^7.0.1",
+    "boxen": "^7.1.1"
   }
 }