create-sb-react 1.0.0

package/index.js

@@ -0,0 +1,288 @@
+#!/usr/bin/env node
+
+import inquirer from "inquirer";
+import { execSync } from "child_process";
+import fs from "fs-extra";
+
+console.log("🚀 Welcome to SB React CLI");
+
+const answers = await inquirer.prompt([
+    {
+        type: "input",
+        name: "projectName",
+        message: "Project Name?"
+    },
+    {
+        type: "select",
+        name: "language",
+        message: "Choose Language",
+        choices: [
+            {
+                name: "JavaScript",
+                value: "javascript"
+            },
+            {
+                name: "TypeScript",
+                value: "typescript"
+            }
+        ]
+    },
+    {
+        type: "select",
+        name: "style",
+        message: "Choose Styling",
+        choices: [
+            {
+                name: "Tailwind",
+                value: "tailwind"
+            },
+            {
+                name: "SCSS",
+                value: "scss"
+            }
+        ]
+    }
+]);
+
+const template =
+    answers.language === "typescript"
+        ? "react-ts"
+        : "react";
+
+console.log("📦 Creating Vite project...");
+
+execSync(
+    `npx create-vite@latest ${answers.projectName} --template ${template}`,
+    {
+        stdio: ["pipe", "inherit", "inherit"],
+        input: "n\n"
+    }
+);
+
+process.chdir(answers.projectName);
+
+console.log("📦 Installing common packages...");
+
+execSync(
+    "npm install axios react-router-dom husky",
+    {
+        stdio: "inherit"
+    }
+);
+
+console.log("🔤 Installing cspell...");
+
+execSync(
+    "npm install --save-dev cspell",
+    {
+        stdio: "inherit"
+    }
+);
+
+const packageJson = fs.readJsonSync("package.json");
+packageJson.scripts["spell-check"] = "cspell \"src/**/*.{js,jsx,ts,tsx,scss}\"";
+fs.writeJsonSync("package.json", packageJson, { spaces: 2 });
+
+fs.writeJsonSync("cspell.json", {
+    words: [
+        "axios",
+        "zustand",
+        "tailwind",
+        "scss",
+        "vite",
+        "reactdom",
+        "husky"
+    ]
+}, { spaces: 2 });
+
+console.log("🐶 Setting up Husky...");
+
+execSync("git init", { stdio: "inherit" });
+execSync("npx husky init", { stdio: "inherit" });
+fs.writeFileSync(
+    ".husky/pre-commit",
+    "npm run lint\nnpm run spell-check\nnpm run build\n"
+);
+
+if (answers.style === "tailwind") {
+    console.log("🎨 Installing Tailwind CSS...");
+
+    execSync(
+        "npm install tailwindcss @tailwindcss/vite",
+        {
+            stdio: "inherit"
+        }
+    );
+} else {
+    console.log("🎨 Installing SCSS...");
+
+    execSync(
+        "npm install sass",
+        {
+            stdio: "inherit"
+        }
+    );
+}
+
+console.log("📁 Creating folder structure...");
+
+const folders = [
+    "src/assets",
+    "src/components",
+    "src/containers",
+    "src/constants",
+    "src/hooks",
+    "src/routes",
+    "src/services",
+    "src/styles",
+    "src/utils"
+];
+
+folders.forEach(folder => {
+    fs.mkdirSync(folder, { recursive: true });
+});
+
+console.log("🧹 Removing default Vite files...");
+
+fs.removeSync("src/assets/react.svg");
+fs.removeSync("src/App.css");
+
+const appFile =
+    answers.language === "typescript"
+        ? "src/App.tsx"
+        : "src/App.jsx";
+
+const mainFile =
+    answers.language === "typescript"
+        ? "src/main.tsx"
+        : "src/main.jsx";
+
+const viteConfigFile =
+    answers.language === "typescript"
+        ? "vite.config.ts"
+        : "vite.config.js";
+
+if (answers.style === "tailwind") {
+    fs.writeFileSync(
+        viteConfigFile,
+        `
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+});
+`
+    );
+
+    fs.writeFileSync(
+        "src/index.css",
+        `
+@import "tailwindcss";
+`
+    );
+}
+
+if (answers.style === "scss") {
+    fs.removeSync("src/index.css");
+
+    fs.writeFileSync(
+        "src/styles/variables.scss",
+        `
+$primary: #aa3bff;
+$text: #08060d;
+$bg: #fff;
+$border: #e5e4e7;
+`
+    );
+
+    fs.writeFileSync(
+        "src/styles/global.scss",
+        `
+@use "variables" as *;
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+  background: $bg;
+  color: $text;
+}
+`
+    );
+}
+
+if (answers.style === "scss") {
+    fs.writeFileSync(
+        appFile,
+        `
+import "./styles/global.scss";
+
+function App() {
+  return (
+    <div>
+      <h1>Hello SB React 🚀</h1>
+    </div>
+  );
+}
+
+export default App;
+`
+    );
+} else {
+    fs.writeFileSync(
+        appFile,
+        `
+function App() {
+  return (
+    <div>
+      <h1>Hello SB React 🚀</h1>
+    </div>
+  );
+}
+
+export default App;
+`
+    );
+}
+
+if (answers.style === "tailwind") {
+    fs.writeFileSync(
+        mainFile,
+        `
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import "./index.css";
+
+ReactDOM.createRoot(document.getElementById("root")).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+`
+    );
+} else {
+    fs.writeFileSync(
+        mainFile,
+        `
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+
+ReactDOM.createRoot(document.getElementById("root")).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+`
+    );
+}
+
+console.log("");
+console.log("✅ Project setup completed successfully!");
+console.log("");
+console.log(`👉 cd ${answers.projectName}`);
+console.log("👉 npm run dev");
+

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "create-sb-react",
+  "version": "1.0.0",
+  "description": "React Vite CLI",
+  "bin": {
+    "create-sb-react": "./index.js"
+  },
+  "type": "module",
+  "preferGlobal": true,
+  "files": [
+    "index.js"
+  ],
+  "keywords": [
+    "react",
+    "vite",
+    "cli",
+    "tailwind"
+  ],
+  "author": "Arjunan",
+  "license": "ISC",
+  "dependencies": {
+    "chalk": "^5.3.0",
+    "fs-extra": "^11.2.0",
+    "inquirer": "^9.2.15",
+    "ora": "^8.0.1"
+  }
+}