@seip/blue-bird 0.3.1 → 0.3.4

package/frontend/resources/js/pages/About.jsx

@@ -1,16 +1,34 @@
-import React from 'react';
-
-export default function About() {
-  return (
-    <div className='p-4'>
-      <h1 className='text-xl font-bold text-gray-900 mb-4'>About Blue Bird</h1>
-      <p className='text-gray-500 leading-1.6'>
-        Blue Bird is a modern framework designed to bridge the gap between backend routing and frontend interactivity.
-        It provides a seamless developer experience for building fast, reactive web applications.
-      </p>
-      <p className='text-red-500 text-xl mt-8  '>
-        Check your console JS
-      </p>
-    </div>
-  );
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+export default function About() {
+  return (
+    <div
+      className="bg-white dark:bg-slate-900 text-gray-900 dark:text-gray-100 min-h-screen"
+    >
+      <nav
+        className='bg-white dark:bg-slate-900 text-gray-900 dark:text-gray-100 border-b border-gray-200 dark:border-slate-800 px-4 py-4 flex justify-between items-center gap-4 sticky top-0 z-10'
+      >
+        <div className='font-bold text-xl text-blue-600 dark:text-blue-400'>
+          Blue Bird
+        </div>
+        <div className='flex justify-between items-center gap-4'>
+          <Link to="/" className='text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'>Home</Link>
+          <Link to="/about" className='text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'>About</Link>
+        </div>
+      </nav>
+      <main className='max-w-7xl mx-auto'>
+        <div className='p-4'>
+          <h1 className='text-xl font-bold text-gray-900 dark:text-gray-100 mb-4'>About Blue Bird</h1>
+          <p className='text-gray-500 dark:text-gray-400 leading-1.6'>
+            Blue Bird is a modern framework designed to bridge the gap between backend routing and frontend interactivity.
+            It provides a seamless developer experience for building fast, reactive web applications.
+          </p>
+          <p className='text-red-500 text-xl mt-8  '>
+            Check your console JS
+          </p>
+        </div>
+      </main>
+    </div>
+  );
 }

package/frontend/resources/js/pages/Home.jsx

@@ -1,68 +1,93 @@
-import React, { useEffect } from 'react';
-
-export default function Home() {
-  useEffect(() => {
-    // Example API call to the backend
-    fetch("http://localhost:3000/login", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({
-        email: "example@example.com",
-        password: "myPassword123"
-      }),
-    })
-      .then((response) => response.json())
-      .then((data) => console.log('Backend response:', data))
-      .catch((error) => console.error('Error fetching from backend:', error));
-  }, []);
-
-  return (
-    <div className='text-center p-4'>
-      <header className='mb-4'>
-        <h1 className='text-3xl font-bold bg-gradient-to-r from-blue-500 to-blue-600 bg-clip-text text-transparent mb-4'>
-          Welcome to Blue Bird
-        </h1>
-        <p className='text-gray-500 max-w-600px mx-auto'>
-          The elegant, fast, and weightless framework for modern web development.
-        </p>
-      </header>
-
-      <div className='flex gap-4 justify-center mb-8'>
-        <a
-          href="https://seip25.github.io/Blue-bird/en.html"
-          target="_blank"
-          rel="noopener noreferrer"
-          className='bg-blue-600 text-white px-4 py-2 rounded-lg font-semibold transition-colors hover:bg-blue-400'
-        >
-          Documentation (Eng)
-        </a>
-        <a
-          href="https://seip25.github.io/Blue-bird/"
-          target="_blank"
-          rel="noopener noreferrer"
-          className='bg-blue-50 text-blue-500 px-4 py-2 rounded-lg font-semibold transition-colors hover:bg-blue-100  '
-        >
-          Documentación (Esp)
-
-        </a>
-      </div>
-
-      <div className='mt-8 grid grid-cols-1 md:grid-cols-3 gap-4 max-w-1000px mx-auto'>
-        <div className='p-4 rounded-lg bg-gray-50 shadow-sm'>
-          <h3 className='text-blue-500 font-semibold text-xl mb-4'>Lightweight</h3>
-          <p>Built with performance and simplicity in mind.</p>
-        </div>
-        <div className='p-4 rounded-lg bg-gray-50 shadow-sm'>
-          <h3 className='text-blue-500 font-semibold text-xl mb-4'>React Powered</h3>
-          <p>Full React + Vite integration .</p>
-        </div>
-        <div className='p-4 rounded-lg bg-gray-50 shadow-sm'>
-          <h3 className='text-blue-500 font-semibold text-xl mb-4'>Express Backend</h3>
-          <p>Robust and scalable backend architecture.</p>
-        </div>
-      </div>
-    </div>
-  );
-}
+import React, { useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import Card from '../blue-bird/components/Card';
+
+export default function Home() {
+  useEffect(() => {
+    // Example API call to the backend
+    fetch("http://localhost:3000/login", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        email: "example@example.com",
+        password: "myPassword123"
+      }),
+    })
+      .then((response) => response.json())
+      .then((data) => console.log('Backend response:', data))
+      .catch((error) => console.error('Error fetching from backend:', error));
+  }, []);
+
+  return (
+    <div
+      className="bg-white dark:bg-slate-900 text-gray-900 dark:text-gray-100 min-h-screen"
+    >
+      <nav
+        className='bg-white dark:bg-slate-900 text-gray-900 dark:text-gray-100 border-b border-gray-200 dark:border-slate-800 px-4 py-4 flex justify-between items-center gap-4 sticky top-0 z-10'
+      >
+        <div className='font-bold text-xl text-blue-600 dark:text-blue-400'>
+          Blue Bird
+        </div>
+        <div className='flex justify-between items-center gap-4'>
+          <Link to="/" className='text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'>Home</Link>
+          <Link to="/about" className='text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'>About</Link>
+        </div>
+      </nav>
+      <main className='max-w-7xl mx-auto'>
+        <div className='text-center p-4'>
+          <header className='mb-4'>
+            <h1 className='text-3xl font-bold bg-gradient-to-r from-blue-500 to-blue-600 dark:from-blue-400 dark:to-blue-500 bg-clip-text text-transparent mb-4'>
+              Welcome to Blue Bird
+            </h1>
+            <p className='text-gray-500 dark:text-gray-400 max-w-600px mx-auto'>
+              The elegant, fast, and weightless framework for modern web development.
+            </p>
+          </header>
+
+          <Card title={" Documentation (Eng)"} className='mt-8 border-none shadow-none'>
+            <div className='flex gap-4 justify-center mb-8'>
+              <a
+                href="https://seip25.github.io/Blue-bird/en.html"
+                target="_blank"
+                rel="noopener noreferrer"
+                className='bg-blue-600 text-white px-4 py-2 rounded-lg font-semibold transition-colors hover:bg-blue-500 dark:hover:bg-blue-700'
+              >
+                Documentation(Eng)
+
+              </a>
+              <a
+                href="https://seip25.github.io/Blue-bird/"
+                target="_blank"
+                rel="noopener noreferrer"
+                className='bg-blue-50 dark:bg-slate-800 text-blue-500 dark:text-blue-400 px-4 py-2 rounded-lg font-semibold transition-colors hover:bg-blue-100 dark:hover:bg-slate-700'
+              >
+                Documentación (Esp)
+
+              </a>
+            </div>
+          </Card>
+
+          <Card className='mt-4 border-none shadow-none'>
+            <div className='mt-8 grid grid-cols-1 md:grid-cols-3 gap-4 max-w-1000px mx-auto'>
+              <div className='p-4 rounded-lg bg-gray-50 dark:bg-slate-800 shadow-sm'>
+                <h3 className='text-blue-500 dark:text-blue-400 font-semibold text-xl mb-4'>Lightweight</h3>
+                <p className="dark:text-slate-300">Built with performance and simplicity in mind.</p>
+              </div>
+              <div className='p-4 rounded-lg bg-gray-50 dark:bg-slate-800 shadow-sm'>
+                <h3 className='text-blue-500 dark:text-blue-400 font-semibold text-xl mb-4'>React Powered</h3>
+                <p className="dark:text-slate-300">Full React + Vite integration .</p>
+              </div>
+              <div className='p-4 rounded-lg bg-gray-50 dark:bg-slate-800 shadow-sm'>
+                <h3 className='text-blue-500 dark:text-blue-400 font-semibold text-xl mb-4'>Express Backend</h3>
+                <p className="dark:text-slate-300">Robust and scalable backend architecture.</p>
+              </div>
+            </div>
+          </Card>
+
+        </div>
+      </main>
+    </div>
+  );
+}

