@nishant0121/set-it-up 0.0.7 → 0.0.9

package/DESCRIPTION.md

@@ -0,0 +1,64 @@
+# @nishant0121/set-it-up: The Ultimate Project Scaffolding CLI
+
+## Overview
+
+**Set It Up** is a powerful, developer-centric CLI tool engineered to eliminate the repetitive boilerplate work associated with starting new React and React Native projects. It bridges the gap between "Hello World" and a production-ready architecture.
+
+Unlike standard create scripts that give you a bare-bones entry point, `set-it-up` (via its command `forge`) constructs a robust, scalable foundation tailored to your preferences (TypeScript/JavaScript, Styling, Routing, etc.).
+
+## Why Use This?
+
+Starting a modern frontend project often involves 30-60 minutes of configuration:
+- Setting up tailwind.
+- configuring the router.
+- creating folder structures (`pages`, `components`, `context`).
+- installing navigation libraries for mobile.
+- handling safe area contexts.
+
+**Set It Up** does this in seconds.
+
+## Key Capabilities
+
+### 1. Interactive "Forge" Wizard
+The `forge` command launches an intuitive,inquirer-based terminal wizard that asks you exactly what you need. No complex flags to remember—just answer the questions, and the CLI handles the rest.
+
+### 2. React (Web) Excellence
+- **Vite-Powered:** Uses the fastest build tool in the ecosystem.
+- **Tailwind CSS v4:** Automatically configured with the latest version using the Vite plugin.
+- **Shadcn UI Integration:** The only CLI that can set up Shadcn UI and automatically transpile its TypeScript components to JavaScript if you prefer a JS-only project.
+- **Auto-configured Path Aliases:** Pre-sets `@/` aliases in Vite and TS/JS configs for cleaner imports.
+- **Structure:** Automatically creates `src/pages`, `src/components`, and `src/layouts`.
+- **Router Ready:** Installs `react-router-dom` and sets up a default routing configuration with a Layout and Navbar.
+- **State & Theme:** Optional `AppContext` boilerplating for global state and dark-mode ready theme management.
+
+### 3. React Native (Mobile) Mastery
+- **Modular Architecture:** Moves away from the monolithic `App.tsx` pattern. It generates a clean separation of concerns:
+  - `src/pages/` (Screens)
+  - `src/components/` (Reusable UI)
+- **Navigation Pre-baked:** Installs and configures React Navigation (Native Stack).
+- **Auto-configured Path Aliases:** Ready-to-use path resolution for cleaner codebase management.
+- **Safe Area Handling:** Implements `react-native-safe-area-context` with `SafeAreaProvider` wrapping the app and `SafeAreaView` in screens.
+- **Polished Templates:** The generated starter screens (`HomeScreen`, `DetailsScreen`) are not blank white pages. They feature modern design, cards, shadows, and proper typography, giving you a beautiful starting point.
+
+### 4. Smart & Safe
+- **Prerequisite Checking:** Scans your environment for Node.js, Git, and other tools before starting to prevent mid-install failures.
+- **Package Manager Agnostic:** Works seamlessly with `npm`, `yarn`, and `pnpm`.
+- **Lightning Fast Conversion:** Uses `esbuild` for instant TypeScript to JavaScript transpilation when bridging Shadcn UI into JS projects.
+
+## Technology Stack
+
+- **CLI Engine:** Node.js, Commander, Inquirer, Ora (spinners), Chalk (styling), Boxen, Gradient-String.
+- **Automation:** Execa (process execution), FS-Extra (file system), Esbuild (fast transpilation).
+- **Templates:** React (Vite), React Native (CLI), Tailwind CSS v4, React Navigation, React Router DOM.
+
+## Roadmap (Coming Soon)
+- **Next.js Support:** Full App Router scaffolding with advanced features.
+- **Custom GitHub Templates:** Forge projects from your own private or public repositories.
+- **Backend Forging:** Express.js and FastAPI starter templates.
+
+## Get Started
+
+```bash
+npm install -g @nishant0121/set-it-up
+forge
+```

package/README.md

