@basicbenframework/create 0.1.0

package/index.js

@@ -0,0 +1,205 @@
+#!/usr/bin/env node
+
+/**
+ * @basicbenframework/create
+ *
+ * Scaffolds a new BasicBen project with the recommended structure.
+ *
+ * Usage:
+ *   npx @basicbenframework/create my-app
+ *   npx @basicbenframework/create my-app --template minimal
+ */
+
+import { mkdirSync, writeFileSync, copyFileSync, readdirSync, statSync, existsSync } from 'node:fs'
+import { join, resolve, dirname, relative } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { execSync } from 'node:child_process'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const frameworkDir = resolve(__dirname, '..')
+
+// ANSI colors
+const bold = (s) => `\x1b[1m${s}\x1b[0m`
+const green = (s) => `\x1b[32m${s}\x1b[0m`
+const cyan = (s) => `\x1b[36m${s}\x1b[0m`
+const yellow = (s) => `\x1b[33m${s}\x1b[0m`
+const red = (s) => `\x1b[31m${s}\x1b[0m`
+const dim = (s) => `\x1b[2m${s}\x1b[0m`
+
+/**
+ * Main entry point
+ */
+async function main() {
+  const args = process.argv.slice(2)
+
+  // Show help
+  if (args.includes('--help') || args.includes('-h') || args.length === 0) {
+    showHelp()
+    process.exit(0)
+  }
+
+  // Get project name
+  const projectName = args[0]
+
+  if (!projectName || projectName.startsWith('-')) {
+    console.error(`\n${red('Error:')} Please provide a project name.\n`)
+    console.log(`  ${cyan('npx @basicbenframework/create')} ${dim('<project-name>')}\n`)
+    process.exit(1)
+  }
+
+  // Validate project name
+  if (!/^[a-z0-9-_]+$/i.test(projectName)) {
+    console.error(`\n${red('Error:')} Project name can only contain letters, numbers, dashes, and underscores.\n`)
+    process.exit(1)
+  }
+
+  // Check for --local flag
+  const useLocal = args.includes('--local')
+
+  const projectDir = resolve(process.cwd(), projectName)
+
+  // Check if directory exists
+  if (existsSync(projectDir)) {
+    console.error(`\n${red('Error:')} Directory "${projectName}" already exists.\n`)
+    process.exit(1)
+  }
+
+  console.log()
+  console.log(`${bold('Creating a new BasicBen app')} in ${cyan(projectDir)}`)
+  console.log()
+
+  // Create project directory
+  mkdirSync(projectDir, { recursive: true })
+
+  // Copy template files
+  const templateDir = join(__dirname, 'template')
+  copyDir(templateDir, projectDir)
+
+  // Determine basicben dependency
+  let basicbenDep = 'latest'
+  if (useLocal) {
+    const relativePath = relative(projectDir, frameworkDir)
+    basicbenDep = `file:${relativePath}`
+    console.log(`${yellow('Using local framework:')} ${relativePath}\n`)
+  }
+
+  // Create package.json with project name
+  const pkg = {
+    name: projectName,
+    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': basicbenDep,
+      react: '^19.2.0',
+      'react-dom': '^19.2.0'
+    },
+    devDependencies: {
+      '@vitejs/plugin-react': '^5.1.4',
+      vite: '^7.3.1',
+      vitest: '^4.0.0'
+    }
+  }
+
+  writeFileSync(
+    join(projectDir, 'package.json'),
+    JSON.stringify(pkg, null, 2) + '\n'
+  )
+
+  // Generate APP_KEY for .env
+  const appKey = generateAppKey()
+  const envContent = `# Application
+APP_KEY=${appKey}
+
+# Server Ports
+PORT=3001              # API server
+VITE_PORT=3000         # Frontend dev server
+
+# Database (uncomment one)
+# DATABASE_URL=./data.db
+# DATABASE_URL=postgres://user:pass@localhost:5432/mydb
+`
+  writeFileSync(join(projectDir, '.env'), envContent)
+
+  console.log(`${green('✓')} Project created successfully!\n`)
+
+  // Install dependencies prompt
+  console.log(`${bold('Next steps:')}\n`)
+  console.log(`  ${cyan('cd')} ${projectName}`)
+  console.log(`  ${cyan('npm install')}`)
+  console.log(`  ${cyan('npm run dev')}\n`)
+
+  console.log(`${dim('This will start the development server at http://localhost:3000')}\n`)
+}
+
+/**
+ * Show help message
+ */
+function showHelp() {
+  console.log(`
+${bold('@basicbenframework/create')} - Create a new BasicBen project
+
+${bold('Usage:')}
+  npx @basicbenframework/create ${dim('<project-name>')} [options]
+
+${bold('Options:')}
+  --local        Use local framework (for development)
+  -h, --help     Show this help message
+
+${bold('Examples:')}
+  npx @basicbenframework/create my-app
+  npx @basicbenframework/create my-app --local   ${dim('# Use local framework')}
+`)
+}
+
+/**
+ * Copy directory recursively
+ */
+function copyDir(src, dest) {
+  if (!existsSync(src)) return
+
+  mkdirSync(dest, { recursive: true })
+  const entries = readdirSync(src, { withFileTypes: true })
+
+  for (const entry of entries) {
+    const srcPath = join(src, entry.name)
+    const destPath = join(dest, entry.name)
+
+    if (entry.isDirectory()) {
+      copyDir(srcPath, destPath)
+    } else {
+      copyFileSync(srcPath, destPath)
+    }
+  }
+}
+
+/**
+ * Generate a random APP_KEY
+ */
+function generateAppKey() {
+  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
+  let key = ''
+  for (let i = 0; i < 32; i++) {
+    key += chars.charAt(Math.floor(Math.random() * chars.length))
+  }
+  return key
+}
+
+// Run
+main().catch((err) => {
+  console.error(`\n${red('Error:')} ${err.message}\n`)
+  process.exit(1)
+})

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@basicbenframework/create",
+  "version": "0.1.0",
+  "description": "Create a new BasicBen application",
+  "type": "module",
+  "bin": {
+    "create-basicben": "./index.js"
+  },
+  "files": [
+    "index.js",
+    "template"
+  ],
+  "keywords": [
+    "basicben",
+    "react",
+    "framework",
+    "fullstack",
+    "create",
+    "scaffold"
+  ],
+  "author": "",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/BasicBenFramework/basicben-framework"
+  },
+  "engines": {
+    "node": ">=24.14.0"
+  }
+}

