create-next-pro-cli 0.1.28 → 0.1.30

package/templates/Projects/default/src/ui/dashboard/WelcomeCard.tsx

@@ -2,9 +2,11 @@ import React from "react";
 
 export default function WelcomeCard({ t }: { t: (key: string) => string }) {
   return (
-    <div className="rounded border bg-white p-6 shadow-sm">
+    <div className="rounded border bg-white p-6 shadow-sm dark:bg-black">
       <h2 className="text-lg font-semibold mb-2">{t("widgets.welcome")}</h2>
-      <p className="text-gray-600">{t("widgets.description")}</p>
+      <p className="text-gray-600 dark:text-gray-300">
+        {t("widgets.description")}
+      </p>
     </div>
   );
 }

package/templates/Projects/default/src/ui/dashboard/page-ui.tsx

@@ -1,6 +1,5 @@
 // src/ui/dashboard/page-ui.tsx
 import { getTranslations } from "next-intl/server";
-import BackButton from "@/ui/_global/BackButton";
 import WelcomeCard from "@/ui/dashboard/WelcomeCard";
 import StatsCard from "@/ui/dashboard/StatsCard";
 
@@ -10,7 +9,6 @@ export default async function Dashboard() {
     <>
       <div className="flex items-center justify-between mb-6">
         <h1 className="text-2xl font-bold">{t("title")}</h1>
-        <BackButton />
       </div>
       <p className="mb-8">{t("description")}</p>
       <section className="grid grid-cols-1 md:grid-cols-2 gap-6">

package/templates/Projects/default/src/ui/settings/page-ui.tsx

@@ -1,15 +1,54 @@
 // src/ui/settings/page-ui.tsx
 import { getTranslations } from "next-intl/server";
+import LocaleSwitcher from "@/ui/_global/LocaleSwitcher";
+import ThemeToggle from "@/ui/_global/ThemeToggle";
 
 export default async function SettingsPageUI() {
   const t = await getTranslations("settings");
 
   return (
-    <>
-      <section className="py-8 px-4 max-w-3xl mx-auto">
-        <h1 className="text-2xl font-bold">{t("title")}</h1>
-        <p className="mt-2">{t("description")}</p>
-      </section>
-    </>
+    <section className="py-8 px-4 max-w-3xl mx-auto">
+      <h1 className="text-2xl font-bold">{t("title")}</h1>
+      <p className="mt-2">{t("description")}</p>
+
+      <div className="mt-8 grid gap-6">
+        <section
+          className="rounded border bg-white p-6 shadow-sm dark:bg-black"
+          aria-labelledby="language-preference-title"
+        >
+          <div className="flex items-center justify-between gap-6">
+            <div>
+              <h2
+                id="language-preference-title"
+                className="text-lg font-semibold"
+              >
+                {t("language.title")}
+              </h2>
+              <p className="mt-1 text-sm text-gray-600 dark:text-gray-300">
+                {t("language.description")}
+              </p>
+            </div>
+            <LocaleSwitcher />
+          </div>
+        </section>
+
+        <section
+          className="rounded border bg-white p-6 shadow-sm dark:bg-black"
+          aria-labelledby="theme-preference-title"
+        >
+          <div className="flex items-center justify-between gap-6">
+            <div>
+              <h2 id="theme-preference-title" className="text-lg font-semibold">
+                {t("theme.title")}
+              </h2>
+              <p className="mt-1 text-sm text-gray-600 dark:text-gray-300">
+                {t("theme.description")}
+              </p>
+            </div>
+            <ThemeToggle />
+          </div>
+        </section>
+      </div>
+    </section>
   );
 }

package/templates/Projects/default/src/ui/userInfo/page-ui.tsx

@@ -1,15 +1,62 @@
 // src/ui/userInfo/page-ui.tsx
+import Image from "next/image";
 import { getTranslations } from "next-intl/server";
 
-export default async function UserInfoPageUI() {
+type UserInfoPageUIProps = {
+  user?: {
+    name?: string | null;
+    email?: string | null;
+    image?: string | null;
+  };
+};
+
+export default async function UserInfoPageUI({ user }: UserInfoPageUIProps) {
   const t = await getTranslations("userInfo");
 
   return (
-    <>
-      <section className="py-8 px-4 max-w-3xl mx-auto">
-        <h1 className="text-2xl font-bold">{t("title")}</h1>
-        <p className="mt-2">{t("description")}</p>
-      </section>
-    </>
+    <section className="py-8 px-4 max-w-3xl mx-auto">
+      <h1 className="text-2xl font-bold">{t("title")}</h1>
+      <p className="mt-2">{t("description")}</p>
+
+      <div className="mt-8 rounded border bg-white p-6 shadow-sm dark:bg-black">
+        <div className="flex flex-col gap-6 sm:flex-row sm:items-center">
+          {user?.image ? (
+            <Image
+              src={user.image}
+              alt={t("profile_image_alt")}
+              width={96}
+              height={96}
+              className="h-24 w-24 rounded-full object-cover"
+            />
+          ) : (
+            <div
+              className="flex h-24 w-24 items-center justify-center rounded-full bg-muted text-2xl font-semibold text-muted-foreground"
+              aria-label={t("profile_image_unavailable")}
+            >
+              {user?.name?.charAt(0).toUpperCase() || "?"}
+            </div>
+          )}
+
+          <dl className="grid flex-1 gap-4">
+            <div>
+              <dt className="text-sm font-medium text-gray-600 dark:text-gray-300">
+                {t("name")}
+              </dt>
+              <dd className="mt-1 break-words">
+                {user?.name || t("unavailable")}
+              </dd>
+            </div>
+            <div>
+              <dt className="text-sm font-medium text-gray-600 dark:text-gray-300">
+                {t("email")}
+              </dt>
+              <dd className="mt-1 break-all">
+                {user?.email || t("unavailable")}
+              </dd>
+            </div>
+          </dl>
+        </div>
+      </div>
+    </section>
   );
 }

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

@@ -1,66 +1,75 @@
-import { spawn } from "node:child_process";
-import { cp, mkdtemp, readFile, rm, writeFile } from "node:fs/promises";
+import { cp, mkdtemp, readFile, rm, stat, writeFile } from "node:fs/promises";
 import { tmpdir } from "node:os";
 import path from "node:path";
+import {
+  installArguments,
+  resolvePackageManager,
+  runPackageManager,
+} from "../../scripts/package-manager.ts";
 
 const root = process.cwd();
-const target = await mkdtemp(path.join(tmpdir(), "create-next-pro-template-"));
-const manager = process.env.CNP_PACKAGE_MANAGER ?? "bun";
+const target = await mkdtemp(
+  path.join(tmpdir(), "create-next-pro-template-consumer-"),
+);
+const manager = resolvePackageManager();
+const gitignoreSource = await stat(path.join(root, ".gitignore.template")).then(
+  () => ".gitignore.template",
+  () => ".gitignore",
+);
 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`)),
-    );
-  });
-}
+  [".env.example", ".env.example"],
+  [gitignoreSource, ".gitignore"],
+  [".prettierignore", ".prettierignore"],
+  ["README.md", "README.md"],
+  ["bun.lock", "bun.lock"],
+  ["eslint.config.mjs", "eslint.config.mjs"],
+  ["messages", "messages"],
+  ["next.config.ts", "next.config.ts"],
+  ["package.json", "package.json"],
+  ["playwright.config.ts", "playwright.config.ts"],
+  ["pnpm-workspace.yaml", "pnpm-workspace.yaml"],
+  ["postcss.config.mjs", "postcss.config.mjs"],
+  ["public", "public"],
+  ["scripts", "scripts"],
+  ["src", "src"],
+  ["tailwind.config.ts", "tailwind.config.ts"],
+  ["tests", "tests"],
+  ["tsconfig.json", "tsconfig.json"],
+  ["vitest.config.ts", "vitest.config.ts"],
+] as const;
 
 try {
-  for (const entry of entries) {
-    await cp(path.join(root, entry), path.join(target, entry), {
+  for (const [source, destination] of entries) {
+    await cp(path.join(root, source), path.join(target, destination), {
       recursive: true,
     });
   }
+
   if (manager !== "bun") {
     const packagePath = path.join(target, "package.json");
-    const manifest = JSON.parse(await readFile(packagePath, "utf8"));
+    const manifest = JSON.parse(await readFile(packagePath, "utf8")) as Record<
+      string,
+      unknown
+    >;
     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"]);
+
+  const environment = {
+    ...process.env,
+    AUTH_DISABLED: "true",
+    CI: "true",
+    CNP_PACKAGE_MANAGER: manager,
+  };
+  await runPackageManager(manager, installArguments(manager), {
+    cwd: target,
+    env: environment,
+  });
+  await runPackageManager(manager, ["run", "check"], {
+    cwd: target,
+    env: environment,
+  });
+  await stat(path.join(target, "next-env.d.ts"));
 } finally {
   await rm(target, { recursive: true, force: true });
 }

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

@@ -1,8 +1,8 @@
 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",
+  desktop: "artifacts/captures/phase-2-11-template-reconciliation-desktop.png",
+  mobile: "artifacts/captures/phase-2-11-template-reconciliation-mobile.png",
 };
 
 test("public template routes render in both locales", async ({
@@ -16,14 +16,57 @@ test("public template routes render in both locales", async ({
   await expect(page.getByRole("banner")).toBeVisible();
   const homeHeading = page
     .getByRole("main")
-    .getByRole("heading", { name: "Home" });
+    .getByRole("heading", { name: "Welcome to your website" });
   await expect(homeHeading).toBeVisible();
+  await expect(page.getByText("Start developing right now.")).toBeVisible();
+  await expect(
+    page.getByText("This project was created with create-next-pro-cli"),
+  ).toBeVisible();
+  await expect(page.getByRole("contentinfo")).toContainText(
+    "Empowered by Rising Corporation",
+  );
+  const readmeLink = page.getByRole("link", {
+    name: "Read the Doc",
+  });
+  await expect(readmeLink).toHaveAttribute(
+    "href",
+    "https://github.com/Rising-Corporation/create-next-pro-cli#readme",
+  );
+  const githubActions = page.getByRole("main");
+  for (const action of ["Star", "Watch"]) {
+    const actionLink = githubActions.getByRole("link", {
+      name: new RegExp(`^${action}`),
+    });
+    await expect(actionLink).toHaveAttribute(
+      "href",
+      "https://github.com/Rising-Corporation/create-next-pro-cli",
+    );
+    await expect(actionLink).toHaveAttribute("target", "_blank");
+    await expect(actionLink).toHaveAttribute("rel", "noreferrer");
+  }
   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");
+  await expect(
+    page.getByRole("heading", { name: "Bienvenue sur votre site" }),
+  ).toBeVisible();
+  await expect(
+    page.getByText("Commencez votre développement dès maintenant."),
+  ).toBeVisible();
+  await expect(
+    page.getByText("Ce projet est créé avec create-next-pro-cli"),
+  ).toBeVisible();
+  await expect(
+    page.getByRole("link", { name: "Lire la documentation" }),
+  ).toHaveAttribute(
+    "href",
+    "https://github.com/Rising-Corporation/create-next-pro-cli#readme",
+  );
+
   await page.goto("/fr/login");
   await expect(page.getByRole("heading", { name: /connexion/i })).toBeVisible();
   await expect(page.getByLabel("Choisir la langue")).toHaveValue("fr");
@@ -35,7 +78,7 @@ test("public template routes render in both locales", async ({
 
   const capturePath = captureByProject[testInfo.project.name];
   if (capturePath) {
-    await page.goto("/fr/login");
+    await page.goto("/fr");
     await page.mouse.move(0, 0);
     await page.screenshot({ path: capturePath, fullPage: true });
   }

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

@@ -1,5 +1,5 @@
 import { describe, expect, test } from "vitest";
-import { createContentSecurityPolicy } from "../../src/lib/security/csp";
+import { createContentSecurityPolicy } from "@/lib/security/csp";
 
 describe("Content Security Policy", () => {
   test("allows the stable inline scripts required by static Next.js pages", () => {

package/templates/Projects/default/tests/unit/github-repository.test.ts

@@ -0,0 +1,45 @@
+import { describe, expect, test } from "vitest";
+import {
+  getGitHubRepositoryStats,
+  parseGitHubRepositoryStats,
+} from "@/lib/github/repository";
+
+describe("GitHub repository statistics", () => {
+  test("maps stars and actual watchers from the repository response", () => {
+    expect(
+      parseGitHubRepositoryStats({
+        stargazers_count: 12,
+        watchers_count: 12,
+        subscribers_count: 4,
+      }),
+    ).toEqual({ stars: 12, watchers: 4 });
+  });
+
+  test.each([
+    null,
+    {},
+    { stargazers_count: -1, subscribers_count: 2 },
+    { stargazers_count: 1, subscribers_count: "2" },
+  ])("rejects invalid repository statistics", (value) => {
+    expect(parseGitHubRepositoryStats(value)).toEqual({
+      stars: null,
+      watchers: null,
+    });
+  });
+
+  test("falls back when GitHub returns an error response", async () => {
+    const stats = await getGitHubRepositoryStats(
+      async () => new Response(null, { status: 403 }),
+    );
+
+    expect(stats).toEqual({ stars: null, watchers: null });
+  });
+
+  test("falls back when the GitHub request fails", async () => {
+    const stats = await getGitHubRepositoryStats(async () => {
+      throw new Error("network unavailable");
+    });
+
+    expect(stats).toEqual({ stars: null, watchers: null });
+  });
+});

package/templates/Projects/default/tests/unit/package-manager.test.ts

@@ -0,0 +1,51 @@
+import { describe, expect, test } from "vitest";
+import {
+  installArguments,
+  packageManagerExecutable,
+  resolvePackageManager,
+} from "../../scripts/package-manager.ts";
+
+describe("package manager dispatch", () => {
+  test.each(["bun", "npm", "pnpm"] as const)(
+    "accepts the explicit %s override",
+    (manager) => {
+      expect(resolvePackageManager({ CNP_PACKAGE_MANAGER: manager })).toBe(
+        manager,
+      );
+    },
+  );
+
+  test.each([
+    ["bun/1.3.14 npm/? node/v24.13.0", "bun"],
+    ["npm/11.0.0 node/v24.13.0", "npm"],
+    ["pnpm/11.0.0 npm/? node/v24.13.0", "pnpm"],
+  ] as const)("detects %s", (userAgent, manager) => {
+    expect(resolvePackageManager({ npm_config_user_agent: userAgent })).toBe(
+      manager,
+    );
+  });
+
+  test("rejects unknown and missing managers", () => {
+    expect(() =>
+      resolvePackageManager({ CNP_PACKAGE_MANAGER: "yarn" }),
+    ).toThrow("Unsupported package manager");
+    expect(() => resolvePackageManager({})).toThrow(
+      "Unable to detect the package manager",
+    );
+  });
+
+  test("uses Windows command shims without a shell", () => {
+    expect(packageManagerExecutable("npm", "win32")).toBe("npm.cmd");
+    expect(packageManagerExecutable("pnpm", "win32")).toBe("pnpm.cmd");
+    expect(packageManagerExecutable("bun", "win32")).toBe("bun");
+  });
+
+  test("uses reproducible install arguments where supported", () => {
+    expect(installArguments("bun")).toEqual(["install", "--frozen-lockfile"]);
+    expect(installArguments("npm")).toEqual(["install"]);
+    expect(installArguments("pnpm")).toEqual([
+      "install",
+      "--no-frozen-lockfile",
+    ]);
+  });
+});

package/templates/Projects/default/tests/unit/template-baseline.test.ts

@@ -0,0 +1,52 @@
+import { readFile } from "node:fs/promises";
+import { fileURLToPath } from "node:url";
+import path from "node:path";
+import { describe, expect, test } from "vitest";
+
+const root = fileURLToPath(new URL("../../", import.meta.url));
+
+async function source(relativePath: string) {
+  return readFile(path.join(root, relativePath), "utf8");
+}
+
+describe("updated template baseline", () => {
+  test.each([
+    ["src/lib/github/repository.ts", "getGitHubRepositoryStats"],
+    ["src/ui/_home/GitHubActions.tsx", "GITHUB_REPOSITORY_URL"],
+    ["src/ui/_home/page-shell.tsx", "Empowered by Rising Corporation"],
+    ["src/ui/_global/UserNav.tsx", "ThemeToggle"],
+    ["next.config.ts", "lh3.googleusercontent.com"],
+    ["tests/e2e/template-remediation.playwright.ts", "Read the Doc"],
+  ])("preserves %s", async (relativePath, marker) => {
+    await expect(source(relativePath)).resolves.toContain(marker);
+  });
+
+  test.each(["en", "fr"])(
+    "preserves the updated %s home messages",
+    async (locale) => {
+      const messages = JSON.parse(
+        await source(`messages/${locale}/_home.json`),
+      ) as Record<string, unknown>;
+      expect(messages).toHaveProperty("readme");
+      expect(messages).toHaveProperty("github");
+    },
+  );
+
+  test("keeps a complete canonical authentication example without exposing values", async () => {
+    const variables = new Map<string, string>();
+    for (const line of (await source(".env.example")).split(/\r?\n/)) {
+      if (!line || /^\s*#/.test(line)) continue;
+      const match = line.match(/^\s*([A-Z0-9_]+)\s*=\s*(.*)$/);
+      if (!match) continue;
+      variables.set(match[1], match[2].trim().replace(/\s+#.*$/, ""));
+    }
+
+    const configuredAuthValues = [
+      variables.get("AUTH_SECRET") ?? variables.get("NEXTAUTH_SECRET"),
+      variables.get("AUTH_GOOGLE_ID") ?? variables.get("GOOGLE_CLIENT_ID"),
+      variables.get("AUTH_GOOGLE_SECRET") ??
+        variables.get("GOOGLE_CLIENT_SECRET"),
+    ].filter(Boolean);
+    expect(configuredAuthValues).toHaveLength(3);
+  });
+});

package/templates/Projects/default/tests/unit/user-nav.test.tsx

@@ -0,0 +1,52 @@
+import { describe, expect, test, vi } from "vitest";
+import { NextIntlClientProvider } from "next-intl";
+import React from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import en from "../../messages/en";
+import fr from "../../messages/fr";
+import UserNav from "../../src/ui/_global/UserNav";
+
+vi.mock("@/lib/i18n/navigation", async () => {
+  const { useLocale } = await import("next-intl");
+  return {
+    Link: ({ href, children, ...props }: React.ComponentProps<"a">) => {
+      const locale = useLocale();
+      return React.createElement(
+        "a",
+        { href: `/${locale}${href}`, ...props },
+        children,
+      );
+    },
+  };
+});
+
+const renderUserNav = (locale: "en" | "fr", messages: typeof en | typeof fr) =>
+  renderToStaticMarkup(
+    <NextIntlClientProvider
+      locale={locale}
+      messages={messages}
+      onError={() => undefined}
+    >
+      <UserNav />
+    </NextIntlClientProvider>,
+  );
+
+describe("UserNav", () => {
+  test.each([
+    ["en", en, "Toggle theme", "Logout"],
+    ["fr", fr, "Changer de thème", "Déconnexion"],
+  ] as const)(
+    "renders one localized theme control and keeps the %s navigation actions",
+    (locale, messages, themeLabel, logoutLabel) => {
+      const html = renderUserNav(locale, messages);
+
+      expect(
+        html.match(new RegExp(`aria-label="${themeLabel}"`, "g")),
+      ).toHaveLength(1);
+      expect(html).toContain(`href="/${locale}/dashboard"`);
+      expect(html).toContain(`href="/${locale}/settings"`);
+      expect(html).toContain(`href="/${locale}/userInfo"`);
+      expect(html).toContain(logoutLabel);
+    },
+  );
+});

package/templates/Projects/default/tsconfig.json

@@ -9,11 +9,12 @@
     "esModuleInterop": true,
     "module": "esnext",
     "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "react-jsx",
     "incremental": true,
-    "types": ["node", "vitest/globals"],
+    "types": ["node", "vitest/globals", "react-dom", "react"],
     "plugins": [
       {
         "name": "next"

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

@@ -0,0 +1,10 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  resolve: {
+    tsconfigPaths: true,
+  },
+  test: {
+    include: ["tests/unit/**/*.test.{ts,tsx}"],
+  },
+});