@elogroup-sereduc/portal-aluno-tour 1.0.0 → 1.0.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,kDA4UX"}

package/dist/components/Tour.js

@@ -0,0 +1,178 @@
+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 [highlightedElement, setHighlightedElement] = useState(null);
+    const [tooltipPosition, setTooltipPosition] = useState(null);
+    const overlayRef = useRef(null);
+    const tooltipRef = useRef(null);
+    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
+    const calculateTooltipPosition = useCallback((element, position = "bottom") => {
+        const rect = element.getBoundingClientRect();
+        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+        const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+        let top = 0;
+        let left = 0;
+        switch (position) {
+            case "top":
+                top = rect.top + scrollTop - 10;
+                left = rect.left + scrollLeft + rect.width / 2;
+                break;
+            case "bottom":
+                top = rect.bottom + scrollTop + 10;
+                left = rect.left + scrollLeft + rect.width / 2;
+                break;
+            case "left":
+                top = rect.top + scrollTop + rect.height / 2;
+                left = rect.left + scrollLeft - 10;
+                break;
+            case "right":
+                top = rect.top + scrollTop + rect.height / 2;
+                left = rect.right + scrollLeft + 10;
+                break;
+            default:
+                top = rect.bottom + scrollTop + 10;
+                left = rect.left + scrollLeft + rect.width / 2;
+        }
+        return { top, left };
+    }, []);
+    // Destaca o elemento atual
+    useEffect(() => {
+        if (!enabled || currentStep < 0 || currentStep >= steps.length) {
+            setHighlightedElement(null);
+            setTooltipPosition(null);
+            return;
+        }
+        const step = steps[currentStep];
+        const element = document.querySelector(step.element);
+        if (!element) {
+            console.warn(`Elemento não encontrado: ${step.element}`);
+            return;
+        }
+        setHighlightedElement(element);
+        // Scroll para o elemento
+        element.scrollIntoView({ behavior: "smooth", block: "center" });
+        // Calcula posição da tooltip após um pequeno delay para garantir que o scroll terminou
+        setTimeout(() => {
+            const position = calculateTooltipPosition(element, step.position);
+            setTooltipPosition(position);
+        }, 300);
+    }, [enabled, currentStep, steps, calculateTooltipPosition]);
+    // Adiciona overlay e highlight ao elemento
+    useEffect(() => {
+        if (!highlightedElement) {
+            // Remove highlights anteriores
+            document.querySelectorAll(".tour-highlight").forEach((el) => {
+                el.classList.remove("tour-highlight");
+            });
+            return;
+        }
+        // Adiciona classe de highlight
+        highlightedElement.classList.add("tour-highlight");
+        return () => {
+            highlightedElement.classList.remove("tour-highlight");
+        };
+    }, [highlightedElement]);
+    // Handler de teclado (ESC)
+    useEffect(() => {
+        if (!enabled || !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);
+    }, [enabled, exitOnEsc, currentStep, steps.length]);
+    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(() => {
+        setCurrentStep(initialStep);
+        setHighlightedElement(null);
+        setTooltipPosition(null);
+        onExit?.();
+    }, [initialStep, onExit]);
+    const handleOverlayClick = useCallback((e) => {
+        if (exitOnOverlayClick && e.target === overlayRef.current) {
+            handleExit();
+        }
+    }, [exitOnOverlayClick, handleExit]);
+    if (!enabled) {
+        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, className: "fixed inset-0 bg-black/60 z-[9998]", onClick: handleOverlayClick, style: { pointerEvents: exitOnOverlayClick ? "auto" : "none" } }), tooltipPosition && currentStepData && highlightedElement && (_jsxs("div", { ref: tooltipRef, className: "fixed z-[9999] max-w-sm", style: {
+                    top: currentStepData.position === "bottom" ? `${tooltipPosition.top}px` : undefined,
+                    bottom: currentStepData.position === "top" ? `${window.innerHeight - tooltipPosition.top}px` : undefined,
+                    left: currentStepData.position === "left" || currentStepData.position === "right"
+                        ? `${tooltipPosition.left}px`
+                        : `${tooltipPosition.left}px`,
+                    transform: currentStepData.position === "left" || currentStepData.position === "right"
+                        ? "translate(0, -50%)"
+                        : "translate(-50%, 0)",
+                }, children: [_jsxs("div", { className: "bg-white rounded-lg shadow-xl p-6 relative", children: [_jsx("button", { onClick: handleExit, className: "absolute top-2 right-2 p-1 rounded-full hover:bg-gray-100 transition-colors", "aria-label": "Fechar tour", children: _jsx(HiXMark, { className: "w-5 h-5 text-gray-500" }) }), currentStepData.title && (_jsx("h3", { className: "text-lg font-semibold text-gray-900 mb-2 pr-6", children: currentStepData.title })), _jsx("p", { className: "text-gray-700 mb-4", children: currentStepData.intro }), showProgress && (_jsxs("div", { className: "mb-4", children: [_jsx("div", { className: "w-full bg-gray-200 rounded-full h-2", children: _jsx("div", { className: "bg-brand-primary h-2 rounded-full transition-all duration-300", style: { width: `${progress}%` } }) }), _jsxs("p", { className: "text-xs text-gray-500 mt-1 text-center", children: [currentStep + 1, " de ", steps.length] })] })), showBullets && (_jsx("div", { className: "flex justify-center gap-1 mb-4", children: steps.map((_, index) => (_jsx("button", { onClick: () => setCurrentStep(index), className: `w-2 h-2 rounded-full transition-all ${index === currentStep
+                                        ? "bg-brand-primary w-6"
+                                        : "bg-gray-300 hover:bg-gray-400"}`, "aria-label": `Ir para passo ${index + 1}` }, index))) })), _jsxs("div", { className: "flex justify-between items-center gap-2", children: [_jsx("div", { className: "flex gap-2", children: !isFirstStep && (_jsx(Button, { variant: "bordered", onPress: handlePrev, startContent: _jsx(HiChevronLeft, { className: "w-4 h-4" }), children: prevLabel })) }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { variant: "light", onPress: handleSkip, children: skipLabel }), _jsx(Button, { color: "primary", onPress: isLastStep ? handleComplete : handleNext, endContent: !isLastStep ? _jsx(HiChevronRight, { className: "w-4 h-4" }) : undefined, children: isLastStep ? doneLabel : nextLabel })] })] })] }), currentStepData.position === "bottom" && (_jsx("div", { className: "absolute w-0 h-0 border-8 border-transparent", style: {
+                            top: "-16px",
+                            left: "50%",
+                            transform: "translateX(-50%)",
+                            borderColor: "transparent transparent white transparent",
+                        } })), currentStepData.position === "top" && (_jsx("div", { className: "absolute w-0 h-0 border-8 border-transparent", style: {
+                            bottom: "-16px",
+                            left: "50%",
+                            transform: "translateX(-50%)",
+                            borderColor: "white transparent transparent transparent",
+                        } })), currentStepData.position === "right" && (_jsx("div", { className: "absolute w-0 h-0 border-8 border-transparent", style: {
+                            left: "-16px",
+                            top: "50%",
+                            transform: "translateY(-50%)",
+                            borderColor: "transparent white transparent transparent",
+                        } })), currentStepData.position === "left" && (_jsx("div", { className: "absolute w-0 h-0 border-8 border-transparent", style: {
+                            right: "-16px",
+                            top: "50%",
+                            transform: "translateY(-50%)",
+                            borderColor: "transparent transparent transparent white",
+                        } }))] })), _jsx("style", { children: `
+        .tour-highlight {
+          position: relative;
+          z-index: 9999 !important;
+          outline: 3px solid var(--brand-primary, #0056b0) !important;
+          outline-offset: 2px;
+          border-radius: 4px;
+        }
+      ` })] }));
+}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+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"}

