@dasidev/dasi-ui 1.0.9 → 1.0.12

package/bin/dasi-cli old2.cjs

@@ -0,0 +1,225 @@
+#!/usr/bin/env node
+const { program } = require('commander');
+const inquirer = require('inquirer');
+const fs = require('fs-extra');
+const path = require('path');
+const chalk = require('chalk');
+const ora = require('ora');
+
+program
+    .name('dasi-ui')
+    .description('DASI UI - Complete Admin Template Setup')
+    .version('1.0.10');
+
+program
+    .command('create [project-name]')
+    .description('Initialize DASI UI admin template')
+    .action(async (projectName) => {
+        console.log(chalk.blue.bold('🚀 Welcome to DASI UI Admin Template Setup'));
+        console.log(chalk.gray('This will set up a complete admin dashboard in your current directory\n'));
+
+        console.log(chalk.blue.bold(`
+            ╔══════════════════════════════════════════════════════════════╗
+            ║                                                              ║
+            ║  🚀 DASI UI - Complete Admin Template Generator              ║
+            ║                                                              ║
+            ║  Creating: ${chalk.cyan(projectName.padEnd(35))}             ║
+            ║                                                              ║
+            ╚══════════════════════════════════════════════════════════════╝
+        `));
+
+        const questions = [
+            {
+                type: 'input',
+                name: 'projectName',
+                message: '📦 Project name:',
+                default: projectName,
+                validate: (input) => input.length > 0 || 'Project name is required'
+            },
+            {
+                type: 'input',
+                name: 'appTitle',
+                message: '📱 App title:',
+                default: 'DASI Admin Dashboard'
+            },
+            {
+                type: 'input',
+                name: 'appDescription',
+                message: '📝 App description:',
+                default: 'Complete admin dashboard built with DASI UI'
+            },
+            {
+                type: 'input',
+                name: 'author',
+                message: '👤 Author name:',
+                default: 'DASI Developer'
+            },
+            {
+                type: 'list',
+                name: 'packageManager',
+                message: '📦 Choose package manager:',
+                choices: ['npm', 'yarn', 'pnpm'],
+                default: 'npm'
+            },
+            {
+                type: 'input',
+                name: 'apiUrl',
+                message: '🔗 API base URL:',
+                default: 'http://localhost:8080/api'
+            },
+            {
+                type: 'confirm',
+                name: 'darkMode',
+                message: '🌙 Enable dark mode?',
+                default: true
+            },
+            {
+                type: 'confirm',
+                name: 'gitInit',
+                message: '📚 Initialize git repository?',
+                default: true
+            },
+            {
+                type: 'confirm',
+                name: 'installDeps',
+                message: '📥 Install dependencies now?',
+                default: true
+            }
+        ];
+        
+        const answers = await inquirer.prompt(questions);
+        const spinner = ora('Setting up DASI UI Admin Template...').start();
+        
+        try {
+            const projectPath = path.join(process.cwd(), projectName);
+            const templatePath = path.join(__dirname, '../');
+
+            if (fs.existsSync(projectPath)) {
+                spinner.fail('Project directory already exists');
+                return;
+            }
+
+            spinner.text = '📁 Creating project directory...';
+            fs.mkdirSync(projectPath, { recursive: true });
+            console.log(chalk.green(`✅ Directory created: ${projectPath}`));
+            
+            spinner.text = '📋 Copying template files...';
+            
+            const templatePackageJson = path.join(templatePath, 'package.json');
+            console.log(chalk.white(`   Template package.json exists: ${fs.existsSync(templatePackageJson)}`));
+            
+            await fs.copy(templatePath, projectPath, {
+                filter: (src) => {
+                    const relativePath = path.relative(templatePath, src);
+                    
+                    const excludePatterns = [
+                        'node_modules',
+                        'dist',
+                        '.git',
+                        'package-lock.json',
+                        'yarn.lock',
+                        '.DS_Store'
+                    ];
+                    
+                    const shouldExclude = excludePatterns.some(pattern => 
+                        relativePath.includes(pattern) || src.includes(pattern)
+                    );
+                    
+                    if (!shouldExclude) {
+                        console.log(chalk.gray(`   Copying: ${relativePath}`));
+                    }
+                    
+                    return !shouldExclude;
+                }
+            });
+            
+            const copiedPackageJson = path.join(projectPath, 'package.json');
+            console.log(chalk.white(`   Copied package.json exists: ${fs.existsSync(copiedPackageJson)}`));
+            
+            if (!fs.existsSync(copiedPackageJson)) {
+                throw new Error('Template copy failed - package.json not found');
+            }
+            
+            spinner.text = '⚙️ Updating configuration...';
+            const packageJsonPath = path.join(projectPath, 'package.json');
+            let packageJson = await fs.readJson(packageJsonPath);
+            
+            packageJson.name = answers.projectName;
+            packageJson.description = answers.appDescription;
+            packageJson.author = answers.author;
+            packageJson.version = '0.1.0';  
+            
+            const envContent = `VITE_APP_TITLE=${answers.appTitle}
+                VITE_APP_DESCRIPTION=${answers.appDescription}
+                VITE_APP_AUTHOR=${answers.author}
+                VITE_API_URL=${answers.apiUrl}
+                VITE_DARK_MODE=${answers.darkMode}
+                VITE_INCLUDE_AUTH=${answers.includeAuth}
+                VITE_INCLUDE_CHARTS=${answers.includeCharts}
+                VITE_INCLUDE_MAPS=${answers.includeMaps}`;
+            
+            await fs.writeFile(path.join(projectPath, '.env.example'), envContent);
+            await fs.copyFile(path.join(projectPath, '.env.example'), path.join(projectPath, '.env'));
+            
+            await fs.writeJson(packageJsonPath, packageJson, { spaces: 2 });
+            
+            if (answers.gitInit) {
+                spinner.text = '📚 Initializing git repository...';
+                try {
+                    const { execSync } = require('child_process');
+                    execSync('git init', { stdio: 'ignore' });
+                    execSync('git add .', { stdio: 'ignore' });
+                    execSync('git commit -m "Initial commit: DASI UI Admin Template"', { stdio: 'ignore' });
+                } catch (error) {
+                    console.log(chalk.yellow('⚠️ Git initialization failed, continuing...'));
+                }
+            }
+            
+            if (answers.installDeps) {
+                spinner.text = '📦 Installing dependencies...';
+                try {
+                    const { execSync } = require('child_process');
+                    execSync(`${answers.packageManager} install`, { stdio: 'pipe' });
+                } catch (error) {
+                    spinner.warn('⚠️ Dependencies installation failed');
+                    console.log(chalk.yellow(`Please run manually: ${answers.packageManager} install`));
+                }
+            }
+            
+            console.log(chalk.green(`
+                ╔══════════════════════════════════════════════════════════════╗
+                ║                                                              ║
+                ║  🎉 Success! Your admin dashboard is ready!                  ║
+                ║                                                              ║
+                ╚══════════════════════════════════════════════════════════════╝
+            `));
+            
+            console.log(chalk.green('\n🎉 Setup Complete! Your admin dashboard is ready.'));
+            console.log(chalk.green('\n📋 What you get:'));
+            console.log(chalk.white('   • Complete admin dashboard'));
+            console.log(chalk.white('   • Authentication system' + (answers.includeAuth ? ' ✅' : ' ❌')));
+            console.log(chalk.white('   • Chart components' + (answers.includeCharts ? ' ✅' : ' ❌')));
+            console.log(chalk.white('   • Map components' + (answers.includeMaps ? ' ✅' : ' ❌')));
+            console.log(chalk.white('   • Dark mode' + (answers.darkMode ? ' ✅' : ' ❌')));
+            console.log(chalk.white('   • TypeScript support'));
+            console.log(chalk.white('   • Tailwind CSS styling'));
+            console.log(chalk.white('   • Vue 3 + Pinia + Vue Router'));
+            
+            console.log(chalk.green('\n🚀 Next steps:'));
+            console.log(chalk.white(`   ${answers.packageManager} run dev`));
+            console.log(chalk.gray('   Open http://localhost:3000 to view your admin dashboard'));
+            
+            console.log(chalk.green('\n📚 Documentation:'));
+            console.log(chalk.white('   • README.md for detailed setup'));
+            console.log(chalk.white('   • src/ folder for all components'));
+            console.log(chalk.white('   • .env file for configuration'));
+            
+        } catch (error) {
+            spinner.fail('❌ Setup failed!');
+            console.error(chalk.red('Error Details:'));
+            console.error(chalk.red(error.message));
+            process.exit(1);
+        }
+    });
+
+program.parse();

