@nishant0121/set-it-up 0.0.2 → 0.0.3

package/README.md

@@ -1,66 +1,75 @@
-# set-it-up 🚀
+# set-it-up
 
-**set-it-up** is a powerful CLI tool designed to forge new projects effortlessly. It automates the boilerplate setup, handles prerequisites, and gets you coding faster with pre-configured templates.
+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
+## Features
 
-- **Interactive Wizard**: Easy-to-use terminal interface to guide you through project creation.
-- **Prerequisite Checks**: Automatically checks for necessary tools (Node.js, Git, etc.) before starting.
-- **React Native Support**:
-  - fast setup with `@react-native-community/cli`.
-  - Option to choose between **TypeScript** and **JavaScript**.
-  - One-click **React Navigation** integration with boilerplate code.
-- **Smart Defaults**: Uses the user's preferred package manager (npm, yarn, pnpm).
+- 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
+## Installation
 
-To use `set-it-up` globally on your system:
+To use set-it-up globally on your system:
 
 ```bash
-# Install globally from the current directory (for development)
-npm install -g .
+npm install -g @nishant0121/set-it-up
+```
+
+Using npx:
 
-# Or if published to npm (future)
-# npm install -g set-it-up
+```bash
+npx @nishant0121/set-it-up
 ```
 
-## 🛠️ Usage
+## Usage
 
-Simply run the `setup` command in your terminal:
+Run the setup command in your terminal:
 
 ```bash
 setup
 ```
 
-Follow the on-screen prompts to:
-1. Choose your project type (currently supports **React Native**).
-2. Enter a project name.
-3. Select your package manager.
-4. Configure specific options (e.g., add Navigation).
+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
-🚀 Welcome to Launchpad - Your Project Forge 🛠️
+SET-IT-UP
 
