@basicbenframework/core 0.1.0 → 0.1.5

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

@@ -1,33 +0,0 @@
-import { useNavigate } from '@basicbenframework/core/client'
-import { useTheme } from '../components/ThemeContext'
-import { RootLayout } from './RootLayout'
-import { DarkModeToggle } from '../components/Nav/DarkModeToggle'
-import { Logo } from '../components/Logo'
-
-function AuthLayoutInner({ children }) {
-  const { t, dark, setDark } = useTheme()
-  const navigate = useNavigate()
-
-  return (
-    <div className="max-w-3xl mx-auto px-6">
-      <nav className={`flex items-center justify-between h-14 border-b ${t.border}`}>
-        <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>
-        <DarkModeToggle dark={dark} setDark={setDark} />
-      </nav>
-      <main className="py-8 flex items-center justify-center min-h-[calc(100vh-3.5rem)]">
-        {children}
-      </main>
-    </div>
-  )
-}
-
-export function AuthLayout({ children }) {
-  return (
-    <RootLayout>
-      <AuthLayoutInner>{children}</AuthLayoutInner>
-    </RootLayout>
-  )
-}

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

@@ -1,60 +0,0 @@
-import { useNavigate, usePath } from '@basicbenframework/core/client'
-import { useTheme } from '../components/ThemeContext'
-import { AppLayout } from './AppLayout'
-
-function SidebarLink({ href, active, children }) {
-  const { t } = useTheme()
-  const navigate = useNavigate()
-
-  return (
-    <button
-      onClick={() => navigate(href)}
-      className={`block w-full text-left px-3 py-2 rounded-lg text-sm transition ${
-        active ? `${t.card} font-medium` : `${t.muted} hover:opacity-70`
-      }`}
-    >
-      {children}
-    </button>
-  )
-}
-
-function DocsSidebar({ children }) {
-  const { t } = useTheme()
-  const path = usePath()
-
-  const docLinks = [
-    { href: '/docs', label: 'Getting Started' },
-    { href: '/docs/routing', label: 'Routing' },
-    { href: '/docs/database', label: 'Database' },
-    { href: '/docs/authentication', label: 'Authentication' },
-    { href: '/docs/validation', label: 'Validation' },
-    { href: '/docs/testing', label: 'Testing' },
-  ]
-
-  return (
-    <div className="flex gap-8">
-      <aside className="hidden md:block w-48 flex-shrink-0">
-        <nav className="sticky top-20 space-y-1">
-          {docLinks.map(link => (
-            <SidebarLink
-              key={link.href}
-              href={link.href}
-              active={path === link.href}
-            >
-              {link.label}
-            </SidebarLink>
-          ))}
-        </nav>
-      </aside>
-      <div className="flex-1 min-w-0">{children}</div>
-    </div>
-  )
-}
-
-export function DocsLayout({ children }) {
-  return (
-    <AppLayout>
-      <DocsSidebar>{children}</DocsSidebar>
-    </AppLayout>
-  )
-}

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

@@ -1,25 +0,0 @@
-import { useState } from 'react'
-import { ThemeContext } from '../components/ThemeContext'
-import { ToastProvider } from '../contexts/ToastContext'
-
-export function RootLayout({ children }) {
-  const [dark, setDark] = useState(true)
-
-  const t = dark
-    ? { bg: 'bg-black', text: 'text-white', muted: 'text-white/50', subtle: 'text-white/30', border: 'border-white/10', card: 'bg-white/5', btn: 'bg-white text-black', btnHover: 'hover:bg-white/90', btnSecondary: 'bg-white/10 hover:bg-white/20' }
-    : { bg: 'bg-white', text: 'text-black', muted: 'text-black/50', subtle: 'text-black/30', border: 'border-black/10', card: 'bg-black/5', btn: 'bg-black text-white', btnHover: 'hover:bg-black/90', btnSecondary: 'bg-black/10 hover:bg-black/20' }
-
-  return (
-    <ThemeContext.Provider value={{ t, dark, setDark }}>
-      <ToastProvider>
-        <div className={`min-h-screen ${t.bg} ${t.text} transition-colors duration-300`}>
-          <div className="fixed inset-0 pointer-events-none overflow-hidden">
-            <div className={`absolute top-0 right-0 w-[500px] h-[500px] rounded-full blur-[150px] ${dark ? 'bg-purple-500/10' : 'bg-purple-500/5'}`} />
-            <div className={`absolute bottom-0 left-0 w-[500px] h-[500px] rounded-full blur-[150px] ${dark ? 'bg-blue-500/10' : 'bg-blue-500/5'}`} />
-          </div>
-          <div className="relative">{children}</div>
-        </div>
-      </ToastProvider>
-    </ThemeContext.Provider>
-  )
-}

package/my-test-app/src/client/pages/Auth.jsx

