create-next-pro-cli 0.1.26 → 0.1.28

package/templates/Projects/default/tailwind.config.ts

@@ -1 +1,81 @@
-// tailwind.config.ts
+import type { Config } from "tailwindcss";
+import tailwindcssAnimate from "tailwindcss-animate";
+
+const config = {
+  darkMode: "class",
+  content: [
+    "./src/ui/**/*.{ts,tsx}",
+    "./src/app/**/*.{ts,tsx}",
+    "./ui/**/*.{ts,tsx}",
+    "./app/**/*.{ts,tsx}",
+    "./src/**/*.{ts,tsx}",
+  ],
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      colors: {
+        border: "rgb(var(--border))",
+        input: "rgb(var(--input))",
+        ring: "rgb(var(--ring))",
+        background: "rgb(var(--background))",
+        foreground: "rgb(var(--foreground))",
+        primary: {
+          DEFAULT: "rgb(var(--primary))",
+          foreground: "rgb(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "rgb(var(--secondary))",
+          foreground: "rgb(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "rgb(var(--destructive))",
+          foreground: "rgb(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "rgb(var(--muted))",
+          foreground: "rgb(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "rgb(var(--accent))",
+          foreground: "rgb(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "rgb(var(--popover))",
+          foreground: "rgb(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "rgb(var(--card))",
+          foreground: "rgb(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: 0 },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: 0 },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+  plugins: [tailwindcssAnimate],
+} satisfies Config;
+
+export default config;

package/templates/Projects/default/tests/consumer/validate-template.ts

@@ -0,0 +1,66 @@
+import { spawn } from "node:child_process";
+import { cp, mkdtemp, readFile, rm, writeFile } from "node:fs/promises";
+import { tmpdir } from "node:os";
+import path from "node:path";
+
+const root = process.cwd();
+const target = await mkdtemp(path.join(tmpdir(), "create-next-pro-template-"));
+const manager = process.env.CNP_PACKAGE_MANAGER ?? "bun";
+const entries = [
+  ".env.example",
+  ".gitignore",
+  ".prettierignore",
+  "README.md",
+  "bun.lock",
+  "eslint.config.mjs",
+  "messages",
+  "next-env.d.ts",
+  "next.config.ts",
+  "package.json",
+  "playwright.config.ts",
+  "pnpm-workspace.yaml",
+  "postcss.config.mjs",
+  "public",
+  "src",
+  "tailwind.config.ts",
+  "tests/unit",
+  "tests/rendering",
+  "tsconfig.json",
+];
+
+function run(command: string, args: string[]) {
+  return new Promise<void>((resolve, reject) => {
+    const child = spawn(command, args, {
+      cwd: target,
+      env: { ...process.env, AUTH_DISABLED: "true", CI: "true" },
+      stdio: "inherit",
+    });
+    child.on("error", reject);
+    child.on("exit", (code) =>
+      code === 0
+        ? resolve()
+        : reject(new Error(`${command} ${args.join(" ")} failed`)),
+    );
+  });
+}
+
+try {
+  for (const entry of entries) {
+    await cp(path.join(root, entry), path.join(target, entry), {
+      recursive: true,
+    });
+  }
+  if (manager !== "bun") {
+    const packagePath = path.join(target, "package.json");
+    const manifest = JSON.parse(await readFile(packagePath, "utf8"));
+    delete manifest.packageManager;
+    await writeFile(packagePath, `${JSON.stringify(manifest, null, 2)}\n`);
+  }
+  await run(
+    manager,
+    manager === "bun" ? ["install", "--frozen-lockfile"] : ["install"],
+  );
+  await run(manager, ["run", "check"]);
+} finally {
+  await rm(target, { recursive: true, force: true });
+}

package/templates/Projects/default/tests/e2e/template-remediation.playwright.ts

@@ -0,0 +1,106 @@
+import { expect, test } from "@playwright/test";
+
+const captureByProject: Record<string, string> = {
+  desktop: "artifacts/captures/phase-2-template-integration-desktop.png",
+  mobile: "artifacts/captures/phase-2-template-integration-mobile.png",
+};
+
+test("public template routes render in both locales", async ({
+  page,
+}, testInfo) => {
+  await page.goto("/");
+  await expect(page).toHaveURL(/\/(en|fr)$/);
+  await expect(page.getByRole("banner")).toBeVisible();
+
+  await page.goto("/en");
+  await expect(page.getByRole("banner")).toBeVisible();
+  const homeHeading = page
+    .getByRole("main")
+    .getByRole("heading", { name: "Home" });
+  await expect(homeHeading).toBeVisible();
+  await page.getByLabel("Toggle theme").click();
+  await expect(page.locator("html")).toHaveClass(/dark/);
+  await expect(homeHeading).toHaveCSS("color", "rgb(255, 255, 255)");
+  await page.getByLabel("Toggle theme").click();
+  await expect(page.locator("html")).toHaveClass(/light/);
+
+  await page.goto("/fr/login");
+  await expect(page.getByRole("heading", { name: /connexion/i })).toBeVisible();
+  await expect(page.getByLabel("Choisir la langue")).toHaveValue("fr");
+  await expect(page.locator("html")).toHaveClass(/light/);
+  await page.getByLabel("Changer de thème").click();
+  await expect(page.locator("html")).toHaveClass(/dark/);
+  await page.getByLabel("Changer de thème").click();
+  await expect(page.locator("html")).toHaveClass(/light/);
+
+  const capturePath = captureByProject[testInfo.project.name];
+  if (capturePath) {
+    await page.goto("/fr/login");
+    await page.mouse.move(0, 0);
+    await page.screenshot({ path: capturePath, fullPage: true });
+  }
+});
+
+test("anonymous users are redirected away from private pages", async ({
+  page,
+}) => {
+  await page.goto("/en/dashboard");
+  await expect(page).toHaveURL(/\/en\/login/);
+});
+
+test("security headers and disabled auth are explicit", async ({ request }) => {
+  const pageResponse = await request.get("/en");
+  const csp = pageResponse.headers()["content-security-policy"];
+  expect(csp).toContain("default-src 'self'");
+  expect(csp).toContain("script-src 'self' 'unsafe-inline'");
+  expect(csp).not.toContain("'unsafe-eval'");
+  expect(csp).not.toContain("'nonce-");
+  expect(pageResponse.headers()["x-content-type-options"]).toBe("nosniff");
+
+  const authResponse = await request.get("/api/auth/providers");
+  expect(authResponse.status()).toBe(503);
+  await expect(authResponse.json()).resolves.toEqual({
+    error: "Authentication is not configured for this deployment.",
+  });
+});
+
+test("theme is initialized before hydration without a React warning", async ({
+  page,
+}) => {
+  const hydrationWarnings: string[] = [];
+  page.on("console", (message) => {
+    if (
+      message.type() === "warning" &&
+      (message.text().includes("hydrated") ||
+        message.text().includes("Encountered a script tag"))
+    ) {
+      hydrationWarnings.push(message.text());
+    }
+  });
+
+  await page.addInitScript(() => localStorage.setItem("theme", "dark"));
+  await page.goto("/en", { waitUntil: "domcontentloaded" });
+  await expect(page.locator("#theme-initializer")).toHaveCount(1);
+  await expect(page.locator("html")).toHaveClass(/dark/);
+  expect(hydrationWarnings).toEqual([]);
+});
+
+test("theme falls back to the system preference", async ({ page }) => {
+  await page.emulateMedia({ colorScheme: "dark" });
+  await page.goto("/en", { waitUntil: "domcontentloaded" });
+
+  await expect(page.locator("html")).toHaveClass(/dark/);
+});
+
+test("mobile navigation supports keyboard dismissal", async ({
+  page,
+}, testInfo) => {
+  test.skip(testInfo.project.name !== "mobile");
+  await page.goto("/en");
+  const menuButton = page.getByRole("button", { name: "Menu" });
+  await menuButton.click();
+  await expect(page.getByRole("dialog")).toBeVisible();
+  await page.keyboard.press("Escape");
+  await expect(page.getByRole("dialog")).toBeHidden();
+  await expect(menuButton).toBeFocused();
+});

package/templates/Projects/default/tests/rendering/verify-rendering.ts

@@ -0,0 +1,56 @@
+import { readFile } from "node:fs/promises";
+import { join } from "node:path";
+
+type PrerenderManifest = {
+  routes: Record<string, unknown>;
+};
+
+const manifestPath = join(process.cwd(), ".next", "prerender-manifest.json");
+const manifest = JSON.parse(
+  await readFile(manifestPath, "utf8"),
+) as PrerenderManifest;
+const prerenderedRoutes = new Set(Object.keys(manifest.routes));
+const expectedPublicRoutes = [
+  "/en",
+  "/fr",
+  "/en/login",
+  "/fr/login",
+  "/en/register",
+  "/fr/register",
+  "/sitemap.xml",
+];
+const privateRoutes = [
+  "/en/dashboard",
+  "/fr/dashboard",
+  "/en/settings",
+  "/fr/settings",
+  "/en/userInfo",
+  "/fr/userInfo",
+  "/api/auth/[...nextauth]",
+];
+
+const missingPublicRoutes = expectedPublicRoutes.filter(
+  (route) => !prerenderedRoutes.has(route),
+);
+const leakedPrivateRoutes = privateRoutes.filter((route) =>
+  prerenderedRoutes.has(route),
+);
+
+if (missingPublicRoutes.length > 0 || leakedPrivateRoutes.length > 0) {
+  throw new Error(
+    [
+      missingPublicRoutes.length > 0
+        ? `Public routes not prerendered: ${missingPublicRoutes.join(", ")}`
+        : null,
+      leakedPrivateRoutes.length > 0
+        ? `Private routes unexpectedly prerendered: ${leakedPrivateRoutes.join(", ")}`
+        : null,
+    ]
+      .filter(Boolean)
+      .join("\n"),
+  );
+}
+
+console.log(
+  `Rendering verified: ${expectedPublicRoutes.length} public routes prerendered; private routes remain runtime-only.`,
+);

package/templates/Projects/default/tests/unit/csp.test.ts

@@ -0,0 +1,19 @@
+import { describe, expect, test } from "vitest";
+import { createContentSecurityPolicy } from "../../src/lib/security/csp";
+
+describe("Content Security Policy", () => {
+  test("allows the stable inline scripts required by static Next.js pages", () => {
+    const csp = createContentSecurityPolicy(false);
+
+    expect(csp).toContain("script-src 'self' 'unsafe-inline'");
+    expect(csp).not.toContain("'unsafe-eval'");
+    expect(csp).not.toContain("'nonce-");
+  });
+
+  test("allows eval only for the Next.js development runtime", () => {
+    const csp = createContentSecurityPolicy(true);
+
+    expect(csp).toContain("script-src 'self' 'unsafe-inline' 'unsafe-eval'");
+    expect(csp).not.toContain("'nonce-");
+  });
+});

package/templates/Projects/default/tests/unit/env.test.ts

@@ -0,0 +1,76 @@
+import { afterEach, beforeEach, describe, expect, test } from "vitest";
+import { getAuthEnv, getPublicUrl } from "../../src/env";
+
+const envKeys = [
+  "AUTH_SECRET",
+  "NEXTAUTH_SECRET",
+  "AUTH_GOOGLE_ID",
+  "GOOGLE_CLIENT_ID",
+  "AUTH_GOOGLE_SECRET",
+  "AUTH_DISABLED",
+  "GOOGLE_CLIENT_SECRET",
+  "NEXT_PUBLIC_APP_URL",
+  "PROJECT_PRODUCTION_URL",
+  "PORT",
+] as const;
+
+const originalEnv = new Map<string, string | undefined>();
+
+beforeEach(() => {
+  for (const key of envKeys) {
+    originalEnv.set(key, process.env[key]);
+    delete process.env[key];
+  }
+});
+
+afterEach(() => {
+  for (const key of envKeys) {
+    const value = originalEnv.get(key);
+    if (value === undefined) {
+      delete process.env[key];
+    } else {
+      process.env[key] = value;
+    }
+  }
+  originalEnv.clear();
+});
+
+describe("environment helpers", () => {
+  test("disables authentication when all auth values are missing", () => {
+    expect(getAuthEnv()).toBeNull();
+  });
+
+  test("rejects partial authentication configuration", () => {
+    process.env.AUTH_SECRET = "secret";
+    expect(() => getAuthEnv()).toThrow("Incomplete Auth.js configuration");
+  });
+
+  test("uses Auth.js env aliases for generated templates", () => {
+    process.env.NEXTAUTH_SECRET = "secret";
+    process.env.GOOGLE_CLIENT_ID = "google-id";
+    process.env.GOOGLE_CLIENT_SECRET = "google-secret";
+
+    expect(getAuthEnv()).toEqual({
+      secret: "secret",
+      googleClientId: "google-id",
+      googleClientSecret: "google-secret",
+    });
+  });
+
+  test("builds a local public URL when no deployment URL is configured", () => {
+    process.env.PORT = "3100";
+
+    expect(getPublicUrl()).toBe("http://localhost:3100");
+  });
+
+  test("normalizes host-only public URLs to https", () => {
+    process.env.PROJECT_PRODUCTION_URL = "example.com";
+
+    expect(getPublicUrl()).toBe("https://example.com");
+  });
+
+  test("rejects invalid public URLs", () => {
+    process.env.NEXT_PUBLIC_APP_URL = "https://[invalid";
+    expect(() => getPublicUrl()).toThrow();
+  });
+});

package/templates/Projects/default/tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "target": "ES2017",
     "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
+    "allowJs": false,
     "skipLibCheck": true,
     "strict": true,
     "noEmit": true,
@@ -11,8 +11,9 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
+    "types": ["node", "vitest/globals"],
     "plugins": [
       {
         "name": "next"
@@ -26,9 +27,8 @@
     "next-env.d.ts",
     "**/*.ts",
     "**/*.tsx",
-    ".next/types/**/*.ts"
-    /* "src/app/not-found.tsx.save",
-    "src/app/layout.tsx.save" */
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
   ],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules", ".next/dev"]
 }

package/templates/Projects/default/example.env

@@ -1,8 +0,0 @@
-PORT=3000
-PROJECT_PRODUCTION_URL=your-production-url.com
-NEXTAUTH_URL=http://localhost:3000/api/auth
-NEXTAUTH_SECRET=ONGGG2GIf5Mc4LpWv69WR8J+WazM8BmGa8hSex1dEvg=# generate a new secret using `openssl rand -base64 32`
-APP_JWT_SECRET=3bsnnr4PqTaXBvDMstnSjhd2FdYbi1CgSjXMF9s446c=# generate a new secret using `openssl rand -base64 32`
-
-GOOGLE_CLIENT_ID=# your Google Client ID , you can get it from https://console.cloud.google.com/apis/credentials
-GOOGLE_CLIENT_SECRET=# your Google Client Secret , you can get it from https://console.cloud.google.com/apis/credentials

package/templates/Projects/default/messages/getMergedMessages.ts

@@ -1,31 +0,0 @@
-// lib/i18n/getMergedMessages.ts
-import { readdir, readFile } from "fs/promises";
-import { join, basename } from "path";
-
-export default async function getMergedMessages(currentModuleFilename: string) {
-  const locale = basename(currentModuleFilename, ".ts");
-  const basePath = join(process.cwd(), "messages", locale);
-  const merged: Record<string, any> = {};
-
-  try {
-    const files = await readdir(basePath);
-    for (const file of files) {
-      if (file.endsWith(".json")) {
-        try {
-          const content = await readFile(join(basePath, file), "utf8");
-          const key = basename(file, ".json");
-          merged[key] = JSON.parse(content);
-        } catch (err) {
-          console.error(
-            `❌ Failed to read ${file} for locale '${locale}':`,
-            err
-          );
-        }
-      }
-    }
-  } catch (err) {
-    console.error(`❌ Failed to read directory '${basePath}':`, err);
-  }
-
-  return merged;
-}

package/templates/Projects/default/middleware.ts

@@ -1,11 +0,0 @@
-import createMiddleware from "next-intl/middleware";
-import { routing } from "@/lib/i18n/routing";
-
-export default createMiddleware(routing);
-
-export const config = {
-  // Match all pathnames except for
-  // - … if they start with `/api`, `/trpc`, `/_next` or `/_vercel`
-  // - … the ones containing a dot (e.g. `favicon.ico`)
-  matcher: "/((?!api|trpc|_next|_vercel|.*\\..*).*)",
-};

package/templates/Projects/default/src/app/[locale]/(public)/Login/page.tsx

@@ -1,6 +0,0 @@
-// src/app/[locale]/(public)/Login/page.tsx
-import LoginPageUI from "@/ui/Login/page-ui";
-
-export default function LoginPage() {
-  return <LoginPageUI />;
-}

package/templates/Projects/default/src/app/[locale]/(public)/Register/page.tsx

@@ -1,6 +0,0 @@
-// src/app/[locale]/(public)/Register/page.tsx
-import RegisterPageUI from "@/ui/Register/page-ui";
-
-export default function RegisterPage() {
-  return <RegisterPageUI />;
-}

package/templates/Projects/default/src/app/[locale]/(user)/Dashboard/error.tsx

@@ -1,38 +0,0 @@
-// app/[locale]/error.tsx
-"use client"; // Error boundaries must be Client Components
-
-import { useEffect } from "react";
-
-export default function Error({
-  error,
-  reset,
-}: {
-  error: Error & { digest?: string };
-  reset: () => void;
-}) {
-  useEffect(() => {
-    // Log the error to an error reporting service
-    console.error(error);
-  }, [error]);
-
-  return (
-    <div>
-      <h2>Something went wrong!</h2>
-      <button
-        onClick={
-          // Attempt to recover by trying to re-render the segment
-          () => reset()
-        }
-      >
-        Try again
-      </button>
-    </div>
-  );
-}
-// This page is used to handle errors in the application
-// You can customize this page to display a user-friendly error message
-// or redirect to a different page if needed
-// This is part of the Next.js app directory structure and will be automatically used by Next.js
-// when an error occurs in the application
-// Make sure to handle errors gracefully to improve user experience
-// You can also log errors or send them to an error tracking service

package/templates/Projects/default/src/app/[locale]/(user)/Dashboard/loading.tsx

@@ -1,10 +0,0 @@
-// app/[locale]/dashboard/loading.tsx
-"use client";
-
-export default function Loading() {
-  return (
-    <div className="flex flex-col flex-1 items-center justify-center">
-      <p className="text-gray-500">Loading dashboard...</p>
-    </div>
-  );
-}

package/templates/Projects/default/src/app/[locale]/(user)/Settings/loading.tsx

@@ -1,17 +0,0 @@
-// app/[locale]/dashboard/loading.tsx
-"use client";
-
-export default function Loading() {
-  return (
-    <div className="flex flex-col flex-1 items-center justify-center">
-      <p className="text-gray-500">Loading user info...</p>
-    </div>
-  );
-}
-// This component is used to show a loading state while the dashboard is being prepared
-// You can customize it with a spinner, skeletons, or any loading UI you prefer
-// It will be displayed when the dashboard is loading, for example during data fetching or component rendering
-// This is useful for providing feedback to users that something is happening in the background
-// You can also use this to implement a more complex loading state with animations or placeholders
-// Make sure to keep it lightweight to avoid blocking the main thread
-// This component is part of the Next.js app directory structure and will be automatically used by Next.js

package/templates/Projects/default/src/app/[locale]/(user)/UserInfo/loading.tsx

@@ -1,17 +0,0 @@
-// app/[locale]/dashboard/loading.tsx
-"use client";
-
-export default function Loading() {
-  return (
-    <div className="flex flex-col flex-1 items-center justify-center">
-      <p className="text-gray-500">Loading user info...</p>
-    </div>
-  );
-}
-// This component is used to show a loading state while the dashboard is being prepared
-// You can customize it with a spinner, skeletons, or any loading UI you prefer
-// It will be displayed when the dashboard is loading, for example during data fetching or component rendering
-// This is useful for providing feedback to users that something is happening in the background
-// You can also use this to implement a more complex loading state with animations or placeholders
-// Make sure to keep it lightweight to avoid blocking the main thread
-// This component is part of the Next.js app directory structure and will be automatically used by Next.js

package/templates/Projects/default/src/app/api/auth/post-login/route.ts

@@ -1,26 +0,0 @@
-import { getToken } from "next-auth/jwt";
-import { sign } from "jsonwebtoken";
-import { NextResponse, NextRequest } from "next/server";
-import { redirect } from "@/lib/i18n/navigation";
-
-export async function GET(req: NextRequest) {
-  const token = await getToken({ req, secret: process.env.NEXTAUTH_SECRET });
-  if (token) {
-    const appJwt = sign(
-      { id: token.id, email: token.email, name: token.name },
-      process.env.APP_JWT_SECRET!,
-      { expiresIn: "7d" }
-    );
-    const res = NextResponse.redirect(req.nextUrl.origin + "/");
-    res.cookies.set("access_token", appJwt, {
-      httpOnly: true,
-      secure: process.env.NODE_ENV === "production",
-      sameSite: "strict",
-      path: "/",
-      maxAge: 60 * 60 * 24 * 7,
-    });
-    return res;
-  }
-  // Si pas de token, redirige vers login
-  return redirect({ href: "/login", locale: "en" });
-}

package/templates/Projects/default/src/app/api/hello/route.ts

@@ -1,5 +0,0 @@
-import { NextResponse } from "next/server";
-
-export async function GET() {
-  return NextResponse.json({ message: "Hello" });
-}

package/templates/Projects/default/src/app/layout.tsx

@@ -1,11 +0,0 @@
-import { ReactNode } from "react";
-
-type Props = {
-  children: ReactNode;
-};
-
-// Since we have a `not-found.tsx` page on the root, a layout file
-// is required, even if it's just passing children through.
-export default function RootLayout({ children }: Props) {
-  return children;
-}

package/templates/Projects/default/src/app/page.tsx

@@ -1,6 +0,0 @@
-import { redirect } from "next/navigation";
-
-// This page only renders when the app is built statically (output: 'export')
-export default function RootPage() {
-  redirect("/en");
-}

package/templates/Projects/default/src/lib/auth/disconnect.ts

@@ -1,11 +0,0 @@
-// src/lib/auth/disconnect.ts
-"use server";
-import { cookies } from "next/headers";
-
-/**
- * Supprime le cookie access_token pour déconnecter l'utilisateur côté serveur.
- */
-export async function disconnect() {
-  const cookieStore = await cookies();
-  cookieStore.delete("access_token");
-}