create-next-pro-cli 0.1.14 → 0.1.16

package/templates/Projects/default/src/ui/_global/GlobalHeader.tsx

@@ -0,0 +1,55 @@
+"use client";
+import Image from "next/image";
+import UserNav from "@/ui/_global/UserNav";
+import LocaleSwitcher from "@/ui/_global/LocaleSwitcher";
+import PublicNav from "@/ui/_global/PublicNav";
+import { useEffect, useState } from "react";
+import { Link } from "@/lib/i18n/navigation";
+import { isConnected } from "@/lib/auth/isConnected";
+
+type GlobalHeaderProps = {
+  isConnectedInitial: boolean;
+};
+
+export default function GlobalHeader({
+  isConnectedInitial,
+}: GlobalHeaderProps) {
+  const [isConnectedState, setIsConnectedState] = useState(isConnectedInitial);
+
+  // Vérification dynamique côté client (exemple via /api/me)
+  useEffect(() => {
+    async function checkConnection() {
+      setIsConnectedState(await isConnected());
+    }
+    checkConnection();
+    // Optionnel : timer pour rafraîchir périodiquement
+    // const interval = setInterval(checkConnection, 60000);
+    // return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <header className="fixed top-0 w-full z-50 glass-effect border-b">
+      <div className="mx-auto flex h-16 max-w-6xl items-center justify-between px-6">
+        <Link href="/" className="">
+          <div className="flex items-center h-16">
+            <Image
+              src="/cnp-logo.svg"
+              alt="Logo"
+              width={63}
+              height={63}
+              className="mr-2"
+            />
+            <h1 className="text-lg font-semibold tracking-tight select-none">
+              Create Next Pro
+            </h1>
+          </div>
+        </Link>
+
+        {isConnectedState ? <UserNav /> : <PublicNav />}
+        <div className="flex items-center h-16">
+          <LocaleSwitcher />
+        </div>
+      </div>
+    </header>
+  );
+}

package/templates/Projects/default/src/ui/_global/GlobalMain.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+export default function GlobalMain({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <main className="mt-0 min-h-screen bg-neutral-50 font-sans text-gray-900 flex flex-col">
+      <div className="flex-1 flex flex-col justify-center items-stretch mx-auto w-full  px-6 self-stretch">
+        {children}
+      </div>
+    </main>
+  );
+}

package/templates/Projects/default/src/ui/_global/Loading.tsx

@@ -0,0 +1,13 @@
+"use client"; // DO NOT FORGET , this is a client component.
+import { useTranslations } from "next-intl";
+
+const Loading = () => {
+  const t = useTranslations("_global_ui");
+  return (
+    <div className="rounded border bg-white p-6 shadow-sm">
+      <h2 className="text-lg font-semibold mb-2">{t("Loading.title")}</h2>
+      <p className="text-gray-600">{t("Loading.description")}</p>
+    </div>
+  );
+};
+export default Loading;

package/templates/Projects/default/src/ui/_global/LocaleSwitcher.tsx

@@ -0,0 +1,38 @@
+"use client"; // DO NOT FORGET , this is a client component.
+import { useRouter, usePathname } from "next/navigation";
+import { useParams } from "next/navigation";
+
+const locales = [
+  { code: "fr", label: "Français" },
+  { code: "en", label: "English" },
+];
+
+export default function LocaleSwitcher() {
+  const router = useRouter();
+  const pathname = usePathname();
+  const params = useParams();
+  const currentLocale = params?.locale || "fr";
+
+  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const newLocale = e.target.value;
+    if (newLocale === currentLocale) return;
+    // Replace locale in pathname
+    const newPath = pathname.replace(`/${currentLocale}`, `/${newLocale}`);
+    router.push(newPath);
+  };
+
+  return (
+    <select
+      className="ml-2 ring rounded px-2 py-1 text-sm  dark:bg-gray-800 dark:text-gray-200"
+      value={currentLocale}
+      onChange={handleChange}
+      aria-label="Select language"
+    >
+      {locales.map((l) => (
+        <option key={l.code} value={l.code}>
+          {l.label}
+        </option>
+      ))}
+    </select>
+  );
+}

package/templates/Projects/default/src/ui/_global/PublicNav.tsx