package/package.json

@@ -1,55 +1,56 @@
-{
-  "name": "@seip/blue-bird",
-  "version": "0.3.1",
-  "description": "Express + React opinionated framework with SPA or API architecture and built-in JWT auth",
-  "type": "module",
-  "bin": {
-    "blue-bird": "core/cli/init.js"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/seip25/Blue-bird.git"
-  },
-  "keywords": [
-    "express",
-    "react",
-    "framework",
-    "vite"
-  ],
-  "author": "Seip25",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/seip25/Blue-bird/issues"
-  },
-  "homepage": "https://seip25.github.io/Blue-bird/",
-  "scripts": {
-    "dev": "node --watch --env-file=.env backend/index.js",
-    "start": "node --env-file=.env backend/index.js",
-    "create-react-app": "node core/cli/react.js",
-    "react": "node core/cli/react.js",
-    "init": "node core/cli/init.js",
-    "route": "node core/cli/route.js",
-    "component": "node core/cli/component.js",
-    "swagger-install": "node core/cli/swagger.js",
-    "vite:dev": "vite",
-    "vite:build": "vite build"
-  },
-  "dependencies": {
-    "chalk": "^5.6.2",
-    "cookie-parser": "^1.4.7",
-    "cors": "^2.8.6",
-    "express": "^5.2.1",
-    "express-rate-limit": "^8.2.1",
-    "helmet": "^8.1.0",
-    "jsonwebtoken": "^9.0.2",
-    "multer": "^2.0.2",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
-    "react-router-dom": "7.13.1",
-    "xss": "^1.0.15"
-  },
-  "devDependencies": {
-    "@vitejs/plugin-react": "^4.2.0",
-    "vite": "7.3.1"
-  }
-}
+{
+  "name": "@seip/blue-bird",
+  "version": "0.3.4",
+  "description": "Express + React opinionated framework with SPA or API architecture and built-in JWT auth",
+  "type": "module",
+  "bin": {
+    "blue-bird": "core/cli/init.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/seip25/Blue-bird.git"
+  },
+  "keywords": [
+    "express",
+    "react",
+    "framework",
+    "vite"
+  ],
+  "author": "Seip25",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/seip25/Blue-bird/issues"
+  },
+  "homepage": "https://seip25.github.io/Blue-bird/",
+  "scripts": {
+    "dev": "node --watch --env-file=.env backend/index.js",
+    "start": "node --env-file=.env backend/index.js",
+    "create-react-app": "node core/cli/react.js",
+    "react": "node core/cli/react.js",
+    "init": "node core/cli/init.js",
+    "route": "node core/cli/route.js",
+    "component": "node core/cli/component.js",
+    "swagger-install": "node core/cli/swagger.js",
+    "scaffolding-auth": "node core/cli/scaffolding-auth.js",
+    "vite:dev": "vite",
+    "vite:build": "vite build"
+  },
+  "dependencies": {
+    "chalk": "^5.6.2",
+    "cookie-parser": "^1.4.7",
+    "cors": "^2.8.6",
+    "express": "^5.2.1",
+    "express-rate-limit": "^8.2.1",
+    "helmet": "^8.1.0",
+    "jsonwebtoken": "^9.0.2",
+    "multer": "^2.0.2",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-router-dom": "7.13.1",
+    "xss": "^1.0.15"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.2.0",
+    "vite": "7.3.1"
+  }
+}

package/vite.config.js

@@ -1,22 +1,22 @@
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-import path from 'path';
-
-export default defineConfig({
-  plugins: [react()],
-  root: path.resolve(__dirname, 'frontend/resources/js'), 
-  base: '/build/',
-  build: {
-    outDir: path.resolve(__dirname, 'frontend/public/build'),
-    emptyOutDir: true,
-    manifest: true,
-    rollupOptions: {
-      input: path.resolve(__dirname, 'frontend/resources/js/Main.jsx'),
-    },
-  },
-  server: {
-    origin: 'http://localhost:5173',
-    strictPort: true,
-    cors: true,
-  },
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+export default defineConfig({
+  plugins: [react()],
+  root: path.resolve(__dirname, 'frontend/resources/js'), 
+  base: '/build/',
+  build: {
+    outDir: path.resolve(__dirname, 'frontend/public/build'),
+    emptyOutDir: true,
+    manifest: true,
+    rollupOptions: {
+      input: path.resolve(__dirname, 'frontend/resources/js/Main.jsx'),
+    },
+  },
+  server: {
+    origin: 'http://localhost:5173',
+    strictPort: true,
+    cors: true,
+  },
 });