tracking-module

v1.2.2

Published

4 months ago

Web Component para tracking de rutas y paquetes - Estilos completamente encapsulados en Shadow DOM

Downloads

0High
0Medium
0Low

christianirack

web-component tracking react routes packages logistics

Tracking Module

Web Component para tracking de rutas y paquetes de última milla. Verdadero Web Component independiente que funciona en cualquier proyecto.

✨ Características v1.2.0+

✅ 100% Independiente - NO requiere React en tu proyecto
✅ Compatible con cualquier versión de React (16, 17, 18, 19, o sin React)
✅ Framework agnóstico - Vue, Angular, Vanilla JS, etc.
🔒 Completamente aislado con Shadow DOM
⚡ React bundled internamente - Sin conflictos de dependencias
📦 Gestión de estado con Zustand
🎨 Estilos completamente encapsulados - NO afectan tu sitio web
🚀 Múltiples instancias en la misma página
🎯 Sin imports de CSS - Todo autocontenido

⚠️ IMPORTANTE v1.2.0:
NO importes el CSS manualmente - Los estilos están dentro del Shadow DOM
Los estilos del componente NO afectan tu sitio web
Los estilos de tu sitio NO afectan el componente

Instalación

npm install tracking-module

Uso

En HTML Vanilla (sin React)

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tracking Module</title>
    <!-- ⚠️ NO importes el CSS - está dentro del Shadow DOM -->
</head>
<body>
    <!-- Usar el web component directamente -->
    <tracking-module
        api-url="https://tu-api.com/api/"
        api-key="tu-api-key-aqui"
        initial-date="2025-04-30"
        base-path="/tracking">
    </tracking-module>

    <!-- Cargar el módulo -->
    <script type="module">
        import 'tracking-module';
    </script>
</body>
</html>

En React (16, 17, 18, 19 - Todas las versiones)

import React from 'react';
// ⚠️ SOLO importa el JS - NO el CSS (está en Shadow DOM)
import 'tracking-module';

function App() {
    return (
        <div>
            <tracking-module
                api-url="https://tu-api.com/api/"
                api-key="tu-api-key-aqui"
                initial-date="2025-04-30"
                base-path="/tracking"
            />
        </div>
    );
}

export default App;

Para React 16 (class components):

import React from 'react';
// ⚠️ SOLO importa el JS - NO el CSS (está en Shadow DOM)
import 'tracking-module';

class App extends React.Component {
    render() {
        return (
            <tracking-module
                api-url="https://tu-api.com/api/"
                api-key="tu-api-key-aqui"
                initial-date="2025-04-30"
            />
        );
    }
}

export default App;

En Vue.js

<template>
    <div>
        <tracking-module
            api-url="https://tu-api.com/api/"
            api-key="tu-api-key-aqui"
            initial-date="2025-04-30"
            base-path="/tracking">
        </tracking-module>
    </div>
</template>

<script>
import 'tracking-module';

export default {
    name: 'TrackingPage',
    mounted() {
        // El componente ya está registrado
    }
}
</script>

En Angular

import { Component, OnInit, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import 'tracking-module';

@Component({
    selector: 'app-tracking',
    template: `
        <tracking-module
            api-url="https://tu-api.com/api/"
            api-key="tu-api-key-aqui"
            initial-date="2025-04-30"
            base-path="/tracking">
        </tracking-module>
    `,
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class TrackingComponent implements OnInit {
    ngOnInit() {
        // El componente ya está registrado
    }
}

Atributos del Componente

El web component <tracking-module> acepta los siguientes atributos:

| Atributo | Tipo | Requerido | Default | Descripción | |----------|------|-----------|---------|-------------| | api-url | String | No | https://api.bigsmart.mx/ | URL base del API | | api-key | String | No | - | API Key para autenticación | | initial-date | String | No | Fecha actual | Fecha inicial en formato YYYY-MM-DD | | base-path | String | No | /app/tracking | Path base para enrutamiento |

Configuración Avanzada

Autenticación

El componente soporta dos métodos de autenticación:

API Key (recomendado para web components): Se pasa a través del atributo api-key
Token de sesión: El componente buscará automáticamente un token en sessionStorage o localStorage bajo la clave big_token

Múltiples Instancias

Puedes tener múltiples instancias del componente en la misma página, cada una con su propia configuración:

<tracking-module
    api-url="https://api1.com/"
    api-key="key1">
</tracking-module>

<tracking-module
    api-url="https://api2.com/"
    api-key="key2">
</tracking-module>

Estilos Personalizados

El componente usa Shadow DOM, por lo que los estilos están completamente encapsulados. Para personalizar los colores principales, puedes modificar las variables CSS custom properties dentro del componente:

tracking-module::part(container) {
    --primary-color: rgb(96, 33, 102);
    --secondary-color: rgb(7, 184, 107);
}

Desarrollo

Requisitos

Node.js >= 20.15.1
npm >= 10.x

Instalación local

git clone https://github.com/christianirack/tracking-module.git
cd tracking-module
npm install

Scripts disponibles

# Desarrollo
npm start

# Build para producción (aplicación normal)
npm run build

# Build para librería (web component)
npm run build:lib

# Formatear código
npm run format

# Verificar formato
npm run format:check

Tecnologías

React 19.2
Vite 7.x
Zustand (gestión de estado)
React Bootstrap
Leaflet (mapas)
Axios
Moment.js

Licencia

MIT

Autor

Christian Irack

Contribuir

Las contribuciones son bienvenidas. Por favor, abre un issue o pull request en el repositorio.

Soporte

Para problemas o preguntas, por favor abre un issue en el repositorio de GitHub.