@seip/blue-bird 0.3.5 → 0.3.7

package/.env_example

@@ -14,10 +14,13 @@ JWT_SECRET="JWT_SECRET"
 
 # Database Configuration 
 # SQLite (Default)
+#Remove this line if you are not going to use sqlite
 DATABASE_URL="file:./dev.db"
 
 # MySQL
-# DATABASE_URL="mysql://user:password@localhost:3306/blue_bird"
+#Remove this line if you are not going to use Mysql
+#DATABASE_URL="mysql://root:@localhost:3306/blue_bird"
 
 # PostgreSQL
-# DATABASE_URL="postgresql://user:password@localhost:5432/blue_bird?schema=public"
+#Remove this line if you are not going to use PostgreSQL
+# DATABASE_URL="postgresql://root:@localhost:5432/blue_bird?schema=public"

package/core/cli/scaffolding-auth.js

@@ -29,7 +29,7 @@ class ScaffoldingAuth {
             console.log(chalk.white("Update your App.jsx to use the newly created React components."));
             console.log(chalk.yellow("Running setup script to execute database migrations..."));
             try {
-                execSync('node backend/databases/setup_tables.js', { stdio: "inherit", cwd: this.appDir });
+                execSync('node  --env-file=.env backend/databases/setup_tables.js', { stdio: "inherit", cwd: this.appDir });
                 console.log(chalk.green("✓ Database migrations success. Users and LoginHistory tables created."));
             } catch (e) {
                 console.log(chalk.red("Failed to execute setup_tables.js. You may need to run it manually."));
@@ -225,7 +225,61 @@ class DatabaseConnection {
     }
 
     generateSetupTables(dbDir, dialect) {
-        let content = `import db from './connection.js';\n\nasync function setup() {\n`;
+        let content = `import db from './connection.js';\n\n`;
+
+        if (dialect === "mysql" || dialect === "postgres") {
+            content += `const dbUrl = process.env.DATABASE_URL;\n\nasync function createDatabaseIfNotExists() {\n`;
+            if (dialect === "mysql") {
+                content += `    try {
+        const mysql = await import('mysql2/promise');
+        const createConnection = mysql.createConnection || (mysql.default && mysql.default.createConnection);
+        const url = new URL(dbUrl);
+        const dbName = url.pathname.replace('/', '');
+        const connectionParams = {
+            host: url.hostname,
+            user: decodeURIComponent(url.username),
+            password: decodeURIComponent(url.password),
+            port: url.port ? Number(url.port) : 3306
+        };
+        const connection = await createConnection(connectionParams);
+        await connection.query(\`CREATE DATABASE IF NOT EXISTS \\\`\${dbName}\\\`;\`);
+        await connection.end();
+        console.log(\`Database '\${dbName}' checked/created successfully.\`);
+    } catch (err) {
+        console.error("Failed to create database automatically:", err.message);
+    }
+`;
+            } else if (dialect === "postgres") {
+                content += `    try {
+        const pkg = await import('pg');
+        const Client = pkg.Client || (pkg.default && pkg.default.Client);
+        const url = new URL(dbUrl);
+        const dbName = url.pathname.replace('/', '');
+        const connectionString = \`postgres://\${url.username}:\${url.password}@\${url.hostname}:\${url.port ? url.port : 5432}/postgres\`;
+        const client = new Client({ connectionString });
+        await client.connect();
+        
+        const res = await client.query('SELECT 1 FROM pg_database WHERE datname = $1', [dbName]);
+        if (res.rowCount === 0) {
+            await client.query(\`CREATE DATABASE "\${dbName}"\`);
+            console.log(\`Database '\${dbName}' created successfully.\`);
+        } else {
+            console.log(\`Database '\${dbName}' already exists.\`);
+        }
+        await client.end();
+    } catch (err) {
+        console.error("Failed to create database automatically:", err.message);
+    }
+`;
+            }
+            content += `}\n\n`;
+        }
+
+        content += `async function setup() {\n`;
+
+        if (dialect === "mysql" || dialect === "postgres") {
+            content += `    await createDatabaseIfNotExists();\n`;
+        }
 
         let usersTable = "";
         let historyTable = "";
@@ -601,7 +655,7 @@ export default function Login() {
 
     const handleSubmit = async (e) => {
         e.preventDefault();
-        const lang = localStorage.getItem("lila_lang") ?? "en";
+        const lang = localStorage.getItem("blue_bird_lang") ?? "en";
         try {
             const res = await fetch('/auth/login', {
                 method: 'POST',
@@ -664,7 +718,7 @@ export default function Register() {
 
     const handleSubmit = async (e) => {
         e.preventDefault();
-        const lang = localStorage.getItem("lila_lang") ?? "en";
+        const lang = localStorage.getItem("blue_bird_lang") ?? "en";
         try {
             const res = await fetch('/auth/register', {
                 method: 'POST',

package/frontend/resources/js/blue-bird/components/Label.jsx

@@ -1,12 +1,12 @@
-import React from 'react';
-
-export default function Label({ children, className = '', ...props }) {
-    return (
-        <label
-            className={`text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 ${className}`}
-            {...props}
-        >
-            {children}
-        </label>
-    );
-}
+import React from 'react';
+
+export default function Label({ children, className = '', ...props }) {
+    return (
+        <label
+            className={`text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 ${className}`}
+            {...props}
+        >
+            {children}
+        </label>
+    );
+}

package/frontend/resources/js/blue-bird/components/Typography.jsx

@@ -1,25 +1,25 @@
-import React from 'react';
-
-export default function Typography({ variant = 'p', children, className = '', ...props }) {
-    const variants = {
-        h1: "scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl",
-        h2: "scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0",
-        h3: "scroll-m-20 text-2xl font-semibold tracking-tight",
-        h4: "scroll-m-20 text-xl font-semibold tracking-tight",
-        p: "leading-7 [&:not(:first-child)]:mt-6",
-        blockquote: "mt-6 border-l-2 pl-6 italic",
-        lead: "text-xl text-slate-700 dark:text-slate-300",
-        large: "text-lg font-semibold",
-        small: "text-sm font-medium leading-none",
-        muted: "text-sm text-slate-500 dark:text-slate-400",
-    };
-
-    const Component = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'p'].includes(variant) ? variant : 'p';
-    const style = `${variants[variant]} ${className}`;
-
-    return (
-        <Component className={style} {...props}>
-            {children}
-        </Component>
-    );
-}
+import React from 'react';
+
+export default function Typography({ variant = 'p', children, className = '', ...props }) {
+    const variants = {
+        h1: "scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl",
+        h2: "scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0",
+        h3: "scroll-m-20 text-2xl font-semibold tracking-tight",
+        h4: "scroll-m-20 text-xl font-semibold tracking-tight",
+        p: "leading-7 [&:not(:first-child)]:mt-6",
+        blockquote: "mt-6 border-l-2 pl-6 italic",
+        lead: "text-xl text-slate-700 dark:text-slate-300",
+        large: "text-lg font-semibold",
+        small: "text-sm font-medium leading-none",
+        muted: "text-sm text-slate-500 dark:text-slate-400",
+    };
+
+    const Component = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'p'].includes(variant) ? variant : 'p';
+    const style = `${variants[variant]} ${className}`;
+
+    return (
+        <Component className={style} {...props}>
+            {children}
+        </Component>
+    );
+}

package/frontend/resources/js/blue-bird/contexts/LanguageContext.jsx

@@ -6,10 +6,10 @@ const translations = { en, es };
 export const LanguageContext = createContext();
 
 export const LanguageProvider = ({ children }) => {
-    const [lang, setLang] = useState(() => localStorage.getItem('lila_lang') || 'en');
+    const [lang, setLang] = useState(() => localStorage.getItem('blue_bird_lang') || 'en');
 
     useEffect(() => {
-        localStorage.setItem('lila_lang', lang);
+        localStorage.setItem('blue_bird_lang', lang);
     }, [lang]);
 
     /**

package/frontend/resources/js/blue-bird/contexts/ThemeContext.jsx

@@ -1,49 +1,49 @@
-import React, { createContext, useContext, useEffect, useState } from 'react';
-
-const ThemeContext = createContext();
-
-export function ThemeProvider({ children }) {
-  const [theme, setTheme] = useState(() => {
-    return localStorage.getItem('theme') || 'system';
-  });
-
-  useEffect(() => {
-    const root = window.document.documentElement;
-    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-
-    const applyTheme = (currentTheme) => {
-      root.classList.remove('light', 'dark');
-
-      if (currentTheme === 'system') {
-        const systemTheme = mediaQuery.matches ? 'dark' : 'light';
-        root.classList.add(systemTheme);
-      } else {
-        root.classList.add(currentTheme);
-      }
-    };
-
-    applyTheme(theme);
-
-    const handleChange = () => {
-      if (theme === 'system') {
-        applyTheme('system');
-      }
-    };
-
-    mediaQuery.addEventListener('change', handleChange);
-    return () => mediaQuery.removeEventListener('change', handleChange);
-  }, [theme]);
-
-  const changeTheme = (newTheme) => {
-    setTheme(newTheme);
-    localStorage.setItem('theme', newTheme);
-  };
-
-  return (
-    <ThemeContext.Provider value={{ theme, changeTheme }}>
-      {children}
-    </ThemeContext.Provider>
-  );
-}
-
-export const useTheme = () => useContext(ThemeContext);
+import React, { createContext, useContext, useEffect, useState } from 'react';
+
+const ThemeContext = createContext();
+
+export function ThemeProvider({ children }) {
+  const [theme, setTheme] = useState(() => {
+    return localStorage.getItem('theme') || 'system';
+  });
+
+  useEffect(() => {
+    const root = window.document.documentElement;
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+    const applyTheme = (currentTheme) => {
+      root.classList.remove('light', 'dark');
+
+      if (currentTheme === 'system') {
+        const systemTheme = mediaQuery.matches ? 'dark' : 'light';
+        root.classList.add(systemTheme);
+      } else {
+        root.classList.add(currentTheme);
+      }
+    };
+
+    applyTheme(theme);
+
+    const handleChange = () => {
+      if (theme === 'system') {
+        applyTheme('system');
+      }
+    };
+
+    mediaQuery.addEventListener('change', handleChange);
+    return () => mediaQuery.removeEventListener('change', handleChange);
+  }, [theme]);
+
+  const changeTheme = (newTheme) => {
+    setTheme(newTheme);
+    localStorage.setItem('theme', newTheme);
+  };
+
+  return (
+    <ThemeContext.Provider value={{ theme, changeTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export const useTheme = () => useContext(ThemeContext);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seip/blue-bird",
-  "version": "0.3.5",
+  "version": "0.3.7",
   "description": "Express + React opinionated framework with SPA or API architecture and built-in JWT auth",
   "type": "module",
   "bin": {