@basicbenframework/core 0.1.0 → 0.1.5

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

@@ -1,426 +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 Database() {
-  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="Database"
-        subtitle="Adapters, migrations, seeding, and queries"
-      />
-
-      <div className="space-y-6">
-        {/* Database Adapters */}
-        <Card>
-          <h2 className="text-lg font-semibold mb-2">Database Adapters</h2>
-          <p className={`text-sm ${t.muted} mb-4`}>
-            BasicBen supports multiple databases. Configure your adapter in <code>basicben.config.js</code>.
-          </p>
-
-          <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 mb-4">
-            <div className={`rounded-lg p-3 ${t.card} border ${t.border}`}>
-              <div className="font-semibold text-sm">SQLite</div>
-              <p className={`text-xs mt-1 ${t.muted}`}>Local file database (default)</p>
-            </div>
-            <div className={`rounded-lg p-3 ${t.card} border ${t.border}`}>
-              <div className="font-semibold text-sm">PostgreSQL</div>
-              <p className={`text-xs mt-1 ${t.muted}`}>Traditional Postgres</p>
-            </div>
-            <div className={`rounded-lg p-3 ${t.card} border ${t.border}`}>
-              <div className="font-semibold text-sm">Turso</div>
-              <p className={`text-xs mt-1 ${t.muted}`}>Edge SQLite (libSQL)</p>
-            </div>
-            <div className={`rounded-lg p-3 ${t.card} border ${t.border}`}>
-              <div className="font-semibold text-sm">PlanetScale</div>
-              <p className={`text-xs mt-1 ${t.muted}`}>Serverless MySQL</p>
-            </div>
-            <div className={`rounded-lg p-3 ${t.card} border ${t.border}`}>
-              <div className="font-semibold text-sm">Neon</div>
-              <p className={`text-xs mt-1 ${t.muted}`}>Serverless Postgres</p>
-            </div>
-          </div>
-
-          <CodeBlock title="basicben.config.js - SQLite (default)">
-{`export default {
-  db: {
-    driver: 'sqlite',
-    url: './database.sqlite'
-  }
-}`}
-          </CodeBlock>
-
-          <CodeBlock title="basicben.config.js - Turso">
-{`export default {
-  db: {
-    driver: 'turso',
-    url: process.env.TURSO_URL,
-    authToken: process.env.TURSO_AUTH_TOKEN
-  }
-}`}
-          </CodeBlock>
-
-          <CodeBlock title="basicben.config.js - PlanetScale">
-{`export default {
-  db: {
-    driver: 'planetscale',
-    url: process.env.DATABASE_URL
-  }
-}`}
-          </CodeBlock>
-
-          <CodeBlock title="basicben.config.js - Neon">
-{`export default {
-  db: {
-    driver: 'neon',
-    url: process.env.DATABASE_URL
-  }
-}`}
-          </CodeBlock>
-
-          <CodeBlock title="Install the driver you need">
-{`# SQLite (default)
-npm install better-sqlite3
-
-# PostgreSQL
-npm install pg
-
-# Turso
-npm install @libsql/client
-
-# PlanetScale
-npm install @planetscale/database
-
-# Neon
-npm install @neondatabase/serverless`}
-          </CodeBlock>
-        </Card>
-
-        {/* Migrations */}
-        <Card>
-          <h2 className="text-lg font-semibold mb-2">Migrations</h2>
-          <p className={`text-sm ${t.muted} mb-4`}>
-            Migrations let you version control your database schema. Each migration has an <code>up</code> function to apply changes and a <code>down</code> function to reverse them.
-          </p>
-
-          <CodeBlock title="Generate a migration">
-{`npx basicben make:migration create_posts`}
-          </CodeBlock>
-
-          <CodeBlock title="migrations/001_create_posts.js">
-{`export const up = (db) => {
-  db.exec(\`
-    CREATE TABLE posts (
-      id INTEGER PRIMARY KEY AUTOINCREMENT,
-      user_id INTEGER NOT NULL,
-      title TEXT NOT NULL,
-      content TEXT,
-      published INTEGER DEFAULT 0,
-      created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
-      FOREIGN KEY (user_id) REFERENCES users(id)
-    )
-  \`)
-}
-
-export const down = (db) => {
-  db.exec('DROP TABLE posts')
-}`}
-          </CodeBlock>
-
-          <div className="mt-4 grid gap-3 sm:grid-cols-2">
-            <div className={`rounded-lg p-3 ${t.card} border ${t.border}`}>
-              <code className="text-sm font-semibold">npx basicben migrate</code>
-              <p className={`text-xs mt-1 ${t.muted}`}>Run pending migrations</p>
-            </div>
-            <div className={`rounded-lg p-3 ${t.card} border ${t.border}`}>
-              <code className="text-sm font-semibold">npx basicben migrate:rollback</code>
-              <p className={`text-xs mt-1 ${t.muted}`}>Undo last batch</p>
-            </div>
-            <div className={`rounded-lg p-3 ${t.card} border ${t.border}`}>
-              <code className="text-sm font-semibold">npx basicben migrate:fresh</code>
-              <p className={`text-xs mt-1 ${t.muted}`}>Drop all & re-run</p>
-            </div>
-            <div className={`rounded-lg p-3 ${t.card} border ${t.border}`}>
-              <code className="text-sm font-semibold">npx basicben migrate:status</code>
-              <p className={`text-xs mt-1 ${t.muted}`}>Show migration status</p>
-            </div>
-          </div>
-        </Card>
-
-        {/* Seeding */}
-        <Card>
-          <h2 className="text-lg font-semibold mb-2">Seeding</h2>
-          <p className={`text-sm ${t.muted} mb-4`}>
-            Seeds populate your database with initial or test data. Create seed files in the <code>seeds/</code> directory. Seeds run in alphabetical order.
-          </p>
-
-          <CodeBlock title="Generate a seed file">
-{`npx basicben make:seed users
-# Creates: seeds/users.js`}
-          </CodeBlock>
-
-          <CodeBlock title="seeds/01_users.js">
-{`import { db } from 'basicben'
-import { hashPassword } from 'basicben/auth'
-
-export async function seed() {
-  const password = await hashPassword('password123')
-
-  await (await db.table('users')).insert({
-    name: 'Admin User',
-    email: 'admin@example.com',
-    password
-  })
-
-  await (await db.table('users')).insert({
-    name: 'Test User',
-    email: 'test@example.com',
-    password
-  })
-
-  console.log('Seeded 2 users')
-}`}
-          </CodeBlock>
-
-          <CodeBlock title="seeds/02_posts.js">
-{`import { db } from 'basicben'
-
-export async function seed() {
-  const user = await (await db.table('users')).first()
-
-  await (await db.table('posts')).insert({
-    user_id: user.id,
-    title: 'Welcome to BasicBen',
-    content: 'Your first blog post!',
-    published: 1
-  })
-
-  console.log('Seeded posts')
-}`}
-          </CodeBlock>
-
-          <div className="mt-4 grid gap-3 sm:grid-cols-2">
-            <div className={`rounded-lg p-3 ${t.card} border ${t.border}`}>
-              <code className="text-sm font-semibold">npx basicben seed</code>
-              <p className={`text-xs mt-1 ${t.muted}`}>Run all seeds</p>
-            </div>
-            <div className={`rounded-lg p-3 ${t.card} border ${t.border}`}>
-              <code className="text-sm font-semibold">npx basicben seed users</code>
-              <p className={`text-xs mt-1 ${t.muted}`}>Run specific seed</p>
-            </div>
-            <div className={`rounded-lg p-3 ${t.card} border ${t.border}`}>
-              <code className="text-sm font-semibold">npx basicben make:seed</code>
-              <p className={`text-xs mt-1 ${t.muted}`}>Generate seed file</p>
-            </div>
-            <div className={`rounded-lg p-3 ${t.card} border ${t.border}`}>
-              <code className="text-sm font-semibold">npx basicben db:seed</code>
-              <p className={`text-xs mt-1 ${t.muted}`}>Alias for seed</p>
-            </div>
-          </div>
-        </Card>
-
-        {/* Query Builder */}
-        <Card>
-          <h2 className="text-lg font-semibold mb-2">Query Builder</h2>
-          <p className={`text-sm ${t.muted} mb-4`}>
-            The query builder provides a fluent API for database queries with built-in SQL injection protection.
-          </p>
-
-          <CodeBlock title="Basic queries">
-{`import { db } from 'basicben'
-
-// Get all users
-const users = await (await db.table('users')).get()
-
-// Find by ID
-const user = await (await db.table('users')).find(1)
-
-// Filter with where
-const admins = await (await db.table('users'))
-  .where('is_admin', true)
-  .get()
-
-// Chain multiple conditions
-const results = await (await db.table('posts'))
-  .where('published', true)
-  .where('user_id', userId)
-  .orderBy('created_at', 'DESC')
-  .limit(10)
-  .get()`}
-          </CodeBlock>
-
-          <CodeBlock title="Insert & Update">
-{`// Insert a record
-const result = await (await db.table('posts'))
-  .insert({
-    title: 'My Post',
-    content: 'Hello world',
-    user_id: 1
-  })
-
-console.log(result.lastInsertRowid) // New ID
-
-// Update records
-await (await db.table('posts'))
-  .where('id', postId)
-  .update({ title: 'Updated Title' })
-
-// Delete records
-await (await db.table('posts'))
-  .where('id', postId)
-  .delete()`}
-          </CodeBlock>
-
-          <CodeBlock title="Aggregates & Pagination">
-{`// Count records
-const count = await (await db.table('posts'))
-  .where('published', true)
-  .count()
-
-// Check existence
-const exists = await (await db.table('users'))
-  .where('email', 'test@example.com')
-  .exists()
-
-// Paginate results
-const page = await (await db.table('posts'))
-  .orderBy('created_at', 'DESC')
-  .paginate(1, 15)
-
-// Returns: { data, total, page, perPage, totalPages }`}
-          </CodeBlock>
-        </Card>
-
-        {/* Mass Assignment Protection */}
-        <Card>
-          <h2 className="text-lg font-semibold mb-2">Mass Assignment Protection</h2>
-          <p className={`text-sm ${t.muted} mb-4`}>
-            Prevent users from setting fields they shouldn't (like <code>is_admin</code>) by using <code>only()</code> or <code>except()</code>.
-          </p>
-
-          <CodeBlock title="Whitelist with only()">
-{`// Only allow these fields to be set
-await (await db.table('users'))
-  .only('name', 'email', 'bio')
-  .insert(req.body)
-
-// Extra fields in req.body are ignored
-// { name: 'Bob', email: 'bob@test.com', is_admin: true }
-// is_admin is silently dropped`}
-          </CodeBlock>
-
-          <CodeBlock title="Blacklist with except()">
-{`// Block specific fields
-await (await db.table('users'))
-  .except('id', 'is_admin', 'created_at')
-  .where('id', userId)
-  .update(req.body)`}
-          </CodeBlock>
-
-          <CodeBlock title="In your models">
-{`// src/models/User.js
-export const User = {
-  fillable: ['name', 'email', 'bio'],
-
-  create: async (data) => {
-    return (await db.table('users'))
-      .only(...User.fillable)
-      .insert(data)
-  },
-
-  update: async (id, data) => {
-    return (await db.table('users'))
-      .only(...User.fillable)
-      .where('id', id)
-      .update(data)
-  }
-}`}
-          </CodeBlock>
-        </Card>
-
-        {/* Database Validation */}
-        <Card>
-          <h2 className="text-lg font-semibold mb-2">Database Validation</h2>
-          <p className={`text-sm ${t.muted} mb-4`}>
-            Validate data against your database with <code>unique</code> and <code>exists</code> rules.
-          </p>
-
-          <CodeBlock title="Unique validation">
-{`import { validate, rules } from 'basicben/validation'
-
-// Check email is unique in users table
-const result = await validate(req.body, {
-  email: [rules.required, rules.email, rules.unique('users')]
-})
-
-// With custom column name
-slug: [rules.unique('categories', 'slug')]
-
-// Exclude current record (for updates)
-email: [rules.unique('users', 'email', userId)]`}
-          </CodeBlock>
-
-          <CodeBlock title="Exists validation">
-{`// Check foreign key exists
-const result = await validate(req.body, {
-  user_id: [rules.required, rules.exists('users')],
-  category_id: [rules.required, rules.exists('categories')]
-})
-
-// With custom column
-category: [rules.exists('categories', 'slug')]`}
-          </CodeBlock>
-        </Card>
-
-        {/* Raw Queries */}
-        <Card>
-          <h2 className="text-lg font-semibold mb-2">Raw Queries</h2>
-          <p className={`text-sm ${t.muted} mb-4`}>
-            For complex queries, you can use raw SQL with parameterized queries.
-          </p>
-
-          <CodeBlock title="Using db directly">
-{`import { db } from 'basicben'
-
-// Parameterized queries (safe from SQL injection)
-const posts = await db.all(
-  'SELECT * FROM posts WHERE user_id = ? AND published = ?',
-  [userId, true]
-)
-
-// Single row
-const user = await db.get(
-  'SELECT * FROM users WHERE email = ?',
-  [email]
-)
-
-// Insert/Update/Delete
-const result = await db.run(
-  'INSERT INTO posts (title, user_id) VALUES (?, ?)',
-  [title, userId]
-)
-
-// Transactions
-await db.transaction(async (tx) => {
-  await tx.run('UPDATE accounts SET balance = balance - ? WHERE id = ?', [100, fromId])
-  await tx.run('UPDATE accounts SET balance = balance + ? WHERE id = ?', [100, toId])
-})`}
-          </CodeBlock>
-        </Card>
-      </div>
-    </div>
-  )
-}

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