package/template/.env.example

@@ -0,0 +1,24 @@
+# Application
+APP_KEY=your-secret-key-here
+
+# Server Ports
+PORT=3001              # API server
+VITE_PORT=3000         # Frontend dev server
+
+# Database - uncomment ONE of the following:
+
+# SQLite (default)
+DATABASE_URL=./database.sqlite
+
+# PostgreSQL
+# DATABASE_URL=postgres://user:pass@localhost:5432/mydb
+
+# Turso (edge SQLite)
+# TURSO_URL=libsql://your-db-name.turso.io
+# TURSO_AUTH_TOKEN=your-auth-token
+
+# PlanetScale (serverless MySQL)
+# DATABASE_URL=mysql://user:pass@host/database?ssl={"rejectUnauthorized":true}
+
+# Neon (serverless Postgres)
+# DATABASE_URL=postgres://user:pass@ep-cool-name.us-east-2.aws.neon.tech/mydb?sslmode=require

package/template/README.md

@@ -0,0 +1,59 @@
+# My BasicBen App
+
+Built with [BasicBen](https://github.com/BasicBenFramework/basicben-framework) — a full-stack React framework with zero runtime dependencies.
+
+## Getting Started
+
+```bash
+npm install
+npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) to view your app.
+
+## Commands
+
+```bash
+npm run dev          # Start development server
+npm run build        # Build for production
+npm run start        # Run production server
+npm run test         # Run tests
+
+npm run migrate      # Run database migrations
+npm run migrate:fresh   # Reset and re-run all migrations
+```
+
+## Project Structure
+
+```
+src/
+├── main.jsx              # React entry point
+├── routes/
+│   ├── App.jsx           # Client routes
+│   └── api/              # API routes (auto-loaded)
+├── controllers/          # Business logic
+├── models/               # Database queries
+├── middleware/           # Route middleware
+├── helpers/              # Utility functions
+└── client/
+    ├── layouts/          # Layout components
+    ├── pages/            # Page components
+    └── components/       # Reusable UI
+```
+
+## Scaffolding
+
+```bash
+npx basicben make:controller User
+npx basicben make:model User
+npx basicben make:route users
+npx basicben make:migration create_users
+```
+
+## Configuration
+
+Edit `basicben.config.js` to customize server settings, CORS, database, and more.
+
+## Documentation
+
+Full documentation: [github.com/BasicBenFramework/basicben-framework](https://github.com/BasicBenFramework/basicben-framework)

package/template/basicben.config.js

@@ -0,0 +1,33 @@
+/**
+ * BasicBen Configuration
+ *
+ * See documentation for all available options.
+ */
+
+export default {
+  // Server options
+  port: 3001,
+
+  // CORS configuration
+  cors: {
+    origin: '*',
+    methods: ['GET', 'POST', 'PUT', 'DELETE', 'PATCH'],
+    credentials: true
+  },
+
+  // Body parser options
+  bodyParser: {
+    limit: '1mb'
+  },
+
+  // Static file serving
+  static: {
+    dir: 'public'
+  },
+
+  // Database configuration
+  // db: {
+  //   driver: 'sqlite',
+  //   url: process.env.DATABASE_URL || './data.db'
+  // }
+}

package/template/index.html

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>BasicBen App</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+      tailwind.config = {
+        darkMode: 'class',
+        theme: {
+          extend: {
+            colors: {
+              dark: {
+                900: '#0f0f0f',
+                800: '#1a1a1a',
+                700: '#222222',
+                600: '#333333'
+              }
+            },
+            animation: {
+              'slide-in': 'slideIn 0.3s ease-out',
+              'slide-out': 'slideOut 0.2s ease-in',
+              'fade-in': 'fadeIn 0.2s ease-out',
+              'fade-out': 'fadeOut 0.15s ease-in',
+            },
+            keyframes: {
+              slideIn: {
+                '0%': { transform: 'translateX(100%)', opacity: '0' },
+                '100%': { transform: 'translateX(0)', opacity: '1' }
+              },
+              slideOut: {
+                '0%': { transform: 'translateX(0)', opacity: '1' },
+                '100%': { transform: 'translateX(100%)', opacity: '0' }
+              },
+              fadeIn: {
+                '0%': { opacity: '0' },
+                '100%': { opacity: '1' }
+              },
+              fadeOut: {
+                '0%': { opacity: '1' },
+                '100%': { opacity: '0' }
+              }
+            }
+          }
+        }
+      }
+    </script>
+  </head>
+  <body class="bg-dark-900 text-white">
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

package/template/migrations/001_create_users.js

@@ -0,0 +1,15 @@
+export const up = async (db) => {
+  await db.exec(`
+    CREATE TABLE users (
+      id INTEGER PRIMARY KEY AUTOINCREMENT,
+      name TEXT NOT NULL,
+      email TEXT UNIQUE NOT NULL,
+      password TEXT NOT NULL,
+      created_at DATETIME DEFAULT CURRENT_TIMESTAMP
+    )
+  `)
+}
+
+export const down = async (db) => {
+  await db.exec('DROP TABLE IF EXISTS users')
+}

package/template/migrations/002_create_posts.js

@@ -0,0 +1,18 @@
+export const up = async (db) => {
+  await db.exec(`
+    CREATE TABLE posts (
+      id INTEGER PRIMARY KEY AUTOINCREMENT,
+      user_id INTEGER NOT NULL,
+      title TEXT NOT NULL,
+      content TEXT NOT NULL,
+      published BOOLEAN DEFAULT 0,
+      created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+      updated_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+      FOREIGN KEY (user_id) REFERENCES users(id)
+    )
+  `)
+}
+
+export const down = async (db) => {
+  await db.exec('DROP TABLE IF EXISTS posts')
+}

package/template/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/template/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/template/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/template/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/template/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/template/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/template/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/template/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/template/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/template/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/template/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/template/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>
+  )
+}