intellisoft-mi-claro-interactive-invoice

v0.2.1

Published

4 months ago

Stencil Component Starter

0High
0Medium
0Low

Mi Claro Interactive Invoice

Componente web interactivo para mostrar y gestionar facturas en el sistema de facturación de Claro. Construido con Stencil para máxima compatibilidad entre frameworks.

🚀 Instalación Rápida

npm install intellisoft-mi-claro-interactive-invoice

📋 Uso Básico

Vanilla JavaScript / HTML

<!DOCTYPE html>
<html>
<head>
  <script type="module" src="https://unpkg.com/intellisoft-mi-claro-interactive-invoice@latest/dist/mi-claro-interactive-invoice/mi-claro-interactive-invoice.esm.js"></script>
</head>
<body>
  <mi-claro-interactive-invoice></mi-claro-interactive-invoice>
</body>
</html>

React

import { defineCustomElements } from 'intellisoft-mi-claro-interactive-invoice/loader';

// Inicializar una vez en tu app
defineCustomElements();

function App() {
  const handleInvoicePaid = (event) => {
    console.log('Factura pagada:', event.detail);
  };

  return (
    <mi-claro-interactive-invoice 
      onInvoicePaid={handleInvoicePaid}>
    </mi-claro-interactive-invoice>
  );
}

Angular

// app.module.ts
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { defineCustomElements } from 'intellisoft-mi-claro-interactive-invoice/loader';

defineCustomElements();

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

// component.ts
@Component({
  template: `
    <mi-claro-interactive-invoice 
      (invoicePaid)="onInvoicePaid($event)">
    </mi-claro-interactive-invoice>
  `
})
export class InvoiceComponent {
  onInvoicePaid(event: CustomEvent) {
    console.log('Factura pagada:', event.detail);
  }
}

Vue 3

<template>
  <mi-claro-interactive-invoice 
    @invoice-paid="handleInvoicePaid">
  </mi-claro-interactive-invoice>
</template>

<script setup>
import { defineCustomElements } from 'intellisoft-mi-claro-interactive-invoice/loader';

defineCustomElements();

const handleInvoicePaid = (event) => {
  console.log('Factura pagada:', event.detail);
};
</script>

🛠️ Propiedades

| Propiedad | Tipo | Descripción | Por Defecto | |-----------|------|-------------|-------------| | Por definir | - | Se agregarán según lógica de negocio | - |

📡 Eventos

| Evento | Descripción | Detalle | |--------|-------------|---------| | invoicePaid | Se emite cuando se completa un pago | { invoiceId: string, amount: number, method: string } | | invoiceDetailToggled | Se emite al expandir/contraer detalles | { invoiceId: string, isOpen: boolean } |

🎨 Personalización

El componente soporta CSS Custom Properties para personalización:

mi-claro-interactive-invoice {
  --invoice-primary-color: #e60028;
  --invoice-background: #ffffff;
  --invoice-border-radius: 8px;
  /* Más variables por definir según diseño */
}

💻 Desarrollo

Requisitos

Node.js >= 14.x
npm >= 6.x

Comandos

# Instalar dependencias
npm install

# Servidor de desarrollo
npm start

# Construir para producción
npm run build

# Ejecutar tests
npm test

# Generar nuevo componente
npm run generate

📁 Estructura del Proyecto

mi-claro-interactive-invoice/
├── src/
│   ├── components/
│   │   └── mi-claro-interactive-invoice/
│   │       ├── mi-claro-interactive-invoice.tsx
│   │       ├── mi-claro-interactive-invoice.css
│   │       └── readme.md
│   └── index.ts
├── examples/              # Ejemplos de integración
│   ├── vanilla-js/
│   ├── react-app/
│   ├── angular-app/
│   └── vue-app/
└── dist/                 # Archivos construidos

📚 Documentación

📖 Guía de Implementación - Integración detallada por framework
🚀 Estrategia de Distribución - Plan de publicación y versionado
💻 Guía de Desarrollo - Arquitectura y configuración interna
📁 Ejemplos - Código funcional para cada framework

🤝 Contribución

Sección por definir según políticas internas de Claro

📄 Licencia

Nota: Este componente está en desarrollo activo. Las propiedades, eventos y estilos se definirán según los requerimientos específicos del negocio de Claro.