create-bdpa-react-scaffold 1.7.0 → 1.7.2

package/create-ui-lib.js

@@ -62,9 +62,20 @@ 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 });
+  const result = spawnSync(pmCmd, args, { 
+    stdio: "inherit", 
+    cwd,
+    shell: true,
+    maxBuffer: 10 * 1024 * 1024
+  });
   if (result.status !== 0) {
-    console.error(`\n❌ ${pmCmd} install failed.`);
+    console.error(`\n❌ ${pmCmd} install failed with status code ${result.status}.`);
+    console.error(`\nTroubleshooting tips:`);
+    console.error(`  1. Try again: cd ${cwd} && ${pmCmd} install`);
+    console.error(`  2. Check Node.js version: node --version (requires v18+)`);
+    console.error(`  3. Clear cache: ${pmCmd} cache clean --force`);
+    console.error(`  4. Check internet connection`);
+    console.error(`  5. Delete node_modules and package-lock.json, then retry`);
     process.exit(result.status || 1);
   }
   console.log("\n✅ Dependencies installed.");
@@ -160,6 +171,175 @@ write("index.html", `
   </html>
 `);
 
+write("HOWTO.md", `
+# How-To Guides
+
+## How to Add a New Page
+
+1. **Create the page component** in \`src/pages/\`:
+
+\`\`\`jsx
+// src/pages/Dashboard.jsx
+import React from "react";
+import Container from "../components/layout/Container";
+import Card from "../components/ui/Card";
+
+export default function Dashboard() {
+  return (
+    <Container>
+      <h1 className="text-3xl font-bold mb-6">Dashboard</h1>
+      <Card>
+        <p>Welcome to your dashboard!</p>
+      </Card>
+    </Container>
+  );
+}
+\`\`\`
+
+2. **Add the route** in \`src/App.jsx\`:
+
+\`\`\`jsx
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import Dashboard from "./pages/Dashboard";
+// ... other imports
+
+function App() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/dashboard" element={<Dashboard />} />
+        {/* Add your new route here */}
+      </Routes>
+    </BrowserRouter>
+  );
+}
+\`\`\`
+
+3. **Add navigation link** (optional) in \`src/components/ui/Navbar.jsx\` or \`Sidebar.jsx\`:
+
+\`\`\`jsx
+import { Link } from "react-router-dom";
+
+<Link to="/dashboard" className="text-gray-700 hover:text-blue-600">
+  Dashboard
+</Link>
+\`\`\`
+
+## How to Make a REST API Call
+
+The scaffold includes an Axios-based API client in \`src/utils/api.js\` with built-in CRUD methods.
+
+### Basic API Configuration
+
+Set your API base URL in a \`.env\` file:
+
+\`\`\`bash
+VITE_API_BASE_URL=https://api.example.com
+\`\`\`
+
+### Making API Calls
+
+\`\`\`jsx
+import { useState, useEffect } from "react";
+import api from "../utils/api";
+
+function MyComponent() {
+  const [data, setData] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  // GET request - Fetch all items
+  useEffect(() => {
+    const fetchData = async () => {
+      setLoading(true);
+      try {
+        const response = await api.getAll("/students");
+        setData(response.data);
+      } catch (err) {
+        setError(err.message);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchData();
+  }, []);
+
+  // GET request - Fetch single item
+  const fetchStudent = async (id) => {
+    try {
+      const response = await api.getById("/students", id);
+      console.log(response.data);
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  // POST request - Create new item
+  const createStudent = async () => {
+    try {
+      const newStudent = { name: "Ada Lovelace", grade: "A" };
+      const response = await api.create("/students", newStudent);
+      setData([...data, response.data]);
+    } catch (err) {
+      setError(err.message);
+    }
+  };
+
+  // PUT request - Update item
+  const updateStudent = async (id) => {
+    try {
+      const updates = { name: "Grace Hopper" };
+      const response = await api.update(\`/students/\${id}\`, updates);
+      setData(data.map(item => item.id === id ? response.data : item));
+    } catch (err) {
+      setError(err.message);
+    }
+  };
+
+  // DELETE request - Remove item
+  const deleteStudent = async (id) => {
+    try {
+      await api.delete(\`/students/\${id}\`);
+      setData(data.filter(item => item.id !== id));
+    } catch (err) {
+      setError(err.message);
+    }
+  };
+
+  return (
+    <div>
+      {loading && <p>Loading...</p>}
+      {error && <p className="text-red-500">Error: {error}</p>}
+      {/* Render your data here */}
+    </div>
+  );
+}
+\`\`\`
+
+### Available API Methods
+
+- \`api.getAll(endpoint)\` - GET all items
+- \`api.getById(endpoint, id)\` - GET single item
+- \`api.create(endpoint, data)\` - POST new item
+- \`api.update(endpoint, data)\` - PUT update item
+- \`api.delete(endpoint)\` - DELETE item
+- \`api.setToken(token)\` - Set authorization token
+
+### Custom API Client
+
+Create a custom client for different base URLs:
+
+\`\`\`js
+import { ApiClient } from "./utils/api";
+
+const adminApi = new ApiClient("https://admin.example.com");
+adminApi.setToken("your-jwt-token");
+
+const response = await adminApi.getAll("/users");
+\`\`\`
+`);
+
 // -------------------------------
 // src root
 // -------------------------------

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-bdpa-react-scaffold",
-  "version": "1.7.0",
+  "version": "1.7.2",
   
   "description": "Scaffold a React + Tailwind UI library demo via Vite.",
   "bin": {
@@ -8,8 +8,7 @@
   },
   "files": [
     "create-ui-lib.js",
-    "README.md",
-    "HOWTO.md"
+    "README.md"
   ],
   "keywords": [
     "create",

package/HOWTO.md

@@ -1,166 +0,0 @@
-# How-To Guides
-
-## How to Add a New Page
-
-1. **Create the page component** in `src/pages/`:
-
-```jsx
-// src/pages/Dashboard.jsx
-import React from "react";
-import Container from "../components/layout/Container";
-import Card from "../components/ui/Card";
-
-export default function Dashboard() {
-  return (
-    <Container>
-      <h1 className="text-3xl font-bold mb-6">Dashboard</h1>
-      <Card>
-        <p>Welcome to your dashboard!</p>
-      </Card>
-    </Container>
-  );
-}
-```
-
-2. **Add the route** in `src/App.jsx`:
-
-```jsx
-import { BrowserRouter, Routes, Route } from "react-router-dom";
-import Dashboard from "./pages/Dashboard";
-// ... other imports
-
-function App() {
-  return (
-    <BrowserRouter>
-      <Routes>
-        <Route path="/" element={<Home />} />
-        <Route path="/dashboard" element={<Dashboard />} />
-        {/* Add your new route here */}
-      </Routes>
-    </BrowserRouter>
-  );
-}
-```
-
-3. **Add navigation link** (optional) in `src/components/ui/Navbar.jsx` or `Sidebar.jsx`:
-
-```jsx
-import { Link } from "react-router-dom";
-
-<Link to="/dashboard" className="text-gray-700 hover:text-blue-600">
-  Dashboard
-</Link>
-```
-
-## How to Make a REST API Call
-
-The scaffold includes an Axios-based API client in `src/utils/api.js` with built-in CRUD methods.
-
-### Basic API Configuration
-
-Set your API base URL in a `.env` file:
-
-```bash
-VITE_API_BASE_URL=https://api.example.com
-```
-
-### Making API Calls
-
-```jsx
-import { useState, useEffect } from "react";
-import api from "../utils/api";
-
-function MyComponent() {
-  const [data, setData] = useState([]);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState(null);
-
-  // GET request - Fetch all items
-  useEffect(() => {
-    const fetchData = async () => {
-      setLoading(true);
-      try {
-        const response = await api.getAll("/students");
-        setData(response.data);
-      } catch (err) {
-        setError(err.message);
-      } finally {
-        setLoading(false);
-      }
-    };
-    fetchData();
-  }, []);
-
-  // GET request - Fetch single item
-  const fetchStudent = async (id) => {
-    try {
-      const response = await api.getById("/students", id);
-      console.log(response.data);
-    } catch (err) {
-      console.error(err);
-    }
-  };
-
-  // POST request - Create new item
-  const createStudent = async () => {
-    try {
-      const newStudent = { name: "Ada Lovelace", grade: "A" };
-      const response = await api.create("/students", newStudent);
-      setData([...data, response.data]);
-    } catch (err) {
-      setError(err.message);
-    }
-  };
-
-  // PUT request - Update item
-  const updateStudent = async (id) => {
-    try {
-      const updates = { name: "Grace Hopper" };
-      const response = await api.update(`/students/${id}`, updates);
-      setData(data.map(item => item.id === id ? response.data : item));
-    } catch (err) {
-      setError(err.message);
-    }
-  };
-
-  // DELETE request - Remove item
-  const deleteStudent = async (id) => {
-    try {
-      await api.delete(`/students/${id}`);
-      setData(data.filter(item => item.id !== id));
-    } catch (err) {
-      setError(err.message);
-    }
-  };
-
-  return (
-    <div>
-      {loading && <p>Loading...</p>}
-      {error && <p className="text-red-500">Error: {error}</p>}
-      {/* Render your data here */}
-    </div>
-  );
-}
-```
-
-### Available API Methods
-
-- `api.getAll(endpoint)` - GET all items
-- `api.getById(endpoint, id)` - GET single item
-- `api.create(endpoint, data)` - POST new item
-- `api.update(endpoint, data)` - PUT update item
-- `api.delete(endpoint)` - DELETE item
-- `api.setToken(token)` - Set authorization token
-
-### Custom API Client
-
-Create a custom client for different base URLs:
-
-```js
-import { ApiClient } from "./utils/api";
-
-const adminApi = new ApiClient("https://admin.example.com");
-adminApi.setToken("your-jwt-token");
-
-const response = await adminApi.getAll("/users");
-```