create-bdpa-react-scaffold 1.1.1 → 1.3.1

package/README.md

@@ -38,6 +38,7 @@ npx create-bdpa-react-scaffold . --force --no-install
 - Example UI components (Button, Card, Input, FormField, Table, Navbar, Sidebar, Modal, Tabs, Toast)
 - Simple Auth pages (Login, Register)
 - Demo app and wiring
+- Axios-based API client with CRUD helpers (`src/utils/api.js`)
 
 ## Local Development (for this CLI)
 
@@ -81,6 +82,26 @@ After publishing, users can run:
 npx create-bdpa-react-scaffold my-app
 ```
 
+## API (Axios)
+
+- Base URL: set `VITE_API_BASE_URL` in a `.env` file or your environment.
+- Default export `api` is a preconfigured instance; `ApiClient` class is also exported.
+
+Example:
+
+```js
+import api, { ApiClient } from "./src/utils/api";
+
+// Using default instance
+await api.create("/students", { name: "Ada" });
+const { data } = await api.getAll("/students");
+
+// Or create your own client
+const client = new ApiClient("https://api.example.com");
+client.setToken("<jwt>");
+await client.update("/students/1", { name: "Grace" });
+```
+
 ## License
 
 UNLICENSED (update as desired).

package/create-ui-lib.js

@@ -88,9 +88,12 @@ write("package.json", `
     "preview": "vite preview"
   },
   "dependencies": {
+    "axios": "^1.6.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "lucide-react": "^0.344.0"
+    "react-router-dom": "^6.20.0",
+    "lucide-react": "^0.344.0",
+    "bcryptjs": "^2.4.3"
   },
   "devDependencies": {
     "@vitejs/plugin-react-swc": "^3.5.0",
@@ -150,7 +153,7 @@ write("index.html", `
     <div id="root"></div>
     <script type="module" src="/src/main.jsx"></script>
   </body>
-</html>
+  </html>
 `);
 
 // -------------------------------
@@ -174,15 +177,18 @@ h1, h2, h3, h4 {
 write("src/main.jsx", `
 import React from "react";
 import ReactDOM from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
 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>
+    <BrowserRouter>
+      <ToastProvider>
+        <App />
+      </ToastProvider>
+    </BrowserRouter>
   </React.StrictMode>
 );
 `);
@@ -204,14 +210,14 @@ 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)
-// -------------------------------
+export { default as api, ApiClient } from "./utils/api.js";
+export { hashPassword, verifyPassword, getPasswordStrength, getPasswordStrengthLabel } from "./utils/password.js";
+`);
 
 write("src/App.jsx", `
 import { useState } from "react";
+import { Routes, Route, useNavigate } from "react-router-dom";
 import {
   Button,
   Card,
@@ -222,7 +228,10 @@ import {
   Sidebar,
   Modal,
   Tabs,
-  useToast
+  ApiClient,
+  useToast,
+  Login,
+  Register
 } from "./index.js";
 
 const columns = [
@@ -237,10 +246,27 @@ const data = [
   { name: "Taylor", course: "eSports Strategy", status: "Enrolled" }
 ];
 
-export default function App() {
+function Dashboard() {
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const [modalOpen, setModalOpen] = useState(false);
+  const [posts, setPosts] = useState([]);
+  const [loadingPosts, setLoadingPosts] = useState(false);
+  const [postsError, setPostsError] = useState("");
   const toast = useToast();
+  const navigate = useNavigate();
+  const client = new ApiClient("https://jsonplaceholder.typicode.com");
+
+  const fetchPosts = async () => {
+    setLoadingPosts(true);
+    setPostsError("");
+    const res = await client.getAll("/posts?_limit=5");
+    if (res.success) {
+      setPosts(res.data);
+    } else {
+      setPostsError(res.error || "Failed to load posts");
+    }
+    setLoadingPosts(false);
+  };
 
   const tabs = [
     { label: "Overview", content: <p>Welcome to the UI Library demo.</p> },
@@ -256,7 +282,7 @@ export default function App() {
         open={sidebarOpen}
         onToggle={() => setSidebarOpen(!sidebarOpen)}
         links={[
-          { label: "Home", href: "#" },
+          { label: "Home", href: "/" },
           { label: "Login", href: "/login" },
           { label: "Register", href: "/register" }
         ]}
@@ -317,6 +343,28 @@ export default function App() {
             </div>
           </Card>
 
+          {/* Live API Demo */}
+          <Card>
+            <h2 className="text-lg font-semibold mb-4">Live API Demo (JSONPlaceholder)</h2>
+            <div className="flex items-center gap-3 mb-3">
+              <Button onClick={fetchPosts} disabled={loadingPosts}>
+                {loadingPosts ? "Loading..." : "Fetch Posts"}
+              </Button>
+              {postsError && (
+                <span className="text-sm text-red-600">{postsError}</span>
+              )}
+            </div>
+            {posts.length > 0 && (
+              <ul className="list-disc pl-6 space-y-1">
+                {posts.map((p) => (
+                  <li key={p.id} className="text-sm">
+                    <span className="font-medium">#{p.id}</span> {p.title}
+                  </li>
+                ))}
+              </ul>
+            )}
+          </Card>
+
           {/* Modal + Toast */}
           <div className="flex gap-4">
             <Button onClick={() => setModalOpen(true)}>Open Modal</Button>
@@ -338,6 +386,38 @@ export default function App() {
     </div>
   );
 }
+
+export default function App() {
+  const navigate = useNavigate();
+
+  return (
+    <Routes>
+      <Route path="/" element={<Dashboard />} />
+      <Route
+        path="/login"
+        element={
+          <Login
+            onSubmit={() => {
+              alert("Login submitted!");
+              navigate("/");
+            }}
+          />
+        }
+      />
+      <Route
+        path="/register"
+        element={
+          <Register
+            onSubmit={() => {
+              alert("Registration submitted!");
+              navigate("/");
+            }}
+          />
+        }
+      />
+    </Routes>
+  );
+}
 `);
 
 // -------------------------------
@@ -489,6 +569,8 @@ export default function Navbar({ onMenuClick }) {
 `);
 
 write("src/components/ui/Sidebar.jsx", `
+import { Link } from "react-router-dom";
+
 export default function Sidebar({ open, onToggle, links }) {
   return (
     <div
@@ -508,9 +590,9 @@ export default function Sidebar({ open, onToggle, links }) {
       <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">
+            <Link to={l.href} className="block px-2 py-2 rounded hover:bg-gray-100">
               {l.label}
-            </a>
+            </Link>
           </li>
         ))}
       </ul>
@@ -701,14 +783,147 @@ export default function Section({ children, className = "" }) {
 }
 `);
 
+// -------------------------------
+// API Utility
+// -------------------------------
+
+write("src/utils/api.js", `
+import axios from "axios";
+
+/**
+ * Axios-powered API client with CRUD helpers.
+ */
+
+export class ApiClient {
+  constructor(baseURL = "") {
+    this.instance = axios.create({
+      baseURL,
+      headers: { "Content-Type": "application/json" }
+    });
+
+    this.instance.interceptors.response.use(
+      (res) => res,
+      (err) => {
+        const message = err?.response?.data?.message || err?.message || "Request failed";
+        return Promise.reject(new Error(message));
+      }
+    );
+  }
+
+  setToken(token) {
+    if (token) {
+      this.instance.defaults.headers.common["Authorization"] = "Bearer " + token;
+    } else {
+      delete this.instance.defaults.headers.common["Authorization"];
+    }
+  }
+
+  async request(config) {
+    try {
+      const res = await this.instance.request(config);
+      return { success: true, data: res.data };
+    } catch (error) {
+      return { success: false, error: error.message };
+    }
+  }
+
+  async getAll(url, config = {}) {
+    return this.request({ url, method: "GET", ...config });
+  }
+
+  async getOne(url, config = {}) {
+    return this.request({ url, method: "GET", ...config });
+  }
+
+  async create(url, data, config = {}) {
+    return this.request({ url, method: "POST", data, ...config });
+  }
+
+  async update(url, data, config = {}) {
+    return this.request({ url, method: "PUT", data, ...config });
+  }
+
+  async patch(url, data, config = {}) {
+    return this.request({ url, method: "PATCH", data, ...config });
+  }
+
+  async delete(url, config = {}) {
+    return this.request({ url, method: "DELETE", ...config });
+  }
+}
+
+export default new ApiClient(import.meta.env.VITE_API_BASE_URL || "");
+`);
+
+// -------------------------------
+// Password Utility
+// -------------------------------
+
+write("src/utils/password.js", `
+import bcrypt from "bcryptjs";
+
+const SALT_ROUNDS = 10;
+
+export async function hashPassword(password) {
+  if (!password || typeof password !== "string" || password.trim().length === 0) {
+    throw new Error("Password must be a non-empty string");
+  }
+
+  try {
+    const hash = await bcrypt.hash(password, SALT_ROUNDS);
+    return hash;
+  } catch (error) {
+    throw new Error("Error hashing password: " + error.message);
+  }
+}
+
+export async function verifyPassword(password, hash) {
+  if (!password || typeof password !== "string") {
+    throw new Error("Password must be a non-empty string");
+  }
+
+  if (!hash || typeof hash !== "string") {
+    throw new Error("Hash must be a valid string");
+  }
+
+  try {
+    const isValid = await bcrypt.compare(password, hash);
+    return isValid;
+  } catch (error) {
+    throw new Error("Error verifying password: " + error.message);
+  }
+}
+
+export function getPasswordStrength(password) {
+  if (!password) return 0;
+
+  let strength = 0;
+
+  if (password.length >= 8) strength++;
+  if (password.length >= 12) strength++;
+  if (/[a-z]/.test(password) && /[A-Z]/.test(password)) strength++;
+  if (/\d/.test(password)) strength++;
+  if (/[!@#\$%^&*(),.?":{}|<>]/.test(password)) strength++;
+
+  return Math.min(strength, 4);
+}
+
+export function getPasswordStrengthLabel(password) {
+  const levels = ["Weak", "Fair", "Good", "Strong", "Very Strong"];
+  const strength = getPasswordStrength(password);
+  return levels[strength];
+}
+`);
+
 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

@@ -1,6 +1,6 @@
 {
   "name": "create-bdpa-react-scaffold",
-  "version": "1.1.1",
+  "version": "1.3.1",
   "private": false,
   "description": "Scaffold a React + Tailwind UI library demo via Vite.",
   "bin": {