create-next-pro-cli 0.1.14 → 0.1.16

package/templates/Projects/default/src/app/styles/globals.css

@@ -0,0 +1,305 @@
+@import "tailwindcss";
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap"); */
+
+/* Dark mode : fond noir, texte blanc */
+.dark {
+  --background: 0 0% 0%; /* noir */
+  --foreground: 0 0% 100%; /* blanc */
+  --card: 0 0% 0%;
+  --card-foreground: 0 0% 100%;
+  --popover: 0 0% 0%;
+  --popover-foreground: 0 0% 100%;
+  --primary: 0 0% 100%; /* blanc */
+  --primary-foreground: 0 0% 0%; /* noir */
+  --secondary: 0 0% 20%; /* gris foncé */
+  --secondary-foreground: 0 0% 100%;
+  --muted: 0 0% 20%;
+  --muted-foreground: 0 0% 80%;
+  --accent: 0 0% 20%;
+  --accent-foreground: 0 0% 100%;
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 0 0% 20%;
+  --input: 0 0% 20%;
+  --ring: 0 0% 100%;
+  --radius: 0.75rem;
+}
+
+/* Light mode : fond blanc, texte noir */
+.light {
+  --background: 0 0% 100%; /* blanc */
+  --foreground: 0 0% 0%; /* noir */
+  --card: 0 0% 100%;
+  --card-foreground: 0 0% 0%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 0 0% 0%;
+  --primary: 0 0% 0%; /* noir */
+  --primary-foreground: 0 0% 100%; /* blanc */
+  --secondary: 0 0% 95%; /* gris très clair */
+  --secondary-foreground: 0 0% 0%;
+  --muted: 0 0% 95%;
+  --muted-foreground: 0 0% 20%;
+  --accent: 0 0% 95%;
+  --accent-foreground: 0 0% 0%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 0 0% 80%;
+  --input: 0 0% 80%;
+  --ring: 0 0% 0%;
+}
+
+* {
+  border-color: hsl(var(--border));
+}
+
+body {
+  font-family: "Inter", sans-serif;
+  background: hsl(var(--background));
+  color: hsl(var(--foreground));
+  line-height: 1.6;
+  transition: background 0.3s, color 0.3s;
+}
+
+.gradient-text {
+  background: linear-gradient(135deg, #fff 0%, #bbb 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+.light .gradient-text {
+  background: linear-gradient(135deg, #000 0%, #888 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.dark .glass-effect {
+  background: rgba(0, 0, 0, 0.8);
+  backdrop-filter: blur(10px);
+  border: 1px solid #444;
+}
+.light .glass-effect {
+  background: rgba(0, 0, 0, 0.08);
+  border: 1px solid #ccc;
+}
+
+.chat-bubble-user {
+  background: linear-gradient(135deg, #fff 0%, #bbb 100%);
+  border-radius: 18px 18px 4px 18px;
+  color: #000;
+}
+.light .chat-bubble-user {
+  background: linear-gradient(135deg, #000 0%, #888 100%);
+  color: #fff;
+}
+
+.chat-bubble-ai {
+  background: rgba(255, 255, 255, 0.12);
+  border-radius: 18px 18px 18px 4px;
+  border: 1px solid #444;
+  color: #000;
+}
+.light .chat-bubble-ai {
+  background: rgba(0, 0, 0, 0.12);
+  border: 1px solid #ccc;
+  color: #fff;
+}
+
+.typing-indicator {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: #fff;
+  animation: typing 1.4s infinite ease-in-out;
+}
+.light .typing-indicator {
+  background-color: #000;
+}
+
+.typing-indicator:nth-child(1) {
+  animation-delay: -0.32s;
+}
+.typing-indicator:nth-child(2) {
+  animation-delay: -0.16s;
+}
+
+@keyframes typing {
+  0%,
+  80%,
+  100% {
+    transform: scale(0);
+    opacity: 0.5;
+  }
+  40% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.hero-pattern {
+  background-image: radial-gradient(
+      circle at 25% 25%,
+      rgba(255, 255, 255, 0.18) 0%,
+      transparent 50%
+    ),
+    radial-gradient(
+      circle at 75% 75%,
+      rgba(180, 180, 180, 0.18) 0%,
+      transparent 50%
+    );
+}
+.light .hero-pattern {
+  background-image: radial-gradient(
+      circle at 25% 25%,
+      rgba(0, 0, 0, 0.08) 0%,
+      transparent 50%
+    ),
+    radial-gradient(
+      circle at 75% 75%,
+      rgba(120, 120, 120, 0.08) 0%,
+      transparent 50%
+    );
+}
+
+.light .mobil-menu {
+  background: rgba(255, 255, 255, 0.9);
+}
+
+.dark .mobil-menu {
+  background: rgba(0, 0, 0, 0.9);
+}
+
+.light .text-white,
+.light .text-gray-300,
+.light .text-gray-400 {
+  color: black;
+}
+
+.light button.text-white:hover,
+.light a:hover {
+  color: rgb(142, 197, 255);
+}
+.gsi-material-button {
+  user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  appearance: none;
+  -webkit-appearance: none;
+  /* background-color: linear-gradient(135deg, #fff 0%, #a78bfa 100%);
+  backdrop-filter: blur(8px); */
+  /* background-color: #131314; */
+  /* background-image: none; */
+  /* background: linear-gradient(135deg, #ffffff 0%, #a78bfa 100%); */
+  backdrop-filter: blur(8px);
+  border: 1px solid #747775;
+  border-radius: 4px;
+  box-sizing: border-box;
+  color: #e3e3e3;
+  /* color: #000000; */
+  cursor: pointer;
+  font-family: "Roboto", arial, sans-serif;
+  font-size: 14px;
+  height: 40px;
+  letter-spacing: 0.25px;
+  outline: none;
+  overflow: hidden;
+  padding: 0 12px;
+  position: relative;
+  text-align: center;
+  transition: background-color 0.218s, border-color 0.218s, box-shadow 0.218s;
+  vertical-align: middle;
+  white-space: nowrap;
+  width: auto;
+  max-width: 400px;
+  min-width: min-content;
+  border-color: #8e918f;
+}
+.light .gsi-material-button {
+  color: #222;
+  background: #fff;
+  border-color: #d1d5db;
+}
+
+.gsi-material-button .gsi-material-button-icon {
+  height: 20px;
+  margin-right: 12px;
+  min-width: 20px;
+  width: 20px;
+}
+
+.gsi-material-button .gsi-material-button-content-wrapper {
+  -webkit-align-items: center;
+  align-items: center;
+  display: flex;
+  -webkit-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  height: 100%;
+  justify-content: space-between;
+  position: relative;
+  width: 100%;
+}
+
+.gsi-material-button .gsi-material-button-contents {
+  -webkit-flex-grow: 1;
+  flex-grow: 1;
+  font-family: "Roboto", arial, sans-serif;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: top;
+}
+
+.gsi-material-button .gsi-material-button-state {
+  -webkit-transition: opacity 0.218s;
+  transition: opacity 0.218s;
+  bottom: 0;
+  left: 0;
+  opacity: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.gsi-material-button:disabled {
+  cursor: default;
+  background-color: #13131461;
+  border-color: #8e918f1f;
+}
+
+.gsi-material-button:disabled .gsi-material-button-state {
+  background-color: #e3e3e31f;
+}
+
+.gsi-material-button:disabled .gsi-material-button-contents {
+  opacity: 38%;
+}
+
+.gsi-material-button:disabled .gsi-material-button-icon {
+  opacity: 38%;
+}
+
+.gsi-material-button:not(:disabled):active .gsi-material-button-state,
+.gsi-material-button:not(:disabled):focus .gsi-material-button-state {
+  background-color: white;
+  opacity: 12%;
+}
+
+.gsi-material-button:not(:disabled):hover {
+  -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3),
+    0 1px 3px 1px rgba(60, 64, 67, 0.15);
+  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3),
+    0 1px 3px 1px rgba(60, 64, 67, 0.15);
+}
+
+.gsi-material-button:not(:disabled):hover .gsi-material-button-state {
+  background-color: white;
+  opacity: 8%;
+}

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

@@ -0,0 +1,4 @@
+export const port = process.env.PORT || 3000;
+export const host = process.env.PROJECT_PRODUCTION_URL
+  ? `https://${process.env.PROJECT_PRODUCTION_URL}`
+  : `http://localhost:${port}`;

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

@@ -0,0 +1,11 @@
+// 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");
+}

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

@@ -0,0 +1,18 @@
+"use server";
+// src/lib/auth/isConnected.ts
+import { cookies } from "next/headers";
+import { verify } from "jsonwebtoken";
+
+export async function isConnected(): Promise<boolean> {
+  const cookieStore = await cookies();
+  const accessToken = cookieStore.get("access_token")?.value;
+  if (accessToken) {
+    try {
+      verify(accessToken, process.env.APP_JWT_SECRET!);
+      return true;
+    } catch {
+      return false;
+    }
+  }
+  return false;
+}

package/templates/Projects/default/src/lib/i18n/navigation.ts

@@ -0,0 +1,19 @@
+// lib/i18n/navigation.ts
+import { createNavigation } from "next-intl/navigation";
+import { routing } from "./routing";
+
+// Lightweight wrappers around Next.js' navigation
+// APIs that consider the routing configuration
+export const { Link, redirect, usePathname, useRouter, getPathname } =
+  createNavigation(routing);
+// This file sets up navigation for internationalization (i18n) in a Next.js application
+// It uses the createLocalizedPathnamesNavigation function from next-intl/navigation
+// to create localized links and navigation functions
+// The locales and defaultLocale are imported from the routing module
+// This allows the application to support multiple languages, such as English and French
+// The Link component can be used to create links that respect the current locale
+// The redirect function can be used to redirect users to the appropriate locale
+// The usePathname and useRouter hooks can be used to access the current pathname and router
+// This setup is essential for providing a seamless navigation experience in a multilingual application
+// Make sure to import this module in your application to enable i18n navigation
+// You can also customize the Link component to add additional props or styles

package/templates/Projects/default/src/lib/i18n/request.ts

@@ -0,0 +1,31 @@
+// lib/i18n/request.ts
+import { getRequestConfig } from "next-intl/server";
+import { hasLocale } from "next-intl";
+import { routing } from "./routing";
+
+export default getRequestConfig(async ({ requestLocale }) => {
+  //console.log("Requesting locale... :", requestLocale);
+  // Typically corresponds to the `[locale]` segment
+  //console.log("Routing :", routing);
+  const requested = await requestLocale;
+  //console.log(`Requested locale: "${requested}"`);
+  const locale = hasLocale(routing.locales, requested)
+    ? requested
+    : routing.defaultLocale;
+
+  //console.log(`Locale requested: "${locale}"`);
+
+  return {
+    locale,
+    messages: (await import(`@/../messages/${locale}.ts`)).default,
+  };
+});
+
+// This file is used to configure internationalization (i18n) for the Next.js application
+// It imports the getRequestConfig function from next-intl/server to set up locale-specific messages
+// The messages are loaded dynamically based on the requested locale
+// The locales and defaultLocale are imported from the routing module
+// This allows the application to support multiple languages, such as English and French
+// The messages are expected to be in JSON format and located in the messages directory
+// This setup is essential for providing localized content to users based on their language preferences
+// Make sure to create the necessary message files for each locale in the specified directory

package/templates/Projects/default/src/lib/i18n/routing.ts

@@ -0,0 +1,20 @@
+// lib/i18n/routing.ts
+import { defineRouting } from "next-intl/routing";
+
+export const routing = defineRouting({
+  // A list of all locales that are supported
+  locales: ["en", "fr"],
+  localeDetection: true,
+  localeCookie: true,
+
+  // Used when no locale matches
+  defaultLocale: "en",
+});
+// This file defines the routing configuration for internationalization (i18n) in a Next.js application
+// It uses the defineRouting function from next-intl/routing to set up the locales and default locale
+// The locales array specifies the supported languages, such as English and German
+// The defaultLocale is set to English, which will be used when no specific locale is requested
+// The pathnames object maps the root path ("/") to itself and provides a localized version
+// for the "/pathnames" route in German, which is mapped to "/pfadnamen"
+// This setup allows the application to handle different languages and provide localized content
+// Make sure to import this routing configuration in your application to enable i18n routing

package/templates/Projects/default/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: unknown[]) {
+  return twMerge(clsx(inputs));
+}

package/templates/Projects/default/src/ui/Dashboard/LogoutButton.tsx

@@ -0,0 +1,27 @@
+// src/ui/Dashboard/LogoutButton.tsx
+"use client"; // DO NOT FORGET , this is a client component.
+import { useTranslations } from "next-intl";
+import { Button } from "@/ui/_global/Button";
+import { LogOut } from "lucide-react";
+import { disconnect } from "@/lib/auth/disconnect";
+
+const LogoutButton = () => {
+  const t = useTranslations("Dashboard");
+  const handleLogout = () => {
+    disconnect().then(() => {
+      window.location.href = "/";
+    });
+  };
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      onClick={handleLogout}
+      className="text-gray-400 hover:text-black  glass-effect"
+    >
+      <LogOut className="h-4 w-4 sm:mr-2" />
+      <span className="hidden sm:inline">{t("logout")}</span>
+    </Button>
+  );
+};
+export default LogoutButton;

package/templates/Projects/default/src/ui/Dashboard/StatsCard.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+export default function StatsCard({ t }: { t: (key: string) => string }) {
+  return (
+    <div className="rounded border bg-white p-6 shadow-sm">
+      <h2 className="text-lg font-semibold mb-2">Statistiques</h2>
+      <ul className="text-sm text-gray-600 space-y-1">
+        <li>• {t("widgets.stats.views")}: 123</li>
+        <li>• {t("widgets.stats.likes")}: 45</li>
+        <li>• {t("widgets.stats.comments")}: 7</li>
+      </ul>
+    </div>
+  );
+}

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

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

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

@@ -0,0 +1,23 @@
+// src/ui/Dashboard/page-ui.tsx
+"use client";
+import { useTranslations } from "next-intl";
+import BackButton from "@/ui/_global/BackButton";
+import WelcomeCard from "@/ui/Dashboard/WelcomeCard";
+import StatsCard from "@/ui/Dashboard/StatsCard";
+
+export default function Dashboard() {
+  const t = useTranslations("Dashboard");
+  return (
+    <>
+      <div className="flex items-center justify-between mb-6">
+        <h1 className="text-2xl font-bold">{t("title")}</h1>
+        <BackButton />
+      </div>
+      <p className="text-muted mb-8">{t("description")}</p>
+      <section className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <WelcomeCard t={t} />
+        <StatsCard t={t} />
+      </section>
+    </>
+  );
+}

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

@@ -0,0 +1,22 @@
+// src/ui/Login/page-ui.tsx
+"use client";
+
+import { useTranslations } from "next-intl";
+import { signIn } from "next-auth/react";
+
+export default function LoginPageUI() {
+  const t = useTranslations("Login");
+
+  return (
+    <section className="py-8 px-4 max-w-3xl mx-auto">
+      <h1 className="text-2xl font-bold">{t("title")}</h1>
+      <p className="text-muted mt-2">{t("description")}</p>
+      <button
+        onClick={() => signIn("google")}
+        className="mt-6 w-full py-2 px-4 rounded bg-blue-600 text-white font-semibold hover:bg-blue-700 transition"
+      >
+        {t("login_with_google")}
+      </button>
+    </section>
+  );
+}

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

@@ -0,0 +1,26 @@
+// src/ui/Register/page-ui.tsx
+"use client";
+
+import { useTranslations } from "next-intl";
+import { signIn } from "next-auth/react";
+import BackButton from "@/ui/_global/BackButton";
+
+export default function RegisterPageUI() {
+  const t = useTranslations("Register");
+
+  return (
+    <section className="py-8 px-4 max-w-md mx-auto">
+      <div className="flex items-center justify-between mb-6">
+        <h1 className="text-2xl font-bold">{t("title")}</h1>
+        <BackButton />
+      </div>
+      <p className="text-muted mb-6">{t("description")}</p>
+      <button
+        onClick={() => signIn()}
+        className="w-full py-2 px-4 rounded bg-blue-600 text-white font-semibold hover:bg-blue-700 transition"
+      >
+        {t("register_with_google")}
+      </button>
+    </section>
+  );
+}

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

@@ -0,0 +1,17 @@
+// src/ui/Settings/page-ui.tsx
+"use client";
+
+import { useTranslations } from "next-intl";
+
+export default function SettingsPageUI() {
+  const t = useTranslations("Settings");
+
+  return (
+    <>
+      <section className="py-8 px-4 max-w-3xl mx-auto">
+        <h1 className="text-2xl font-bold">{t("title")}</h1>
+        <p className="text-muted mt-2">{t("description")}</p>
+      </section>
+    </>
+  );
+}

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

@@ -0,0 +1,17 @@
+// src/ui/UserInfo/page-ui.tsx
+"use client";
+
+import { useTranslations } from "next-intl";
+
+export default function UserInfoPageUI() {
+  const t = useTranslations("UserInfo");
+
+  return (
+    <>
+      <section className="py-8 px-4 max-w-3xl mx-auto">
+        <h1 className="text-2xl font-bold">{t("title")}</h1>
+        <p className="text-muted mt-2">{t("description")}</p>
+      </section>
+    </>
+  );
+}

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

@@ -0,0 +1,17 @@
+"use client"; // DO NOT FORGET , this is a client component.
+import { useRouter } from "next/navigation";
+import { StepBackIcon } from "lucide-react";
+import { Button } from "./Button";
+
+export default function BackButton({ className = "" }: { className?: string }) {
+  const router = useRouter();
+  return (
+    <Button
+      type="button"
+      onClick={() => router.back()}
+      className={`inline-flex items-center gap-2 px-3 py-1.5 rounded border border-gray-300 bg-white text-gray-700 hover:bg-gray-100 transition ${className}`}
+    >
+      <StepBackIcon className="h-4 w-4" /> Retour
+    </Button>
+  );
+}

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

@@ -0,0 +1,75 @@
+// src/ui/_global/Button.tsx
+"use client";
+import { cn } from "@/lib/utils";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import React from "react";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 cursor-pointer disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground hover:bg-primary/90 dark:text-white",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+        negative:
+          "bg-black text-white dark:bg-white dark:text-black hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+import type { ButtonHTMLAttributes, DetailedHTMLProps, ReactNode } from "react";
+
+type ButtonProps = {
+  className?: string;
+  variant?:
+    | "default"
+    | "destructive"
+    | "outline"
+    | "secondary"
+    | "ghost"
+    | "link";
+  size?: "default" | "sm" | "lg" | "icon";
+  asChild?: boolean;
+  children?: ReactNode;
+} & DetailedHTMLProps<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  HTMLButtonElement
+>;
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, children, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      >
+        {children}
+      </Comp>
+    );
+  }
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };