create-bdpa-react-scaffold 2.0.0 → 2.0.3

package/create-ui-lib.js

@@ -168,7 +168,6 @@ write("package.json", `
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.20.0",
-    "lucide-react": "^0.344.0",
     "bcryptjs": "^2.4.3",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
@@ -658,6 +657,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 +669,134 @@ 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/components/ui/icons.jsx", `
+// Local SVG icon module — inline icon components, no external icon library needed.
+// All icons accept className and other SVG props.
+
+function SvgIcon({ className = "h-4 w-4", children, ...props }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      {...props}
+    >
+      {children}
+    </svg>
+  );
+}
+
+export function Check({ className, ...p }) {
+  return <SvgIcon className={className} {...p}><path d="M20 6 9 17l-5-5" /></SvgIcon>;
+}
+
+export function X({ className, ...p }) {
+  return <SvgIcon className={className} {...p}><path d="M18 6 6 18" /><path d="m6 6 12 12" /></SvgIcon>;
+}
+
+export function Circle({ className, ...p }) {
+  return <SvgIcon className={className} {...p}><circle cx="12" cy="12" r="10" /></SvgIcon>;
+}
+
+export function CheckCircle({ className, ...p }) {
+  return <SvgIcon className={className} {...p}><circle cx="12" cy="12" r="10" /><path d="m9 12 2 2 4-4" /></SvgIcon>;
+}
+
+export function AlertCircle({ className, ...p }) {
+  return <SvgIcon className={className} {...p}><circle cx="12" cy="12" r="10" /><line x1="12" y1="8" x2="12" y2="12" /><line x1="12" y1="16" x2="12.01" y2="16" /></SvgIcon>;
+}
+
+export function Info({ className, ...p }) {
+  return <SvgIcon className={className} {...p}><circle cx="12" cy="12" r="10" /><path d="M12 16v-4" /><path d="M12 8h.01" /></SvgIcon>;
+}
+
+export function Menu({ className, ...p }) {
+  return <SvgIcon className={className} {...p}><line x1="4" x2="20" y1="6" y2="6" /><line x1="4" x2="20" y1="12" y2="12" /><line x1="4" x2="20" y1="18" y2="18" /></SvgIcon>;
+}
+
+export function Search({ className, ...p }) {
+  return <SvgIcon className={className} {...p}><circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" /></SvgIcon>;
+}
+
+export function ChevronDown({ className, ...p }) {
+  return <SvgIcon className={className} {...p}><path d="m6 9 6 6 6-6" /></SvgIcon>;
+}
+
+export function ChevronUp({ className, ...p }) {
+  return <SvgIcon className={className} {...p}><path d="m18 15-6-6-6 6" /></SvgIcon>;
+}
+
+export function ChevronRight({ className, ...p }) {
+  return <SvgIcon className={className} {...p}><path d="m9 18 6-6-6-6" /></SvgIcon>;
+}
+
+export function ChevronLeft({ className, ...p }) {
+  return <SvgIcon className={className} {...p}><path d="m15 18-6-6 6-6" /></SvgIcon>;
+}
+
+export function ArrowRight({ className, ...p }) {
+  return <SvgIcon className={className} {...p}><path d="M5 12h14" /><path d="m12 5 7 7-7 7" /></SvgIcon>;
+}
+
+export function ArrowLeft({ className, ...p }) {
+  return <SvgIcon className={className} {...p}><path d="m12 19-7-7 7-7" /><path d="M19 12H5" /></SvgIcon>;
+}
+
+// Aliases
+export const ChevronDownIcon = ChevronDown;
+export const ChevronLeftIcon = ChevronLeft;
+export const ChevronRightIcon = ChevronRight;
+`);
+
+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";
@@ -690,24 +816,27 @@ import { Textarea } from "@/components/ui/textarea";
 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 { Menu, Info, CheckCircle } from "@/components/ui/icons";
+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" },
+];
+
+const navLinks = [
+  { label: "Home", href: "/" },
+  { label: "Login", href: "/login" },
+  { label: "Register", href: "/register" },
+  { label: "Component Test", href: "/component-test" },
 ];
 
-function Dashboard() {
+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 +851,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 +871,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 +895,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 +925,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 +955,7 @@ function Dashboard() {
               </CardContent>
             </Card>
 
-            {/* Table example */}
+            {/* Enrollment Table */}
             <Card>
               <CardHeader><CardTitle>Enrollment Overview</CardTitle></CardHeader>
               <CardContent>
@@ -882,7 +1001,7 @@ function Dashboard() {
 
           <Separator />
 
-          {/* Badge demos */}
+          {/* Badges */}
           <Card>
             <CardHeader><CardTitle>Badges</CardTitle></CardHeader>
             <CardContent className="flex flex-wrap gap-2">
@@ -893,7 +1012,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 +1057,7 @@ function Dashboard() {
             </Card>
           </div>
 
-          {/* Skeleton loading demo */}
+          {/* Skeleton */}
           <Card>
             <CardHeader><CardTitle>Skeleton Loading State</CardTitle></CardHeader>
             <CardContent className="space-y-2">
@@ -973,9 +1092,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 +1110,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 +1305,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">
@@ -1266,7 +1349,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/comp
 import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { toast } from "sonner";
-import { CheckCircle, Info, AlertCircle } from "lucide-react";
+import { CheckCircle, Info, AlertCircle } from "@/components/ui/icons";
 
 const sampleRows = [
   { id: 1, name: "Ada Lovelace", role: "Student", status: "Active" },

package/package.json

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