Portal Aluno Tour

Componente de tour guiado customizado usando HeroUI para o Portal do Aluno.

Instalação

npm install @elogroup-sereduc/portal-aluno-tour

Configuração do Tailwind

Este pacote usa @elogroup-sereduc/portal-aluno-tailwind-config com o prefixo tour:.

O CSS do Tailwind é gerado automaticamente durante o build e está disponível em dist/tour.css.

Importar o CSS

Você precisa importar o CSS do pacote no seu projeto:

import "@elogroup-sereduc/portal-aluno-tour/dist/tour.css";

Ou no seu arquivo CSS principal:

@import "@elogroup-sereduc/portal-aluno-tour/dist/tour.css";

Uso

import { Tour } from "@elogroup-sereduc/portal-aluno-tour";
import { useState } from "react";

function MyComponent() {
  const [tourEnabled, setTourEnabled] = useState(false);

  const steps = [
    {
      element: "my-element", // Usa data-onboard="my-element"
      intro: "Este é o primeiro passo do tour",
      position: "bottom",
    },
    {
      element: ".another-element", // Seletor CSS também funciona
      intro: "Este é o segundo passo",
      position: "right",
    },
  ];

  return (
    <>
      <button onClick={() => setTourEnabled(true)}>Iniciar Tour</button>
      <Tour
        enabled={tourEnabled}
        steps={steps}
        onExit={() => setTourEnabled(false)}
        options={{
          nextLabel: "Próximo",
          prevLabel: "Anterior",
          skipLabel: "Pular",
          doneLabel: "Concluir",
        }}
      />
    </>
  );
}

Props

TourProps

• enabled: boolean - Se o tour está ativo
• steps: TourStep[] - Array de passos do tour
• initialStep?: number - Passo inicial (padrão: 0)
• options?: TourOptions - Opções de configuração
• onExit?: () => void - Callback quando o tour é encerrado
• onComplete?: () => void - Callback quando o tour é concluído

TourStep

• element: string - Seletor CSS do elemento ou valor do atributo data-onboard
  • Se começar com ., #, [, :, >, +, ~, ou espaço: usa como seletor CSS
  • Caso contrário: busca [data-onboard="valor"]
  • Exemplo: element: "student-card" busca [data-onboard="student-card"]
  • Exemplo: element: ".my-class" usa o seletor CSS .my-class
• intro: string - Texto explicativo
• position?: "top" | "bottom" | "left" | "right" - Posição da tooltip
• title?: string - Título do passo (opcional)

TourOptions

• nextLabel?: string - Label do botão "Próximo"
• prevLabel?: string - Label do botão "Anterior"
• skipLabel?: string - Label do botão "Pular"
• doneLabel?: string - Label do botão "Concluir"
• showProgress?: boolean - Mostrar barra de progresso
• showBullets?: boolean - Mostrar bullets de navegação
• exitOnOverlayClick?: boolean - Permitir fechar clicando no overlay
• exitOnEsc?: boolean - Permitir fechar com ESC