tss-stack 1.2.0 → 1.2.1

package/README.md

@@ -283,44 +283,6 @@ tss-stack/
 │       └── utils.js        ← shared helpers (toPascal, toRoute, toCamel)
 └── package.json
 ```
-
----
-
-## Local Development
-
-Clone the repo and link it globally to test before publishing:
-
-```bash
-git clone https://github.com/your-username/tss-stack.git
-cd tss-stack
-npm install
-npm link
-```
-
-Now test it like a real user:
-
-```bash
-tss-stack test-project
-```
-
-When done testing:
-
-```bash
-npm unlink -g tss-stack
-```
-
----
-
-## Publishing a New Version
-
-```bash
-npm version patch   # bug fix:    1.0.0 → 1.0.1
-npm version minor   # new feature: 1.0.0 → 1.1.0
-npm version major   # breaking:   1.0.0 → 2.0.0
-
-npm publish
-```
-
 ---
 
 ## Roadmap

package/bin/cli.js

@@ -1,4 +1,4 @@
-#!/usr/bin/env node
+#!/usr/bin/env node
 "use strict";
 
 const ora = require("ora");
@@ -310,14 +310,26 @@ process.stdout.write("\x1Bc");
 
 async function showProjectTree(config) {
     const backendRouteFiles = [
-        config.needsAuth ? "│   ├── auth.js" : null,
-        ...config.tables.map((t) => `│   ├── ${t.name}.js`),
+        config.needsAuth ? "│   │   ├── auth.js" : null,
+        ...config.tables.map((t, i) => {
+            const isLast = i === config.tables.length - 1;
+            return `│   │   ${isLast && !config.tables.slice(i + 1).length ? "└──" : "├──"} ${t.name}.js`;
+        }),
     ].filter(Boolean);
 
+    const frontendContextFiles = config.needsAuth ? [
+        "│   │   ├── AuthContext.jsx",
+    ] : [];
+
+    const frontendComponentFiles = config.needsAuth ? [
+        "│   │   └── PrivateRoute.jsx",
+    ] : [];
+
     const frontendPageFiles = [
-        config.needsAuth ? "│   ├── Login.jsx" : null,
-        ...config.tables.map((t) => `│   ├── ${toPascal(t.name)}.jsx`),
-        config.needsReports ? "│   └── Reports.jsx" : null,
+        "│   │   ├── Home.jsx",
+        config.needsAuth ? "│   │   ├── Login.jsx" : null,
+        ...config.tables.map((t) => `│   │   ├── ${toPascal(t.name)}.jsx`),
+        config.needsReports ? "│   │   └── Reports.jsx" : null,
     ].filter(Boolean);
 
     const tree = [
@@ -328,9 +340,9 @@ async function showProjectTree(config) {
         "│   │   ├── db.js",
         "│   │   └── database.sql",
         "│   ├── middleware/",
-        config.needsAuth ? "│   │   └── auth.js" : null,
+        config.needsAuth ? "│   │   └── auth.js" : "│   │   (none)",
         "│   ├── routes/",
-        ...formatTree(backendRouteFiles).map((line) => `│   ${line}`),
+        ...backendRouteFiles,
         "│   ├── server.js",
         "│   ├── .env.example",
         "│   └── package.json",
@@ -339,10 +351,21 @@ async function showProjectTree(config) {
         "    ├── src/",
         "    │   ├── api/",
         "    │   │   └── axios.js",
+        config.needsAuth ? "    │   ├── context/" : null,
+        ...frontendContextFiles,
+        config.needsAuth ? "    │   ├── components/" : null,
+        ...frontendComponentFiles,
         "    │   ├── pages/",
-        ...formatTree(frontendPageFiles).map((line) => `    │   ${line}`),
+        ...frontendPageFiles,
         "    │   ├── App.jsx",
-        "    │   └── main.jsx",
+        "    │   ├── main.jsx",
+        "    │   └── index.css",
+        "    ├── vite.config.js",
+        "    ├── tailwind.config.js",
+        "    ├── postcss.config.js",
+        "    ├── index.html",
+        "    ├── .env.local.example",
+        "    ├── .gitignore",
         "    └── package.json",
     ].filter(Boolean);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tss-stack",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "Interactive full-stack Node.js + React + MySQL project generator",
   "bin": {
     "tss-stack": "bin/cli.js"

package/src/generators/frontend.js

@@ -3,38 +3,38 @@ const path = require("path");
 const { toPascal, toRoute } = require("./utils");
 
 function generateFrontend(config) {
-    const { projectName, tables, needsAuth, needsReports, targetDir } = config;
-    const root = path.join(targetDir, "frontend-project");
-
-    fs.outputFileSync(
-        path.join(root, "package.json"),
-        JSON.stringify(
-            {
-                name: "frontend-project",
-                version: "1.0.0",
-                scripts: { dev: "vite", build: "vite build" },
-                dependencies: {
-                    react: "^18.2.0",
-                    "react-dom": "^18.2.0",
-                    "react-router-dom": "^6.18.0",
-                    axios: "^1.6.0",
-                },
-                devDependencies: {
-                    vite: "^5.0.0",
-                    "@vitejs/plugin-react": "^4.2.0",
-                    tailwindcss: "^3.3.0",
-                    autoprefixer: "^10.4.16",
-                    postcss: "^8.4.31",
-                },
-            },
-            null,
-            2
-        )
-    );
+  const { projectName, tables, needsAuth, needsReports, targetDir } = config;
+  const root = path.join(targetDir, "frontend-project");
+
+  fs.outputFileSync(
+    path.join(root, "package.json"),
+    JSON.stringify(
+      {
+        name: "frontend-project",
+        version: "1.0.0",
+        scripts: { dev: "vite", build: "vite build" },
+        dependencies: {
+          react: "^18.2.0",
+          "react-dom": "^18.2.0",
+          "react-router-dom": "^6.18.0",
+          axios: "^1.6.0",
+        },
+        devDependencies: {
+          vite: "^5.0.0",
+          "@vitejs/plugin-react": "^4.2.0",
+          tailwindcss: "^3.3.0",
+          autoprefixer: "^10.4.16",
+          postcss: "^8.4.31",
+        },
+      },
+      null,
+      2
+    )
+  );
 
-    fs.outputFileSync(
-        path.join(root, "vite.config.js"),
-        `import { defineConfig } from 'vite';
+  fs.outputFileSync(
+    path.join(root, "vite.config.js"),
+    `import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 
 export default defineConfig({
@@ -45,11 +45,11 @@ export default defineConfig({
   },
 });
 `
-    );
+  );
 