package/dist/index.js

@@ -0,0 +1 @@
+export { Tour } from "./components/Tour";

package/dist/types/index.d.ts

@@ -0,0 +1,92 @@
+/**
+ * Tipos para o componente de tour
+ */
+export interface TourStep {
+    /**
+     * Seletor CSS do elemento a ser destacado
+     */
+    element: string;
+    /**
+     * Texto explicativo do passo
+     */
+    intro: string;
+    /**
+     * Posição da tooltip em relação ao elemento
+     * @default "bottom"
+     */
+    position?: "top" | "bottom" | "left" | "right";
+    /**
+     * Título do passo (opcional)
+     */
+    title?: string;
+}
+export interface TourOptions {
+    /**
+     * Label do botão "Próximo"
+     * @default "Próximo"
+     */
+    nextLabel?: string;
+    /**
+     * Label do botão "Anterior"
+     * @default "Anterior"
+     */
+    prevLabel?: string;
+    /**
+     * Label do botão "Pular"
+     * @default "Pular"
+     */
+    skipLabel?: string;
+    /**
+     * Label do botão "Concluir"
+     * @default "Concluir"
+     */
+    doneLabel?: string;
+    /**
+     * Mostrar barra de progresso
+     * @default true
+     */
+    showProgress?: boolean;
+    /**
+     * Mostrar bullets de navegação
+     * @default true
+     */
+    showBullets?: boolean;
+    /**
+     * Permitir fechar clicando no overlay
+     * @default false
+     */
+    exitOnOverlayClick?: boolean;
+    /**
+     * Permitir fechar com ESC
+     * @default true
+     */
+    exitOnEsc?: boolean;
+}
+export interface TourProps {
+    /**
+     * Se o tour está habilitado/ativo
+     */
+    enabled: boolean;
+    /**
+     * Array de passos do tour
+     */
+    steps: TourStep[];
+    /**
+     * Passo inicial (índice)
+     * @default 0
+     */
+    initialStep?: number;
+    /**
+     * Opções de configuração do tour
+     */
+    options?: TourOptions;
+    /**
+     * Callback quando o tour é encerrado
+     */
+    onExit?: () => void;
+    /**
+     * Callback quando o tour é concluído
+     */
+    onComplete?: () => void;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,WAAW,QAAQ;IACvB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAE/C;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,WAAW;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,SAAS;IACxB;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,KAAK,EAAE,QAAQ,EAAE,CAAC;IAElB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB"}

package/dist/types/index.js

@@ -0,0 +1,4 @@
+/**
+ * Tipos para o componente de tour
+ */
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elogroup-sereduc/portal-aluno-tour",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Componente de tour guiado customizado usando HeroUI para o Portal do Aluno",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/Tour.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState, useCallback, useRef } from "react";
 import { Button } from "@heroui/button";
 import { TourProps, TourStep } from "../types";