@@ -0,0 +1,91 @@
+"use client"; // DO NOT FORGET , this is a client component.
+import { Link } from "@/lib/i18n/navigation";
+import { useTranslations } from "next-intl";
+import { useEffect, useState, useRef } from "react";
+import { Button } from "@/ui/_global/Button";
+import ThemeToggle from "@/ui/_global/ThemeToggle";
+import { Menu, X } from "lucide-react";
+
+const navLinks = [
+  { href: "/", labelKey: "public_nav.links.home" },
+  { href: "/Login", labelKey: "public_nav.links.login" },
+  { href: "/Register", labelKey: "public_nav.links.register" },
+];
+
+const PublicNav = () => {
+  const t = useTranslations("_global_ui");
+  const [open, setOpen] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+        setOpen(false);
+      }
+    };
+
+    if (open) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [open]);
+
+  return (
+    <nav aria-label="Public navigation">
+      <div className="flex justify-between items-center h-16">
+        <ul className="flex gap-2 md:gap-4 hidden md:flex items-center space-x-4">
+          {navLinks.map((link) => (
+            <li key={link.href}>
+              <Link
+                href={link.href}
+                className="inline-block rounded px-3 py-1.5 text-sm font-medium dark:text-gray-400 light:text-gray-700 hover:text-blue-600 hover:bg-blue-50 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+              >
+                {t(link.labelKey)}
+              </Link>
+            </li>
+          ))}
+        </ul>
+        <div className="flex items-center space-x-4">
+          <ThemeToggle />
+        </div>
+        <div className="md:hidden flex items-center">
+          <Button
+            variant="default"
+            onClick={() => setOpen((o) => !o)}
+            className="focus:outline-none"
+            aria-label="Menu"
+          >
+            {open ? <X className="h-7 w-7" /> : <Menu className="h-7 w-7" />}
+          </Button>
+        </div>
+      </div>
+
+      {open && (
+        <div className="fixed inset-0 z-40 md:hidden">
+          <div className="absolute inset-0 bg-black/40" aria-hidden="true" />
+          <div
+            ref={menuRef}
+            className="mobil-menu absolute top-4 left-1/2 -translate-x-1/2 flex flex-col gap-2  rounded-xl p-4 shadow-lg animate-fade-in z-50 w-11/12 max-w-xs"
+          >
+            <Link href="/Login" onClick={() => setOpen(false)}>
+              <Button
+                variant="ghost"
+                className="w-full text-white justify-center hover:text-blue-300  cursor-pointer glass-effect"
+              >
+                {t("public_nav.links.login")}
+              </Button>
+            </Link>
+            <Link href="/Register" onClick={() => setOpen(false)}>
+              <Button className="w-full bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 justify-center cursor-pointer">
+                {t("public_nav.links.register")}
+              </Button>
+            </Link>
+          </div>
+        </div>
+      )}
+    </nav>
+  );
+};
+export default PublicNav;

package/templates/Projects/default/src/ui/_global/ThemeToggle.tsx

@@ -0,0 +1,53 @@
+"use client";
+import { useEffect, useState } from "react";
+import { Moon, Sun } from "lucide-react";
+import { Button } from "./Button";
+
+export default function ThemeToggle() {
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    // Initial state from html class
+    setIsDark(document.documentElement.classList.contains("dark"));
+  }, []);
+
+  const toggleTheme = () => {
+    const html = document.documentElement;
+    if (html.classList.contains("dark")) {
+      html.classList.add("light");
+      html.classList.remove("dark");
+      setIsDark(false);
+      localStorage.setItem("theme", "light");
+    } else {
+      html.classList.add("dark");
+      html.classList.remove("light");
+      setIsDark(true);
+      localStorage.setItem("theme", "dark");
+    }
+  };
+
+  useEffect(() => {
+    // On mount, set theme from localStorage
+    const theme = localStorage.getItem("theme");
+    if (theme === "dark") {
+      document.documentElement.classList.add("dark");
+      document.documentElement.classList.remove("light");
+      setIsDark(true);
+    } else if (theme === "light") {
+      document.documentElement.classList.add("light");
+      document.documentElement.classList.remove("dark");
+      setIsDark(false);
+    }
+  }, []);
+
+  return (
+    <Button
+      onClick={toggleTheme}
+      className="ml-2 p-2 rounded-full hover:bg-white/10 transition-colors  "
+      aria-label="Toggle theme"
+      type="button"
+    >
+      {isDark ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
+    </Button>
+  );
+}

package/templates/Projects/default/src/ui/_global/UserNav.tsx

@@ -0,0 +1,35 @@
+"use client"; // DO NOT FORGET , this is a client component.
+import { Link } from "@/lib/i18n/navigation";
+import { useTranslations } from "next-intl";
+import LogoutButton from "../Dashboard/LogoutButton";
+
+const navLinks = [
+  { href: "/Dashboard", labelKey: "user_nav.links.dashboard" },
+  { href: "/Settings", labelKey: "user_nav.links.settings" },
+  { href: "/UserInfo", labelKey: "user_nav.links.user_info" },
+];
+
+const UserNav = () => {
+  const t = useTranslations("_global_ui");
+  return (
+    <nav aria-label="User navigation">
+      <ul className="flex gap-2 md:gap-4 h-16 items-center">
+        {navLinks.map((link) => (
+          <li key={link.href}>
+            <Link
+              href={link.href}
+              className="inline-block rounded px-3 py-1.5 text-sm font-medium text-gray-700 hover:text-blue-600 hover:bg-blue-50 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+            >
+              {t(link.labelKey)}
+            </Link>
+          </li>
+        ))}
+        <li>
+          <LogoutButton />
+        </li>
+      </ul>
+    </nav>
+  );
+};
+
+export default UserNav;

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

