Add example app with actions, components, and routes

Introduces a full-featured example application under the 'example' directory, including Beam action handlers, authentication, session management, reusable React components, modal and drawer UIs, and product/cart logic. Updates .gitignore to exclude example build artifacts. This provides a reference implementation for Beam-based apps with product management, cart functionality, authentication, and UI patterns.

Author: BenQoder

.gitignore

@@ -1 +1,4 @@
 /node_modules
+/example/node_modules
+/example/dist
+/example/.wrangler

example/app/actions/addToCart.tsx

@@ -0,0 +1,30 @@
+import type { HtmlEscapedString } from 'hono/utils/html'
+import type { BeamContext } from '@benqoder/beam'
+import type { Env } from '../types'
+import { CartBadge } from '../components/CartBadge'
+
+function render(node: HtmlEscapedString | Promise<HtmlEscapedString>): Promise<string> {
+  return Promise.resolve(node).then((n) => n.toString())
+}
+
+type CartItem = { productId: string; qty: number }
+
+export async function addToCart(
+  ctx: BeamContext<Env>,
+  { productId, qty = 1 }: Record<string, unknown>
+): Promise<string> {
+  // Use automatic session from ctx.session
+  const cart = (await ctx.session.get<CartItem[]>('cart')) || []
+
+  const existing = cart.find((item) => item.productId === productId)
+  if (existing) {
+    existing.qty += Number(qty)
+  } else {
+    cart.push({ productId: productId as string, qty: Number(qty) })
+  }
+
+  await ctx.session.set('cart', cart)
+
+  const count = cart.reduce((sum, item) => sum + item.qty, 0)
+  return render(<CartBadge count={count} />)
+}

example/app/actions/auth.tsx

@@ -0,0 +1,84 @@
+import type { HtmlEscapedString } from 'hono/utils/html'
+import type { BeamContext } from '@benqoder/beam'
+import type { Env } from '../types'
+
+function render(node: HtmlEscapedString | Promise<HtmlEscapedString>): Promise<string> {
+  return Promise.resolve(node).then((n) => n.toString())
+}
+
+/**
+ * Get current user info - demonstrates auth context in Beam actions
+ */
+export async function getCurrentUser(
+  ctx: BeamContext<Env>,
+  _data: Record<string, unknown>
+): Promise<string> {
+  if (ctx.user) {
+    return render(
+      <div class="user-info authenticated">
+        <div class="user-avatar">{(ctx.user.name as string)?.[0] || '?'}</div>
+        <div class="user-details">
+          <div class="user-name">{ctx.user.name as string}</div>
+          <div class="user-email">{ctx.user.email as string}</div>
+          <span class={`badge badge-${ctx.user.role}`}>{ctx.user.role as string}</span>
+        </div>
+        <style>{`
+          .user-info.authenticated {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+          }
+          .user-avatar {
+            width: 48px;
+            height: 48px;
+            background: #3b82f6;
+            color: white;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.2rem;
+            font-weight: bold;
+          }
+          .user-details .user-name {
+            font-weight: 600;
+          }
+          .user-details .user-email {
+            color: #666;
+            font-size: 0.9rem;
+          }
+          .badge {
+            display: inline-block;
+            padding: 0.2rem 0.5rem;
+            border-radius: 4px;
+            font-size: 0.7rem;
+            font-weight: 500;
+            text-transform: uppercase;
+            margin-top: 0.25rem;
+          }
+          .badge-admin { background: #fee2e2; color: #dc2626; }
+          .badge-user { background: #dbeafe; color: #2563eb; }
+          .badge-guest { background: #f3f4f6; color: #6b7280; }
+        `}</style>
+      </div>
+    )
+  }
+  return render(
+    <div class="user-info guest">
+      <span>Not signed in - </span>
+      <a href="/login">Sign In</a>
+      <style>{`
+        .user-info.guest {
+          color: #666;
+        }
+        .user-info.guest a {
+          color: #3b82f6;
+          text-decoration: none;
+        }
+        .user-info.guest a:hover {
+          text-decoration: underline;
+        }
+      `}</style>
+    </div>
+  )
+}

example/app/actions/createProduct.tsx

@@ -0,0 +1,17 @@
+import type { HtmlEscapedString } from 'hono/utils/html'
+import type { BeamContext } from '@benqoder/beam'
+import type { Env } from '../types'
+import { ProductList } from '../components/ProductList'
+
+function render(node: HtmlEscapedString | Promise<HtmlEscapedString>): Promise<string> {
+  return Promise.resolve(node).then(n => n.toString())
+}
+
+export async function createProduct(ctx: BeamContext<Env>, { name, price }: Record<string, unknown>): Promise<string> {
+  await ctx.env.DB.prepare('INSERT INTO products (name, price) VALUES (?, ?)')
+    .bind(name, price)
+    .run()
+
+  const products = await ctx.env.DB.prepare('SELECT * FROM products ORDER BY created_at DESC').all()
+  return render(<ProductList products={products.results as Array<{ id: string; name: string; price: number }>} />)
+}

example/app/actions/deleteProduct.tsx

@@ -0,0 +1,15 @@
+import type { HtmlEscapedString } from 'hono/utils/html'
+import type { BeamContext } from '@benqoder/beam'
+import type { Env } from '../types'
+import { ProductList } from '../components/ProductList'
+
+function render(node: HtmlEscapedString | Promise<HtmlEscapedString>): Promise<string> {
+  return Promise.resolve(node).then(n => n.toString())
+}
+
+export async function deleteProduct(ctx: BeamContext<Env>, { id }: Record<string, unknown>): Promise<string> {
+  await ctx.env.DB.prepare('DELETE FROM products WHERE id = ?').bind(id).run()
+
+  const products = await ctx.env.DB.prepare('SELECT * FROM products ORDER BY created_at DESC').all()
+  return render(<ProductList products={products.results as Array<{ id: string; name: string; price: number }>} />)
+}