@seip/blue-bird 0.1.0

package/core/cli/react.js

@@ -0,0 +1,394 @@
+import fs from "node:fs";
+import path from "node:path";
+import { execSync } from "node:child_process";
+import chalk from "chalk";
+import Config from "../config.js";
+
+const __dirname = Config.dirname();
+const props = Config.props();
+
+/**
+ * Scaffolding class for setting up React and Vite in the project.
+ */
+class ReactScaffold {
+  /**
+   * Initializes the Scaffolder with the base application directory.
+   */
+  constructor() {
+    this.appDir = __dirname;
+  }
+
+  /**
+   * Executes the installation process.
+   */
+  async install() {
+    console.log(chalk.cyan("Initializing React + Vite setup..."));
+
+    try {
+      this.createStructure();
+      this.updatePackageJson();
+      this.createViteConfig();
+      this.createAppjs();
+      this.createMainJs();
+      this.createPagesJs();
+      this.updateGitIgnore();
+      this.npmInstall();
+
+      console.log(chalk.green("React scaffolding created successfully!"));
+      console.log(chalk.cyan("\nNext steps:"));
+      console.log(chalk.white("  1. Run (Blue Bird Server): ") + chalk.bold("npm run dev"));
+      console.log(chalk.white("  2. Run (React Vite Dev): ") + chalk.bold("npm run vite:dev"));
+      console.log(chalk.blue("\nBlue Bird React setup completed!"));
+    } catch (error) {
+      console.error(chalk.red("Fatal error during scaffolding:"), error.message);
+    }
+  }
+
+  /**
+   * Creates the necessary directory structure for React resources.
+   */
+  createStructure() {
+    const dirs = [
+      'frontend/resources/js/pages'
+    ];
+
+    dirs.forEach(dir => {
+      const fullPath = path.join(this.appDir, dir);
+      if (!fs.existsSync(fullPath)) {
+        fs.mkdirSync(fullPath, { recursive: true });
+        console.log(chalk.gray(`Created directory: ${dir}`));
+      }
+    });
+  }
+
+  /**
+   * Updates the project's package.json with React and Vite dependencies and scripts.
+   */
+  updatePackageJson() {
+    const packagePath = path.join(this.appDir, 'package.json');
+    if (!fs.existsSync(packagePath)) {
+      console.warn(chalk.yellow("package.json not found. Initializing with npm init..."));
+      execSync('npm init -y', { cwd: this.appDir });
+    }
+
+    const pkg = JSON.parse(fs.readFileSync(packagePath, 'utf8'));
+
+    pkg.scripts = pkg.scripts || {};
+    pkg.scripts["vite:dev"] = "vite";
+    pkg.scripts["vite:build"] = "vite build";
+
+    pkg.devDependencies = pkg.devDependencies || {};
+    pkg.devDependencies["vite"] = "^5.0.0";
+    pkg.devDependencies["@vitejs/plugin-react"] = "^4.2.0";
+
+    pkg.dependencies = pkg.dependencies || {};
+    pkg.dependencies["react"] = "^18.2.0";
+    pkg.dependencies["react-dom"] = "^18.2.0";
+    pkg.dependencies["react-router-dom"] = "^6.21.0";
+
+    fs.writeFileSync(packagePath, JSON.stringify(pkg, null, 2));
+    console.log(chalk.gray("Updated package.json dependencies and scripts."));
+  }
+
+  /**
+   * Creates the vite.config.js file with appropriate root and outDir settings.
+   */
+  createViteConfig() {
+    const file = path.join(this.appDir, 'vite.config.js');
+    if (fs.existsSync(file)) {
+      console.warn(chalk.yellow("vite.config.js already exists. Skipping."));
+      return;
+    }
+
+    // We use props.static.path to determine where the build goes
+    const outDir = path.join(props.static.path, 'build');
+
+    const content = `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, '${outDir.replace(/\\/g, '/')}'),
+    emptyOutDir: true,
+    manifest: true,
+    rollupOptions: {
+      input: path.resolve(__dirname, 'frontend/resources/js/main.jsx'),
+    },
+  },
+  server: {
+    origin: 'http://localhost:5173',
+    strictPort: true,
+    cors: true,
+  },
+});`;
+    fs.writeFileSync(file, content);
+    console.log(chalk.gray("Created vite.config.js"));
+  }
+
+  createPagesJs() {
+    const file = path.join(this.appDir, 'frontend/resources/js/pages/Home.jsx');
+    if (fs.existsSync(file)) {
+      console.warn(chalk.yellow("Home.jsx already exists. Skipping."));
+      return;
+    }
+
+    const content = `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({}),
+    })
+      .then((response) => response.json())
+      .then((data) => console.log('Backend response:', data))
+      .catch((error) => console.error('Error fetching from backend:', error));
+  }, []);
+
+  return (
+    <div style={{ textAlign: 'center', padding: '4rem 2rem' }}>
+      <header style={{ marginBottom: '3rem' }}>
+        <h1 style={{ 
+          fontSize: '3.5rem', 
+          fontWeight: '800', 
+          background: 'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)',
+          WebkitBackgroundClip: 'text',
+          WebkitTextFillColor: 'transparent',
+          marginBottom: '1rem'
+        }}>
+          Welcome to Blue Bird
+        </h1>
+        <p style={{ fontSize: '1.25rem', color: '#6b7280', maxWidth: '600px', margin: '0 auto' }}>
+          The elegant, fast, and weightless framework for modern web development.
+        </p>
+      </header>
+
+      <div style={{ display: 'flex', gap: '1rem', justifyContent: 'center', marginBottom: '4rem' }}>
+        <a 
+          href="https://seip25.github.io/Blue-bird/" 
+          target="_blank" 
+          rel="noopener noreferrer"
+          style={{
+            backgroundColor: '#2563eb',
+            color: 'white',
+            padding: '0.75rem 1.5rem',
+            borderRadius: '0.5rem',
+            textDecoration: 'none',
+            fontWeight: '600',
+            transition: 'background-color 0.2s'
+          }}
+          onMouseOver={(e) => e.target.style.backgroundColor = '#1d4ed8'}
+          onMouseOut={(e) => e.target.style.backgroundColor = '#2563eb'}
+        >
+          Documentation
+        </a>
+        <a 
+          href="https://seip25.github.io/Blue-bird/en.html" 
+          target="_blank" 
+          rel="noopener noreferrer"
+          style={{
+            backgroundColor: 'white',
+            color: '#374151',
+            padding: '0.75rem 1.5rem',
+            borderRadius: '0.5rem',
+            textDecoration: 'none',
+            fontWeight: '600',
+            border: '1px solid #d1d5db',
+            transition: 'background-color 0.2s'
+          }}
+          onMouseOver={(e) => e.target.style.backgroundColor = '#f9fafb'}
+          onMouseOut={(e) => e.target.style.backgroundColor = 'white'}
+        >
+          English Docs
+        </a>
+      </div>
+
+      <div style={{ 
+        display: 'grid', 
+        gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', 
+        gap: '2rem',
+        maxWidth: '1000px',
+        margin: '0 auto'
+      }}>
+        <div style={cardStyle}>
+          <h3>Lightweight</h3>
+          <p>Built with performance and simplicity in mind.</p>
+        </div>
+        <div style={cardStyle}>
+          <h3>React Powered</h3>
+          <p>Full React + Vite integration with island hydration.</p>
+        </div>
+        <div style={cardStyle}>
+          <h3>Express Backend</h3>
+          <p>Robust and scalable backend architecture.</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const cardStyle = {
+  padding: '1.5rem',
+  borderRadius: '0.75rem',
+  border: '1px solid #e5e7eb',
+  textAlign: 'left',
+  backgroundColor: 'white',
+  boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)'
+};`;
+    fs.writeFileSync(file, content);
+    console.log(chalk.gray("Created frontend/resources/js/pages/Home.jsx"));
+
+    const file2 = path.join(this.appDir, 'frontend/resources/js/pages/About.jsx');
+    if (fs.existsSync(file2)) {
+      console.warn(chalk.yellow("About.jsx already exists. Skipping."));
+      return;
+    }
+
+    const content2 = `import React from 'react'; 
+
+export default function About() {
+  return (
+    <div style={{ padding: '2rem' }}>
+      <h1 style={{ color: '#111827', marginBottom: '1rem' }}>About Blue Bird</h1>
+      <p style={{ color: '#4b5563', lineHeight: '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>
+    </div>
+  );
+}`;
+    fs.writeFileSync(file2, content2);
+    console.log(chalk.gray("Created frontend/resources/js/pages/About.jsx"));
+  }
+
+  /**
+   * Creates the main entry point for React (main.jsx) which handles island hydration.
+   */
+  createAppjs() {
+    const file = path.join(this.appDir, 'frontend/resources/js/App.jsx');
+    if (fs.existsSync(file)) {
+      console.warn(chalk.yellow("App.jsx already exists. Skipping."));
+      return;
+    }
+
+    const content = `import React from 'react'; 
+import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
+import Home from './pages/Home';
+import About from './pages/About';
+
+export default function App(props) {
+  return (
+    <Router>
+      <div style={{ 
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+        minHeight: '100vh',
+        backgroundColor: '#f9fafb',
+        color: '#111827'
+      }}>
+        <nav style={{ 
+          background: 'white', 
+          padding: '1rem 2rem', 
+          display: 'flex', 
+          justifyContent: 'space-between', 
+          alignItems: 'center',
+          boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1)',
+          position: 'sticky',
+          top: 0,
+          zIndex: 10
+        }}>
+          <div style={{ fontWeight: 'bold', fontSize: '1.25rem', color: '#2563eb' }}>
+            Blue Bird
+          </div>
+          <div style={{ display: 'flex', gap: '2rem' }}>
+            <Link to="/" style={navLinkStyle}>Home</Link>
+            <Link to="/about" style={navLinkStyle}>About</Link>
+          </div>
+        </nav>
+        
+        <main style={{ maxWidth: '1200px', margin: '0 auto' }}>
+          {/* Uncomment to debug props if needed */}
+          {/* <div style={{ padding: '0.5rem', background: '#ececec', fontSize: '0.75rem' }}>Props: {JSON.stringify(props)}</div> */}
+          
+          <Routes>
+            <Route path="/" element={<Home />} />
+            <Route path="/about" element={<About />} />
+          </Routes>
+        </main>
+      </div>
+    </Router>
+  );
+}
+
+const navLinkStyle = { 
+  color: '#4b5563', 
+  textDecoration: 'none', 
+  fontWeight: '500',
+  fontSize: '0.95rem',
+  transition: 'color 0.2s'
+};`;
+    fs.writeFileSync(file, content);
+    console.log(chalk.gray("Created frontend/resources/js/App.jsx"));
+  }
+  createMainJs() {
+    const file = path.join(this.appDir, 'frontend/resources/js/Main.jsx');
+    if (fs.existsSync(file)) {
+      console.warn(chalk.yellow("Main.jsx already exists. Skipping."));
+      return;
+    }
+
+    const content = `import React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+
+document.addEventListener('DOMContentLoaded', () => {
+    document.querySelectorAll('[data-react-component]').forEach(el => {
+      const name = el.dataset.reactComponent;
+      const props = JSON.parse(el.dataset.props || '{}');
+        createRoot(el).render(<App {...props} />); 
+    });   
+});`;
+    fs.writeFileSync(file, content);
+    console.log(chalk.gray("Created frontend/resources/js/Main.jsx"));
+  }
+
+
+
+  /**
+   * Ensures node_modules and other build artifacts are ignored by Git.
+   */
+  updateGitIgnore() {
+    const file = path.join(this.appDir, '.gitignore');
+    const entry = "\nnode_modules\ndist\nfrontend/public/build\n";
+
+    if (fs.existsSync(file)) {
+      const content = fs.readFileSync(file, 'utf8');
+      if (!content.includes('node_modules')) {
+        fs.appendFileSync(file, entry);
+        console.log(chalk.gray("Updated .gitignore"));
+      }
+    } else {
+      fs.writeFileSync(file, entry);
+      console.log(chalk.gray("Created .gitignore"));
+    }
+  }
+  npmInstall() {
+    try {
+      execSync('npm install', { cwd: this.appDir });
+      console.log(chalk.gray("Installed dependencies"));
+    } catch (error) {
+      console.error(chalk.red("Error installing dependencies:"), error.message);
+    }
+  }
+}
+
+
+const scaffold = new ReactScaffold();
+scaffold.install();

