@thinhnguyencth1204/nextcli 0.8.0 → 1.0.0

package/templates/next-base/src/components/layout/private/nav-user.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import { LogOut, Monitor, Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+import { useTranslations } from "next-intl";
+import { authClient } from "@/lib/auth/client";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  Sheet,
+  SheetContent,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
+import { LocaleSwitcher } from "@/components/layout/private/locale-switcher";
+
+export function NavUser() {
+  const { theme, setTheme } = useTheme();
+  const t = useTranslations("common");
+
+  const handleLogout = async () => {
+    await authClient.signOut();
+    window.location.href = "/sign-in";
+  };
+
+  return (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button variant="ghost" className="h-fit w-fit px-2 py-1">
+          <div className="grid text-right text-sm">
+            <span className="font-semibold">{t("userMenu.anonymousName")}</span>
+            <span className="text-xs text-muted-foreground">
+              {t("userMenu.anonymousEmail")}
+            </span>
+          </div>
+          <Avatar className="h-9 w-9">
+            <AvatarFallback>U</AvatarFallback>
+          </Avatar>
+        </Button>
+      </SheetTrigger>
+      <SheetContent side="right" className="w-full max-w-sm p-0">
+        <SheetHeader className="border-b p-4">
+          <SheetTitle>{t("userMenu.title")}</SheetTitle>
+        </SheetHeader>
+
+        <ScrollArea className="h-[calc(100vh-10rem)] p-4">
+          <div className="space-y-4">
+            <div className="rounded-md border bg-card p-4">
+              <p className="mb-3 text-sm font-medium">
+                {t("userMenu.appearance")}
+              </p>
+              <div className="grid grid-cols-3 gap-2">
+                <Button
+                  variant={theme === "light" ? "default" : "outline"}
+                  size="sm"
+                  onClick={() => setTheme("light")}
+                >
+                  <Sun className="h-4 w-4" />
+                  {t("header.themeLight")}
+                </Button>
+                <Button
+                  variant={theme === "dark" ? "default" : "outline"}
+                  size="sm"
+                  onClick={() => setTheme("dark")}
+                >
+                  <Moon className="h-4 w-4" />
+                  {t("header.themeDark")}
+                </Button>
+                <Button
+                  variant={theme === "system" ? "default" : "outline"}
+                  size="sm"
+                  onClick={() => setTheme("system")}
+                >
+                  <Monitor className="h-4 w-4" />
+                  {t("header.themeSystem")}
+                </Button>
+              </div>
+            </div>
+            <LocaleSwitcher />
+          </div>
+        </ScrollArea>
+
+        <SheetFooter className="border-t p-0">
+          <Button
+            variant="ghost"
+            className="w-full justify-center rounded-none py-6 text-destructive hover:bg-destructive/10"
+            onClick={handleLogout}
+          >
+            <LogOut className="h-4 w-4" />
+            {t("userMenu.logout")}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}

package/templates/next-base/src/components/layout/private/page-shell.tsx

@@ -0,0 +1,40 @@
+import type { ReactNode } from "react";
+import { cn } from "@/utils/cn";
+
+type PageShellProps = {
+  title: string;
+  description?: string;
+  actions?: ReactNode;
+  children: ReactNode;
+  className?: string;
+};
+
+export function PageShell({
+  title,
+  description,
+  actions,
+  children,
+  className,
+}: PageShellProps) {
+  return (
+    <div
+      className={cn(
+        "mx-auto w-full max-w-screen-2xl px-4 py-10 sm:px-6 lg:px-10",
+        className,
+      )}
+    >
+      <div className="flex flex-col gap-4 pb-6 sm:flex-row sm:items-start sm:justify-between">
+        <div className="space-y-1">
+          <h1 className="text-3xl font-black tracking-tight">{title}</h1>
+          {description ? (
+            <p className="text-sm text-muted-foreground">{description}</p>
+          ) : null}
+        </div>
+        {actions ? (
+          <div className="flex shrink-0 items-center gap-2">{actions}</div>
+        ) : null}
+      </div>
+      {children}
+    </div>
+  );
+}

package/templates/next-base/src/components/providers/query-provider.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import { useState } from "react";
+import type { ReactNode } from "react";
+
+export function QueryProvider({ children }: { children: ReactNode }) {
+  const [queryClient] = useState(() => new QueryClient());
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      {children}
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
+  );
+}

package/templates/next-base/src/components/ui/data-table/data-table-column-header.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import type { Column } from "@tanstack/react-table";
+import { Button } from "@/components/ui/button";
+
+export function DataTableColumnHeader<TData, TValue>({
+  column,
+  title,
+}: {
+  column: Column<TData, TValue>;
+  title: string;
+}) {
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      className="h-8 px-2"
+      onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+    >
+      {title}
+    </Button>
+  );
+}

package/templates/next-base/src/components/ui/data-table/data-table-filter-list.tsx

@@ -0,0 +1,3 @@
+export function DataTableFilterList() {
+  return null;
+}

