@hznrkv/sidebar 1.0.0 → 1.1.2

package/index.js

@@ -44,37 +44,79 @@ import {
   SidebarFooter,
   SidebarHeader,
 } from "@/components/ui/sidebar"
-import { LayoutDashboardIcon, SettingsIcon, UserIcon } from "lucide-react"
+import {
+  LayoutDashboardIcon,
+  UsersIcon,
+  FolderIcon,
+  BarChart2Icon,
+  SettingsIcon,
+  BoxIcon,
+} from "lucide-react"
 
 const data = {
   user: {
     name: "Usuário",
-    email: "usuario@exemplo.com",
+    email: "usuario@empresa.com",
     avatar: "",
   },
   teams: [
     {
-      name: "Meu Projeto",
-      logo: <LayoutDashboardIcon />,
-      plan: "Free",
+      name: "Minha Empresa",
+      logo: <BoxIcon />,
+      plan: "Pro",
     },
   ],
   navMain: [
     {
       title: "Dashboard",
-      url: "/",
+      url: "/dashboard",
       icon: <LayoutDashboardIcon />,
       isActive: true,
+      items: [
+        { title: "Visão geral", url: "/dashboard" },
+        { title: "Atividade recente", url: "/dashboard/atividade" },
+        { title: "Relatórios", url: "/dashboard/relatorios" },
+      ],
+    },
+    {
+      title: "Projetos",
+      url: "/projetos",
+      icon: <FolderIcon />,
+      items: [
+        { title: "Todos os projetos", url: "/projetos" },
+        { title: "Em andamento", url: "/projetos/andamento" },
+        { title: "Arquivados", url: "/projetos/arquivados" },
+      ],
+    },
+    {
+      title: "Equipe",
+      url: "/equipe",
+      icon: <UsersIcon />,
+      items: [
+        { title: "Membros", url: "/equipe" },
+        { title: "Funções", url: "/equipe/funcoes" },
+        { title: "Convites", url: "/equipe/convites" },
+      ],
     },
     {
-      title: "Perfil",
-      url: "/perfil",
-      icon: <UserIcon />,
+      title: "Análises",
+      url: "/analises",
+      icon: <BarChart2Icon />,
+      items: [
+        { title: "Desempenho", url: "/analises" },
+        { title: "Tendências", url: "/analises/tendencias" },
+        { title: "Exportar", url: "/analises/exportar" },
+      ],
     },
     {
       title: "Configurações",
       url: "/configuracoes",
       icon: <SettingsIcon />,
+      items: [
+        { title: "Geral", url: "/configuracoes" },
+        { title: "Segurança", url: "/configuracoes/seguranca" },
+        { title: "Integrações", url: "/configuracoes/integracoes" },
+      ],
     },
   ],
 }