@@ -1,75 +1,75 @@
-# set-it-up
-
-set-it-up is a high-performance CLI tool designed to bootstrap and forge new projects with pre-configured templates, prerequisite checking, and interactive setup.
-
-## Features
-
-- Interactive Wizard: Professional terminal interface to guide you through project configuration.
-- Prerequisite Checks: Automatically verifies necessary tools (Node.js, Git, etc.) are installed before starting.
-- React Support (Vite):
-  - Fast project scaffolding using Vite.
-  - Automated Tailwind CSS v4 setup.
-  - Standardized project structure (src/pages, src/components).
-  - Integrated Layout and Navbar with React Router DOM support.
-  - Optional Shadcn UI initialization and component addition.
-  - Global AppContext setup for state management.
-  - Automatic TypeScript to JavaScript conversion for Shadcn UI if JS is selected.
-- React Native Support:
-  - Rapid initialization with @react-native-community/cli.
-  - Full support for both TypeScript and JavaScript.
-  - Automated React Navigation integration with boilerplate code.
-- Smart Defaults: Supports npm, yarn, and pnpm based on user preference.
-
-## Installation
-
-To use set-it-up globally on your system:
-
-```bash
-npm install -g @nishant0121/set-it-up
-```
-
-Using npx:
-
-```bash
-npx @nishant0121/set-it-up
-```
-
-## Usage
-
-Run the tool in your terminal:
-
-```bash
-forge
-```
-
-Follow the prompts to:
-
-1. Select your project type (React or React Native).
-2. Provide a project name.
-3. Choose your preferred package manager.
-4. Select language (TypeScript or JavaScript).
-5. Configure additional features (Shadcn UI, Router, Context, Navigation).
-
-### Example Workflow
-
-```text
-SET-IT-UP
-
-Hi there! Let's configure your new project.
-
-? What do you want to build today? React
-? Enter your project name: my-web-app
-? Select your preferred package manager: npm
-? Which language do you want to use? TypeScript
-? Would you like to setup Shadcn UI? Yes
-? Would you like to add React Router DOM? Yes
-? Would you like to setup a global AppContext? Yes
-```
-
-## Contributing
-
-Contributions are welcome. Please open an issue or submit a pull request for improvements.
-
-## License
-
-ISC
+# set-it-up
+
+set-it-up is a high-performance CLI tool designed to bootstrap and forge new projects with pre-configured templates, prerequisite checking, and interactive setup.
+
+## Features
+
+- Interactive Wizard: Professional terminal interface to guide you through project configuration.
+- Prerequisite Checks: Automatically verifies necessary tools (Node.js, Git, etc.) are installed before starting.
+- React Support (Vite):
+  - Fast project scaffolding using Vite.
+  - Automated Tailwind CSS v4 setup.
+  - Standardized project structure (src/pages, src/components).
+  - Integrated Layout and Navbar with React Router DOM support.
+  - Optional Shadcn UI initialization and component addition.
+  - Global AppContext setup for state management.
+  - Automatic TypeScript to JavaScript conversion for Shadcn UI if JS is selected.
+- React Native Support:
+  - Rapid initialization with @react-native-community/cli.
+  - Full support for both TypeScript and JavaScript.
+  - Automated React Navigation integration with boilerplate code.
+- Smart Defaults: Supports npm, yarn, and pnpm based on user preference.
+
+## Installation
+
+To use set-it-up globally on your system:
+
+```bash
+npm install -g @nishant0121/set-it-up
+```
+
+Using npx:
+
+```bash
+npx @nishant0121/set-it-up
+```
+
+## Usage
+
+Run the tool in your terminal:
+
+```bash
+forge
+```
+
+Follow the prompts to:
+
+1. Select your project type (React or React Native).
+2. Provide a project name.
+3. Choose your preferred package manager.
+4. Select language (TypeScript or JavaScript).
+5. Configure additional features (Shadcn UI, Router, Context, Navigation).
+
+### Example Workflow
+
+```text
+SET-IT-UP
+
+Hi there! Let's configure your new project.
+
+? What do you want to build today? React
+? Enter your project name: my-web-app
+? Select your preferred package manager: npm
+? Which language do you want to use? TypeScript
+? Would you like to setup Shadcn UI? Yes
+? Would you like to add React Router DOM? Yes
+? Would you like to setup a global AppContext? Yes
+```
+
+## Contributing
+
+Contributions are welcome. Please open an issue or submit a pull request for improvements.
+
+## License
+
+ISC

package/bin/index.js

@@ -1,23 +1,23 @@
 #!/usr/bin/env node
-
-import { program } from 'commander';
-import { mainWizard } from '../src/wizard.js';
-
-program
-  .version('1.0.0')
-  .description('A powerful CLI to forge new projects')
-  .action(async () => {
-    try {
-      await mainWizard();
-    } catch (error) {
-      if (error.name === 'ExitPromptError' || error.message.includes('User force closed the prompt')) {
-        console.log('\n👋 Goodbye!');
-        process.exit(0);
-      } else {
-        console.error(error);
-        process.exit(1);
-      }
-    }
-  });
-
-program.parse(process.argv);
+
+import { program } from 'commander';
+import { mainWizard } from '../src/wizard.js';
+
+program
+  .version('1.0.0')
+  .description('A powerful CLI to forge new projects')
+  .action(async () => {
+    try {
+      await mainWizard();
+    } catch (error) {
+      if (error.name === 'ExitPromptError' || error.message.includes('User force closed the prompt')) {
+        console.log('\n👋 Goodbye!');
+        process.exit(0);
+      } else {
+        console.error(error);
+        process.exit(1);
+      }
+    }
+  });
+
+program.parse(process.argv);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nishant0121/set-it-up",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "description": "A high-performance CLI tool to bootstrap and forge new projects with pre-configured templates, prerequisite checking, and interactive setup.",
   "license": "ISC",
   "author": "Nishant Patil",
@@ -17,6 +17,7 @@
     "chalk": "^5.6.2",
     "command-exists": "^1.2.9",
     "commander": "^14.0.2",
+    "esbuild": "^0.27.2",
     "execa": "^9.6.1",
     "fs-extra": "^11.3.3",
     "gradient-string": "^3.0.0",

package/src/engines/react.js

