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

package/dist/components/Tour.d.ts

@@ -0,0 +1,6 @@
+import { TourProps } from "../types";
+/**
+ * Componente de tour guiado customizado usando HeroUI
+ */
+export declare function Tour({ enabled, steps, initialStep, options, onExit, onComplete, }: TourProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=Tour.d.ts.map

package/dist/components/Tour.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tour.d.ts","sourceRoot":"","sources":["../../src/components/Tour.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAY,MAAM,UAAU,CAAC;AAG/C;;GAEG;AACH,wBAAgB,IAAI,CAAC,EACnB,OAAO,EACP,KAAK,EACL,WAAe,EACf,OAAY,EACZ,MAAM,EACN,UAAU,GACX,EAAE,SAAS,kDA8mBX"}

package/dist/components/Tour.js

@@ -0,0 +1,468 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState, useCallback, useRef } from "react";
+import { Button } from "@heroui/button";
+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, }) {
+    const [currentStep, setCurrentStep] = useState(initialStep);
+    const [isVisible, setIsVisible] = useState(false);
+    const [highlightedElement, setHighlightedElement] = useState(null);
+    const [tooltipPosition, setTooltipPosition] = useState(null);
+    const overlayRef = useRef(null);
+    const tooltipRef = useRef(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, position = "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;
+        // 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;
+            }
+            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) => {
+        // Se o seletor começa com caracteres de seletor CSS (. # [ etc), usa diretamente
+        if (/^[.#\[:>+\s~]/.test(selector)) {
+            return document.querySelector(selector);
+        }
+        // Caso contrário, assume que é um valor de data-onboard
+        return document.querySelector(`[data-onboard="${selector}"]`);
+    }, []);
+    // 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.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) => {
+            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) => {
+        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 (_jsxs(_Fragment, { children: [_jsx("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",
+                } }), tooltipPosition && currentStepData && highlightedElement && (_jsxs("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,
+                }, children: [_jsxs("div", { className: "tour:bg-white tour:rounded-lg tour:shadow-xl tour:p-6 tour:relative", children: [_jsx("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", children: _jsx(HiXMark, { className: "tour:w-5 tour:h-5 tour:text-gray-500" }) }), currentStepData.title && (_jsx("h3", { className: "tour:text-lg tour:font-semibold tour:text-gray-900 tour:mb-2 tour:pr-6", children: currentStepData.title })), _jsx("p", { className: "tour:text-gray-700 tour:mb-4", children: currentStepData.intro }), showProgress && (_jsxs("div", { className: "tour:mb-4", children: [_jsx("div", { className: "tour:w-full tour:bg-gray-200 tour:rounded-full tour:h-2", children: _jsx("div", { className: "tour:bg-brand-primary tour:h-2 tour:rounded-full tour:transition-all tour:duration-300", style: { width: `${progress}%` } }) }), _jsxs("p", { className: "tour:text-xs tour:text-gray-500 tour:mt-1 tour:text-center", children: [currentStep + 1, " de ", steps.length] })] })), showBullets && (_jsx("div", { className: "tour:flex tour:justify-center tour:gap-1 tour:mb-4", children: steps.map((_, index) => (_jsx("button", { 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}` }, index))) })), _jsxs("div", { className: "tour:flex tour:justify-between tour:items-center tour:gap-2", children: [_jsx("div", { className: "tour:flex tour:gap-2", children: !isFirstStep && (_jsx(Button, { variant: "bordered", onPress: handlePrev, startContent: _jsx(HiChevronLeft, { className: "tour:w-4 tour:h-4" }), children: prevLabel })) }), _jsxs("div", { className: "tour:flex tour:gap-2", children: [_jsx(Button, { variant: "light", onPress: handleSkip, children: skipLabel }), _jsx(Button, { color: "primary", onPress: isLastStep ? handleComplete : handleNext, endContent: !isLastStep ? _jsx(HiChevronRight, { className: "tour:w-4 tour:h-4" }) : undefined, children: isLastStep ? doneLabel : nextLabel })] })] })] }), tooltipPosition.position === "bottom" && (_jsx("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" && (_jsx("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" && (_jsx("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" && (_jsx("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",
+                        } }))] })), _jsx("style", { children: `
+        .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;
+        }
+      ` })] }));
+}

package/{src/index.ts → dist/index.d.ts}

@@ -1,3 +1,3 @@
-export { Tour } from "./components/Tour";
-export type { TourProps, TourStep, TourOptions } from "./types";
-
+export { Tour } from "./components/Tour";
+export type { TourProps, TourStep, TourOptions } from "./types";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC"}