-import { HiX, HiChevronLeft, HiChevronRight } from "react-icons/hi2";
+import { HiXMark, HiChevronLeft, HiChevronRight } from "react-icons/hi2";
 
 /**
  * Componente de tour guiado customizado usando HeroUI
@@ -31,6 +31,19 @@ export function Tour({
     exitOnEsc = true,
   } = options;
 
+  // Garante que o overlay seja renderizado quando enabled for true
+  useEffect(() => {
+    if (enabled) {
+      // Força o body a não ter scroll quando o tour está ativo
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [enabled]);
+
   // Calcula a posição da tooltip baseado no elemento destacado
   const calculateTooltipPosition = useCallback((element: HTMLElement, position: string = "bottom") => {
     const rect = element.getBoundingClientRect();
@@ -103,11 +116,14 @@ export function Tour({
       return;
     }
 
-    // Adiciona classe de highlight
+    // 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]);
 
@@ -179,20 +195,29 @@ export function Tour({
 
   return (
     <>
-      {/* Overlay escuro */}
+      {/* Overlay escuro - sempre visível quando tour está ativo */}
       <div
         ref={overlayRef}
-        className="fixed inset-0 bg-black/60 z-[9998]"
         onClick={handleOverlayClick}
-        style={{ pointerEvents: exitOnOverlayClick ? "auto" : "none" }}
+        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="fixed z-[9999] max-w-sm"
+          className="max-w-sm"
           style={{
+            position: "fixed",
             top: currentStepData.position === "bottom" ? `${tooltipPosition.top}px` : undefined,
             bottom: currentStepData.position === "top" ? `${window.innerHeight - tooltipPosition.top}px` : undefined,
             left: currentStepData.position === "left" || currentStepData.position === "right" 
@@ -201,6 +226,7 @@ export function Tour({
             transform: currentStepData.position === "left" || currentStepData.position === "right"
               ? "translate(0, -50%)"
               : "translate(-50%, 0)",
+            zIndex: 10001,
           }}
         >
           <div className="bg-white rounded-lg shadow-xl p-6 relative">
@@ -210,7 +236,7 @@ export function Tour({
               className="absolute top-2 right-2 p-1 rounded-full hover:bg-gray-100 transition-colors"
               aria-label="Fechar tour"
             >
-              <HiX className="w-5 h-5 text-gray-500" />
+              <HiXMark className="w-5 h-5 text-gray-500" />
             </button>
 
             {/* Título (se fornecido) */}
@@ -336,11 +362,12 @@ export function Tour({
       {/* Estilos inline para highlight */}
       <style>{`
         .tour-highlight {
-          position: relative;
-          z-index: 9999 !important;
+          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>
     </>