package/templates/next-base/src/components/ui/data-table/data-table-pagination.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import type { Table } from "@tanstack/react-table";
+import { useTranslations } from "next-intl";
+import { Button } from "@/components/ui/button";
+
+export function DataTablePagination<TData>({ table }: { table: Table<TData> }) {
+  const t = useTranslations("common.table");
+  const pageCount = table.getPageCount();
+  const pageIndex = table.getState().pagination.pageIndex;
+
+  return (
+    <div className="flex items-center justify-end gap-2">
+      <span className="text-xs text-muted-foreground">
+        {pageCount === 0 ? 0 : pageIndex + 1}/{Math.max(pageCount, 1)}
+      </span>
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() => table.previousPage()}
+        disabled={!table.getCanPreviousPage()}
+      >
+        {t("previous")}
+      </Button>
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() => table.nextPage()}
+        disabled={!table.getCanNextPage()}
+      >
+        {t("next")}
+      </Button>
+    </div>
+  );
+}

package/templates/next-base/src/components/ui/data-table/data-table-skeleton.tsx

@@ -0,0 +1,11 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function DataTableSkeleton() {
+  return (
+    <div className="space-y-2">
+      <Skeleton className="h-8 w-full" />
+      <Skeleton className="h-8 w-full" />
+      <Skeleton className="h-8 w-full" />
+    </div>
+  );
+}

package/templates/next-base/src/components/ui/data-table/data-table-toolbar.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import type { Table } from "@tanstack/react-table";
+import type { ReactNode } from "react";
+
+export function DataTableToolbar<TData>({
+  _table,
+  children,
+}: {
+  _table: Table<TData>;
+  children?: ReactNode;
+}) {
+  return <div className="flex items-center justify-between">{children}</div>;
+}

package/templates/next-base/src/components/ui/data-table/data-table-view-options.tsx

@@ -0,0 +1,3 @@
+export function DataTableViewOptions() {
+  return null;
+}

package/templates/next-base/src/components/ui/data-table/data-table.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { flexRender, type Table as TanstackTable } from "@tanstack/react-table";
+import { useTranslations } from "next-intl";
+import { DataTablePagination } from "@/components/ui/data-table/data-table-pagination";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+
+type DataTableProps<TData> = {
+  table: TanstackTable<TData>;
+};
+
+export function DataTable<TData>({ table }: DataTableProps<TData>) {
+  const t = useTranslations("common.table");
+
+  return (
+    <div className="space-y-3">
+      <div className="overflow-hidden rounded-md border">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => (
+                  <TableHead key={header.id}>
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext(),
+                        )}
+                  </TableHead>
+                ))}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows.length > 0 ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow key={row.id}>
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext(),
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell
+                  colSpan={table.getAllColumns().length}
+                  className="h-24 text-center"
+                >
+                  {t("noResults")}
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+      <DataTablePagination table={table} />
+    </div>
+  );
+}

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