@@ -98,7 +140,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
 
   "src/components/nav-main.tsx": `"use client"
 
-import { ChevronRightIcon } from "lucide-react"
+import { useState } from "react"
 import {
   Collapsible,
   CollapsibleContent,
@@ -114,6 +156,7 @@ import {
   SidebarMenuSubButton,
   SidebarMenuSubItem,
 } from "@/components/ui/sidebar"
+import { ChevronRightIcon } from "lucide-react"
 
 type NavItem = {
   title: string
@@ -123,43 +166,52 @@ type NavItem = {
   items?: { title: string; url: string }[]
 }
 
+function NavItemCollapsible({ item }: { item: NavItem }) {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <Collapsible
+      open={open}
+      onOpenChange={setOpen}
+      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((subItem) => (
+              <SidebarMenuSubItem key={subItem.title}>
+                <SidebarMenuSubButton asChild>
+                  <a href={subItem.url}>
+                    <span>{subItem.title}</span>
+                  </a>
+                </SidebarMenuSubButton>
+              </SidebarMenuSubItem>
+            ))}
+          </SidebarMenuSub>
+        </CollapsibleContent>
+      </SidebarMenuItem>
+    </Collapsible>
+  )
+}
+
 export function NavMain({ items }: { items: NavItem[] }) {
   return (
     <SidebarGroup>
-      <SidebarGroupLabel>Menu</SidebarGroupLabel>
+      <SidebarGroupLabel>Módulos</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>
+          item.items ? (
+            <NavItemCollapsible key={item.title} item={item} />
           ) : (
             <SidebarMenuItem key={item.title}>
-              <SidebarMenuButton asChild tooltip={item.title} isActive={item.isActive}>
+              <SidebarMenuButton tooltip={item.title} asChild>
                 <a href={item.url}>
                   {item.icon}
                   <span>{item.title}</span>
@@ -177,14 +229,10 @@ export function NavMain({ items }: { items: NavItem[] }) {
   "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"
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/components/ui/avatar"
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -200,10 +248,17 @@ import {
   SidebarMenuItem,
   useSidebar,
 } from "@/components/ui/sidebar"
+import { ChevronsUpDownIcon, SparklesIcon, BadgeCheckIcon, CreditCardIcon, BellIcon, LogOutIcon } from "lucide-react"
 
-type User = { name: string; email: string; avatar: string }
-
-export function NavUser({ user }: { user: User }) {
+export function NavUser({
+  user,
+}: {
+  user: {
+    name: string
+    email: string
+    avatar: string
+  }
+}) {
   const { isMobile } = useSidebar()
 
   return (
@@ -217,19 +272,17 @@ export function NavUser({ user }: { user: User }) {
             >
               <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>
+                <AvatarFallback className="rounded-lg">CN</AvatarFallback>
               </Avatar>
               <div className="grid flex-1 text-left text-sm leading-tight">
-                <span className="truncate font-semibold">{user.name}</span>
+                <span className="truncate font-medium">{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"
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
             side={isMobile ? "bottom" : "right"}
             align="end"
             sideOffset={4}
@@ -238,12 +291,10 @@ export function NavUser({ user }: { user: User }) {
               <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>
+                  <AvatarFallback className="rounded-lg">CN</AvatarFallback>
                 </Avatar>
                 <div className="grid flex-1 text-left text-sm leading-tight">
-                  <span className="truncate font-semibold">{user.name}</span>
+                  <span className="truncate font-medium">{user.name}</span>
                   <span className="truncate text-xs">{user.email}</span>
                 </div>
               </div>
@@ -252,28 +303,28 @@ export function NavUser({ user }: { user: User }) {
             <DropdownMenuGroup>
               <DropdownMenuItem>
                 <SparklesIcon />
-                Upgrade para Pro
+                Upgrade to Pro
               </DropdownMenuItem>
             </DropdownMenuGroup>
             <DropdownMenuSeparator />
             <DropdownMenuGroup>
               <DropdownMenuItem>
                 <BadgeCheckIcon />
-                Conta
+                Account
               </DropdownMenuItem>
               <DropdownMenuItem>
                 <CreditCardIcon />
-                Faturamento
+                Billing
               </DropdownMenuItem>
               <DropdownMenuItem>
                 <BellIcon />
-                Notificações
+                Notifications
               </DropdownMenuItem>
             </DropdownMenuGroup>
             <DropdownMenuSeparator />
             <DropdownMenuItem>
               <LogOutIcon />
-              Sair
+              Log out
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
@@ -286,13 +337,13 @@ export function NavUser({ user }: { user: User }) {
   "src/components/team-switcher.tsx": `"use client"
 
 import * as React from "react"
-import { ChevronsUpDownIcon, PlusIcon } from "lucide-react"
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuLabel,
   DropdownMenuSeparator,
