create-bdpa-react-scaffold 1.2.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,6 +88,7 @@ write("package.json", `
     "preview": "vite preview"
   },
   "dependencies": {
+    "axios": "^1.6.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.20.0",
@@ -152,7 +153,7 @@ write("index.html", `
     <div id="root"></div>
     <script type="module" src="/src/main.jsx"></script>
   </body>
-</html>
+  </html>
 `);
 
 // -------------------------------
@@ -214,10 +215,6 @@ export { default as api, ApiClient } from "./utils/api.js";
 export { hashPassword, verifyPassword, getPasswordStrength, getPasswordStrengthLabel } from "./utils/password.js";
 `);
 
-// -------------------------------
-// App.jsx (FULL DEMO)
-// -------------------------------
-
 write("src/App.jsx", `
 import { useState } from "react";
 import { Routes, Route, useNavigate } from "react-router-dom";
@@ -231,6 +228,7 @@ import {
   Sidebar,
   Modal,
   Tabs,
+  ApiClient,
   useToast,
   Login,
   Register
@@ -251,8 +249,24 @@ const data = [
 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> },
@@ -329,6 +343,28 @@ function Dashboard() {
             </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>
@@ -752,125 +788,70 @@ export default function Section({ children, className = "" }) {
 // -------------------------------
 
 write("src/utils/api.js", `
+import axios from "axios";
+
 /**
- * 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");
+ * Axios-powered API client with CRUD helpers.
  */
 
 export class ApiClient {
   constructor(baseURL = "") {
-    this.baseURL = baseURL;
-  }
+    this.instance = axios.create({
+      baseURL,
+      headers: { "Content-Type": "application/json" }
+    });
 
-  /**
-   * 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"
-    };
+    this.instance.interceptors.response.use(
+      (res) => res,
+      (err) => {
+        const message = err?.response?.data?.message || err?.message || "Request failed";
+        return Promise.reject(new Error(message));
+      }
+    );
+  }
 
-    const config = {
-      headers: { ...defaultHeaders, ...options.headers },
-      ...options
-    };
+  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 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 };
+      const res = await this.instance.request(config);
+      return { success: true, data: res.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
-    });
+  async getAll(url, config = {}) {
+    return this.request({ url, method: "GET", ...config });
   }
 
-  /**
-   * GET - Fetch a single resource by ID
-   */
-  async getOne(endpoint, options = {}) {
-    return this.request(endpoint, {
-      method: "GET",
-      ...options
-    });
+  async getOne(url, config = {}) {
+    return this.request({ url, method: "GET", ...config });
   }
 
-  /**
-   * POST - Create a new resource
-   */
-  async create(endpoint, data, options = {}) {
-    return this.request(endpoint, {
-      method: "POST",
-      body: JSON.stringify(data),
-      ...options
-    });
+  async create(url, data, config = {}) {
+    return this.request({ url, method: "POST", data, ...config });
   }
 
-  /**
-   * PUT - Update an entire resource
-   */
-  async update(endpoint, data, options = {}) {
-    return this.request(endpoint, {
-      method: "PUT",
-      body: JSON.stringify(data),
-      ...options
-    });
+  async update(url, data, config = {}) {
+    return this.request({ url, method: "PUT", data, ...config });
   }
 
-  /**
-   * PATCH - Partially update a resource
-   */
-  async patch(endpoint, data, options = {}) {
-    return this.request(endpoint, {
-      method: "PATCH",
-      body: JSON.stringify(data),
-      ...options
-    });
+  async patch(url, data, config = {}) {
+    return this.request({ url, method: "PATCH", data, ...config });
   }
 
-  /**
-   * DELETE - Remove a resource
-   */
-  async delete(endpoint, options = {}) {
-    return this.request(endpoint, {
-      method: "DELETE",
-      ...options
-    });
+  async delete(url, config = {}) {
+    return this.request({ url, method: "DELETE", ...config });
   }
 }
 
-// Export a default instance (optional - users can create their own)
 export default new ApiClient(import.meta.env.VITE_API_BASE_URL || "");
 `);
 
@@ -881,28 +862,8 @@ export default new ApiClient(import.meta.env.VITE_API_BASE_URL || "");
 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");
@@ -912,17 +873,10 @@ export async function hashPassword(password) {
     const hash = await bcrypt.hash(password, SALT_ROUNDS);
     return hash;
   } catch (error) {
-    throw new Error(\`Error hashing password: \${error.message}\`);
+    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");
@@ -936,37 +890,24 @@ export async function verifyPassword(password, hash) {
     const isValid = await bcrypt.compare(password, hash);
     return isValid;
   } catch (error) {
-    throw new Error(\`Error verifying password: \${error.message}\`);
+    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 (/\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);
@@ -979,9 +920,10 @@ 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.2.1",
+  "version": "1.3.1",
   "private": false,
   "description": "Scaffold a React + Tailwind UI library demo via Vite.",
   "bin": {