quick-scaffolds-cli 1.2.0 → 1.2.2

package/README.md

@@ -1,59 +1,68 @@
 # quick-scaffolds-cli
 
-A lightweight, interactive CLI tool for rapidly scaffolding new web projects with pre-configured starter templates.
+A lightweight interactive CLI for scaffolding starter web projects quickly.
 
 ## Overview
 
-**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.
+quick-scaffolds-cli generates a ready-to-use project from templates with a simple prompt flow.
 
-**v1.1.0** - Now with improved interactive selection and project type options!
+Current release: v1.2.2
 
 ## Quick Start
 
-### Global Installation
+### Global install
 
-Install globally to use the `ct-pro` command anywhere:
+Install once and use the command anywhere:
 
 ```bash
 npm install -g quick-scaffolds-cli
+ct-pro my-awesome-app
 ```
 
-Then create a new project:
+### Use with npx
+
+Run without installing globally:
 
 ```bash
-ct-pro
+npx quick-scaffolds-cli my-awesome-app
 ```
 
-### Using npx (No Installation Required)
+## Usage
+
+Run the CLI with an initial project name, then choose whether to keep it or change it:
 
 ```bash
-npx quick-scaffolds-cli
+ct-pro my-awesome-app
+? Your project name will be named "my-awesome-app". Do you want to keep it? (Y/n)
+? What do you want to build?
+  Static HTML/CSS/JS
+  React starter
 ```
 
-## Usage
+Prompt details:
 
-### Creating a New Project
+1. Confirm project name:
+  - Keep the provided name
+  - Change it by entering a new project name (default: `my-new-project`)
+2. Project type:
+   - Static HTML/CSS/JS
+   - React starter
 
-Run the command and follow the interactive prompts:
+If you choose not to keep the provided name, the CLI asks:
 
 ```bash
-ct-pro
-? What is your project name? my-awesome-app
-? What do you want to build? (Use arrow keys)
-❯ Static HTML/CSS/JS
+? What is your project name? my-updated-app
 ```
 
-You'll be guided through:
+## Templates
 
-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
+### 1. Static HTML/CSS/JS
 
-### Generated Project Structure
+Creates a simple static site starter.
 
-The scaffolded project will include:
+Generated structure:
 
-```
+```text
 my-awesome-app/
 ├── index.html
 ├── css/
@@ -62,45 +71,74 @@ my-awesome-app/
     └── app.js
 ```
 
-## Features
+### 2. React starter (Vite)
 
-- 🚀 **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
+Creates a React starter app with Vite and automatically runs npm install.
 
-## Available Templates
+Generated structure:
 
-- **Static HTML/CSS/JS** - Simple static website starter with basic HTML, CSS, and JavaScript boilerplate
+```text
+my-awesome-app/
+├── .gitignore
+├── index.css
+├── index.html
+├── package.json
+└── src/
+    ├── App.css
+    ├── App.jsx
+    ├── index.css
+    └── main.jsx
+```
 
-## Project Structure
+After scaffolding a React project:
 
+```bash
+cd my-awesome-app
+npm run dev
 ```
+
+## Features
+
+- Interactive CLI powered by @inquirer/prompts
+- Fast project scaffolding from local templates
+- Two starter options: static web or React + Vite
+- Automatic dependency installation for React template
+- Simple command interface via ct-pro
+
+## Project Structure
+
+```text
 quick-scaffolds-cli/
+├── .gitignore
+├── .npmignore
 ├── bin/
-│   └── cli.js              # CLI entry point
-├── templates/              # Starter templates
-│   └── html-template/      # Static HTML/CSS/JS template
-│       ├── index.html
-│       ├── css/
-│       │   └── style.css
-│       └── js/
-│           └── app.js
+│   └── cli.js
+├── package-lock.json
 ├── package.json
