create-velox-app 0.4.13 → 0.6.23

package/src/templates/source/rsc/app/pages/docs/[...slug].tsx

@@ -0,0 +1,211 @@
+/**
+ * Docs Catch-All Page
+ *
+ * A React Server Component that handles all /docs/* routes.
+ * Demonstrates catch-all routing with [...slug] pattern.
+ *
+ * Examples:
+ *   /docs/getting-started         -> slug = "getting-started"
+ *   /docs/api/reference           -> slug = "api/reference"
+ *   /docs/api/reference/types     -> slug = "api/reference/types"
+ */
+
+interface PageProps {
+  params: Record<string, string>;
+  searchParams: Record<string, string | string[]>;
+}
+
+// Mock documentation structure
+const docsTree: Record<string, { title: string; content: string }> = {
+  'getting-started': {
+    title: 'Getting Started',
+    content: 'Welcome to VeloxTS! This guide will help you get up and running quickly.',
+  },
+  installation: {
+    title: 'Installation',
+    content: 'Install VeloxTS using your preferred package manager: pnpm, npm, or yarn.',
+  },
+  'api/reference': {
+    title: 'API Reference',
+    content: 'Complete reference for all VeloxTS APIs and utilities.',
+  },
+  'api/reference/types': {
+    title: 'Type Definitions',
+    content: 'TypeScript type definitions exported by VeloxTS packages.',
+  },
+  'guides/routing': {
+    title: 'Routing Guide',
+    content: 'Learn about file-based routing, dynamic routes, and catch-all patterns.',
+  },
+  'guides/layouts': {
+    title: 'Layouts Guide',
+    content: 'Understand how layouts work with route groups and segment inheritance.',
+  },
+};
+
+export default async function DocsPage({ params }: PageProps) {
+  const slug = params.slug || 'getting-started';
+  const segments = slug.split('/');
+
+  // Look up documentation
+  const doc = docsTree[slug];
+
+  return (
+    <div className="docs-page">
+      <style>{`
+        .docs-page {
+          display: flex;
+          gap: 2rem;
+          min-height: 60vh;
+        }
+
+        .docs-sidebar {
+          width: 200px;
+          flex-shrink: 0;
+        }
+
+        .docs-sidebar h3 {
+          font-size: 0.75rem;
+          text-transform: uppercase;
+          color: #888;
+          margin-bottom: 0.5rem;
+        }
+
+        .docs-sidebar ul {
+          list-style: none;
+          margin-bottom: 1rem;
+        }
+
+        .docs-sidebar a {
+          display: block;
+          padding: 0.25rem 0;
+          color: #1a1a2e;
+          text-decoration: none;
+        }
+
+        .docs-sidebar a:hover {
+          color: #6366f1;
+        }
+
+        .docs-main {
+          flex: 1;
+          background: white;
+          border-radius: 8px;
+          padding: 2rem;
+          box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+
+        .docs-breadcrumb {
+          font-size: 0.875rem;
+          color: #888;
+          margin-bottom: 1rem;
+        }
+
+        .docs-breadcrumb a {
+          color: #6366f1;
+          text-decoration: none;
+        }
+
+        .docs-content {
+          line-height: 1.8;
+        }
+
+        .docs-meta {
+          margin-top: 2rem;
+          padding-top: 1rem;
+          border-top: 1px solid #eee;
+          font-size: 0.875rem;
+          color: #888;
+        }
+
+        .not-found {
+          text-align: center;
+          padding: 2rem;
+        }
+
+        .not-found h1 {
+          color: #e11d48;
+        }
+      `}</style>
+
+      <aside className="docs-sidebar">
+        <h3>Getting Started</h3>
+        <ul>
+          <li>
+            <a href="/docs/getting-started">Getting Started</a>
+          </li>
+          <li>
+            <a href="/docs/installation">Installation</a>
+          </li>
+        </ul>
+
+        <h3>API Reference</h3>
+        <ul>
+          <li>
+            <a href="/docs/api/reference">Overview</a>
+          </li>
+          <li>
+            <a href="/docs/api/reference/types">Types</a>
+          </li>
+        </ul>
+
+        <h3>Guides</h3>
+        <ul>
+          <li>
+            <a href="/docs/guides/routing">Routing</a>
+          </li>
+          <li>
+            <a href="/docs/guides/layouts">Layouts</a>
+          </li>
+        </ul>
+      </aside>
+
+      <main className="docs-main">
+        <nav className="docs-breadcrumb">
+          <a href="/">Home</a>
+          {' / '}
+          <a href="/docs/getting-started">Docs</a>
+          {segments.map((segment, i) => (
+            <span key={segment}>
+              {' / '}
+              {i === segments.length - 1 ? (
+                segment
+              ) : (
+                <a href={`/docs/${segments.slice(0, i + 1).join('/')}`}>{segment}</a>
+              )}
+            </span>
+          ))}
+        </nav>
+
+        {doc ? (
+          <article className="docs-content">
+            <h1>{doc.title}</h1>
+            <p>{doc.content}</p>
+
+            <div className="docs-meta">
+              <p>
+                <strong>Path:</strong> /docs/{slug}
+              </p>
+              <p>
+                <strong>Segments:</strong> {segments.length} ({segments.join(' -> ')})
+              </p>
+              <p>
+                <strong>Route Pattern:</strong> [...slug] (catch-all)
+              </p>
+            </div>
+          </article>
+        ) : (
+          <div className="not-found">
+            <h1>Documentation Not Found</h1>
+            <p>
+              No documentation exists for: <code>/docs/{slug}</code>
+            </p>
+            <p>
+              <a href="/docs/getting-started">Go to Getting Started</a>
+            </p>
+          </div>
+        )}
+      </main>
+    </div>
+  );
+}

