Abas (controle segmentado)

"use client";

import { useRef, type KeyboardEvent, type ReactNode } from "react";

export type OpcaoDeAba<T extends string> = {
  valor: T;
  /** O texto da opção. Comece com maiúscula. */
  rotulo: string;
  /** Número ao lado do rótulo ("Pendentes 12"). */
  contador?: number;
  /** Ícone antes do rótulo (SVG; sem classe de tamanho, fica com size-4). */
  icone?: ReactNode;
  /** Texto ao passar o mouse. */
  dica?: string;
};

const TAMANHOS = {
  sm: { casca: "gap-0.5 p-0.5", raio: "rounded-[max(var(--radius-sm),calc(var(--radius-lg)_-_var(--spacing)*0.5))]", opcao: "h-7 px-2.5 text-xs" },
  md: { casca: "gap-1 p-1", raio: "rounded-[max(var(--radius-sm),calc(var(--radius-lg)_-_var(--spacing)*1))]", opcao: "h-8 px-3 text-sm" },
} as const;

/**
 * Controle segmentado: uma barra de opções em que só uma fica ativa, para trocar
 * a visão, o período ou o filtro de uma lista. Controlado (quem usa guarda o
 * valor). Setas ←/→ andam entre as opções, Home/End vão às pontas, e só a
 * opção ativa fica na ordem do Tab.
 */
export function Abas<T extends string>({
  valor,
  aoMudar,
  opcoes,
  rotulo,
  tamanho = "md",
  bloco = false,
  quebrar = false,
  desabilitado = false,
  className = "",
}: {
  /** A opção ativa. */
  valor: T;
  aoMudar: (valor: T) => void;
  opcoes: ReadonlyArray<OpcaoDeAba<T>>;
  /** Nome do grupo para leitores de tela ("Período do relatório"). */
  rotulo: string;
  /** `md` acompanha botões e campos de tamanho médio; `sm` é para barras densas. */
  tamanho?: keyof typeof TAMANHOS;
  /** Ocupa a largura do contêiner, com as opções dividindo o espaço em partes iguais. */
  bloco?: boolean;
  /** Deixa as opções quebrarem para a linha de baixo em telas estreitas (rótulos longos ou muitas opções). */
  quebrar?: boolean;
  /** Desliga a barra inteira (por exemplo, enquanto a troca anterior carrega). */
  desabilitado?: boolean;
  className?: string;
}) {
  const botoes = useRef<(HTMLButtonElement | null)[]>([]);
  const t = TAMANHOS[tamanho];
  // Roving tabindex: a ativa (ou a primeira, se o valor não está nas opções) recebe o Tab.
  const indiceDoTab = Math.max(0, opcoes.findIndex((o) => o.valor === valor));

  function aoTeclar(e: KeyboardEvent<HTMLDivElement>) {
    const atual = botoes.current.findIndex((b) => b === e.target);
    if (atual < 0) return;
    const n = opcoes.length;
    // As setas dão a volta nas pontas.
    const destinos: Record<string, number> = {
      ArrowRight: (atual + 1) % n,
      ArrowLeft: (atual - 1 + n) % n,
      Home: 0,
      End: n - 1,
    };
    const destino = destinos[e.key];
    if (destino === undefined) return;
    e.preventDefault();
    botoes.current[destino]?.focus();
  }

  return (
    // Não é role="tablist": tablist promete um tabpanel ligado a cada aba (aria-controls),
    // e aqui as opções trocam um conteúdo que o componente não conhece (a página, um
    // gráfico, o filtro de uma lista). Um grupo de botões com aria-pressed descreve o
    // que de fato acontece. As setas seguem o padrão de barra de ferramentas: movem o
    // foco, e Enter/Espaço escolhem.
    <div
      role="group"
      aria-label={rotulo}
      onKeyDown={aoTeclar}
      // Sem `quebrar`, opções que não cabem rolam na horizontal em vez de vazar da tela
      className={`${bloco ? "flex w-full" : "inline-flex max-w-full"} ${quebrar ? "flex-wrap" : "overflow-x-auto [scrollbar-width:none]"} items-center rounded-lg border border-rule bg-surface ${t.casca} ${className}`}
    >
      {opcoes.map((o, i) => {
        const ativa = o.valor === valor;
        return (
          <button
            key={o.valor}
            ref={(el) => {
              botoes.current[i] = el;
            }}
            type="button"
            aria-pressed={ativa}
            tabIndex={i === indiceDoTab ? 0 : -1}
            title={o.dica}
            disabled={desabilitado}
            onClick={() => aoMudar(o.valor)}
            className={`inline-flex cursor-pointer items-center gap-1.5 ${t.raio} font-medium whitespace-nowrap transition-colors outline-accent focus-visible:outline-2 focus-visible:outline-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 ${t.opcao} ${
              bloco ? "flex-1 justify-center" : ""
            } ${ativa ? "bg-page text-accent ring-1 ring-rule" : "text-ink-2 hover:text-ink"}`}
          >
            {o.icone}
            {o.rotulo}
            {typeof o.contador === "number" && (
              <span className={`tabular-nums ${ativa ? "text-accent" : "text-muted"}`}>{o.contador}</span>
            )}
          </button>
        );
      })}
    </div>
  );
}

