create-bdpa-react-scaffold 0.1.1

package/README.md

@@ -0,0 +1,85 @@
+# create-bdpa-react-scaffold
+
+Scaffold a ready-to-run React + Tailwind UI library demo built with Vite. This CLI creates a project with common UI components and a demo app.
+
+## Quick Start
+
+Run with npx (no global install needed):
+
+```bash
+npx create-bdpa-react-scaffold my-app
+```
+
+Then start the dev server:
+
+```bash
+cd my-app
+npm run dev
+```
+
+## Options
+
+- `--pm <npm|yarn|pnpm>`: Choose package manager (default: `npm`).
+- `--no-install`: Skip dependency installation.
+- `--force`: Allow writing into a non-empty directory.
+
+Examples:
+
+```bash
+npx create-bdpa-react-scaffold my-app --pm pnpm
+npx create-bdpa-react-scaffold . --force --no-install
+```
+
+## What You Get
+
+- Vite + React 18 project
+- Tailwind CSS configured (`postcss.config.cjs`, `tailwind.config.cjs`)
+- Example UI components (Button, Card, Input, FormField, Table, Navbar, Sidebar, Modal, Tabs, Toast)
+- Simple Auth pages (Login, Register)
+- Demo app and wiring
+
+## Local Development (for this CLI)
+
+Link the CLI locally to test changes without publishing:
+
+```bash
+npm install
+npm link
+
+# Now you can run it from anywhere
+create-bdpa-react-scaffold my-test-app --no-install
+```
+
+To unlink later:
+
+```bash
+npm unlink -g create-bdpa-react-scaffold
+```
+
+## Publishing to npm
+
+1) Pick a unique package name. This repo uses `create-bdpa-react-scaffold`.
+
+2) Login to npm:
+
+```bash
+npm login
+```
+
+3) Publish (public):
+
+```bash
+npm publish --access public
+```
+
+If your package name is scoped (e.g. `@yourname/create-bdpa-react-scaffold`), include `--access public` on first publish.
+
+After publishing, users can run:
+
+```bash
+npx create-bdpa-react-scaffold my-app
+```
+
+## License
+
+UNLICENSED (update as desired).

package/create-ui-lib.js

