@hznrkv/sidebar 1.0.0

package/index.js

@@ -0,0 +1,476 @@
+#!/usr/bin/env node
+import fs from "fs"
+import path from "path"
+import { execaCommand } from "execa"
+import prompts from "prompts"
+
+const cwd = process.cwd()
+
+function exists(file) {
+  return fs.existsSync(path.join(cwd, file))
+}
+
+function readJson(file) {
+  try {
+    return JSON.parse(fs.readFileSync(path.join(cwd, file), "utf8"))
+  } catch {
+    return null
+  }
+}
+
+function write(filePath, content) {
+  const full = path.join(cwd, filePath)
+  fs.mkdirSync(path.dirname(full), { recursive: true })
+  fs.writeFileSync(full, content, "utf8")
+}
+
+async function run(cmd) {
+  console.log(`\n→ ${cmd}\n`)
+  await execaCommand(cmd, { cwd, stdio: "inherit" })
+}
+
+// ─── Arquivos da sidebar ──────────────────────────────────────────────────────
+
+const FILES = {
+  "src/components/app-sidebar.tsx": `"use client"
+
+import * as React from "react"
+import { NavMain } from "@/components/nav-main"
+import { NavUser } from "@/components/nav-user"
+import { TeamSwitcher } from "@/components/team-switcher"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+} from "@/components/ui/sidebar"
+import { LayoutDashboardIcon, SettingsIcon, UserIcon } from "lucide-react"
+
+const data = {
+  user: {
+    name: "Usuário",
+    email: "usuario@exemplo.com",
+    avatar: "",
+  },
+  teams: [
+    {
+      name: "Meu Projeto",
+      logo: <LayoutDashboardIcon />,
+      plan: "Free",
+    },
+  ],
+  navMain: [
+    {
+      title: "Dashboard",
+      url: "/",
+      icon: <LayoutDashboardIcon />,
+      isActive: true,
+    },
+    {
+      title: "Perfil",
+      url: "/perfil",
+      icon: <UserIcon />,
+    },
+    {
+      title: "Configurações",
+      url: "/configuracoes",
+      icon: <SettingsIcon />,
+    },
+  ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar variant="floating" collapsible="icon" {...props}>
+      <SidebarHeader>
+        <TeamSwitcher teams={data.teams} />
+      </SidebarHeader>
+      <SidebarContent>
+        <NavMain items={data.navMain} />
+      </SidebarContent>
+      <SidebarFooter>
+        <NavUser user={data.user} />
+      </SidebarFooter>
+    </Sidebar>
+  )
+}
+`,
+
+  "src/components/nav-main.tsx": `"use client"
+
+import { ChevronRightIcon } from "lucide-react"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible"
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from "@/components/ui/sidebar"
+
+type NavItem = {
+  title: string
+  url: string
+  icon?: React.ReactNode
+  isActive?: boolean
+  items?: { title: string; url: string }[]
+}
+
+export function NavMain({ items }: { items: NavItem[] }) {
+  return (
+    <SidebarGroup>
+      <SidebarGroupLabel>Menu</SidebarGroupLabel>
+      <SidebarMenu>
+        {items.map((item) =>
+          item.items?.length ? (
+            <Collapsible
+              key={item.title}
+              asChild
+              defaultOpen={item.isActive}
+              className="group/collapsible"
+            >
+              <SidebarMenuItem>
+                <CollapsibleTrigger asChild>
+                  <SidebarMenuButton tooltip={item.title}>
+                    {item.icon}
+                    <span>{item.title}</span>
+                    <ChevronRightIcon className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+                  </SidebarMenuButton>
+                </CollapsibleTrigger>
+                <CollapsibleContent>
+                  <SidebarMenuSub>
+                    {item.items.map((sub) => (
+                      <SidebarMenuSubItem key={sub.title}>
+                        <SidebarMenuSubButton asChild>
+                          <a href={sub.url}>{sub.title}</a>
+                        </SidebarMenuSubButton>
+                      </SidebarMenuSubItem>
+                    ))}
+                  </SidebarMenuSub>
+                </CollapsibleContent>
+              </SidebarMenuItem>
+            </Collapsible>
+          ) : (
+            <SidebarMenuItem key={item.title}>
+              <SidebarMenuButton asChild tooltip={item.title} isActive={item.isActive}>
+                <a href={item.url}>
+                  {item.icon}
+                  <span>{item.title}</span>
+                </a>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          )
+        )}
+      </SidebarMenu>
+    </SidebarGroup>
+  )
+}
+`,
+
+  "src/components/nav-user.tsx": `"use client"
+
+import {
+  BadgeCheckIcon,
+  BellIcon,
+  ChevronsUpDownIcon,
+  CreditCardIcon,
+  LogOutIcon,
+  SparklesIcon,
+} from "lucide-react"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/components/ui/sidebar"
+
+type User = { name: string; email: string; avatar: string }
+
+export function NavUser({ user }: { user: User }) {
+  const { isMobile } = useSidebar()
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <Avatar className="h-8 w-8 rounded-lg">
+                <AvatarImage src={user.avatar} alt={user.name} />
+                <AvatarFallback className="rounded-lg">
+                  {user.name.slice(0, 2).toUpperCase()}
+                </AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-semibold">{user.name}</span>
+                <span className="truncate text-xs">{user.email}</span>
+              </div>
+              <ChevronsUpDownIcon className="ml-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+            side={isMobile ? "bottom" : "right"}
+            align="end"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                <Avatar className="h-8 w-8 rounded-lg">
+                  <AvatarImage src={user.avatar} alt={user.name} />
+                  <AvatarFallback className="rounded-lg">
+                    {user.name.slice(0, 2).toUpperCase()}
+                  </AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <span className="truncate font-semibold">{user.name}</span>
+                  <span className="truncate text-xs">{user.email}</span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <SparklesIcon />
+                Upgrade para Pro
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <BadgeCheckIcon />
+                Conta
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <CreditCardIcon />
+                Faturamento
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <BellIcon />
+                Notificações
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOutIcon />
+              Sair
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
+`,
+
+  "src/components/team-switcher.tsx": `"use client"
+
+import * as React from "react"
+import { ChevronsUpDownIcon, PlusIcon } from "lucide-react"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/components/ui/sidebar"
+
+type Team = { name: string; logo: React.ReactNode; plan: string }
+
+export function TeamSwitcher({ teams }: { teams: Team[] }) {
+  const { isMobile } = useSidebar()
+  const [active, setActive] = React.useState(teams[0])
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                {active.logo}
+              </div>
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-semibold">{active.name}</span>
+                <span className="truncate text-xs">{active.plan}</span>
+              </div>
+              <ChevronsUpDownIcon className="ml-auto" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+            align="start"
+            side={isMobile ? "bottom" : "right"}
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="text-xs text-muted-foreground">
+              Times
+            </DropdownMenuLabel>
+            {teams.map((team) => (
+              <DropdownMenuItem key={team.name} onClick={() => setActive(team)} className="gap-2 p-2">
+                <div className="flex size-6 items-center justify-center rounded-sm border">
+                  {team.logo}
+                </div>
+                {team.name}
+              </DropdownMenuItem>
+            ))}
+            <DropdownMenuSeparator />
+            <DropdownMenuItem className="gap-2 p-2">
+              <div className="flex size-6 items-center justify-center rounded-md border bg-background">
+                <PlusIcon className="size-4" />
+              </div>
+              <div className="font-medium text-muted-foreground">Adicionar time</div>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
+`,
+
+  "src/app/(app)/layout.tsx": `import { AppSidebar } from "@/components/app-sidebar"
+import { SidebarProvider, SidebarInset } from "@/components/ui/sidebar"
+
+export default function AppLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <SidebarProvider className="p-2 gap-2">
+      <AppSidebar />
+      <SidebarInset className="rounded-xl overflow-hidden">
+        {children}
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
+`,
+
+  "src/app/(app)/page.tsx": `export default function Home() {
+  return (
+    <div className="p-6">
+      <h1 className="text-2xl font-semibold">Dashboard</h1>
+      <p className="text-muted-foreground mt-1">Bem-vindo ao seu projeto.</p>
+    </div>
+  )
+}
+`,
+
+  "src/app/page.tsx": `import { redirect } from "next/navigation"
+
+export default function Root() {
+  redirect("/")
+}
+`,
+}
+
+// ─── Main ─────────────────────────────────────────────────────────────────────
+
+async function main() {
+  console.log("\n@hznrkv/sidebar — instalador\n")
+
+  // 1. Next.js
+  const pkg = readJson("package.json")
+  const hasNext = pkg?.dependencies?.next || pkg?.devDependencies?.next
+
+  if (!hasNext) {
+    const { confirm } = await prompts({
+      type: "confirm",
+      name: "confirm",
+      message: "Next.js não encontrado. Criar projeto Next.js aqui?",
+      initial: true,
+    })
+    if (!confirm) {
+      console.log("Abortado. Inicialize um projeto Next.js antes de continuar.")
+      process.exit(1)
+    }
+    await run("pnpm create next-app@latest .")
+  } else {
+    console.log("✔ Next.js encontrado")
+  }
+
+  // 2. Shadcn
+  const hasShadcn = exists("components.json")
+
+  if (!hasShadcn) {
+    const { mode } = await prompts({
+      type: "select",
+      name: "mode",
+      message: "Shadcn não encontrado. Como quer inicializar?",
+      choices: [
+        { title: "Instalação padrão", value: "default" },
+        { title: "Tenho um preset pronto", value: "preset" },
+      ],
+    })
+
+    if (mode === "preset") {
+      const { cmd } = await prompts({
+        type: "text",
+        name: "cmd",
+        message: "Cole o comando completo do preset:",
+        hint: "ex: pnpm dlx shadcn@latest init --preset b0 --template next",
+      })
+      await run(cmd.trim())
+    } else {
+      await run("pnpm dlx shadcn@latest init")
+    }
+  } else {
+    console.log("✔ Shadcn encontrado")
+  }
+
+  // 3. Componentes Shadcn necessários
+  console.log("\n→ Instalando componentes Shadcn necessários...")
+  await run("pnpm dlx shadcn@latest add sidebar avatar dropdown-menu collapsible tooltip")
+
+  // 4. lucide-react
+  const updatedPkg = readJson("package.json")
+  const hasLucide = updatedPkg?.dependencies?.["lucide-react"] || updatedPkg?.devDependencies?.["lucide-react"]
+  if (!hasLucide) {
+    await run("pnpm add lucide-react")
+  } else {
+    console.log("✔ lucide-react encontrado")
+  }
+
+  // 5. Escrever arquivos da sidebar
+  console.log("\n→ Gerando arquivos da sidebar...")
+  for (const [filePath, content] of Object.entries(FILES)) {
+    write(filePath, content)
+    console.log(`  ✔ ${filePath}`)
+  }
+
+  console.log("\n✔ Sidebar instalada com sucesso!")
+  console.log("\nPróximo passo:\n  pnpm dev\n")
+}
+
+main().catch((err) => {
+  console.error(err)
+  process.exit(1)
+})

package/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@hznrkv/sidebar",
+  "version": "1.0.0",
+  "description": "CLI para instalar a sidebar @hznrkv em projetos Next.js + Shadcn",
+  "bin": {
+    "sidebar": "./index.js"
+  },
+  "type": "module",
+  "dependencies": {
+    "execa": "^9.5.2",
+    "prompts": "^2.4.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}