create-modern-react 1.0.0 → 1.0.1

package/bin/index.js

@@ -1,28 +1,26 @@
 #!/usr/bin/env node
 
-const { program } = require("commander");
-const chalk = require("chalk");
-const { createProject } = require("../lib/prompts");
+const { program } = require('commander');
+const chalk = require('chalk');
+const { createProject } = require('../lib/prompts');
 
 program
-  .name("create-modern-react")
-  .description(
-    "Create a modern React application with Vite, TypeScript, and your choice of modern libraries",
-  )
-  .version("1.0.0")
-  .argument("[project-name]", "name of the project")
-  .option("-t, --template <template>", "use a specific template")
-  .option("--skip-install", "skip dependency installation")
-  .option("--skip-git", "skip git initialization")
+  .name('create-modern-react')
+  .description('Create a modern React application with Vite, TypeScript, and your choice of modern libraries')
+  .version('1.0.0')
+  .argument('[project-name]', 'name of the project')
+  .option('-t, --template <template>', 'use a specific template')
+  .option('--skip-install', 'skip dependency installation')
+  .option('--skip-git', 'skip git initialization')
   .action(async (projectName, options) => {
-    console.log(chalk.blue.bold("\n🚀 Welcome to create-modern-react!\n"));
+    console.log(chalk.blue.bold('\n🚀 Welcome to create-modern-react!\n'));
 
     try {
       await createProject(projectName, options);
     } catch (error) {
-      console.error(chalk.red("❌ Error creating project:"), error.message);
+      console.error(chalk.red('❌ Error creating project:'), error.message);
       process.exit(1);
     }
   });
 
-program.parse();
+program.parse();

package/lib/install.js