@@ -0,0 +1,714 @@
+#!/usr/bin/env node
+// create-ui-lib.js
+// Full upgraded scaffolding script for a complete React + Tailwind UI library
+
+const fs = require("fs");
+const path = require("path");
+const { spawnSync } = require("child_process");
+
+// -------------------------------
+// CLI args parsing
+// -------------------------------
+const argv = process.argv.slice(2);
+let targetArg = ".";
+let packageManager = "npm";
+let doInstall = true;
+let forceWrite = false;
+
+for (let i = 0; i < argv.length; i++) {
+  const a = argv[i];
+  if (!a) continue;
+  if (a === "--pm" && i + 1 < argv.length) {
+    packageManager = argv[i + 1];
+    i++;
+    continue;
+  }
+  if (a === "--no-install") {
+    doInstall = false;
+    continue;
+  }
+  if (a === "--force") {
+    forceWrite = true;
+    continue;
+  }
+  if (!a.startsWith("-")) {
+    targetArg = a;
+    continue;
+  }
+}
+
+const BASE_DIR = path.resolve(process.cwd(), targetArg);
+
+function ensureTargetDir(dir, { force } = { force: false }) {
+  if (!fs.existsSync(dir)) {
+    fs.mkdirSync(dir, { recursive: true });
+    return;
+  }
+  const entries = fs.readdirSync(dir).filter((e) => e !== ".git");
+  if (entries.length > 0 && !force) {
+    console.error(`\nDirectory ${dir} is not empty. Use --force to continue.`);
+    process.exit(1);
+  }
+}
+
+function write(filePath, content) {
+  const fullPath = path.join(BASE_DIR, filePath);
+  fs.mkdirSync(path.dirname(fullPath), { recursive: true });
+  fs.writeFileSync(fullPath, content.trimStart(), "utf8");
+  console.log("✔ Created:", filePath);
+}
+
+function installDependencies(pm, cwd) {
+  const pmCmd = pm === "yarn" ? "yarn" : pm === "pnpm" ? "pnpm" : "npm";
+  console.log(`\n📦 Installing dependencies with ${pmCmd}...`);
+  const args = pmCmd === "npm" ? ["install"] : ["install"];
+  const result = spawnSync(pmCmd, args, { stdio: "inherit", cwd });
+  if (result.status !== 0) {
+    console.error(`\n❌ ${pmCmd} install failed.`);
+    process.exit(result.status || 1);
+  }
+  console.log("\n✅ Dependencies installed.");
+}
+
+// Prepare target directory
+ensureTargetDir(BASE_DIR, { force: forceWrite });
+
+// -------------------------------
+// Root files
+// -------------------------------
+
+write("package.json", `
+{
+  "name": "my-ui-lib",
+  "version": "2.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "lucide-react": "^0.344.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.47",
+    "tailwindcss": "^3.4.0",
+    "vite": "^5.0.0"
+  }
+}
+`);
+
+write("postcss.config.cjs", `
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+};
+`);
+
+write("tailwind.config.cjs", `
+module.exports = {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,jsx,ts,tsx}"
+  ],
+  theme: {
+    extend: {
+      colors: {
+        milwaukeeBlue: "#2563eb",
+        milwaukeeGold: "#fbbf24"
+      }
+    }
+  },
+  plugins: []
+};
+`);
+
+write("vite.config.mts", `
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react-swc";
+
+export default defineConfig({
+  plugins: [react()]
+});
+`);
+
+write("index.html", `
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>My UI Library Demo</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body class="bg-gray-100">
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
+`);
+
+// -------------------------------
+// src root
+// -------------------------------
+
+write("src/index.css", `
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  @apply bg-gray-100 text-gray-900;
+}
+
+h1, h2, h3, h4 {
+  @apply font-semibold;
+}
+`);
+
+write("src/main.jsx", `
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.jsx";
+import "./index.css";
+import { ToastProvider } from "./components/ui/ToastProvider.jsx";
+
+ReactDOM.createRoot(document.getElementById("root")).render(
+  <React.StrictMode>
+    <ToastProvider>
+      <App />
+    </ToastProvider>
+  </React.StrictMode>
+);
+`);
+
+write("src/index.js", `
+export { default as Button } from "./components/ui/Button.jsx";
+export { default as Card } from "./components/ui/Card.jsx";
+export { default as Input } from "./components/ui/Input.jsx";
+export { default as FormField } from "./components/ui/FormField.jsx";
+export { default as Table } from "./components/ui/Table.jsx";
+export { default as Navbar } from "./components/ui/Navbar.jsx";
+export { default as Sidebar } from "./components/ui/Sidebar.jsx";
+export { default as Modal } from "./components/ui/Modal.jsx";
+export { default as Tabs } from "./components/ui/Tabs.jsx";
+export { ToastProvider, useToast } from "./components/ui/ToastProvider.jsx";
+
+export { default as Login } from "./components/auth/Login.jsx";
+export { default as Register } from "./components/auth/Register.jsx";
+
+export { default as Container } from "./components/layout/Container.jsx";
+export { default as Section } from "./components/layout/Section.jsx";
+`);
+
+// -------------------------------
+// App.jsx (FULL DEMO)
+// -------------------------------
+
+write("src/App.jsx", `
+import { useState } from "react";
+import {
+  Button,
+  Card,
+  Input,
+  FormField,
+  Table,
+  Navbar,
+  Sidebar,
+  Modal,
+  Tabs,
+  useToast
+} from "./index.js";
+
+const columns = [
+  { key: "name", label: "Student" },
+  { key: "course", label: "Course" },
+  { key: "status", label: "Status" }
+];
+
+const data = [
+  { name: "Alex", course: "Web Design Fundamentals", status: "Enrolled" },
+  { name: "Jordan", course: "Advanced Web App Design", status: "Waitlisted" },
+  { name: "Taylor", course: "eSports Strategy", status: "Enrolled" }
+];
+
+export default function App() {
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+  const [modalOpen, setModalOpen] = useState(false);
+  const toast = useToast();
+
+  const tabs = [
+    { label: "Overview", content: <p>Welcome to the UI Library demo.</p> },
+    { label: "Components", content: <p>Buttons, Cards, Inputs, Tables, and more.</p> },
+    { label: "Auth", content: <p>Login + Registration pages included.</p> }
+  ];
+
+  return (
+    <div className="flex h-screen overflow-hidden">
+
+      {/* Sidebar */}
+      <Sidebar
+        open={sidebarOpen}
+        onToggle={() => setSidebarOpen(!sidebarOpen)}
+        links={[
+          { label: "Home", href: "#" },
+          { label: "Login", href: "/login" },
+          { label: "Register", href: "/register" }
+        ]}
+      />
+
+      {/* Main content */}
+      <div className="flex-1 flex flex-col">
+
+        {/* Navbar */}
+        <Navbar onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
+
+        {/* Page content */}
+        <div className="p-6 space-y-6 overflow-auto">
+
+          <Tabs tabs={tabs} />
+
+          <div className="grid md:grid-cols-2 gap-6">
+
+            {/* Form/Card example */}
+            <Card>
+              <h2 className="text-lg font-semibold mb-4">Sample Form</h2>
+
+              <div className="space-y-4">
+                <FormField label="Student Name">
+                  <Input placeholder="e.g. Alex Johnson" />
+                </FormField>
+
+                <FormField label="Email">
+                  <Input type="email" placeholder="student@example.com" />
+                </FormField>
+
+                <FormField label="Course">
+                  <Input placeholder="Web Design Fundamentals" />
+                </FormField>
+
+                <div className="flex gap-2 pt-2">
+                  <Button variant="primary">Save</Button>
+                  <Button variant="secondary">Cancel</Button>
+                </div>
+              </div>
+            </Card>
+
+            {/* Table example */}
+            <Card>
+              <h2 className="text-lg font-semibold mb-4">Enrollment Overview</h2>
+              <Table columns={columns} data={data} />
+            </Card>
+          </div>
+
+          {/* Buttons */}
+          <Card>
+            <h2 className="text-lg font-semibold mb-4">Button Variants</h2>
+            <div className="flex flex-wrap gap-3">
+              <Button variant="primary">Primary</Button>
+              <Button variant="secondary">Secondary</Button>
+              <Button variant="danger">Danger</Button>
+              <Button variant="outline">Outline</Button>
+            </div>
+          </Card>
+
+          {/* Modal + Toast */}
+          <div className="flex gap-4">
+            <Button onClick={() => setModalOpen(true)}>Open Modal</Button>
+            <Button onClick={() => toast.show("This is a toast!", "success")}>
+              Show Toast
+            </Button>
+          </div>
+
+          <Modal open={modalOpen} onClose={() => setModalOpen(false)}>
+            <h2 className="text-lg font-semibold mb-4">Modal Title</h2>
+            <p>This is a modal example.</p>
+            <Button className="mt-4" onClick={() => setModalOpen(false)}>
+              Close
+            </Button>
+          </Modal>
+
+        </div>
+      </div>
+    </div>
+  );
+}
+`);
+
+// -------------------------------
+// UI Components
+// -------------------------------
+
+write("src/components/ui/Button.jsx", `
+export default function Button({
+  variant = "primary",
+  children,
+  className = "",
+  ...props
+}) {
+  const base =
+    "inline-flex items-center justify-center px-4 py-2 rounded-md font-semibold text-sm transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2";
+
+  const variants = {
+    primary:
+      "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500",
+    secondary:
+      "bg-gray-200 text-gray-900 hover:bg-gray-300 focus:ring-gray-400",
+    danger:
+      "bg-red-600 text-white hover:bg-red-700 focus:ring-red-500",
+    outline:
+      "border border-gray-300 text-gray-800 hover:bg-gray-100 focus:ring-gray-400"
+  };
+
+  return (
+    <button
+      className={\`\${base} \${variants[variant]} \${className}\`}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}
+`);
+
+write("src/components/ui/Card.jsx", `
+export default function Card({ children, className = "" }) {
+  return (
+    <div
+      className={\`bg-white shadow-sm rounded-lg p-4 md:p-6 border border-gray-200 \${className}\`}
+    >
+      {children}
+    </div>
+  );
+}
+`);
+
+write("src/components/ui/Input.jsx", `
+export default function Input({ label, className = "", ...props }) {
+  return (
+    <label className="flex flex-col gap-1 text-sm">
+      {label && (
+        <span className="font-medium text-gray-700">
+          {label}
+        </span>
+      )}
+      <input
+        className={\`border border-gray-300 rounded-md px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none text-sm \${className}\`}
+        {...props}
+      />
+    </label>
+  );
+}
+`);
+
+write("src/components/ui/FormField.jsx", `
+export default function FormField({ label, error, children, helperText }) {
+  return (
+    <div className="flex flex-col gap-1 text-sm">
+      {label && (
+        <label className="font-medium text-gray-700">
+          {label}
+        </label>
+      )}
+
+      {children}
+
+      {helperText && !error && (
+        <p className="text-xs text-gray-500">{helperText}</p>
+      )}
+
+      {error && (
+        <p className="text-xs text-red-600">
+          {error}
+        </p>
+      )}
+    </div>
+  );
+}
+`);
+
+write("src/components/ui/Table.jsx", `
+export default function Table({ columns, data }) {
+  return (
+    <div className="overflow-x-auto">
+      <table className="min-w-full border border-gray-200 bg-white rounded-lg overflow-hidden">
+        <thead className="bg-gray-100">
+          <tr>
+            {columns.map((col) => (
+              <th
+                key={col.key}
+                className="px-4 py-2 text-left text-xs font-semibold text-gray-700 border-b border-gray-200"
+              >
+                {col.label}
+              </th>
+            ))}
+          </tr>
+        </thead>
+
+        <tbody>
+          {data.map((row, i) => (
+            <tr
+              key={i}
+              className={i % 2 === 0 ? "bg-white" : "bg-gray-50"}
+            >
+              {columns.map((col) => (
+                <td
+                  key={col.key}
+                  className="px-4 py-2 text-sm text-gray-800 border-b border-gray-100"
+                >
+                  {row[col.key]}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+`);
+
+write("src/components/ui/Navbar.jsx", `
+import { Menu } from "lucide-react";
+
+export default function Navbar({ onMenuClick }) {
+  return (
+    <nav className="bg-white border-b border-gray-200 px-4 py-3 flex items-center justify-between">
+      <button className="md:hidden" onClick={onMenuClick}>
+        <Menu />
+      </button>
+      <h1 className="text-xl font-bold">My UI Library</h1>
+    </nav>
+  );
+}
+`);
+
+write("src/components/ui/Sidebar.jsx", `
+export default function Sidebar({ open, onToggle, links }) {
+  return (
+    <div
+      className={\`
+        fixed md:static inset-y-0 left-0 z-40
+        bg-white border-r border-gray-200
+        h-full w-64 transform
+        transition-transform duration-200
+        \${open ? "translate-x-0" : "-translate-x-full md:translate-x-0"}
+      \`}
+    >
+      <div className="p-4 border-b border-gray-200 flex justify-between items-center">
+        <h2 className="font-semibold">Menu</h2>
+        <button className="md:hidden" onClick={onToggle}>✕</button>
+      </div>
+
+      <ul className="p-4 space-y-2">
+        {links.map((l) => (
+          <li key={l.label}>
+            <a href={l.href} className="block px-2 py-2 rounded hover:bg-gray-100">
+              {l.label}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+`);
+
+write("src/components/ui/Modal.jsx", `
+export default function Modal({ open, onClose, children }) {
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50">
+      <div className="bg-white rounded-lg shadow-lg p-6 w-full max-w-md relative">
+        <button
+          className="absolute top-3 right-3 text-gray-500 hover:text-gray-700"
+          onClick={onClose}
+        >
+          ✕
+        </button>
+
+        {children}
+      </div>
+    </div>
+  );
+}
+`);
+
+write("src/components/ui/Tabs.jsx", `
+import { useState } from "react";
+
+export default function Tabs({ tabs }) {
+  const [active, setActive] = useState(0);
+
+  return (
+    <div>
+      <div className="flex gap-4 border-b border-gray-200">
+        {tabs.map((t, i) => (
+          <button
+            key={i}
+            onClick={() => setActive(i)}
+            className={\`pb-2 text-sm font-medium \${active === i
+              ? "border-b-2 border-blue-600 text-blue-600"
+              : "text-gray-600 hover:text-gray-800"
+            }\`}
+          >
+            {t.label}
+          </button>
+        ))}
+      </div>
+
+      <div className="mt-4">{tabs[active].content}</div>
+    </div>
+  );
+}
+`);
+
+write("src/components/ui/ToastProvider.jsx", `
+import { createContext, useContext, useState } from "react";
+
+const ToastContext = createContext();
+
+export function useToast() {
+  return useContext(ToastContext);
+}
+
+export function ToastProvider({ children }) {
+  const [toasts, setToasts] = useState([]);
+
+  const show = (message, type = "info") => {
+    const id = Date.now();
+    setToasts((t) => [...t, { id, message, type }]);
+    setTimeout(() => {
+      setToasts((t) => t.filter((toast) => toast.id !== id));
+    }, 3000);
+  };
+
+  return (
+    <ToastContext.Provider value={{ show }}>
+      {children}
+
+      <div className="fixed bottom-4 right-4 space-y-3 z-50">
+        {toasts.map((t) => (
+          <div
+            key={t.id}
+            className={\`px-4 py-2 rounded-md shadow text-white \${t.type === "success"
+              ? "bg-green-600"
+              : t.type === "error"
+              ? "bg-red-600"
+              : "bg-gray-800"
+            }\`}
+          >
+            {t.message}
+          </div>
+        ))}
+      </div>
+    </ToastContext.Provider>
+  );
+}
+`);
+
+// -------------------------------
+// Auth Components
+// -------------------------------
+
+write("src/components/auth/Login.jsx", `
+import Button from "../ui/Button.jsx";
+import Input from "../ui/Input.jsx";
+import Card from "../ui/Card.jsx";
+
+export default function Login({ onSubmit }) {
+  return (
+    <div className="flex items-center justify-center min-h-screen bg-gray-100">
+      <Card className="w-full max-w-sm space-y-4">
+        <h2 className="text-xl font-bold">Sign In</h2>
+
+        <Input label="Email" type="email" placeholder="you@example.com" />
+        <Input label="Password" type="password" placeholder="••••••••" />
+
+        <Button className="w-full" onClick={onSubmit}>
+          Sign In
+        </Button>
+
+        <p className="text-sm text-center text-gray-600">
+          Don’t have an account?{" "}
+          <a href="/register" className="text-blue-600 hover:underline">
+            Create one
+          </a>
+        </p>
+      </Card>
+    </div>
+  );
+}`);
+
+write("src/components/auth/Register.jsx", `
+import Button from "../ui/Button.jsx";
+import Input from "../ui/Input.jsx";
+import Card from "../ui/Card.jsx";
+
+export default function Register({ onSubmit }) {
+  return (
+    <div className="flex items-center justify-center min-h-screen bg-gray-100">
+      <Card className="w-full max-w-sm space-y-4">
+        <h2 className="text-xl font-bold">Create Account</h2>
+
+        <Input label="Full Name" placeholder="Your Name" />
+        <Input label="Email" type="email" placeholder="you@example.com" />
+        <Input label="Password" type="password" placeholder="" />
+
+        <Button className="w-full" onClick={onSubmit}>
+          Register
+        </Button>
+
+        <p className="text-sm text-center text-gray-600">
+          Already have an account?{" "}
+          <a href="/login" className="text-blue-600 hover:underline">
+            Sign in
+          </a>
+        </p>
+      </Card>
+    </div>
+  );
+}
+`);
+
+// -------------------------------
+// Layout Components
+// -------------------------------
+
+write("src/components/layout/Container.jsx", `
+export default function Container({ children, className = "" }) {
+  return (
+    <div className={\`max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 \${className}\`}>
+      {children}
+    </div>
+  );
+}
+`);
+
+write("src/components/layout/Section.jsx", `
+export default function Section({ children, className = "" }) {
+  return (
+    <section className={\`py-12 \${className}\`}>
+      {children}
+    </section>
+  );
+}
+`);
+
+console.log("\n✅ UI Library scaffolding complete!");
+console.log("\nNext steps:");
+console.log("  1. npm run dev");
+console.log("  3. Open http://localhost:5173 in your browser\n");
+
+// Install dependencies unless disabled
+if (doInstall) {
+  installDependencies(packageManager, BASE_DIR);
+} else {
+  console.log("\nℹ️ Skipping install (flag --no-install). Run manually later.");
+}

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "create-bdpa-react-scaffold",
+  "version": "0.1.1",
+  "private": false,
+  "description": "Scaffold a React + Tailwind UI library demo via Vite.",
+  "bin": {
+    "create-bdpa-react-scaffold": "./create-ui-lib.js"
+  },
+  "files": [
+    "create-ui-lib.js",
+    "README.md"
+  ],
+  "keywords": [
+    "create",
+    "scaffold",
+    "react",
+    "tailwind",
+    "vite",
+    "ui",
+    "template"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/lxdavis9lxd/create-bdpa-react-scaffold-.git"
+  },
+  "bugs": {
+    "url": "https://github.com/lxdavis9lxd/create-bdpa-react-scaffold-/issues"
+  },
+  "homepage": "https://github.com/lxdavis9lxd/create-bdpa-react-scaffold-#readme",
+  "license": "UNLICENSED",
+  "scripts": {
+    "prepublishOnly": "node -e \"require('fs').accessSync('./create-ui-lib.js');\"",
+    "publish:public": "npm publish --access public"
+  }
+}