@codeplex-sac/ui 0.0.12 → 0.0.15

package/lib/tour/tour.d.ts

@@ -0,0 +1,101 @@
+import { default as React } from 'react';
+import { Step, CardComponentProps } from 'nextstepjs';
+export { useNextStep } from 'nextstepjs';
+export type { Tour as CodeplexTourDefinicion, Step as CodeplexPasoTour, CardComponentProps as CodeplexTarjetaTourProps } from 'nextstepjs';
+/** Paso individual del tour con API en español */
+export interface CodeplexPaso {
+    /** Icono del paso (ReactNode o emoji string) */
+    icono?: React.ReactNode | string | null;
+    /** Título del paso */
+    titulo: string;
+    /** Contenido/descripción del paso */
+    contenido: React.ReactNode;
+    /** Selector CSS del elemento objetivo (ej: '#mi-boton', '.mi-clase') */
+    selector?: string;
+    /** Posición de la tarjeta respecto al elemento */
+    posicion?: Step['side'];
+    /** Mostrar controles de navegación */
+    mostrarControles?: boolean;
+    /** Mostrar botón de saltar */
+    mostrarSaltar?: boolean;
+    /** Padding del puntero alrededor del elemento */
+    paddingPuntero?: number;
+    /** Radio del borde del puntero */
+    radioPuntero?: number;
+    /** Deshabilitar interacción con el elemento resaltado */
+    deshabilitarInteraccion?: boolean;
+    /** Ruta a navegar en el siguiente paso */
+    siguienteRuta?: string;
+    /** Ruta a navegar en el paso anterior */
+    anteriorRuta?: string;
+    /** ID del viewport contenedor */
+    viewportId?: string;
+}
+/** Definición de un tour completo */
+export interface CodeplexDefinicionTour {
+    /** Identificador único del tour */
+    id: string;
+    /** Pasos del tour */
+    pasos: CodeplexPaso[];
+}
+/** Props del componente CodeplexTour */
+export interface CodeplexTourProps {
+    /** Contenido de la aplicación que se envuelve con el tour */
+    children: React.ReactNode;
+    /** Lista de tours disponibles */
+    tours: CodeplexDefinicionTour[];
+    /** Color RGB de la sombra del overlay (ej: '0, 0, 0') @default '0, 0, 0' */
+    colorSombra?: string;
+    /** Opacidad de la sombra del overlay @default '0.5' */
+    opacidadSombra?: string;
+    /** Mostrar flecha apuntando al elemento @default true */
+    mostrarFlecha?: boolean;
+    /** Permitir click a través del overlay @default false */
+    clickAtravesOverlay?: boolean;
+    /** Callback al iniciar un tour */
+    alIniciar?: (nombreTour: string | null) => void;
+    /** Callback al cambiar de paso */
+    alCambiarPaso?: (paso: number, nombreTour: string | null) => void;
+    /** Callback al completar el tour */
+    alCompletar?: (nombreTour: string | null) => void;
+    /** Callback al saltar el tour */
+    alSaltar?: (paso: number, nombreTour: string | null) => void;
+    /** Componente personalizado para la tarjeta del tour */
+    tarjetaPersonalizada?: React.ComponentType<CardComponentProps>;
+    /** Scroll al inicio al terminar @default true */
+    scrollAlInicio?: boolean;
+    /** Deshabilitar logs en consola @default true */
+    deshabilitarLogs?: boolean;
+    /** Z-index del overlay @default 1400 */
+    zIndexOverlay?: number;
+    /** Offset superior para scroll (altura del header fijo en px) @default 80 */
+    offsetSuperior?: number;
+    /** Offset inferior para scroll (altura del footer fijo en px) @default 60 */
+    offsetInferior?: number;
+}
+/**
+ * `CodeplexTour` - Componente de tours guiados para onboarding.
+ *
+ * Envuelve la aplicación o sección con tours interactivos que resaltan
+ * elementos del DOM y guían al usuario paso a paso.
+ *
+ * @example
+ * ```tsx
+ * const tours: CodeplexDefinicionTour[] = [{
+ *   id: 'mi-tour',
+ *   pasos: [
+ *     { titulo: 'Bienvenido', contenido: 'Este es el inicio', icono: '👋' },
+ *     { titulo: 'Botón', contenido: 'Haz clic aquí', selector: '#mi-boton', posicion: 'bottom' },
+ *   ]
+ * }];
+ *
+ * <CodeplexTour tours={tours}>
+ *   <MiApp />
+ * </CodeplexTour>
+ *
+ * // Desde un componente hijo:
+ * const { startNextStep } = useNextStep();
+ * startNextStep('mi-tour');
+ * ```
+ */
+export declare const CodeplexTour: React.FC<CodeplexTourProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeplex-sac/ui",
-  "version": "0.0.12",
+  "version": "0.0.15",
   "type": "module",
   "main": "./index.js",
   "module": "./index.js",
@@ -24,6 +24,7 @@
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@mui/icons-material": "^7.3.6",
-    "@mui/material": "^7.3.6"
+    "@mui/material": "^7.3.6",
+    "nextstepjs": "^2.2.0"
   }
-}
+}