create-bluecopa-react-app 1.0.4 → 1.0.6

package/README.md

@@ -20,7 +20,7 @@ A command-line interface for bootstrapping modern React applications with BlueCo
 
 ## Version
 
-Current version: 0.1.0
+Current version: 1.0.5
 
 ## Installation
 
@@ -46,35 +46,47 @@ export BLUECOPA_BOILERPLATE_REGISTRY=https://registry.npmjs.org
 
 ## Features
 
-- 🚀 **Modern React Stack**: React 18, TypeScript, React Router v6, Vite 7
+- 🚀 **Modern React Stack**: React 18, TypeScript, React Router v7, Vite 6
 - 🌐 **Microfrontend Support**: Single-spa compatible with module federation
 - 📊 **Data Visualization**: Recharts integration for charts and analytics
-- 🎨 **UI Components**: Radix UI primitives with custom styling
+- 🎨 **UI Components**: shadcn/ui components built on Radix UI primitives
 - 📡 **BlueCopa React Components**: Pre-configured [`@bluecopa/react`](packages/react:1) package with hooks (includes TanStack Query integration)
 - 🎯 **Type Safety**: Full TypeScript support
-- 📱 **Responsive Design**: Tailwind CSS with mobile-first approach and BlueCopa design system
+- 📱 **Responsive Design**: Tailwind CSS v4 with mobile-first approach and BlueCopa design system
 - 🛠️ **Development Tools**: ESLint, TypeScript checking, and Vite fast build system
 - ⚡ **Fast Development**: Hot module replacement with Vite
-- 🔄 **Client-side Routing**: React Router v6 for SPA navigation
+- 🔄 **Server-side Rendering**: React Router v7 with SSR support
+- 🌙 **Dark Mode**: Built-in theme switching with next-themes
+- 🗂️ **Data Tables**: TanStack Table with sorting, filtering, and pagination
+- 🎯 **Drag & Drop**: DND Kit integration for interactive interfaces
 
 ## Usage
 
 ### Creating a New Application
 
 ```bash
-# Create new app
+# Create new app with default template
 create-bluecopa-react-app my-dashboard
 
+# Create new app with shadcn/ui template
+create-bluecopa-react-app my-dashboard --template shadcn
+
 # Or use npx
 npx create-bluecopa-react-app my-dashboard
+npx create-bluecopa-react-app my-dashboard --template shadcn
 ```
 
+### Available Templates
+
+- **Default Template**: Basic React Router setup with essential components
+- **shadcn Template**: Full-featured template with shadcn/ui components, data tables, charts, and dark mode support
+
 ### CLI Options
 
 | Option | Description |
 |--------|-------------|
 | `--skip-install` | Skip dependency installation |
-| `--template` | Specify template version (default: latest) |
+| `--template` | Specify template (default, shadcn) |
 | `--help` | Show help information |
 
 ## API Documentation
