@thinhnguyencth1204/nextcli 0.2.1 → 0.4.0

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

@@ -0,0 +1,30 @@
+"use client";
+
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { cn } from "@/utils/cn";
+
+export const Popover = PopoverPrimitive.Root;
+export const PopoverTrigger = PopoverPrimitive.Trigger;
+export const PopoverAnchor = PopoverPrimitive.Anchor;
+
+export function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md",
+          className,
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  );
+}

package/templates/next-base/src/components/ui/scroll-area.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import * as React from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import { cn } from "@/utils/cn";
+
+export function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+  return (
+    <ScrollAreaPrimitive.Root
+      className={cn("relative overflow-hidden", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  );
+}
+
+export function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      orientation={orientation}
+      className={cn(
+        "flex touch-none select-none transition-colors",
+        orientation === "vertical" &&
+          "h-full w-2.5 border-l border-l-transparent p-[1px]",
+        orientation === "horizontal" &&
+          "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+        className,
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  );
+}

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

@@ -0,0 +1,76 @@
+"use client";
+
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown } from "lucide-react";
+import { cn } from "@/utils/cn";
+
+export const Select = SelectPrimitive.Root;
+export const SelectGroup = SelectPrimitive.Group;
+export const SelectValue = SelectPrimitive.Value;
+
+export function SelectTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger>) {
+  return (
+    <SelectPrimitive.Trigger
+      className={cn(
+        "flex h-9 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDown className="h-4 w-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  );
+}
+
+export function SelectContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        className={cn(
+          "z-50 min-w-[8rem] rounded-md border bg-popover text-popover-foreground shadow-md",
+          className,
+        )}
+        {...props}
+      >
+        <SelectPrimitive.Viewport className="p-1">
+          {children}
+        </SelectPrimitive.Viewport>
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  );
+}
+
+export function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      className={cn(
+        "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground",
+        className,
+      )}
+      {...props}
+    >
+      <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <Check className="h-4 w-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  );
+}

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

@@ -0,0 +1,23 @@
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { cn } from "@/utils/cn";
+
+export function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
+        className,
+      )}
+      {...props}
+    />
+  );
+}

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

@@ -0,0 +1,117 @@
+"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";
+import { buttonVariants } from "@/components/ui/button";
+
+export const Sheet = DialogPrimitive.Root;
+export const SheetTrigger = DialogPrimitive.Trigger;
+export const SheetClose = DialogPrimitive.Close;
+export const SheetPortal = DialogPrimitive.Portal;
+
+export function SheetOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      className={cn("fixed inset-0 z-50 bg-black/50", className)}
+      {...props}
+    />
+  );
+}
+
+export function SheetContent({
+  className,
+  children,
+  side = "right",
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  side?: "top" | "right" | "bottom" | "left";
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <DialogPrimitive.Content
+        className={cn(
+          "fixed z-50 gap-4 bg-background p-6 shadow-lg transition",
+          side === "right" &&
+            "inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+          side === "left" &&
+            "inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+          side === "top" && "inset-x-0 top-0 border-b",
+          side === "bottom" && "inset-x-0 bottom-0 border-t",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <DialogPrimitive.Close
+          className={cn(
+            buttonVariants({ variant: "ghost", size: "icon" }),
+            "absolute right-4 top-4",
+          )}
+        >
+          <X className="h-4 w-4" />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      </DialogPrimitive.Content>
+    </SheetPortal>
+  );
+}
+
+export function SheetHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col space-y-2 text-center sm:text-left",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function SheetFooter({
+  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 SheetTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      className={cn("text-lg font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+export function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}

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/components/ui/skeleton.tsx

@@ -0,0 +1,10 @@
+import { cn } from "@/utils/cn";
+
+export function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  );
+}

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

@@ -0,0 +1,3 @@
+"use client";
+
+export { Toaster } from "sonner";

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

@@ -0,0 +1,54 @@
+import * as React from "react";
+import { cn } from "@/utils/cn";
+
+export function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div className="w-full overflow-auto">
+      <table
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  );
+}
+
+export function TableHeader({
+  className,
+  ...props
+}: React.ComponentProps<"thead">) {
+  return <thead className={cn("[&_tr]:border-b", className)} {...props} />;
+}
+
+export function TableBody({
+  className,
+  ...props
+}: React.ComponentProps<"tbody">) {
+  return (
+    <tbody className={cn("[&_tr:last-child]:border-0", className)} {...props} />
+  );
+}
+
+export function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      className={cn("border-b transition-colors hover:bg-muted/50", className)}
+      {...props}
+    />
+  );
+}
+
+export function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      className={cn(
+        "h-10 px-2 text-left align-middle font-medium text-muted-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return <td className={cn("p-2 align-middle", className)} {...props} />;
+}

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/config/branding.ts

@@ -0,0 +1,14 @@
+/**
+ * Central branding config — edit these values after scaffolding.
+ * See SETUP.md § Branding for env vs display settings.
+ */
+export const branding = {
+  /** Display name shown in UI (header, metadata, sidebar). */
+  projectName: "__PROJECT_NAME__",
+  /** URL-safe slug (package name, DB name). Set at create time. */
+  projectSlug: "__PROJECT_NAME__",
+  /** Short app description for metadata. */
+  description: "Outsource-ready Next.js scaffolded by NexTCLI",
+  /** Public path to logo asset under /public. */
+  logoPath: "/logo.svg",
+} as const;