+  DropdownMenuShortcut,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
 import {
@@ -301,12 +352,21 @@ import {
   SidebarMenuItem,
   useSidebar,
 } from "@/components/ui/sidebar"
+import { ChevronsUpDownIcon, PlusIcon } from "lucide-react"
 
-type Team = { name: string; logo: React.ReactNode; plan: string }
-
-export function TeamSwitcher({ teams }: { teams: Team[] }) {
+export function TeamSwitcher({
+  teams,
+}: {
+  teams: {
+    name: string
+    logo: React.ReactNode
+    plan: string
+  }[]
+}) {
   const { isMobile } = useSidebar()
-  const [active, setActive] = React.useState(teams[0])
+  const [activeTeam, setActiveTeam] = React.useState(teams[0])
+
+  if (!activeTeam) return null
 
   return (
     <SidebarMenu>
@@ -317,18 +377,18 @@ export function TeamSwitcher({ teams }: { teams: Team[] }) {
               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 className="flex aspect-square size-8 items-center justify-center rounded-full bg-sidebar-primary text-sidebar-primary-foreground">
+                {activeTeam.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>
+                <span className="truncate font-medium">{activeTeam.name}</span>
+                <span className="truncate text-xs">{activeTeam.plan}</span>
               </div>
               <ChevronsUpDownIcon className="ml-auto" />
             </SidebarMenuButton>
           </DropdownMenuTrigger>
           <DropdownMenuContent
-            className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
             align="start"
             side={isMobile ? "bottom" : "right"}
             sideOffset={4}
@@ -336,17 +396,22 @@ export function TeamSwitcher({ teams }: { teams: Team[] }) {
             <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">
+            {teams.map((team, index) => (
+              <DropdownMenuItem
+                key={team.name}
+                onClick={() => setActiveTeam(team)}
+                className="gap-2 p-2"
+              >
+                <div className="flex size-6 items-center justify-center rounded-md border">
                   {team.logo}
                 </div>
                 {team.name}
+                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>
               </DropdownMenuItem>
             ))}
             <DropdownMenuSeparator />
             <DropdownMenuItem className="gap-2 p-2">
-              <div className="flex size-6 items-center justify-center rounded-md border bg-background">
+              <div className="flex size-6 items-center justify-center rounded-md border bg-transparent">
                 <PlusIcon className="size-4" />
               </div>
               <div className="font-medium text-muted-foreground">Adicionar time</div>
@@ -374,7 +439,7 @@ export default function AppLayout({ children }: { children: React.ReactNode }) {
 }
 `,
 
-  "src/app/(app)/page.tsx": `export default function Home() {
+  "src/app/(app)/dashboard/page.tsx": `export default function Home() {
   return (
     <div className="p-6">
       <h1 className="text-2xl font-semibold">Dashboard</h1>
@@ -387,7 +452,7 @@ export default function AppLayout({ children }: { children: React.ReactNode }) {
   "src/app/page.tsx": `import { redirect } from "next/navigation"
 
 export default function Root() {
-  redirect("/")
+  redirect("/dashboard")
 }
 `,
 }
@@ -459,13 +524,105 @@ async function main() {
     console.log("✔ lucide-react encontrado")
   }
 
-  // 5. Escrever arquivos da sidebar
+  // 5. Patch no sidebar.tsx: centralizar verticalmente, ajustar altura ao conteúdo e efeito cápsula
+  const sidebarUiPath = path.join(cwd, "src/components/ui/sidebar.tsx")
+  if (fs.existsSync(sidebarUiPath)) {
+    let sidebarUi = fs.readFileSync(sidebarUiPath, "utf8")
+    sidebarUi = sidebarUi.replace(
+      "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear",
+      "fixed top-1/2 -translate-y-1/2 z-10 hidden h-fit w-(--sidebar-width) transition-[left,right,width,height,transform] duration-300 ease-in-out"
+    )
+    sidebarUi = sidebarUi.replace(
+      "group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border",
+      "group-data-[variant=floating]:rounded-2xl group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border group-data-[collapsible=icon]:group-data-[variant=floating]:[animation:sidebar-collapse_300ms_ease-in-out_forwards] group-data-[state=expanded]:group-data-[variant=floating]:[animation:sidebar-expand_0ms_forwards]"
+    )
+    sidebarUi = sidebarUi.replace(
+      "transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8",
+      "transition-[width,height,padding] duration-200 group-has-data-[sidebar=menu-action]/menu-item:pr-8"
+    )
+    sidebarUi = sidebarUi.replace(
+      "[&>span:last-child]:truncate",
+      "[&>span:last-child]:truncate [&>span:last-child]:transition-[opacity] [&>span:last-child]:duration-100 [&>span:last-child]:ease-in group-data-[collapsible=icon]:[&>span:last-child]:opacity-0"
+    )
+    fs.writeFileSync(sidebarUiPath, sidebarUi, "utf8")
+    console.log("  ✔ src/components/ui/sidebar.tsx (centralizada + cápsula)")
+  }
+
+  // 6. 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}`)
   }
 
+  // 7. Patch no globals.css: animação dos collapsibles
+  const globalsCssPath = path.join(cwd, "src/app/globals.css")
+  if (fs.existsSync(globalsCssPath)) {
+    let css = fs.readFileSync(globalsCssPath, "utf8")
+    const needsCollapsible = !css.includes("collapsible-down")
+    const needsCapsule = !css.includes("sidebar-collapse")
+    if (needsCollapsible || needsCapsule) {
+      const collapsibleCss = needsCollapsible ? `
+@keyframes collapsible-down {
+  from { height: 0; opacity: 0; }
+  to { height: var(--radix-collapsible-content-height); opacity: 1; }
+}
+
+@keyframes collapsible-up {
+  from { height: var(--radix-collapsible-content-height); opacity: 1; }
+  to { height: 0; opacity: 0; }
+}
+
+[data-slot="collapsible-content"] {
+  overflow: hidden;
+}
+
+[data-slot="collapsible-content"][data-state="open"] {
+  animation: collapsible-down 200ms ease-out;
+}
+
+[data-slot="collapsible-content"][data-state="closed"] {
+  animation: collapsible-up 200ms ease-out;
+}
+
+` : ""
+      const capsuleCss = needsCapsule ? `@keyframes sidebar-collapse {
+  0%   { border-radius: calc(var(--radius) * 1.8); }
+  79%  { border-radius: calc(var(--radius) * 1.8); }
+  100% { border-radius: 9999px; }
+}
+
+@keyframes sidebar-expand {
+  from { border-radius: calc(var(--radius) * 1.8); }
+  to   { border-radius: calc(var(--radius) * 1.8); }
+}
+
+` : ""
+      css = css.replace(/@layer base \{/, capsuleCss + collapsibleCss + "@layer base {")
+      fs.writeFileSync(globalsCssPath, css, "utf8")
+      console.log("  ✔ src/app/globals.css (animação collapsible)")
+    }
+  }
+
+  // 6. Patch no root layout para adicionar TooltipProvider
+  const rootLayoutPath = path.join(cwd, "src/app/layout.tsx")
+  if (fs.existsSync(rootLayoutPath)) {
+    let rootLayout = fs.readFileSync(rootLayoutPath, "utf8")
+    if (!rootLayout.includes("TooltipProvider")) {
+      rootLayout = rootLayout.replace(
+        /^(import .+from .+;\n)/m,
+        `$1import { TooltipProvider } from "@/components/ui/tooltip"\n`
+      )
+      rootLayout = rootLayout.replace(/<body([^>]*)>(\s*)\{children\}/, `<body$1>$2<TooltipProvider>{children}</TooltipProvider>`)
+      rootLayout = rootLayout.replace(/<html([^>]*?)className="([^"]*)"/, (_, attrs, cls) => {
+        if (cls.includes("dark")) return `<html${attrs}className="${cls}"`
+        return `<html${attrs}className="${cls} dark"`
+      })
+      fs.writeFileSync(rootLayoutPath, rootLayout, "utf8")
+      console.log("  ✔ src/app/layout.tsx (TooltipProvider + dark mode)")
+    }
+  }
+
   console.log("\n✔ Sidebar instalada com sucesso!")
   console.log("\nPróximo passo:\n  pnpm dev\n")
 }

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@hznrkv/sidebar",
-  "version": "1.0.0",
+  "version": "1.1.2",
   "description": "CLI para instalar a sidebar @hznrkv em projetos Next.js + Shadcn",
   "bin": {
-    "sidebar": "./index.js"
+    "@hznrkv/sidebar": "./index.js"
   },
   "type": "module",
   "dependencies": {
@@ -13,4 +13,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}