create-letswhim 2.0.3 → 2.0.4

package/index.js

@@ -2,103 +2,353 @@
 import { execSync } from 'child_process';
 import path from 'path';
 import fs from 'fs';
-import pc from 'picocolors'; // Menggunakan picocolors
-import prompts from 'prompts'; // Menggunakan prompts
-
-// --- FRAME 1: Orang Jalan di Tempat (NASA-Blue/Cyan) ---
-const walkingFrames = [
-  `      ${pc.cyan('  ( ) ')}  
-      ${pc.cyan(' /| |\\ ')} 
-      ${pc.cyan('  / \\  ')} 
-    ${pc.blue('~~~~~~~~~~')}`,
-  `      ${pc.cyan('  ( ) ')}  
-      ${pc.cyan('  | |/ ')} 
-      ${pc.cyan('  | |  ')} 
-    ${pc.blue('~~~~~~~~~~')}`
-];
-
-// --- FRAME 2: Orang Menerjang Ombak (Success) ---
-const surfingArt = `
-           ${pc.cyan('   ( ) /')}
-           ${pc.cyan('  /| |/')}
-           ${pc.cyan(' /_|_|/')}  ${pc.white("let's just start")}
-   ${pc.blue('~')}      ${pc.cyan('  /  \\')}
-  ${pc.blue('~~~')}    ${pc.cyan('  /    \\')}
- ${pc.blue('~~~~~')}  ${pc.cyan('  /      \\')}
-${pc.blue('~~~~~~~~~~~~~~~~~~~~~~~~~~~~')}
-`;
-
-async function startLoading(message) {
-    const total = 40;
-    let frameIndex = 0;
-    console.log('\n\n\n\n'); 
-
-    for (let i = 0; i <= total; i++) {
-        const percent = Math.round((i / total) * 100);
-        // Ganti pc.blue ke pc.cyan biar gak ungu!
-        const bar = pc.cyan('█').repeat(i) + pc.gray('░').repeat(total - i);
+import pc from 'picocolors';
+import prompts from 'prompts';
+
+// ==================== CONFIGURATION ====================
+const CONFIG = {
+  repoUrl: "https://github.com/ripkiiii/letswhim-starter.git",
+  version: "2.0.4",
+  colors: {
+    primary: pc.cyan,
+    secondary: pc.blue,
+    success: pc.green,
+    warning: pc.yellow,
+    error: pc.red,
+    muted: pc.gray,
+    highlight: pc.white
+  }
+};
+
+// ==================== ASCII ART LIBRARY ====================
+const ASCII = {
+  // Loading frames dengan lebih banyak variasi
+  walkingFrames: [
+    // Frame 1 - Normal walk
+    [
+      `     ${pc.cyan('  ╭┴┴╮  ')}`,
+      `     ${pc.cyan('  │• •│  ')}`,
+      `     ${pc.cyan('  │ ─ │  ')}`,
+      `     ${pc.cyan('  ╰┬┬┬╯  ')}`,
+      `   ${pc.blue('░░░░░░░░░░')}`
+    ].join('\n'),
+    
+    // Frame 2 - Right foot forward
+    [
+      `     ${pc.cyan('  ╭┴┴╮  ')}`,
+      `     ${pc.cyan('  │• •│  ')}`,
+      `     ${pc.cyan('  │┌─┘  ')}`,
+      `     ${pc.cyan('  ╰┬┴┐  ')}`,
+      `   ${pc.blue('░░░░░░░░░░')}`
+    ].join('\n'),
+    
+    // Frame 3 - Left foot forward
+    [
+      `     ${pc.cyan('  ╭┴┴╮  ')}`,
+      `     ${pc.cyan('  │• •│  ')}`,
+      `     ${pc.cyan('  │└─┐  ')}`,
+      `     ${pc.cyan('  ╰┴┬┘  ')}`,
+      `   ${pc.blue('░░░░░░░░░░')}`
+    ].join('\n'),
+    
+    // Frame 4 - Carrying board
+    [
+      `     ${pc.cyan('  ╭┴┴╮  ')}  ${pc.white('__')}`,
+      `     ${pc.cyan('  │• •│ ') + pc.white('_/  \\_')}`,
+      `     ${pc.cyan('  │ _ │') + pc.white('/      \\')}`,
+      `     ${pc.cyan('  ╰─┬─╯') + pc.white('\\______/')}`,
+      `   ${pc.blue('░░░░░░░░░░░░░░░')}`
+    ].join('\n')
+  ],
+
+  // Surfing animation frames
+  surfingFrames: [
+    // Frame 1 - Start surfing
+    [
+      `           ${pc.cyan('    ╭┴┴╮   ')}`,
+      `           ${pc.cyan('    │• •│   ')}`,
+      `           ${pc.cyan('    ╰─┬─╯   ')}`,
+      `       ${pc.cyan(' _/')} ${pc.white('|')} ${pc.cyan('\\_  ')}`,
+      `  ${pc.blue('~~')}  ${pc.white('( )')}    ${CONFIG.colors.highlight('Catching waves...')}`,
+      ` ${pc.blue('~~~~~')}${pc.white('/| |\\')}`,
+      `${pc.blue('~~~~~~~~~~~')}`,
+      `${pc.blue('~~~~~~~~~~~~~~~~~~~~~~')}`
+    ].join('\n'),
+    
+    // Frame 2 - Riding wave
+    [
+      `           ${pc.cyan('    ╭┴┴╮   ')}`,
+      `           ${pc.cyan('    │• •│  🏄')}`,
+      `           ${pc.cyan('    ╰─┬─╯   ')}`,
+      `      ${pc.cyan(' __/')}${pc.white('|')}${pc.cyan('\\__ ')}`,
+      `  ${pc.blue('~~~')} ${pc.white('( )')}    ${CONFIG.colors.highlight('Riding the wave!')}`,
+      `${pc.blue('~~~~~~')}${pc.white('/| |\\')}`,
+      `${pc.blue('~~~~~~~~~~~~')}`,
+      `${pc.blue('~~~~~~~~~~~~~~~~~~~~~~~')}`
+    ].join('\n'),
+    
+    // Frame 3 - Big wave
+    [
+      `            ${pc.cyan('   ╭┴┴╮    ')}`,
+      `           ${pc.cyan('   │• •│   🌊')}`,
+      `           ${pc.cyan('   ╰─┬─╯    ')}`,
+      `     ${pc.cyan(' ___/')}${pc.white('|')}${pc.cyan('\\___')}`,
+      `  ${pc.blue('~~~~')}${pc.white('( )')}   ${CONFIG.colors.highlight('Big one coming!')}`,
+      `${pc.blue('~~~~~~~')}${pc.white('/| |\\')}`,
+      `${pc.blue('~~~~~~~~~~~~~~')}`,
+      `${pc.blue('~~~~~~~~~~~~~~~~~~~~~~~~')}`
+    ].join('\n')
+  ],
+
+  // Success screen dengan efek 3D
+  successArt: [
+    `${pc.cyan('╔═══════════════════════════════════════╗')}`,
+    `${pc.cyan('║')}   ${CONFIG.colors.success('✨ PROJECT READY TO SURF! ✨')}    ${pc.cyan('║')}`,
+    `${pc.cyan('╠═══════════════════════════════════════╣')}`,
+    `                                              `,
+    `         ${pc.cyan('\\')}         ${pc.cyan('/')}         `,
+    `          ${pc.cyan('\\')}   ${CONFIG.colors.highlight('Ｏ')}   ${pc.cyan('/')}          `,
+    `           ${pc.cyan('\\')} ${CONFIG.colors.highlight('Ｋ')} ${pc.cyan('/')}           `,
+    `            ${pc.cyan('╲')}${CONFIG.colors.highlight('!')}${pc.cyan('╱')}            `,
+    `             ${pc.cyan('●')}             `,
+    `           ${pc.blue('/')} ${pc.white('|')} ${pc.blue('\\')}           `,
+    `          ${pc.blue('/')}  ${pc.white('|')}  ${pc.blue('\\')}          `,
+    `         ${pc.blue('/')}   ${pc.white('|')}   ${pc.blue('\\')}         `,
+    `${pc.blue('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━')}`,
+    `                                              `,
+    `${pc.cyan('╚═══════════════════════════════════════╝')}`
+  ].join('\n')
+};
+
+// ==================== ANIMATION ENGINE ====================
+class AnimationEngine {
+  constructor() {
+    this.spinnerIndex = 0;
+    this.progress = 0;
+    this.isAnimating = false;
+  }
+
+  clearLines(count = 1) {
+    process.stdout.write('\u001b[1A\u001b[2K'.repeat(count));
+  }
+
+  createProgressBar(percent, width = 40) {
+    const filled = Math.floor((percent / 100) * width);
+    const empty = width - filled;
+    
+    // Gradient warna berdasarkan progress
+    let bar = '';
+    for (let i = 0; i < filled; i++) {
+      const hue = Math.floor(i / width * 180) + 60; // Cyan to blue
+      bar += `\x1b[38;5;${hue}m█\x1b[0m`;
+    }
+    
+    for (let i = 0; i < empty; i++) {
+      bar += CONFIG.colors.muted('░');
+    }
+    
+    return bar;
+  }
+
+  async typewriter(text, speed = 30) {
+    process.stdout.write(CONFIG.colors.primary('▸ ') + CONFIG.colors.muted(''));
+    for (let char of text) {
+      process.stdout.write(char);
+      await new Promise(resolve => setTimeout(resolve, speed));
+    }
+    console.log();
+  }
+
+  async loadingSequence(steps) {
+    console.log('\n');
+    
+    for (let i = 0; i < steps.length; i++) {
+      const step = steps[i];
+      const isLast = i === steps.length - 1;
+      
+      // Progress bar animation
+      for (let p = this.progress; p <= ((i + 1) * 100 / steps.length); p++) {
+        this.progress = p;
         
-        process.stdout.write('\u001b[5A'); 
-        console.log(walkingFrames[frameIndex]);
-        console.log(`${pc.cyan('▹')} ${pc.white(message)}`);
-        process.stdout.write(`  ${bar} ${pc.cyan(percent + '%')}\r`);
+        // Clear previous frame
+        this.clearLines(8);
         
-        if (i % 3 === 0) frameIndex = frameIndex === 0 ? 1 : 0;
-        await new Promise(resolve => setTimeout(resolve, 50));
+        // Show current step
+        const stepText = CONFIG.colors.highlight(step.title);
+        console.log(`${CONFIG.colors.primary('🛠️ ')} ${stepText}`);
+        
+        // Show animation frame
+        const frameIndex = Math.floor(p / 10) % ASCII.walkingFrames.length;
+        console.log(ASCII.walkingFrames[frameIndex]);
+        
+        // Show progress bar with percentage
+        const bar = this.createProgressBar(p, 50);
+        console.log(`\n${bar} ${CONFIG.colors.primary(p.toFixed(0) + '%')}`);
+        
+        // Show status message with spinner
+        const spinner = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'][Math.floor(Date.now() / 100) % 10];
+        console.log(`${CONFIG.colors.primary(spinner)} ${CONFIG.colors.muted(step.message)}`);
+        
+        await new Promise(resolve => setTimeout(resolve, step.delay || 50));
+      }
+      
+      // Mark step as complete
+      this.clearLines(8);
+      console.log(`${CONFIG.colors.success('✓')} ${CONFIG.colors.highlight(step.title)} ${CONFIG.colors.muted('(completed)')}`);
+      
+      if (!isLast) {
+        await new Promise(resolve => setTimeout(resolve, 300));
+      }
     }
-    console.log('\n');
+    
+    console.log();
+  }
+
+  async surfingCelebration() {
+    console.log('\n' + ' '.repeat(20) + CONFIG.colors.success('🏄 SURF\'S UP! 🏄') + '\n');
+    
+    for (let i = 0; i < 15; i++) {
+      this.clearLines(12);
+      const frame = ASCII.surfingFrames[i % ASCII.surfingFrames.length];
+      console.log(frame);
+      
+      // Tambahkan efek partikel
+      const particles = ['✨', '🌟', '💫', '⭐', '🌊'];
+      const particle = particles[Math.floor(Math.random() * particles.length)];
+      console.log(' '.repeat(30) + CONFIG.colors.yellow(particle));
+      
+      await new Promise(resolve => setTimeout(resolve, 200));
+    }
+    
+    // Final success screen
+    this.clearLines(12);
+    console.log(ASCII.successArt);
+  }
 }
 
+// ==================== MAIN APPLICATION ====================
 async function init() {
-  process.stdout.write('\x1Bc'); // Clear terminal biar rapi
-
-  console.log(`\n${pc.bold(pc.cyan('🌊 LETSWHIM'))} ${pc.gray('v2.0.3')}`);
-  console.log(`${pc.white('The Ultralight Web Engine for Modern Logic')}\n`);
+  const animator = new AnimationEngine();
+  
+  // Clear screen dengan style
+  console.log('\x1B[2J\x1B[0f');
+  
+  // Header dengan gradient
+  console.log(CONFIG.colors.primary(`
+    ╔═══════════════════════════════════════════════╗
+    ║                                               ║
+    ║        ${CONFIG.colors.highlight('🌊 LETSWHIM CREATOR v' + CONFIG.version)}        ║
+    ║   ${CONFIG.colors.muted('The Ultralight Web Engine')}    ║
+    ║                                               ║
+    ╚═══════════════════════════════════════════════╝
+  `));
+  
+  console.log();
 
+  // Get project name
   const response = await prompts({
     type: 'text',
     name: 'projectName',
-    message: pc.cyan('?') + ' Project name:',
-    initial: process.argv[2] || 'my-whim-project'
+    message: CONFIG.colors.primary('?') + ' ' + CONFIG.colors.highlight('Project name:'),
+    initial: process.argv[2] || 'my-whim-project',
+    validate: value => value.trim() === '' ? 'Project name cannot be empty' : true
   });
 
-  const projectName = response.projectName || 'my-whim-project';
+  const projectName = response.projectName?.trim() || 'my-whim-project';
   const targetDir = path.join(process.cwd(), projectName);
-  const repoUrl = "https://github.com/ripkiiii/letswhim-starter.git";
 
+  // Check if directory exists
   if (fs.existsSync(targetDir)) {
-    console.log(`\n${pc.red('✖')} ${pc.bold('Error:')} Directory ${pc.cyan(projectName)} already exists.`);
+    console.log(`\n${CONFIG.colors.error('✖')} Directory ${CONFIG.colors.primary(projectName)} already exists.`);
+    console.log(CONFIG.colors.muted('Try a different name or remove the existing directory.'));
     process.exit(1);
   }
 
-  await startLoading('Preparing your surfboard...');
+  // Loading animation sequence
+  const loadingSteps = [
+    { title: 'Preparing workspace', message: 'Setting up your coding beach...', delay: 80 },
+    { title: 'Catching waves', message: 'Cloning the starter template...', delay: 120 },
+    { title: 'Waxing the board', message: 'Cleaning up repository...', delay: 60 },
+    { title: 'Checking conditions', message: 'Verifying project structure...', delay: 40 },
+    { title: 'Final preparations', message: 'Almost ready to surf...', delay: 30 }
+  ];
 
+  await animator.loadingSequence(loadingSteps);
+
+  // Actual processing
   try {
-    process.stdout.write(`${pc.cyan('▹')} ${pc.gray('Catching the waves (Cloning template)...')}`);
-    execSync(`git clone ${repoUrl} "${projectName}"`, { stdio: 'ignore' });
+    // Clone repository
+    process.stdout.write(`${CONFIG.colors.primary('⏳')} ${CONFIG.colors.muted('Cloning repository...')}`);
+    execSync(`git clone --depth 1 ${CONFIG.repoUrl} "${projectName}"`, { stdio: 'ignore' });
+    console.log(`\r${CONFIG.colors.success('✓')} ${CONFIG.colors.highlight('Repository cloned')}`);
 
-    // Hapus .git biar user punya repo bersih
+    // Remove .git folder
     const gitFolder = path.join(targetDir, '.git');
     if (fs.existsSync(gitFolder)) {
-        const cmd = process.platform === 'win32' ? `rmdir /s /q "${gitFolder}"` : `rm -rf "${gitFolder}"`;
-        execSync(cmd);
+      fs.rmSync(gitFolder, { recursive: true, force: true });
+      console.log(`${CONFIG.colors.success('✓')} ${CONFIG.colors.highlight('Git history cleared')}`);
+    }
+
+    // Remove unnecessary files
+    const readmePath = path.join(targetDir, 'README.md');
+    if (fs.existsSync(readmePath)) {
+      const newReadme = `# ${projectName}\n\nA LetsWhim project created with create-letswhim@${CONFIG.version}\n\nHappy surfing! 🏄‍♂️`;
+      fs.writeFileSync(readmePath, newReadme);
     }
 
-    console.log(`\n\n${pc.bold(pc.cyan('🚀 MISSION ACCOMPLISHED'))}`);
-    console.log(surfingArt);
+    // Celebration animation
+    await animator.surfingCelebration();
 
-    console.log(`${pc.gray('Project created at')} ${pc.cyan(`./${projectName}`)}`);
+    // Success message
+    console.log(`\n${CONFIG.colors.success('🎉 SUCCESS!')} ${CONFIG.colors.highlight('Project created successfully!')}\n`);
     
-    console.log(`\n${pc.bold(pc.white('Next steps to surf:'))}`);
-    console.log(`  ${pc.cyan('1.')} cd ${pc.white(projectName)}`);
-    console.log(`  ${pc.cyan('2.')} npm install`);
-    console.log(`  ${pc.cyan('3.')} npm run dev`);
-
-    console.log(`\n${pc.gray("Happy surfing, Developer!")} 🏄‍♂️\n`);
+    console.log(CONFIG.colors.primary('📁 Project location:'));
+    console.log(`  ${CONFIG.colors.highlight(`./${projectName}`)}\n`);
+    
+    console.log(CONFIG.colors.primary('🚀 Next steps to start surfing:'));
+    console.log(`${CONFIG.colors.success('  cd')} ${CONFIG.colors.highlight(projectName)}`);
+    console.log(`${CONFIG.colors.success('  npm install')} ${CONFIG.colors.muted('# or pnpm install / yarn')}`);
+    console.log(`${CONFIG.colors.success('  npm run dev')} ${CONFIG.colors.muted('# Start development server')}\n`);
+    
+    console.log(CONFIG.colors.primary('📚 Documentation:'));
+    console.log(`  ${CONFIG.colors.muted('https://letswhim.pages.dev')}\n`);
+    
+    console.log(CONFIG.colors.muted('💡 Tip: Run ') + CONFIG.colors.highlight('npm run help') + CONFIG.colors.muted(' to see all available commands'));
+    
+    // Fun ASCII footer
+    console.log(CONFIG.colors.blue(`
+       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+          H A P P Y   S U R F I N G !  🏄‍♂️
+       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+    `));
 
   } catch (error) {
-    console.log(`\n${pc.red('✖')} ${pc.bold('Wipeout! (Error):')} ${pc.gray(error.message)}`);
+    console.log(`\n${CONFIG.colors.error('💥 WIPEOUT!')} Something went wrong:`);
+    console.log(CONFIG.colors.muted(error.message));
+    
+    // Clean up on error
+    if (fs.existsSync(targetDir)) {
+      try {
+        fs.rmSync(targetDir, { recursive: true });
+        console.log(CONFIG.colors.muted('\nCleaned up partial installation.'));
+      } catch (e) {
+        console.log(CONFIG.colors.muted('\nCould not clean up directory.'));
+      }
+    }
+    
+    process.exit(1);
   }
 }
 
-init();
+// Handle Ctrl+C gracefully
+process.on('SIGINT', () => {
+  console.log(`\n\n${CONFIG.colors.muted('👋 Catch you on the next wave!')}\n`);
+  process.exit(0);
+});
+
+// Run the application
+init().catch(error => {
+  console.error(`\n${CONFIG.colors.error('💥 UNEXPECTED WIPEOUT!')}`);
+  console.error(CONFIG.colors.muted(error.stack || error.message));
+  process.exit(1);
+});

package/package.json

@@ -1,33 +1,42 @@
 {
   "name": "create-letswhim",
-  "version": "2.0.3",
-  "description": "The official ultralight CLI to initialize your LetsWhim project in seconds.",
+  "version": "2.0.4",
+  "description": "The official ultralight CLI to initialize your LetsWhim project with surfing-style animations",
   "type": "module",
   "main": "index.js",
   "bin": {
-    "create-letswhim": "index.js"
+    "create-letswhim": "./index.js",
+    "create-letswhim-surf": "./index.js"
   },
   "keywords": [
     "letswhim",
     "ssg",
-    "l-lang",
-    "terminal-ui",
-    "minimalist-framework",
-    "human-readable",
-    "ultralight"
+    "cli",
+    "terminal",
+    "animation",
+    "surfing",
+    "minimalist",
+    "framework",
+    "create-app"
   ],
   "author": "Rifky <rifky@keemail.me>",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/ripkiiii/letswhim-official.git"
+    "url": "git+https://github.com/ripkiiii/create-letswhim.git"
   },
   "bugs": {
-    "url": "https://github.com/ripkiiii/letswhim-official/issues"
+    "url": "https://github.com/ripkiiii/create-letswhim/"
   },
   "homepage": "https://letswhim.pages.dev",
+  "engines": {
+    "node": ">=14.0.0"
+  },
   "dependencies": {
     "picocolors": "^1.0.0",
     "prompts": "^2.4.2"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0"
   }
 }