@softize/opus 13.0.0 → 14.0.0

package/src/ui/components/patterns/shell-nav.tsx

@@ -1,147 +0,0 @@
-/**
- * <ShellNav /> — o menu como primitivo PIVOTÁVEL. Um nav (grupos → itens, com heading e
- * âncora inferior) que serve os DOIS lares do chrome sem flag:
- *
- *   - dentro de <Sidebar> → recolhe pra ícone-só (com tooltip) junto com a coluna;
- *   - fora de <Sidebar> → permanece expandido.
- *
- * "Tanto faz onde": o componente se adapta ao lugar, sem "modo" configurado.
- *
- * Presentacional e CONTROLADO — o app é dono do `activeId`, do clique e do roteamento.
- * v1 PLANA (grupos → itens); aninhamento (accordion/pasta) e DnD COMPOSTO entram quando o
- * primeiro consumidor de árvore migrar — ver `docs/shellnav.md`.
- */
-
-import type { ReactNode } from 'react'
-import { cn } from '../../lib/cn.ts'
-import { useSidebarCollapsed } from './sidebar.tsx'
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../primitives/tooltip.tsx'
-
-export interface ShellNavItem {
-  /** Coordenada estável — volta em `onSelect` e casa com `activeId`. Único em toda a nav. */
-  id: string
-  label: string
-  /** Ícone à esquerda (é o que sobra no modo recolhido — vira o alvo, com o label no tooltip). */
-  icon?: ReactNode
-  /** Selo à direita (contagem, `beta`). Some no recolhido. */
-  badge?: ReactNode
-  /** Visível mas inerte. */
-  disabled?: boolean
-}
-
-export interface ShellNavGroup {
-  /** Cabeçalho do grupo. Ausente/vazio = itens soltos, sem rótulo. Some no recolhido. */
-  label?: string
-  items: ShellNavItem[]
-}
-
-export interface ShellNavProps {
-  groups: ShellNavGroup[]
-  /** `id` do item ativo. Ausente = nenhum destacado. */
-  activeId?: string
-  onSelect: (id: string) => void
-  /** Topo do nav — título, busca, botão (ex.: o "+" do Relatórios). Some no recolhido. Ver <ShellNavHeading>. */
-  heading?: ReactNode
-  /** Grupos ANCORADOS embaixo (ex.: Configurações no app), mesmo renderer, separados por filete. */
-  footer?: ShellNavGroup[]
-  /** Rótulo da landmark `<nav>`. */
-  navLabel?: string
-  /** Classes da raiz (a coluna). A largura vem do pane/sidebar que a contém. */
-  className?: string
-}
-
-/** Rótulo só existe se tiver texto — vazio não vira cabeçalho fantasma. */
-const titled = (label?: string): boolean => (label ?? '').trim() !== ''
-
-/** Selo vazio não vira pílula sem texto. `0` conta (contagem legítima). */
-const shown = (badge: ReactNode): boolean => {
-  if (badge === undefined || badge === null || badge === false || badge === '') return false
-  if (typeof badge === 'number' && Number.isNaN(badge)) return false
-  return !(Array.isArray(badge) && badge.length === 0)
-}
-
-/** Grupo sem item não abre buraco no `space-y` nem deixa rótulo pairando sobre nada. */
-const filled = (group: ShellNavGroup): boolean => group.items.length > 0
-
-function renderItem(item: ShellNavItem, activeId: string | undefined, onSelect: (id: string) => void, railed: boolean): React.ReactElement {
-  const active = item.id === activeId
-  const button = (
-    <button
-      type="button"
-      disabled={item.disabled}
-      aria-current={active ? 'page' : undefined}
-      onClick={() => onSelect(item.id)}
-      className={cn(
-        'flex w-full items-center gap-2.5 rounded-md py-1.5 text-left text-sm transition-colors',
-        'disabled:pointer-events-none disabled:opacity-40',
-        'outline-none focus-visible:ring-2 focus-visible:ring-ring/50',
-        railed ? 'justify-center px-0' : 'px-2.5',
-        active ? 'bg-muted font-medium text-foreground' : 'text-foreground/80 hover:bg-muted/60',
-      )}
-    >
-      {item.icon !== undefined && <span className="flex shrink-0">{item.icon}</span>}
-      {!railed && <span className="min-w-0 flex-1 truncate">{item.label}</span>}
-      {!railed && shown(item.badge) && <span className="shrink-0">{item.badge}</span>}
-    </button>
-  )
-  if (!railed) return <div key={item.id}>{button}</div>
-  // Recolhido: o label migra pro tooltip (à direita) — sem ele, a coluna vira ícones adivinháveis.
-  return (
-    <Tooltip key={item.id}>
-      <TooltipTrigger asChild>{button}</TooltipTrigger>
-      <TooltipContent side="right">{item.label}</TooltipContent>
-    </Tooltip>
-  )
-}
-
-function renderGroup(group: ShellNavGroup, gi: number, activeId: string | undefined, onSelect: (id: string) => void, railed: boolean): React.ReactElement | null {
-  if (!filled(group)) return null
-  return (
-    <div key={gi} className="space-y-0.5">
-      {!railed && titled(group.label) && (
-        <div className="px-2.5 pb-1 text-xs font-medium text-muted-foreground/70">{group.label}</div>
-      )}
-      {group.items.map((item) => renderItem(item, activeId, onSelect, railed))}
-    </div>
-  )
-}
-
-export function ShellNav({ groups, activeId, onSelect, heading, footer, navLabel = 'Navegação', className }: ShellNavProps): React.ReactElement {
-  const railed = useSidebarCollapsed()
-
-  const body = (
-    <div data-slot="shell-nav" className={cn('flex h-full min-h-0 flex-col', className)}>
-      {!railed && heading}
-      <nav aria-label={navLabel} className={cn('min-h-0 flex-1 space-y-4 overflow-y-auto p-2', railed && 'px-1.5')}>
-        {groups.map((group, gi) => renderGroup(group, gi, activeId, onSelect, railed))}
-      </nav>
-      {footer !== undefined && footer.some(filled) && (
-        <div className={cn('space-y-4 border-t border-border p-2', railed && 'px-1.5')}>
-          {footer.map((group, gi) => renderGroup(group, gi, activeId, onSelect, railed))}
-        </div>
-      )}
-    </div>
-  )
-
-  // Recolhido usa tooltips — garante um provider (nested é ok se o app já tem um).
-  return railed ? <TooltipProvider delayDuration={200}>{body}</TooltipProvider> : body
-}
-
-export interface ShellNavHeadingProps {
-  /** Título da seção. */
-  title: ReactNode
-  /** Ação à direita — em geral um botão (o "+" de criar). */
-  action?: ReactNode
-  className?: string
-}
-
-/** Cabeçalho padrão do ShellNav: título + espaço pra um botão. É o gesto que hoje cada
- *  nav monta à mão (o "+" do Relatórios, o título de Configurações). */
-export function ShellNavHeading({ title, action, className }: ShellNavHeadingProps): React.ReactElement {
-  return (
-    <div className={cn('flex h-12 shrink-0 items-center gap-1.5 border-b border-border px-4', className)}>
-      <span className="min-w-0 flex-1 truncate text-sm font-semibold">{title}</span>
-      {action !== undefined && <span className="shrink-0">{action}</span>}
-    </div>
-  )
-}