create-modern-react 1.0.1 → 2.1.0

package/lib/prompts.js

@@ -5,17 +5,36 @@ const fs = require('fs-extra');
 const { installDependencies } = require('./install');
 const { setupProject } = require('./setup');
 
+/**
+ * Core stack (always included):
+ * - React 18.3 + TypeScript 5.5 + Vite 5.4 (SWC)
+ * - Tailwind CSS 3.4 + tailwind-merge + clsx + CVA
+ * - Shadcn/ui components (Button, Input, Card, Skeleton, Separator)
+ * - Lucide React icons
+ * - Wouter routing (lightweight, 2KB)
+ * - Axios with interceptors
+ * - ESLint + Prettier (pre-configured)
+ * - Path aliases (~/*)
+ */
+
 async function createProject(projectName, options) {
-  // Get project name if not provided
+  console.log(chalk.cyan.bold('\n🚀 create-modern-react\n'));
+  console.log(chalk.gray('Production-ready React + TypeScript + Tailwind in seconds\n'));
+
+  // ─────────────────────────────────────────────────────────────
+  // Prompt 1: Project Name
+  // ─────────────────────────────────────────────────────────────
   if (!projectName) {
     const nameAnswer = await inquirer.prompt([
       {
         type: 'input',
         name: 'projectName',
-        message: 'What is the name of your project?',
+        message: 'Project name:',
         validate: (input) => {
           if (!input.trim()) return 'Project name is required';
-          if (!/^[a-zA-Z0-9-_]+$/.test(input)) return 'Project name can only contain letters, numbers, hyphens, and underscores';
+          if (!/^[a-zA-Z0-9-_]+$/.test(input)) {
+            return 'Project name can only contain letters, numbers, hyphens, and underscores';
+          }
           return true;
         }
       }
@@ -31,25 +50,27 @@ async function createProject(projectName, options) {
       {
         type: 'confirm',
         name: 'overwrite',
-        message: `Directory ${projectName} already exists. Do you want to overwrite it?`,
+        message: `Directory "${projectName}" already exists. Overwrite?`,
         default: false
       }
     ]);
 
     if (!overwriteAnswer.overwrite) {
-      console.log(chalk.yellow('Operation cancelled.'));
+      console.log(chalk.yellow('\nOperation cancelled.'));
       return;
     }
 
     await fs.remove(projectPath);
   }
 
-  // Package Manager Selection
-  const packageManagerAnswer = await inquirer.prompt([
+  // ─────────────────────────────────────────────────────────────
+  // Prompt 2: Package Manager
+  // ─────────────────────────────────────────────────────────────
+  const { packageManager } = await inquirer.prompt([
     {
       type: 'list',
       name: 'packageManager',
-      message: 'Which package manager would you like to use?',
+      message: 'Package manager:',
       choices: [
         { name: 'npm', value: 'npm' },
         { name: 'yarn', value: 'yarn' },
@@ -58,169 +79,130 @@ async function createProject(projectName, options) {
     }
   ]);
 
-  // UI Library Selection
-  const uiLibraryAnswer = await inquirer.prompt([
-    {
-      type: 'list',
-      name: 'uiLibrary',
-      message: 'Do you want to include a UI component library?',
-      choices: [
-        { name: 'Ant Design v5 (with theme customization)', value: 'antd' },
-        { name: 'Material-UI (MUI)', value: 'mui' },
-        { name: 'Chakra UI', value: 'chakra' },
-        { name: 'None (custom components only)', value: 'none' }
-      ]
-    }
-  ]);
-
-  // CSS Framework Selection
-  const cssFrameworkAnswer = await inquirer.prompt([
-    {
-      type: 'list',
-      name: 'cssFramework',
-      message: 'Which CSS framework would you like to use?',
-      choices: [
-        { name: 'Tailwind CSS (with custom config)', value: 'tailwind' },
-        { name: 'CSS Modules', value: 'css-modules' },
-        { name: 'Styled Components', value: 'styled-components' },
-        { name: 'Plain CSS only', value: 'plain' }
-      ]
-    }
-  ]);
-
-  // State Management Selection
-  const stateManagementAnswer = await inquirer.prompt([
-    {
-      type: 'list',
-      name: 'stateManagement',
-      message: 'Do you need state management?',
-      choices: [
-        { name: 'Redux Toolkit (with Redux Persist)', value: 'redux-toolkit' },
-        { name: 'Zustand', value: 'zustand' },
-        { name: 'Jotai', value: 'jotai' },
-        { name: 'React state only', value: 'none' }
-      ]
-    }
-  ]);
-
-  // Data Fetching Selection
-  const dataFetchingAnswer = await inquirer.prompt([
-    {
-      type: 'list',
-      name: 'dataFetching',
-      message: 'Do you want to include data fetching libraries?',
-      choices: [
-        { name: 'React Query (TanStack Query)', value: 'react-query' },
-        { name: 'SWR', value: 'swr' },
-        { name: 'Apollo Client (for GraphQL)', value: 'apollo' },
-        { name: 'Fetch API only', value: 'none' }
-      ]
-    }
-  ]);
-
-  // Routing Selection
-  const routingAnswer = await inquirer.prompt([
-    {
-      type: 'list',
-      name: 'routing',
-      message: 'Do you need client-side routing?',
-      choices: [
-        { name: 'React Router v6', value: 'react-router' },
-        { name: 'Wouter (lightweight)', value: 'wouter' },
-        { name: 'No routing', value: 'none' }
-      ]
-    }
-  ]);
-
-  // Development Tools Selection
-  const devToolsAnswer = await inquirer.prompt([
+  // ─────────────────────────────────────────────────────────────
+  // Prompt 3: Optional Features (checkbox - multi-select)
+  // ─────────────────────────────────────────────────────────────
+  console.log(chalk.gray('  (Press <space> to select, <enter> to confirm)\n'));
+  const { optionalFeatures } = await inquirer.prompt([
     {
       type: 'checkbox',
-      name: 'devTools',
-      message: 'Which development tools would you like?',
+      name: 'optionalFeatures',
+      message: 'Select optional features:',
       choices: [
-        { name: 'Storybook (component development)', value: 'storybook' },
-        { name: 'ESLint + Prettier (code quality)', value: 'eslint-prettier', checked: true },
-        { name: 'Husky + lint-staged (git hooks)', value: 'husky', checked: true },
-        { name: 'Jest + Testing Library (testing)', value: 'testing' }
-      ]
-    }
-  ]);
-
-  // Icons Selection
-  const iconsAnswer = await inquirer.prompt([
-    {
-      type: 'list',
-      name: 'icons',
-      message: 'Do you want icon libraries?',
-      choices: [
-        { name: 'Lucide React', value: 'lucide' },
-        { name: 'React Icons', value: 'react-icons' },
-        { name: 'Heroicons', value: 'heroicons' },
-        { name: 'No icon library', value: 'none' }
+        {
+          name: 'Redux Toolkit + Redux Persist (state management)',
+          value: 'redux',
+          checked: false
+        },
+        {
+          name: 'Ant Design v5 (replaces Shadcn/ui)',
+          value: 'antd',
+          checked: false
+        },
+        {
+          name: 'Husky + lint-staged (git hooks)',
+          value: 'husky',
+          checked: false
+        }
       ]
     }
   ]);
 
-  // PWA Selection
-  const pwaAnswer = await inquirer.prompt([
-    {
-      type: 'confirm',
-      name: 'pwa',
-      message: 'Make it a PWA?',
-      default: false
-    }
-  ]);
+  // ─────────────────────────────────────────────────────────────
+  // Prompt 4: Initialize Git
+  // ─────────────────────────────────────────────────────────────
+  let initGit = true;
+  if (!options.skipGit) {
+    const gitAnswer = await inquirer.prompt([
+      {
+        type: 'confirm',
+        name: 'git',
+        message: 'Initialize Git repository?',
+        default: true
+      }
+    ]);
+    initGit = gitAnswer.git;
+  } else {
+    initGit = false;
+  }
 
-  // Git Selection
-  const gitAnswer = await inquirer.prompt([
-    {
-      type: 'confirm',
-      name: 'git',
-      message: 'Initialize Git repository?',
-      default: true
-    }
-  ]);
+  // ─────────────────────────────────────────────────────────────
+  // Prompt 5: Install Dependencies
+  // ─────────────────────────────────────────────────────────────
+  let installDeps = true;
+  if (!options.skipInstall) {
+    const installAnswer = await inquirer.prompt([
+      {
+        type: 'confirm',
+        name: 'install',
+        message: 'Install dependencies?',
+        default: true
+      }
+    ]);
+    installDeps = installAnswer.install;
+  } else {
+    installDeps = false;
+  }
 
+  // ─────────────────────────────────────────────────────────────
+  // Build Configuration Object
+  // ─────────────────────────────────────────────────────────────
   const config = {
     projectName,
     projectPath,
-    packageManager: packageManagerAnswer.packageManager,
-    uiLibrary: uiLibraryAnswer.uiLibrary,
-    cssFramework: cssFrameworkAnswer.cssFramework,
-    stateManagement: stateManagementAnswer.stateManagement,
-    dataFetching: dataFetchingAnswer.dataFetching,
-    routing: routingAnswer.routing,
-    devTools: devToolsAnswer.devTools,
-    icons: iconsAnswer.icons,
-    pwa: pwaAnswer.pwa,
-    git: gitAnswer.git,
-    skipInstall: options.skipInstall,
-    skipGit: options.skipGit
+    packageManager,
+    // Optional features
+    useRedux: optionalFeatures.includes('redux'),
+    useAntd: optionalFeatures.includes('antd'),
+    useHusky: optionalFeatures.includes('husky'),
+    // Flags
+    initGit,
+    installDeps
   };
 
-  console.log(chalk.blue('\n📦 Creating project with the following configuration:'));
-  console.log(chalk.gray(JSON.stringify(config, null, 2)));
-
-  // Create project
+  // ─────────────────────────────────────────────────────────────
+  // Display Configuration Summary
+  // ─────────────────────────────────────────────────────────────
+  console.log(chalk.cyan('\n┌─────────────────────────────────────────────┐'));
+  console.log(chalk.cyan('│') + chalk.white.bold('         Configuration Summary              ') + chalk.cyan('│'));
+  console.log(chalk.cyan('├─────────────────────────────────────────────┤'));
+  console.log(chalk.cyan('│') + chalk.white(' Core Stack (always included):              ') + chalk.cyan('│'));
+  console.log(chalk.cyan('│') + chalk.gray('   React 18 + TypeScript + Vite (SWC)       ') + chalk.cyan('│'));
+  console.log(chalk.cyan('│') + chalk.gray('   Tailwind CSS + clsx + CVA                ') + chalk.cyan('│'));
+  console.log(chalk.cyan('│') + chalk.gray(`   ${config.useAntd ? 'Ant Design v5' : 'Shadcn/ui components'}                      `) + chalk.cyan('│'));
+  console.log(chalk.cyan('│') + chalk.gray('   Wouter routing + Axios                   ') + chalk.cyan('│'));
+  console.log(chalk.cyan('│') + chalk.gray('   Lucide icons + ESLint + Prettier         ') + chalk.cyan('│'));
+  console.log(chalk.cyan('├─────────────────────────────────────────────┤'));
+  console.log(chalk.cyan('│') + chalk.white(' Optional Features:                         ') + chalk.cyan('│'));
+  console.log(chalk.cyan('│') + `   Redux Toolkit:  ${config.useRedux ? chalk.green('✓') : chalk.gray('✗')}                        ` + chalk.cyan('│'));
+  console.log(chalk.cyan('│') + `   Ant Design v5:  ${config.useAntd ? chalk.green('✓') : chalk.gray('✗')}                        ` + chalk.cyan('│'));
+  console.log(chalk.cyan('│') + `   Husky hooks:    ${config.useHusky ? chalk.green('✓') : chalk.gray('✗')}                        ` + chalk.cyan('│'));
+  console.log(chalk.cyan('└─────────────────────────────────────────────┘\n'));
+
+  // ─────────────────────────────────────────────────────────────
+  // Execute Setup
+  // ─────────────────────────────────────────────────────────────
   await setupProject(config);
 
   // Install dependencies
-  if (!options.skipInstall) {
+  if (installDeps) {
     await installDependencies(config);
   }
 
-  console.log(chalk.green.bold(`\n🎉 Project ${projectName} created successfully!`));
-  console.log(chalk.blue('\nNext steps:'));
-  console.log(chalk.gray(`  cd ${projectName}`));
-
-  // Use the actual package manager that was used for installation
-  const actualPackageManager = config.actualPackageManager || config.packageManager;
+  // ─────────────────────────────────────────────────────────────
+  // Success Message
+  // ─────────────────────────────────────────────────────────────
+  const pm = config.actualPackageManager || packageManager;
+  const runCmd = pm === 'npm' ? 'npm run' : pm;
 
-  if (options.skipInstall) {
-    console.log(chalk.gray(`  ${actualPackageManager} install`));
+  console.log(chalk.green.bold(`\n✅ Project "${projectName}" created successfully!\n`));
+  console.log(chalk.white('Next steps:\n'));
+  console.log(chalk.gray(`  cd ${projectName}`));
+  if (!installDeps) {
+    console.log(chalk.gray(`  ${pm} install`));
   }
-  console.log(chalk.gray(`  ${actualPackageManager === 'npm' ? 'npm run dev' : actualPackageManager + ' dev'}`));
+  console.log(chalk.gray(`  ${runCmd} dev\n`));
+  console.log(chalk.cyan('Happy coding! 🎉\n'));
 }
 
-module.exports = { createProject };
+module.exports = { createProject };