-    fs.outputFileSync(
-        path.join(root, "tailwind.config.js"),
-        `export default {
+  fs.outputFileSync(
+    path.join(root, "tailwind.config.js"),
+    `export default {
   content: [
     "./index.html",
     "./src/**/*.{js,jsx}",
@@ -60,22 +60,22 @@ export default defineConfig({
   plugins: [],
 };
 `
-    );
+  );
 
-    fs.outputFileSync(
-        path.join(root, "postcss.config.js"),
-        `export default {
+  fs.outputFileSync(
+    path.join(root, "postcss.config.js"),
+    `export default {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},
   },
 };
 `
-    );
+  );
 
-    fs.outputFileSync(
-        path.join(root, "index.html"),
-        `<!DOCTYPE html>
+  fs.outputFileSync(
+    path.join(root, "index.html"),
+    `<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -88,17 +88,17 @@ export default defineConfig({
   </body>
 </html>
 `
-    );
+  );
 
-    fs.outputFileSync(
-        path.join(root, ".env.local.example"),
-        `VITE_API_URL=http://localhost:5000
+  fs.outputFileSync(
+    path.join(root, ".env.local.example"),
+    `VITE_API_URL=http://localhost:5000
 `
-    );
+  );
 
-    fs.outputFileSync(
-        path.join(root, ".gitignore"),
-        `node_modules/
+  fs.outputFileSync(
+    path.join(root, ".gitignore"),
+    `node_modules/
 dist/
 .env
 .env.local
@@ -107,11 +107,11 @@ dist/
 .idea/
 .vscode/
 `
-    );
+  );
 
-    fs.outputFileSync(
-        path.join(root, "src", "api", "axios.js"),
-        `import axios from "axios";
+  fs.outputFileSync(
+    path.join(root, "src", "api", "axios.js"),
+    `import axios from "axios";
 
 const API = axios.create({
   baseURL: import.meta.env.VITE_API_URL || "http://localhost:5000",
@@ -120,11 +120,11 @@ const API = axios.create({
 
 export default API;
 `
-    );
+  );
 
-    fs.outputFileSync(
-        path.join(root, "src", "main.jsx"),
-        `import React from "react";
+  fs.outputFileSync(
+    path.join(root, "src", "main.jsx"),
+    `import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App";
 import "./index.css";
@@ -135,11 +135,11 @@ ReactDOM.createRoot(document.getElementById("root")).render(
   </React.StrictMode>
 );
 `
-    );
+  );
 
-    fs.outputFileSync(
-        path.join(root, "src", "index.css"),
-        `@tailwind base;
+  fs.outputFileSync(
+    path.join(root, "src", "index.css"),
+    `@tailwind base;
 @tailwind components;
 @tailwind utilities;
 
@@ -147,12 +147,12 @@ body {
   font-family: system-ui, -apple-system, sans-serif;
 }
 `
-    );
+  );
 
-    if (needsAuth) {
-        fs.outputFileSync(
-            path.join(root, "src", "context", "AuthContext.jsx"),
-            `import React, { createContext, useState, useEffect } from "react";
+  if (needsAuth) {
+    fs.outputFileSync(
+      path.join(root, "src", "context", "AuthContext.jsx"),
+      `import React, { createContext, useState, useEffect } from "react";
 import API from "../api/axios";
 
 export const AuthContext = createContext();
@@ -182,11 +182,11 @@ export function AuthProvider({ children }) {
   );
 }
 `
-        );
+    );
 
-        fs.outputFileSync(
-            path.join(root, "src", "components", "PrivateRoute.jsx"),
-            `import { Navigate } from "react-router-dom";
+    fs.outputFileSync(
+      path.join(root, "src", "components", "PrivateRoute.jsx"),
+      `import { Navigate } from "react-router-dom";
 import { useContext } from "react";
 import { AuthContext } from "../context/AuthContext";
 
@@ -197,12 +197,12 @@ export default function PrivateRoute({ children }) {
   return user ? children : <Navigate to="/login" />;
 }
 `
-        );
-    }
+    );
+  }
 
-    fs.outputFileSync(
-        path.join(root, "src", "pages", "Home.jsx"),
-        `export default function Home() {
+  fs.outputFileSync(
+    path.join(root, "src", "pages", "Home.jsx"),
+    `export default function Home() {
   return (
     <div className="p-6 max-w-2xl">
       <h1 className="text-3xl font-bold mb-4">Welcome</h1>
@@ -211,20 +211,20 @@ export default function PrivateRoute({ children }) {
   );
 }
 `
-    );
+  );
 
-    for (const table of tables) {
-        const name = toPascal(table.name);
-        const route = toRoute(table.name);
-        const fields = table.fields;
-        const ops = table.operations;
-
-        const stateFields = fields.map((f) => `    ${f}: ""`).join(",\n");
-        const formReset = fields.map((f) => `${f}: ""`).join(", ");
-        const editSet = fields.map((f) => `${f}: item.${f}`).join(", ");
-        const inputs = fields
-            .map(
-                (f) => `        <input
+  for (const table of tables) {
+    const name = toPascal(table.name);
+    const route = toRoute(table.name);
+    const fields = table.fields;
+    const ops = table.operations;
+
+    const stateFields = fields.map((f) => `    ${f}: ""`).join(",\n");
+    const formReset = fields.map((f) => `${f}: ""`).join(", ");
+    const editSet = fields.map((f) => `${f}: item.${f}`).join(", ");
+    const inputs = fields
+      .map(
+        (f) => `        <input
           type="text"
           placeholder="${f}"
           value={form.${f}}
@@ -232,18 +232,18 @@ export default function PrivateRoute({ children }) {
           className="border p-2 rounded w-full"
           required
         />`
-            )
-            .join("\n");
+      )
+      .join("\n");
 
-        const tableHeaders = ["id", ...fields, "created_at"]
-            .map((f) => `          <th className="border px-4 py-2">${f}</th>`)
-            .join("\n");
+    const tableHeaders = ["id", ...fields, "created_at"]
+      .map((f) => `          <th className="border px-4 py-2">${f}</th>`)
+      .join("\n");
 
-        const tableRow = ["id", ...fields, "created_at"]
-            .map((f) => `          <td className="border px-4 py-2">{item.${f}}</td>`)
-            .join("\n");
+    const tableRow = ["id", ...fields, "created_at"]
+      .map((f) => `          <td className="border px-4 py-2">{item.${f}}</td>`)
+      .join("\n");
 
-        let page = `import { useState, useEffect } from "react";
+    let page = `import { useState, useEffect } from "react";
 import API from "../api/axios";
 
 export default function ${name}() {
@@ -272,8 +272,8 @@ ${ops.includes("update") ? "  const [editId, setEditId] = useState(null);" : ""}
 
 `;
 
-        if (ops.includes("insert")) {
-            page += `  const handleSubmit = async (e) => {
+    if (ops.includes("insert")) {
+      page += `  const handleSubmit = async (e) => {
     e.preventDefault();
     setLoading(true);
     setError("");
@@ -298,10 +298,10 @@ ${ops.includes("update") ? `      if (editId) {
   };
 
 `;
-        }
+    }
 
-        if (ops.includes("delete")) {
-            page += `  const handleDelete = async (id) => {
+    if (ops.includes("delete")) {
+      page += `  const handleDelete = async (id) => {
     if (!window.confirm("Are you sure?")) return;
     setLoading(true);
     setError("");
@@ -317,10 +317,10 @@ ${ops.includes("update") ? `      if (editId) {
   };
 
 `;
-        }
+    }
 
-        if (ops.includes("update")) {
-            page += `  const handleEdit = (item) => {
+    if (ops.includes("update")) {
+      page += `  const handleEdit = (item) => {
     setEditId(item.id);
     setForm({ ${editSet} });
   };
@@ -331,9 +331,9 @@ ${ops.includes("update") ? `      if (editId) {
   };
 
 `;
-        }
+    }
 
-        page += `  return (
+    page += `  return (
     <div className="p-6">
       <h1 className="text-2xl font-bold mb-4">${name}</h1>
 
@@ -374,14 +374,14 @@ ${ops.includes("delete") ? '            <button onClick={() => handleDelete(item
 }
 `;
 
-        fs.outputFileSync(path.join(root, "src", "pages", `${name}.jsx`), page);
-        console.log(`  [✓] pages/${name}.jsx`);
-    }
+    fs.outputFileSync(path.join(root, "src", "pages", `${name}.jsx`), page);
+    console.log(`  [✓] pages/${name}.jsx`);
+  }
 
-    if (needsAuth) {
-        fs.outputFileSync(
-            path.join(root, "src", "pages", "Login.jsx"),
-            `import { useState, useContext } from "react";
+  if (needsAuth) {
+    fs.outputFileSync(
+      path.join(root, "src", "pages", "Login.jsx"),
+      `import { useState, useContext } from "react";
 import { useNavigate } from "react-router-dom";
 import { AuthContext } from "../context/AuthContext";
 import API from "../api/axios";
@@ -447,13 +447,13 @@ export default function Login() {
   );
 }
 `
-        );
-    }
+    );
+  }
 
-    if (needsReports) {
-        fs.outputFileSync(
-            path.join(root, "src", "pages", "Reports.jsx"),
-            `export default function Reports() {
+  if (needsReports) {
+    fs.outputFileSync(
+      path.join(root, "src", "pages", "Reports.jsx"),
+      `export default function Reports() {
   return (
     <div className="p-6">
       <h1 className="text-2xl font-bold mb-4">Reports</h1>
@@ -462,27 +462,27 @@ export default function Login() {
   );
 }
 `
-        );
-    }
-
-    const imports = tables
-        .map((t) => `import ${toPascal(t.name)} from "./pages/${toPascal(t.name)}";`)
-        .join("\n");
-
-    const routes = tables
-        .map((t) => {
-            const route = `<Route path="/${toRoute(t.name)}" element={<${toPascal(t.name)} />} />`;
-            return needsAuth
-                ? `          <Route path="/${toRoute(t.name)}" element={<PrivateRoute><${toPascal(t.name)} /></PrivateRoute>} />`
-                : `          ${route}`;
-        })
-        .join("\n");
-
-    const navLinks = tables
-        .map((t) => `          <Link to="/${toRoute(t.name)}" className="hover:underline">${toPascal(t.name)}</Link>`)
-        .join("\n");
-
-    let app = `import { BrowserRouter, Routes, Route, Link, useNavigate } from "react-router-dom";
+    );
+  }
+
+  const imports = tables
+    .map((t) => `import ${toPascal(t.name)} from "./pages/${toPascal(t.name)}";`)
+    .join("\n");
+
+  const routes = tables
+    .map((t) => {
+      const route = `<Route path="/${toRoute(t.name)}" element={<${toPascal(t.name)} />} />`;
+      return needsAuth
+        ? `          <Route path="/${toRoute(t.name)}" element={<PrivateRoute><${toPascal(t.name)} /></PrivateRoute>} />`
+        : `          ${route}`;
+    })
+    .join("\n");
+
+  const navLinks = tables
+    .map((t) => `          <Link to="/${toRoute(t.name)}" className="hover:underline">${toPascal(t.name)}</Link>`)
+    .join("\n");
+
+  let app = `import { BrowserRouter, Routes, Route, Link, useNavigate } from "react-router-dom";
 ${imports}
 ${needsAuth ? 'import Login from "./pages/Login";\nimport PrivateRoute from "./components/PrivateRoute";\nimport { AuthContext, AuthProvider } from "./context/AuthContext";\nimport { useContext } from "react";' : ""}
 ${needsReports ? 'import Reports from "./pages/Reports";' : ""}
@@ -534,8 +534,8 @@ ${needsAuth ? '    <AuthProvider>\n      <BrowserRouter>\n        <AppRoutes />\
 }
 `;
 
-    fs.outputFileSync(path.join(root, "src", "App.jsx"), app);
-    console.log("  [✓] App.jsx");
+  fs.outputFileSync(path.join(root, "src", "App.jsx"), app);
+  console.log("  [✓] App.jsx");
 }
 
 module.exports = { generateFrontend };