@basicbenframework/create 0.1.0

package/template/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/template/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/template/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/template/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/template/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/template/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/template/src/client/components/ThemeContext.jsx

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

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

package/template/src/client/layouts/AuthLayout.jsx

@@ -0,0 +1,33 @@
+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/template/src/client/layouts/DocsLayout.jsx

@@ -0,0 +1,60 @@
+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/template/src/client/layouts/RootLayout.jsx

@@ -0,0 +1,25 @@
+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/template/src/client/pages/Auth.jsx

@@ -0,0 +1,55 @@
+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>
+  )
+}