@thinhnguyencth1204/nextcli 0.2.0 → 0.3.0

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

@@ -0,0 +1,55 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { LayoutDashboard, Table2, User, type LucideIcon } from "lucide-react";
+import {
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/components/ui/sidebar";
+import { sidebarModules } from "@/data/sidebar-modules";
+
+const icons: Record<string, LucideIcon> = {
+  "layout-dashboard": LayoutDashboard,
+  table: Table2,
+  user: User,
+};
+
+export function NavSidebar() {
+  const pathname = usePathname();
+  const t = useTranslations("common.sidebar");
+
+  return (
+    <SidebarContent>
+      <SidebarGroup>
+        <SidebarGroupLabel>{t("groupGeneral")}</SidebarGroupLabel>
+        <SidebarGroupContent>
+          <SidebarMenu>
+            {sidebarModules.map((module) => {
+              const Icon = icons[module.icon];
+              const isActive =
+                pathname === module.url ||
+                pathname.startsWith(`${module.url}/`);
+              return (
+                <SidebarMenuItem key={module.id}>
+                  <SidebarMenuButton asChild isActive={isActive}>
+                    <Link href={module.url}>
+                      <Icon className="h-4 w-4" />
+                      <span>{t(module.id)}</span>
+                    </Link>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              );
+            })}
+          </SidebarMenu>
+        </SidebarGroupContent>
+      </SidebarGroup>
+    </SidebarContent>
+  );
+}

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/providers/theme-provider.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import * as React from "react";
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+
+export function ThemeProvider({
+  children,
+  ...props
+}: React.ComponentProps<typeof NextThemesProvider>) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}

package/templates/next-base/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+export {
+  Dialog as AlertDialog,
+  DialogTrigger as AlertDialogTrigger,
+  DialogContent as AlertDialogContent,
+  DialogHeader as AlertDialogHeader,
+  DialogFooter as AlertDialogFooter,
+  DialogTitle as AlertDialogTitle,
+  DialogDescription as AlertDialogDescription,
+} from "@/components/ui/dialog";

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

@@ -0,0 +1,45 @@
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { cn } from "@/utils/cn";
+
+export function Avatar({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      className={cn(
+        "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      className={cn("aspect-square h-full w-full", className)}
+      {...props}
+    />
+  );
+}
+
+export function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      className={cn(
+        "flex h-full w-full items-center justify-center rounded-full bg-muted",
+        className,
+      )}
+      {...props}
+    />
+  );
+}

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

@@ -0,0 +1,29 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+import { cn } from "@/utils/cn";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground",
+        secondary: "border-transparent bg-secondary text-secondary-foreground",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+export function Badge({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof badgeVariants>) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}

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

@@ -1,16 +1,56 @@
 import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/utils/cn";
 
-export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        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",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  };
+
+export function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: ButtonProps) {
+  const Comp = asChild ? Slot : "button";
 
-export function Button({ className, ...props }: ButtonProps) {
   return (
-    <button
-      className={cn(
-        "inline-flex items-center justify-center rounded-md border px-3 py-2 text-sm",
-        className,
-      )}
+    <Comp
+      className={cn(buttonVariants({ variant, size }), className)}
       {...props}
     />
   );
 }
+
+export { buttonVariants };

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

@@ -0,0 +1,54 @@
+import * as React from "react";
+import { cn } from "@/utils/cn";
+
+export function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "rounded-lg border bg-card text-card-foreground shadow-sm",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function CardHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn("flex flex-col space-y-1.5 p-6", className)}
+      {...props}
+    />
+  );
+}
+
+export function CardTitle({ className, ...props }: React.ComponentProps<"h3">) {
+  return (
+    <h3
+      className={cn(
+        "text-2xl font-semibold leading-none tracking-tight",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function CardDescription({
+  className,
+  ...props
+}: React.ComponentProps<"p">) {
+  return (
+    <p className={cn("text-sm text-muted-foreground", className)} {...props} />
+  );
+}
+
+export function CardContent({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return <div className={cn("p-6 pt-0", className)} {...props} />;
+}

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/dialog.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import { cn } from "@/utils/cn";
+
+export const Dialog = DialogPrimitive.Root;
+export const DialogTrigger = DialogPrimitive.Trigger;
+export const DialogPortal = DialogPrimitive.Portal;
+export const DialogClose = DialogPrimitive.Close;
+
+export function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      className={cn("fixed inset-0 z-50 bg-black/50", className)}
+      {...props}
+    />
+  );
+}
+
+export function DialogContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content>) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        className={cn(
+          "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100">
+          <X className="h-4 w-4" />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  );
+}
+
+export function DialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col space-y-1.5 text-center sm:text-left",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function DialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      className={cn(
+        "text-lg font-semibold leading-none tracking-tight",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}