-└── README.md
+├── README.md
+├── templates/
+│   ├── html-template/
+│   │   ├── index.html
+│   │   ├── css/
+│   │   │   └── style.css
+│   │   └── js/
+│   │       └── app.js
+│   └── react-template/
+│       ├── .gitignore
+│       ├── index.css
+│       ├── index.html
+│       ├── package.json
+│       └── src/
+│           ├── App.css
+│           ├── App.jsx
+│           ├── index.css
+│           └── main.jsx
+└── LICENSE
 ```
 
 ## Dependencies
 
-- **@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
+- @inquirer/prompts ^8.3.2
 
 ## License
 
@@ -108,4 +146,4 @@ MIT
 
 ## Contributing
 
-Contributions are welcome! Please feel free to submit pull requests or open issues to suggest improvements.
+Issues and pull requests are welcome on GitHub.

package/bin/cli.js

@@ -3,14 +3,21 @@ import { execSync } from 'node:child_process';
 import fs from 'node:fs/promises';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
-import { input, select } from '@inquirer/prompts';
+import { input, select, confirm } from '@inquirer/prompts';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
 async function main() {
-    try {
-        const name = await input(
+    let name = process.argv[2];
+
+    const keepName = await confirm({
+        message: `Your project name will be named "${name}". Do you want to keep it ?`,
+        default: true
+    });
+
+    if (!keepName) {
+        name = await input(
             {
                 name: 'projectName',
                 message: 'What is your project name?',
@@ -18,32 +25,34 @@ async function main() {
                 default: 'my-new-project'
             }
         );
-        const projectType = await select({
-            message: 'What do you want to build?',
-            type: "list",
-            choices: [
-                { name: 'Static HTML/CSS/JS', value: 'static' },
-                { name: 'React starter', value: 'react' }
-            ],
-        });
-        let templateFolder = '';
-        if (projectType === 'static') {
-            templateFolder = 'html-template';
-        }
+    }
 
-        if (projectType === 'react') {
-            templateFolder = 'react-template';
-            await reactApp(name, templateFolder);
-            return;
-        }
+    const projectType = await select({
+        message: 'What do you want to build?',
+        type: "list",
+        choices: [
+            { name: 'Static HTML/CSS/JS', value: 'static' },
+            { name: 'React starter', value: 'react' }
+        ],
+    });
+    let templateFolder = '';
+    if (projectType === 'static') {
+        templateFolder = 'html-template';
+    }
 
+    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 HTMl project - ${projectName}`)
+        console.log(`\nSuccessfully scaffolded the HTMl project - ${projectName}\n`)
 
     } catch (err) {
         console.error(`Error - ${err.message}`)
@@ -59,7 +68,7 @@ async function reactApp(projectName, templateFolder) {
 
         const filesToUpdate = [
             path.join(targetPath, 'package.json'),
-            path.join(targetPath, 'public','index.html')
+            path.join(targetPath, 'index.html')
         ];
         for (const filePath of filesToUpdate) {
             try {
@@ -72,17 +81,17 @@ async function reactApp(projectName, templateFolder) {
             }
         }
 
-        console.log(`Successfully scaffolded the React starter project - ${projectName}`)
-        console.log('📦 Installing dependencies... This may take a minute.');
+        console.log(`Successfully scaffolded the React starter project - ${projectName}\n`)
+        console.log('📦 Installing dependencies... This may take a minute.\n');
         try {
             execSync('npm install', {
                 cwd: targetPath,
                 stdio: 'inherit'
             });
-            console.log('✅ Dependencies installed successfully!');
-        } catch (err){
+            console.log('✅ Dependencies installed successfully!\n');
+        } catch (err) {
             console.error(err);
-            console.log('⚠️ Could not install dependencies automatically.');
+            console.log('⚠️ Could not install dependencies automatically.\n');
             console.log('Please run "npm install" manually inside your project folder.');
         }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "quick-scaffolds-cli",
-    "version": "1.2.0",
+    "version": "1.2.2",
     "type": "module",
     "bin": {
         "ct-pro": "bin/cli.js"