create-mb-starter 1.0.0 → 1.2.0

package/index.js

@@ -1,20 +1,55 @@
-#!/usr/bin/env node
+#!/usr/bin/env node
 
 const fs = require("fs");
 const path = require("path");
 const { execSync } = require("child_process");
+const chalk = require("chalk");
 
 const projectName = process.argv[2] || "my-app";
 const targetDir = path.join(process.cwd(), projectName);
 const templateDir = path.join(__dirname, "template");
 
+// Banner
+console.log(
+    chalk.cyan(`
+╔══════════════════════════════════════╗
+║        🚀 MB STARTER TEMPLATE       ║
+╚══════════════════════════════════════╝
+`)
+);
+
+console.log(chalk.yellow("📦 Creating project:"), chalk.green(projectName));
+console.log(chalk.gray("--------------------------------------------------"));
+
+// Feature list
+console.log(chalk.magenta("✨ This starter includes:"));
+console.log(chalk.white("  ⚛ React (Vite powered)"));
+console.log(chalk.white("  🔀 React Router"));
+console.log(chalk.white("  📡 GET / POST / DELETE examples"));
+console.log(chalk.white("  ✅ Input validation"));
+console.log(chalk.white("  🎨 Bootstrap styling"));
+console.log(chalk.gray("--------------------------------------------------"));
+
 // Copy template
+if (fs.existsSync(targetDir)) {
+    console.log(chalk.red("❌ Folder already exists!"));
+    process.exit(1);
+}
+
 fs.cpSync(templateDir, targetDir, { recursive: true });
 
-console.log("Installing dependencies...");
+console.log(chalk.blue("\n📥 Installing dependencies...\n"));
+
 execSync("npm install", { cwd: targetDir, stdio: "inherit" });
 
-console.log(`\nProject created: ${projectName}`);
-console.log(`\nNext steps:`);
-console.log(`  cd ${projectName}`);
-console.log(`  npm run dev`);
+// Success message
+console.log(
+    chalk.green(`
+🎉 Project successfully created!
+`)
+);
+
+console.log(chalk.cyan("👉 Next steps:"));
+console.log(chalk.white(`   cd ${projectName}`));
+console.log(chalk.white(`   npm run dev`));
+console.log(chalk.gray("\nHappy coding! 💻🔥\n"));

package/package.json

@@ -1,8 +1,11 @@
 {
   "name": "create-mb-starter",
   "type": "commonjs",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "bin": {
     "create-mb-starter": "./index.js"
+  },
+  "dependencies": {
+    "chalk": "^4.1.2"
   }
-}
+}

package/template/src/App.jsx

