Contador

"use client";

import { useEffect, useRef, useState } from "react";
import { useEmTela, useSemMovimento } from "@/library/revelar/Movimento";

/** Saída suave (como o "power2.out"): rápida no começo, devagar perto do valor final. */
const suavizar = (t: number) => 1 - (1 - t) ** 2;

/**
 * Número que conta de `de` até `valor` quando entra na tela e depois fica parado.
 * É só a animação: um texto inline que herda fonte, tamanho e cor de onde for
 * usado (um título, um card, uma frase). O layout fica com quem o usa.
 *
 * O número animado é só visual (`aria-hidden`): leitores de tela recebem o valor
 * final de uma vez, num texto escondido. Uma cópia invisível do valor final
 * reserva a largura, então o texto em volta não pula durante a contagem. Com
 * "reduzir movimento" o valor final aparece direto.
 */
export function Contador({
  valor,
  de = 0,
  duracao = 1400,
  casas = 0,
  prefixo = "",
  sufixo = "",
  formatar,
  rotuloAcessivel,
  className,
}: {
  /** Valor final da contagem. */
  valor: number;
  /** Valor de onde a contagem parte. */
  de?: number;
  /** Duração (ms) da contagem. */
  duracao?: number;
  /** Casas decimais mostradas durante e no fim da contagem. */
  casas?: number;
  /** Texto antes do número ("R$ "). */
  prefixo?: string;
  /** Texto depois do número ("+", "%", " mil"). */
  sufixo?: string;
  /** Formata o número (já arredondado em `casas`). Padrão: separadores do pt-BR. */
  formatar?: (n: number) => string;
  /** O que os leitores de tela leem no lugar do número. Padrão: o valor final com prefixo e sufixo. */
  rotuloAcessivel?: string;
  /** Classes extras do número. Sem elas, herda o estilo do texto em volta. */
  className?: string;
}) {
  const ref = useRef<HTMLSpanElement>(null);
  const semMovimento = useSemMovimento();
  const emTela = useEmTela(ref, { margem: "0px 0px -15% 0px" });
  const [atual, setAtual] = useState(de);

  useEffect(() => {
    if (!emTela || semMovimento) return;
    let quadro = 0;
    const inicio = performance.now();
    const passo = (agora: number) => {
      const t = duracao > 0 ? Math.min((agora - inicio) / duracao, 1) : 1;
      setAtual(de + (valor - de) * suavizar(t));
      if (t < 1) quadro = requestAnimationFrame(passo);
    };
    quadro = requestAnimationFrame(passo);
    return () => cancelAnimationFrame(quadro);
  }, [emTela, semMovimento, de, valor, duracao]);

  const escrever = (n: number) => {
    const arredondado = Number(n.toFixed(casas));
    const numero = formatar
      ? formatar(arredondado)
      : arredondado.toLocaleString("pt-BR", { minimumFractionDigits: casas, maximumFractionDigits: casas });
    return `${prefixo}${numero}${sufixo}`;
  };

  const final = escrever(valor);
  const mostrado = semMovimento ? final : escrever(atual);

  return (
    <span ref={ref} className={className}>
      {/* Valor final invisível na mesma célula da grade: guarda a largura máxima. */}
      <span aria-hidden="true" className="inline-grid tabular-nums">
        <span className="invisible col-start-1 row-start-1">{final}</span>
        <span className="col-start-1 row-start-1">{mostrado}</span>
      </span>
      <span className="sr-only">{rotuloAcessivel ?? final}</span>
    </span>
  );
}

import { useState } from "react";
import { defineStories } from "@/registry/stories";
import { NumerosPrincipais } from "@/library/numeros-principais/NumerosPrincipais";
import { Contador } from "./Contador";

type Valores = {
  valor: number;
  de: number;
  duracao: number;
  casas: number;
  prefixo: string;
  sufixo: string;
};

/** Playground com um botão para ver a contagem de novo (a chave remonta o contador). */
function ExemploComRepetir(a: Valores) {
  const [vez, setVez] = useState(0);
  return (
    <div className="flex flex-col items-center gap-6 text-center">
      <span className="font-display text-6xl leading-none font-extrabold tracking-[-0.03em] text-accent">
        <Contador key={vez} valor={a.valor} de={a.de} duracao={a.duracao} casas={a.casas} prefixo={a.prefixo} sufixo={a.sufixo} />
      </span>
      <button
        type="button"
        onClick={() => setVez((v) => v + 1)}
        className="rounded-full border border-rule-strong px-4 py-2 text-sm font-medium text-ink outline-accent hover:bg-surface focus-visible:outline-2 focus-visible:outline-offset-2"
      >
        Contar de novo
      </button>
    </div>
  );
}

export default defineStories({
  args: { valor: 25, de: 0, duracao: 1400, casas: 0, prefixo: "", sufixo: "+" },
  controls: {
    valor: { type: "number", step: 1 },
    de: { type: "number", step: 1 },
    duracao: { type: "number", label: "duracao (ms)", min: 0, max: 5000, step: 100 },
    casas: { type: "number", label: "casas decimais", min: 0, max: 3 },
    prefixo: { type: "text" },
    sufixo: { type: "text" },
  },
  render: (a) => <ExemploComRepetir {...a} />,
  stories: [
    { name: "Padrão" },
    {
      name: "Dentro de uma frase",
      render: () => (
        <p className="max-w-md text-lg leading-relaxed text-ink-2">
          Já atendemos <Contador valor={1280} className="font-semibold text-ink" /> clientes, com{" "}
          <Contador valor={98.6} casas={1} sufixo="%" className="font-semibold text-ink" /> dos pedidos entregues no prazo.
        </p>
      ),
    },
    {
      name: "Em Números Principais",
      render: () => (
        <div className="w-full">
          <NumerosPrincipais
            itens={[
              { valor: <Contador valor={48} prefixo="R$ " sufixo=" mil" />, texto: "de receita em outubro." },
              { valor: <Contador valor={1284} />, texto: "pedidos pagos no mês." },
              { valor: <Contador valor={3.2} casas={1} sufixo="%" />, texto: "dos visitantes compraram algo." },
            ]}
          />
        </div>
      ),
    },
    { name: "Contagem regressiva", args: { valor: 0, de: 100, duracao: 2000, sufixo: "%" } },
  ],
});