@elogroup-sereduc/portal-aluno-tour 1.1.1 → 1.1.2

package/postcss.config.js

@@ -1,6 +0,0 @@
-export default {
-  plugins: {
-    "@tailwindcss/postcss": {},
-  },
-};
-

package/src/components/Tour.tsx

@@ -1,638 +0,0 @@
-import { useEffect, useState, useCallback, useRef } from "react";
-import { Button } from "@heroui/button";
-import { TourProps, TourStep } from "../types";
-import { HiXMark, HiChevronLeft, HiChevronRight } from "react-icons/hi2";
-
-/**
- * Componente de tour guiado customizado usando HeroUI
- */
-export function Tour({
-  enabled,
-  steps,
-  initialStep = 0,
-  options = {},
-  onExit,
-  onComplete,
-}: TourProps) {
-  const [currentStep, setCurrentStep] = useState(initialStep);
-  const [isVisible, setIsVisible] = useState(false);
-  const [highlightedElement, setHighlightedElement] = useState<HTMLElement | null>(null);
-  const [tooltipPosition, setTooltipPosition] = useState<{ top: number; left: number; position: string } | null>(null);
-  const overlayRef = useRef<HTMLDivElement>(null);
-  const tooltipRef = useRef<HTMLDivElement>(null);
-  const isConfiguredRef = useRef(false);
-
-  const {
-    nextLabel = "Próximo",
-    prevLabel = "Anterior",
-    skipLabel = "Pular",
-    doneLabel = "Concluir",
-    showProgress = true,
-    showBullets = true,
-    exitOnOverlayClick = false,
-    exitOnEsc = true,
-  } = options;
-
-  // Calcula a posição da tooltip baseado no elemento destacado
-  // Usa getBoundingClientRect() que retorna posições relativas à viewport
-  // Isso mantém a tooltip sempre visível mesmo durante scroll
-  const calculateTooltipPosition = useCallback((element: HTMLElement, position: string | undefined = "auto") => {
-    const rect = element.getBoundingClientRect();
-    const viewportWidth = window.innerWidth;
-    const viewportHeight = window.innerHeight;
-
-    // Tamanho estimado da tooltip
-    const tooltipWidth = 384; // max-w-sm = 384px
-    const tooltipHeight = 250; // altura estimada
-    const spacing = 8; // espaçamento próximo ao elemento
-
-    let top = 0;
-    let left = 0;
-    let finalPosition = position;
-
-    // Verifica se o elemento está visível na viewport
-    const isElementVisible =
-      rect.top < viewportHeight &&
-      rect.bottom > 0 &&
-      rect.left < viewportWidth &&
-      rect.right > 0;
-
-    // Se o elemento não estiver visível, tenta posicionar próximo à borda mais próxima
-    if (!isElementVisible) {
-      // Elemento está fora da viewport - posiciona próximo à borda mais próxima
-      if (rect.bottom < 0) {
-        // Elemento está acima da viewport
-        top = 8;
-        left = Math.max(tooltipWidth / 2 + 8, Math.min(viewportWidth - tooltipWidth / 2 - 8, rect.left + rect.width / 2));
-        finalPosition = "top";
-      } else if (rect.top > viewportHeight) {
-        // Elemento está abaixo da viewport
-        top = viewportHeight - tooltipHeight - 8;
-        left = Math.max(tooltipWidth / 2 + 8, Math.min(viewportWidth - tooltipWidth / 2 - 8, rect.left + rect.width / 2));
-        finalPosition = "bottom";
-      } else {
-        // Elemento está à esquerda ou direita
-        top = Math.max(tooltipHeight / 2 + 8, Math.min(viewportHeight - tooltipHeight / 2 - 8, rect.top + rect.height / 2));
-        if (rect.right < 0) {
-          left = 8;
-          finalPosition = "left";
-        } else {
-          left = viewportWidth - tooltipWidth - 8;
-          finalPosition = "right";
-        }
-      }
-      return { top, left, position: finalPosition };
-    }
-
-    // Calcula espaço disponível em todas as direções
-    const spaceAbove = rect.top;
-    const spaceBelow = viewportHeight - rect.bottom;
-    const spaceLeft = rect.left;
-    const spaceRight = viewportWidth - rect.right;
-
-    // Determina a melhor posição baseado no espaço disponível
-    let bestPosition: "top" | "bottom" | "left" | "right";
-
-    // Se position for "auto" ou não especificado, calcula automaticamente a melhor posição
-    if (!position || position === "auto") {
-      // Escolhe automaticamente a direção com mais espaço disponível
-      const maxSpace = Math.max(spaceAbove, spaceBelow, spaceLeft, spaceRight);
-      if (maxSpace === spaceAbove) bestPosition = "top";
-      else if (maxSpace === spaceBelow) bestPosition = "bottom";
-      else if (maxSpace === spaceLeft) bestPosition = "left";
-      else bestPosition = "right";
-    } else {
-      // Posição específica foi fornecida - tenta usar ela primeiro
-      // Verifica se a posição especificada tem espaço suficiente
-      const hasEnoughSpace =
-        (position === "top" && spaceAbove >= tooltipHeight + spacing + 8) ||
-        (position === "bottom" && spaceBelow >= tooltipHeight + spacing + 8) ||
-        (position === "left" && spaceLeft >= tooltipWidth + spacing + 8) ||
-        (position === "right" && spaceRight >= tooltipWidth + spacing + 8);
-
-      if (hasEnoughSpace) {
-        // Tem espaço suficiente, usa a posição especificada
-        bestPosition = position as "top" | "bottom" | "left" | "right";
-      } else {
-        // Não tem espaço suficiente na posição especificada, escolhe a melhor alternativa
-        // Para posições verticais (top/bottom), compara entre elas
-        if (position === "top" || position === "bottom") {
-          bestPosition = spaceAbove > spaceBelow ? "top" : "bottom";
-        }
-        // Para posições horizontais (left/right), compara entre elas
-        else if (position === "left" || position === "right") {
-          bestPosition = spaceLeft > spaceRight ? "left" : "right";
-        }
-        // Fallback: escolhe a direção com mais espaço
-        else {
-          const maxSpace = Math.max(spaceAbove, spaceBelow, spaceLeft, spaceRight);
-          if (maxSpace === spaceAbove) bestPosition = "top";
-          else if (maxSpace === spaceBelow) bestPosition = "bottom";
-          else if (maxSpace === spaceLeft) bestPosition = "left";
-          else bestPosition = "right";
-        }
-      }
-    }
-
-    // Calcula posição base na melhor direção escolhida
-    switch (bestPosition) {
-      case "top":
-        top = rect.top - spacing;
-        left = rect.left + rect.width / 2;
-        break;
-      case "bottom":
-        top = rect.bottom + spacing;
-        left = rect.left + rect.width / 2;
-        break;
-      case "left":
-        top = rect.top + rect.height / 2;
-        // Para left, a tooltip fica à esquerda do elemento
-        // left é onde a tooltip termina (borda direita), então subtrai a largura
-        left = rect.left - tooltipWidth - spacing;
-        break;
-      case "right":
-        top = rect.top + rect.height / 2;
-        left = rect.right + spacing;
-        break;
-      default:
-        top = rect.bottom + spacing;
-        left = rect.left + rect.width / 2;
-        bestPosition = "bottom";
-    }
-
-    finalPosition = bestPosition;
-
-    // Ajusta horizontalmente para tooltips top/bottom - mantém próximo ao elemento
-    if (finalPosition === "bottom" || finalPosition === "top") {
-      // Centraliza no elemento, mas ajusta apenas se necessário para não sair da tela
-      const elementCenterX = rect.left + rect.width / 2;
-      const minLeft = tooltipWidth / 2 + 8;
-      const maxLeft = viewportWidth - tooltipWidth / 2 - 8;
-
-      // Mantém o mais próximo possível do centro do elemento
-      if (elementCenterX < minLeft) {
-        left = minLeft;
-      } else if (elementCenterX > maxLeft) {
-        left = maxLeft;
-      } else {
-        left = elementCenterX; // Mantém centralizado no elemento
-      }
-
-      // Verifica espaço vertical e ajusta posição se necessário
-      if (finalPosition === "bottom") {
-        const spaceBelow = viewportHeight - rect.bottom;
-        if (spaceBelow < tooltipHeight + spacing + 8) {
-          const spaceAbove = rect.top;
-          if (spaceAbove > spaceBelow && spaceAbove > tooltipHeight + spacing + 8) {
-            top = rect.top - spacing;
-            finalPosition = "top";
-          } else {
-            // Mantém próximo ao elemento mesmo se não couber perfeitamente
-            top = rect.bottom + spacing;
-          }
-        }
-      } else if (finalPosition === "top") {
-        const spaceAbove = rect.top;
-        if (spaceAbove < tooltipHeight + spacing + 8) {
-          const spaceBelow = viewportHeight - rect.bottom;
-          if (spaceBelow > spaceAbove && spaceBelow > tooltipHeight + spacing + 8) {
-            top = rect.bottom + spacing;
-            finalPosition = "bottom";
-          } else {
-            // Mantém próximo ao elemento mesmo se não couber perfeitamente
-            top = rect.top - spacing;
-          }
-        }
-      }
-    }
-    // Ajusta verticalmente para tooltips left/right - mantém próximo ao elemento
-    else if (finalPosition === "left" || finalPosition === "right") {
-      // Centraliza no elemento verticalmente
-      const elementCenterY = rect.top + rect.height / 2;
-      const minTop = tooltipHeight / 2 + 8;
-      const maxTop = viewportHeight - tooltipHeight / 2 - 8;
-
-      // Mantém o mais próximo possível do centro do elemento
-      if (elementCenterY < minTop) {
-        top = minTop;
-      } else if (elementCenterY > maxTop) {
-        top = maxTop;
-      } else {
-        top = elementCenterY; // Mantém centralizado no elemento
-      }
-
-      // Verifica espaço horizontal e ajusta posição se necessário
-      if (finalPosition === "left") {
-        const spaceLeft = rect.left;
-        if (spaceLeft < tooltipWidth + spacing + 8) {
-          const spaceRight = viewportWidth - rect.right;
-          if (spaceRight > spaceLeft && spaceRight > tooltipWidth + spacing + 8) {
-            // Muda para direita se houver mais espaço
-            left = rect.right + spacing;
-            finalPosition = "right";
-          } else {
-            // Mantém à esquerda, mas ajusta para ficar visível
-            left = Math.max(8, rect.left - tooltipWidth - spacing);
-          }
-        }
-        // Se tem espaço suficiente, o left já foi calculado corretamente no switch acima
-      } else if (finalPosition === "right") {
-        const spaceRight = viewportWidth - rect.right;
-        if (spaceRight < tooltipWidth + spacing + 8) {
-          const spaceLeft = rect.left;
-          if (spaceLeft > spaceRight && spaceLeft > tooltipWidth + spacing + 8) {
-            // Muda para esquerda se houver mais espaço
-            left = rect.left - tooltipWidth - spacing;
-            finalPosition = "left";
-          } else {
-            // Mantém à direita, mas ajusta para ficar visível
-            left = Math.min(viewportWidth - tooltipWidth - 8, rect.right + spacing);
-          }
-        }
-        // Se tem espaço suficiente, o left já foi calculado corretamente no switch acima
-      }
-    }
-
-    return { top, left, position: finalPosition };
-  }, []);
-
-  // Configura o tour quando steps ou options mudam
-  const configureTour = useCallback(() => {
-    isConfiguredRef.current = true;
-  }, []);
-
-  // Renderiza os steps (mostra/esconde o tour)
-  const renderSteps = useCallback(() => {
-    if (enabled && steps.length > 0 && !isVisible) {
-      setIsVisible(true);
-      setCurrentStep(initialStep);
-    } else if (!enabled && isVisible) {
-      setIsVisible(false);
-      setCurrentStep(initialStep);
-      setHighlightedElement(null);
-      setTooltipPosition(null);
-    }
-  }, [enabled, steps.length, isVisible, initialStep]);
-
-  // Função auxiliar para buscar elemento por seletor CSS ou data-onboard
-  const findElement = useCallback((selector: string): HTMLElement | null => {
-    // Se o seletor começa com caracteres de seletor CSS (. # [ etc), usa diretamente
-    if (/^[.#\[:>+\s~]/.test(selector)) {
-      return document.querySelector(selector) as HTMLElement;
-    }
-    // Caso contrário, assume que é um valor de data-onboard
-    return document.querySelector(`[data-onboard="${selector}"]`) as HTMLElement;
-  }, []);
-
-  // Destaca o elemento atual
-  useEffect(() => {
-    if (!isVisible || currentStep < 0 || currentStep >= steps.length) {
-      setHighlightedElement(null);
-      setTooltipPosition(null);
-      return;
-    }
-
-    const step = steps[currentStep];
-    const element = findElement(step.element);
-
-    if (!element) {
-      console.warn(`Elemento não encontrado: ${step.element}. Tentando buscar [data-onboard="${step.element}"]`);
-      return;
-    }
-
-    setHighlightedElement(element);
-
-    // Scroll para o elemento
-    element.scrollIntoView({ behavior: "smooth", block: "center" });
-
-    // Função para calcular e atualizar posição
-    const updatePosition = () => {
-      const updatedRect = element.getBoundingClientRect();
-      if (updatedRect.width > 0 && updatedRect.height > 0) {
-        // Usa "auto" como default se position não for especificado
-        const position = calculateTooltipPosition(element, step.position || "auto");
-        setTooltipPosition(position);
-      }
-    };
-
-    // Calcula posição inicial após um delay para garantir que o scroll terminou
-    setTimeout(updatePosition, 400);
-
-    // Adiciona listeners para recalcular posição em tempo real
-    const handleScroll = () => {
-      // Usa requestAnimationFrame para suavizar a atualização durante scroll
-      requestAnimationFrame(updatePosition);
-    };
-
-    const handleResize = () => {
-      updatePosition();
-    };
-
-    // Adiciona listeners em window e document para capturar todos os tipos de scroll
-    window.addEventListener("scroll", handleScroll, { passive: true, capture: true });
-    window.addEventListener("resize", handleResize, { passive: true });
-    document.addEventListener("scroll", handleScroll, { passive: true, capture: true });
-
-    return () => {
-      window.removeEventListener("scroll", handleScroll, true);
-      window.removeEventListener("resize", handleResize);
-      document.removeEventListener("scroll", handleScroll, true);
-    };
-  }, [isVisible, currentStep, steps, calculateTooltipPosition, findElement]);
-
-  // Adiciona overlay e highlight ao elemento
-  useEffect(() => {
-    if (!highlightedElement) {
-      // Remove highlights anteriores
-      document.querySelectorAll(".tour-highlight").forEach((el) => {
-        el.classList.remove("tour-highlight");
-        (el as HTMLElement).style.zIndex = "";
-      });
-      return;
-    }
-
-    // Adiciona classe de highlight e z-index alto
-    highlightedElement.classList.add("tour-highlight");
-    const originalZIndex = highlightedElement.style.zIndex;
-    highlightedElement.style.zIndex = "10000";
-
-    return () => {
-      highlightedElement.classList.remove("tour-highlight");
-      highlightedElement.style.zIndex = originalZIndex;
-    };
-  }, [highlightedElement]);
-
-  // Configura o tour quando necessário
-  useEffect(() => {
-    if (!isConfiguredRef.current || steps.length > 0) {
-      configureTour();
-      renderSteps();
-    }
-  }, [steps, configureTour, renderSteps]);
-
-  // Atualiza quando enabled muda
-  useEffect(() => {
-    renderSteps();
-  }, [enabled, renderSteps]);
-
-  // Handler de teclado (ESC e setas)
-  useEffect(() => {
-    if (!isVisible || !exitOnEsc) return;
-
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === "Escape") {
-        handleExit();
-      } else if (e.key === "ArrowRight") {
-        handleNext();
-      } else if (e.key === "ArrowLeft") {
-        handlePrev();
-      }
-    };
-
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [isVisible, exitOnEsc, currentStep, steps.length]);
-
-  // Controla overflow do body
-  useEffect(() => {
-    if (isVisible) {
-      document.body.style.overflow = "hidden";
-    } else {
-      document.body.style.overflow = "";
-    }
-    return () => {
-      document.body.style.overflow = "";
-    };
-  }, [isVisible]);
-
-  const handleNext = useCallback(() => {
-    if (currentStep < steps.length - 1) {
-      setCurrentStep(currentStep + 1);
-    } else {
-      handleComplete();
-    }
-  }, [currentStep, steps.length]);
-
-  const handlePrev = useCallback(() => {
-    if (currentStep > 0) {
-      setCurrentStep(currentStep - 1);
-    }
-  }, [currentStep]);
-
-  const handleSkip = useCallback(() => {
-    handleExit();
-  }, []);
-
-  const handleComplete = useCallback(() => {
-    onComplete?.();
-    handleExit();
-  }, [onComplete]);
-
-  const handleExit = useCallback(() => {
-    setIsVisible(false);
-    setCurrentStep(initialStep);
-    setHighlightedElement(null);
-    setTooltipPosition(null);
-    onExit?.();
-  }, [initialStep, onExit]);
-
-  const handleOverlayClick = useCallback(
-    (e: React.MouseEvent<HTMLDivElement>) => {
-      if (exitOnOverlayClick && e.target === overlayRef.current) {
-        handleExit();
-      }
-    },
-    [exitOnOverlayClick, handleExit]
-  );
-
-  if (!isVisible) {
-    return null;
-  }
-
-  const currentStepData = steps[currentStep];
-  const isFirstStep = currentStep === 0;
-  const isLastStep = currentStep === steps.length - 1;
-  const progress = ((currentStep + 1) / steps.length) * 100;
-
-  return (
-    <>
-      {/* Overlay escuro */}
-      <div
-        ref={overlayRef}
-        onClick={handleOverlayClick}
-        style={{
-          position: "fixed",
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-          backgroundColor: "rgba(0, 0, 0, 0.6)",
-          zIndex: 9998,
-          pointerEvents: exitOnOverlayClick ? "auto" : "none",
-        }}
-      />
-
-      {/* Tooltip */}
-      {tooltipPosition && currentStepData && highlightedElement && (
-        <div
-          ref={tooltipRef}
-          className="tour:max-w-sm"
-          style={{
-            position: "fixed",
-            top: tooltipPosition.position === "bottom" || tooltipPosition.position === "left" || tooltipPosition.position === "right"
-              ? `${tooltipPosition.top}px`
-              : undefined,
-            bottom: tooltipPosition.position === "top" ? `${window.innerHeight - tooltipPosition.top}px` : undefined,
-            left: tooltipPosition.position === "left" || tooltipPosition.position === "right"
-              ? `${tooltipPosition.left}px`
-              : `${tooltipPosition.left}px`,
-            transform:
-              tooltipPosition.position === "left" || tooltipPosition.position === "right"
-                ? "translate(0, -50%)"
-                : "translate(-50%, 0)",
-            zIndex: 10001,
-          }}
-        >
-          <div className="tour:bg-white tour:rounded-lg tour:shadow-xl tour:p-6 tour:relative">
-            {/* Botão fechar */}
-            <button
-              onClick={handleExit}
-              className="tour:absolute tour:top-2 tour:right-2 tour:p-1 tour:rounded-full tour:hover:bg-gray-100 tour:transition-colors tour:z-10"
-              aria-label="Fechar tour"
-            >
-              <HiXMark className="tour:w-5 tour:h-5 tour:text-gray-500" />
-            </button>
-
-            {/* Título (se fornecido) */}
-            {currentStepData.title && (
-              <h3 className="tour:text-lg tour:font-semibold tour:text-gray-900 tour:mb-2 tour:pr-6">
-                {currentStepData.title}
-              </h3>
-            )}
-
-            {/* Conteúdo */}
-            <p className="tour:text-gray-700 tour:mb-4">{currentStepData.intro}</p>
-
-            {/* Progresso */}
-            {showProgress && (
-              <div className="tour:mb-4">
-                <div className="tour:w-full tour:bg-gray-200 tour:rounded-full tour:h-2">
-                  <div
-                    className="tour:bg-brand-primary tour:h-2 tour:rounded-full tour:transition-all tour:duration-300"
-                    style={{ width: `${progress}%` }}
-                  />
-                </div>
-                <p className="tour:text-xs tour:text-gray-500 tour:mt-1 tour:text-center">
-                  {currentStep + 1} de {steps.length}
-                </p>
-              </div>
-            )}
-
-            {/* Bullets */}
-            {showBullets && (
-              <div className="tour:flex tour:justify-center tour:gap-1 tour:mb-4">
-                {steps.map((_, index) => (
-                  <button
-                    key={index}
-                    onClick={() => setCurrentStep(index)}
-                    className={`tour:w-2 tour:h-2 tour:rounded-full tour:transition-all ${index === currentStep
-                        ? "tour:bg-brand-primary tour:w-6"
-                        : "tour:bg-gray-300 tour:hover:bg-gray-400"
-                      }`}
-                    aria-label={`Ir para passo ${index + 1}`}
-                  />
-                ))}
-              </div>
-            )}
-
-            {/* Botões de navegação */}
-            <div className="tour:flex tour:justify-between tour:items-center tour:gap-2">
-              <div className="tour:flex tour:gap-2">
-                {!isFirstStep && (
-                  <Button
-                    variant="bordered"
-                    onPress={handlePrev}
-                    startContent={<HiChevronLeft className="tour:w-4 tour:h-4" />}
-                  >
-                    {prevLabel}
-                  </Button>
-                )}
-              </div>
-
-              <div className="tour:flex tour:gap-2">
-                <Button variant="light" onPress={handleSkip}>
-                  {skipLabel}
-                </Button>
-                <Button
-                  color="primary"
-                  onPress={isLastStep ? handleComplete : handleNext}
-                  endContent={!isLastStep ? <HiChevronRight className="tour:w-4 tour:h-4" /> : undefined}
-                >
-                  {isLastStep ? doneLabel : nextLabel}
-                </Button>
-              </div>
-            </div>
-          </div>
-
-          {/* Seta indicadora */}
-          {tooltipPosition.position === "bottom" && (
-            <div
-              className="tour:absolute tour:w-0 tour:h-0 tour:border-8 tour:border-transparent"
-              style={{
-                top: "-16px",
-                left: "50%",
-                transform: "translateX(-50%)",
-                borderColor: "transparent transparent white transparent",
-              }}
-            />
-          )}
-          {tooltipPosition.position === "top" && (
-            <div
-              className="tour:absolute tour:w-0 tour:h-0 tour:border-8 tour:border-transparent"
-              style={{
-                bottom: "-16px",
-                left: "50%",
-                transform: "translateX(-50%)",
-                borderColor: "white transparent transparent transparent",
-              }}
-            />
-          )}
-          {tooltipPosition.position === "right" && (
-            <div
-              className="tour:absolute tour:w-0 tour:h-0 tour:border-8 tour:border-transparent"
-              style={{
-                left: "-16px",
-                top: "50%",
-                transform: "translateY(-50%)",
-                borderColor: "transparent white transparent transparent",
-              }}
-            />
-          )}
-          {tooltipPosition.position === "left" && (
-            <div
-              className="tour:absolute tour:w-0 tour:h-0 tour:border-8 tour:border-transparent"
-              style={{
-                right: "-16px",
-                top: "50%",
-                transform: "translateY(-50%)",
-                borderColor: "transparent transparent transparent white",
-              }}
-            />
-          )}
-        </div>
-      )}
-
-      {/* Estilos inline para highlight */}
-      <style>{`
-        .tour-highlight {
-          position: relative !important;
-          z-index: 10000 !important;
-          outline: 3px solid var(--brand-primary, #0056b0) !important;
-          outline-offset: 2px;
-          border-radius: 4px;
-          box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.6) !important;
-        }
-      `}</style>
-    </>
-  );
-}

package/src/styles/tour.css

@@ -1,3 +0,0 @@
-@import "tailwindcss";
-@config "../../tailwind.config.js";
-