@basicbenframework/core 0.1.0

package/my-test-app/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "my-test-app",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "basicben dev",
+    "build": "basicben build",
+    "start": "basicben start",
+    "test": "basicben test",
+    "migrate": "basicben migrate",
+    "migrate:rollback": "basicben migrate:rollback",
+    "migrate:fresh": "basicben migrate:fresh",
+    "migrate:status": "basicben migrate:status",
+    "make:migration": "basicben make:migration",
+    "make:controller": "basicben make:controller",
+    "make:model": "basicben make:model"
+  },
+  "dependencies": {
+    "@basicbenframework/core": "file:..",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^5.1.4",
+    "vite": "^7.3.1",
+    "vitest": "^4.0.0"
+  }
+}

package/my-test-app/seeds/01_users.js

@@ -0,0 +1,29 @@
+/**
+ * Users seeder
+ * Creates sample users for development/testing
+ */
+
+import { db } from 'basicben'
+import { hashPassword } from 'basicben/auth'
+
+export async function seed() {
+  const password = await hashPassword('password123')
+
+  // Create admin user
+  await (await db.table('users'))
+    .insert({
+      name: 'Admin User',
+      email: 'admin@example.com',
+      password
+    })
+
+  // Create test user
+  await (await db.table('users'))
+    .insert({
+      name: 'Test User',
+      email: 'test@example.com',
+      password
+    })
+
+  console.log('Seeded 2 users (password: password123)')
+}

package/my-test-app/seeds/02_posts.js

@@ -0,0 +1,43 @@
+/**
+ * Posts seeder
+ * Creates sample blog posts for development/testing
+ */
+
+import { db } from 'basicben'
+
+export async function seed() {
+  // Get the first user (admin)
+  const user = await (await db.table('users')).first()
+
+  if (!user) {
+    console.log('No users found. Run users seed first.')
+    return
+  }
+
+  const posts = [
+    {
+      user_id: user.id,
+      title: 'Welcome to BasicBen',
+      content: 'This is your first blog post. BasicBen makes it easy to build full-stack React applications with minimal dependencies.',
+      published: 1
+    },
+    {
+      user_id: user.id,
+      title: 'Getting Started with Migrations',
+      content: 'Migrations help you version control your database schema. Run `basicben make:migration` to create a new migration.',
+      published: 1
+    },
+    {
+      user_id: user.id,
+      title: 'Draft Post Example',
+      content: 'This is a draft post that is not yet published.',
+      published: 0
+    }
+  ]
+
+  for (const post of posts) {
+    await (await db.table('posts')).insert(post)
+  }
+
+  console.log(`Seeded ${posts.length} posts`)
+}

package/my-test-app/src/client/components/Alert.jsx

@@ -0,0 +1,11 @@
+export function Alert({ type = 'error', children }) {
+  const styles = {
+    error: 'text-red-500 bg-red-500/10',
+    success: 'text-emerald-500 bg-emerald-500/10'
+  }
+  return (
+    <p className={`text-xs p-2 rounded-lg ${styles[type]}`}>
+      {children}
+    </p>
+  )
+}

package/my-test-app/src/client/components/Avatar.jsx

@@ -0,0 +1,11 @@
+import { useTheme } from './ThemeContext'
+
+export function Avatar({ name, size = 'md' }) {
+  const { dark } = useTheme()
+  const sizes = { sm: 'w-6 h-6 text-xs', md: 'w-8 h-8 text-sm' }
+  return (
+    <div className={`${sizes[size]} rounded-full flex items-center justify-center font-medium ${dark ? 'bg-white text-black' : 'bg-black text-white'}`}>
+      {name[0].toUpperCase()}
+    </div>
+  )
+}

package/my-test-app/src/client/components/BackLink.jsx

@@ -0,0 +1,10 @@
+import { useTheme } from './ThemeContext'
+
+export function BackLink({ onClick, children }) {
+  const { t } = useTheme()
+  return (
+    <button onClick={onClick} className={`text-sm ${t.muted} mb-4 hover:underline`}>
+      &larr; {children}
+    </button>
+  )
+}