@@ -106,6 +118,12 @@ create-bluecopa-react-app my-dashboard
 create-bluecopa-react-app my-dashboard --skip-install
 ```
 
+### Using npx (Recommended)
+
+```bash
+npx create-bluecopa-react-app my-dashboard
+```
+
 ## Development
 
 ### Available Scripts
@@ -122,11 +140,30 @@ create-bluecopa-react-app my-dashboard --skip-install
 ### Technologies Used
 
 - **React 18** - Modern React with concurrent features
-- **React Router v6** - Declarative routing for React SPAs
-- **Vite** - Fast build tool and development server
+- **React Router v7** - Modern routing with SSR support
+- **Vite 6** - Fast build tool and development server
 - **TypeScript** - Full type safety and developer experience
 - **[`@bluecopa/react`](packages/react:1)** - BlueCopa-specific React components and hooks
+- **shadcn/ui** - Accessible component library built on Radix UI
 - **Radix UI** - Unstyled, accessible UI primitives
+- **TanStack Table** - Headless table library for React
 - **Recharts** - Composable charting library for React
-- **Tailwind CSS** - Utility-first CSS framework with BlueCopa design system
+- **DND Kit** - Drag and drop toolkit for React
+- **Tailwind CSS v4** - Utility-first CSS framework with BlueCopa design system
+- **next-themes** - Theme switching with dark mode support
 - **Lucide React** - Beautiful, customizable icons
+
+## Monorepo Integration
+
+This CLI tool is part of the BlueCopa UI monorepo and integrates with the following packages:
+
+- **[`@bluecopa/react`](packages/react:1)** - BlueCopa-specific React components and hooks
+
+### Standalone Development
+
+The generated applications can also be developed independently:
+
+1. **Self-contained**: All dependencies are properly installed
+2. **Environment setup**: Includes proper environment variable configuration
+3. **Build optimization**: Uses Vite for fast development and production builds
+4. **Deployment ready**: Includes Docker configuration and deployment guides

package/bin/create-bluecopa-react-app.js

@@ -1,24 +1,49 @@
 #!/usr/bin/env node
 
-const { Command } = require('commander');
-const path = require('path');
-const fs = require('fs-extra');
-const chalk = require('chalk');
-const inquirer = require('inquirer');
-const ora = require('ora');
-const { execSync } = require('child_process');
-const validatePackageName = require('validate-npm-package-name');
+import { Command } from 'commander';
+import path from 'path';
+import fs from 'fs-extra';
+import chalk from 'chalk';
+import inquirer from 'inquirer';
+import ora from 'ora';
+import { execSync } from 'child_process';
+import validatePackageName from 'validate-npm-package-name';
+import { fileURLToPath } from 'url';
+
+// ES module equivalent of __dirname
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 
 const program = new Command();
 
 program
-  .version('1.0.0')
+  .version('1.0.5')
   .name('create-bluecopa-react-app')
   .description('Create a new Bluecopa React application')
   .argument('[project-name]', 'Name of the project')
+  .option('-t, --template <template>', 'Template to use (latest)', 'latest')
   .option('--typescript', 'Use TypeScript template', true)
   .option('--no-typescript', 'Use JavaScript template')
   .option('--skip-install', 'Skip package installation')
+  .option('--package-manager <manager>', 'Package manager to use (npm, yarn, pnpm)', 'auto')
+  .option('--git', 'Initialize git repository', true)
+  .option('--no-git', 'Skip git initialization')
+  .option('--yes', 'Skip all prompts and use defaults')
+  .addHelpText('after', `
+Examples:
+  $ create-bluecopa-react-app my-dashboard
+  $ create-bluecopa-react-app my-app --template latest
+  $ create-bluecopa-react-app my-app --package-manager pnpm
+  $ create-bluecopa-react-app my-app --skip-install
+  $ create-bluecopa-react-app my-app --no-git
+  $ create-bluecopa-react-app my-app --yes
+
+Templates:
+  latest    Basic React Router setup with essential components
+
+For more information, visit:
+  https://github.com/bluecopa/blui/tree/main/packages/boilerplate/react
+`)
   .action(async (projectName, options) => {
     try {
       await createApp(projectName, options);
@@ -30,14 +55,28 @@ program
 
 async function createApp(projectName, options) {
   let appName = projectName;
+  let selectedTemplate = options.template;
+  let initGit = options.git;
+  let packageManager = options.packageManager;
+
+  // If not using --yes flag, prompt for all options
+  if (!options.yes) {
+    const prompts = [];
 
-  // If no project name provided, prompt for it
-  if (!appName) {
-    const answers = await inquirer.prompt([
-      {
+    // 1. Project Name prompt
+    if (!appName) {
+      // Generate a random default project name
+      const adjectives = ['awesome', 'stellar', 'brilliant', 'dynamic', 'epic', 'fantastic', 'incredible', 'magnificent', 'outstanding', 'spectacular'];
+      const nouns = ['app', 'dashboard', 'project', 'platform', 'tool', 'system', 'solution', 'interface', 'portal', 'workspace'];
+      const randomAdjective = adjectives[Math.floor(Math.random() * adjectives.length)];
+      const randomNoun = nouns[Math.floor(Math.random() * nouns.length)];
+      const defaultProjectName = `my-${randomAdjective}-${randomNoun}`;
+
+      prompts.push({
         type: 'input',
         name: 'projectName',
         message: 'What is your project name?',
+        default: defaultProjectName,
         validate: (input) => {
           if (!input) return 'Project name is required';
           const validation = validatePackageName(input);
@@ -46,15 +85,79 @@ async function createApp(projectName, options) {
           }
           return true;
         }
-      }
-    ]);
-    appName = answers.projectName;
+      });
+    }
+
+    // 2. Template selection prompt
+    prompts.push({
+      type: 'list',
+      name: 'template',
+      message: 'Select a template:',
+      choices: [
+        { name: 'Latest - Basic React Router setup with essential components', value: 'latest' }
+      ],
+      default: selectedTemplate
+    });
+
+    // 3. Git initialization prompt
+    prompts.push({
+      type: 'confirm',
+      name: 'initGit',
+      message: 'Initialize git repository?',
+      default: initGit !== false
+    });
+
+    // 4. Package manager prompt
+    prompts.push({
+      type: 'list',
+      name: 'packageManager',
+      message: 'Select package manager:',
+      choices: [
+        { name: 'pnpm (recommended)', value: 'pnpm' },
+        { name: 'npm', value: 'npm' },
+        { name: 'Auto-detect', value: 'auto' }
+      ],
+      default: packageManager === 'auto' ? 'auto' : packageManager
+    });
+
+    // 5. Install dependencies prompt
+    prompts.push({
+      type: 'confirm',
+      name: 'runInstall',
+      message: 'Do you want to install dependencies now?',
+      default: !options.skipInstall
+    });
+
+    // Execute all prompts
+    const answers = await inquirer.prompt(prompts);
+    
+    // Update values from prompts
+    if (answers.projectName) appName = answers.projectName;
+    selectedTemplate = answers.template;
+    initGit = answers.initGit;
+    packageManager = answers.packageManager;
+    options.skipInstall = !answers.runInstall;
+  } else {
+    // When using --yes flag, validate required options
+    if (!appName) {
+      console.error(chalk.red('Project name is required when using --yes flag'));
+      process.exit(1);
+    }
+  }
+
+  // Validate template
+  const validTemplates = ['latest'];
+  if (!validTemplates.includes(selectedTemplate)) {
+    console.error(chalk.red(`Invalid template: ${selectedTemplate}`));
+    console.error(chalk.yellow(`Available templates: ${validTemplates.join(', ')}`));
+    process.exit(1);
   }
 
   // Validate project name
   const validation = validatePackageName(appName);
   if (!validation.validForNewPackages) {
     console.error(chalk.red('Invalid project name:'), validation.errors?.[0] || validation.warnings?.[0]);
+    console.error(chalk.yellow('Project names must be lowercase, contain no spaces, and follow npm naming conventions.'));
     process.exit(1);
   }
 
@@ -62,37 +165,53 @@ async function createApp(projectName, options) {
 
   // Check if directory already exists
   if (fs.existsSync(targetDir)) {
-    const answers = await inquirer.prompt([
-      {
-        type: 'confirm',
-        name: 'overwrite',
-        message: `Directory ${appName} already exists. Overwrite?`,
-        default: false
+    if (options.yes) {
+      console.log(chalk.yellow(`Directory ${appName} already exists. Overwriting...`));
+      await fs.remove(targetDir);
+    } else {
+      const answers = await inquirer.prompt([
+        {
+          type: 'confirm',
+          name: 'overwrite',
+          message: `Directory ${appName} already exists. Overwrite?`,
+          default: false
+        }
+      ]);
+
+      if (!answers.overwrite) {
+        console.log(chalk.yellow('Operation cancelled.'));
+        return;
       }
-    ]);
 
-    if (!answers.overwrite) {
-      console.log(chalk.yellow('Operation cancelled.'));
-      return;
+      await fs.remove(targetDir);
     }
-
-    await fs.remove(targetDir);
   }
 
   console.log(chalk.blue(`Creating a new Bluecopa React app in ${chalk.green(targetDir)}`));
+  console.log(chalk.gray(`Template: ${selectedTemplate}`));
   console.log();
 
   // Create app
   const spinner = ora('Creating project structure...').start();
   
   try {
-    await createProjectStructure(targetDir, appName, options);
+    await createProjectStructure(targetDir, appName, { ...options, template: selectedTemplate });
     spinner.succeed('Project structure created');
 
     if (!options.skipInstall) {
-      spinner.start('Installing dependencies...');
-      await installDependencies(targetDir);
+      const detectedPackageManager = await detectPackageManager(packageManager);
+      spinner.start(`Installing dependencies with ${detectedPackageManager}...`);
+      await installDependencies(targetDir, detectedPackageManager);
       spinner.succeed('Dependencies installed');
+    } else {
+      console.log(chalk.yellow('Skipping dependency installation. You can run it manually later.'));
+    }
+
+    // Post-installation setup
+    if (initGit !== false) {
+      spinner.start('Initializing git repository...');
+      await initializeGit(targetDir, appName);
+      spinner.succeed('Git repository initialized');
     }
 
     spinner.succeed(chalk.green('Success! Created ' + appName + ' at ' + targetDir));
@@ -100,30 +219,69 @@ async function createApp(projectName, options) {
     console.log();
     console.log('Inside that directory, you can run several commands:');
     console.log();
-    console.log(chalk.cyan('  npm run dev'));
+    
+    // Show install command if dependencies weren't installed
+    if (options.skipInstall) {
+      const detectedPackageManager = await detectPackageManager(packageManager);
+      const installCommand = detectedPackageManager === 'yarn' ? 'yarn install' : 
+                            detectedPackageManager === 'pnpm' ? 'pnpm install' : 
+                            'npm install';
+      console.log(chalk.cyan(`  ${installCommand}`));
+      console.log('    Install dependencies first.');
+      console.log();
+    }
+    
+    const runCommand = packageManager === 'pnpm' ? 'pnpm run' : 
+                      packageManager === 'yarn' ? 'yarn' : 
+                      'npm run';
+    
+    console.log(chalk.cyan(`  ${runCommand} dev`));
     console.log('    Starts the development server.');
     console.log();
-    console.log(chalk.cyan('  npm run build'));
+    console.log(chalk.cyan(`  ${runCommand} build`));
     console.log('    Bundles the app into static files for production.');
     console.log();
-    console.log(chalk.cyan('  npm run preview'));
+    console.log(chalk.cyan(`  ${runCommand} start`));
+    console.log('    Start the production build locally.');
+    console.log();
+    console.log(chalk.cyan(`  ${runCommand} preview`));
     console.log('    Preview the production build locally.');
     console.log();
     console.log('We suggest that you begin by typing:');
     console.log();
     console.log(chalk.cyan('  cd'), appName);
-    console.log(chalk.cyan('  npm run dev'));
+    if (options.skipInstall) {
+      const detectedPackageManager = await detectPackageManager(packageManager);
+      const installCommand = detectedPackageManager === 'yarn' ? 'yarn install' : 
+                            detectedPackageManager === 'pnpm' ? 'pnpm install' : 
+                            'npm install';
+      console.log(chalk.cyan(`  ${installCommand}`));
+    }
+    console.log(chalk.cyan(`  ${runCommand} dev`));
+    console.log();
+    console.log('Happy coding! 🚀');
     console.log();
-    console.log('Happy coding with Bluecopa! 🚀');
+    console.log(chalk.gray('Need help? Check out the documentation:'));
+    console.log(chalk.gray('  https://github.com/bluecopa/blui/tree/main/packages/boilerplate/react'));
 
   } catch (error) {
     spinner.fail('Failed to create project');
+    // Cleanup on failure
+    if (fs.existsSync(targetDir)) {
+      console.log(chalk.yellow('Cleaning up...'));
+      await fs.remove(targetDir);
+    }
     throw error;
   }
 }
 
 async function createProjectStructure(targetDir, appName, options) {
-  const templateDir = path.join(__dirname, '../templates/latest');
+  const templateDir = path.join(__dirname, '../templates', options.template);
+  
+  // Validate template directory exists
+  if (!await fs.pathExists(templateDir)) {
+    throw new Error(`Template '${options.template}' not found at ${templateDir}`);
+  }
   
   // Create base directory
   await fs.ensureDir(targetDir);
@@ -133,9 +291,11 @@ async function createProjectStructure(targetDir, appName, options) {
   
   // Update package.json with project name
   const packageJsonPath = path.join(targetDir, 'package.json');
-  const packageJson = await fs.readJson(packageJsonPath);
-  packageJson.name = appName;
-  await fs.writeJson(packageJsonPath, packageJson, { spaces: 2 });
+  if (await fs.pathExists(packageJsonPath)) {
+    const packageJson = await fs.readJson(packageJsonPath);
+    packageJson.name = appName;
+    await fs.writeJson(packageJsonPath, packageJson, { spaces: 2 });
+  }
   
   // Update index.html title if it exists
   const indexHtmlPath = path.join(targetDir, 'public/index.html');
@@ -144,27 +304,73 @@ async function createProjectStructure(targetDir, appName, options) {
     indexHtml = indexHtml.replace(/{{APP_NAME}}/g, appName);
     await fs.writeFile(indexHtmlPath, indexHtml);
   }
+
+  // Update root index.html if it exists
+  const rootIndexHtmlPath = path.join(targetDir, 'index.html');
+  if (await fs.pathExists(rootIndexHtmlPath)) {
+    let indexHtml = await fs.readFile(rootIndexHtmlPath, 'utf8');
+    indexHtml = indexHtml.replace(/{{APP_NAME}}/g, appName);
+    await fs.writeFile(rootIndexHtmlPath, indexHtml);
+  }
 }
 
-async function installDependencies(targetDir) {
+async function detectPackageManager(preferredManager) {
+  if (preferredManager !== 'auto') {
+    // Validate the preferred manager is available
+    try {
+      execSync(`${preferredManager} --version`, { stdio: 'ignore' });
+      return preferredManager;
+    } catch {
+      console.log(chalk.yellow(`Warning: ${preferredManager} not found, falling back to auto-detection`));
+    }
+  }
+
+  // Auto-detect with preference order: pnpm > yarn > npm
+  const managers = ['pnpm', 'yarn', 'npm'];
+  
+  for (const manager of managers) {
+    try {
+      execSync(`${manager} --version`, { stdio: 'ignore' });
+      return manager;
+    } catch {
+      // Manager not available, try next
+    }
+  }
+  
+  // Fallback to npm (should always be available)
+  return 'npm';
+}
+
+async function installDependencies(targetDir, packageManager) {
   try {
     // Change to target directory and install
     process.chdir(targetDir);
     
-    // Check if yarn is available, otherwise use npm
-    let packageManager = 'npm';
-    try {
-      execSync('yarn --version', { stdio: 'ignore' });
-      packageManager = 'yarn';
-    } catch {
-      // yarn not available, use npm
-    }
+    const installCommand = packageManager === 'yarn' ? 'yarn install' : 
+                          packageManager === 'pnpm' ? 'pnpm install' : 
+                          'npm install';
     
-    const installCommand = packageManager === 'yarn' ? 'yarn install' : 'npm install';
     execSync(installCommand, { stdio: 'inherit' });
     
   } catch (error) {
-    throw new Error('Failed to install dependencies: ' + error.message);
+    throw new Error(`Failed to install dependencies with ${packageManager}: ${error.message}`);
+  }
+}
+
+async function initializeGit(targetDir, appName) {
+  try {
+    process.chdir(targetDir);
+    
+    // Initialize git repository
+    execSync('git init', { stdio: 'ignore' });
+    
+    // Create initial commit
+    execSync('git add .', { stdio: 'ignore' });
+    execSync(`git commit -m "Initial commit: ${appName}"`, { stdio: 'ignore' });
+    
+  } catch (error) {
+    // Git initialization is optional, don't fail the whole process
+    console.log(chalk.yellow('Warning: Failed to initialize git repository'));
   }
 }
 

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "create-bluecopa-react-app",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "CLI tool to create bluecopa React applications",
+  "type": "module",
   "main": "./bin/create-bluecopa-react-app.js",
   "bin": {
     "create-bluecopa-react-app": "./bin/create-bluecopa-react-app.js"
@@ -19,11 +20,11 @@
     "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
   },
   "dependencies": {
-    "commander": "^11.1.0",
+    "commander": "^12.0.0",
     "fs-extra": "^11.2.0",
-    "chalk": "^4.1.2",
-    "inquirer": "^8.2.6",
-    "ora": "^5.4.1",
+    "chalk": "^5.3.0",
+    "inquirer": "^9.2.12",
+    "ora": "^8.0.1",
     "validate-npm-package-name": "^5.0.0"
   },
   "devDependencies": {},