@elogroup-sereduc/portal-aluno-tour 1.0.1 → 1.0.3

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

@@ -1 +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"}
+{"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,kDA0YX"}

package/dist/components/Tour.js

@@ -7,10 +7,12 @@ import { HiXMark, HiChevronLeft, HiChevronRight } from "react-icons/hi2";
  */
 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
     const calculateTooltipPosition = useCallback((element, position = "bottom") => {
@@ -42,9 +44,26 @@ export function Tour({ enabled, steps, initialStep = 0, options = {}, onExit, on
         }
         return { top, left };
     }, []);
+    // 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]);
     // Destaca o elemento atual
     useEffect(() => {
-        if (!enabled || currentStep < 0 || currentStep >= steps.length) {
+        if (!isVisible || currentStep < 0 || currentStep >= steps.length) {
             setHighlightedElement(null);
             setTooltipPosition(null);
             return;
@@ -63,25 +82,40 @@ export function Tour({ enabled, steps, initialStep = 0, options = {}, onExit, on
             const position = calculateTooltipPosition(element, step.position);
             setTooltipPosition(position);
         }, 300);
-    }, [enabled, currentStep, steps, calculateTooltipPosition]);
+    }, [isVisible, 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");
+                el.style.zIndex = "";
             });
             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]);
-    // Handler de teclado (ESC)
+    // Configura o tour quando necessário
+    useEffect(() => {
+        if (!isConfiguredRef.current || steps.length > 0) {
+            configureTour();
+            renderSteps();
+        }
+    }, [steps, configureTour, renderSteps]);
+    // Atualiza quando enabled muda
     useEffect(() => {
-        if (!enabled || !exitOnEsc)
+        renderSteps();
+    }, [enabled, renderSteps]);
+    // Handler de teclado (ESC e setas)
+    useEffect(() => {
+        if (!isVisible || !exitOnEsc)
             return;
         const handleKeyDown = (e) => {
             if (e.key === "Escape") {
@@ -96,7 +130,19 @@ export function Tour({ enabled, steps, initialStep = 0, options = {}, onExit, on
         };
         window.addEventListener("keydown", handleKeyDown);
         return () => window.removeEventListener("keydown", handleKeyDown);
-    }, [enabled, exitOnEsc, currentStep, steps.length]);
+    }, [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);
@@ -118,6 +164,7 @@ export function Tour({ enabled, steps, initialStep = 0, options = {}, onExit, on
         handleExit();
     }, [onComplete]);
     const handleExit = useCallback(() => {
+        setIsVisible(false);
         setCurrentStep(initialStep);
         setHighlightedElement(null);
         setTooltipPosition(null);
@@ -128,14 +175,24 @@ export function Tour({ enabled, steps, initialStep = 0, options = {}, onExit, on
             handleExit();
         }
     }, [exitOnOverlayClick, handleExit]);
-    if (!enabled) {
+    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, 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: {
+    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: "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"
@@ -144,7 +201,8 @@ export function Tour({ enabled, steps, initialStep = 0, options = {}, onExit, on
                     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
+                    zIndex: 10001,
+                }, 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 z-10", "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",
@@ -168,11 +226,12 @@ export function Tour({ enabled, steps, initialStep = 0, options = {}, onExit, on
                             borderColor: "transparent transparent transparent white",
                         } }))] })), _jsx("style", { children: `
         .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;
         }
       ` })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elogroup-sereduc/portal-aluno-tour",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "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

@@ -15,10 +15,12 @@ export function Tour({
   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 } | null>(null);
   const overlayRef = useRef<HTMLDivElement>(null);
   const tooltipRef = useRef<HTMLDivElement>(null);
+  const isConfiguredRef = useRef(false);
 
   const {
     nextLabel = "Próximo",
@@ -65,9 +67,27 @@ export function Tour({
     return { top, left };
   }, []);
 
+  // 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]);
+
   // Destaca o elemento atual
   useEffect(() => {
-    if (!enabled || currentStep < 0 || currentStep >= steps.length) {
+    if (!isVisible || currentStep < 0 || currentStep >= steps.length) {
       setHighlightedElement(null);
       setTooltipPosition(null);
       return;
@@ -91,7 +111,7 @@ export function Tour({
       const position = calculateTooltipPosition(element, step.position);
       setTooltipPosition(position);
     }, 300);
-  }, [enabled, currentStep, steps, calculateTooltipPosition]);
+  }, [isVisible, currentStep, steps, calculateTooltipPosition]);
 
   // Adiciona overlay e highlight ao elemento
   useEffect(() => {
@@ -99,21 +119,38 @@ export function Tour({
       // Remove highlights anteriores
       document.querySelectorAll(".tour-highlight").forEach((el) => {
         el.classList.remove("tour-highlight");
+        (el as HTMLElement).style.zIndex = "";
       });
       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]);
 
-  // Handler de teclado (ESC)
+  // Configura o tour quando necessário
+  useEffect(() => {
+    if (!isConfiguredRef.current || steps.length > 0) {
+      configureTour();
+      renderSteps();
+    }
+  }, [steps, configureTour, renderSteps]);
+
+  // Atualiza quando enabled muda
   useEffect(() => {
-    if (!enabled || !exitOnEsc) return;
+    renderSteps();
+  }, [enabled, renderSteps]);
+
+  // Handler de teclado (ESC e setas)
+  useEffect(() => {
+    if (!isVisible || !exitOnEsc) return;
 
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.key === "Escape") {
@@ -127,7 +164,19 @@ export function Tour({
 
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [enabled, exitOnEsc, currentStep, steps.length]);
+  }, [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) {
@@ -153,6 +202,7 @@ export function Tour({
   }, [onComplete]);
 
   const handleExit = useCallback(() => {
+    setIsVisible(false);
     setCurrentStep(initialStep);
     setHighlightedElement(null);
     setTooltipPosition(null);
@@ -168,7 +218,7 @@ export function Tour({
     [exitOnOverlayClick, handleExit]
   );
 
-  if (!enabled) {
+  if (!isVisible) {
     return null;
   }
 
@@ -182,32 +232,43 @@ export function Tour({
       {/* Overlay escuro */}
       <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" 
-              ? `${tooltipPosition.left}px` 
+            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)",
+            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">
             {/* Botão fechar */}
             <button
               onClick={handleExit}
-              className="absolute top-2 right-2 p-1 rounded-full hover:bg-gray-100 transition-colors"
+              className="absolute top-2 right-2 p-1 rounded-full hover:bg-gray-100 transition-colors z-10"
               aria-label="Fechar tour"
             >
               <HiXMark className="w-5 h-5 text-gray-500" />
@@ -336,14 +397,14 @@ 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>
     </>
   );
 }
-