package/my-test-app/src/client/components/Button.jsx

@@ -0,0 +1,19 @@
+import { useTheme } from './ThemeContext'
+
+export function Button({ variant = 'primary', children, className = '', ...props }) {
+  const { t } = useTheme()
+  const styles = {
+    primary: `${t.btn} ${t.btnHover}`,
+    secondary: t.btnSecondary,
+    danger: 'bg-red-500/10 text-red-500 hover:bg-red-500/20',
+    ghost: `${t.muted} hover:opacity-70`
+  }
+  return (
+    <button
+      className={`text-sm font-medium rounded-full px-4 py-2 transition disabled:opacity-50 ${styles[variant]} ${className}`}
+      {...props}
+    >
+      {children}
+    </button>
+  )
+}

package/my-test-app/src/client/components/Card.jsx

@@ -0,0 +1,10 @@
+import { useTheme } from './ThemeContext'
+
+export function Card({ children, className = '' }) {
+  const { t } = useTheme()
+  return (
+    <div className={`p-4 rounded-xl ${t.card} border ${t.border} ${className}`}>
+      {children}
+    </div>
+  )
+}

package/my-test-app/src/client/components/Empty.jsx

@@ -0,0 +1,6 @@
+import { useTheme } from './ThemeContext'
+
+export function Empty({ children }) {
+  const { t } = useTheme()
+  return <p className={`text-center ${t.muted} py-12`}>{children}</p>
+}

package/my-test-app/src/client/components/Input.jsx

@@ -0,0 +1,12 @@
+import { useTheme } from './ThemeContext'
+
+export function Input({ type = 'text', className = '', ...props }) {
+  const { t } = useTheme()
+  return (
+    <input
+      type={type}
+      className={`w-full px-3 py-2 text-sm rounded-lg ${t.card} border ${t.border} focus:outline-none ${className}`}
+      {...props}
+    />
+  )
+}

package/my-test-app/src/client/components/Loading.jsx

@@ -0,0 +1,6 @@
+import { useTheme } from './ThemeContext'
+
+export function Loading() {
+  const { t } = useTheme()
+  return <div className={`text-center ${t.muted} py-12`}>Loading...</div>
+}

package/my-test-app/src/client/components/Logo.jsx

@@ -0,0 +1,40 @@
+export function Logo({ className = "w-6 h-6" }) {
+  return (
+    <svg
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      {/* Outer rounded square */}
+      <rect
+        x="2"
+        y="2"
+        width="28"
+        height="28"
+        rx="6"
+        fill="currentColor"
+        fillOpacity="0.1"
+        stroke="currentColor"
+        strokeWidth="2"
+      />
+      {/* Stylized "B" made of two brackets and a vertical line */}
+      <path
+        d="M10 8C10 8 8 8 8 10V14C8 16 10 16 10 16C10 16 8 16 8 18V22C8 24 10 24 10 24"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M22 8C22 8 24 8 24 10V14C24 16 22 16 22 16C22 16 24 16 24 18V22C24 24 22 24 22 24"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      {/* Center dot */}
+      <circle cx="16" cy="16" r="3" fill="currentColor" />
+    </svg>
+  )
+}

package/my-test-app/src/client/components/Nav/DarkModeToggle.jsx

@@ -0,0 +1,23 @@
+import { useTheme } from '../ThemeContext'
+
+export function DarkModeToggle({ dark, setDark }) {
+  const { t } = useTheme()
+
+  return (
+    <button
+      onClick={() => setDark(!dark)}
+      className={`p-2 rounded-lg ${t.card} transition`}
+      aria-label={dark ? 'Switch to light mode' : 'Switch to dark mode'}
+    >
+      {dark ? (
+        <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
+        </svg>
+      ) : (
+        <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+        </svg>
+      )}
+    </button>
+  )
+}

package/my-test-app/src/client/components/Nav/DesktopNav.jsx