@@ -0,0 +1,215 @@
+"use client";
+
+import * as React from "react";
+import { PanelLeft } from "lucide-react";
+import { Slot } from "@radix-ui/react-slot";
+import { cn } from "@/utils/cn";
+import { Button } from "@/components/ui/button";
+import { Sheet, SheetContent } from "@/components/ui/sheet";
+import { useIsMobile } from "@/hooks/use-mobile";
+
+type SidebarContextValue = {
+  open: boolean;
+  setOpen: (value: boolean) => void;
+  openMobile: boolean;
+  setOpenMobile: (value: boolean) => void;
+  isMobile: boolean;
+  state: "expanded" | "collapsed";
+  toggleSidebar: () => void;
+};
+
+const SidebarContext = React.createContext<SidebarContextValue | null>(null);
+
+export function useSidebar() {
+  const context = React.useContext(SidebarContext);
+  if (!context) {
+    throw new Error("useSidebar must be used within SidebarProvider");
+  }
+  return context;
+}
+
+export function SidebarProvider({
+  defaultOpen = true,
+  children,
+}: {
+  defaultOpen?: boolean;
+  children: React.ReactNode;
+}) {
+  const isMobile = useIsMobile();
+  const [open, setOpen] = React.useState(defaultOpen);
+  const [openMobile, setOpenMobile] = React.useState(false);
+  const state = open ? "expanded" : "collapsed";
+
+  const toggleSidebar = React.useCallback(() => {
+    if (isMobile) {
+      setOpenMobile((value) => !value);
+      return;
+    }
+    setOpen((value) => !value);
+  }, [isMobile]);
+
+  return (
+    <SidebarContext.Provider
+      value={{
+        open,
+        setOpen,
+        openMobile,
+        setOpenMobile,
+        isMobile,
+        state,
+        toggleSidebar,
+      }}
+    >
+      <div className="group/sidebar-wrapper flex min-h-svh w-full">
+        {children}
+      </div>
+    </SidebarContext.Provider>
+  );
+}
+
+export function Sidebar({
+  className,
+  children,
+  collapsible = "offcanvas",
+}: React.ComponentProps<"div"> & { collapsible?: "offcanvas" | "none" }) {
+  const { isMobile, openMobile, setOpenMobile, state } = useSidebar();
+
+  if (collapsible === "none") {
+    return (
+      <aside
+        className={cn(
+          "flex h-full w-64 flex-col border-r bg-sidebar text-sidebar-foreground",
+          className,
+        )}
+      >
+        {children}
+      </aside>
+    );
+  }
+
+  if (isMobile) {
+    return (
+      <Sheet open={openMobile} onOpenChange={setOpenMobile}>
+        <SheetContent side="left" className={cn("w-[18rem] p-0", className)}>
+          <div className="flex h-full flex-col bg-sidebar text-sidebar-foreground">
+            {children}
+          </div>
+        </SheetContent>
+      </Sheet>
+    );
+  }
+
+  return (
+    <aside
+      data-state={state}
+      className={cn(
+        "hidden h-screen border-r bg-sidebar text-sidebar-foreground md:flex md:flex-col",
+        state === "collapsed" ? "w-14" : "w-64",
+        className,
+      )}
+    >
+      {children}
+    </aside>
+  );
+}
+
+export function SidebarTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { toggleSidebar } = useSidebar();
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      className={cn("h-8 w-8", className)}
+      onClick={(event) => {
+        props.onClick?.(event);
+        toggleSidebar();
+      }}
+      {...props}
+    >
+      {children ?? <PanelLeft className="h-4 w-4" />}
+    </Button>
+  );
+}
+
+export function SidebarHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return <div className={cn("border-b p-3", className)} {...props} />;
+}
+
+export function SidebarContent({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div className={cn("flex-1 overflow-y-auto p-2", className)} {...props} />
+  );
+}
+
+export function SidebarGroup({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return <div className={cn("mb-2", className)} {...props} />;
+}
+
+export function SidebarGroupLabel({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "px-2 py-1 text-xs font-medium text-muted-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function SidebarGroupContent({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return <div className={cn("space-y-1", className)} {...props} />;
+}
+
+export function SidebarMenu({
+  className,
+  ...props
+}: React.ComponentProps<"ul">) {
+  return <ul className={cn("space-y-1", className)} {...props} />;
+}
+
+export function SidebarMenuItem({
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return <li className={cn("list-none", className)} {...props} />;
+}
+
+export function SidebarMenuButton({
+  className,
+  asChild = false,
+  isActive = false,
+  ...props
+}: React.ComponentProps<"button"> & { asChild?: boolean; isActive?: boolean }) {
+  const Comp = asChild ? Slot : "button";
+  return (
+    <Comp
+      className={cn(
+        "flex h-9 w-full items-center gap-2 rounded-md px-2 text-sm hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        isActive &&
+          "bg-sidebar-primary text-sidebar-primary-foreground hover:bg-sidebar-primary/90",
+        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/api/use-example.ts

@@ -0,0 +1,21 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import { api } from "@/lib/api/axios";
+import type { ApiSuccess } from "@/types";
+
+type ExampleItem = {
+  id: string;
+  name: string;
+  description?: string | null;
+};
+
+export function useExample() {
+  return useQuery({
+    queryKey: ["example"],
+    queryFn: async () => {
+      const { data } = await api.get("/api/v1/example");
+      return (data as ApiSuccess<{ items: ExampleItem[] }>).data.items;
+    },
+  });
+}

package/templates/next-base/src/example/api/use-mutations.ts

@@ -0,0 +1,20 @@
+"use client";
+
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { api } from "@/lib/api/axios";
+import type { CreateExampleInput } from "@/example/validations";
+import type { ApiSuccess } from "@/types";
+
+export function useCreateExample() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (payload: CreateExampleInput) => {
+      const { data } = await api.post("/api/v1/example", payload);
+      return (data as ApiSuccess<{ id: string }>).data;
+    },
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: ["example"] });
+    },
+  });
+}

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

@@ -0,0 +1,64 @@
+"use client";
+
+import { useMemo } from "react";
+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";
+import { Card, CardContent } from "@/components/ui/card";
+
+type ExampleItem = {
+  id: string;
+  name: string;
+  description?: string | null;
+};
+
+const columnHelper = createColumnHelper<ExampleItem>();
+
+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: translatedColumns,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+  });
+
+  if (isLoading) {
+    return (
+      <Card>
+        <CardContent className="py-8 text-sm text-muted-foreground">
+          {t("loading")}
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      <CardContent className="pt-6">
+        <DataTable table={table} />
+      </CardContent>
+    </Card>
+  );
+}

package/templates/next-base/src/example/services.ts

@@ -0,0 +1,9 @@
+import prisma from "@/lib/db/prisma";
+
+export async function listExamples() {
+  return prisma.example.findMany({
+    orderBy: {
+      createdAt: "desc",
+    },
+  });
+}

package/templates/next-base/src/example/validations.ts

@@ -0,0 +1,8 @@
+import { z } from "zod";
+
+export const createExampleSchema = z.object({
+  name: z.string().min(2),
+  description: z.string().optional(),
+});
+
+export type CreateExampleInput = z.infer<typeof createExampleSchema>;