jamilvite 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,5 @@
+# Changelog
+
+## 0.1.0
+
+- Initial release with React + Vite + Router + Tailwind + W3.CSS templates.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,66 @@
+# jamilvite
+
+Jamilvite scaffolds a Vite + React app with React Router, Tailwind CSS, and W3.CSS preconfigured.
+
+## Install
+
+```bash
+npm install -g jamilvite
+```
+
+## Usage
+
+```bash
+jamilvite create my-app
+```
+
+Or via npx:
+
+```bash
+npx jamilvite@latest create my-app
+```
+
+You'll be prompted for:
+
+- Project name (if not provided)
+- TypeScript (Yes/No)
+- W3.CSS inclusion mode (cdn or local)
+
+## What it generates
+
+```text
+my-app/
+  index.html
+  package.json
+  vite.config.js
+  postcss.config.js
+  tailwind.config.js
+  src/
+    main.jsx
+    App.jsx
+    routes/
+      Router.jsx
+    pages/
+      Home.jsx
+      About.jsx
+      NotFound.jsx
+    components/
+      Nav.jsx
+    styles/
+      index.css
+      w3.css
+```
+
+TypeScript templates use `.tsx` and include `tsconfig.json`.
+
+## Getting started
+
+```bash
+cd my-app
+npm install
+npm run dev
+```
+
+## License
+
+MIT

package/TODO.md

@@ -0,0 +1,6 @@
+# TODO
+
+- Add ESLint + Prettier toggle
+- Add shadcn/ui option
+- Add environment presets
+- Add pages generator command

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "jamilvite",
+  "version": "0.1.0",
+  "description": "Scaffold Vite + React with Router, Tailwind, and W3.CSS",
+  "type": "module",
+  "bin": {
+    "jamilvite": "src/cli.js"
+  },
+  "files": [
+    "src",
+    "templates",
+    "README.md",
+    "LICENSE",
+    "CHANGELOG.md",
+    "TODO.md"
+  ],
+  "keywords": [
+    "vite",
+    "react",
+    "router",
+    "tailwind",
+    "scaffold",
+    "cli"
+  ],
+  "license": "MIT",
+  "author": "",
+  "engines": {
+    "node": ">=18"
+  },
+  "dependencies": {
+    "prompts": "^2.4.2"
+  }
+}

package/src/cli.js

@@ -0,0 +1,133 @@
+#!/usr/bin/env node
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import prompts from 'prompts';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const TEMPLATE_ROOT = path.resolve(__dirname, '..', 'templates');
+
+const usage = `
+Usage:
+  jamilvite create <project-name>
+  npx jamilvite@latest create <project-name>
+`;
+
+function isEmptyDir(entries) {
+  return entries.length === 0 || entries.every((entry) => entry === '.git');
+}
+
+async function pathExists(targetPath) {
+  try {
+    await fs.access(targetPath);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+async function ensureEmptyDir(targetPath) {
+  if (!(await pathExists(targetPath))) {
+    await fs.mkdir(targetPath, { recursive: true });
+    return;
+  }
+
+  const entries = await fs.readdir(targetPath);
+  if (!isEmptyDir(entries)) {
+    throw new Error(`Target directory "${targetPath}" already exists and is not empty.`);
+  }
+}
+
+async function copyTemplate(templateName, targetPath) {
+  const templatePath = path.join(TEMPLATE_ROOT, templateName);
+  await fs.cp(templatePath, targetPath, { recursive: true });
+}
+
+async function updatePackageName(targetPath, projectName) {
+  const packagePath = path.join(targetPath, 'package.json');
+  const raw = await fs.readFile(packagePath, 'utf8');
+  const data = JSON.parse(raw);
+  data.name = projectName;
+  await fs.writeFile(packagePath, `${JSON.stringify(data, null, 2)}\n`);
+}
+
+async function run() {
+  const [command, projectArg] = process.argv.slice(2);
+
+  if (!command || command === '--help' || command === '-h') {
+    console.log(usage.trim());
+    process.exit(0);
+  }
+
+  if (command !== 'create') {
+    console.error(`Unknown command: ${command}`);
+    console.log(usage.trim());
+    process.exit(1);
+  }
+
+  const responses = await prompts([
+    {
+      type: projectArg ? null : 'text',
+      name: 'projectName',
+      message: 'Project name',
+      initial: 'my-app',
+    },
+    {
+      type: 'toggle',
+      name: 'useTypeScript',
+      message: 'Use TypeScript?',
+      initial: false,
+      active: 'Yes',
+      inactive: 'No',
+    },
+    {
+      type: 'select',
+      name: 'w3Mode',
+      message: 'Choose W3.CSS inclusion mode',
+      choices: [
+        { title: 'cdn', value: 'cdn' },
+        { title: 'local', value: 'local' },
+      ],
+      initial: 0,
+    },
+  ]);
+
+  const projectName = projectArg || responses.projectName;
+  const useTypeScript = responses.useTypeScript || false;
+  const w3Mode = responses.w3Mode || 'cdn';
+
+  if (!projectName) {
+    console.error('Project name is required.');
+    process.exit(1);
+  }
+
+  const targetPath = path.resolve(process.cwd(), projectName);
+
+  try {
+    await ensureEmptyDir(targetPath);
+  } catch (error) {
+    console.error(error.message);
+    process.exit(1);
+  }
+
+  const templateName = `template-${useTypeScript ? 'ts' : 'js'}-${w3Mode}`;
+
+  try {
+    await copyTemplate(templateName, targetPath);
+    await updatePackageName(targetPath, projectName);
+  } catch (error) {
+    console.error('Failed to scaffold project.');
+    console.error(error.message);
+    process.exit(1);
+  }
+
+  console.log(`\nSuccess! Created ${projectName} at ${targetPath}`);
+  console.log('Next steps:');
+  console.log(`  cd ${projectName}`);
+  console.log('  npm install');
+  console.log('  npm run dev');
+}
+
+run();

package/templates/template-js-cdn/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Jamilvite App</title>
+    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
+  </head>
+  <body class="bg-slate-50 text-slate-900">
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

package/templates/template-js-cdn/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "jamilvite-app",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.2"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.3",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.47",
+    "tailwindcss": "^3.4.13",
+    "vite": "^5.4.8"
+  }
+}