package/core/config.js

@@ -0,0 +1,42 @@
+import path from "path";
+
+/**
+ * Configuration class to manage application-wide settings and environment variables.
+ */
+class Config {
+
+    /**
+     * Returns the base directory of the application.
+     * @returns {string} The current working directory.
+     */
+    static dirname() {
+        return process.cwd()
+    }
+
+    /**
+     * Retrieves application properties from environment variables or default values.
+     * @returns {Object} The configuration properties object.
+     */
+    static props() {
+        const config = {
+            debug: process.env.DEBUG === "true" ? true : false,
+            descriptionMeta: process.env.DESCRIPTION_META || "",
+            keywordsMeta: process.env.KEYWORDS_META || "",
+            titleMeta: process.env.TITLE_META || "",
+            authorMeta: process.env.AUTHOR_META || "",
+            description: process.env.DESCRIPTION || "",
+            title: process.env.TITLE || "",
+            version: process.env.VERSION || "1.0.0",
+            langMeta: process.env.LANGMETA || "en",
+            host: process.env.HOST || "http://localhost",
+            port: parseInt(process.env.PORT) || 3001,
+            static: {
+                path: process.env.STATIC_PATH || "frontend/public",
+                options: {}
+            }
+
+        }
+        return config
+    }
+}
+export default Config