@@ -1,55 +0,0 @@
-import { useState } from 'react'
-import { useAuth, useNavigate, usePath } from '@basicbenframework/core/client'
-import { useTheme } from '../components/ThemeContext'
-import { Input } from '../components/Input'
-import { Button } from '../components/Button'
-import { api } from '../../helpers/api'
-import { useToast } from '../contexts/ToastContext'
-
-export function Auth() {
-  const { setUser } = useAuth()
-  const navigate = useNavigate()
-  const path = usePath()
-  const { t } = useTheme()
-  const toast = useToast()
-  const [form, setForm] = useState({ name: '', email: '', password: '' })
-  const [loading, setLoading] = useState(false)
-  const isLogin = path === '/login'
-
-  const handleSubmit = async (e) => {
-    e.preventDefault()
-    setLoading(true)
-    try {
-      const endpoint = isLogin ? '/api/auth/login' : '/api/auth/register'
-      const data = await api(endpoint, {
-        method: 'POST',
-        body: JSON.stringify(isLogin ? { email: form.email, password: form.password } : form)
-      })
-      localStorage.setItem('token', data.token)
-      setUser(data.user)
-      toast.success(isLogin ? 'Welcome back!' : 'Account created!')
-      navigate('/')
-    } catch (err) {
-      toast.error(err.message)
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  return (
-    <div className="max-w-xs mx-auto py-8">
-      <h1 className="text-2xl font-bold text-center mb-1">{isLogin ? 'Welcome back' : 'Create account'}</h1>
-      <p className={`text-sm ${t.muted} text-center mb-6`}>{isLogin ? 'Sign in to continue' : 'Get started for free'}</p>
-      <form onSubmit={handleSubmit} className="space-y-3 mt-4">
-        {!isLogin && <Input placeholder="Name" required value={form.name} onChange={e => setForm({ ...form, name: e.target.value })} />}
-        <Input type="email" placeholder="Email" required value={form.email} onChange={e => setForm({ ...form, email: e.target.value })} />
-        <Input type="password" placeholder="Password" required minLength={8} value={form.password} onChange={e => setForm({ ...form, password: e.target.value })} />
-        <Button type="submit" disabled={loading} className="w-full">{loading ? '...' : isLogin ? 'Sign in' : 'Create account'}</Button>
-      </form>
-      <p className={`text-xs ${t.muted} text-center mt-4`}>
-        {isLogin ? "Don't have an account? " : 'Have an account? '}
-        <button onClick={() => navigate(isLogin ? '/register' : '/login')} className="underline hover:no-underline">{isLogin ? 'Sign up' : 'Sign in'}</button>
-      </p>
-    </div>
-  )
-}

package/my-test-app/src/client/pages/Authentication.jsx

@@ -1,236 +0,0 @@
-import { useTheme } from '../components/ThemeContext'
-import { Card } from '../components/Card'
-import { PageHeader } from '../components/PageHeader'
-import { AppLayout } from '../layouts/AppLayout'
-import { DocsLayout } from '../layouts/DocsLayout'
-
-export function Authentication() {
-  const { t } = useTheme()
-
-  const CodeBlock = ({ children, title }) => (
-    <div className="mt-4">
-      {title && <div className={`text-xs font-medium mb-2 ${t.muted}`}>{title}</div>}
-      <div className={`rounded-lg p-4 font-mono text-sm ${t.card} border ${t.border} overflow-x-auto`}>
-        <pre className={t.text}>{children}</pre>
-      </div>
-    </div>
-  )
-
-  return (
-    <div>
-      <PageHeader
-        title="Authentication"
-        subtitle="JWT auth, password hashing, and protected routes"
-      />
-
-      <div className="space-y-6">
-        <Card>
-          <h2 className="text-lg font-semibold mb-2">Overview</h2>
-          <p className={`text-sm ${t.muted} mb-4`}>
-            BasicBen includes a complete JWT-based authentication system with password hashing, token generation, and middleware for protected routes.
-          </p>
-
-          <div className="grid gap-3 sm:grid-cols-3">
-            <div className={`rounded-lg p-3 ${t.card} border ${t.border}`}>
-              <div className="font-semibold text-sm">JWT Tokens</div>
-              <p className={`text-xs mt-1 ${t.muted}`}>Stateless authentication</p>
-            </div>
-            <div className={`rounded-lg p-3 ${t.card} border ${t.border}`}>
-              <div className="font-semibold text-sm">Bcrypt Hashing</div>
-              <p className={`text-xs mt-1 ${t.muted}`}>Secure password storage</p>
-            </div>
-            <div className={`rounded-lg p-3 ${t.card} border ${t.border}`}>
-              <div className="font-semibold text-sm">Auth Middleware</div>
-              <p className={`text-xs mt-1 ${t.muted}`}>Protect your routes</p>
-            </div>
-          </div>
-        </Card>
-
-        <Card>
-          <h2 className="text-lg font-semibold mb-2">Password Hashing</h2>
-          <p className={`text-sm ${t.muted} mb-4`}>
-            Use bcrypt to securely hash and verify passwords.
-          </p>
-
-          <CodeBlock title="Hash and verify passwords">
-{`import { hashPassword, verifyPassword } from 'basicben/auth'
-
-// Hash a password (for registration)
-const hashedPassword = await hashPassword('user-password')
-
-// Verify a password (for login)
-const isValid = await verifyPassword('user-password', hashedPassword)
-// Returns true or false`}
-          </CodeBlock>
-        </Card>
-
-        <Card>
-          <h2 className="text-lg font-semibold mb-2">JWT Tokens</h2>
-          <p className={`text-sm ${t.muted} mb-4`}>
-            Generate and verify JWT tokens for stateless authentication.
-          </p>
-
-          <CodeBlock title="Generate and verify tokens">
-{`import { generateToken, verifyToken } from 'basicben/auth'
-
-// Generate a token (after successful login)
-const token = await generateToken({ userId: user.id })
-
-// Verify a token (in middleware)
-try {
-  const payload = await verifyToken(token)
-  console.log(payload.userId) // The user ID from the token
-} catch (error) {
-  // Token is invalid or expired
-}`}
-          </CodeBlock>
-
-          <CodeBlock title="Configure token expiration in basicben.config.js">
-{`export default {
-  auth: {
-    jwtSecret: process.env.JWT_SECRET,
-    jwtExpiresIn: '7d' // Token expires in 7 days
-  }
-}`}
-          </CodeBlock>
-        </Card>
-
-        <Card>
-          <h2 className="text-lg font-semibold mb-2">Registration</h2>
-          <p className={`text-sm ${t.muted} mb-4`}>
-            Example registration endpoint that creates a user and returns a token.
-          </p>
-
-          <CodeBlock title="src/controllers/AuthController.js">
-{`import { db } from 'basicben'
-import { hashPassword, generateToken } from 'basicben/auth'
-import { validate, rules } from 'basicben/validation'
-
-export const AuthController = {
-  register: async (req, res) => {
-    // Validate input
-    const result = await validate(req.body, {
-      name: [rules.required, rules.minLength(2)],
-      email: [rules.required, rules.email, rules.unique('users')],
-      password: [rules.required, rules.minLength(8)]
-    })
-
-    if (!result.valid) {
-      return res.status(400).json({ errors: result.errors })
-    }
-
-    // Create user
-    const hashedPassword = await hashPassword(req.body.password)
-
-    const { lastInsertRowid } = await (await db.table('users')).insert({
-      name: req.body.name,
-      email: req.body.email,
-      password: hashedPassword
-    })
-
-    // Get the created user
-    const user = await (await db.table('users')).find(lastInsertRowid)
-
-    // Generate token
-    const token = await generateToken({ userId: user.id })
-
-    return res.status(201).json({
-      user: { id: user.id, name: user.name, email: user.email },
-      token
-    })
-  }
-}`}
-          </CodeBlock>
-        </Card>
-
-        <Card>
-          <h2 className="text-lg font-semibold mb-2">Login</h2>
-          <p className={`text-sm ${t.muted} mb-4`}>
-            Example login endpoint that verifies credentials and returns a token.
-          </p>
-
-          <CodeBlock title="Login handler">
-{`import { verifyPassword, generateToken } from 'basicben/auth'
-
-export const AuthController = {
-  login: async (req, res) => {
-    const { email, password } = req.body
-
-    // Find user by email
-    const user = await (await db.table('users'))
-      .where('email', email)
-      .first()
-
-    if (!user) {
-      return res.status(401).json({ error: 'Invalid credentials' })
-    }
-
-    // Verify password
-    const valid = await verifyPassword(password, user.password)
-
-    if (!valid) {
-      return res.status(401).json({ error: 'Invalid credentials' })
-    }
-
-    // Generate token
-    const token = await generateToken({ userId: user.id })
-
-    return res.json({
-      user: { id: user.id, name: user.name, email: user.email },
-      token
-    })
-  }
-}`}
-          </CodeBlock>
-        </Card>
-
-        <Card>
-          <h2 className="text-lg font-semibold mb-2">Auth Middleware</h2>
-          <p className={`text-sm ${t.muted} mb-4`}>
-            Protect routes by requiring a valid JWT token.
-          </p>
-
-          <CodeBlock title="src/middleware/auth.js">
-{`import { verifyToken } from 'basicben/auth'
-import { db } from 'basicben'
-
-export const auth = async (req, res, next) => {
-  const header = req.headers.authorization
-
-  if (!header?.startsWith('Bearer ')) {
-    return res.status(401).json({ error: 'Unauthorized' })
-  }
-
-  try {
-    const token = header.slice(7)
-    const { userId } = await verifyToken(token)
-
-    req.user = await (await db.table('users')).find(userId)
-
-    if (!req.user) {
-      return res.status(401).json({ error: 'Unauthorized' })
-    }
-
-    next()
-  } catch {
-    return res.status(401).json({ error: 'Invalid token' })
-  }
-}`}
-          </CodeBlock>
-
-          <CodeBlock title="Using auth middleware in routes">
-{`import { auth } from '../middleware/auth.js'
-
-export default [
-  // Public route
-  { method: 'GET', path: '/api/posts', handler: PostController.index },
-
-  // Protected route - requires authentication
-  { method: 'POST', path: '/api/posts', handler: PostController.store, middleware: [auth] },
-]`}
-          </CodeBlock>
-        </Card>
-      </div>
-    </div>
-  )
-}