@basicbenframework/core 0.1.0

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

@@ -0,0 +1,206 @@
+import { useAuth, useNavigate } from '@basicbenframework/core/client'
+import { useTheme } from '../components/ThemeContext'
+import { Card } from '../components/Card'
+import { Button } from '../components/Button'
+import { Avatar } from '../components/Avatar'
+import { Logo } from '../components/Logo'
+
+export function Home() {
+  const { user } = useAuth()
+  const navigate = useNavigate()
+  const { t, dark } = useTheme()
+
+  const features = [
+    {
+      icon: (
+        <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
+        </svg>
+      ),
+      title: 'Zero Dependencies',
+      desc: 'No runtime deps. HTTP server, router, JWT, validation — all written from scratch using Node.js built-ins.'
+    },
+    {
+      icon: (
+        <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+        </svg>
+      ),
+      title: 'Laravel-Inspired DX',
+      desc: 'Migrations, controllers, models, and scaffolding commands. Familiar conventions without the magic.'
+    },
+    {
+      icon: (
+        <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M8 11V7a4 4 0 118 0m-4 8v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2z" />
+        </svg>
+      ),
+      title: 'No Lock-in',
+      desc: 'Just React, Node.js, and Vite. You own your stack. Eject anytime — your code is still your code.'
+    },
+    {
+      icon: (
+        <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+        </svg>
+      ),
+      title: 'Escape Hatches',
+      desc: 'Every convention can be overridden via basicben.config.js. Use what works, change what doesn\'t.'
+    }
+  ]
+
+  const comparisons = [
+    { name: 'Next.js / Remix', issue: 'Too much magic, vendor lock-in' },
+    { name: 'Express + Vite', issue: 'Wire everything yourself' },
+    { name: 'BasicBen', issue: 'Conventions + control', highlight: true }
+  ]
+
+  const builtIns = [
+    'JWT authentication',
+    'Password hashing',
+    'Request validation',
+    'Database migrations',
+    'Auto-loading routes',
+    'CLI scaffolding'
+  ]
+
+  return (
+    <div className="space-y-16 py-8">
+      {/* Hero */}
+      <section className="text-center">
+        <div className="flex justify-center mb-6">
+          <Logo className="w-16 h-16" />
+        </div>
+        <p className={`text-xs ${t.subtle} mb-3 tracking-wide uppercase`}>Full-stack React Framework</p>
+        <h1 className="text-4xl sm:text-5xl font-bold tracking-tight mb-4">
+          Ship faster with less
+        </h1>
+        <p className={`${t.muted} max-w-lg mx-auto mb-8 text-lg`}>
+          A productive, convention-driven framework for React apps. Zero runtime dependencies. Maximum clarity.
+        </p>
+        <div className="flex flex-col items-center gap-4">
+          <div className={`px-4 py-3 rounded-lg ${t.card} border ${t.border} font-mono text-sm`}>
+            <span className={t.muted}>$</span> npx create-basicben-app my-app
+          </div>
+          <div className="flex gap-3">
+            <Button onClick={() => navigate('/docs')}>Get Started</Button>
+            <Button variant="secondary" onClick={() => window.open('https://github.com/BasicBenFramework/basicben-framework', '_blank')}>
+              GitHub
+            </Button>
+          </div>
+        </div>
+      </section>
+
+      {/* The Problem */}
+      <section>
+        <h2 className={`text-center text-sm font-medium uppercase tracking-wider ${t.muted} mb-6`}>The Problem</h2>
+        <Card>
+          <div className="space-y-3">
+            {comparisons.map(({ name, issue, highlight }) => (
+              <div
+                key={name}
+                className={`flex items-center justify-between p-3 rounded-lg ${
+                  highlight
+                    ? `${dark ? 'bg-white/10' : 'bg-black/10'} border ${t.border}`
+                    : ''
+                }`}
+              >
+                <span className={`font-medium ${highlight ? '' : t.muted}`}>{name}</span>
+                <span className={`text-sm ${highlight ? (dark ? 'text-green-400' : 'text-green-600') : t.subtle}`}>
+                  {highlight ? '✓ ' : ''}{issue}
+                </span>
+              </div>
+            ))}
+          </div>
+        </Card>
+      </section>
+
+      {/* Features */}
+      <section>
+        <h2 className={`text-center text-sm font-medium uppercase tracking-wider ${t.muted} mb-6`}>Why BasicBen</h2>
+        <div className="grid gap-4 sm:grid-cols-2">
+          {features.map(({ icon, title, desc }) => (
+            <Card key={title} className="hover:border-opacity-50 transition">
+              <div className={`inline-flex p-2 rounded-lg ${t.card} border ${t.border} mb-3`}>
+                {icon}
+              </div>
+              <h3 className="font-semibold mb-1">{title}</h3>
+              <p className={`text-sm ${t.muted}`}>{desc}</p>
+            </Card>
+          ))}
+        </div>
+      </section>
+
+      {/* Built-in */}
+      <section>
+        <h2 className={`text-center text-sm font-medium uppercase tracking-wider ${t.muted} mb-6`}>Batteries Included</h2>
+        <Card>
+          <p className={`text-sm ${t.muted} mb-4`}>
+            Everything you need to build a production app, without pulling in a dozen packages.
+          </p>
+          <div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
+            {builtIns.map(item => (
+              <div
+                key={item}
+                className={`flex items-center gap-2 px-3 py-2 rounded-lg ${t.card} border ${t.border} text-sm`}
+              >
+                <svg className={`w-4 h-4 flex-shrink-0 ${dark ? 'text-green-400' : 'text-green-600'}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                </svg>
+                <span>{item}</span>
+              </div>
+            ))}
+          </div>
+        </Card>
+      </section>
+
+      {/* Code Example */}
+      <section>
+        <h2 className={`text-center text-sm font-medium uppercase tracking-wider ${t.muted} mb-6`}>Clean & Simple</h2>
+        <Card>
+          <div className={`rounded-lg p-4 font-mono text-sm ${dark ? 'bg-black/50' : 'bg-black/5'} border ${t.border} overflow-x-auto`}>
+            <pre className={t.text}>{`// src/routes/posts.js
+import { PostController } from '../controllers/PostController.js'
+import { auth } from '../middleware/auth.js'
+
+export default (router) => {
+  router.get('/api/posts', PostController.index)
+  router.post('/api/posts', auth, PostController.store)
+  router.put('/api/posts/:id', auth, PostController.update)
+  router.delete('/api/posts/:id', auth, PostController.destroy)
+}`}</pre>
+          </div>
+          <p className={`text-sm ${t.muted} mt-3`}>
+            Routes are auto-loaded. Controllers are plain objects. Middleware is just a function. No decorators, no magic.
+          </p>
+        </Card>
+      </section>
+
+      {/* Logged in user card */}
+      {user && (
+        <Card>
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <Avatar name={user.name} />
+              <div>
+                <p className="font-medium text-sm">{user.name}</p>
+                <p className={`text-xs ${t.subtle}`}>{user.email}</p>
+              </div>
+            </div>
+            <div className="flex gap-2">
+              <Button variant="secondary" onClick={() => navigate('/posts')} className="text-xs px-3 py-1.5">My Posts</Button>
+              <Button variant="secondary" onClick={() => navigate('/profile')} className="text-xs px-3 py-1.5">Profile</Button>
+            </div>
+          </div>
+        </Card>
+      )}
+
+      {/* Footer */}
+      <footer className={`text-center text-xs ${t.subtle} space-y-2`}>
+        <p>Built with Node.js built-ins. Inspired by Laravel.</p>
+        <p>BasicBen v0.1.0</p>
+      </footer>
+    </div>
+  )
+}

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

@@ -0,0 +1,69 @@
+import { useState, useEffect } from 'react'
+import { useNavigate, useParams } from '@basicbenframework/core/client'
+import { PageHeader } from '../components/PageHeader'
+import { BackLink } from '../components/BackLink'
+import { Input } from '../components/Input'
+import { Textarea } from '../components/Textarea'
+import { Button } from '../components/Button'
+import { Loading } from '../components/Loading'
+import { api } from '../../helpers/api'
+import { useToast } from '../contexts/ToastContext'
+
+export function PostForm() {
+  const navigate = useNavigate()
+  const params = useParams()
+  const postId = params.id
+  const toast = useToast()
+  const [form, setForm] = useState({ title: '', content: '', published: false })
+  const [loading, setLoading] = useState(!!postId)
+  const [saving, setSaving] = useState(false)
+
+  useEffect(() => {
+    if (postId) {
+      api(`/api/posts/${postId}`)
+        .then(data => setForm({ title: data.post.title, content: data.post.content, published: !!data.post.published }))
+        .catch(err => {
+          toast.error(err.message)
+          navigate('/posts')
+        })
+        .finally(() => setLoading(false))
+    }
+  }, [postId])
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    setSaving(true)
+    try {
+      if (postId) {
+        await api(`/api/posts/${postId}`, { method: 'PUT', body: JSON.stringify(form) })
+        toast.success('Post updated')
+      } else {
+        await api('/api/posts', { method: 'POST', body: JSON.stringify(form) })
+        toast.success('Post created')
+      }
+      navigate('/posts')
+    } catch (err) {
+      toast.error(err.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  if (loading) return <Loading />
+
+  return (
+    <div className="max-w-xl mx-auto">
+      <BackLink onClick={() => navigate('/posts')}>Back to posts</BackLink>
+      <PageHeader title={postId ? 'Edit Post' : 'New Post'} />
+      <form onSubmit={handleSubmit} className="space-y-4 mt-4">
+        <Input placeholder="Title" required value={form.title} onChange={e => setForm({ ...form, title: e.target.value })} />
+        <Textarea placeholder="Write your post content..." required rows={10} value={form.content} onChange={e => setForm({ ...form, content: e.target.value })} />
+        <label className="flex items-center gap-2 text-sm">
+          <input type="checkbox" checked={form.published} onChange={e => setForm({ ...form, published: e.target.checked })} className="rounded" />
+          Publish this post
+        </label>
+        <Button type="submit" disabled={saving} className="w-full">{saving ? '...' : postId ? 'Update Post' : 'Create Post'}</Button>
+      </form>
+    </div>
+  )
+}

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

@@ -0,0 +1,59 @@
+import { useState, useEffect } from 'react'
+import { useNavigate } from '@basicbenframework/core/client'
+import { useTheme } from '../components/ThemeContext'
+import { PageHeader } from '../components/PageHeader'
+import { Card } from '../components/Card'
+import { Button } from '../components/Button'
+import { Loading } from '../components/Loading'
+import { Empty } from '../components/Empty'
+import { api } from '../../helpers/api'
+import { useToast } from '../contexts/ToastContext'
+
+export function Posts() {
+  const navigate = useNavigate()
+  const { t } = useTheme()
+  const toast = useToast()
+  const [posts, setPosts] = useState([])
+  const [loading, setLoading] = useState(true)
+
+  const loadPosts = () => api('/api/posts').then(data => setPosts(data.posts)).finally(() => setLoading(false))
+
+  useEffect(() => { loadPosts() }, [])
+
+  const deletePost = async (id) => {
+    if (!confirm('Delete this post?')) return
+    try {
+      await api(`/api/posts/${id}`, { method: 'DELETE' })
+      toast.success('Post deleted')
+      loadPosts()
+    } catch (err) {
+      toast.error(err.message)
+    }
+  }
+
+  if (loading) return <Loading />
+
+  return (
+    <div>
+      <PageHeader title="My Posts" action={<Button onClick={() => navigate('/posts/new')}>New Post</Button>} />
+      {posts.length === 0 ? (
+        <Empty>No posts yet. Create your first one!</Empty>
+      ) : (
+        <div className="space-y-3">
+          {posts.map(post => (
+            <Card key={post.id} className="flex items-center justify-between">
+              <div className="flex-1 min-w-0 mr-4">
+                <h2 className="font-medium truncate">{post.title}</h2>
+                <p className={`text-xs ${t.subtle}`}>{post.published ? 'Published' : 'Draft'} &bull; {new Date(post.created_at).toLocaleDateString()}</p>
+              </div>
+              <div className="flex gap-2">
+                <Button variant="secondary" onClick={() => navigate(`/posts/${post.id}/edit`)} className="text-xs px-3 py-1.5">Edit</Button>
+                <Button variant="danger" onClick={() => deletePost(post.id)} className="text-xs px-3 py-1.5">Delete</Button>
+              </div>
+            </Card>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,68 @@
+import { useState } from 'react'
+import { useAuth } from '@basicbenframework/core/client'
+import { PageHeader } from '../components/PageHeader'
+import { Card } from '../components/Card'
+import { Input } from '../components/Input'
+import { Button } from '../components/Button'
+import { api } from '../../helpers/api'
+import { useToast } from '../contexts/ToastContext'
+
+export function Profile() {
+  const { user, setUser } = useAuth()
+  const toast = useToast()
+  const [form, setForm] = useState({ name: user?.name || '', email: user?.email || '' })
+  const [pwForm, setPwForm] = useState({ currentPassword: '', newPassword: '' })
+  const [loading, setLoading] = useState(false)
+
+  const updateProfile = async (e) => {
+    e.preventDefault()
+    setLoading(true)
+    try {
+      const data = await api('/api/profile', { method: 'PUT', body: JSON.stringify(form) })
+      setUser(data.user)
+      toast.success('Profile updated')
+    } catch (err) {
+      toast.error(err.message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const changePassword = async (e) => {
+    e.preventDefault()
+    setLoading(true)
+    try {
+      await api('/api/profile/password', { method: 'PUT', body: JSON.stringify(pwForm) })
+      setPwForm({ currentPassword: '', newPassword: '' })
+      toast.success('Password changed')
+    } catch (err) {
+      toast.error(err.message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="max-w-md mx-auto space-y-6">
+      <PageHeader title="Profile" />
+
+      <Card>
+        <form onSubmit={updateProfile} className="space-y-3">
+          <h2 className="font-medium mb-2">Edit Profile</h2>
+          <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 })} />
+          <Button type="submit" disabled={loading} className="w-full">{loading ? '...' : 'Save'}</Button>
+        </form>
+      </Card>
+
+      <Card>
+        <form onSubmit={changePassword} className="space-y-3">
+          <h2 className="font-medium mb-2">Change Password</h2>
+          <Input type="password" placeholder="Current password" required value={pwForm.currentPassword} onChange={e => setPwForm({ ...pwForm, currentPassword: e.target.value })} />
+          <Input type="password" placeholder="New password" required minLength={8} value={pwForm.newPassword} onChange={e => setPwForm({ ...pwForm, newPassword: e.target.value })} />
+          <Button type="submit" disabled={loading} className="w-full">{loading ? '...' : 'Change Password'}</Button>
+        </form>
+      </Card>
+    </div>
+  )
+}

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

@@ -0,0 +1,207 @@
+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 Routing() {
+  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="Routing"
+        subtitle="API routes, controllers, and middleware"
+      />
+
+      <div className="space-y-6">
+        <Card>
+          <h2 className="text-lg font-semibold mb-2">Route Files</h2>
+          <p className={`text-sm ${t.muted} mb-4`}>
+            Routes are defined in the <code>src/routes/</code> directory. Each file exports route definitions that map HTTP methods to handlers.
+          </p>
+
+          <CodeBlock title="src/routes/posts.js">
+{`import { PostController } from '../controllers/PostController.js'
+import { auth } from '../middleware/auth.js'
+
+export default [
+  { method: 'GET', path: '/api/posts', handler: PostController.index, middleware: [auth] },
+  { method: 'GET', path: '/api/posts/:id', handler: PostController.show },
+  { method: 'POST', path: '/api/posts', handler: PostController.store, middleware: [auth] },
+  { method: 'PUT', path: '/api/posts/:id', handler: PostController.update, middleware: [auth] },
+  { method: 'DELETE', path: '/api/posts/:id', handler: PostController.destroy, middleware: [auth] },
+]`}
+          </CodeBlock>
+
+          <CodeBlock title="Generate a route file">
+{`npx basicben make:route posts`}
+          </CodeBlock>
+        </Card>
+
+        <Card>
+          <h2 className="text-lg font-semibold mb-2">Controllers</h2>
+          <p className={`text-sm ${t.muted} mb-4`}>
+            Controllers handle the business logic for your routes. They receive the request and return a response.
+          </p>
+
+          <CodeBlock title="src/controllers/PostController.js">
+{`import { db } from 'basicben'
+
+export const PostController = {
+  // GET /api/posts
+  index: async (req, res) => {
+    const posts = await (await db.table('posts'))
+      .where('user_id', req.user.id)
+      .orderBy('created_at', 'DESC')
+      .get()
+
+    return res.json({ posts })
+  },
+
+  // GET /api/posts/:id
+  show: async (req, res) => {
+    const post = await (await db.table('posts')).find(req.params.id)
+
+    if (!post) {
+      return res.status(404).json({ error: 'Post not found' })
+    }
+
+    return res.json({ post })
+  },
+
+  // POST /api/posts
+  store: async (req, res) => {
+    const { title, content } = req.body
+
+    const result = await (await db.table('posts')).insert({
+      title,
+      content,
+      user_id: req.user.id
+    })
+
+    return res.status(201).json({
+      id: result.lastInsertRowid
+    })
+  },
+
+  // PUT /api/posts/:id
+  update: async (req, res) => {
+    const { title, content } = req.body
+
+    await (await db.table('posts'))
+      .where('id', req.params.id)
+      .where('user_id', req.user.id)
+      .update({ title, content })
+
+    return res.json({ success: true })
+  },
+
+  // DELETE /api/posts/:id
+  destroy: async (req, res) => {
+    await (await db.table('posts'))
+      .where('id', req.params.id)
+      .where('user_id', req.user.id)
+      .delete()
+
+    return res.json({ success: true })
+  }
+}`}
+          </CodeBlock>
+
+          <CodeBlock title="Generate a controller">
+{`npx basicben make:controller Post`}
+          </CodeBlock>
+        </Card>
+
+        <Card>
+          <h2 className="text-lg font-semibold mb-2">Middleware</h2>
+          <p className={`text-sm ${t.muted} mb-4`}>
+            Middleware runs before your route handler. Use it for authentication, logging, validation, etc.
+          </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' })
+  }
+
+  const token = header.slice(7)
+
+  try {
+    const payload = await verifyToken(token)
+    const user = await (await db.table('users')).find(payload.userId)
+
+    if (!user) {
+      return res.status(401).json({ error: 'Unauthorized' })
+    }
+
+    req.user = user
+    next()
+  } catch {
+    return res.status(401).json({ error: 'Invalid token' })
+  }
+}`}
+          </CodeBlock>
+
+          <CodeBlock title="Generate middleware">
+{`npx basicben make:middleware auth`}
+          </CodeBlock>
+        </Card>
+
+        <Card>
+          <h2 className="text-lg font-semibold mb-2">Route Parameters</h2>
+          <p className={`text-sm ${t.muted} mb-4`}>
+            Access URL parameters via <code>req.params</code> and query strings via <code>req.query</code>.
+          </p>
+
+          <CodeBlock title="Parameters and query strings">
+{`// Route: /api/posts/:id
+// URL: /api/posts/123?include=author
+
+export const show = async (req, res) => {
+  const { id } = req.params        // { id: '123' }
+  const { include } = req.query    // { include: 'author' }
+
+  // ...
+}`}
+          </CodeBlock>
+        </Card>
+
+        <Card>
+          <h2 className="text-lg font-semibold mb-2">Request Body</h2>
+          <p className={`text-sm ${t.muted} mb-4`}>
+            JSON request bodies are automatically parsed and available on <code>req.body</code>.
+          </p>
+
+          <CodeBlock title="Accessing request body">
+{`export const store = async (req, res) => {
+  const { title, content, published } = req.body
+
+  // Validate and use the data
+  if (!title) {
+    return res.status(400).json({ error: 'Title is required' })
+  }
+
+  // ...
+}`}
+          </CodeBlock>
+        </Card>
+      </div>
+    </div>
+  )
+}