import { useState, type ReactNode } from "react";
import { defineStories } from "@/registry/stories";
import { Abas, type OpcaoDeAba } from "./Abas";

function Icone({ children }: { children: ReactNode }) {
  return (
    <svg
      aria-hidden="true"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={2}
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      {children}
    </svg>
  );
}

const PERIODOS = [
  { valor: "7d", rotulo: "7 dias" },
  { valor: "30d", rotulo: "30 dias" },
  { valor: "90d", rotulo: "90 dias" },
  { valor: "12m", rotulo: "12 meses" },
] as const;

const SITUACOES = [
  { valor: "todas", rotulo: "Todas", contador: 48 },
  { valor: "pendentes", rotulo: "Pendentes", contador: 12 },
  { valor: "concluidas", rotulo: "Concluídas", contador: 36 },
] as const;

const VISOES = [
  {
    valor: "geral",
    rotulo: "Visão geral",
    icone: (
      <Icone>
        <path d="M4 20V10M10 20V4M16 20v-7M22 20H2" />
      </Icone>
    ),
  },
  {
    valor: "equipe",
    rotulo: "Por equipe",
    icone: (
      <Icone>
        <circle cx="9" cy="8" r="3.5" />
        <path d="M2.5 20a6.5 6.5 0 0 1 13 0M16 4.5a3.5 3.5 0 0 1 0 7M18 14a6.5 6.5 0 0 1 3.5 6" />
      </Icone>
    ),
  },
  {
    valor: "produto",
    rotulo: "Por produto",
    icone: (
      <Icone>
        <path d="m12 3 8.5 4.5v9L12 21l-8.5-4.5v-9L12 3zM3.5 7.5 12 12l8.5-4.5M12 12v9" />
      </Icone>
    ),
  },
] as const;

const SECOES = [
  { valor: "perfil", rotulo: "Perfil e preferências" },
  { valor: "equipes", rotulo: "Equipes e permissões" },
  { valor: "integracoes", rotulo: "Integrações" },
  { valor: "cobranca", rotulo: "Cobrança e notas fiscais" },
  { valor: "seguranca", rotulo: "Segurança" },
] as const;

function Exemplo<T extends string>({
  opcoes,
  rotulo,
  ...resto
}: {
  opcoes: ReadonlyArray<OpcaoDeAba<T>>;
  rotulo: string;
  tamanho?: "sm" | "md";
  bloco?: boolean;
  quebrar?: boolean;
  desabilitado?: boolean;
}) {
  const [valor, setValor] = useState<T>(opcoes[0].valor);
  return <Abas valor={valor} aoMudar={setValor} opcoes={opcoes} rotulo={rotulo} {...resto} />;
}

export default defineStories({
  args: { tamanho: "md", comContador: true, bloco: false, quebrar: false, desabilitado: false },
  controls: {
    tamanho: { type: "select", options: ["sm", "md"] },
    comContador: { type: "boolean", label: "contador nas opções" },
    bloco: { type: "boolean" },
    quebrar: { type: "boolean" },
    desabilitado: { type: "boolean" },
  },
  render: (a) => (
    <div className="w-full max-w-md">
      <Exemplo
        rotulo="Situação das tarefas"
        opcoes={a.comContador ? SITUACOES : SITUACOES.map(({ valor, rotulo }) => ({ valor, rotulo }))}
        tamanho={a.tamanho as "sm" | "md"}
        bloco={a.bloco}
        quebrar={a.quebrar}
        desabilitado={a.desabilitado}
      />
    </div>
  ),
  stories: [
    { name: "Padrão" },
    {
      name: "Período e situação",
      render: () => (
        <div className="flex flex-col items-start gap-4">
          <Exemplo rotulo="Período do relatório" opcoes={PERIODOS} />
          <Exemplo rotulo="Situação das tarefas" opcoes={SITUACOES} />
        </div>
      ),
    },
    { name: "Com ícones", render: () => <Exemplo rotulo="Visão do painel" opcoes={VISOES} /> },
    { name: "Pequena", render: () => <Exemplo rotulo="Período do relatório" opcoes={PERIODOS} tamanho="sm" /> },
    {
      name: "Bloco (campo de formulário)",
      render: () => (
        <div className="flex w-full max-w-md flex-col gap-2">
          <span className="text-sm text-ink-2">Destinatários</span>
          <Exemplo
            rotulo="Destinatários"
            bloco
            opcoes={[
              { valor: "todos", rotulo: "Todos" },
              { valor: "equipe", rotulo: "Por equipe" },
              { valor: "escolher", rotulo: "Escolher" },
            ]}
          />
        </div>
      ),
    },
    {
      name: "Quebrando linha",
      render: () => (
        <div className="w-full max-w-sm">
          <Exemplo rotulo="Seções das configurações" opcoes={SECOES} quebrar />
        </div>
      ),
    },
  ],
});