@@ -1,34 +0,0 @@
-import { useState, useEffect } from 'react'
-import { useNavigate } from '@basicbenframework/core/client'
-import { PageHeader } from '../components/PageHeader'
-import { PostCard } from '../components/PostCard'
-import { Loading } from '../components/Loading'
-import { Empty } from '../components/Empty'
-import { api } from '../../helpers/api'
-
-export function Feed() {
-  const navigate = useNavigate()
-  const [posts, setPosts] = useState([])
-  const [loading, setLoading] = useState(true)
-
-  useEffect(() => {
-    api('/api/feed').then(data => setPosts(data.posts)).finally(() => setLoading(false))
-  }, [])
-
-  if (loading) return <Loading />
-
-  return (
-    <div>
-      <PageHeader title="Feed" />
-      {posts.length === 0 ? (
-        <Empty>No posts yet</Empty>
-      ) : (
-        <div className="space-y-4">
-          {posts.map(post => (
-            <PostCard key={post.id} post={post} onClick={() => navigate(`/feed/${post.id}`)} showAuthor />
-          ))}
-        </div>
-      )}
-    </div>
-  )
-}

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

@@ -1,37 +0,0 @@
-import { useState, useEffect } from 'react'
-import { useNavigate, useParams } from '@basicbenframework/core/client'
-import { useTheme } from '../components/ThemeContext'
-import { Card } from '../components/Card'
-import { BackLink } from '../components/BackLink'
-import { Loading } from '../components/Loading'
-import { api } from '../../helpers/api'
-
-export function FeedPost() {
-  const navigate = useNavigate()
-  const params = useParams()
-  const postId = params.id
-  const { t } = useTheme()
-  const [post, setPost] = useState(null)
-  const [loading, setLoading] = useState(true)
-
-  useEffect(() => {
-    api(`/api/feed/${postId}`)
-      .then(data => setPost(data.post))
-      .catch(() => navigate('/feed'))
-      .finally(() => setLoading(false))
-  }, [postId])
-
-  if (loading) return <Loading />
-  if (!post) return null
-
-  return (
-    <div>
-      <BackLink onClick={() => navigate('/feed')}>Back to feed</BackLink>
-      <Card className="p-6">
-        <h1 className="text-2xl font-bold mb-2">{post.title}</h1>
-        <p className={`text-sm ${t.subtle} mb-6`}>By {post.author_name} &bull; {new Date(post.created_at).toLocaleDateString()}</p>
-        <p className="whitespace-pre-wrap">{post.content}</p>
-      </Card>
-    </div>
-  )
-}

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

