quick-scaffolds-cli 1.0.0 → 1.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Pramuditha Lakshan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,55 +1,60 @@
-# quick-scaffolds
+# quick-scaffolds-cli
 
-A lightweight CLI tool for quickly scaffolding web projects with pre-configured templates.
+A lightweight, interactive CLI tool for rapidly scaffolding new web projects with pre-configured starter templates.
 
 ## Overview
 
-`quick-scaffolds` is an npm package that provides an interactive command-line interface to generate new projects with starter templates. It's designed to help developers quickly bootstrap projects without manually creating directory structures and boilerplate files.
+**quick-scaffolds-cli** is an npm package that provides an interactive command-line interface to generate new projects from customizable templates. Get started with a fully structured project in seconds with an intuitive selection menu.
 
-## Installation
+**v1.1.0** - Now with improved interactive selection and project type options!
 
-Install globally to use the `create-project` command anywhere:
+## Quick Start
 
-```bash
-npm install -g quick-scaffolds
-```
+### Global Installation
 
-Or use `npx` to run without installing:
+Install globally to use the `ct-pro` command anywhere:
 
 ```bash
-npx quick-scaffolds
+npm install -g quick-scaffolds-cli
 ```
 
-## Usage
+Then create a new project:
 
-### Create a New Project
+```bash
+ct-pro
+```
 
-Run the following command in your terminal:
+### Using npx (No Installation Required)
 
 ```bash
-create-project
+npx quick-scaffolds-cli
 ```
 
-The interactive prompt will guide you through the setup:
-
-1. **Project Name**: Enter the name of your project (default: `my-new-project`)
-2. **Project Type**: Select the type of project to scaffold (currently: `Static HTML/CSS/JS`)
+## Usage
 
-The CLI will create a new directory with your project name and populate it with the selected template files.
+### Creating a New Project
 
-### Example
+Run the command and follow the interactive prompts:
 
 ```bash
-$ create-project
-? What is your project name? my-awesome-website
-? What do you want to build? Static HTML/CSS/JS
-Successfully scaffolded - my-awesome-website
+ct-pro
+? What is your project name? my-awesome-app
+? What do you want to build? (Use arrow keys)
+❯ Static HTML/CSS/JS
 ```
 
-This creates a `my-awesome-website` directory with the following structure:
+You'll be guided through:
+
+1. **Project Name**: Enter your desired project name (default: `my-new-project`)
+2. **Project Type**: Use arrow keys to select a template type:
+   - **Static HTML/CSS/JS** - A simple, lightweight static site starter with HTML, CSS, and JavaScript
+
+### Generated Project Structure
+
+The scaffolded project will include:
 
 ```
-my-awesome-website/
+my-awesome-app/
 ├── index.html
 ├── css/
 │   └── style.css
@@ -59,31 +64,43 @@ my-awesome-website/
 
 ## Features
 
-- 🚀 **Interactive CLI**: User-friendly command-line prompts using [inquirer.js](https://github.com/SBoudrias/Inquirer.js)
-- 📁 **Template Management**: Pre-built project templates ready to use
-- 🛠️ **Easy Setup**: Bootstrap new projects in seconds
-- 📦 **Lightweight**: Minimal dependencies for fast installation
-- 🎯 **Extensible**: Easy to add new project templates
+- 🚀 **Interactive CLI** - Modern, intuitive prompts powered by [@inquirer/prompts](https://github.com/SBoudrias/Inquirer.js)
+- ⬆️⬇️ **Arrow Key Navigation** - Easy project type selection with arrow keys
+- 📁 **Template-Based** - Pre-built, production-ready project templates
+- ⚡ **Instant Setup** - Scaffold complete projects in seconds
+- 📦 **Lightweight** - Minimal dependencies and fast installation
+- 🧩 **Extensible** - Easy to add custom project templates
+
+## Available Templates
+
+- **Static HTML/CSS/JS** - Simple static website starter with basic HTML, CSS, and JavaScript boilerplate
 
 ## Project Structure
 
 ```
-quick-scaffolds/
+quick-scaffolds-cli/
 ├── bin/