@@ -14,15 +14,25 @@ function App() {
   const fetchData = async () => {
     const res = await fetch('http://localhost:3000/api/autok')
     const data = await res.json()
-    console.log(data);
     setAdatok(data)
   };
 
+  const handleDelete = async (id) => {
+    if (window.confirm('Biztos benne, hogy törli?')) {
+      const res = await fetch(`http://localhost:3000/api/autok/${id}`, {
+        method: 'DELETE'
+      });
+      if (res.ok) {
+        fetchData();
+      }
+    }
+  };
+
   return (
     <>
       <BrowserRouter>
         <Routes>
-          <Route path='/' element={<Home data={adatok} />} />
+          <Route path='/' element={<Home data={adatok} handleDelete={handleDelete} />} />
           <Route path="/felvisz" element={<Felvisz onAdd={fetchData}/>}/>
         </Routes>
       </BrowserRouter>

package/template/src/pages/Felvisz.jsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from 'react'
-import { href, useNavigate } from 'react-router'
+import { useState } from 'react'
+import { useNavigate } from 'react-router'
 
 const Felvisz = ({onAdd}) => {
     const [data, setData] = useState({
@@ -12,13 +12,31 @@ const Felvisz = ({onAdd}) => {
         "gyartas_eve": "2019-03-15"
     })
 
-    const [error, setError] = useState()
+    const [errors, setErrors] = useState([])
 
     const nav = useNavigate()
 
+    const validate = () => {
+        const errs = []
+        if (!data.modell.trim()) errs.push('A modell megadása kötelező.')
+        if (!data.gyartoId || data.gyartoId <= 0) errs.push('A gyártó ID pozitív szám kell legyen.')
+        if (!data.kategoriaId || data.kategoriaId <= 0) errs.push('A kategória ID pozitív szám kell legyen.')
+        if (!data.motor.trim()) errs.push('A motor megadása kötelező.')
+        if (!data.teljesitmeny || data.teljesitmeny <= 0) errs.push('A teljesítmény pozitív szám kell legyen.')
+        if (!data.ar || data.ar <= 0) errs.push('Az ár pozitív szám kell legyen.')
+        if (!data.gyartas_eve) errs.push('A gyártás évének megadása kötelező.')
+        return errs
+    }
+
     const onSubmit = async (e) =>{
         e.preventDefault()
-        addData()
+        const validationErrors = validate()
+        if (validationErrors.length > 0) {
+            setErrors(validationErrors)
+            return
+        }
+        setErrors([])
+        await addData()
     }
 
 
@@ -36,7 +54,7 @@ const Felvisz = ({onAdd}) => {
         const dataRes = await res.json()
 
         if (!res.ok) {
-            setError(dataRes.message)
+            setErrors([dataRes.message || 'Hiba a felvitel során'])
             throw new Error(dataRes.message || 'Hiba a felvitel során')
         }
         console.log('Sikeres felvitel:', dataRes);
@@ -46,18 +64,22 @@ const Felvisz = ({onAdd}) => {
 
     return (
         <form onSubmit={(e)=>(onSubmit(e))}>
-            {error && <p>{error}</p>}
+            {errors.length > 0 && (
+                <ul className="text-danger">
+                    {errors.map((err, i) => <li key={i}>{err}</li>)}
+                </ul>
+            )}
             <div className="mb-3">
                 <label htmlFor="exampleInputEmail1" className="form-label">Modell</label>
                 <input type="text" value={data.modell} onChange={(e) => setData({...data, modell:e.target.value})} className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" />
             </div>
             <div className="mb-3">
                 <label htmlFor="exampleInputEmail1" className="form-label">Gyarto Id</label>
-                <input type="number" value={data.gyartoId} onChange={(e) => setData({...data, gyartoId:e.target.value})} className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" />
+                <input type="number" value={data.gyartoId} onChange={(e) => setData({...data, gyartoId:Number(e.target.value)})} className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" />
             </div>
             <div className="mb-3">
                 <label htmlFor="exampleInputEmail1" className="form-label">Kategoria Id</label>
-                <input type="number" value={data.kategoriaId} onChange={(e) => setData({...data, kategoriaId:e.target.value})} className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" />
+                <input type="number" value={data.kategoriaId} onChange={(e) => setData({...data, kategoriaId:Number(e.target.value)})} className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" />
             </div>
             <div className="mb-3">
                 <label htmlFor="exampleInputEmail1" className="form-label">Motor</label>
@@ -65,11 +87,11 @@ const Felvisz = ({onAdd}) => {
             </div>
             <div className="mb-3">
                 <label htmlFor="exampleInputEmail1" className="form-label">Telsejítmény</label>
-                <input type="number" value={data.teljesitmeny} onChange={(e) => setData({...data, teljesitmeny:e.target.value})} className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" />
+                <input type="number" value={data.teljesitmeny} onChange={(e) => setData({...data, teljesitmeny:Number(e.target.value)})} className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" />
             </div>
             <div className="mb-3">
                 <label htmlFor="exampleInputEmail1" className="form-label">Ár</label>
-                <input type="number" value={data.ar} onChange={(e) => setData({...data, ar:e.target.value})} className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" />
+                <input type="number" value={data.ar} onChange={(e) => setData({...data, ar:Number(e.target.value)})} className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" />
             </div>
             <div className="mb-3">
                 <label htmlFor="exampleInputEmail1" className="form-label">Gyártás éve</label>

package/template/src/pages/Home.jsx

@@ -1,8 +1,9 @@
 import React from 'react'
 import { Link } from 'react-router'
 
-const Home = ({ data }) => {
+const Home = ({ data, handleDelete }) => {
     return (
+        <>
         <table className="table">
             <thead>
                 <tr>
@@ -10,21 +11,25 @@ const Home = ({ data }) => {
                     <th scope="col">Ár</th>
                     <th scope="col">Motor</th>
                     <th scope="col">Teljesítmény</th>
+                    <th scope="col">Törlés</th>
                 </tr>
             </thead>
             <tbody>
                 {data.map((i) => (
-                    <tr>
+                    <tr key={i.id}>
                         <th scope="row">{i.modell}</th>
                         <td>{i.ar} Ft</td>
                         <td>{i.motor}</td>
                         <td>{i.teljesitmeny}</td>
+                        <td>
+                            <button className="btn btn-danger" onClick={() => handleDelete(i.id)}>Törlés</button>
+                        </td>
                     </tr>
                 ))}
             </tbody>
-            <Link className='btn btn-primary' to={"/felvisz"}>Uj adat</Link>
         </table>
-        
+        <Link className='btn btn-primary' to={"/felvisz"}>Uj adat</Link>
+        </>
     )
 }