@widergy/energy-ui 3.158.1 → 3.159.0

package/dist/esm/utils/stylesDeduplicationUtils.js

@@ -0,0 +1,449 @@
+/* eslint-disable no-console */
+import { useEffect } from 'react';
+
+/**
+ * Sistema de deduplicación de estilos para Energy UI
+ * Evita que los estilos se carguen múltiples veces cuando la librería se importa desde diferentes proyectos
+ */
+
+// Cache global para estilos ya cargados
+const loadedStyles = new Set(); // Set de hashes de contenido CSS ya procesados
+const styleElementsByHash = new Map(); // Map de hash -> elemento DOM para estilos ya cargados
+
+// Cache global para URLs de hojas de estilos externas ya cargadas
+const loadedStylesheets = new Set(); // Set de URLs normalizadas de hojas externas ya cargadas
+
+// Referencias globales para cleanup
+let globalObserver = null;
+let isConfigured = false;
+
+/**
+ * Normaliza el contenido CSS para comparaciones consistentes
+ */
+const normalizeCSSContent = content => {
+  if (!content || typeof content !== 'string') {
+    return '';
+  }
+  return content
+  // Remover comentarios CSS (pero preservar source maps)
+  .replace(/\/\*[^*]*\*+(?:[^/*][^*]*\*+)*\//g, match => {
+    // Preservar source maps que pueden contener información importante
+    if (match.includes('sourceMappingURL')) {
+      return match;
+    }
+    return '';
+  })
+  // Remover espacios en blanco extra
+  .replace(/\s+/g, ' ')
+  // Remover espacios al inicio y final
+  .trim()
+  // Normalizar saltos de línea
+  .replace(/\r\n/g, '\n').replace(/\r/g, '\n')
+  // Remover espacios alrededor de caracteres especiales
+  .replace(/\s*([{}:;,])\s*/g, '$1')
+  // Normalizar valores de colores
+  .replace(/#([0-9a-fA-F]{3})\b/g, (_match, hex) => // Expandir colores de 3 dígitos a 6 dígitos
+  "#".concat(hex.split('').map(char => char + char).join('')))
+  // Normalizar valores de unidades
+  .replace(/(\d+)px/g, '$1px').replace(/(\d+)em/g, '$1em').replace(/(\d+)rem/g, '$1rem')
+  // Remover espacios extra entre reglas
+  .replace(/}\s*{/g, '}{')
+  // Normalizar selectores
+  .replace(/\s*,\s*/g, ',').replace(/\s*>\s*/g, '>').replace(/\s*\+\s*/g, '+').replace(/\s*~\s*/g, '~');
+};
+
+/**
+ * Normaliza URLs para comparaciones consistentes
+ */
+const normalizeURL = url => {
+  if (!url || typeof url !== 'string') {
+    return '';
+  }
+  try {
+    const urlObj = new URL(url, window.location.href);
+
+    // Remover parámetros de query que no afectan el contenido
+    const paramsToRemove = ['v', 'version', 't', 'timestamp', 'cache', 'cb'];
+    paramsToRemove.forEach(param => {
+      urlObj.searchParams.delete(param);
+    });
+
+    // Normalizar el path
+    let path = urlObj.pathname;
+
+    // Remover extensiones de archivo para comparación
+    path = path.replace(/\.(css|scss|sass|less)$/i, '');
+
+    // Remover hashes de build (ej: main.abc123.css -> main)
+    path = path.replace(/\.([a-f0-9]{8,})\./i, '.');
+
+    // Construir URL normalizada
+    const normalizedURL = "".concat(urlObj.origin).concat(path);
+    return normalizedURL.toLowerCase();
+  } catch {
+    // Si no es una URL válida, normalizar como string
+    return url.toLowerCase().replace(/[?#].*$/, '') // Remover query params y hash
+    .replace(/\.(css|scss|sass|less)$/i, '') // Remover extensiones
+    .replace(/\.([a-f0-9]{8,})\./i, '.') // Remover hashes de build
+    .trim();
+  }
+};
+
+/**
+ * Genera un hash único para un conjunto de estilos normalizado
+ */
+const generateStyleHash = content => {
+  const normalizedContent = normalizeCSSContent(content);
+
+  // Usar un algoritmo de hash más robusto
+  let hash = 0;
+  const prime = 31;
+  for (let i = 0; i < normalizedContent.length; i++) {
+    const char = normalizedContent.charCodeAt(i);
+    hash = hash * prime + char >>> 0; // Mantener como entero de 32 bits sin signo
+  }
+  return hash.toString(36);
+};
+
+/**
+ * Verifica si el contenido es un estilo de Energy UI
+ */
+const isEnergyUIStyle = content => {
+  if (!content || typeof content !== 'string') {
+    return false;
+  }
+  const normalizedContent = normalizeCSSContent(content);
+
+  // Patrones específicos de Energy UI - MÁS SEGUROS
+  const energyUIPatterns = [
+  // Clases de componentes UT (muy específicas)
+  /\.[a-z]*UT[A-Z][a-zA-Z]*/g,
+  // Clases CSS Modules con hash de UT (muy específicas)
+  /\.UT[A-Z][a-zA-Z]*__[a-zA-Z0-9_-]+/g,
+  // Variables CSS de Energy UI (muy específicas)
+  /--energy-ui-/g, /--ut-/g,
+  // Selectores específicos de Energy UI (muy específicos)
+  /\[data-energy-ui\]/g, /\[data-ut-/g,
+  // Comentarios específicos de Energy UI (muy específicos)
+  /\/\*.*energy.*ui.*\*\//gi, /\/\*.*ut.*\*\//gi,
+  // CSS Modules internos de Energy UI (patrón específico .styles_[name]_[hash])
+  /\.styles_[a-zA-Z0-9_-]+_[a-zA-Z0-9_-]+/g,
+  // Source maps específicos de Energy UI
+  /sourceMappingURL.*energy/i, /sourceMappingURL.*ut/i];
+
+  // Verificación adicional de seguridad: debe contener al menos 2 patrones específicos
+  const matches = energyUIPatterns.filter(pattern => pattern.test(normalizedContent));
+
+  // Solo considerar Energy UI si hay al menos 2 coincidencias (más seguro)
+  if (matches.length >= 2) {
+    return true;
+  }
+
+  // Caso especial: si contiene el patrón .styles_[name]_[hash] Y algún otro patrón específico
+  const stylesPattern = /\.styles_[a-zA-Z0-9_-]+_[a-zA-Z0-9_-]+/g;
+  const hasStylesPattern = stylesPattern.test(normalizedContent);
+  const hasOtherPattern = energyUIPatterns.some(pattern => pattern !== stylesPattern && pattern.test(normalizedContent));
+  const isEnergyUI = hasStylesPattern && hasOtherPattern;
+  return isEnergyUI;
+};
+
+/**
+ * Verifica si una URL es de Energy UI
+ */
+const isEnergyUIURL = url => {
+  if (!url || typeof url !== 'string') {
+    return false;
+  }
+  const normalizedURL = normalizeURL(url);
+
+  // Patrones de URL de Energy UI - MÁS SEGUROS
+  const energyUIPatterns = [
+  // URLs específicas de Energy UI
+  /energy-ui/i, /energyui/i, /ut-components/i, /energy.*ui/i,
+  // URLs locales específicas de Energy UI (más restrictivas)
+  /localhost.*\/energy/i, /localhost.*\/ut/i, /localhost.*energy-ui/i, /localhost.*ut-components/i];
+  return energyUIPatterns.some(pattern => pattern.test(normalizedURL));
+};
+
+/**
+ * Verifica si un estilo ya está cargado
+ */
+const isStyleAlreadyLoaded = content => {
+  const hash = generateStyleHash(content);
+  return loadedStyles.has(hash);
+};
+
+/**
+ * Marca un estilo como cargado
+ */
+const markStyleAsLoaded = (content, element) => {
+  const hash = generateStyleHash(content);
+  loadedStyles.add(hash);
+  styleElementsByHash.set(hash, element);
+};
+
+/**
+ * Verifica si una hoja de estilos externa ya está cargada
+ */
+const isStylesheetAlreadyLoaded = href => {
+  const normalizedHref = normalizeURL(href);
+  return loadedStylesheets.has(normalizedHref);
+};
+
+/**
+ * Marca una hoja de estilos externa como cargada
+ */
+const markStylesheetAsLoaded = href => {
+  const normalizedHref = normalizeURL(href);
+  loadedStylesheets.add(normalizedHref);
+};
+
+/**
+ * Verifica si estamos en un entorno compatible
+ */
+const isCompatibleEnvironment = () => typeof window !== 'undefined' && typeof document !== 'undefined' && typeof document.head !== 'undefined';
+
+/**
+ * Intercepta la creación de elementos <style> para evitar duplicados
+ */
+const interceptStyleCreation = () => {
+  // Verificar si estamos en un entorno con DOM disponible
+  if (!isCompatibleEnvironment()) {
+    return;
+  }
+  if (isConfigured) {
+    return;
+  }
+
+  // Usar el punto de inserción existente (meta tag)
+  const insertionPoint = document.getElementById('energyui-insertion-point');
+  if (!insertionPoint) {
+    console.warn('Energy UI: No se encontró el punto de inserción <meta id="energyui-insertion-point"/>');
+    return;
+  }
+
+  // Observer específico que solo procesa elementos después del meta tag
+
+  // Observer que solo observa los cambios DESPUÉS del meta tag (más seguro)
+  const observeAfterMetaTag = () => {
+    // Observar solo los nodos que se insertan después del meta tag
+    const observer = new MutationObserver(mutations => {
+      mutations.forEach(mutation => {
+        if (mutation.type === 'childList') {
+          mutation.addedNodes.forEach(node => {
+            if (node.nodeType === Node.ELEMENT_NODE) {
+              // Solo procesar elementos que están después del meta tag
+              if (insertionPoint.compareDocumentPosition(node) & Node.DOCUMENT_POSITION_FOLLOWING) {
+                // Procesar elementos <style>
+                if (node.tagName === 'STYLE') {
+                  const content = node.textContent || '';
+
+                  // Usar detección mejorada de Energy UI
+                  if (content && isEnergyUIStyle(content)) {
+                    if (isStyleAlreadyLoaded(content)) {
+                      node.remove();
+                    } else {
+                      markStyleAsLoaded(content, node);
+                    }
+                  }
+                }
+
+                // Procesar elementos <link> con hojas de estilos
+                if (node.tagName === 'LINK' && node.rel === 'stylesheet') {
+                  const href = node.href || '';
+
+                  // Usar detección mejorada de URLs de Energy UI
+                  if (href && isEnergyUIURL(href)) {
+                    // Detección silenciosa de hojas de estilos externas
+                  }
+                }
+              }
+            }
+          });
+        }
+      });
+    });
+
+    // Observar solo el head, pero filtrar por posición relativa al meta tag
+    observer.observe(document.head, {
+      childList: true,
+      subtree: false // No observar subtree, solo nodos directos
+    });
+    return observer;
+  };
+
+  // Usar el observer específico
+  globalObserver = observeAfterMetaTag();
+
+  // Marcar como configurado
+  isConfigured = true;
+};
+
+/**
+ * Función para limpiar estilos duplicados existentes
+ */
+const cleanupDuplicateStyles = () => {
+  // Limpiar elementos <style> duplicados
+  const existingStyleElements = document.querySelectorAll('style');
+  const seenContents = new Set();
+  existingStyleElements.forEach(style => {
+    const content = style.textContent || '';
+
+    // Usar detección mejorada de Energy UI
+    if (content && isEnergyUIStyle(content)) {
+      const hash = generateStyleHash(content);
+      if (seenContents.has(hash)) {
+        style.remove();
+      } else {
+        seenContents.add(hash);
+        markStyleAsLoaded(content, style);
+      }
+    }
+  });
+
+  // Limpiar hojas de estilos externas duplicadas
+  const linkElements = document.querySelectorAll('link[rel="stylesheet"]');
+  linkElements.forEach(link => {
+    const href = link.href || '';
+
+    // Usar detección mejorada de URLs de Energy UI
+    if (href && isEnergyUIURL(href)) {
+      if (isStylesheetAlreadyLoaded(href)) {
+        link.remove();
+      } else {
+        markStylesheetAsLoaded(href);
+      }
+    }
+  });
+};
+
+/**
+ * Función para limpiar recursos y desconectar observers
+ */
+const cleanupStyleDeduplication = () => {
+  if (globalObserver) {
+    globalObserver.disconnect();
+    globalObserver = null;
+  }
+
+  // Limpiar caches
+  loadedStyles.clear();
+  styleElementsByHash.clear();
+  loadedStylesheets.clear();
+
+  // Resetear estado
+  isConfigured = false;
+};
+
+/**
+ * Hook para React
+ */
+const useStyleDeduplication = function () {
+  let enableStyleDeduplication = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  useEffect(() => {
+    if (enableStyleDeduplication) {
+      interceptStyleCreation();
+      cleanupDuplicateStyles();
+    }
+
+    // Cleanup automático cuando el componente se desmonta
+    return () => {
+      if (enableStyleDeduplication) {
+        cleanupStyleDeduplication();
+      }
+    };
+  }, [enableStyleDeduplication]);
+};
+
+/**
+ * Función para configuración manual
+ */
+const setupStyleDeduplication = () => {
+  interceptStyleCreation();
+  cleanupDuplicateStyles();
+};
+
+/**
+ * Función para verificar si está configurado
+ */
+const isStyleDeduplicationConfigured = () => isConfigured && globalObserver !== null;
+
+/**
+ * Función para obtener estadísticas de deduplicación
+ */
+const getDeduplicationStats = () => ({
+  loadedStylesCount: loadedStyles.size,
+  styleElementsByHashCount: styleElementsByHash.size,
+  loadedStylesheetsCount: loadedStylesheets.size,
+  isConfigured: isStyleDeduplicationConfigured()
+});
+
+/**
+ * Función para testing: verificar si un contenido sería detectado como Energy UI
+ */
+const testEnergyUIDetection = content => ({
+  isEnergyUI: isEnergyUIStyle(content),
+  normalizedContent: normalizeCSSContent(content),
+  hash: generateStyleHash(content)
+});
+
+/**
+ * Función para testing: verificar si una URL sería detectada como Energy UI
+ */
+const testEnergyUIURLDetection = url => ({
+  isEnergyUI: isEnergyUIURL(url),
+  normalizedURL: normalizeURL(url)
+});
+
+/**
+ * Función para debugging: obtener información detallada de estilos cargados
+ */
+const getDetailedStats = () => {
+  const currentStyleElements = document.querySelectorAll('style');
+  const currentLinkElements = document.querySelectorAll('link[rel="stylesheet"]');
+  const energyUIStyles = [];
+  const energyUILinks = [];
+  currentStyleElements.forEach((style, index) => {
+    const content = style.textContent || '';
+    if (isEnergyUIStyle(content)) {
+      energyUIStyles.push({
+        index,
+        hash: generateStyleHash(content),
+        isDuplicate: isStyleAlreadyLoaded(content),
+        normalizedContent: "".concat(normalizeCSSContent(content).substring(0, 100), "...")
+      });
+    }
+  });
+  currentLinkElements.forEach((link, index) => {
+    const href = link.href || '';
+    if (isEnergyUIURL(href)) {
+      energyUILinks.push({
+        index,
+        href,
+        normalizedURL: normalizeURL(href),
+        isDuplicate: isStylesheetAlreadyLoaded(href)
+      });
+    }
+  });
+  return {
+    totalStyles: currentStyleElements.length,
+    totalLinks: currentLinkElements.length,
+    energyUIStyles,
+    energyUILinks,
+    loadedStylesCount: loadedStyles.size,
+    styleElementsByHashCount: styleElementsByHash.size,
+    isConfigured: isStyleDeduplicationConfigured()
+  };
+};
+export default {
+  getDeduplicationStats,
+  isStyleDeduplicationConfigured,
+  setupStyleDeduplication,
+  cleanupStyleDeduplication,
+  useStyleDeduplication,
+  isCompatibleEnvironment,
+  isStylesheetAlreadyLoaded,
+  testEnergyUIDetection,
+  testEnergyUIURLDetection,
+  getDetailedStats
+};

package/dist/esm/utils/useScreenSize.js

@@ -0,0 +1,5 @@
+import { createUseScreenSize } from '@widergy/energy-hooks';
+export const useScreenSize = createUseScreenSize({
+  mobileBP: 767,
+  tabletBP: 1024
+});

package/package.json

@@ -1,12 +1,16 @@
 {
   "name": "@widergy/energy-ui",
-  "version": "3.158.1",
+  "version": "3.159.0",
   "description": "Widergy Web Components",
   "author": "widergy",
   "license": "MIT",
   "repository": "widergy/energy-ui",
   "main": "dist/index.js",
-  "module": "dist/index.js",
+  "module": "dist/esm/index.js",
+  "sideEffects": [
+    "**/*.scss",
+    "**/*.css"
+  ],
   "files": [
     "dist"
   ],
@@ -19,9 +23,10 @@
     "eject": "react-scripts eject",
     "prebuild": "rimraf dist",
     "build": "NODE_ENV=production babel src/lib --out-dir dist --copy-files",
+    "build:esm": "BABEL_ENV=esm NODE_ENV=production babel src/lib --out-dir dist/esm --copy-files",
     "sass-lint": "./node_modules/sass-lint/bin/sass-lint.js -v -q",
     "prepare": "husky install",
-    "prepublishOnly": "npm run build",
+    "prepublishOnly": "npm run build && npm run build:esm",
     "dev": "nodemon -e scss,js -x yalc publish --push",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
@@ -57,7 +62,6 @@
     "numeral": "^2.0.6",
     "object-hash": "^3.0.0",
     "react-credit-cards": "^0.7.0",
-    "react-flagpack": "1.0.0",
     "react-google-maps": ">=9.2.2",
     "react-google-recaptcha": "^3.1.0",
     "react-intersection-observer": "^9.16.0",

package/dist/components/UTIcon/components/Flag/index.js

@@ -1,34 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = require("prop-types");
-var _reactFlagpack = _interopRequireDefault(require("react-flagpack"));
-var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const FlagComponent = _ref => {
-  let {
-    className,
-    name,
-    size
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(className, " ").concat(_stylesModule.default.flagContainer),
-    style: {
-      width: size,
-      height: size
-    }
-  }, /*#__PURE__*/_react.default.createElement(_reactFlagpack.default, {
-    code: name,
-    className: _stylesModule.default.flag
-  }));
-};
-FlagComponent.propTypes = {
-  className: _propTypes.string,
-  name: _propTypes.string,
-  size: _propTypes.number
-};
-var _default = exports.default = FlagComponent;

package/dist/components/UTIcon/components/Flag/styles.module.scss

@@ -1,10 +0,0 @@
-.flagContainer {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-}
-
-.flag {
-  height: 75% !important;
-  width: 100% !important;
-}