package/templates/template-js-cdn/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+};

package/templates/template-js-cdn/src/App.jsx

@@ -0,0 +1,15 @@
+import Router from './routes/Router.jsx';
+import Nav from './components/Nav.jsx';
+
+const App = () => {
+  return (
+    <div className="min-h-screen">
+      <Nav />
+      <main className="mx-auto w-full max-w-5xl px-6 py-10">
+        <Router />
+      </main>
+    </div>
+  );
+};
+
+export default App;

package/templates/template-js-cdn/src/components/Nav.jsx

@@ -0,0 +1,28 @@
+import { NavLink } from 'react-router-dom';
+
+const navLinkClass = ({ isActive }) =>
+  `px-4 py-2 rounded-full text-sm font-medium transition ${
+    isActive
+      ? 'bg-white text-slate-900 shadow'
+      : 'text-slate-100 hover:bg-slate-700'
+  }`;
+
+const Nav = () => {
+  return (
+    <header className="w3-bar w3-blue px-6 py-3 shadow">
+      <div className="mx-auto flex w-full max-w-5xl items-center justify-between">
+        <span className="text-lg font-semibold text-white">Jamilvite</span>
+        <nav className="flex items-center gap-2">
+          <NavLink to="/" className={navLinkClass}>
+            Home
+          </NavLink>
+          <NavLink to="/about" className={navLinkClass}>
+            About
+          </NavLink>
+        </nav>
+      </div>
+    </header>
+  );
+};
+
+export default Nav;

package/templates/template-js-cdn/src/main.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import App from './App.jsx';
+import './styles/index.css';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>
+);

package/templates/template-js-cdn/src/pages/About.jsx

@@ -0,0 +1,23 @@
+const About = () => {
+  return (
+    <section className="space-y-4">
+      <h1 className="text-2xl font-semibold text-slate-900">About this stack</h1>
+      <p className="text-slate-600">
+        Jamilvite pairs Vite with React Router, Tailwind CSS, and W3.CSS so you
+        can prototype fast and scale into production-friendly structure.
+      </p>
+      <div className="rounded-2xl bg-slate-900 p-6 text-slate-100">
+        <p className="text-sm uppercase tracking-wide text-slate-300">
+          Quick tips
+        </p>
+        <ul className="mt-4 list-disc space-y-2 pl-6 text-sm">
+          <li>Start building pages inside <code>src/pages</code>.</li>
+          <li>Update navigation in <code>src/components/Nav</code>.</li>
+          <li>Tailwind utilities live in <code>src/styles/index.css</code>.</li>
+        </ul>
+      </div>
+    </section>
+  );
+};
+
+export default About;

package/templates/template-js-cdn/src/pages/Home.jsx

@@ -0,0 +1,42 @@
+const Home = () => {
+  return (
+    <section className="space-y-6">
+      <div className="rounded-3xl bg-white p-8 shadow-sm">
+        <p className="text-sm uppercase tracking-wide text-slate-500">Welcome</p>
+        <h1 className="mt-2 text-3xl font-semibold text-slate-900">
+          Jamilvite React Starter
+        </h1>
+        <p className="mt-4 text-slate-600">
+          This project ships with React Router, Tailwind CSS, and W3.CSS
+          preconfigured so you can start building immediately.
+        </p>
+        <div className="mt-6 flex flex-wrap gap-3">
+          <button className="w3-button w3-white w3-border w3-border-blue w3-round-large">
+            W3 Button
+          </button>
+          <span className="rounded-full bg-slate-900 px-4 py-2 text-sm text-white">
+            Tailwind Badge
+          </span>
+        </div>
+      </div>
+      <div className="grid gap-6 md:grid-cols-2">
+        <article className="rounded-2xl border border-slate-200 bg-white p-6">
+          <h2 className="text-lg font-semibold text-slate-900">Router Ready</h2>
+          <p className="mt-2 text-slate-600">
+            Add new routes inside <code>src/routes/Router</code> and keep your
+            pages organized.
+          </p>
+        </article>
+        <article className="rounded-2xl border border-slate-200 bg-white p-6">
+          <h2 className="text-lg font-semibold text-slate-900">Design System</h2>
+          <p className="mt-2 text-slate-600">
+            Combine Tailwind utility classes with W3 components to speed up
+            layout and styling.
+          </p>
+        </article>
+      </div>
+    </section>
+  );
+};
+
+export default Home;