@@ -0,0 +1,32 @@
+import { useTheme } from '../ThemeContext'
+import { NavLink } from '../NavLink'
+import { Button } from '../Button'
+import { DarkModeToggle } from './DarkModeToggle'
+
+export function DesktopNav({ user, navigate, logout }) {
+  const { t, dark, setDark } = useTheme()
+
+  return (
+    <div className="hidden sm:flex items-center gap-2">
+      <NavLink onClick={() => navigate('/docs')}>Docs</NavLink>
+
+      <div className={`w-px h-5 mx-1 ${dark ? 'bg-white/20' : 'bg-black/20'}`} />
+
+      <DarkModeToggle dark={dark} setDark={setDark} />
+
+      {user ? (
+        <>
+          <NavLink onClick={() => navigate('/feed')}>Feed</NavLink>
+          <NavLink onClick={() => navigate('/posts')}>My Posts</NavLink>
+          <NavLink onClick={() => navigate('/profile')}>Profile</NavLink>
+          <Button variant="secondary" onClick={logout} className="px-3 py-1.5">Log out</Button>
+        </>
+      ) : (
+        <>
+          <NavLink onClick={() => navigate('/login')}>Sign in</NavLink>
+          <Button onClick={() => navigate('/register')} className="px-3 py-1.5">Get started</Button>
+        </>
+      )}
+    </div>
+  )
+}

package/my-test-app/src/client/components/Nav/MobileNav.jsx

