componente · @solu30/ui-kit/feedback
GuidedTour
Visita guiada por pasos (coachmarks): resalta un elemento anclado por [data-tour="clave"], muestra un cartel con título y texto, y deja avanzar, retroceder o cerrar. El motor no sabe nada del dominio ni persiste nada: es 100% controlado por open/onOpenChange, y el «ya lo vi» es del consumidor. Reabrirlo reinicia en el paso 0 mientras no controles stepIndex. En móvil el cartel se ancla al borde opuesto de la pantalla: garantía determinística de que nunca tapa lo que explica. ADR-330.
Todavía no la importa ninguno de los 15 verticales medidos.
El componente, montado
Cargando el componente del paquete instalado…
Cómo se usa
import { GuidedTour } from '@solu30/ui-kit/feedback'Props
| Prop | Requerida | Tipo | Qué hace |
|---|---|---|---|
| steps | sí | GuidedTourStep[] | Pasos del tour, en orden. |
| open | sí | boolean | Controlado — el motor no decide cuándo abrirse. |
| onOpenChange | sí | (open: boolean) => void | — |
| stepIndex | opcional | number | Paso actual, controlado. Si se omite, el motor lo maneja internamente. |
| onStepIndexChange | opcional | (index: number) => void | — |
| onComplete | opcional | () => void | Se dispara al terminar el ÚLTIMO paso (botón "Listo"). No se dispara al cerrar antes de tiempo (Esc, X, click afuera) — para eso está `onOpenChange(false)` solo. Es el gancho donde el consumidor persiste "ya lo vi". |
| highlightPadding | opcional | number | Espacio entre el borde del elemento resaltado y el recorte, en px. Default `8`. |
| closeOnBackdropClick | opcional | boolean | Si clickear afuera del cartel cierra el tour. Default `false` — un tour no es un modal descartable por accidente. |
| labels | opcional | GuidedTourLabels | — |
| manageHistory | opcional | boolean | Igual que en el resto de los overlays del kit (`ConfirmDialog`, `CommandPalette`): si este overlay maneja su propia entrada de `window.history`. Default `true`. |
| className | opcional | string | Clase adicional para el panel del cartel. |