Steps

Apresentação

O componente Steps é responsável por criar indicadores de progresso que mostram ao usuário em qual etapa de um processo ele se encontra. Ele suporta diferentes tipos de conteúdo para cada etapa e pode ser configurado para ser scrollável quando há muitas etapas.

Quando usar

• Para mostrar progresso em formulários multi-etapa
• Para indicar etapas de um processo
• Para criar wizards de configuração
• Para mostrar progresso de checkout
• Para indicar etapas de onboarding
• Para criar fluxos de trabalho
• Para mostrar progresso de instalação
• Para indicar etapas de configuração

Forma básica de uso

import { Steps } from 'eitri-luminus';

// Steps básico
<Steps>
  <Steps.Step>Etapa 1</Steps.Step>
  <Steps.Step>Etapa 2</Steps.Step>
  <Steps.Step>Etapa 3</Steps.Step>
</Steps>

// Steps com conteúdo personalizado
<Steps>
  <Steps.Step dataContent="1">Informações Pessoais</Steps.Step>
  <Steps.Step dataContent="2">Endereço</Steps.Step>
  <Steps.Step dataContent="3">Pagamento</Steps.Step>
  <Steps.Step dataContent="4">Confirmação</Steps.Step>
</Steps>

// Steps com classes personalizadas
<Steps className="steps-horizontal">
  <Steps.Step className="step-primary">Início</Steps.Step>
  <Steps.Step className="step-secondary">Processando</Steps.Step>
  <Steps.Step className="step-accent">Finalizado</Steps.Step>
</Steps>

// Steps scrollável
<Steps scrollable>
  <Steps.Step dataContent="1">Etapa 1</Steps.Step>
  <Steps.Step dataContent="2">Etapa 2</Steps.Step>
  <Steps.Step dataContent="3">Etapa 3</Steps.Step>
  <Steps.Step dataContent="4">Etapa 4</Steps.Step>
  <Steps.Step dataContent="5">Etapa 5</Steps.Step>
  <Steps.Step dataContent="6">Etapa 6</Steps.Step>
</Steps>

// Steps responsivo
<Steps className="steps-vertical lg:steps-horizontal">
  <Steps.Step dataContent="1">Configuração</Steps.Step>
  <Steps.Step dataContent="2">Validação</Steps.Step>
  <Steps.Step dataContent="3">Ativação</Steps.Step>
</Steps>

// Steps com identificador
<Steps id="processo-cadastro">
  <Steps.Step dataContent="1">Dados Básicos</Steps.Step>
  <Steps.Step dataContent="2">Verificação</Steps.Step>
  <Steps.Step dataContent="3">Ativação</Steps.Step>
</Steps>

// Steps com layout flexível
<Steps 
  display="flex"
  justifyContent="center"
  gap="4"
>
  <Steps.Step dataContent="1">Passo 1</Steps.Step>
  <Steps.Step dataContent="2">Passo 2</Steps.Step>
  <Steps.Step dataContent="3">Passo 3</Steps.Step>
</Steps>

// Steps para checkout
<Steps>
  <Steps.Step dataContent="1">Carrinho</Steps.Step>
  <Steps.Step dataContent="2">Endereço</Steps.Step>
  <Steps.Step dataContent="3">Pagamento</Steps.Step>
  <Steps.Step dataContent="4">Confirmação</Steps.Step>
</Steps>

// Steps com ícones
<Steps>
  <Steps.Step dataContent="📝">Preenchimento</Steps.Step>
  <Steps.Step dataContent="✅">Validação</Steps.Step>
  <Steps.Step dataContent="🎉">Conclusão</Steps.Step>
</Steps>

// Steps para onboarding
<Steps>
  <Steps.Step dataContent="👋">Boas-vindas</Steps.Step>
  <Steps.Step dataContent="⚙️">Configuração</Steps.Step>
  <Steps.Step dataContent="📚">Tutorial</Steps.Step>
  <Steps.Step dataContent="🚀">Pronto!</Steps.Step>
</Steps>

Propriedades

Propriedade	Tipo	Descrição
children	ReactNode	Conteúdo do steps (Steps)
scrollable	boolean	Habilita scroll horizontal quando há muitas etapas
className	string	Classes CSS adicionais
id	string	Identificador único do componente

Steps.Step

Propriedade	Tipo	Descrição
children	ReactNode	Conteúdo do step
dataContent	string	Conteúdo exibido no indicador do step
className	string	Classes CSS adicionais
id	string	Identificador único do componente

Heranças

O componente Steps herda todas as propriedades comuns da biblioteca através da interface CommonProps, que inclui:

• Propriedades de estilo (margin, padding, etc)
• Propriedades de layout (flex, grid, etc)
• Propriedades de posicionamento
• Propriedades de acessibilidade
• Propriedades de identificação (id, data-e)

Métodos via Ref

O componente Steps expõe métodos públicos que podem ser acessados através de uma ref:

import { useRef } from 'react';
import { Steps, Button } from 'eitri-luminus';

function MyComponent() {
  const stepsRef = useRef<Steps>(null);

  const handleNext = () => {
    stepsRef.current?.next();
  };

  const handlePrev = () => {
    stepsRef.current?.prev();
  };

  const handleGoToStep = (index: number) => {
    stepsRef.current?.goToStep(index);
  };

  const handleGetInfo = () => {
    const current = stepsRef.current?.getCurrentStep() || 0;
    const total = stepsRef.current?.getTotalSteps() || 0;
    const isFirst = stepsRef.current?.isFirstStep() || false;
    const isLast = stepsRef.current?.isLastStep() || false;
    console.log({ current, total, isFirst, isLast });
  };

  return (
    <>
      <Steps ref={stepsRef}>
        <Steps.Step dataContent="1">Etapa 1</Steps.Step>
        <Steps.Step dataContent="2">Etapa 2</Steps.Step>
        <Steps.Step dataContent="3">Etapa 3</Steps.Step>
      </Steps>
      <Button onClick={handlePrev}>Anterior</Button>
      <Button onClick={handleNext}>Próximo</Button>
      <Button onClick={() => handleGoToStep(0)}>Ir para Etapa 1</Button>
      <Button onClick={handleGetInfo}>Ver Informações</Button>
    </>
  );
}

Métodos Disponíveis

Método	Tipo	Descrição
goToStep(index: number)	void	Vai para o step no índice especificado
next()	void	Vai para o próximo step
prev()	void	Vai para o step anterior
getCurrentStep()	number	Retorna o índice do step atual
getTotalSteps()	number	Retorna o número total de steps
isFirstStep()	boolean	Retorna se está no primeiro step
isLastStep()	boolean	Retorna se está no último step

Observações

• O componente usa a classe 'steps' para estilização base
• Cada step usa a classe 'step' individualmente
• Mantém a semântica HTML apropriada com <ul> e <li>
• É responsivo por padrão
• Pode ser estilizado com classes do Tailwind
• Suporta propriedades de layout flexíveis
• Mantém a acessibilidade por padrão
• Pode ser usado em qualquer contexto de layout
• Suporta diferentes tamanhos de conteúdo
• Pode ser combinado com outros componentes
• Ideal para indicar progresso
• Suporta estilos inline e classes CSS
• Pode ser usado para diferentes tipos de processo
• Funciona bem com formulários multi-etapa
• Facilita a navegação do usuário
• Métodos via ref disponíveis para controle programático dos steps