@thinhnguyencth1204/nextcli 0.2.0 → 0.3.0

package/templates/next-base/src/components/ui/tabs.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { cn } from "@/utils/cn";
+
+export const Tabs = TabsPrimitive.Root;
+
+export function TabsList({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List>) {
+  return (
+    <TabsPrimitive.List
+      className={cn(
+        "inline-flex h-9 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      className={cn(
+        "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      className={cn(
+        "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        className,
+      )}
+      {...props}
+    />
+  );
+}

package/templates/next-base/src/components/ui/textarea.tsx

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { cn } from "@/utils/cn";
+
+export function Textarea({
+  className,
+  ...props
+}: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      className={cn(
+        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}

package/templates/next-base/src/components/ui/tooltip.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { cn } from "@/utils/cn";
+
+export const TooltipProvider = TooltipPrimitive.Provider;
+export const Tooltip = TooltipPrimitive.Root;
+export const TooltipTrigger = TooltipPrimitive.Trigger;
+
+export function TooltipContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Content
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}

package/templates/next-base/src/data/sidebar-modules.ts

@@ -0,0 +1,11 @@
+export type SidebarModule = {
+  id: "dashboard" | "example" | "account";
+  url: string;
+  icon: "layout-dashboard" | "table" | "user";
+};
+
+export const sidebarModules: SidebarModule[] = [
+  { id: "dashboard", url: "/dashboard", icon: "layout-dashboard" },
+  { id: "example", url: "/example", icon: "table" },
+  { id: "account", url: "/account", icon: "user" },
+];

package/templates/next-base/src/example/components/example-table.tsx

@@ -1,8 +1,15 @@
 "use client";
 
 import { useMemo } from "react";
-import { createColumnHelper, getCoreRowModel, useReactTable } from "@tanstack/react-table";
+import { useTranslations } from "next-intl";
+import {
+  createColumnHelper,
+  getCoreRowModel,
+  getPaginationRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
 import { useExample } from "@/example/api/use-example";
+import { DataTable } from "@/components/ui/data-table/data-table";
 
 type ExampleItem = {
   id: string;
@@ -12,55 +19,33 @@ type ExampleItem = {
 
 const columnHelper = createColumnHelper<ExampleItem>();
 
-const columns = [
-  columnHelper.accessor("name", {
-    header: "Name",
-  }),
-  columnHelper.accessor("description", {
-    header: "Description",
-  }),
-];
-
 export function ExampleTable() {
+  const t = useTranslations("example.table");
   const { data, isLoading } = useExample();
   const rows = useMemo(() => (Array.isArray(data) ? data : []), [data]);
 
+  const translatedColumns = useMemo(
+    () => [
+      columnHelper.accessor("name", {
+        header: t("name"),
+      }),
+      columnHelper.accessor("description", {
+        header: t("description"),
+      }),
+    ],
+    [t],
+  );
+
   const table = useReactTable({
     data: rows,
-    columns,
+    columns: translatedColumns,
     getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
   });
 
   if (isLoading) {
-    return <p>Loading examples...</p>;
+    return <p>{t("loading")}</p>;
   }
 
-  return (
-    <table style={{ width: "100%", borderCollapse: "collapse" }}>
-      <thead>
-        {table.getHeaderGroups().map((headerGroup) => (
-          <tr key={headerGroup.id}>
-            {headerGroup.headers.map((header) => (
-              <th key={header.id} style={{ textAlign: "left", borderBottom: "1px solid #ccc" }}>
-                {typeof header.column.columnDef.header === "string"
-                  ? header.column.columnDef.header
-                  : null}
-              </th>
-            ))}
-          </tr>
-        ))}
-      </thead>
-      <tbody>
-        {table.getRowModel().rows.map((row) => (
-          <tr key={row.id}>
-            {row.getVisibleCells().map((cell) => (
-              <td key={cell.id} style={{ padding: "8px 0", borderBottom: "1px solid #eee" }}>
-                {String(cell.getValue() ?? "")}
-              </td>
-            ))}
-          </tr>
-        ))}
-      </tbody>
-    </table>
-  );
+  return <DataTable table={table} />;
 }

package/templates/next-base/src/features/auth/components/account-panel.tsx

@@ -1,8 +1,10 @@
 "use client";
 
 import { useEffect, useState } from "react";
+import { useTranslations } from "next-intl";
 import { publicApi } from "@/lib/axios-instance";
 import type { ApiSuccess } from "@/types";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 
 type SessionPayload = {
   user?: {
@@ -13,6 +15,7 @@ type SessionPayload = {
 };
 
 export function AccountPanel() {
+  const t = useTranslations("auth.account");
   const [session, setSession] = useState<SessionPayload | null>(null);
   const [loading, setLoading] = useState(true);
 
@@ -44,19 +47,29 @@ export function AccountPanel() {
   }, []);
 
   if (loading) {
-    return <p>Loading account...</p>;
+    return <p>{t("loading")}</p>;
   }
 
   if (!session?.user) {
-    return <p>No active session. Please sign in first.</p>;
+    return <p>{t("noSession")}</p>;
   }
 
   return (
-    <section style={{ border: "1px solid #ddd", padding: 16, borderRadius: 8, maxWidth: 420 }}>
-      <h2>My account</h2>
-      <p>User ID: {session.user.id}</p>
-      <p>Email: {session.user.email}</p>
-      <p>Name: {session.user.name ?? "N/A"}</p>
-    </section>
+    <Card className="max-w-xl">
+      <CardHeader>
+        <CardTitle>{t("title")}</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-2 text-sm">
+        <p>
+          {t("userId")}: {session.user.id}
+        </p>
+        <p>
+          {t("email")}: {session.user.email}
+        </p>
+        <p>
+          {t("name")}: {session.user.name ?? t("na")}
+        </p>
+      </CardContent>
+    </Card>
   );
 }

package/templates/next-base/src/features/auth/components/sign-in-form.tsx

@@ -3,14 +3,20 @@
 import { useState } from "react";
 import type { FormEvent } from "react";
 import { useRouter } from "next/navigation";
+import { useTranslations } from "next-intl";
 import { toast } from "sonner";
 import { publicApi } from "@/lib/axios-instance";
 import { setAccessToken } from "@/lib/token-store";
 import { signInSchema } from "@/features/auth/validations";
 import type { ApiSuccess } from "@/types";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
 
 export function SignInForm() {
   const router = useRouter();
+  const t = useTranslations("auth.signInForm");
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -20,7 +26,7 @@ export function SignInForm() {
 
     const parsed = signInSchema.safeParse({ email, password });
     if (!parsed.success) {
-      toast.error("Please provide a valid email and password.");
+      toast.error(t("invalidInput"));
       return;
     }
 
@@ -29,18 +35,19 @@ export function SignInForm() {
       const response = await publicApi.post("/api/v1/auth/login", parsed.data, {
         withCredentials: true,
       });
-      const accessToken = (response.data as ApiSuccess<{ accessToken: string }>).data?.accessToken;
+      const accessToken = (response.data as ApiSuccess<{ accessToken: string }>)
+        .data?.accessToken;
       if (!accessToken) {
-        toast.error("Access token is missing.");
+        toast.error(t("missingAccessToken"));
         return;
       }
 
       setAccessToken(accessToken);
-      toast.success("Signed in successfully.");
+      toast.success(t("success"));
       router.push("/account");
       router.refresh();
     } catch (error) {
-      const message = error instanceof Error ? error.message : "Sign in failed.";
+      const message = error instanceof Error ? error.message : t("failed");
       toast.error(message);
     } finally {
       setIsSubmitting(false);
@@ -48,30 +55,36 @@ export function SignInForm() {
   };
 
   return (
-    <form onSubmit={onSubmit} style={{ display: "grid", gap: 12, maxWidth: 360 }}>
-      <label style={{ display: "grid", gap: 4 }}>
-        <span>Email</span>
-        <input
-          type="email"
-          value={email}
-          onChange={(event) => setEmail(event.target.value)}
-          placeholder="you@example.com"
-          required
-        />
-      </label>
-      <label style={{ display: "grid", gap: 4 }}>
-        <span>Password</span>
-        <input
-          type="password"
-          value={password}
-          onChange={(event) => setPassword(event.target.value)}
-          placeholder="********"
-          required
-        />
-      </label>
-      <button type="submit" disabled={isSubmitting}>
-        {isSubmitting ? "Signing in..." : "Sign in"}
-      </button>
-    </form>
+    <Card>
+      <CardContent className="pt-6">
+        <form onSubmit={onSubmit} className="grid gap-4">
+          <div className="grid gap-2">
+            <Label htmlFor="email">{t("email")}</Label>
+            <Input
+              id="email"
+              type="email"
+              value={email}
+              onChange={(event) => setEmail(event.target.value)}
+              placeholder={t("emailPlaceholder")}
+              required
+            />
+          </div>
+          <div className="grid gap-2">
+            <Label htmlFor="password">{t("password")}</Label>
+            <Input
+              id="password"
+              type="password"
+              value={password}
+              onChange={(event) => setPassword(event.target.value)}
+              placeholder={t("passwordPlaceholder")}
+              required
+            />
+          </div>
+          <Button type="submit" disabled={isSubmitting}>
+            {isSubmitting ? t("submitting") : t("submit")}
+          </Button>
+        </form>
+      </CardContent>
+    </Card>
   );
 }

package/templates/next-base/src/hooks/index.ts

@@ -1 +1 @@
-export {};
+export * from "@/hooks/use-mobile";

package/templates/next-base/src/hooks/table/use-data-table.ts

@@ -0,0 +1,33 @@
+"use client";
+
+import * as React from "react";
+import {
+  getCoreRowModel,
+  getPaginationRowModel,
+  type ColumnDef,
+  useReactTable,
+} from "@tanstack/react-table";
+import type { DataTablePaginationState } from "@/types/data-table";
+
+export function useDataTable<TData>({
+  data,
+  columns,
+  initialState,
+}: {
+  data: TData[];
+  columns: ColumnDef<TData, unknown>[];
+  initialState?: DataTablePaginationState;
+}) {
+  const [pagination, setPagination] = React.useState<DataTablePaginationState>(
+    initialState ?? { pageIndex: 0, pageSize: 10 },
+  );
+
+  return useReactTable({
+    data,
+    columns,
+    state: { pagination },
+    onPaginationChange: setPagination,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+  });
+}

package/templates/next-base/src/hooks/use-mobile.ts

@@ -0,0 +1,25 @@
+"use client";
+
+import * as React from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
+    undefined,
+  );
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+
+  return !!isMobile;
+}

package/templates/next-base/src/i18n/config.ts

@@ -0,0 +1,7 @@
+// nextcli:locales:start
+export const locales = ["vi"] as const;
+// nextcli:locales:end
+
+export const defaultLocale = "vi";
+
+export type AppLocale = (typeof locales)[number];

package/templates/next-base/src/i18n/namespaces.ts

@@ -0,0 +1,5 @@
+// nextcli:namespaces:start
+export const namespaces = ["common", "auth", "example"] as const;
+// nextcli:namespaces:end
+
+export type MessageNamespace = (typeof namespaces)[number];

package/templates/next-base/src/i18n/request.ts

@@ -1,8 +1,25 @@
 import { getRequestConfig } from "next-intl/server";
+import { cookies } from "next/headers";
+import { defaultLocale, locales, type AppLocale } from "@/i18n/config";
+import { namespaces } from "@/i18n/namespaces";
 
 export default getRequestConfig(async () => {
+  const cookieStore = await cookies();
+  const cookieLocale = cookieStore.get("NEXT_LOCALE")?.value;
+  const locale = (
+    locales.includes(cookieLocale as AppLocale) ? cookieLocale : defaultLocale
+  ) as AppLocale;
+
+  const namespaceMessages = await Promise.all(
+    namespaces.map(async (namespace) => {
+      const file = (await import(`../../messages/${locale}/${namespace}.json`))
+        .default;
+      return [namespace, file] as const;
+    }),
+  );
+
   return {
-    locale: "en",
-    messages: {},
+    locale,
+    messages: Object.fromEntries(namespaceMessages),
   };
 });

package/templates/next-base/src/lib/prisma.ts

@@ -1,10 +1,20 @@
+import { PrismaPg } from "@prisma/adapter-pg";
 import { PrismaClient } from "@prisma/client";
+import { Pool } from "pg";
 
 declare global {
   var prisma: PrismaClient | undefined;
 }
 
-const prisma = global.prisma ?? new PrismaClient();
+const connectionString = process.env.DATABASE_URL;
+if (!connectionString) {
+  throw new Error(
+    "DATABASE_URL is missing. Please set it in your environment.",
+  );
+}
+
+const adapter = new PrismaPg(new Pool({ connectionString }));
+const prisma = global.prisma ?? new PrismaClient({ adapter });
 
 if (process.env.NODE_ENV !== "production") {
   global.prisma = prisma;

package/templates/next-base/src/types/data-table.ts

@@ -0,0 +1,4 @@
+export type DataTablePaginationState = {
+  pageIndex: number;
+  pageSize: number;
+};

package/templates/next-base/src/types/index.ts

@@ -38,3 +38,5 @@ export type ApiErrorResponse = {
 };
 
 export type ApiResponse<T> = ApiSuccess<T> | ApiErrorResponse;
+
+export * from "@/types/data-table";

package/templates/next-base/middleware.ts

@@ -1,10 +0,0 @@
-import createMiddleware from "next-intl/middleware";
-
-export default createMiddleware({
-  locales: ["en", "vi"],
-  defaultLocale: "en",
-});
-
-export const config = {
-  matcher: ["/((?!api|_next|.*\\..*).*)"],
-};

package/templates/next-base/src/app/styles.css

@@ -1,12 +0,0 @@
-:root {
-  color-scheme: light dark;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-body {
-  margin: 0;
-  font-family: Arial, sans-serif;
-}