create-lumen 2.0.0-alpha.2 → 2.0.0-beta.2

package/templates/conditional/next/image/pages-router/src/components/ImageExample.jsx

@@ -0,0 +1,34 @@
+import React from "react";
+import Image from "next/image";
+
+export function ImageExample({
+  src = "/next.svg",
+  alt = "Next.js logo",
+  width = 180,
+  height = 37,
+  priority = false,
+  className = "",
+  caption = "Optimized with next/image",
+}) {
+  return (
+    <figure className={`inline-flex flex-col items-center gap-2 p-4 rounded-xl border border-gray-200 dark:border-gray-800 bg-white/50 dark:bg-black/20 ${className}`}>
+      <div className="relative flex items-center justify-center p-2">
+        <Image
+          src={src}
+          alt={alt}
+          width={width}
+          height={height}
+          priority={priority}
+          className="dark:invert transition-transform hover:scale-105"
+        />
+      </div>
+      {caption && (
+        <figcaption className="text-xs text-gray-500 dark:text-gray-400 text-center font-mono">
+          {caption}
+        </figcaption>
+      )}
+    </figure>
+  );
+}
+
+export default ImageExample;

package/templates/conditional/next/image/pages-router/src/components/ImageExample.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import Image from "next/image";
+
+export interface ImageExampleProps {
+  src?: string;
+  alt?: string;
+  width?: number;
+  height?: number;
+  priority?: boolean;
+  className?: string;
+  caption?: string;
+}
+
+export function ImageExample({
+  src = "/next.svg",
+  alt = "Next.js logo",
+  width = 180,
+  height = 37,
+  priority = false,
+  className = "",
+  caption = "Optimized with next/image",
+}: ImageExampleProps) {
+  return (
+    <figure className={`inline-flex flex-col items-center gap-2 p-4 rounded-xl border border-gray-200 dark:border-gray-800 bg-white/50 dark:bg-black/20 ${className}`}>
+      <div className="relative flex items-center justify-center p-2">
+        <Image
+          src={src}
+          alt={alt}
+          width={width}
+          height={height}
+          priority={priority}
+          className="dark:invert transition-transform hover:scale-105"
+        />
+      </div>
+      {caption && (
+        <figcaption className="text-xs text-gray-500 dark:text-gray-400 text-center font-mono">
+          {caption}
+        </figcaption>
+      )}
+    </figure>
+  );
+}
+
+export default ImageExample;

package/templates/conditional/next/image/src/components/ImageExample.jsx

@@ -0,0 +1,44 @@
+import React from "react";
+import Image from "next/image";
+
+/**
+ * Universal Next.js Image component example.
+ * Works seamlessly in both App Router (Server and Client components)
+ * and Pages Router.
+ *
+ * Demonstrates:
+ * - Built-in automatic format optimization (WebP/AVIF)
+ * - Intrinsic sizing to avoid layout shift (CLS)
+ * - Priority loading option for LCP optimization
+ */
+export function ImageExample({
+  src = "/next.svg",
+  alt = "Next.js logo",
+  width = 180,
+  height = 37,
+  priority = false,
+  className = "",
+  caption = "Optimized with next/image",
+}) {
+  return (
+    <figure className={`inline-flex flex-col items-center gap-2 p-4 rounded-xl border border-gray-200 dark:border-gray-800 bg-white/50 dark:bg-black/20 ${className}`}>
+      <div className="relative flex items-center justify-center p-2">
+        <Image
+          src={src}
+          alt={alt}
+          width={width}
+          height={height}
+          priority={priority}
+          className="dark:invert transition-transform hover:scale-105"
+        />
+      </div>
+      {caption && (
+        <figcaption className="text-xs text-gray-500 dark:text-gray-400 text-center font-mono">
+          {caption}
+        </figcaption>
+      )}
+    </figure>
+  );
+}
+
+export default ImageExample;

package/templates/conditional/next/image/src/components/ImageExample.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import Image from "next/image";
+
+export interface ImageExampleProps {
+  src?: string;
+  alt?: string;
+  width?: number;
+  height?: number;
+  priority?: boolean;
+  className?: string;
+  caption?: string;
+}
+
+/**
+ * Universal Next.js Image component example.
+ * Works seamlessly in both App Router (Server and Client components)
+ * and Pages Router.
+ *
+ * Demonstrates:
+ * - Built-in automatic format optimization (WebP/AVIF)
+ * - Intrinsic sizing to avoid layout shift (CLS)
+ * - Priority loading option for LCP optimization
+ */
+export function ImageExample({
+  src = "/next.svg",
+  alt = "Next.js logo",
+  width = 180,
+  height = 37,
+  priority = false,
+  className = "",
+  caption = "Optimized with next/image",
+}: ImageExampleProps) {
+  return (
+    <figure className={`inline-flex flex-col items-center gap-2 p-4 rounded-xl border border-gray-200 dark:border-gray-800 bg-white/50 dark:bg-black/20 ${className}`}>
+      <div className="relative flex items-center justify-center p-2">
+        <Image
+          src={src}
+          alt={alt}
+          width={width}
+          height={height}
+          priority={priority}
+          className="dark:invert transition-transform hover:scale-105"
+        />
+      </div>
+      {caption && (
+        <figcaption className="text-xs text-gray-500 dark:text-gray-400 text-center font-mono">
+          {caption}
+        </figcaption>
+      )}
+    </figure>
+  );
+}
+
+export default ImageExample;

package/templates/conditional/next/image/src/components/image/index.js

@@ -0,0 +1 @@
+export { ImageExample } from "../ImageExample";

package/templates/conditional/next/image/src/components/image/index.ts

@@ -0,0 +1,2 @@
+export { ImageExample } from "../ImageExample";
+export type { ImageExampleProps } from "../ImageExample";

package/templates/conditional/next/route-groups/js/src/app/(admin)/layout.jsx

@@ -0,0 +1,23 @@
+import Link from "next/link";
+
+export default function AdminLayout({ children }) {
+  return (
+    <div className="min-h-screen flex flex-col">
+      <header className="bg-red-700 text-white px-6 py-3 flex items-center justify-between text-sm">
+        <div className="font-semibold flex items-center gap-2">
+          <span className="inline-block w-2 h-2 rounded-full bg-white animate-pulse" />
+          Admin Panel (Restricted Access)
+        </div>
+        <nav className="flex gap-4">
+          <Link href="/admin" className="underline hover:no-underline">
+            Management
+          </Link>
+          <Link href="/dashboard" className="underline hover:no-underline">
+            Exit to Dashboard
+          </Link>
+        </nav>
+      </header>
+      <main className="flex-1 p-8 bg-gray-100 dark:bg-gray-900">{children}</main>
+    </div>
+  );
+}

package/templates/conditional/next/route-groups/js/src/app/(auth)/layout.jsx

@@ -0,0 +1,17 @@
+import Link from "next/link";
+
+export default function AuthLayout({ children }) {
+  return (
+    <div className="min-h-screen flex flex-col justify-center items-center bg-gray-50 dark:bg-gray-950 p-4">
+      <div className="w-full max-w-md bg-white dark:bg-gray-900 shadow-md rounded-lg p-6 border border-gray-200 dark:border-gray-800">
+        <div className="mb-6 text-center">
+          <Link href="/" className="text-xl font-bold">
+            Lumen Authentication
+          </Link>
+          <p className="text-sm text-gray-500 mt-1">Sign in to your account</p>
+        </div>
+        {children}
+      </div>
+    </div>
+  );
+}

package/templates/conditional/next/route-groups/js/src/app/(private)/layout.jsx