package/src/templates/source/rsc/app/pages/index.tsx

@@ -0,0 +1,50 @@
+/**
+ * Home Page
+ *
+ * A React Server Component that runs on the server at request time.
+ * For database access, use the API endpoints at /api/users.
+ */
+
+export default function HomePage() {
+  return (
+    <div className="home-page">
+      <header className="hero">
+        <h1>Welcome to VeloxTS</h1>
+        <p className="tagline">Type-safe full-stack development with React Server Components</p>
+      </header>
+
+      <section className="stats">
+        <div className="stat-card">
+          <span className="stat-label">Users in Database</span>
+          <p>
+            Use the API at <code>/api/users</code> to manage users.
+          </p>
+        </div>
+      </section>
+
+      <section className="features">
+        <h2>Features</h2>
+        <ul>
+          <li>
+            <strong>React Server Components</strong> - Server-first rendering with streaming
+          </li>
+          <li>
+            <strong>File-Based Routing</strong> - Laravel-inspired route conventions
+          </li>
+          <li>
+            <strong>Type-Safe Actions</strong> - Server actions with Zod validation
+          </li>
+          <li>
+            <strong>Embedded API</strong> - Fastify API routes at /api/*
+          </li>
+        </ul>
+      </section>
+
+      <footer className="cta">
+        <p>
+          Edit <code>app/pages/index.tsx</code> to customize this page.
+        </p>
+      </footer>
+    </div>
+  );
+}

package/src/templates/source/rsc/app/pages/print.tsx

@@ -0,0 +1,80 @@
+/**
+ * Print Page
+ *
+ * Demonstrates per-route layout configuration.
+ * This page uses the minimal layout (replace mode) instead of the default root layout.
+ *
+ * In entry.server.tsx, this route is defined as:
+ *   defineRoute('/print', PrintPage, [MinimalLayout])
+ *
+ * The minimal layout removes navigation, footer, and other UI elements
+ * that shouldn't appear in print output.
+ */
+
+import type { PageConfig, PageProps } from '@veloxts/web';
+
+/**
+ * Per-route layout configuration
+ *
+ * This configuration tells the router to use MinimalLayout instead of
+ * the default RootLayout. Modes available:
+ *   - 'replace': Use only the specified layouts (replaces inherited)
+ *   - 'append': Add layouts after inherited layouts
+ *   - 'prepend': Add layouts before inherited layouts
+ *   - 'inherit': Use inherited layouts (default)
+ */
+export const config: PageConfig = {
+  layout: {
+    // Note: In static routing, layouts are specified in defineRoute()
+    // This config is for documentation and future dynamic routing support
+    layouts: [], // Would reference MinimalLayout
+    mode: 'replace',
+  },
+};
+
+export default function PrintPage({ searchParams }: PageProps) {
+  const title = typeof searchParams.title === 'string' ? searchParams.title : 'Document';
+
+  return (
+    <div className="print-page">
+      <header className="print-header">
+        <h1>{title}</h1>
+        <p className="print-date">Printed: {new Date().toLocaleDateString()}</p>
+      </header>
+
+      <main className="print-content">
+        <section>
+          <h2>Per-Route Layout Configuration</h2>
+          <p>This page uses the minimal layout instead of the default root layout.</p>
+          <p>
+            The minimal layout removes navigation, footer, and styling that would interfere with
+            printing.
+          </p>
+        </section>
+
+        <section>
+          <h2>How It Works</h2>
+          <p>In the route definition:</p>
+          <pre>
+            <code>{`defineRoute('/print', PrintPage, [MinimalLayout])`}</code>
+          </pre>
+          <p>The third parameter specifies the layout chain for this specific route.</p>
+        </section>
+
+        <section>
+          <h2>Use Cases</h2>
+          <ul>
+            <li>Print-friendly document views</li>
+            <li>Embedded widgets or iframes</li>
+            <li>Authentication pages with different branding</li>
+            <li>Landing pages with custom layouts</li>
+          </ul>
+        </section>
+      </main>
+
+      <footer className="print-footer">
+        <p>Generated by VeloxTS Framework</p>
+      </footer>
+    </div>
+  );
+}

package/src/templates/source/rsc/app/pages/users/[id]/posts/[postId].tsx

@@ -0,0 +1,89 @@
+/**
+ * Post Detail Page
+ *
+ * A React Server Component that displays a single post.
+ * Demonstrates multi-level nested dynamic routes: /users/:id/posts/:postId
+ */
+
+import { db } from '../../../../../src/api/database.js';
+
+interface PageProps {
+  params: Record<string, string>;
+  searchParams: Record<string, string | string[]>;
+}
+
+export default async function PostDetailPage({ params }: PageProps) {
+  const { id: userId, postId } = params;
+
+  // Fetch post with user
+  const post = await db.post.findFirst({
+    where: {
+      id: postId,
+      userId: userId,
+    },
+    include: {
+      user: {
+        select: { id: true, name: true, email: true },
+      },
+    },
+  });
+
+  if (!post) {
+    return (
+      <div className="post-detail-page">
+        <h1>Post Not Found</h1>
+        <p>
+          No post exists with ID: <code>{postId}</code>
+        </p>
+        <p>
+          <a href={`/users/${userId}/posts`}>Back to Posts</a>
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="post-detail-page">
+      <article className="post">
+        <header className="post-header">
+          <h1>{post.title}</h1>
+          <p className="post-meta">
+            By <a href={`/users/${post.user.id}`}>{post.user.name}</a>
+            {' | '}
+            {post.published ? 'Published' : 'Draft'}
+            {' | '}
+            {post.createdAt.toLocaleDateString()}
+          </p>
+        </header>
+
+        <section className="post-content">
+          {post.content ? <p>{post.content}</p> : <p className="empty-content">No content</p>}
+        </section>
+
+        <footer className="post-footer">
+          <dl>
+            <dt>Post ID</dt>
+            <dd>
+              <code>{post.id}</code>
+            </dd>
+
+            <dt>Author Email</dt>
+            <dd>{post.user.email}</dd>
+
+            <dt>Created</dt>
+            <dd>{post.createdAt.toISOString()}</dd>
+
+            <dt>Updated</dt>
+            <dd>{post.updatedAt.toISOString()}</dd>
+          </dl>
+        </footer>
+      </article>
+
+      <nav className="actions">
+        <a href={`/users/${userId}/posts`}>Back to Posts</a>
+        {' | '}
+        <a href={`/users/${userId}`}>User Profile</a>
+      </nav>
+    </div>
+  );
+}

package/src/templates/source/rsc/app/pages/users/[id]/posts/index.tsx

@@ -0,0 +1,76 @@
+/**
+ * User Posts List Page
+ *
+ * A React Server Component that displays all posts for a specific user.
+ * Demonstrates multi-level nested dynamic routes: /users/:id/posts
+ */
+
+import { db } from '../../../../../src/api/database.js';
+
+interface PageProps {
+  params: Record<string, string>;
+  searchParams: Record<string, string | string[]>;
+}
+
+export default async function UserPostsPage({ params }: PageProps) {
+  const { id: userId } = params;
+
+  // Fetch user with posts
+  const user = await db.user.findUnique({
+    where: { id: userId },
+    include: {
+      posts: {
+        orderBy: { createdAt: 'desc' },
+      },
+    },
+  });
+
+  if (!user) {
+    return (
+      <div className="posts-page">
+        <h1>User Not Found</h1>
+        <p>
+          No user exists with ID: <code>{userId}</code>
+        </p>
+        <p>
+          <a href="/users">Back to Users</a>
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="posts-page">
+      <header className="page-header">
+        <h1>Posts by {user.name}</h1>
+        <p>
+          <a href={`/users/${userId}`}>Back to User Profile</a>
+          {' | '}
+          <a href={`/users/${userId}/posts/new`}>New Post</a>
+        </p>
+      </header>
+
+      {user.posts.length === 0 ? (
+        <p className="empty-state">No posts yet. Create the first one!</p>
+      ) : (
+        <ul className="posts-list">
+          {user.posts.map((post) => (
+            <li key={post.id} className="post-item">
+              <a href={`/users/${userId}/posts/${post.id}`}>
+                <h2>{post.title}</h2>
+                {post.content && <p>{post.content.substring(0, 100)}...</p>}
+                <small>
+                  {post.published ? 'Published' : 'Draft'} - {post.createdAt.toLocaleDateString()}
+                </small>
+              </a>
+            </li>
+          ))}
+        </ul>
+      )}
+
+      <footer className="page-footer">
+        <p>Total: {user.posts.length} posts</p>
+      </footer>
+    </div>
+  );
+}

package/src/templates/source/rsc/app/pages/users/[id]/posts/new.tsx

@@ -0,0 +1,79 @@
+/**
+ * New Post Page
+ *
+ * A React Server Component with a form to create a new post.
+ * Demonstrates static route precedence: /users/:id/posts/new
+ * (static 'new' matches before dynamic :postId)
+ */
+
+import { db } from '../../../../../src/api/database.js';
+
+interface PageProps {
+  params: Record<string, string>;
+  searchParams: Record<string, string | string[]>;
+}
+
+export default async function NewPostPage({ params }: PageProps) {
+  const { id: userId } = params;
+
+  // Verify user exists
+  const user = await db.user.findUnique({
+    where: { id: userId },
+    select: { id: true, name: true },
+  });
+
+  if (!user) {
+    return (
+      <div className="new-post-page">
+        <h1>User Not Found</h1>
+        <p>
+          Cannot create post - no user exists with ID: <code>{userId}</code>
+        </p>
+        <p>
+          <a href="/users">Back to Users</a>
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="new-post-page">
+      <header className="page-header">
+        <h1>New Post</h1>
+        <p>Create a new post for {user.name}</p>
+      </header>
+
+      <form className="post-form" action={`/api/users/${userId}/posts`} method="POST">
+        <div className="form-group">
+          <label htmlFor="title">Title</label>
+          <input type="text" id="title" name="title" required placeholder="Enter post title" />
+        </div>
+
+        <div className="form-group">
+          <label htmlFor="content">Content</label>
+          <textarea id="content" name="content" rows={6} placeholder="Write your post content..." />
+        </div>
+
+        <div className="form-group">
+          <label>
+            <input type="checkbox" name="published" value="true" /> Publish immediately
+          </label>
+        </div>
+
+        <div className="form-actions">
+          <button type="submit">Create Post</button>
+          <a href={`/users/${userId}/posts`}>Cancel</a>
+        </div>
+      </form>
+
+      <footer className="page-footer">
+        <p>
+          <small>
+            Note: This page demonstrates static route precedence. The path /users/:id/posts/new
+            matches before /users/:id/posts/:postId
+          </small>
+        </p>
+      </footer>
+    </div>
+  );
+}

package/src/templates/source/rsc/app/pages/users/[id].tsx

@@ -0,0 +1,64 @@
+/**
+ * User Detail Page
+ *
+ * A React Server Component that displays a single user.
+ * Demonstrates dynamic route parameters with [id] segment.
+ */
+
+import { db } from '../../../src/api/database.js';
+
+interface PageProps {
+  params: Record<string, string>;
+  searchParams: Record<string, string | string[]>;
+}
+
+export default async function UserDetailPage({ params }: PageProps) {
+  const { id } = params;
+
+  // Fetch user from database
+  const user = await db.user.findUnique({
+    where: { id },
+  });
+
+  if (!user) {
+    return (
+      <div className="user-detail-page">
+        <h1>User Not Found</h1>
+        <p>
+          No user exists with ID: <code>{id}</code>
+        </p>
+        <p>
+          <a href="/users">Back to Users</a>
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="user-detail-page">
+      <h1>{user.name}</h1>
+
+      <section className="user-info">
+        <dl>
+          <dt>Email</dt>
+          <dd>{user.email}</dd>
+
+          <dt>ID</dt>
+          <dd>
+            <code>{user.id}</code>
+          </dd>
+
+          <dt>Created</dt>
+          <dd>{user.createdAt.toISOString()}</dd>
+
+          <dt>Updated</dt>
+          <dd>{user.updatedAt.toISOString()}</dd>
+        </dl>
+      </section>
+
+      <footer className="actions">
+        <a href="/users">Back to Users</a>
+      </footer>
+    </div>
+  );
+}