@tioelvis/next-template 2.3.8 → 2.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tioelvis/next-template",
-  "version": "2.3.8",
+  "version": "2.4.0",
   "description": "CLI to scaffold a Next.js + Tailwind project using shadcn/ui components",
   "type": "module",
   "bin": {
@@ -52,6 +52,7 @@
     "@radix-ui/react-separator": "^1.1.7",
     "@radix-ui/react-slider": "^1.3.5",
     "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-switch": "^1.2.5",
     "@radix-ui/react-tooltip": "^1.2.7",
     "@tailwindcss/postcss": "^4.1.11",
     "@tanstack/react-query": "^5.83.0",
@@ -78,6 +79,7 @@
     "react-hook-form": "^7.61.1",
     "react-resizable-panels": "^3.0.3",
     "recharts": "^2.15.4",
+    "sonner": "^2.0.6",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.1.11",
     "tw-animate-css": "^1.3.6",

package/src/app/components/ui/sonner.json

@@ -0,0 +1,6 @@
+{
+  "dependencies": ["sonner"],
+  "dev_dependence": [],
+  "hooks": [],
+  "supports": []
+}

package/src/app/components/ui/sonner.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { Toaster as Sonner, ToasterProps } from "sonner";
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme();
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  );
+};
+
+export { Toaster };

package/src/app/components/ui/switch.json

@@ -0,0 +1,6 @@
+{
+  "dependencies": ["@radix-ui/react-switch"],
+  "dev_dependence": [],
+  "hooks": [],
+  "supports": []
+}

package/src/app/components/ui/switch.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import * as React from "react";
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+
+import { cn } from "@/lib/utils";
+
+function Switch({
+  className,
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      className={cn(
+        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}>
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={cn(
+          "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground cursor-pointer block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+        )}
+      />
+    </SwitchPrimitive.Root>
+  );
+}
+
+export { Switch };

package/src/constants.js

@@ -76,6 +76,8 @@ const COMPONENTS = [
   "sidebar",
   "skeleton",
   "slider",
+  "sonner",
+  "switch",
 ];
 
 export {

package/src/main.js

@@ -1,4 +1,4 @@
-#!/usr/bin/env node
+#!/usr/bin/env node
 
 import {
   copy_components,
@@ -116,7 +116,7 @@ process.on("SIGINT", () => on_cancel());
       );
 
       // Install dependencies
-      console.log(chalk.cyan("⬇️  Installing dependencies..."));
+      console.log(chalk.cyan("⬇️ Installing dependencies..."));
 
       if (package_manager === "npm") {
         run_command(`npm install ${DEPENDENCIES.join(" ")}`, DEST);
@@ -131,10 +131,18 @@ process.on("SIGINT", () => on_cancel());
       // Finish project
       console.log(
         chalk.yellow(
-          "📄 IMPORTANT: make sure to add your variable NEXT_PUBLIC_API in the .env file, e.g.: NEXT_PUBLIC_API=http://localhost:9000"
+          "⚠️ IMPORTANT: make sure to add your variable NEXT_PUBLIC_API in the .env file, e.g.: NEXT_PUBLIC_API=http://localhost:9000"
         )
       );
 
+      if (components.some((e) => e === "sonner") === true) {
+        console.log(
+          chalk.yellow(
+            "⚠️ IMPORTANT: you install the sonner component. Don't forget to add the Toaster in your layout"
+          )
+        );
+      }
+
       console.log(
         chalk.green(`\n✅ Project ${project_name} created successfully! 🚀`)
       );
@@ -206,6 +214,13 @@ process.on("SIGINT", () => on_cancel());
       }
 
       // Finish project
+      if (components.some((e) => e === "sonner") === true) {
+        console.log(
+          chalk.yellow(
+            "⚠️ IMPORTANT: you install the sonner component. Don't forget to add the Toaster in your layout"
+          )
+        );
+      }
       console.log(chalk.green("\n✅ Components add successfully!"));
     } catch (error) {
       console.error(chalk.red("❌ Internal error:"), error.message);