@@ -0,0 +1,27 @@
+import Link from "next/link";
+
+export default function PrivateLayout({ children }) {
+  return (
+    <div className="min-h-screen flex">
+      <aside className="w-64 border-r bg-gray-50 dark:bg-gray-950 p-6 flex flex-col justify-between">
+        <div>
+          <div className="font-bold text-lg mb-6">
+            <Link href="/dashboard">Private Dashboard</Link>
+          </div>
+          <nav className="flex flex-col gap-3 text-sm">
+            <Link href="/dashboard" className="text-gray-700 dark:text-gray-200 hover:text-black">
+              Overview
+            </Link>
+            <Link href="/settings" className="text-gray-700 dark:text-gray-200 hover:text-black">
+              Settings
+            </Link>
+          </nav>
+        </div>
+        <div className="text-xs text-gray-400">
+          Protected Area &bull; Authenticated
+        </div>
+      </aside>
+      <main className="flex-1 p-8">{children}</main>
+    </div>
+  );
+}

package/templates/conditional/next/route-groups/js/src/app/(public)/layout.jsx

@@ -0,0 +1,28 @@
+import Link from "next/link";
+
+export default function PublicLayout({ children }) {
+  return (
+    <div className="min-h-screen flex flex-col">
+      <header className="border-b px-6 py-4 flex items-center justify-between">
+        <div className="font-bold text-lg">
+          <Link href="/">Lumen App</Link>
+        </div>
+        <nav className="flex gap-4 text-sm">
+          <Link href="/login" className="hover:underline">
+            Sign In
+          </Link>
+          <Link href="/dashboard" className="hover:underline">
+            Dashboard
+          </Link>
+          <Link href="/admin" className="hover:underline">
+            Admin
+          </Link>
+        </nav>
+      </header>
+      <main className="flex-1">{children}</main>
+      <footer className="border-t px-6 py-4 text-center text-sm text-gray-500">
+        Public Area &copy; {new Date().getFullYear()}
+      </footer>
+    </div>
+  );
+}

package/templates/conditional/next/route-groups/js/src/app/(public)/page.jsx