@@ -0,0 +1,107 @@
+import { useTheme } from '../ThemeContext'
+import { Logo } from '../Logo'
+
+export function MobileNav({ user, navigate, onClose, logout }) {
+  const { t } = useTheme()
+
+  const handleNav = (view) => {
+    navigate(view)
+    onClose()
+  }
+
+  const handleLogout = () => {
+    logout()
+    onClose()
+  }
+
+  return (
+    <div className={`fixed inset-0 z-50 ${t.bg} ${t.text}`}>
+      <div className="flex flex-col h-full">
+        <div className={`flex items-center justify-between h-14 px-6 border-b ${t.border}`}>
+          <span className="flex items-center gap-2 font-semibold">
+            <Logo className="w-5 h-5" />
+            <span>BasicBen</span>
+          </span>
+          <button
+            onClick={onClose}
+            className={`p-2 rounded-lg ${t.card} transition`}
+            aria-label="Close menu"
+          >
+            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        <div className="flex-1 overflow-y-auto px-6 py-4">
+          <div className="space-y-1">
+            <button
+              onClick={() => handleNav('/')}
+              className={`w-full text-left px-4 py-3 rounded-lg ${t.card} hover:opacity-80 transition`}
+            >
+              Home
+            </button>
+            <button
+              onClick={() => handleNav('/docs')}
+              className={`w-full text-left px-4 py-3 rounded-lg ${t.card} hover:opacity-80 transition`}
+            >
+              Docs
+            </button>
+          </div>
+
+          {user ? (
+            <>
+              <div className={`my-4 border-t ${t.border}`} />
+              <p className={`px-4 py-2 text-xs font-medium uppercase tracking-wider ${t.muted}`}>Account</p>
+              <div className="space-y-1">
+                <button
+                  onClick={() => handleNav('/feed')}
+                  className={`w-full text-left px-4 py-3 rounded-lg ${t.card} hover:opacity-80 transition`}
+                >
+                  Feed
+                </button>
+                <button
+                  onClick={() => handleNav('/posts')}
+                  className={`w-full text-left px-4 py-3 rounded-lg ${t.card} hover:opacity-80 transition`}
+                >
+                  My Posts
+                </button>
+                <button
+                  onClick={() => handleNav('/profile')}
+                  className={`w-full text-left px-4 py-3 rounded-lg ${t.card} hover:opacity-80 transition`}
+                >
+                  Profile
+                </button>
+              </div>
+              <div className={`my-4 border-t ${t.border}`} />
+              <button
+                onClick={handleLogout}
+                className={`w-full text-left px-4 py-3 rounded-lg ${t.btnSecondary} transition`}
+              >
+                Log out
+              </button>
+            </>
+          ) : (
+            <>
+              <div className={`my-4 border-t ${t.border}`} />
+              <div className="space-y-2">
+                <button
+                  onClick={() => handleNav('/login')}
+                  className={`w-full px-4 py-3 rounded-lg ${t.btnSecondary} transition`}
+                >
+                  Sign in
+                </button>
+                <button
+                  onClick={() => handleNav('/register')}
+                  className={`w-full px-4 py-3 rounded-lg ${t.btn} ${t.btnHover} transition`}
+                >
+                  Get started
+                </button>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

package/my-test-app/src/client/components/NavLink.jsx

@@ -0,0 +1,10 @@
+import { useTheme } from './ThemeContext'
+
+export function NavLink({ onClick, children, className = '' }) {
+  const { t } = useTheme()
+  return (
+    <button onClick={onClick} className={`text-sm ${t.muted} hover:opacity-70 transition ${className}`}>
+      {children}
+    </button>
+  )
+}

package/my-test-app/src/client/components/PageHeader.jsx

@@ -0,0 +1,8 @@
+export function PageHeader({ title, action }) {
+  return (
+    <div className="flex items-center justify-between mb-6">
+      <h1 className="text-2xl font-bold">{title}</h1>
+      {action}
+    </div>
+  )
+}

package/my-test-app/src/client/components/PostCard.jsx

@@ -0,0 +1,19 @@
+import { useTheme } from './ThemeContext'
+
+export function PostCard({ post, onClick, showAuthor = false }) {
+  const { t } = useTheme()
+  return (
+    <button
+      onClick={onClick}
+      className={`w-full text-left p-4 rounded-xl ${t.card} border ${t.border} hover:border-opacity-50 transition`}
+    >
+      <h2 className="font-medium mb-1">{post.title}</h2>
+      <p className={`text-sm ${t.muted} line-clamp-2`}>{post.content}</p>
+      <p className={`text-xs ${t.subtle} mt-2`}>
+        {showAuthor && <>By {post.author_name} &bull; </>}
+        {post.published !== undefined && <>{post.published ? 'Published' : 'Draft'} &bull; </>}
+        {new Date(post.created_at).toLocaleDateString()}
+      </p>
+    </button>
+  )
+}

package/my-test-app/src/client/components/Textarea.jsx

@@ -0,0 +1,12 @@
+import { useTheme } from './ThemeContext'
+
+export function Textarea({ rows = 5, className = '', ...props }) {
+  const { t } = useTheme()
+  return (
+    <textarea
+      rows={rows}
+      className={`w-full px-3 py-2 text-sm rounded-lg ${t.card} border ${t.border} focus:outline-none resize-none ${className}`}
+      {...props}
+    />
+  )
+}

package/my-test-app/src/client/components/ThemeContext.jsx

@@ -0,0 +1,5 @@
+import { createContext, useContext } from 'react'
+
+export const ThemeContext = createContext()
+
+export const useTheme = () => useContext(ThemeContext)

package/my-test-app/src/client/contexts/AppContext.jsx

@@ -0,0 +1,13 @@
+import { createContext, useContext } from 'react'
+
+const AppContext = createContext()
+
+export const useApp = () => {
+  const context = useContext(AppContext)
+  if (!context) throw new Error('useApp must be used within AppProvider')
+  return context
+}
+
+export function AppProvider({ children, value }) {
+  return <AppContext.Provider value={value}>{children}</AppContext.Provider>
+}

package/my-test-app/src/client/contexts/ToastContext.jsx

@@ -0,0 +1,94 @@
+import { createContext, useContext, useState, useCallback } from 'react'
+
+const ToastContext = createContext()
+
+export const useToast = () => {
+  const context = useContext(ToastContext)
+  if (!context) throw new Error('useToast must be used within ToastProvider')
+  return context
+}
+
+export function ToastProvider({ children }) {
+  const [toasts, setToasts] = useState([])
+
+  const addToast = useCallback((message, type = 'success', duration = 4000) => {
+    const id = Date.now()
+    setToasts(prev => [...prev, { id, message, type }])
+    if (duration > 0) {
+      setTimeout(() => {
+        setToasts(prev => prev.filter(t => t.id !== id))
+      }, duration)
+    }
+    return id
+  }, [])
+
+  const removeToast = useCallback((id) => {
+    setToasts(prev => prev.filter(t => t.id !== id))
+  }, [])
+
+  const toast = {
+    success: (message, duration) => addToast(message, 'success', duration),
+    error: (message, duration) => addToast(message, 'error', duration),
+    info: (message, duration) => addToast(message, 'info', duration),
+  }
+
+  return (
+    <ToastContext.Provider value={toast}>
+      {children}
+      <ToastContainer toasts={toasts} removeToast={removeToast} />
+    </ToastContext.Provider>
+  )
+}
+
+function ToastContainer({ toasts, removeToast }) {
+  if (toasts.length === 0) return null
+
+  return (
+    <div className="fixed bottom-4 right-4 z-50 flex flex-col gap-2 max-w-sm">
+      {toasts.map(toast => (
+        <Toast key={toast.id} {...toast} onClose={() => removeToast(toast.id)} />
+      ))}
+    </div>
+  )
+}
+
+function Toast({ message, type, onClose }) {
+  const styles = {
+    success: 'bg-emerald-500 text-white',
+    error: 'bg-red-500 text-white',
+    info: 'bg-blue-500 text-white',
+  }
+
+  const icons = {
+    success: (
+      <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+      </svg>
+    ),
+    error: (
+      <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+      </svg>
+    ),
+    info: (
+      <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+      </svg>
+    ),
+  }
+
+  return (
+    <div
+      className={`flex items-center gap-3 px-4 py-3 rounded-lg shadow-lg animate-slide-in ${styles[type]}`}
+      role="alert"
+    >
+      {icons[type]}
+      <p className="text-sm font-medium flex-1">{message}</p>
+      <button onClick={onClose} className="opacity-70 hover:opacity-100 transition">
+        <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+        </svg>
+      </button>
+    </div>
+  )
+}

package/my-test-app/src/client/layouts/AppLayout.jsx

@@ -0,0 +1,60 @@
+import { useState } from 'react'
+import { useAuth, useNavigate } from '@basicbenframework/core/client'
+import { useTheme } from '../components/ThemeContext'
+import { RootLayout } from './RootLayout'
+import { DesktopNav } from '../components/Nav/DesktopNav'
+import { MobileNav } from '../components/Nav/MobileNav'
+import { DarkModeToggle } from '../components/Nav/DarkModeToggle'
+import { Logo } from '../components/Logo'
+
+function AppLayoutInner({ children }) {
+  const { t, dark, setDark } = useTheme()
+  const { user, logout } = useAuth()
+  const navigate = useNavigate()
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+
+  return (
+    <div className="max-w-3xl mx-auto px-6">
+      <nav className={`flex items-center justify-between h-14 border-b ${t.border} relative`}>
+        <button onClick={() => navigate('/')} className="flex items-center gap-2 font-semibold hover:opacity-70 transition">
+          <Logo className="w-6 h-6" />
+          <span>BasicBen</span>
+        </button>
+        <DesktopNav user={user} navigate={navigate} logout={logout} />
+
+        {/* Mobile Navigation Trigger */}
+        <div className="flex sm:hidden items-center gap-2">
+          <DarkModeToggle dark={dark} setDark={setDark} />
+          <button
+            onClick={() => setMobileMenuOpen(true)}
+            className={`p-2 rounded-lg ${t.card} transition`}
+            aria-label="Open menu"
+          >
+            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+            </svg>
+          </button>
+        </div>
+      </nav>
+
+      <main className="py-8">{children}</main>
+
+      {mobileMenuOpen && (
+        <MobileNav
+          user={user}
+          navigate={navigate}
+          onClose={() => setMobileMenuOpen(false)}
+          logout={logout}
+        />
+      )}
+    </div>
+  )
+}
+
+export function AppLayout({ children }) {
+  return (
+    <RootLayout>
+      <AppLayoutInner>{children}</AppLayoutInner>
+    </RootLayout>
+  )
+}