create-bdpa-react-scaffold 2.0.0 → 2.0.2

package/create-ui-lib.js

@@ -658,6 +658,7 @@ export function cn(...inputs) {
 write("src/index.js", `
 export { Button } from "./components/ui/button.jsx";
 
+export { default as Home } from "./pages/Home.jsx";
 export { default as Login } from "./pages/auth/Login.jsx";
 export { default as Register } from "./pages/auth/Register.jsx";
 
@@ -669,8 +670,50 @@ export { hashPassword, verifyPassword, getPasswordStrength, getPasswordStrengthL
 `);
 
 write("src/App.jsx", `
-import { useState } from "react";
 import { Routes, Route, useNavigate } from "react-router-dom";
+import { toast } from "sonner";
+import Home from "./pages/Home.jsx";
+import Login from "./pages/auth/Login.jsx";
+import Register from "./pages/auth/Register.jsx";
+import ComponentTest from "./pages/ComponentTest.jsx";
+
+export default function App() {
+  const navigate = useNavigate();
+
+  return (
+    <Routes>
+      <Route path="/" element={<Home />} />
+      <Route
+        path="/login"
+        element={
+          <Login
+            onSubmit={() => {
+              toast.success("Login submitted!");
+              navigate("/");
+            }}
+          />
+        }
+      />
+      <Route
+        path="/register"
+        element={
+          <Register
+            onSubmit={() => {
+              toast.success("Registration submitted!");
+              navigate("/");
+            }}
+          />
+        }
+      />
+      <Route path="/component-test" element={<ComponentTest />} />
+    </Routes>
+  );
+}
+`);
+
+write("src/pages/Home.jsx", `
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
@@ -691,23 +734,26 @@ import { Skeleton } from "@/components/ui/skeleton";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import { toast } from "sonner";
 import { Menu, Info, CheckCircle } from "lucide-react";
-import { ApiClient } from "./utils/api.js";
-import Login from "./pages/auth/Login.jsx";
-import Register from "./pages/auth/Register.jsx";
-import ComponentTest from "./pages/ComponentTest.jsx";
+import { ApiClient } from "@/utils/api.js";
 
 const enrollmentData = [
   { name: "Alex", course: "Web Design Fundamentals", status: "Enrolled" },
   { name: "Jordan", course: "Advanced Web App Design", status: "Waitlisted" },
-  { name: "Taylor", course: "eSports Strategy", status: "Enrolled" }
+  { name: "Taylor", course: "eSports Strategy", status: "Enrolled" },
 ];
 
-function Dashboard() {
+const navLinks = [
+  { label: "Home", href: "/" },
+  { label: "Login", href: "/login" },
+  { label: "Register", href: "/register" },
+  { label: "Component Test", href: "/component-test" },
+];
+
+export default function Home() {
   const [modalOpen, setModalOpen] = useState(false);
   const [posts, setPosts] = useState([]);
   const [loadingPosts, setLoadingPosts] = useState(false);
   const [postsError, setPostsError] = useState("");
-  const navigate = useNavigate();
   const client = new ApiClient("https://jsonplaceholder.typicode.com");
 
   const fetchPosts = async () => {
@@ -722,13 +768,6 @@ function Dashboard() {
     setLoadingPosts(false);
   };
 
-  const navLinks = [
-    { label: "Home", href: "/" },
-    { label: "Login", href: "/login" },
-    { label: "Register", href: "/register" },
-    { label: "Component Test", href: "/component-test" }
-  ];
-
   return (
     <div className="flex h-screen overflow-hidden">
 
@@ -749,7 +788,6 @@ function Dashboard() {
 
         {/* Navbar */}
         <nav className="bg-white border-b px-4 py-3 flex items-center justify-between">
-          {/* Mobile sidebar trigger */}
           <Sheet>
             <SheetTrigger asChild>
               <Button variant="ghost" size="icon" className="md:hidden">
@@ -774,14 +812,10 @@ function Dashboard() {
         {/* Page content */}
         <div className="p-6 space-y-6 overflow-auto">
 
-          {/* BDPA Logo Section */}
+          {/* BDPA Logo */}
           <Card className="text-center">
             <CardContent className="pt-6">
-              <img
-                src="/BDPA_edited.png"
-                alt="BDPA Logo"
-                className="h-32 mx-auto mb-4"
-              />
+              <img src="/BDPA_edited.png" alt="BDPA Logo" className="h-32 mx-auto mb-4" />
               <h1 className="text-3xl font-bold text-blue-600">Welcome to BDPA</h1>
               <p className="text-gray-600 mt-2">Black Data Professionals Association</p>
             </CardContent>
@@ -808,12 +842,14 @@ function Dashboard() {
                 <AlertDescription>Buttons, Cards, Inputs, Tables, Badges, Selects, and more — all from shadcn/ui.</AlertDescription>
               </Alert>
             </TabsContent>
-            <TabsContent value="auth"><p className="mt-2 text-sm">Login + Registration pages included.</p></TabsContent>
+            <TabsContent value="auth">
+              <p className="mt-2 text-sm">Login + Registration pages included.</p>
+            </TabsContent>
           </Tabs>
 
           <div className="grid md:grid-cols-2 gap-6">
 
-            {/* Form/Card example */}
+            {/* Sample Form */}
             <Card>
               <CardHeader><CardTitle>Sample Form</CardTitle></CardHeader>
               <CardContent className="space-y-4">
@@ -836,7 +872,7 @@ function Dashboard() {
               </CardContent>
             </Card>
 
-            {/* Table example */}
+            {/* Enrollment Table */}
             <Card>
               <CardHeader><CardTitle>Enrollment Overview</CardTitle></CardHeader>
               <CardContent>
@@ -882,7 +918,7 @@ function Dashboard() {
 
           <Separator />
 
-          {/* Badge demos */}
+          {/* Badges */}
           <Card>
             <CardHeader><CardTitle>Badges</CardTitle></CardHeader>
             <CardContent className="flex flex-wrap gap-2">
@@ -893,7 +929,7 @@ function Dashboard() {
             </CardContent>
           </Card>
 
-          {/* Select + Checkbox + Switch + Textarea */}
+          {/* Select / Checkbox / Switch / Textarea / Progress */}
           <div className="grid md:grid-cols-2 gap-6">
             <Card>
               <CardHeader><CardTitle>Select &amp; Switch</CardTitle></CardHeader>
@@ -938,7 +974,7 @@ function Dashboard() {
             </Card>
           </div>
 
-          {/* Skeleton loading demo */}
+          {/* Skeleton */}
           <Card>
             <CardHeader><CardTitle>Skeleton Loading State</CardTitle></CardHeader>
             <CardContent className="space-y-2">
@@ -973,9 +1009,7 @@ function Dashboard() {
           {/* Dialog + Toast */}
           <div className="flex gap-4">
             <Button onClick={() => setModalOpen(true)}>Open Dialog</Button>
-            <Button onClick={() => toast.success("This is a toast!")}>
-              Show Toast
-            </Button>
+            <Button onClick={() => toast.success("This is a toast!")}>Show Toast</Button>
           </div>
 
           <Dialog open={modalOpen} onOpenChange={setModalOpen}>
@@ -993,39 +1027,6 @@ function Dashboard() {
     </div>
   );
 }
-
-export default function App() {
-  const navigate = useNavigate();
-
-  return (
-    <Routes>
-      <Route path="/" element={<Dashboard />} />
-      <Route
-        path="/login"
-        element={
-          <Login
-            onSubmit={() => {
-              toast.success("Login submitted!");
-              navigate("/");
-            }}
-          />
-        }
-      />
-      <Route
-        path="/register"
-        element={
-          <Register
-            onSubmit={() => {
-              toast.success("Registration submitted!");
-              navigate("/");
-            }}
-          />
-        }
-      />
-      <Route path="/component-test" element={<ComponentTest />} />
-    </Routes>
-  );
-}
 `);
 
 // Note: All UI components (Card, Input, Form, Table, Navbar, Tabs, Toast, etc.)
@@ -1221,10 +1222,9 @@ export default function Register({ onSubmit }) {
                 </p>
               </div>
             )}
-          </div>
-          <Button type="submit" className="w-full">
-            Register
-          </Button>
+            <Button type="submit" className="w-full">
+              Register
+            </Button>
           </form>
           <Separator className="my-4" />
           <p className="text-sm text-center text-gray-600">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-bdpa-react-scaffold",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "Scaffold a React + Tailwind + shadcn/ui component demo via Vite.",
   "bin": {
     "create-bdpa-react-scaffold": "create-ui-lib.js"