@@ -1,136 +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 GettingStarted() {
-  const { t } = useTheme()
-
-  const devCommands = [
-    { cmd: 'npm run dev', desc: 'Start development server' },
-    { cmd: 'npm run build', desc: 'Build for production' },
-    { cmd: 'npm run build -- --static', desc: 'Build client only (static hosts)' },
-    { cmd: 'npm run start', desc: 'Run production server' },
-    { cmd: 'npm run test', desc: 'Run tests with Vitest' },
-  ]
-
-  const makeCommands = [
-    { cmd: 'npm run make:controller', desc: 'Generate a controller' },
-    { cmd: 'npm run make:model', desc: 'Generate a model' },
-    { cmd: 'npm run make:route', desc: 'Generate a route file' },
-    { cmd: 'npm run make:migration', desc: 'Generate a migration' },
-    { cmd: 'npm run make:middleware', desc: 'Generate middleware' },
-    { cmd: 'npm run make:seed', desc: 'Generate a seeder' },
-  ]
-
-  const dbCommands = [
-    { cmd: 'npm run migrate', desc: 'Run pending migrations' },
-    { cmd: 'npm run migrate:rollback', desc: 'Roll back last batch' },
-    { cmd: 'npm run migrate:fresh', desc: 'Drop all and re-run' },
-    { cmd: 'npm run migrate:status', desc: 'Show migration status' },
-    { cmd: 'npm run db:seed', desc: 'Run database seeders' },
-  ]
-
-  return (
-    <div>
-      <PageHeader title="Getting Started" />
-
-      <div className="space-y-6">
-        <Card>
-          <h2 className="text-lg font-semibold mb-4">Quick Start</h2>
-          <div className={`rounded-lg p-4 font-mono text-sm ${t.card} border ${t.border} overflow-x-auto`}>
-            <div className={t.muted}># Create a new project</div>
-            <div>npx create-basicben-app my-app</div>
-            <div className="mt-2" />
-            <div className={t.muted}># Navigate to the project</div>
-            <div>cd my-app</div>
-            <div className="mt-2" />
-            <div className={t.muted}># Start the development server</div>
-            <div>npm run dev</div>
-          </div>
-        </Card>
-
-        <Card>
-          <h2 className="text-lg font-semibold mb-4">Project Structure</h2>
-          <div className={`rounded-lg p-4 font-mono text-sm ${t.card} border ${t.border} overflow-x-auto`}>
-            <pre className={t.text}>{`my-app/
-├── src/
-│   ├── client/           # React frontend
-│   │   ├── components/   # Reusable components
-│   │   └── pages/        # Page components
-│   ├── routes/           # API route files
-│   ├── controllers/      # Business logic
-│   ├── models/           # Database models
-│   └── middleware/       # Route middleware
-├── migrations/           # Database migrations
-├── public/               # Static assets
-└── basicben.config.js    # Framework config`}</pre>
-          </div>
-        </Card>
-
-        <Card>
-          <h2 className="text-lg font-semibold mb-4">CLI Commands</h2>
-
-          <h3 className={`text-sm font-medium mb-2 ${t.muted}`}>Development</h3>
-          <div className="grid gap-2 sm:grid-cols-2 mb-4">
-            {devCommands.map(({ cmd, desc }) => (
-              <div key={cmd} className={`rounded-lg p-3 ${t.card} border ${t.border}`}>
-                <code className="text-sm font-semibold">{cmd}</code>
-                <p className={`text-xs mt-1 ${t.muted}`}>{desc}</p>
-              </div>
-            ))}
-          </div>
-
-          <h3 className={`text-sm font-medium mb-2 ${t.muted}`}>Scaffolding</h3>
-          <div className="grid gap-2 sm:grid-cols-2 mb-4">
-            {makeCommands.map(({ cmd, desc }) => (
-              <div key={cmd} className={`rounded-lg p-3 ${t.card} border ${t.border}`}>
-                <code className="text-sm font-semibold">{cmd}</code>
-                <p className={`text-xs mt-1 ${t.muted}`}>{desc}</p>
-              </div>
-            ))}
-          </div>
-
-          <h3 className={`text-sm font-medium mb-2 ${t.muted}`}>Database</h3>
-          <div className="grid gap-2 sm:grid-cols-2">
-            {dbCommands.map(({ cmd, desc }) => (
-              <div key={cmd} className={`rounded-lg p-3 ${t.card} border ${t.border}`}>
-                <code className="text-sm font-semibold">{cmd}</code>
-                <p className={`text-xs mt-1 ${t.muted}`}>{desc}</p>
-              </div>
-            ))}
-          </div>
-        </Card>
-
-        <Card>
-          <h2 className="text-lg font-semibold mb-4">Resources</h2>
-          <div className="flex flex-wrap gap-3">
-            <a
-              href="https://github.com/BasicBenFramework/basicben-framework"
-              target="_blank"
-              rel="noopener noreferrer"
-              className={`inline-flex items-center gap-2 px-4 py-2 rounded-lg ${t.btnSecondary} transition text-sm`}
-            >
-              <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
-                <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
-              </svg>
-              GitHub
-            </a>
-            <a
-              href="https://basicben.com"
-              target="_blank"
-              rel="noopener noreferrer"
-              className={`inline-flex items-center gap-2 px-4 py-2 rounded-lg ${t.btnSecondary} transition text-sm`}
-            >
-              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
-              </svg>
-              Documentation
-            </a>
-          </div>
-        </Card>
-      </div>
-    </div>
-  )
-}