create-modern-react 1.0.0 → 2.0.0

package/lib/prompts.js

@@ -1,25 +1,43 @@
-const inquirer = require("inquirer");
-const chalk = require("chalk");
-const path = require("path");
-const fs = require("fs-extra");
-const { installDependencies } = require("./install");
-const { setupProject } = require("./setup");
+const inquirer = require('inquirer');
+const chalk = require('chalk');
+const path = require('path');
+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?",
+        type: 'input',
+        name: 'projectName',
+        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 (!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';
+          }
           return true;
-        },
-      },
+        }
+      }
     ]);
     projectName = nameAnswer.projectName;
   }
@@ -30,206 +48,161 @@ async function createProject(projectName, options) {
   if (fs.existsSync(projectPath)) {
     const overwriteAnswer = await inquirer.prompt([
       {
-        type: "confirm",
-        name: "overwrite",
-        message: `Directory ${projectName} already exists. Do you want to overwrite it?`,
-        default: false,
-      },
+        type: 'confirm',
+        name: 'overwrite',
+        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([
-    {
-      type: "list",
-      name: "packageManager",
-      message: "Which package manager would you like to use?",
-      choices: [
-        { name: "npm", value: "npm" },
-        { name: "yarn", value: "yarn" },
-        { name: "pnpm", value: "pnpm" },
-      ],
-    },
-  ]);
-
-  // 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([
+  // ─────────────────────────────────────────────────────────────
+  // Prompt 2: Package Manager
+  // ─────────────────────────────────────────────────────────────
+  const { packageManager } = await inquirer.prompt([
     {
-      type: "list",
-      name: "routing",
-      message: "Do you need client-side routing?",
+      type: 'list',
+      name: 'packageManager',
+      message: 'Package manager:',
       choices: [
-        { name: "React Router v6", value: "react-router" },
-        { name: "Wouter (lightweight)", value: "wouter" },
-        { name: "No routing", value: "none" },
-      ],
-    },
+        { name: 'npm', value: 'npm' },
+        { name: 'yarn', value: 'yarn' },
+        { name: 'pnpm', value: 'pnpm' }
+      ]
+    }
   ]);
 
-  // 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?",
+      type: 'checkbox',
+      name: 'optionalFeatures',
+      message: 'Select optional features:',
       choices: [
-        { name: "Storybook (component development)", value: "storybook" },
         {
-          name: "ESLint + Prettier (code quality)",
-          value: "eslint-prettier",
-          checked: true,
+          name: 'Redux Toolkit + Redux Persist (state management)',
+          value: 'redux',
+          checked: false
         },
         {
-          name: "Husky + lint-staged (git hooks)",
-          value: "husky",
-          checked: true,
+          name: 'Ant Design v5 (replaces Shadcn/ui)',
+          value: 'antd',
+          checked: false
         },
-        { 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: '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:"));
+  // ─────────────────────────────────────────────────────────────
+  // Success Message
+  // ─────────────────────────────────────────────────────────────
+  const pm = config.actualPackageManager || packageManager;
+  const runCmd = pm === 'npm' ? 'npm run' : pm;
+
+  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 (options.skipInstall) {
-    console.log(chalk.gray(`  ${config.packageManager} install`));
+  if (!installDeps) {
+    console.log(chalk.gray(`  ${pm} install`));
   }
-  console.log(chalk.gray(`  ${config.packageManager} dev`));
+  console.log(chalk.gray(`  ${runCmd} dev\n`));
+  console.log(chalk.cyan('Happy coding! 🎉\n'));
 }
 
 module.exports = { createProject };