-? What do you want to build today? React Native
-? Enter your project name: my-app
+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 add React Navigation setup? Yes
+? 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
 ```
 
-## 🗺️ Roadmap
-
-- [x] React Native (JS/TS + Navigation)
-- [ ] Next.js Support
-- [ ] Custom GitHub Templates
-- [ ] Backend Templates (Express, NestJS)
-
-## 🤝 Contributing
+## Contributing
 
-Contributions are welcome! Please open an issue or submit a pull request for improvements.
+Contributions are welcome. Please open an issue or submit a pull request for improvements.
 
-## 📄 License
+## License
 
 ISC

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nishant0121/set-it-up",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "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",

package/src/engines/react.js

@@ -0,0 +1,210 @@
+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);
+}

package/src/templates/react/components.js

@@ -0,0 +1,47 @@
+export const getNavbar = (options) => {
+  const { addRouter, addContext } = options;
+  return `import React from 'react';
+${addRouter ? `import { Link } from 'react-router-dom';` : ''}
+${addContext ? `import { useAppContext } from '../context/AppContext';` : ''}
+
+export function Navbar() {
+  ${addContext ? `const { theme, toggleTheme } = useAppContext();` : ''}
+  
+  return (
+    <nav className="p-4 bg-white dark:bg-gray-800 shadow-md flex justify-between items-center">
+      <h1 className="text-xl font-bold text-blue-600">My App</h1>
+      <div className="flex gap-4">
+        ${addRouter ? `
+        <Link to="/" className="text-gray-700 dark:text-gray-200 hover:text-blue-500">Home</Link>
+        <Link to="/about" className="text-gray-700 dark:text-gray-200 hover:text-blue-500">About</Link>
+        ` : ''}
+        ${addContext ? `
+        <button onClick={toggleTheme} className="px-3 py-1 bg-gray-200 rounded text-sm">
+          {theme === 'light' ? '🌙' : '☀️'}
+        </button>
+        ` : ''}
+      </div>
+    </nav>
+  );
+}
+`;
+};
+
+export const getLayout = (options) => {
+  const { addRouter } = options;
+  return `import React from 'react';
+import { Navbar } from './Navbar';
+${addRouter ? `import { Outlet } from 'react-router-dom';` : ''}
+
+export function Layout() {
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900 transition-colors font-sans">
+      <Navbar />
+      <main className="container mx-auto p-4">
+        ${addRouter ? `<Outlet />` : `<div className="text-center p-10">Outlet requires Router</div>`}
+      </main>
+    </div>
+  );
+}
+`;
+};

package/src/templates/react/main.js

@@ -0,0 +1,105 @@
+export const getApp = (options) => {
+  const { addRouter, addContext } = options;
+  let appImports = `import { Layout } from './components/Layout';
+import Home from './pages/Home';
+import About from './pages/About';
+`;
+
+  if (addRouter) {
+    appImports += `import { BrowserRouter, Routes, Route } from 'react-router-dom';\n`;
+  }
+  if (addContext) {
+    appImports += `import { AppProvider } from './context/AppContext';\n`;
+  }
+
+  let appContent = `
+    ${addRouter ? `
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<Layout />}>
+          <Route index element={<Home />} />
+          <Route path="about" element={<About />} />
+        </Route>
+      </Routes>
+    </BrowserRouter>
+    ` : `
+    <Layout>
+      <Home />
+    </Layout>
+    `}
+  `;
+
+  if (addContext) {
+    appContent = `
+      <AppProvider>
+        ${appContent}
+      </AppProvider>
+    `;
+  }
+
+  return `
+${appImports}
+
+function App() {
+  return (
+    ${appContent}
+  );
+}
+
+export default App;
+`;
+};
+
+export const getAppContext = (options) => {
+  const { isTypescript, addShadcn } = options;
+  const useTs = isTypescript || addShadcn;
+  
+  return `import React, { createContext, useContext, useState${useTs ? ', ReactNode' : ''} } from 'react';
+
+${useTs ? 'interface AppContextType {\n  theme: string;\n  toggleTheme: () => void;\n}\n' : ''}
+const AppContext = createContext${useTs ? '<AppContextType | undefined>(undefined)' : '()'};
+
+export const AppProvider = ({ children }${useTs ? ': { children: ReactNode }' : ''}) => {
+  const [theme, setTheme] = useState('light');
+
+  const toggleTheme = () => {
+    setTheme(prev => prev === 'light' ? 'dark' : 'light');
+  };
+
+  return (
+    <AppContext.Provider value={{ theme, toggleTheme }}>
+      {children}
+    </AppContext.Provider>
+  );
+};
+
+export const useAppContext = () => {
+  const context = useContext(AppContext);
+  if (!context) {
+    throw new Error('useAppContext must be used within an AppProvider');
+  }
+  return context;
+};
+`;
+};
+
+export const getViteConfig = () => {
+  return `import path from "path"
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+import { defineConfig } from 'vite'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    react(),
+    tailwindcss(),
+  ],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+})
+`;
+};

package/src/templates/react/pages.js

@@ -0,0 +1,44 @@
+export const getHome = (options) => {
+  const { addShadcn } = options;
+  return `import React from 'react';
+${addShadcn ? `import { Button } from "@/components/ui/button"` : ''}
+
+export default function Home() {
+  return (
+    <div className="flex flex-col items-center justify-center py-10">
+      <h1 className="text-4xl font-bold text-gray-800 dark:text-white mb-6">Welcome Home 🏠</h1>
+      <p className="text-gray-600 dark:text-gray-300 mb-8 max-w-md text-center">
+        This is the starting point of your amazing application.
+      </p>
+      
+      <div className="flex gap-4">
+        <div className="px-4 py-2 bg-white rounded shadow text-green-600 font-bold">✔ React</div>
+        <div className="px-4 py-2 bg-white rounded shadow text-blue-600 font-bold">✔ Tailwind</div>
+      </div>
+
+      ${addShadcn ? `
+      <div className="mt-8">
+        <Button onClick={() => alert('Shadcn Button Works!')}>Shadcn Button</Button>
+      </div>
+      ` : ''}
+    </div>
+  );
+}
+`;
+};
+
+export const getAbout = () => {
+  return `import React from 'react';
+
+export default function About() {
+  return (
+    <div className="text-center py-10">
+      <h1 className="text-3xl font-bold text-gray-800 dark:text-white">About Us</h1>
+      <p className="mt-4 text-gray-600 dark:text-gray-300">
+        We are building the future with modern web technologies.
+      </p>
+    </div>
+  );
+}
+`;
+};

package/src/utils/checkEnv.js

@@ -3,7 +3,8 @@ import chalk from 'chalk';
 
 export async function checkPrerequisites(type) {
   const requirements = {
-    'React Native': ['node', 'git', 'npm', 'java'],
+    'React Native': ['node', 'git', 'npm', 'pod', 'java'],
+    'React': ['node', 'git', 'npm'],
     'Next.js': ['node', 'git']
   };
 

package/src/wizard.js

@@ -4,6 +4,7 @@ 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
@@ -38,7 +39,7 @@ export async function mainWizard() {
       type: 'rawlist',
       name: 'projectType',
       message: 'What do you want to build today?',
-      choices: ['React Native', 'Next.js (Coming Soon)', 'Custom GitHub Template'],
+      choices: ['React', 'React Native', 'Next.js (Coming Soon)', 'Custom GitHub Template'],
     },
     {
       type: 'input',
@@ -77,7 +78,36 @@ export async function mainWizard() {
     ]);
 
     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'));
   }
-}
+}

package/test_inquirer.js

@@ -1,16 +0,0 @@
-import inquirer from 'inquirer';
-
-console.log('Testing inquirer...');
-try {
-  const answers = await inquirer.prompt([
-    {
-      type: 'list',
-      name: 'test',
-      message: 'Does this work?',
-      choices: ['Yes', 'No'],
-    }
-  ]);
-  console.log('Answers:', answers);
-} catch (error) {
-  console.error('Error:', error);
-}