Revelar e Movimento

"use client";

import {
  createContext,
  useContext,
  useEffect,
  useState,
  useSyncExternalStore,
  type ReactNode,
  type RefObject,
} from "react";

const ContextoDeMovimento = createContext(false);

/**
 * Desliga as animações dos componentes abaixo dele: eles aparecem já no estado
 * final. Útil em miniaturas, impressão e testes.
 */
export function ProvedorDeMovimento({ reduzido = true, children }: { reduzido?: boolean; children: ReactNode }) {
  return <ContextoDeMovimento.Provider value={reduzido}>{children}</ContextoDeMovimento.Provider>;
}

const CONSULTA = "(prefers-reduced-motion: reduce)";

function assinar(aviso: () => void) {
  const consulta = matchMedia(CONSULTA);
  consulta.addEventListener("change", aviso);
  return () => consulta.removeEventListener("change", aviso);
}

/** Verdadeiro quando o sistema pede menos movimento ou um ProvedorDeMovimento desligou as animações. */
export function useSemMovimento() {
  const doSistema = useSyncExternalStore(assinar, () => matchMedia(CONSULTA).matches, () => false);
  return useContext(ContextoDeMovimento) || doSistema;
}

/** Fica verdadeiro quando o elemento entra na tela (só na primeira vez, por padrão). */
export function useEmTela<T extends Element>(
  ref: RefObject<T | null>,
  { margem = "0px", limiar = 0, umaVez = true }: { margem?: string; limiar?: number; umaVez?: boolean } = {},
) {
  const [emTela, setEmTela] = useState(false);

  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const observador = new IntersectionObserver(
      ([entrada]) => {
        if (entrada.isIntersecting) {
          setEmTela(true);
          if (umaVez) observador.disconnect();
        } else if (!umaVez) {
          setEmTela(false);
        }
      },
      { rootMargin: margem, threshold: limiar },
    );
    observador.observe(el);
    return () => observador.disconnect();
  }, [ref, margem, limiar, umaVez]);

  return emTela;
}

/** Curva de saída suave usada pelas animações da biblioteca. */
export const CURVA_SUAVE = "cubic-bezier(0.16, 1, 0.3, 1)";

"use client";

import { useRef, type ReactNode } from "react";
import { CURVA_SUAVE, useEmTela, useSemMovimento } from "./Movimento";

/**
 * Faz o conteúdo subir e aparecer quando entra na tela. Com "reduzir movimento"
 * (do sistema ou de um ProvedorDeMovimento), aparece direto, sem animação.
 */
export function Revelar({
  children,
  deslocamento = 32,
  atraso = 0,
  duracao = 800,
  margem = "0px 0px -15% 0px",
  className = "",
}: {
  children: ReactNode;
  /** Distância (px) de onde o conteúdo sobe. */
  deslocamento?: number;
  /** Espera (ms) antes de começar; útil para escalonar vários itens. */
  atraso?: number;
  /** Duração (ms) da animação. */
  duracao?: number;
  /** Margem do IntersectionObserver: o padrão espera o conteúdo entrar 15% na tela. */
  margem?: string;
  className?: string;
}) {
  const ref = useRef<HTMLDivElement>(null);
  const semMovimento = useSemMovimento();
  const emTela = useEmTela(ref, { margem });
  const visivel = semMovimento || emTela;

  return (
    <div
      ref={ref}
      className={className}
      style={{
        opacity: visivel ? 1 : 0,
        transform: visivel ? "none" : `translateY(${deslocamento}px)`,
        transition: semMovimento
          ? undefined
          : `opacity ${duracao}ms ${CURVA_SUAVE} ${atraso}ms, transform ${duracao}ms ${CURVA_SUAVE} ${atraso}ms`,
      }}
    >
      {children}
    </div>
  );
}

import { defineStories } from "@/registry/stories";
import { Revelar } from "./Revelar";

const ITENS = ["Planejamento", "Execução", "Acompanhamento", "Resultados"];

function Cartao({ titulo }: { titulo: string }) {
  return (
    <div className="rounded-2xl border border-rule bg-surface p-6">
      <p className="font-display text-xl font-bold">{titulo}</p>
      <p className="mt-2 text-sm text-ink-2">Cada cartão aparece quando entra na tela.</p>
    </div>
  );
}

export default defineStories({
  args: { deslocamento: 32, duracao: 800, escalonar: 120 },
  controls: {
    deslocamento: { type: "number", min: 0, max: 120, step: 4 },
    duracao: { type: "number", min: 100, max: 2000, step: 100 },
    escalonar: { type: "number", label: "atraso entre itens (ms)", min: 0, max: 400, step: 20 },
  },
  render: (a) => (
    <div className="w-full max-w-3xl">
      <p className="pb-[60vh] text-center text-sm text-muted">Role para baixo dentro do preview ↓</p>
      <div className="grid gap-4 sm:grid-cols-2">
        {ITENS.map((titulo, i) => (
          <Revelar
            key={`${titulo}-${a.deslocamento}-${a.duracao}-${a.escalonar}`}
            deslocamento={a.deslocamento}
            duracao={a.duracao}
            atraso={i * a.escalonar}
          >
            <Cartao titulo={titulo} />
          </Revelar>
        ))}
      </div>
      <div className="h-[40vh]" />
    </div>
  ),
  stories: [
    {
      name: "Cartões",
      render: () => (
        <div className="grid w-full max-w-3xl gap-4 sm:grid-cols-2">
          {ITENS.map((titulo, i) => (
            <Revelar key={titulo} atraso={i * 120}>
              <Cartao titulo={titulo} />
            </Revelar>
          ))}
        </div>
      ),
    },
    { name: "Ao rolar (playground)" },
  ],
});