package/core/logger.js

@@ -0,0 +1,80 @@
+import fs from "node:fs";
+import path from "node:path";
+import Config from "./config.js"
+
+const __dirname = Config.dirname()
+
+/**
+ * Logger class for managing application logs by creating dated folders and log files.
+ */
+class Logger {
+
+    /**
+     * Initializes the Logger instance and ensures the logs directory exists.
+     */
+    constructor() {
+        this.folder = path.join(__dirname, "logs");
+        if (!fs.existsSync(this.folder)) {
+            fs.mkdirSync(this.folder, { recursive: true });
+        }
+    }
+
+    /**
+     * Ensures and returns the path to the log folder for the current day.
+     * @returns {string} The absolute path to the current day's log folder.
+     */
+    nowFolder() {
+        const folder = path.join(this.folder, this.now());
+
+        if (!fs.existsSync(folder)) {
+            fs.mkdirSync(folder, { recursive: true });
+        }
+        return folder;
+    }
+
+    /**
+     * Gets the current date formatted as YYYY-MM-DD.
+     * @returns {string} The formatted date string.
+     */
+    now() {
+        return new Date().toISOString().split("T")[0];
+    }
+
+    /**
+     * Appends an informational message to the info.log file.
+     * @param {string} message - The message to log.
+     */
+    info(message) {
+        const logFile = path.join(this.nowFolder(), 'info.log');
+        fs.appendFileSync(logFile, `${message}\n`);
+    }
+
+    /**
+     * Appends an error message to the error.log file.
+     * @param {string} message - The error message to log.
+     */
+    error(message) {
+        const logFile = path.join(this.nowFolder(), 'error.log');
+        fs.appendFileSync(logFile, `${message}\n`);
+    }
+
+    /**
+     * Appends a warning message to the warn.log file.
+     * @param {string} message - The warning message to log.
+     */
+    warning(message) {
+        const logFile = path.join(this.nowFolder(), 'warn.log');
+        fs.appendFileSync(logFile, `${message}\n`);
+    }
+
+    /**
+     * Appends a debug message to the debug.log file.
+     * @param {string} message - The debug message to log.
+     */
+    debug(message) {
+        const logFile = path.join(this.nowFolder(), 'debug.log');
+        fs.appendFileSync(logFile, `${message}\n`);
+    }
+}
+
+export default Logger;