@@ -1,210 +1,279 @@
-import { execa } from 'execa';
-import ora from 'ora';
-import chalk from 'chalk';
-import fs from 'fs-extra';
-import path from 'path';
-
-// Import templates
-import { getNavbar, getLayout } from '../templates/react/components.js';
-import { getHome, getAbout } from '../templates/react/pages.js';
-import { getApp, getAppContext, getViteConfig } from '../templates/react/main.js';
-
-export async function setupReact(answers, reactAnswers) {
-  const spinner = ora('Initializing React project with Vite...').start();
-  try {
-    const { projectName, packageManager } = answers;
-    const isTypescript = reactAnswers.language === 'TypeScript';
-    // Force TypeScript template if Shadcn is selected, otherwise use user choice
-    const template = (isTypescript || reactAnswers.addShadcn) ? 'react-ts' : 'react';
-
-    // 1. Scaffold with Vite
-    await execa('npm', ['create', 'vite@latest', projectName, '--', '--template', template]);
-
-    spinner.text = 'Installing dependencies...';
-    // 2. Install Dependencies
-    await execa(packageManager, ['install'], { cwd: projectName });
-    
-    // Install Node types for path resolution if TypeScript OR if we forced TS for Shadcn
-    if (isTypescript || reactAnswers.addShadcn) {
-        await execa(packageManager, [packageManager === 'npm' ? 'install' : 'add', '-D', '@types/node'], { cwd: projectName });
-    }
-
-    spinner.text = 'Setting up Tailwind CSS v4...';
-    // 3. Install Tailwind CSS & Vite Plugin
-    const installCmd = packageManager === 'npm' ? 'install' : 'add';
-    await execa(packageManager, [installCmd, 'tailwindcss', '@tailwindcss/vite'], { cwd: projectName });  
-
-    // 4. Configure TSConfig for aliases (if TypeScript OR Shadcn forced TS)
-    if (isTypescript || reactAnswers.addShadcn) {
-        const tsConfigPath = path.join(projectName, 'tsconfig.json');
-        const tsConfigAppPath = path.join(projectName, 'tsconfig.app.json');
-
-        const readJsonSafe = async (filePath) => {
-            const content = await fs.readFile(filePath, 'utf8');
-            // Simple regex to strip comments (// and /* */)
-            const jsonContent = content.replace(/\/\/.*$/gm, '').replace(/\/\*[\s\S]*?\*\//g, '');        
-            return JSON.parse(jsonContent);
-        };
-
-        // Update tsconfig.json
-        if (await fs.pathExists(tsConfigPath)) {
-            try {
-                const tsConfig = await readJsonSafe(tsConfigPath);
-                tsConfig.compilerOptions = tsConfig.compilerOptions || {};
-                tsConfig.compilerOptions.baseUrl = ".";
-                tsConfig.compilerOptions.paths = tsConfig.compilerOptions.paths || {};
-                tsConfig.compilerOptions.paths["@/*"] = ["./src/*"];
-
-                await fs.writeJson(tsConfigPath, tsConfig, { spaces: 2 });
-            } catch (e) {
-                console.warn('Could not update tsconfig.json automatically. Please add baseUrl and paths manually.');
-            }
-        }
-
-        // Update tsconfig.app.json
-        if (await fs.pathExists(tsConfigAppPath)) {
-            try {
-                const tsConfigApp = await readJsonSafe(tsConfigAppPath);
-                tsConfigApp.compilerOptions = tsConfigApp.compilerOptions || {};
-                tsConfigApp.compilerOptions.baseUrl = ".";
-                tsConfigApp.compilerOptions.paths = tsConfigApp.compilerOptions.paths || {};
-                tsConfigApp.compilerOptions.paths["@/*"] = ["./src/*"];
-
-                await fs.writeJson(tsConfigAppPath, tsConfigApp, { spaces: 2 });
-            } catch (e) {
-                console.warn('Could not update tsconfig.app.json automatically.');
-            }
-        }
-    }
-
-    // 5. Configure Vite (vite.config.js/ts)
-    const viteConfigContent = getViteConfig();
-    const viteConfigPath = path.join(projectName, (isTypescript || reactAnswers.addShadcn) ? 'vite.config.ts' : 'vite.config.js');
-    await fs.writeFile(viteConfigPath, viteConfigContent);
-
-    // 6. Configure CSS (src/index.css)
-    const indexCssPath = path.join(projectName, 'src', 'index.css');
-    await fs.writeFile(indexCssPath, '@import "tailwindcss";');
-
-    // Handle Optional Features
-    if (reactAnswers.addShadcn) {
-      spinner.stop();
-      console.log(chalk.blue('\n🎨 Initializing Shadcn UI...'));
-
-      try {
-          await execa('npx', ['shadcn@latest', 'init', '-d'], {
-              cwd: projectName,
-              stdio: 'inherit'
-          });
-
-          console.log(chalk.green('✔ Shadcn UI initialized.'));
-
-          // Add a button component as requested
-          console.log(chalk.blue('Adding Button component...'));
-          await execa('npx', ['shadcn@latest', 'add', 'button', '-y'], {
-            cwd: projectName,
-            stdio: 'inherit'
-          });
-
-      } catch (e) {
-          console.warn(chalk.yellow('⚠ Shadcn UI setup encountered an issue. You might need to run "npx shadcn@latest init" manually.'));
-      }
-      
-      spinner.start();
-    }
-
-    if (reactAnswers.addRouter) {
-      spinner.text = 'Installing React Router DOM...';
-      await execa(packageManager, [installCmd, 'react-router-dom'], { cwd: projectName });
-    }
-
-    if (reactAnswers.addContext) {
-      spinner.text = 'Creating AppContext...';
-      const contextDir = path.join(projectName, 'src', 'context');
-      await fs.ensureDir(contextDir);
-      
-      const contextFile = (isTypescript || reactAnswers.addShadcn) ? 'AppContext.tsx' : 'AppContext.jsx'; 
-      const contextContent = getAppContext({ isTypescript, addShadcn: reactAnswers.addShadcn });
-      await fs.writeFile(path.join(contextDir, contextFile), contextContent);
-    }
-
-    // Rewrite App.jsx/tsx and create structure
-    spinner.text = 'Generating Project Structure...';
-    await generateProjectStructure(projectName, (isTypescript || reactAnswers.addShadcn), reactAnswers);
-
-    // FINAL STEP: Downgrade to JS if requested but forced to TS
-    if (!isTypescript && reactAnswers.addShadcn) {
-        spinner.text = 'Converting to JavaScript...';
-        await convertToJs(projectName);
-    }
-
-    spinner.succeed(chalk.green(`Project ${projectName} created successfully! 🚀`));
-    console.log(chalk.cyan(`
-To get started:
-  cd ${projectName}
-  ${packageManager} run dev`));
-
-  } catch (error) {
-    spinner.fail('Setup failed.');
-    console.error(error);
-  }
-}
-
-async function generateProjectStructure(projectName, isTypescript, answers) {
-  const ext = isTypescript ? 'tsx' : 'jsx';
-  const componentsDir = path.join(projectName, 'src', 'components');
-  const pagesDir = path.join(projectName, 'src', 'pages');
-  
-  await fs.ensureDir(componentsDir);
-  await fs.ensureDir(pagesDir);
-
-  // 1. Create Navbar
-  const navbarContent = getNavbar(answers);
-  await fs.writeFile(path.join(componentsDir, `Navbar.${ext}`), navbarContent);
-
-  // 2. Create Layout (with Outlet)
-  const layoutContent = getLayout(answers);
-  await fs.writeFile(path.join(componentsDir, `Layout.${ext}`), layoutContent);
-
-  // 3. Create Pages (Home & About)
-  const homeContent = getHome(answers);
-  await fs.writeFile(path.join(pagesDir, `Home.${ext}`), homeContent);
-
-  const aboutContent = getAbout();
-  await fs.writeFile(path.join(pagesDir, `About.${ext}`), aboutContent);
-
-  // 4. Update App.jsx/tsx
-  const finalAppContent = getApp(answers);
-  await fs.writeFile(path.join(projectName, 'src', `App.${ext}`), finalAppContent);
-}
-
-async function convertToJs(projectName) {
-    const srcDir = path.join(projectName, 'src');
-    
-    // Recursive function to rename .tsx -> .jsx and .ts -> .js
-    async function renameFiles(dir) {
-        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()) {
-                await renameFiles(fullPath);
-            } else {
-                if (item.endsWith('.tsx')) {
-                    await fs.rename(fullPath, fullPath.replace('.tsx', '.jsx'));
-                } else if (item.endsWith('.ts') && !item.endsWith('.d.ts') && item !== 'vite.config.ts') {
-                     // Careful not to rename config files if they are in root (this is in src)
-                     await fs.rename(fullPath, fullPath.replace('.ts', '.js'));
-                }
-            }
-        }
-    }
-
-    await renameFiles(srcDir);
-    
-    // Also rename root files if necessary
-    const mainTsx = path.join(projectName, 'src', 'main.tsx'); // Standard Vite entry
-    const mainJsx = path.join(projectName, 'src', 'main.jsx');
-    if (await fs.pathExists(mainTsx)) await fs.rename(mainTsx, mainJsx);
-}
+import { execa } from 'execa';
+import ora from 'ora';
+import chalk from 'chalk';
+import fs from 'fs-extra';
+import path from 'path';
+
+// Import templates
+import { getNavbar, getLayout } from '../templates/react/components.js';
+import { getHome, getAbout } from '../templates/react/pages.js';
+import { getApp, getAppContext, getViteConfig } from '../templates/react/main.js';
+
+export async function setupReact(answers, reactAnswers) {
+  const spinner = ora('Initializing React project with Vite...').start();
+  try {
+    const { projectName, packageManager } = answers;
+    const isTypescript = reactAnswers.language === 'TypeScript';
+    // Force TypeScript template if Shadcn is selected, otherwise use user choice
+    const template = (isTypescript || reactAnswers.addShadcn) ? 'react-ts' : 'react';
+
+    // 1. Scaffold with Vite
+    await execa('npm', ['create', 'vite@latest', projectName, '--', '--template', template]);
+
+    spinner.text = 'Installing dependencies...';
+    // 2. Install Dependencies
+    await execa(packageManager, ['install'], { cwd: projectName });
+    
+    // Install Node types for path resolution if TypeScript OR if we forced TS for Shadcn
+    if (isTypescript || reactAnswers.addShadcn) {
+        await execa(packageManager, [packageManager === 'npm' ? 'install' : 'add', '-D', '@types/node'], { cwd: projectName });
+    }
+
+    spinner.text = 'Setting up Tailwind CSS v4...';
+    // 3. Install Tailwind CSS & Vite Plugin
+    const installCmd = packageManager === 'npm' ? 'install' : 'add';
+    await execa(packageManager, [installCmd, 'tailwindcss', '@tailwindcss/vite'], { cwd: projectName });  
+
+    // 4. Configure TSConfig for aliases (if TypeScript OR Shadcn forced TS)
+    if (isTypescript || reactAnswers.addShadcn) {
+        const tsConfigPath = path.join(projectName, 'tsconfig.json');
+        const tsConfigAppPath = path.join(projectName, 'tsconfig.app.json');
+
+        const readJsonSafe = async (filePath) => {
+            const content = await fs.readFile(filePath, 'utf8');
+            // Simple regex to strip comments (// and /* */)
+            const jsonContent = content.replace(/\/\/.*$/gm, '').replace(/\/\*[\s\S]*?\*\//g, '');        
+            return JSON.parse(jsonContent);
+        };
+
+        // Update tsconfig.json
+        if (await fs.pathExists(tsConfigPath)) {
+            try {
+                const tsConfig = await readJsonSafe(tsConfigPath);
+                tsConfig.compilerOptions = tsConfig.compilerOptions || {};
+                tsConfig.compilerOptions.baseUrl = ".";
+                tsConfig.compilerOptions.paths = tsConfig.compilerOptions.paths || {};
+                tsConfig.compilerOptions.paths["@/*"] = ["./src/*"];
+
+                await fs.writeJson(tsConfigPath, tsConfig, { spaces: 2 });
+            } catch (e) {
+                console.warn('Could not update tsconfig.json automatically. Please add baseUrl and paths manually.');
+            }
+        }
+
+        // Update tsconfig.app.json
+        if (await fs.pathExists(tsConfigAppPath)) {
+            try {
+                const tsConfigApp = await readJsonSafe(tsConfigAppPath);
+                tsConfigApp.compilerOptions = tsConfigApp.compilerOptions || {};
+                tsConfigApp.compilerOptions.baseUrl = ".";
+                tsConfigApp.compilerOptions.paths = tsConfigApp.compilerOptions.paths || {};
+                tsConfigApp.compilerOptions.paths["@/*"] = ["./src/*"];
+
+                await fs.writeJson(tsConfigAppPath, tsConfigApp, { spaces: 2 });
+            } catch (e) {
+                console.warn('Could not update tsconfig.app.json automatically.');
+            }
+        }
+    }
+
+    // 5. Configure Vite (vite.config.js/ts)
+    const viteConfigContent = getViteConfig();
+    const viteConfigPath = path.join(projectName, (isTypescript || reactAnswers.addShadcn) ? 'vite.config.ts' : 'vite.config.js');
+    await fs.writeFile(viteConfigPath, viteConfigContent);
+
+    // 6. Configure CSS (src/index.css)
+    const indexCssPath = path.join(projectName, 'src', 'index.css');
+    await fs.writeFile(indexCssPath, '@import "tailwindcss";');
+
+    // Handle Optional Features
+    if (reactAnswers.addShadcn) {
+      spinner.stop();
+      console.log(chalk.blue('\n🎨 Initializing Shadcn UI...'));
+
+      try {
+          await execa('npx', ['shadcn@latest', 'init', '-d'], {
+              cwd: projectName,
+              stdio: 'inherit'
+          });
+
+          console.log(chalk.green('✔ Shadcn UI initialized.'));
+
+          // Add a button component as requested
+          console.log(chalk.blue('Adding Button component...'));
+          await execa('npx', ['shadcn@latest', 'add', 'button', '-y'], {
+            cwd: projectName,
+            stdio: 'inherit'
+          });
+
+      } catch (e) {
+          console.warn(chalk.yellow('⚠ Shadcn UI setup encountered an issue. You might need to run "npx shadcn@latest init" manually.'));
+      }
+      
+      spinner.start();
+    }
+
+    if (reactAnswers.addRouter) {
+      spinner.text = 'Installing React Router DOM...';
+      await execa(packageManager, [installCmd, 'react-router-dom'], { cwd: projectName });
+    }
+
+    if (reactAnswers.addContext) {
+      spinner.text = 'Creating AppContext...';
+      const contextDir = path.join(projectName, 'src', 'context');
+      await fs.ensureDir(contextDir);
+      
+      const contextFile = (isTypescript || reactAnswers.addShadcn) ? 'AppContext.tsx' : 'AppContext.jsx'; 
+      const contextContent = getAppContext({ isTypescript, addShadcn: reactAnswers.addShadcn });
+      await fs.writeFile(path.join(contextDir, contextFile), contextContent);
+    }
+
+    // Rewrite App.jsx/tsx and create structure
+    spinner.text = 'Generating Project Structure...';
+    await generateProjectStructure(projectName, isTypescript, reactAnswers);
+
+    // FINAL STEP: Downgrade to JS if requested but forced to TS
+    if (!isTypescript && reactAnswers.addShadcn) {
+        spinner.text = 'Converting to JavaScript...';
+        await convertToJs(projectName);
+    }
+
+    spinner.succeed(chalk.green(`Project ${projectName} created successfully! 🚀`));
+    console.log(chalk.cyan(`
+To get started:
+  cd ${projectName}
+  ${packageManager} run dev`));
+
+  } catch (error) {
+    spinner.fail('Setup failed.');
+    console.error(error);
+  }
+}
+
+async function generateProjectStructure(projectName, isTypescript, answers) {
+  const ext = isTypescript ? 'tsx' : 'jsx';
+  const componentsDir = path.join(projectName, 'src', 'components');
+  const pagesDir = path.join(projectName, 'src', 'pages');
+  
+  await fs.ensureDir(componentsDir);
+  await fs.ensureDir(pagesDir);
+
+  // 1. Create Navbar
+  const navbarContent = getNavbar(answers);
+  await fs.writeFile(path.join(componentsDir, `Navbar.${ext}`), navbarContent);
+
+  // 2. Create Layout (with Outlet)
+  const layoutContent = getLayout(answers);
+  await fs.writeFile(path.join(componentsDir, `Layout.${ext}`), layoutContent);
+
+  // 3. Create Pages (Home & About)
+  const homeContent = getHome(answers);
+  await fs.writeFile(path.join(pagesDir, `Home.${ext}`), homeContent);
+
+  const aboutContent = getAbout();
+  await fs.writeFile(path.join(pagesDir, `About.${ext}`), aboutContent);
+
+  // 4. Update App.jsx/tsx
+  const finalAppContent = getApp(answers);
+  await fs.writeFile(path.join(projectName, 'src', `App.${ext}`), finalAppContent);
+}
+
+async function convertToJs(projectName) {
+    const srcDir = path.join(projectName, 'src');
+    
+    // 1. Handle main.tsx -> main.jsx
+    const mainTsx = path.join(srcDir, 'main.tsx');
+    const mainJsx = path.join(srcDir, 'main.jsx');
+    
+    if (await fs.pathExists(mainTsx)) {
+        try {
+            await execa('npx', [
+                'esbuild', 
+                mainTsx, 
+                '--jsx=preserve', 
+                `--outfile=${mainJsx}`,
+                '--format=esm'
+            ], { cwd: process.cwd() });
+            await fs.remove(mainTsx);
+
+            // Fix imports in main.jsx (esbuild preserves local imports)
+            let mainContent = await fs.readFile(mainJsx, 'utf8');
+            mainContent = mainContent.replace(/from\s+['"]\.\/App\.tsx['"]/g, 'from "./App"');
+            await fs.writeFile(mainJsx, mainContent);
+
+        } catch (e) {
+            console.warn(`Failed to convert main.tsx: ${e.message}`);
+        }
+    }
+
+    // 2. Handle App.tsx (Delete if App.jsx exists, otherwise convert)
+    const appTsx = path.join(srcDir, 'App.tsx');
+    const appJsx = path.join(srcDir, 'App.jsx');
+
+    if (await fs.pathExists(appTsx)) {
+        if (await fs.pathExists(appJsx)) {
+            // We generated a custom App.jsx, so the default App.tsx is garbage.
+            await fs.remove(appTsx);
+        } else {
+            // Fallback: convert App.tsx if we didn't generate App.jsx
+            try {
+                await execa('npx', [
+                    'esbuild', 
+                    appTsx, 
+                    '--jsx=preserve', 
+                    `--outfile=${appJsx}`,
+                    '--format=esm'
+                ], { cwd: process.cwd() });
+                await fs.remove(appTsx);
+            } catch (e) {
+                console.warn(`Failed to convert App.tsx: ${e.message}`);
+            }
+        }
+    }
+
+    // 3. Remove vite-env.d.ts
+    const viteEnv = path.join(srcDir, 'vite-env.d.ts');
+    if (await fs.pathExists(viteEnv)) {
+        await fs.remove(viteEnv);
+    }
+
+    // 4. Handle vite.config.ts -> vite.config.js
+    const viteConfigTs = path.join(projectName, 'vite.config.ts');
+    const viteConfigJs = path.join(projectName, 'vite.config.js');
+    
+    if (await fs.pathExists(viteConfigTs)) {
+         try {
+            await execa('npx', [
+                'esbuild', 
+                viteConfigTs, 
+                `--outfile=${viteConfigJs}`,
+                '--format=esm'
+            ], { cwd: process.cwd() });
+            await fs.remove(viteConfigTs);
+         } catch (e) {
+             console.warn(`Failed to convert vite.config.ts: ${e.message}`);
+         }
+    }
+
+    // Update index.html to reference main.jsx
+    const indexHtmlPath = path.join(projectName, 'index.html');
+    if (await fs.pathExists(indexHtmlPath)) {
+        let indexHtml = await fs.readFile(indexHtmlPath, 'utf8');
+        indexHtml = indexHtml.replace('/src/main.tsx', '/src/main.jsx');
+        await fs.writeFile(indexHtmlPath, indexHtml);
+    }
+
+    // Clean up TS configs and create jsconfig.json
+    await fs.remove(path.join(projectName, 'tsconfig.json'));
+    await fs.remove(path.join(projectName, 'tsconfig.app.json'));
+    await fs.remove(path.join(projectName, 'tsconfig.node.json'));
+
+    const jsConfig = {
+        "compilerOptions": {
+            "paths": {
+                "@/*": ["./src/*"]
+            }
+        }
+    };
+    await fs.writeJson(path.join(projectName, 'jsconfig.json'), jsConfig, { spaces: 2 });
+}

package/src/engines/reactNative.js

@@ -1,78 +1,78 @@
-import { execa } from 'execa';
-import ora from 'ora';
-import chalk from 'chalk';
-import fs from 'fs-extra';
-import path from 'path';
-import { fileURLToPath } from 'url';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-export async function setupReactNative(answers, rnAnswers) {
-  const spinner = ora('Initializing React Native project...').start();
-  try {
-    const { projectName, packageManager } = answers;
-    const isTypescript = rnAnswers.language === 'TypeScript';
-    
-    // Basic init command using the community CLI for latest version
-    const args = ['--yes', '@react-native-community/cli@latest', 'init', projectName, '--skip-install'];
-    
-    await execa('npx', args);
-
-    // Handle language selection (rename App.tsx to App.jsx if JS is selected)
-    const appTsxPath = path.join(projectName, 'App.tsx');
-    const appJsxPath = path.join(projectName, 'App.jsx');
-    
-    if (!isTypescript && await fs.pathExists(appTsxPath)) {
-        await fs.rename(appTsxPath, appJsxPath);
-    }
-
-    spinner.text = 'Installing dependencies...';
-    
-    // Install dependencies using the selected package manager
-    await execa(packageManager, ['install'], { cwd: projectName });
-
-    if (rnAnswers.addNavigation) {
-      spinner.text = 'Installing React Navigation...';
-      const installCmd = packageManager === 'npm' ? 'install' : 'add';
-      const packages = [
-        '@react-navigation/native',
-        'react-native-screens',
-        'react-native-safe-area-context',
-        '@react-navigation/native-stack'
-      ];
-      
-      await execa(packageManager, [installCmd, ...packages], { cwd: projectName });
-
-      spinner.text = 'Configuring Navigation...';
-      
-      // Create modular folder structure
-      const srcDir = path.join(projectName, 'src');
-      const pagesDir = path.join(srcDir, 'pages');
-      const componentsDir = path.join(srcDir, 'components');
-
-      await fs.ensureDir(pagesDir);
-      await fs.ensureDir(componentsDir);
-
-      const ext = isTypescript ? 'tsx' : 'jsx';
-      const templateBase = path.join(__dirname, '..', 'templates', 'reactNative', 'modular');
-
-      // Copy App file
-      const appContent = await fs.readFile(path.join(templateBase, `App.${ext}`), 'utf8');
-      const targetAppPath = isTypescript ? appTsxPath : appJsxPath;
-      await fs.writeFile(targetAppPath, appContent);
-
-      // Copy Screens
-      const homeContent = await fs.readFile(path.join(templateBase, 'pages', `HomeScreen.${ext}`), 'utf8');
-      await fs.writeFile(path.join(pagesDir, `HomeScreen.${ext}`), homeContent);
-
-      const detailsContent = await fs.readFile(path.join(templateBase, 'pages', `DetailsScreen.${ext}`), 'utf8');
-      await fs.writeFile(path.join(pagesDir, `DetailsScreen.${ext}`), detailsContent);
-    }
-
-    spinner.succeed(chalk.green(`Project ${projectName} created successfully! 🚀`));
-  } catch (error) {
-    spinner.fail('Setup failed.');
-    console.error(error);
-  }
+import { execa } from 'execa';
+import ora from 'ora';
+import chalk from 'chalk';
+import fs from 'fs-extra';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export async function setupReactNative(answers, rnAnswers) {
+  const spinner = ora('Initializing React Native project...').start();
+  try {
+    const { projectName, packageManager } = answers;
+    const isTypescript = rnAnswers.language === 'TypeScript';
+    
+    // Basic init command using the community CLI for latest version
+    const args = ['--yes', '@react-native-community/cli@latest', 'init', projectName, '--skip-install'];
+    
+    await execa('npx', args);
+
+    // Handle language selection (rename App.tsx to App.jsx if JS is selected)
+    const appTsxPath = path.join(projectName, 'App.tsx');
+    const appJsxPath = path.join(projectName, 'App.jsx');
+    
+    if (!isTypescript && await fs.pathExists(appTsxPath)) {
+        await fs.rename(appTsxPath, appJsxPath);
+    }
+
+    spinner.text = 'Installing dependencies...';
+    
+    // Install dependencies using the selected package manager
+    await execa(packageManager, ['install'], { cwd: projectName });
+
+    if (rnAnswers.addNavigation) {
+      spinner.text = 'Installing React Navigation...';
+      const installCmd = packageManager === 'npm' ? 'install' : 'add';
+      const packages = [
+        '@react-navigation/native',
+        'react-native-screens',
+        'react-native-safe-area-context',
+        '@react-navigation/native-stack'
+      ];
+      
+      await execa(packageManager, [installCmd, ...packages], { cwd: projectName });
+
+      spinner.text = 'Configuring Navigation...';
+      
+      // Create modular folder structure
+      const srcDir = path.join(projectName, 'src');
+      const pagesDir = path.join(srcDir, 'pages');
+      const componentsDir = path.join(srcDir, 'components');
+
+      await fs.ensureDir(pagesDir);
+      await fs.ensureDir(componentsDir);
+
+      const ext = isTypescript ? 'tsx' : 'jsx';
+      const templateBase = path.join(__dirname, '..', 'templates', 'reactNative', 'modular');
+
+      // Copy App file
+      const appContent = await fs.readFile(path.join(templateBase, `App.${ext}`), 'utf8');
+      const targetAppPath = isTypescript ? appTsxPath : appJsxPath;
+      await fs.writeFile(targetAppPath, appContent);
+
+      // Copy Screens
+      const homeContent = await fs.readFile(path.join(templateBase, 'pages', `HomeScreen.${ext}`), 'utf8');
+      await fs.writeFile(path.join(pagesDir, `HomeScreen.${ext}`), homeContent);
+
+      const detailsContent = await fs.readFile(path.join(templateBase, 'pages', `DetailsScreen.${ext}`), 'utf8');
+      await fs.writeFile(path.join(pagesDir, `DetailsScreen.${ext}`), detailsContent);
+    }
+
+    spinner.succeed(chalk.green(`Project ${projectName} created successfully! 🚀`));
+  } catch (error) {
+    spinner.fail('Setup failed.');
+    console.error(error);
+  }
 }

package/src/templates/react/main.js

@@ -51,8 +51,8 @@ export default App;
 };
 
 export const getAppContext = (options) => {
-  const { isTypescript, addShadcn } = options;
-  const useTs = isTypescript || addShadcn;
+  const { isTypescript } = options;
+  const useTs = isTypescript;
   
   return `import React, { createContext, useContext, useState${useTs ? ', ReactNode' : ''} } from 'react';
 

package/src/wizard.js

@@ -1,124 +1,124 @@
-import inquirer from 'inquirer';
-import chalk from 'chalk';
-import gradient from 'gradient-string';
-import boxen from 'boxen';
-import { checkPrerequisites } from './utils/checkEnv.js';
-import { setupReactNative } from './engines/reactNative.js';
-import { setupReact } from './engines/react.js';
-
-export async function mainWizard() {
-  // Clear the console for a fresh start
-  console.clear();
-
-  // Create a beautiful header
-  const title = `
-   SET - IT - UP   
-`;
-
-  const boxenOptions = {
-    padding: 1,
-    margin: 1,
-    borderStyle: 'round',
-    borderColor: 'cyan',
-    backgroundColor: '#1b1b1b'
-  };
-
-  const welcomeMessage = boxen(
-    gradient.pastel.multiline(title) +
-    '\n' +
-    chalk.white('🚀 Ready to launch your next idea?'),
-    boxenOptions
-  );
-
-  console.log(welcomeMessage);
-
-  console.log(chalk.hex('#4285F4')('  Hi there! Let\'s configure your new project.\n'));
-
-  const answers = await inquirer.prompt([
-    {
-      type: 'rawlist',
-      name: 'projectType',
-      message: 'What do you want to build today?',
-      choices: ['React', 'React Native', 'Next.js (Coming Soon)', 'Custom GitHub Template'],
-    },
-    {
-      type: 'input',
-      name: 'projectName',
-      message: 'Enter your project name:',
-      default: 'my-awesome-app',
-      validate: (input) => {
-        if (/^([a-z0-9\-\_])+$/.test(input)) return true;
-        return 'Project name may only include lowercase letters, numbers, underscores and hashes.';
-      }
-    },
-    {
-      type: 'rawlist',
-      name: 'packageManager',
-      message: 'Select your preferred package manager:',
-      choices: ['npm', 'yarn', 'pnpm'],
-    }
-  ]);
-
-  if (answers.projectType === 'React Native') {
-    const platformAnswer = await inquirer.prompt([
-      {
-        type: 'rawlist',
-        name: 'targetPlatform',
-        message: 'Which platform do you want to target?',
-        choices: ['Android', 'iOS', 'Both'],
-      }
-    ]);
-
-    await checkPrerequisites('React Native', { targetPlatform: platformAnswer.targetPlatform });
-
-    // Additional RN specific questions
-    const rnAnswers = await inquirer.prompt([
-      {
-        type: 'rawlist',
-        name: 'language',
-        message: 'Which language do you want to use?',
-        choices: ['TypeScript', 'JavaScript'],
-      },
-      {
-        type: 'confirm',
-        name: 'addNavigation',
-        message: 'Would you like to add React Navigation setup?',
-      }
-    ]);
-
-    Object.assign(rnAnswers, platformAnswer);
-
-    await setupReactNative(answers, rnAnswers);
-  } else if (answers.projectType === 'React') {
-    await checkPrerequisites('React');
-
-    const reactAnswers = await inquirer.prompt([
-      {
-        type: 'rawlist',
-        name: 'language',
-        message: 'Which language do you want to use?',
-        choices: ['TypeScript', 'JavaScript'],
-      },
-      {
-        type: 'confirm',
-        name: 'addShadcn',
-        message: 'Would you like to setup Shadcn UI (install utils & dependencies)?',
-      },
-      {
-        type: 'confirm',
-        name: 'addRouter',
-        message: 'Would you like to add React Router DOM?',
-      },
-      {
-        type: 'confirm',
-        name: 'addContext',
-        message: 'Would you like to setup a global AppContext?',
-      }
-    ]);
-
-    await setupReact(answers, reactAnswers);
-
-  } else {
-    console.log(chalk.yellow('\n🚧 This feature is coming soon! Stay tuned.\n'));
-  }
+import inquirer from 'inquirer';
+import chalk from 'chalk';
+import gradient from 'gradient-string';
+import boxen from 'boxen';
+import { checkPrerequisites } from './utils/checkEnv.js';
+import { setupReactNative } from './engines/reactNative.js';
+import { setupReact } from './engines/react.js';
+
+export async function mainWizard() {
+  // Clear the console for a fresh start
+  console.clear();
+
+  // Create a beautiful header
+  const title = `
+   SET - IT - UP   
+`;
+
+  const boxenOptions = {
+    padding: 1,
+    margin: 1,
+    borderStyle: 'round',
+    borderColor: 'cyan',
+    backgroundColor: '#1b1b1b'
+  };
+
+  const welcomeMessage = boxen(
+    gradient.pastel.multiline(title) +
+    '\n' +
+    chalk.white('🚀 Ready to launch your next idea?'),
+    boxenOptions
+  );
+
+  console.log(welcomeMessage);
+
+  console.log(chalk.hex('#4285F4')('  Hi there! Let\'s configure your new project.\n'));
+
+  const answers = await inquirer.prompt([
+    {
+      type: 'rawlist',
+      name: 'projectType',
+      message: 'What do you want to build today?',
+      choices: ['React', 'React Native', 'Next.js (Coming Soon)', 'Custom GitHub Template'],
+    },
+    {
+      type: 'input',
+      name: 'projectName',
+      message: 'Enter your project name:',
+      default: 'my-awesome-app',
+      validate: (input) => {
+        if (/^([a-z0-9\-\_])+$/.test(input)) return true;
+        return 'Project name may only include lowercase letters, numbers, underscores and hashes.';
+      }
+    },
+    {
+      type: 'rawlist',
+      name: 'packageManager',
+      message: 'Select your preferred package manager:',
+      choices: ['npm', 'yarn', 'pnpm'],
+    }
+  ]);
+
+  if (answers.projectType === 'React Native') {
+    const platformAnswer = await inquirer.prompt([
+      {
+        type: 'rawlist',
+        name: 'targetPlatform',
+        message: 'Which platform do you want to target?',
+        choices: ['Android', 'iOS', 'Both'],
+      }
+    ]);
+
+    await checkPrerequisites('React Native', { targetPlatform: platformAnswer.targetPlatform });
+
+    // Additional RN specific questions
+    const rnAnswers = await inquirer.prompt([
+      {
+        type: 'rawlist',
+        name: 'language',
+        message: 'Which language do you want to use?',
+        choices: ['TypeScript', 'JavaScript'],
+      },
+      {
+        type: 'confirm',
+        name: 'addNavigation',
+        message: 'Would you like to add React Navigation setup?',
+      }
+    ]);
+
+    Object.assign(rnAnswers, platformAnswer);
+
+    await setupReactNative(answers, rnAnswers);
+  } else if (answers.projectType === 'React') {
+    await checkPrerequisites('React');
+
+    const reactAnswers = await inquirer.prompt([
+      {
+        type: 'rawlist',
+        name: 'language',
+        message: 'Which language do you want to use?',
+        choices: ['TypeScript', 'JavaScript'],
+      },
+      {
+        type: 'confirm',
+        name: 'addShadcn',
+        message: 'Would you like to setup Shadcn UI (install utils & dependencies)?',
+      },
+      {
+        type: 'confirm',
+        name: 'addRouter',
+        message: 'Would you like to add React Router DOM?',
+      },
+      {
+        type: 'confirm',
+        name: 'addContext',
+        message: 'Would you like to setup a global AppContext?',
+      }
+    ]);
+
+    await setupReact(answers, reactAnswers);
+
+  } else {
+    console.log(chalk.yellow('\n🚧 This feature is coming soon! Stay tuned.\n'));
+  }
 }