create-bdpa-react-scaffold 1.1.1 → 1.2.1

package/create-ui-lib.js

@@ -90,7 +90,9 @@ write("package.json", `
   "dependencies": {
     "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",
@@ -174,15 +176,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,6 +209,9 @@ 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";
+
+export { default as api, ApiClient } from "./utils/api.js";
+export { hashPassword, verifyPassword, getPasswordStrength, getPasswordStrengthLabel } from "./utils/password.js";
 `);
 
 // -------------------------------
@@ -212,6 +220,7 @@ export { default as Section } from "./components/layout/Section.jsx";
 
 write("src/App.jsx", `
 import { useState } from "react";
+import { Routes, Route, useNavigate } from "react-router-dom";
 import {
   Button,
   Card,
@@ -222,7 +231,9 @@ import {
   Sidebar,
   Modal,
   Tabs,
-  useToast
+  useToast,
+  Login,
+  Register
 } from "./index.js";
 
 const columns = [
@@ -237,10 +248,11 @@ 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 toast = useToast();
+  const navigate = useNavigate();
 
   const tabs = [
     { label: "Overview", content: <p>Welcome to the UI Library demo.</p> },
@@ -256,7 +268,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" }
         ]}
@@ -338,6 +350,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 +533,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 +554,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,6 +747,233 @@ export default function Section({ children, className = "" }) {
 }
 `);
 
+// -------------------------------
+// API Utility
+// -------------------------------
+
+write("src/utils/api.js", `
+/**
+ * API Utility for CRUD operations
+ * 
+ * Usage:
+ * const api = new ApiClient("https://api.example.com");
+ * 
+ * // Create
+ * await api.create("/students", { name: "John", email: "john@example.com" });
+ * 
+ * // Read
+ * await api.getAll("/students");
+ * await api.getOne("/students/1");
+ * 
+ * // Update
+ * await api.update("/students/1", { name: "Jane" });
+ * 
+ * // Delete
+ * await api.delete("/students/1");
+ */
+
+export class ApiClient {
+  constructor(baseURL = "") {
+    this.baseURL = baseURL;
+  }
+
+  /**
+   * Make a fetch request with common headers and error handling
+   */
+  async request(endpoint, options = {}) {
+    const url = \`\${this.baseURL}\${endpoint}\`;
+    const defaultHeaders = {
+      "Content-Type": "application/json"
+    };
+
+    const config = {
+      headers: { ...defaultHeaders, ...options.headers },
+      ...options
+    };
+
+    try {
+      const response = await fetch(url, config);
+      
+      if (!response.ok) {
+        throw new Error(\`API Error: \${response.status} \${response.statusText}\`);
+      }
+
+      const data = await response.json();
+      return { success: true, data };
+    } catch (error) {
+      console.error("API Request Error:", error);
+      return { success: false, error: error.message };
+    }
+  }
+
+  /**
+   * GET - Fetch all resources
+   */
+  async getAll(endpoint, options = {}) {
+    return this.request(endpoint, {
+      method: "GET",
+      ...options
+    });
+  }
+
+  /**
+   * GET - Fetch a single resource by ID
+   */
+  async getOne(endpoint, options = {}) {
+    return this.request(endpoint, {
+      method: "GET",
+      ...options
+    });
+  }
+
+  /**
+   * POST - Create a new resource
+   */
+  async create(endpoint, data, options = {}) {
+    return this.request(endpoint, {
+      method: "POST",
+      body: JSON.stringify(data),
+      ...options
+    });
+  }
+
+  /**
+   * PUT - Update an entire resource
+   */
+  async update(endpoint, data, options = {}) {
+    return this.request(endpoint, {
+      method: "PUT",
+      body: JSON.stringify(data),
+      ...options
+    });
+  }
+
+  /**
+   * PATCH - Partially update a resource
+   */
+  async patch(endpoint, data, options = {}) {
+    return this.request(endpoint, {
+      method: "PATCH",
+      body: JSON.stringify(data),
+      ...options
+    });
+  }
+
+  /**
+   * DELETE - Remove a resource
+   */
+  async delete(endpoint, options = {}) {
+    return this.request(endpoint, {
+      method: "DELETE",
+      ...options
+    });
+  }
+}
+
+// Export a default instance (optional - users can create their own)
+export default new ApiClient(import.meta.env.VITE_API_BASE_URL || "");
+`);
+
+// -------------------------------
+// Password Utility
+// -------------------------------
+
+write("src/utils/password.js", `
+import bcrypt from "bcryptjs";
+
+/**
+ * Password Utility for secure password hashing and verification
+ * Uses bcryptjs with salt for secure password storage
+ * 
+ * Usage:
+ * import { hashPassword, verifyPassword } from "./utils/password.js";
+ * 
+ * // Hash a password
+ * const hash = await hashPassword("myPassword123");
+ * 
+ * // Verify a password
+ * const isValid = await verifyPassword("myPassword123", hash);
+ */
+
+const SALT_ROUNDS = 10;
+
+/**
+ * Hash a password with bcryptjs
+ * @param {string} password - The plain text password to hash
+ * @returns {Promise<string>} The hashed password
+ * @throws {Error} If password is empty or invalid
+ */
+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}\`);
+  }
+}
+
+/**
+ * Verify a password against a hash
+ * @param {string} password - The plain text password to verify
+ * @param {string} hash - The hash to compare against
+ * @returns {Promise<boolean>} True if password matches the hash, false otherwise
+ * @throws {Error} If inputs are invalid
+ */
+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}\`);
+  }
+}
+
+/**
+ * Get password strength indicator (0-4)
+ * @param {string} password - The password to evaluate
+ * @returns {number} Strength level: 0=weak, 1=fair, 2=good, 3=strong, 4=very strong
+ */
+export function getPasswordStrength(password) {
+  if (!password) return 0;
+
+  let strength = 0;
+
+  // Length check
+  if (password.length >= 8) strength++;
+  if (password.length >= 12) strength++;
+
+  // Character variety checks
+  if (/[a-z]/.test(password) && /[A-Z]/.test(password)) strength++;
+  if (/\\d/.test(password)) strength++;
+  if (/[!@#\$%^&*(),.?":{}|<>]/.test(password)) strength++;
+
+  return Math.min(strength, 4);
+}
+
+/**
+ * Get password strength label
+ * @param {string} password - The password to evaluate
+ * @returns {string} Human-readable strength label
+ */
+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");

package/package.json

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