package/core/middleware.js

@@ -0,0 +1,27 @@
+import Auth from "./auth.js";
+
+/**
+ * Common middlewares for the Blue Bird framework.
+ */
+const Middleware = {
+    /**
+     * Authentication protection middleware.
+     * @type {Function}
+     */
+    auth: Auth.protect(),
+
+    /**
+     * Web authentication protection middleware (redirects to home if fails).
+     * @type {Function}
+     */
+    webAuth: Auth.protect({ redirect: "/" }),
+
+    /**
+     * Logging middleware (can be extended).
+     */
+    logger: (req, res, next) => {
+        next();
+    }
+};
+
+export default Middleware;

package/core/router.js

@@ -0,0 +1,96 @@
+import express from "express";
+import Config from "./config.js";
+
+const __dirname = Config.dirname()
+const props = Config.props()
+
+/**
+ * Router wrapper class for handling Express routing logic.
+ */
+class Router {
+    /**
+     * Creates a new Router instance.
+     * @param {string} [path="/"] - The base path for this router.
+     */
+    constructor(path = "/") {
+        this.router = express.Router()
+        this.path = path
+    }
+
+    /**
+     * Registers a GET route handler.
+     * @param {string} path - The relative path for the GET route.
+     * @param {...Function} callback - One or more handler functions (middlewares and controller).
+     */
+    get(path, ...callback) {
+        if (path === "/*" || path === "*") {
+            path = /.*/
+        }
+        this.router.get(path, callback)
+    }
+
+    /**
+     * Registers a POST route handler.
+     * @param {string} path - The relative path for the POST route.
+     * @param {...Function} callback - One or more handler functions (middlewares and controller).
+     */
+    post(path, ...callback) {
+        if (path === "/*" || path === "*") {
+            path = /.*/
+        }
+        this.router.post(path, callback)
+    }
+
+    /**
+     * Registers a PUT route handler.
+     * @param {string} path - The relative path for the PUT route.
+     * @param {...Function} callback - One or more handler functions (middlewares and controller).
+     */
+    put(path, ...callback) {
+        this.router.put(path, callback)
+    }
+
+    /**
+     * Registers a DELETE route handler.
+     * @param {string} path - The relative path for the DELETE route.
+     * @param {...Function} callback - One or more handler functions (middlewares and controller).
+     */
+    delete(path, ...callback) {
+        this.router.delete(path, callback)
+    }
+
+    /**
+     * Registers a PATCH route handler.
+     * @param {string} path - The relative path for the PATCH route.
+     * @param {...Function} callback - One or more handler functions (middlewares and controller).
+     */
+    patch(path, ...callback) {
+        this.router.patch(path, callback)
+    }
+
+    /**
+     * Registers an OPTIONS route handler.
+     * @param {string} path - The relative path for the OPTIONS route.
+     * @param {...Function} callback - One or more handler functions (middlewares and controller).
+     */
+    options(path, ...callback) {
+        this.router.options(path, callback)
+    }
+
+    /**
+     * Returns the underlying Express router instance.
+     * @returns {import('express').Router} The Express router object.
+     */
+    getRouter() {
+        return this.router
+    }
+
+    /**
+     * Returns the base path associated with this router.
+     * @returns {string} The router path.
+     */
+    getPath() {
+        return this.path
+    }
+}
+export default Router;