dv-web-components 1.0.0

package/alert-component/index.js

@@ -0,0 +1,250 @@
+/**
+ * ============================================================================
+ * Componente: <app-alert>
+ * 
+ * Buenas prácticas aplicadas:
+ * 1. Template en memoria a nivel de módulo (se parsea una sola vez, no en cada instancia).
+ * 2. Encapsulación completa con Shadow DOM (modo 'open').
+ * 3. Ciclo de vida robusto: connectedCallback, disconnectedCallback y attributeChangedCallback.
+ * 4. Reflexión entre Atributos HTML y Propiedades JS (getters y setters).
+ * 5. Limpieza de Event Listeners al desconectarse para evitar fugas de memoria (memory leaks).
+ * 6. Slots con fallback inteligente (icono por defecto o personalizado por el usuario).
+ * 7. Comunicación hacia afuera con CustomEvent (bubbles: true, composed: true).
+ * 8. Accesibilidad nativa (ARIA roles y soporte de teclado).
+ * 9. CSS Theming mediante variables CSS y el pseudo-elemento ::part().
+ * ============================================================================
+ */
+
+// 1. Template estático en memoria (Caché a nivel de módulo)
+const template = document.createElement('template');
+template.innerHTML = `
+  <style>
+    :host {
+      display: block;
+      box-sizing: border-box;
+      margin-block: 0.75rem;
+      font-family: inherit;
+    }
+
+    *, *::before, *::after {
+      box-sizing: border-box;
+    }
+
+    .alert {
+      display: flex;
+      align-items: flex-start;
+      gap: 0.875rem;
+      padding: 1rem 1.25rem;
+      border-radius: 0.75rem;
+      border: 1px solid var(--alert-border, rgba(255, 255, 255, 0.1));
+      background-color: var(--alert-bg, #1e293b);
+      color: var(--alert-text, #f8fafc);
+      font-size: 0.925rem;
+      line-height: 1.5;
+      transition: opacity 0.25s ease, transform 0.25s ease;
+    }
+
+    /* Animación de salida al cerrarse */
+    .alert--closing {
+      opacity: 0;
+      transform: scale(0.96) translateY(-4px);
+    }
+
+    /* Variantes semánticas mediante :host([variant="..."]) */
+    :host([variant="info"]) .alert {
+      --alert-bg: rgba(14, 165, 233, 0.1);
+      --alert-border: rgba(14, 165, 233, 0.3);
+      --alert-icon-color: #38bdf8;
+    }
+
+    :host([variant="success"]) .alert {
+      --alert-bg: rgba(34, 197, 94, 0.1);
+      --alert-border: rgba(34, 197, 94, 0.3);
+      --alert-icon-color: #4ade80;
+    }
+
+    :host([variant="warning"]) .alert {
+      --alert-bg: rgba(234, 179, 8, 0.1);
+      --alert-border: rgba(234, 179, 8, 0.3);
+      --alert-icon-color: #facc15;
+    }
+
+    :host([variant="danger"]) .alert {
+      --alert-bg: rgba(239, 68, 68, 0.1);
+      --alert-border: rgba(239, 68, 68, 0.3);
+      --alert-icon-color: #f87171;
+    }
+
+    /* Ranuras de contenido */
+    .icon-wrapper {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      color: var(--alert-icon-color, #38bdf8);
+      padding-top: 0.125rem;
+    }
+
+    .content-wrapper {
+      flex: 1;
+      min-width: 0;
+    }
+
+    /* Botón de cierre */
+    .close-button {
+      display: none;
+      background: transparent;
+      border: none;
+      color: inherit;
+      opacity: 0.6;
+      cursor: pointer;
+      padding: 0.25rem;
+      margin: -0.25rem -0.25rem -0.25rem auto;
+      border-radius: 0.375rem;
+      transition: opacity 0.2s ease, background-color 0.2s ease;
+      line-height: 1;
+    }
+
+    .close-button:hover,
+    .close-button:focus-visible {
+      opacity: 1;
+      background-color: rgba(255, 255, 255, 0.1);
+      outline: none;
+    }
+
+    /* Mostrar botón si tiene el atributo 'dismissible' */
+    :host([dismissible]) .close-button {
+      display: inline-flex;
+    }
+  </style>
+
+  <div class="alert" part="alert" role="alert" aria-live="polite">
+    <!-- Slot para icono con un SVG fallback -->
+    <span class="icon-wrapper" part="icon">
+      <slot name="icon">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <circle cx="12" cy="12" r="10"></circle>
+          <line x1="12" y1="16" x2="12" y2="12"></line>
+          <line x1="12" y1="8" x2="12.01" y2="8"></line>
+        </svg>
+      </slot>
+    </span>
+
+    <!-- Slot por defecto para el texto del mensaje -->
+    <div class="content-wrapper" part="content">
+      <slot>Mensaje de alerta por defecto.</slot>
+    </div>
+
+    <!-- Botón de cerrar opcional -->
+    <button class="close-button" part="close-button" aria-label="Cerrar alerta">
+      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <line x1="18" y1="6" x2="6" y2="18"></line>
+        <line x1="6" y1="6" x2="18" y2="18"></line>
+      </svg>
+    </button>
+  </div>
+`;
+
+export class AppAlert extends HTMLElement {
+  #closeButton = null;
+  #alertContainer = null;
+
+  // 2. Definir los atributos observables
+  static get observedAttributes() {
+    return ['variant', 'dismissible'];
+  }
+
+  constructor() {
+    super();
+    // Atachar Shadow DOM
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+
+    // Referencias internas cacheadas
+    this.#alertContainer = this.shadowRoot.querySelector('.alert');
+    this.#closeButton = this.shadowRoot.querySelector('.close-button');
+
+    // Binding para que el listener conserve el contexto correcto
+    this.handleDismiss = this.handleDismiss.bind(this);
+  }
+
+  // 3. Sincronización entre Atributos HTML y Propiedades JS (Reflection)
+  get variant() {
+    return this.getAttribute('variant') || 'info';
+  }
+
+  set variant(value) {
+    if (value) {
+      this.setAttribute('variant', value);
+    } else {
+      this.removeAttribute('variant');
+    }
+  }
+
+  get dismissible() {
+    return this.hasAttribute('dismissible');
+  }
+
+  set dismissible(value) {
+    if (Boolean(value)) {
+      this.setAttribute('dismissible', '');
+    } else {
+      this.removeAttribute('dismissible');
+    }
+  }
+
+  // 4. Ciclo de Vida: El elemento se conecta al DOM
+  connectedCallback() {
+    // Establecer variante por defecto si el usuario no especificó ninguna
+    if (!this.hasAttribute('variant')) {
+      this.setAttribute('variant', 'info');
+    }
+
+    // Registrar listeners
+    this.#closeButton?.addEventListener('click', this.handleDismiss);
+  }
+
+  // 5. Ciclo de Vida: El elemento se retira del DOM (Limpieza)
+  disconnectedCallback() {
+    this.#closeButton?.removeEventListener('click', this.handleDismiss);
+  }
+
+  // 6. Ciclo de Vida: Reaccionar a cambios de atributos en tiempo real
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+
+    if (name === 'variant') {
+      // Opcional: Lógica adicional si se requiere al cambiar la variante
+    }
+  }
+
+  // 7. Método público y despacho de Custom Events
+  close() {
+    this.handleDismiss();
+  }
+
+  handleDismiss() {
+    // Despachar evento antes de cerrar (permite ser cancelado con e.preventDefault())
+    const closeEvent = new CustomEvent('app-close', {
+      bubbles: true,
+      composed: true, // 👈 Crucial para que cruce la frontera del Shadow DOM hacia afuera
+      cancelable: true,
+      detail: { variant: this.variant }
+    });
+
+    const shouldContinue = this.dispatchEvent(closeEvent);
+    if (!shouldContinue) return;
+
+    // Transición suave de salida
+    this.#alertContainer.classList.add('alert--closing');
+    
+    this.#alertContainer.addEventListener('transitionend', () => {
+      this.remove(); // Se auto-elimina del DOM tras la animación
+    }, { once: true });
+  }
+}
+
+// 8. Registro seguro del Custom Element
+if (!customElements.get('app-alert')) {
+  customElements.define('app-alert', AppAlert);
+}

