@rellcodes16/devkit 1.0.0

package/src/templates/react/index.js

@@ -0,0 +1,172 @@
+export function reactAppJsx(appname, options) {
+  const imports = [];
+  const routerImport = options.router
+    ? `import { BrowserRouter, Routes, Route } from "react-router-dom";`
+    : "";
+
+  if (routerImport) imports.push(routerImport);
+
+  const homeComponent = `
+function Home() {
+  return (
+    <div className="min-h-screen bg-gray-50 flex items-center justify-center">
+      <div className="text-center">
+        <h1 className="text-4xl font-bold text-gray-900 mb-2">${appname}</h1>
+        <p className="text-gray-500">Your app is ready. Start building.</p>
+      </div>
+    </div>
+  );
+}`;
+
+  const simpleBody = `
+  return (
+    <div className="min-h-screen bg-gray-50 flex items-center justify-center">
+      <div className="text-center">
+        <h1 className="text-4xl font-bold text-gray-900 mb-2">${appname}</h1>
+        <p className="text-gray-500">Your app is ready. Start building.</p>
+      </div>
+    </div>
+  );`;
+
+  const routerBody = `
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<Home />} />
+      </Routes>
+    </BrowserRouter>
+  );`;
+
+  const body = options.router ? routerBody : simpleBody;
+  const extras = options.router ? homeComponent : "";
+
+  return `${imports.join("\n")}
+${extras}
+export default function App() {${body}
+}
+`;
+}
+
+export function reactIndexCss() {
+  return `@import "tailwindcss";
+
+/* Custom base styles */
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: Inter, system-ui, -apple-system, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+`;
+}
+
+export function reactViteConfig() {
+  return `import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+});
+`;
+}
+
+export function reactGitignore() {
+  return `node_modules/
+dist/
+.env
+.env.local
+*.log
+.DS_Store
+`;
+}
+
+export function reactEnv() {
+  return `VITE_API_URL=http://localhost:3000/api
+`;
+}
+
+export function reactApiUtil() {
+  return `import axios from "axios";
+
+const api = axios.create({
+  baseURL: import.meta.env.VITE_API_URL,
+  headers: {
+    "Content-Type": "application/json",
+  },
+});
+
+// Request interceptor — attach auth tokens, etc.
+api.interceptors.request.use(
+  (config) => {
+    // const token = localStorage.getItem("token");
+    // if (token) config.headers.Authorization = \`Bearer \${token}\`;
+    return config;
+  },
+  (error) => Promise.reject(error)
+);
+
+// Response interceptor — handle global errors
+api.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    if (error.response?.status === 401) {
+      // Handle unauthorized — e.g. redirect to login
+    }
+    return Promise.reject(error);
+  }
+);
+
+export default api;
+`;
+}
+
+export function reactReadme(appname, options) {
+  const stackLines = [
+    "- React + Vite",
+    "- Tailwind CSS v4",
+    "- Lucide React (icons)",
+    "- clsx",
+  ];
+  if (options.router) stackLines.push("- React Router DOM");
+  if (options.axios) stackLines.push("- Axios (pre-configured client)");
+
+  return `# ${appname}
+
+Scaffolded with [devkit](https://github.com/rellcodes16/devkit).
+
+## Stack
+
+${stackLines.join("\n")}
+
+## Getting started
+
+\`\`\`bash
+cp .env.example .env
+npm run dev
+\`\`\`
+
+## Project structure
+
+\`\`\`
+src/
+  components/   # Reusable UI components
+  pages/        # Page-level components
+  hooks/        # Custom React hooks
+  utils/        # Helper functions${options.axios ? "\n    api.js      # Pre-configured axios instance" : ""}
+  assets/       # Static assets
+  App.jsx       # Root component
+  main.jsx      # Entry point
+\`\`\`
+
+## Environment variables
+
+| Variable | Description |
+|---|---|
+| \`VITE_API_URL\` | Backend API base URL |
+`;
+}

package/src/utils.js

@@ -0,0 +1,40 @@
+import { execa } from "execa";
+import kleur from "kleur";
+
+export function printStep(message) {
+  console.log(`  ${kleur.gray(message)}`);
+}
+
+export function printSuccess(message) {
+  console.log(`\n  ${kleur.green("✔")}  ${kleur.green(message)}`);
+}
+
+export function printError(message) {
+  console.error(`\n  ${kleur.red("✖")}  ${kleur.red(message)}\n`);
+}
+
+export function printDivider() {
+  console.log(kleur.gray("  ─────────────────────────────────────────"));
+}
+
+export async function runCommand(cmd, args, cwd, label) {
+  printStep(label);
+  try {
+    await execa(cmd, args, { cwd, stdio: "pipe" });
+  } catch (err) {
+    printError(`Failed: ${label}`);
+    console.error(err.stderr || err.message);
+    process.exit(1);
+  }
+}
+
+export function printDoneMessage(appname, devCmd, extraLines = []) {
+  console.log(`
+  ${kleur.bold().green("Project ready!")}
+
+  ${kleur.gray("Next steps:")}
+    ${kleur.cyan(`cd ${appname}`)}
+    ${kleur.cyan(devCmd)}
+${extraLines.map((l) => `    ${kleur.gray(l)}`).join("\n")}
+`);
+}