package/templates/template-js-cdn/src/pages/NotFound.jsx

@@ -0,0 +1,15 @@
+const NotFound = () => {
+  return (
+    <section className="text-center">
+      <p className="text-sm uppercase tracking-wide text-slate-500">404</p>
+      <h1 className="mt-2 text-3xl font-semibold text-slate-900">
+        Page not found
+      </h1>
+      <p className="mt-3 text-slate-600">
+        The page you are looking for does not exist yet.
+      </p>
+    </section>
+  );
+};
+
+export default NotFound;

package/templates/template-js-cdn/src/routes/Router.jsx

@@ -0,0 +1,16 @@
+import { Routes, Route } from 'react-router-dom';
+import Home from '../pages/Home.jsx';
+import About from '../pages/About.jsx';
+import NotFound from '../pages/NotFound.jsx';
+
+const Router = () => {
+  return (
+    <Routes>
+      <Route path="/" element={<Home />} />
+      <Route path="/about" element={<About />} />
+      <Route path="*" element={<NotFound />} />
+    </Routes>
+  );
+};
+
+export default Router;

package/templates/template-js-cdn/src/styles/index.css

@@ -0,0 +1,11 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  color-scheme: light;
+}
+
+body {
+  font-family: 'Inter', system-ui, -apple-system, sans-serif;
+}

package/templates/template-js-cdn/tailwind.config.js

@@ -0,0 +1,10 @@
+export default {
+  content: [
+    './index.html',
+    './src/**/*.{js,jsx,ts,tsx}'
+  ],
+  theme: {
+    extend: {}
+  },
+  plugins: []
+};

package/templates/template-js-cdn/vite.config.js

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()]
+});

package/templates/template-js-local/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Jamilvite App</title>
+  </head>
+  <body class="bg-slate-50 text-slate-900">
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

package/templates/template-js-local/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "jamilvite-app",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.2"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.3",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.47",
+    "tailwindcss": "^3.4.13",
+    "vite": "^5.4.8"
+  }
+}

package/templates/template-js-local/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+};

package/templates/template-js-local/src/App.jsx

@@ -0,0 +1,15 @@
+import Router from './routes/Router.jsx';
+import Nav from './components/Nav.jsx';
+
+const App = () => {
+  return (
+    <div className="min-h-screen">
+      <Nav />
+      <main className="mx-auto w-full max-w-5xl px-6 py-10">
+        <Router />
+      </main>
+    </div>
+  );
+};
+
+export default App;

package/templates/template-js-local/src/components/Nav.jsx

@@ -0,0 +1,28 @@
+import { NavLink } from 'react-router-dom';
+
+const navLinkClass = ({ isActive }) =>
+  `px-4 py-2 rounded-full text-sm font-medium transition ${
+    isActive
+      ? 'bg-white text-slate-900 shadow'
+      : 'text-slate-100 hover:bg-slate-700'
+  }`;
+
+const Nav = () => {
+  return (
+    <header className="w3-bar w3-blue px-6 py-3 shadow">
+      <div className="mx-auto flex w-full max-w-5xl items-center justify-between">
+        <span className="text-lg font-semibold text-white">Jamilvite</span>
+        <nav className="flex items-center gap-2">
+          <NavLink to="/" className={navLinkClass}>
+            Home
+          </NavLink>
+          <NavLink to="/about" className={navLinkClass}>
+            About
+          </NavLink>
+        </nav>
+      </div>
+    </header>
+  );
+};
+
+export default Nav;

package/templates/template-js-local/src/main.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import App from './App.jsx';
+import './styles/index.css';
+import './styles/w3.css';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>
+);

package/templates/template-js-local/src/pages/About.jsx

@@ -0,0 +1,23 @@
+const About = () => {
+  return (
+    <section className="space-y-4">
+      <h1 className="text-2xl font-semibold text-slate-900">About this stack</h1>
+      <p className="text-slate-600">
+        Jamilvite pairs Vite with React Router, Tailwind CSS, and W3.CSS so you
+        can prototype fast and scale into production-friendly structure.
+      </p>
+      <div className="rounded-2xl bg-slate-900 p-6 text-slate-100">
+        <p className="text-sm uppercase tracking-wide text-slate-300">
+          Quick tips
+        </p>
+        <ul className="mt-4 list-disc space-y-2 pl-6 text-sm">
+          <li>Start building pages inside <code>src/pages</code>.</li>
+          <li>Update navigation in <code>src/components/Nav</code>.</li>
+          <li>Tailwind utilities live in <code>src/styles/index.css</code>.</li>
+        </ul>
+      </div>
+    </section>
+  );
+};
+
+export default About;