package/bin/dasi-cli.cjs

@@ -5,42 +5,43 @@ const fs = require('fs-extra');
 const path = require('path');
 const chalk = require('chalk');
 const ora = require('ora');
+const { execSync } = require('child_process');
 
 program
     .name('dasi-ui')
-    .description('DASI UI - Complete Admin Template Setup')
-    .version('1.0.9');
+    .description('🚀 DASI UI - Complete Admin Template Generator')
+    .version('1.0.12');
 
 program
     .command('create [project-name]')
-    .description('Initialize DASI UI admin template')
+    .description('Create a new DASI UI admin dashboard')
     .action(async (projectName) => {
         console.log(chalk.blue.bold('🚀 Welcome to DASI UI Admin Template Setup'));
         console.log(chalk.gray('This will set up a complete admin dashboard in your current directory\n'));
 
         console.log(chalk.blue.bold(`
-            ╔══════════════════════════════════════════════════════════════╗
-            ║                                                              ║
-            ║  🚀 DASI UI - Complete Admin Template Generator              ║
-            ║                                                              ║
-            ║  Creating: ${chalk.cyan(projectName.padEnd(35))}             ║
-            ║                                                              ║
-            ╚══════════════════════════════════════════════════════════════╝
+╔══════════════════════════════════════════════════════════════╗
+║                                                              ║
+║  🚀 DASI UI - Complete Admin Template Generator              ║
+║                                                              ║
+║  Creating: ${chalk.cyan(projectName.padEnd(35))}             ║
+║                                                              ║
+╚══════════════════════════════════════════════════════════════╝
         `));
 
         const questions = [
-            {
-                type: 'input',
-                name: 'projectName',
-                message: '📦 Project name:',
-                default: projectName,
-                validate: (input) => input.length > 0 || 'Project name is required'
-            },
+            // {
+            //     type: 'input',
+            //     name: 'projectName',
+            //     message: '📦 Project name:',
+            //     default: projectName,
+            //     validate: (input) => input.length > 0 || 'Project name is required'
+            // },
             {
                 type: 'input',
                 name: 'appTitle',
                 message: '📱 App title:',
-                default: 'DASI Admin Dashboard'
+                default: projectName ? projectName.charAt(0).toUpperCase() + projectName.slice(1).replace(/-/g, ' ') : 'DASI Admin Dashboard'
             },
             {
                 type: 'input',
@@ -88,111 +89,234 @@ program
         ];
         
         const answers = await inquirer.prompt(questions);
-        const spinner = ora('Setting up DASI UI Admin Template...').start();
+        
+        // 🎯 Enhanced spinner configuration
+        const spinner = ora({
+            text: '🏗️ Building your admin dashboard...',
+            spinner: 'dots',
+            color: 'cyan',
+            hideCursor: true,
+            interval: 100  // Faster animation
+        }).start();
         
         try {
-            const projectPath = path.join(process.cwd(), projectName);
+            const projectPath = path.join(process.cwd(), answers.projectName);
 
             if (fs.existsSync(projectPath)) {
-                spinner.fail('Project directory already exists');
+                spinner.fail('❌ Project directory already exists');
                 return;
             }
 
+            // 🎯 Step 1: Create directory with animated spinner
             spinner.text = '📁 Creating project directory...';
+            await new Promise(resolve => setTimeout(resolve, 300));
             fs.mkdirSync(projectPath, { recursive: true });
+            console.log(chalk.green(`\n✅ Directory created: ${projectPath}`));
+            spinner.start(); // Restart spinner
+            
+            // 🎯 Step 2: Copy template with progress and continuous animation
+            spinner.text = '📋 Copying template files...';
+            let copiedFiles = 0;
+            const templatePath = path.join(__dirname, '../template');
+            
+            if (!fs.existsSync(templatePath)) {
+                throw new Error('Template folder not found. Please ensure this package is installed correctly.');
+            }
+            
+            // Count files for progress
+            const totalFiles = await countFiles(templatePath);
             
-            const templatePath = path.join(__dirname, '../');
+            // 🎯 Keep spinner active during copy
+            const copyInterval = setInterval(() => {
+                spinner.render();
+            }, 100);
             
             await fs.copy(templatePath, projectPath, {
                 filter: (src) => {
-                    return !src.includes('node_modules') && 
-                           !src.includes('dist') && 
-                           !src.includes('.git') &&
-                           !src.includes('package-lock.json') &&
-                           !src.includes('yarn.lock');
+                    const relativePath = path.relative(templatePath, src);
+                    
+                    // Exclude unnecessary files
+                    const excludePatterns = [
+                        'node_modules',
+                        'dist',
+                        '.git',
+                        'package-lock.json',
+                        'yarn.lock',
+                        '.DS_Store'
+                    ];
+                    
+                    const shouldExclude = excludePatterns.some(pattern => 
+                        relativePath.includes(pattern)
+                    );
+                    
+                    if (!shouldExclude) {
+                        copiedFiles++;
+                        const progress = Math.round((copiedFiles / totalFiles) * 100);
+                        spinner.text = `📋 Copying template files... ${progress}% (${copiedFiles}/${totalFiles})`;
+                    }
+                    
+                    return !shouldExclude;
                 }
             });
             
+            clearInterval(copyInterval);
+            
+            // 🎯 Step 3: Configuration updates with smooth transitions
             spinner.text = '⚙️ Updating configuration...';
+            await new Promise(resolve => setTimeout(resolve, 500));
+            
+            const templatePackageJsonPath = path.join(projectPath, 'package.json.template');
             const packageJsonPath = path.join(projectPath, 'package.json');
+            
+            if (fs.existsSync(templatePackageJsonPath)) {
+                spinner.text = '📝 Setting up package.json...';
+                await new Promise(resolve => setTimeout(resolve, 300));
+                await fs.move(templatePackageJsonPath, packageJsonPath);
+            }
+            
+            // Update package.json
+            spinner.text = '🔧 Configuring project settings...';
+            await new Promise(resolve => setTimeout(resolve, 300));
             let packageJson = await fs.readJson(packageJsonPath);
             
             packageJson.name = answers.projectName;
             packageJson.description = answers.appDescription;
             packageJson.author = answers.author;
-            packageJson.version = '0.1.0';  
+            packageJson.version = '0.1.0';
+            
+            await fs.writeJson(packageJsonPath, packageJson, { spaces: 2 });
             
+            // Create environment file
+            spinner.text = '🌍 Setting up environment variables...';
+            await new Promise(resolve => setTimeout(resolve, 300));
             const envContent = `VITE_APP_TITLE=${answers.appTitle}
-                VITE_APP_DESCRIPTION=${answers.appDescription}
-                VITE_APP_AUTHOR=${answers.author}
-                VITE_API_URL=${answers.apiUrl}
-                VITE_DARK_MODE=${answers.darkMode}
-                VITE_INCLUDE_AUTH=${answers.includeAuth}
-                VITE_INCLUDE_CHARTS=${answers.includeCharts}
-                VITE_INCLUDE_MAPS=${answers.includeMaps}`;
+VITE_APP_DESCRIPTION=${answers.appDescription}
+VITE_APP_AUTHOR=${answers.author}
+VITE_API_URL=${answers.apiUrl}
+VITE_DARK_MODE=${answers.darkMode}`;
             
             await fs.writeFile(path.join(projectPath, '.env.example'), envContent);
             await fs.copyFile(path.join(projectPath, '.env.example'), path.join(projectPath, '.env'));
             
-            await fs.writeJson(packageJsonPath, packageJson, { spaces: 2 });
-            
+            // 🎯 Step 4: Git initialization with continuous animation
             if (answers.gitInit) {
                 spinner.text = '📚 Initializing git repository...';
+                await new Promise(resolve => setTimeout(resolve, 500));
                 try {
-                    const { execSync } = require('child_process');
-                    execSync('git init', { stdio: 'ignore' });
-                    execSync('git add .', { stdio: 'ignore' });
-                    execSync('git commit -m "Initial commit: DASI UI Admin Template"', { stdio: 'ignore' });
+                    // Set git config untuk menghindari prompt
+                    execSync('git config user.name "DASI Developer"', { cwd: projectPath, stdio: 'ignore' });
+                    execSync('git config user.email "dev@dasi.id"', { cwd: projectPath, stdio: 'ignore' });
+                    
+                    execSync('git init', { cwd: projectPath, stdio: 'ignore' });
+                    
+                    spinner.text = '📝 Adding files to git...';
+                    await new Promise(resolve => setTimeout(resolve, 400));
+                    execSync('git add .', { cwd: projectPath, stdio: 'ignore' });
+                    
+                    spinner.text = '💾 Creating initial commit...';
+                    await new Promise(resolve => setTimeout(resolve, 400));
+                    
+                    // 🎯 Keep spinner active during git commit
+                    const gitInterval = setInterval(() => {
+                        spinner.render();
+                    }, 100);
+                    
+                    try {
+                        execSync('git commit -m "🚀 Initial commit: DASI UI Admin Template"', { 
+                            cwd: projectPath, 
+                            stdio: 'ignore',
+                            timeout: 10000
+                        });
+                    } catch (commitError) {
+                        console.log(chalk.yellow('\n⚠️ Git commit skipped, continuing...'));
+                    }
+                    
+                    clearInterval(gitInterval);
+                    
                 } catch (error) {
-                    console.log(chalk.yellow('⚠️ Git initialization failed, continuing...'));
+                    console.log(chalk.yellow('\n⚠️ Git initialization failed, continuing...'));
+                    spinner.start();
                 }
             }
             
+            // 🎯 Step 5: Install dependencies with continuous spinner
             if (answers.installDeps) {
                 spinner.text = '📦 Installing dependencies...';
+                spinner.color = 'yellow';
+                
+                // 🎯 Keep spinner active during npm install
+                const installInterval = setInterval(() => {
+                    spinner.render();
+                }, 100);
+                
                 try {
-                    const { execSync } = require('child_process');
-                    execSync(`${answers.packageManager} install`, { stdio: 'pipe' });
+                    execSync(`${answers.packageManager} install`, { 
+                        cwd: projectPath, 
+                        stdio: 'pipe'
+                    });
+                    spinner.color = 'green';
                 } catch (error) {
+                    spinner.color = 'red';
                     spinner.warn('⚠️ Dependencies installation failed');
-                    console.log(chalk.yellow(`Please run manually: ${answers.packageManager} install`));
+                    console.log(chalk.yellow(`Please run manually: cd ${answers.projectName} && ${answers.packageManager} install`));
                 }
+                
+                clearInterval(installInterval);
             }
             
+            // 🎯 Success with celebration
+            spinner.succeed('✅ Admin dashboard created successfully!');
+            
             console.log(chalk.green(`
-                ╔══════════════════════════════════════════════════════════════╗
-                ║                                                              ║
-                ║  🎉 Success! Your admin dashboard is ready!                  ║
-                ║                                                              ║
-                ╚══════════════════════════════════════════════════════════════╝
+╔══════════════════════════════════════════════════════════════╗
+║                                                              ║
+║  🎉 Success! Your admin dashboard is ready!                  ║
+║                                                              ║
+╚══════════════════════════════════════════════════════════════╝
             `));
             
-            console.log(chalk.green('\n🎉 Setup Complete! Your admin dashboard is ready.'));
-            console.log(chalk.green('\n📋 What you get:'));
-            console.log(chalk.white('   • Complete admin dashboard'));
-            console.log(chalk.white('   • Authentication system' + (answers.includeAuth ? ' ✅' : ' ❌')));
-            console.log(chalk.white('   • Chart components' + (answers.includeCharts ? ' ✅' : ' ❌')));
-            console.log(chalk.white('   • Map components' + (answers.includeMaps ? ' ✅' : ' ❌')));
-            console.log(chalk.white('   • Dark mode' + (answers.darkMode ? ' ✅' : ' ❌')));
-            console.log(chalk.white('   • TypeScript support'));
-            console.log(chalk.white('   • Tailwind CSS styling'));
-            console.log(chalk.white('   • Vue 3 + Pinia + Vue Router'));
-            
-            console.log(chalk.green('\n🚀 Next steps:'));
-            console.log(chalk.white(`   ${answers.packageManager} run dev`));
-            console.log(chalk.gray('   Open http://localhost:3000 to view your admin dashboard'));
-            
-            console.log(chalk.green('\n📚 Documentation:'));
-            console.log(chalk.white('   • README.md for detailed setup'));
-            console.log(chalk.white('   • src/ folder for all components'));
-            console.log(chalk.white('   • .env file for configuration'));
+            console.log(chalk.cyan('\n📋 Project Summary:'));
+            console.log(chalk.white(`   📁 Location: ${projectPath}`));
+            console.log(chalk.white(`   📱 Title: ${answers.appTitle}`));
+            console.log(chalk.white(`   📦 Package Manager: ${answers.packageManager}`));
+            console.log(chalk.white(`   🌙 Dark Mode: ${answers.darkMode ? '✅' : '❌'}`));
+            
+            console.log(chalk.green('\n🚀 Next Steps:'));
+            console.log(chalk.white(`   1️⃣ cd ${answers.projectName}`));
+            if (!answers.installDeps) {
+                console.log(chalk.white(`   2️⃣ ${answers.packageManager} install`));
+                console.log(chalk.white(`   3️⃣ ${answers.packageManager} run dev`));
+            } else {
+                console.log(chalk.white(`   2️⃣ ${answers.packageManager} run dev`));
+            }
+            console.log(chalk.gray(`   🌐 Open http://localhost:3000`));
             
         } catch (error) {
             spinner.fail('❌ Setup failed!');
             console.error(chalk.red('Error Details:'));
             console.error(chalk.red(error.message));
+            console.error(chalk.red(error.stack));
             process.exit(1);
         }
     });
 
+// Helper function to count files
+async function countFiles(dir) {
+    let count = 0;
+    const items = await fs.readdir(dir);
+    
+    for (const item of items) {
+        const fullPath = path.join(dir, item);
+        const stat = await fs.stat(fullPath);
+        
+        if (stat.isDirectory()) {
+            count += await countFiles(fullPath);
+        } else {
+            count++;
+        }
+    }
+    
+    return count;
+}
+
 program.parse();