-│   └── cli.js           # CLI entry point
-├── templates/           # Project templates
-│   ├── index.html
-│   ├── css/
-│   │   └── style.css
-│   └── js/
-│       └── app.js
+│   └── cli.js              # CLI entry point
+├── templates/              # Starter templates
+│   └── html-template/      # Static HTML/CSS/JS template
+│       ├── index.html
+│       ├── css/
+│       │   └── style.css
+│       └── js/
+│           └── app.js
 ├── package.json
 └── README.md
 ```
 
 ## Dependencies
 
-- `inquirer` (v13.3.2) - Interactive command-line prompts
+- **@inquirer/prompts** (^8.3.2) - Modern, interactive prompt library
+- **inquirer** (^13.3.2) - Command-line interface utilities
+
+## Version History
+
+- **v1.1.0** - Improved interactive selection with arrow key navigation, organized template structure
+- **v1.0.0** - Initial release with basic scaffolding functionality
 
 ## License
 
@@ -91,4 +108,4 @@ MIT
 
 ## Contributing
 
-Contributions are welcome! Feel free to fork, create a feature branch, and submit a pull request.
+Contributions are welcome! Please feel free to submit pull requests or open issues to suggest improvements.

package/bin/cli.js

@@ -1,41 +1,93 @@
 #!/usr/bin/env node
-
+import { execSync } from 'node:child_process';
 import fs from 'node:fs/promises';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
-import inquirer from 'inquirer';
+import { input, select } from '@inquirer/prompts';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
 async function main() {
-    const answers = await inquirer.prompt([
-        {
-            type: 'input',
-            name: 'projectName',
-            message: 'What is your project name?',
-            default: 'my-new-project'
-        },
-        {
-            type: 'list',
-            name: 'projectType',
+    try {
+        const name = await input(
+            {
+                name: 'projectName',
+                message: 'What is your project name?',
+                type: 'input',
+                default: 'my-new-project'
+            }
+        );
+        const projectType = await select({
             message: 'What do you want to build?',
-            default: 'Static HTML/CSS/JS Page',
-            choices: ['Static HTML/CSS/JS'
+            type: "list",
+            choices: [
+                { name: 'Static HTML/CSS/JS', value: 'static' },
+                { name: 'React starter', value: 'react' }
             ],
-        },
-    ]);
+        });
+        let templateFolder = '';
+        if (projectType === 'static') {
+            templateFolder = 'html-template';
+        }
 
-    const projectName = answers.projectName;
-    const targetPath = path.join(process.cwd(), projectName);
-    const templatePath = path.join(__dirname, '../templates');
+        if (projectType === 'react') {
+            templateFolder = 'react-template';
+            await reactApp(name, templateFolder);
+            return;
+        }
 
-    try {
+        const projectName = name;
+        const targetPath = path.join(process.cwd(), projectName);
+
+        const templatePath = path.join(__dirname, '../templates', templateFolder);
         await fs.mkdir(targetPath, { recursive: true });
         await fs.cp(templatePath, targetPath, { recursive: true });
-        console.log('Successfully scaffolded the project')
+        console.log(`Successfully scaffolded the HTMl project - ${projectName}`)
+
+    } catch (err) {
+        console.error(`Error - ${err.message}`)
+    }
+}
+
+async function reactApp(projectName, templateFolder) {
+    try {
+        const targetPath = path.join(process.cwd(), projectName);
+        const templatePath = path.join(__dirname, '../templates', templateFolder);
+        await fs.mkdir(targetPath, { recursive: true });
+        await fs.cp(templatePath, targetPath, { recursive: true })
+
+        const filesToUpdate = [
+            path.join(targetPath, 'package.json'),
+            path.join(targetPath, 'public','index.html')
+        ];
+        for (const filePath of filesToUpdate) {
+            try {
+                const content = await fs.readFile(filePath, 'utf-8');
+                const updateContent = content.replaceAll('{{PROJECT_NAME}}', projectName);
+                await fs.writeFile(filePath, updateContent);
+            } catch (err) {
+                console.error(err);
+                console.error(`File path ${path.basename(filePath)} not found`);
+            }
+        }
+
+        console.log(`Successfully scaffolded the React starter project - ${projectName}`)
+        console.log('📦 Installing dependencies... This may take a minute.');
+        try {
+            execSync('npm install', {
+                cwd: targetPath,
+                stdio: 'inherit'
+            });
+            console.log('✅ Dependencies installed successfully!');
+        } catch (err){
+            console.error(err);
+            console.log('⚠️ Could not install dependencies automatically.');
+            console.log('Please run "npm install" manually inside your project folder.');
+        }
+
     } catch (err) {
-        console.error('Error - ${err.message}')
+        console.error(`Error - ${err.message}`);
     }
 }
 

package/package.json

@@ -1,15 +1,16 @@
 {
     "name": "quick-scaffolds-cli",
-    "version": "1.0.0",
+    "version": "1.2.0",
     "type": "module",
     "bin": {
         "ct-pro": "bin/cli.js"
     },
+    "license": "MIT",
     "files": [
         "bin",
         "templates"
     ],
     "dependencies": {
-        "inquirer": "^13.3.2"
+        "@inquirer/prompts": "^8.3.2"
     }
 }

package/templates/react-template/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.4",
+    "vite": "^6.0.0"
+  }
+}

package/templates/react-template/public/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{PROJECT_NAME}}</title> 
+  </head>
+  <body>
+    <div id="root"></div>
+    
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

package/templates/react-template/src/App.jsx

@@ -0,0 +1,12 @@
+import './App.css';
+
+function App(){
+    return(
+        <div className="container">
+            <h1>Welcome to your React App!</h1>
+            <p>Start building something amazing.</p>
+        </div>
+    )
+}
+
+export default App

package/templates/react-template/src/main.jsx

@@ -0,0 +1,9 @@
+import React from "react";
+import ReactDOM from 'react-dom/client';
+import App from './App.jsx';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+    <React.StrictMode>
+        <App />
+    </React.StrictMode>
+)