@@ -0,0 +1,27 @@
+// src/ui/_home/page-ui.tsx
+"use client";
+
+import { useTranslations } from "next-intl";
+
+export default function HomePageUI() {
+  const t = useTranslations("_home");
+
+  return (
+    <>
+      <section className="pt-32 pb-20 px-4 sm:px-6 lg:px-8 hero-pattern">
+        <div className="max-w-7xl mx-auto">
+          <div className="grid lg:grid-cols-2 gap-12 items-center">
+            <h1 className="text-5xl lg:text-6xl font-bold mb-6 leading-tight">
+              {t.rich("title", {
+                span: (chunks) => (
+                  <span className="gradient-text">{chunks}</span>
+                ),
+              })}
+            </h1>
+            <p className="text-lg text-gray-400">{t("description")}</p>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}

package/.github/workflows/ci.yml

@@ -1,38 +0,0 @@
-name: CI
-
-on:
-  push:
-    branches: ["master"]
-  pull_request:
-
-jobs:
-  test-build:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: oven-sh/setup-bun@v1
-      - run: bun install
-      - run: bun test
-      - run: bun run build
-  publish:
-    needs: test-build
-    if: github.ref == 'refs/heads/master' && github.event_name == 'push'
-    runs-on: ubuntu-latest
-    environment:
-      name: ENV
-    steps:
-      - uses: actions/checkout@v4
-      - uses: oven-sh/setup-bun@v2
-        with:
-          bun-version: latest
-      - name: Configure Git
-        run: |
-          git config user.name "GitHub Actions"
-          git config user.email "actions@github.com"
-      - run: bun install
-      - run: bun run version-patch
-      - run: bun run build
-      - name: Set up .npmrc
-        run: echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > ~/.npmrc
-      - name: Publish package
-        run: npm publish

package/bin.ts

@@ -1,3 +0,0 @@
-#!/usr/bin/env bun
-import { main } from "./src/index";
-main();

package/commitlint.config.cjs

@@ -1,12 +0,0 @@
-/** @type {import('@commitlint/types').UserConfig} */
-module.exports = {
-  extends: ["@commitlint/config-conventional"],
-  rules: {
-    // subject free (no Upper/Start/Pascal)
-    "subject-case": [
-      2,
-      "never",
-      ["sentence-case", "start-case", "pascal-case", "upper-case"],
-    ],
-  },
-};

package/install.sh

@@ -1,74 +0,0 @@
-#!/bin/bash
-
-# Installation script for create-next-pro
-
-# Detect runtimes
-bun_path=$(command -v bun)
-deno_path=$(command -v deno)
-node_path=$(command -v node)
-
-if [ -n "$bun_path" ]; then
-    echo "Bun detected at $bun_path. Using Bun shebang."
-    sed -i '1s|.*|#!/usr/bin/env bun|' dist/bin.js
-elif [ -n "$deno_path" ]; then
-    echo "Deno detected at $deno_path. Using Deno shebang."
-    sed -i '1s|.*|#!/usr/bin/env deno|' dist/bin.js
-elif [ -n "$node_path" ]; then
-    echo "Node.js detected at $node_path. Using Node shebang."
-    sed -i '1s|.*|#!/usr/bin/env node|' dist/bin.js
-else
-    echo "No compatible runtime (Bun, Deno, Node.js) found."
-    read -p "Do you want to install Bun? [Y/n] " yn
-    case $yn in
-        [Nn]*)
-            echo "Installation cancelled. Do you want to delete the parent folder? [Y/n] "
-            read delyn
-            case $delyn in
-                [Nn]*) echo "Folder kept."; exit 1;;
-                *)
-                    parent_dir="$(dirname $(pwd))"
-                    echo "Deleting folder $parent_dir..."
-                    rm -rf "$parent_dir"
-                    echo "Folder deleted."
-                    exit 1
-                ;;
-            esac
-            ;;
-        *)
-            echo "Please install Bun, node or Deno!"
-            echo "Installation instructions:"
-            echo "Bun: https://bun.com/"
-            echo "Node.js: https://nodejs.org/"
-            echo "Deno: https://deno.land/"
-            exit 1
-            ;;
-    esac
-fi
-
-COMPLETION_SCRIPT="$(pwd)/create-next-pro-completion.sh"
-
-# Choose shell for autocompletion
-read -p "Which shell do you use? [1] zsh, [2] bash (default: bash): " shell_choice
-case $shell_choice in
-    1|zsh|Zsh)
-        RC_FILE="$HOME/.zshrc"
-        SHELL_NAME="zsh"
-        ;;
-    *)
-        RC_FILE="$HOME/.bashrc"
-        SHELL_NAME="bash"
-        ;;
-esac
-
-read -p "Do you want to add create-next-pro autocompletion to your $SHELL_NAME rc file? [Y/n] " yn
-case $yn in
-    [Nn]*) echo "ℹ️ Autocompletion not added"; exit;;
-    *)
-        if ! grep -q "$COMPLETION_SCRIPT" "$RC_FILE"; then
-            echo "source $COMPLETION_SCRIPT" >> "$RC_FILE"
-            echo "✅ Autocompletion script added to $RC_FILE"
-        else
-            echo "ℹ️ Script already present in $RC_FILE"
-        fi
-    ;;
-esac

package/tsconfig.json

@@ -1,27 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2017",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true,
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
-}