package/card-component/index.js

@@ -0,0 +1,62 @@
+const template = document.createElement('template');
+template.innerHTML = `
+<style>
+  :host {
+    display: block;
+  }
+  /* Dale estilo a cualquier botón que sea inyectado en un slot */
+  ::slotted(button) {
+    background-color: #38bdf8;
+    color: #0f172a;
+    border: none;
+    padding: 1rem 2rem;
+    border-radius: 6px;
+    font-weight: 600;
+    cursor: pointer;
+  }
+  ::slotted(button:hover) {
+    opacity: 0.9;
+  }
+  * {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
+  .container {
+    background-color: #0f172a;
+    padding: 10px;
+    border-radius: 10px;
+    width: 100%;
+    height: 100%;
+  }
+</style>
+<div class="container">
+  <header>
+    <slot name="header">
+      <h1>Header</h1>
+    </slot>
+  </header>
+  <main>
+    <slot>
+      <p>Content</p>
+    </slot>
+  </main>
+  <footer>
+    <slot name="footer">
+      <p>Footer</p>
+    </slot>
+  </footer>
+</div>
+`;
+
+class AppCard extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+}
+
+if (!customElements.get('app-card')) {
+  customElements.define('app-card', AppCard);
+}

package/index.js

@@ -0,0 +1,7 @@
+import { Card } from './card-component/index.js';
+import { Alert } from './alert-component/index.js';
+
+export {
+  Card,
+  Alert
+}

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "dv-web-components",
+  "version": "1.0.0",
+  "description": "Librería de Web Components nativos y accesibles",
+  "type": "module",
+  "main": "./index.js",
+  "module": "./index.js",
+  "exports": {
+    ".": "./index.js",
+    "./alert": "./alert-component/index.js",
+    "./card": "./card-component/index.js"
+  },
+  "files": [
+    "index.js",
+    "alert-component",
+    "card-component"
+  ],
+  "keywords": [
+    "web-components",
+    "custom-elements",
+    "ui"
+  ],
+  "author": "Diego Villa",
+  "license": "MIT"
+}