@@ -0,0 +1,38 @@
+import Link from "next/link";
+
+export default function PublicPage() {
+  return (
+    <div className="max-w-4xl mx-auto py-12 px-6">
+      <h1 className="text-4xl font-extrabold tracking-tight mb-4">
+        Welcome to Route Groups Preset
+      </h1>
+      <p className="text-lg text-gray-600 mb-8">
+        This application is organized using Next.js App Router route groups:
+        (public), (auth), (private), and (admin).
+      </p>
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <div className="border rounded-lg p-6 shadow-sm">
+          <h2 className="text-xl font-semibold mb-2">Auth Group</h2>
+          <p className="text-gray-500 mb-4">Authentication screens and login layouts.</p>
+          <Link href="/login" className="text-blue-600 hover:underline">
+            Go to Login &rarr;
+          </Link>
+        </div>
+        <div className="border rounded-lg p-6 shadow-sm">
+          <h2 className="text-xl font-semibold mb-2">Private Group</h2>
+          <p className="text-gray-500 mb-4">Protected routes guarded by auth proxy middleware.</p>
+          <Link href="/dashboard" className="text-blue-600 hover:underline">
+            Go to Dashboard &rarr;
+          </Link>
+        </div>
+        <div className="border rounded-lg p-6 shadow-sm">
+          <h2 className="text-xl font-semibold mb-2">Admin Group</h2>
+          <p className="text-gray-500 mb-4">Elevated management section requiring admin role.</p>
+          <Link href="/admin" className="text-blue-600 hover:underline">
+            Go to Admin &rarr;
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/conditional/next/route-groups/js/src/middleware.js

@@ -0,0 +1,48 @@
+import { NextResponse } from "next/server";
+
+/**
+ * Auth Proxy / Route Guard Middleware
+ *
+ * Enforces role-based access control and session verification:
+ * - Unauthenticated requests to private or admin routes redirect to /login
+ * - Authenticated requests lacking the "admin" role redirect away from /admin
+ */
+export function middleware(request) {
+  const { pathname } = request.nextUrl;
+
+  const authToken = request.cookies.get("auth-token")?.value;
+  const userRole = request.cookies.get("user-role")?.value || "user";
+
+  const isAuthRoute = pathname.startsWith("/login") || pathname.startsWith("/register");
+  const isPrivateRoute = pathname.startsWith("/dashboard") || pathname.startsWith("/settings");
+  const isAdminRoute = pathname.startsWith("/admin");
+
+  // If unauthenticated user tries to access protected areas, redirect to /login
+  if ((isPrivateRoute || isAdminRoute) && !authToken) {
+    const loginUrl = new URL("/login", request.url);
+    loginUrl.searchParams.set("from", pathname);
+    return NextResponse.redirect(loginUrl);
+  }
+
+  // If authenticated user without admin role accesses admin area, forbid or redirect to dashboard
+  if (isAdminRoute && userRole !== "admin") {
+    return NextResponse.redirect(new URL("/dashboard", request.url));
+  }
+
+  // If already authenticated user visits auth routes, redirect to dashboard
+  if (isAuthRoute && authToken) {
+    return NextResponse.redirect(new URL("/dashboard", request.url));
+  }
+
+  return NextResponse.next();
+}
+
+export const config = {
+  matcher: [
+    "/dashboard/:path*",
+    "/settings/:path*",
+    "/admin/:path*",
+    "/login",
+    "/register",
+  ],
+};

package/templates/conditional/next/route-groups/ts/src/app/(admin)/layout.tsx

@@ -0,0 +1,28 @@
+import type { ReactNode } from "react";
+import Link from "next/link";
+
+export default function AdminLayout({
+  children,
+}: Readonly<{
+  children: ReactNode;
+}>) {
+  return (
+    <div className="min-h-screen flex flex-col">
+      <header className="bg-red-700 text-white px-6 py-3 flex items-center justify-between text-sm">
+        <div className="font-semibold flex items-center gap-2">
+          <span className="inline-block w-2 h-2 rounded-full bg-white animate-pulse" />
+          Admin Panel (Restricted Access)
+        </div>
+        <nav className="flex gap-4">
+          <Link href="/admin" className="underline hover:no-underline">
+            Management
+          </Link>
+          <Link href="/dashboard" className="underline hover:no-underline">
+            Exit to Dashboard
+          </Link>
+        </nav>
+      </header>
+      <main className="flex-1 p-8 bg-gray-100 dark:bg-gray-900">{children}</main>
+    </div>
+  );
+}

package/templates/conditional/next/route-groups/ts/src/app/(auth)/layout.tsx

@@ -0,0 +1,22 @@
+import type { ReactNode } from "react";
+import Link from "next/link";
+
+export default function AuthLayout({
+  children,
+}: Readonly<{
+  children: ReactNode;
+}>) {
+  return (
+    <div className="min-h-screen flex flex-col justify-center items-center bg-gray-50 dark:bg-gray-950 p-4">
+      <div className="w-full max-w-md bg-white dark:bg-gray-900 shadow-md rounded-lg p-6 border border-gray-200 dark:border-gray-800">
+        <div className="mb-6 text-center">
+          <Link href="/" className="text-xl font-bold">
+            Lumen Authentication
+          </Link>
+          <p className="text-sm text-gray-500 mt-1">Sign in to your account</p>
+        </div>
+        {children}
+      </div>
+    </div>
+  );
+}

package/templates/conditional/next/route-groups/ts/src/app/(private)/layout.tsx

@@ -0,0 +1,32 @@
+import type { ReactNode } from "react";
+import Link from "next/link";
+
+export default function PrivateLayout({
+  children,
+}: Readonly<{
+  children: ReactNode;
+}>) {
+  return (
+    <div className="min-h-screen flex">
+      <aside className="w-64 border-r bg-gray-50 dark:bg-gray-950 p-6 flex flex-col justify-between">
+        <div>
+          <div className="font-bold text-lg mb-6">
+            <Link href="/dashboard">Private Dashboard</Link>
+          </div>
+          <nav className="flex flex-col gap-3 text-sm">
+            <Link href="/dashboard" className="text-gray-700 dark:text-gray-200 hover:text-black">
+              Overview
+            </Link>
+            <Link href="/settings" className="text-gray-700 dark:text-gray-200 hover:text-black">
+              Settings
+            </Link>
+          </nav>
+        </div>
+        <div className="text-xs text-gray-400">
+          Protected Area &bull; Authenticated
+        </div>
+      </aside>
+      <main className="flex-1 p-8">{children}</main>
+    </div>
+  );
+}

package/templates/conditional/next/route-groups/ts/src/app/(public)/layout.tsx

@@ -0,0 +1,33 @@
+import type { ReactNode } from "react";
+import Link from "next/link";
+
+export default function PublicLayout({
+  children,
+}: Readonly<{
+  children: ReactNode;
+}>) {
+  return (
+    <div className="min-h-screen flex flex-col">
+      <header className="border-b px-6 py-4 flex items-center justify-between">
+        <div className="font-bold text-lg">
+          <Link href="/">Lumen App</Link>
+        </div>
+        <nav className="flex gap-4 text-sm">
+          <Link href="/login" className="hover:underline">
+            Sign In
+          </Link>
+          <Link href="/dashboard" className="hover:underline">
+            Dashboard
+          </Link>
+          <Link href="/admin" className="hover:underline">
+            Admin
+          </Link>
+        </nav>
+      </header>
+      <main className="flex-1">{children}</main>
+      <footer className="border-t px-6 py-4 text-center text-sm text-gray-500">
+        Public Area &copy; {new Date().getFullYear()}
+      </footer>
+    </div>
+  );
+}

package/templates/conditional/next/route-groups/ts/src/app/(public)/page.tsx

@@ -0,0 +1,38 @@
+import Link from "next/link";
+
+export default function PublicPage() {
+  return (
+    <div className="max-w-4xl mx-auto py-12 px-6">
+      <h1 className="text-4xl font-extrabold tracking-tight mb-4">
+        Welcome to Route Groups Preset
+      </h1>
+      <p className="text-lg text-gray-600 mb-8">
+        This application is organized using Next.js App Router route groups:
+        (public), (auth), (private), and (admin).
+      </p>
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <div className="border rounded-lg p-6 shadow-sm">
+          <h2 className="text-xl font-semibold mb-2">Auth Group</h2>
+          <p className="text-gray-500 mb-4">Authentication screens and login layouts.</p>
+          <Link href="/login" className="text-blue-600 hover:underline">
+            Go to Login &rarr;
+          </Link>
+        </div>
+        <div className="border rounded-lg p-6 shadow-sm">
+          <h2 className="text-xl font-semibold mb-2">Private Group</h2>
+          <p className="text-gray-500 mb-4">Protected routes guarded by auth proxy middleware.</p>
+          <Link href="/dashboard" className="text-blue-600 hover:underline">
+            Go to Dashboard &rarr;
+          </Link>
+        </div>
+        <div className="border rounded-lg p-6 shadow-sm">
+          <h2 className="text-xl font-semibold mb-2">Admin Group</h2>
+          <p className="text-gray-500 mb-4">Elevated management section requiring admin role.</p>
+          <Link href="/admin" className="text-blue-600 hover:underline">
+            Go to Admin &rarr;
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/conditional/next/route-groups/ts/src/middleware.ts

@@ -0,0 +1,49 @@
+import { NextResponse } from "next/server";
+import type { NextRequest } from "next/server";
+
+/**
+ * Auth Proxy / Route Guard Middleware
+ *
+ * Enforces role-based access control and session verification:
+ * - Unauthenticated requests to private or admin routes redirect to /login
+ * - Authenticated requests lacking the "admin" role redirect away from /admin
+ */
+export function middleware(request: NextRequest) {
+  const { pathname } = request.nextUrl;
+
+  const authToken = request.cookies.get("auth-token")?.value;
+  const userRole = request.cookies.get("user-role")?.value || "user";
+
+  const isAuthRoute = pathname.startsWith("/login") || pathname.startsWith("/register");
+  const isPrivateRoute = pathname.startsWith("/dashboard") || pathname.startsWith("/settings");
+  const isAdminRoute = pathname.startsWith("/admin");
+
+  // If unauthenticated user tries to access protected areas, redirect to /login
+  if ((isPrivateRoute || isAdminRoute) && !authToken) {
+    const loginUrl = new URL("/login", request.url);
+    loginUrl.searchParams.set("from", pathname);
+    return NextResponse.redirect(loginUrl);
+  }
+
+  // If authenticated user without admin role accesses admin area, forbid or redirect to dashboard
+  if (isAdminRoute && userRole !== "admin") {
+    return NextResponse.redirect(new URL("/dashboard", request.url));
+  }
+
+  // If already authenticated user visits auth routes, redirect to dashboard
+  if (isAuthRoute && authToken) {
+    return NextResponse.redirect(new URL("/dashboard", request.url));
+  }
+
+  return NextResponse.next();
+}
+
+export const config = {
+  matcher: [
+    "/dashboard/:path*",
+    "/settings/:path*",
+    "/admin/:path*",
+    "/login",
+    "/register",
+  ],
+};

package/templates/conditional/next/server-components/README.md

@@ -0,0 +1,13 @@
+# React Server Components (RSC) Boundaries & Linting
+
+This conditional template provides:
+1. **Server vs Client Boundary Components**: Clean demonstrations of React Server Components composing Client Components with `"use client"`.
+2. **ESLint Rule Wiring (`rsc/no-server-imports-in-client`)**: An AST-based ESLint rule that disallows importing server-only packages (e.g., `server-only`, Node.js built-ins) into Client Components marked with `"use client"`.
+3. **Dual Router Compatibility**: Operates seamlessly in both Next.js App Router and Pages Router.
+
+## Components
+- `ClientCounter`: An interactive client component demonstrating React state and event handling.
+- `ServerCard`: A server-rendered component shell passing children and composing `ClientCounter` across the boundary.
+
+## ESLint Configuration
+Wires `rsc/no-server-imports-in-client` and `no-restricted-imports` into Next.js flat configuration (`eslint.config.mjs`).

package/templates/conditional/next/server-components/eslint.config.mjs

@@ -0,0 +1,47 @@
+import { noServerImportsInClient } from "./rules/no-server-imports-in-client.mjs";
+
+let baseConfig = [];
+try {
+  const next = await import("eslint-config-next");
+  const imported = next.default || next;
+  baseConfig = Array.isArray(imported) ? imported : [imported];
+} catch {
+  try {
+    const { FlatCompat } = await import("@eslint/eslintrc");
+    const { fileURLToPath } = await import("url");
+    const { dirname } = await import("path");
+    const __filename = fileURLToPath(import.meta.url);
+    const __dirname = dirname(__filename);
+    const compat = new FlatCompat({ baseDirectory: __dirname });
+    baseConfig = compat.extends("next/core-web-vitals");
+  } catch {}
+}
+
+const eslintConfig = [
+  ...baseConfig,
+  {
+    plugins: {
+      rsc: {
+        rules: {
+          "no-server-imports-in-client": noServerImportsInClient,
+        },
+      },
+    },
+    rules: {
+      "rsc/no-server-imports-in-client": "error",
+      "no-restricted-imports": [
+        "error",
+        {
+          patterns: [
+            {
+              group: ["server-only", "**/server-only/**"],
+              message: "Do not import server-only packages in client modules.",
+            },
+          ],
+        },
+      ],
+    },
+  },
+];
+
+export default eslintConfig;