@@ -1,15 +1,15 @@
-const { spawn } = require("child_process");
-const chalk = require("chalk");
+const { spawn } = require('child_process');
+const chalk = require('chalk');
 
 function runCommand(command, args, cwd) {
   return new Promise((resolve, reject) => {
     const child = spawn(command, args, {
       cwd,
-      stdio: "inherit",
-      shell: true,
+      stdio: 'inherit',
+      shell: true
     });
 
-    child.on("close", (code) => {
+    child.on('close', (code) => {
       if (code === 0) {
         resolve();
       } else {
@@ -17,43 +17,114 @@ function runCommand(command, args, cwd) {
       }
     });
 
-    child.on("error", (error) => {
+    child.on('error', (error) => {
       reject(error);
     });
   });
 }
 
+// Check if a command is available
+function isCommandAvailable(command) {
+  return new Promise((resolve) => {
+    const child = spawn(command, ['--version'], {
+      stdio: 'ignore',
+      shell: true
+    });
+
+    child.on('close', (code) => {
+      resolve(code === 0);
+    });
+
+    child.on('error', () => {
+      resolve(false);
+    });
+  });
+}
+
+// Get the best available package manager with fallback
+async function getAvailablePackageManager(preferredManager) {
+  console.log(chalk.blue(`🔍 Checking for ${preferredManager}...`));
+
+  // Check if preferred package manager is available
+  if (await isCommandAvailable(preferredManager)) {
+    console.log(chalk.green(`✅ ${preferredManager} is available`));
+    return preferredManager;
+  }
+
+  // Fallback logic
+  console.log(chalk.yellow(`⚠️  ${preferredManager} is not installed`));
+
+  if (preferredManager !== 'npm') {
+    console.log(chalk.blue('🔄 Falling back to npm...'));
+
+    if (await isCommandAvailable('npm')) {
+      console.log(chalk.green('✅ npm is available, using npm instead'));
+      return 'npm';
+    } else {
+      throw new Error('Neither ' + preferredManager + ' nor npm is available');
+    }
+  } else {
+    throw new Error('npm is not available');
+  }
+}
+
+// Get install command and args for package manager
+function getInstallCommand(packageManager) {
+  switch (packageManager) {
+    case 'yarn':
+      return { command: 'yarn', args: ['install'] };
+    case 'pnpm':
+      return { command: 'pnpm', args: ['install'] };
+    case 'npm':
+    default:
+      return { command: 'npm', args: ['install'] };
+  }
+}
+
 async function installDependencies(config) {
-  const { projectPath, packageManager } = config;
+  const { projectPath, packageManager: preferredManager, projectName } = config;
 
-  console.log(chalk.blue("\n📦 Installing dependencies..."));
+  console.log(chalk.blue('\n📦 Installing dependencies...'));
 
   try {
-    const installCommand =
-      packageManager === "yarn"
-        ? "yarn"
-        : packageManager === "pnpm"
-          ? "pnpm"
-          : "npm";
-    const installArgs =
-      packageManager === "npm"
-        ? ["install"]
-        : packageManager === "pnpm"
-          ? ["install"]
-          : [];
-
-    await runCommand(installCommand, installArgs, projectPath);
-
-    console.log(chalk.green("✅ Dependencies installed successfully!"));
+    // Get the best available package manager
+    const availableManager = await getAvailablePackageManager(preferredManager);
+    const { command, args } = getInstallCommand(availableManager);
+
+    // Update config with actual package manager used
+    config.actualPackageManager = availableManager;
+
+    console.log(chalk.blue(`📥 Running: ${command} ${args.join(' ')}`));
+    await runCommand(command, args, projectPath);
+
+    console.log(chalk.green('✅ Dependencies installed successfully!'));
+
+    // Show different message if fallback was used
+    if (availableManager !== preferredManager) {
+      console.log(chalk.yellow(`ℹ️  Note: Used ${availableManager} instead of ${preferredManager}`));
+    }
+
   } catch (error) {
-    console.error(
-      chalk.red("❌ Failed to install dependencies:"),
-      error.message,
-    );
-    console.log(chalk.yellow("You can install them manually by running:"));
-    console.log(chalk.gray(`  cd ${config.projectName}`));
-    console.log(chalk.gray(`  ${packageManager} install`));
+    console.error(chalk.red('❌ Failed to install dependencies:'), error.message);
+    console.log(chalk.yellow('\n🔧 You can install them manually by running:'));
+    console.log(chalk.gray(`  cd ${projectName}`));
+
+    // Show command for the originally preferred package manager
+    if (preferredManager === 'yarn') {
+      console.log(chalk.gray(`  yarn install`));
+    } else if (preferredManager === 'pnpm') {
+      console.log(chalk.gray(`  pnpm install`));
+    } else {
+      console.log(chalk.gray(`  npm install`));
+    }
+
+    console.log(chalk.yellow('\n💡 Make sure you have the package manager installed:'));
+    if (preferredManager === 'yarn') {
+      console.log(chalk.gray(`  npm install -g yarn`));
+    } else if (preferredManager === 'pnpm') {
+      console.log(chalk.gray(`  npm install -g pnpm`));
+    }
   }
 }
 
-module.exports = { installDependencies, runCommand };
+module.exports = { installDependencies, runCommand };

package/lib/prompts.js

@@ -1,25 +1,24 @@
-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');
 
 async function createProject(projectName, options) {
   // Get project name if not provided
   if (!projectName) {
     const nameAnswer = await inquirer.prompt([
       {
-        type: "input",
-        name: "projectName",
-        message: "What is the name of your project?",
+        type: 'input',
+        name: 'projectName',
+        message: 'What is the name of your project?',
         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,15 +29,15 @@ async function createProject(projectName, options) {
   if (fs.existsSync(projectPath)) {
     const overwriteAnswer = await inquirer.prompt([
       {
-        type: "confirm",
-        name: "overwrite",
+        type: 'confirm',
+        name: 'overwrite',
         message: `Directory ${projectName} already exists. Do you want to overwrite it?`,
-        default: false,
-      },
+        default: false
+      }
     ]);
 
     if (!overwriteAnswer.overwrite) {
-      console.log(chalk.yellow("Operation cancelled."));
+      console.log(chalk.yellow('Operation cancelled.'));
       return;
     }
 
@@ -48,147 +47,139 @@ async function createProject(projectName, options) {
   // Package Manager Selection
   const packageManagerAnswer = await inquirer.prompt([
     {
-      type: "list",
-      name: "packageManager",
-      message: "Which package manager would you like to use?",
+      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" },
-      ],
-    },
+        { 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?",
+      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" },
-      ],
-    },
+        { 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?",
+      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" },
-      ],
-    },
+        { 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?",
+      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" },
-      ],
-    },
+        { 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?",
+      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" },
-      ],
-    },
+        { 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?",
+      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" },
-      ],
-    },
+        { 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([
     {
-      type: "checkbox",
-      name: "devTools",
-      message: "Which development tools would you like?",
+      type: 'checkbox',
+      name: 'devTools',
+      message: 'Which development tools would you like?',
       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" },
-      ],
-    },
+        { 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?",
+      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: 'Lucide React', value: 'lucide' },
+        { name: 'React Icons', value: 'react-icons' },
+        { name: 'Heroicons', value: 'heroicons' },
+        { name: 'No icon library', value: 'none' }
+      ]
+    }
   ]);
 
   // PWA Selection
   const pwaAnswer = await inquirer.prompt([
     {
-      type: "confirm",
-      name: "pwa",
-      message: "Make it a PWA?",
-      default: false,
-    },
+      type: 'confirm',
+      name: 'pwa',
+      message: 'Make it a PWA?',
+      default: false
+    }
   ]);
 
   // Git Selection
   const gitAnswer = await inquirer.prompt([
     {
-      type: "confirm",
-      name: "git",
-      message: "Initialize Git repository?",
-      default: true,
-    },
+      type: 'confirm',
+      name: 'git',
+      message: 'Initialize Git repository?',
+      default: true
+    }
   ]);
 
   const config = {
@@ -205,12 +196,10 @@ async function createProject(projectName, options) {
     pwa: pwaAnswer.pwa,
     git: gitAnswer.git,
     skipInstall: options.skipInstall,
-    skipGit: options.skipGit,
+    skipGit: options.skipGit
   };
 
-  console.log(
-    chalk.blue("\n📦 Creating project with the following configuration:"),
-  );
+  console.log(chalk.blue('\n📦 Creating project with the following configuration:'));
   console.log(chalk.gray(JSON.stringify(config, null, 2)));
 
   // Create project
@@ -221,15 +210,17 @@ async function createProject(projectName, options) {
     await installDependencies(config);
   }
 
-  console.log(
-    chalk.green.bold(`\n🎉 Project ${projectName} created successfully!`),
-  );
-  console.log(chalk.blue("\nNext steps:"));
+  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;
+
   if (options.skipInstall) {
-    console.log(chalk.gray(`  ${config.packageManager} install`));
+    console.log(chalk.gray(`  ${actualPackageManager} install`));
   }
-  console.log(chalk.gray(`  ${config.packageManager} dev`));
+  console.log(chalk.gray(`  ${actualPackageManager === 'npm' ? 'npm run dev' : actualPackageManager + ' dev'}`));
 }
 
-module.exports = { createProject };
+module.exports = { createProject };

package/lib/setup.js

@@ -1,18 +1,18 @@
-const fs = require("fs-extra");
-const path = require("path");
-const chalk = require("chalk");
-const { runCommand } = require("./install");
+const fs = require('fs-extra');
+const path = require('path');
+const chalk = require('chalk');
+const { runCommand } = require('./install');
 
 async function setupProject(config) {
   const { projectPath, projectName } = config;
 
-  console.log(chalk.blue("\n🏗️  Setting up project structure..."));
+  console.log(chalk.blue('\n🏗️  Setting up project structure...'));
 
   // Create project directory
   await fs.ensureDir(projectPath);
 
   // Copy base template
-  const templatePath = path.join(__dirname, "../templates/base");
+  const templatePath = path.join(__dirname, '../templates/base');
   await fs.copy(templatePath, projectPath);
 
   // Update package.json with project name and selected dependencies
@@ -26,11 +26,11 @@ async function setupProject(config) {
     await initializeGit(config);
   }
 
-  console.log(chalk.green("✅ Project structure created successfully!"));
+  console.log(chalk.green('✅ Project structure created successfully!'));
 }
 
 async function updatePackageJson(config) {
-  const packageJsonPath = path.join(config.projectPath, "package.json");
+  const packageJsonPath = path.join(config.projectPath, 'package.json');
   const packageJson = await fs.readJson(packageJsonPath);
 
   // Update name
@@ -41,89 +41,89 @@ async function updatePackageJson(config) {
   const devDependencies = { ...packageJson.devDependencies };
 
   // UI Library dependencies
-  if (config.uiLibrary === "antd") {
-    dependencies["antd"] = "^5.0.0";
-  } else if (config.uiLibrary === "mui") {
-    dependencies["@mui/material"] = "^5.0.0";
-    dependencies["@emotion/react"] = "^11.0.0";
-    dependencies["@emotion/styled"] = "^11.0.0";
-  } else if (config.uiLibrary === "chakra") {
-    dependencies["@chakra-ui/react"] = "^2.0.0";
-    dependencies["@emotion/react"] = "^11.0.0";
-    dependencies["@emotion/styled"] = "^11.0.0";
-    dependencies["framer-motion"] = "^6.0.0";
+  if (config.uiLibrary === 'antd') {
+    dependencies['antd'] = '^5.0.0';
+  } else if (config.uiLibrary === 'mui') {
+    dependencies['@mui/material'] = '^5.0.0';
+    dependencies['@emotion/react'] = '^11.0.0';
+    dependencies['@emotion/styled'] = '^11.0.0';
+  } else if (config.uiLibrary === 'chakra') {
+    dependencies['@chakra-ui/react'] = '^2.0.0';
+    dependencies['@emotion/react'] = '^11.0.0';
+    dependencies['@emotion/styled'] = '^11.0.0';
+    dependencies['framer-motion'] = '^6.0.0';
   }
 
   // CSS Framework dependencies
-  if (config.cssFramework === "tailwind") {
-    devDependencies["tailwindcss"] = "^3.0.0";
-    devDependencies["postcss"] = "^8.0.0";
-    devDependencies["autoprefixer"] = "^10.0.0";
-  } else if (config.cssFramework === "styled-components") {
-    dependencies["styled-components"] = "^6.0.0";
-    devDependencies["@types/styled-components"] = "^5.1.0";
+  if (config.cssFramework === 'tailwind') {
+    devDependencies['tailwindcss'] = '^3.0.0';
+    devDependencies['postcss'] = '^8.0.0';
+    devDependencies['autoprefixer'] = '^10.0.0';
+  } else if (config.cssFramework === 'styled-components') {
+    dependencies['styled-components'] = '^6.0.0';
+    devDependencies['@types/styled-components'] = '^5.1.0';
   }
 
   // State Management dependencies
-  if (config.stateManagement === "redux-toolkit") {
-    dependencies["@reduxjs/toolkit"] = "^2.0.0";
-    dependencies["react-redux"] = "^9.0.0";
-    dependencies["redux-persist"] = "^6.0.0";
-  } else if (config.stateManagement === "zustand") {
-    dependencies["zustand"] = "^4.0.0";
-  } else if (config.stateManagement === "jotai") {
-    dependencies["jotai"] = "^2.0.0";
+  if (config.stateManagement === 'redux-toolkit') {
+    dependencies['@reduxjs/toolkit'] = '^2.0.0';
+    dependencies['react-redux'] = '^9.0.0';
+    dependencies['redux-persist'] = '^6.0.0';
+  } else if (config.stateManagement === 'zustand') {
+    dependencies['zustand'] = '^4.0.0';
+  } else if (config.stateManagement === 'jotai') {
+    dependencies['jotai'] = '^2.0.0';
   }
 
   // Data Fetching dependencies
-  if (config.dataFetching === "react-query") {
-    dependencies["@tanstack/react-query"] = "^5.0.0";
-    dependencies["@tanstack/react-query-devtools"] = "^5.0.0";
-  } else if (config.dataFetching === "swr") {
-    dependencies["swr"] = "^2.0.0";
-  } else if (config.dataFetching === "apollo") {
-    dependencies["@apollo/client"] = "^3.0.0";
-    dependencies["graphql"] = "^16.0.0";
+  if (config.dataFetching === 'react-query') {
+    dependencies['@tanstack/react-query'] = '^5.0.0';
+    dependencies['@tanstack/react-query-devtools'] = '^5.0.0';
+  } else if (config.dataFetching === 'swr') {
+    dependencies['swr'] = '^2.0.0';
+  } else if (config.dataFetching === 'apollo') {
+    dependencies['@apollo/client'] = '^3.0.0';
+    dependencies['graphql'] = '^16.0.0';
   }
 
   // Routing dependencies
-  if (config.routing === "react-router") {
-    dependencies["react-router-dom"] = "^6.0.0";
-  } else if (config.routing === "wouter") {
-    dependencies["wouter"] = "^3.0.0";
+  if (config.routing === 'react-router') {
+    dependencies['react-router-dom'] = '^6.0.0';
+  } else if (config.routing === 'wouter') {
+    dependencies['wouter'] = '^3.0.0';
   }
 
   // Icon dependencies
-  if (config.icons === "lucide") {
-    dependencies["lucide-react"] = "^0.400.0";
-  } else if (config.icons === "react-icons") {
-    dependencies["react-icons"] = "^5.0.0";
-  } else if (config.icons === "heroicons") {
-    dependencies["@heroicons/react"] = "^2.0.0";
+  if (config.icons === 'lucide') {
+    dependencies['lucide-react'] = '^0.400.0';
+  } else if (config.icons === 'react-icons') {
+    dependencies['react-icons'] = '^5.0.0';
+  } else if (config.icons === 'heroicons') {
+    dependencies['@heroicons/react'] = '^2.0.0';
   }
 
   // Development Tools dependencies
-  if (config.devTools.includes("storybook")) {
-    devDependencies["@storybook/react-vite"] = "^8.0.0";
-    devDependencies["@storybook/addon-essentials"] = "^8.0.0";
-    devDependencies["storybook"] = "^8.0.0";
+  if (config.devTools.includes('storybook')) {
+    devDependencies['@storybook/react-vite'] = '^8.0.0';
+    devDependencies['@storybook/addon-essentials'] = '^8.0.0';
+    devDependencies['storybook'] = '^8.0.0';
   }
 
-  if (config.devTools.includes("testing")) {
-    devDependencies["jest"] = "^29.0.0";
-    devDependencies["@testing-library/react"] = "^14.0.0";
-    devDependencies["@testing-library/jest-dom"] = "^6.0.0";
-    devDependencies["@testing-library/user-event"] = "^14.0.0";
+  if (config.devTools.includes('testing')) {
+    devDependencies['jest'] = '^29.0.0';
+    devDependencies['@testing-library/react'] = '^14.0.0';
+    devDependencies['@testing-library/jest-dom'] = '^6.0.0';
+    devDependencies['@testing-library/user-event'] = '^14.0.0';
   }
 
-  if (config.devTools.includes("husky")) {
-    devDependencies["husky"] = "^9.0.0";
-    devDependencies["lint-staged"] = "^15.0.0";
+  if (config.devTools.includes('husky')) {
+    devDependencies['husky'] = '^9.0.0';
+    devDependencies['lint-staged'] = '^15.0.0';
   }
 
   // PWA dependencies
   if (config.pwa) {
-    devDependencies["vite-plugin-pwa"] = "^0.20.0";
+    devDependencies['vite-plugin-pwa'] = '^0.20.0';
   }
 
   packageJson.dependencies = dependencies;
@@ -136,7 +136,7 @@ async function configureLibraries(config) {
   const { projectPath } = config;
 
   // Configure Tailwind if selected
-  if (config.cssFramework === "tailwind") {
+  if (config.cssFramework === 'tailwind') {
     await configureTailwind(projectPath);
   }
 
@@ -167,17 +167,11 @@ export default {
   },
 }`;
 
-  await fs.writeFile(
-    path.join(projectPath, "tailwind.config.js"),
-    tailwindConfig,
-  );
-  await fs.writeFile(
-    path.join(projectPath, "postcss.config.js"),
-    postcssConfig,
-  );
+  await fs.writeFile(path.join(projectPath, 'tailwind.config.js'), tailwindConfig);
+  await fs.writeFile(path.join(projectPath, 'postcss.config.js'), postcssConfig);
 
   // Add Tailwind directives to CSS
-  const cssPath = path.join(projectPath, "src/index.css");
+  const cssPath = path.join(projectPath, 'src/index.css');
   const tailwindDirectives = `@tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -185,7 +179,7 @@ export default {
 `;
 
   if (await fs.pathExists(cssPath)) {
-    const existingCss = await fs.readFile(cssPath, "utf8");
+    const existingCss = await fs.readFile(cssPath, 'utf8');
     await fs.writeFile(cssPath, tailwindDirectives + existingCss);
   } else {
     await fs.writeFile(cssPath, tailwindDirectives);
@@ -206,23 +200,16 @@ async function initializeGit(config) {
   const { projectPath } = config;
 
   try {
-    console.log(chalk.blue("🔧 Initializing Git repository..."));
+    console.log(chalk.blue('🔧 Initializing Git repository...'));
 
-    await runCommand("git", ["init"], projectPath);
-    await runCommand("git", ["add", "."], projectPath);
-    await runCommand(
-      "git",
-      ["commit", "-m", "Initial commit from create-modern-react"],
-      projectPath,
-    );
+    await runCommand('git', ['init'], projectPath);
+    await runCommand('git', ['add', '.'], projectPath);
+    await runCommand('git', ['commit', '-m', 'Initial commit from create-modern-react'], projectPath);
 
-    console.log(chalk.green("✅ Git repository initialized!"));
+    console.log(chalk.green('✅ Git repository initialized!'));
   } catch (error) {
-    console.warn(
-      chalk.yellow("⚠️  Could not initialize Git repository:"),
-      error.message,
-    );
+    console.warn(chalk.yellow('⚠️  Could not initialize Git repository:'), error.message);
   }
 }
 
-module.exports = { setupProject };
+module.exports = { setupProject };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-modern-react",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Create a modern React application with Vite, TypeScript, and your choice of modern libraries",
   "main": "bin/index.js",
   "bin": {

package/templates/base/index.html

@@ -10,4 +10,4 @@
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
-</html>
+</html>

package/templates/base/package.json

@@ -25,4 +25,4 @@
     "typescript": "^5.2.2",
     "vite": "^5.2.0"
   }
-}
+}

package/templates/base/src/App.css

@@ -11,4 +11,4 @@
 
 .read-the-docs {
   color: #888;
-}
+}

package/templates/base/src/App.tsx

@@ -1,8 +1,8 @@
-import { useState } from "react";
-import "./App.css";
+import { useState } from 'react'
+import './App.css'
 
 function App() {
-  const [count, setCount] = useState(0);
+  const [count, setCount] = useState(0)
 
   return (
     <div className="App">
@@ -16,10 +16,12 @@ function App() {
             Edit <code>src/App.tsx</code> and save to test HMR
           </p>
         </div>
-        <p className="read-the-docs">Click on the React logo to learn more</p>
+        <p className="read-the-docs">
+          Click on the React logo to learn more
+        </p>
       </div>
     </div>
-  );
+  )
 }
 
-export default App;
+export default App

package/templates/base/src/index.css

@@ -67,4 +67,4 @@ button:focus-visible {
   button {
     background-color: #f9f9f9;
   }
-}
+}

package/templates/base/src/main.tsx

@@ -1,10 +1,10 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import App from "./App.tsx";
-import "./index.css";
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.tsx'
+import './index.css'
 
-ReactDOM.createRoot(document.getElementById("root")!).render(
+ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-);
+)

package/templates/base/tsconfig.json

@@ -28,4 +28,4 @@
   },
   "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]
-}
+}

package/templates/base/vite.config.ts

@@ -1,12 +1,12 @@
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
   resolve: {
     alias: {
-      "~": "/src",
-    },
-  },
-});
+      '~': '/src'
+    }
+  }
+})