@kupola/kupola 1.2.0

package/js/statcard.js

@@ -0,0 +1,219 @@
+class StatCard {
+  constructor(element) {
+    this.element = element;
+    this.valueElement = element.querySelector('.ds-statcard__value');
+    this.progressFill = element.querySelector('.ds-statcard__progress-fill');
+    this.animated = false;
+    this._observer = null;
+    
+    this.init();
+  }
+
+  init() {
+    this.animateValue();
+    this.animateProgress();
+    
+    this._observer = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting && !this.animated) {
+          this.animateValue();
+          this.animateProgress();
+          this.animated = true;
+        }
+      });
+    }, { threshold: 0.3 });
+    
+    this._observer.observe(this.element);
+  }
+
+  animateValue() {
+    if (!this.valueElement) return;
+    
+    const text = this.valueElement.textContent;
+    const match = text.match(/[\d.,]+/);
+    if (!match) return;
+    
+    const targetValue = parseFloat(match[0].replace(',', ''));
+    const prefix = text.substring(0, match.index);
+    const suffix = text.substring(match.index + match[0].length);
+    
+    const duration = 1500;
+    const startTime = performance.now();
+    const startValue = 0;
+    
+    const animate = (currentTime) => {
+      const elapsed = currentTime - startTime;
+      const progress = Math.min(elapsed / duration, 1);
+      const easeProgress = 1 - Math.pow(1 - progress, 3);
+      
+      const currentValue = startValue + (targetValue - startValue) * easeProgress;
+      
+      let formattedValue;
+      if (targetValue >= 1000000) {
+        formattedValue = (currentValue / 1000000).toFixed(1) + 'M';
+      } else if (targetValue >= 1000) {
+        formattedValue = (currentValue / 1000).toFixed(1) + 'K';
+      } else if (Number.isInteger(targetValue)) {
+        formattedValue = Math.floor(currentValue).toLocaleString();
+      } else {
+        formattedValue = currentValue.toFixed(2);
+      }
+      
+      this.valueElement.textContent = prefix + formattedValue + suffix;
+      
+      if (progress < 1) {
+        requestAnimationFrame(animate);
+      }
+    };
+    
+    requestAnimationFrame(animate);
+  }
+
+  animateProgress() {
+    if (!this.progressFill) return;
+    
+    const width = this.progressFill.getAttribute('data-width') || '0%';
+    this.progressFill.style.width = width;
+  }
+
+  updateValue(newValue, options = {}) {
+    if (!this.valueElement) return;
+    
+    const duration = options.duration || 800;
+    const text = this.valueElement.textContent;
+    const match = text.match(/[\d.,]+/);
+    
+    if (!match) {
+      this.valueElement.textContent = newValue;
+      return;
+    }
+    
+    const prefix = text.substring(0, match.index);
+    const suffix = text.substring(match.index + match[0].length);
+    const startValue = parseFloat(match[0].replace(',', ''));
+    const targetValue = parseFloat(newValue);
+    
+    const startTime = performance.now();
+    
+    const animate = (currentTime) => {
+      const elapsed = currentTime - startTime;
+      const progress = Math.min(elapsed / duration, 1);
+      const easeProgress = 1 - Math.pow(1 - progress, 3);
+      
+      const currentValue = startValue + (targetValue - startValue) * easeProgress;
+      
+      let formattedValue;
+      if (targetValue >= 1000000) {
+        formattedValue = (currentValue / 1000000).toFixed(1) + 'M';
+      } else if (targetValue >= 1000) {
+        formattedValue = (currentValue / 1000).toFixed(1) + 'K';
+      } else if (Number.isInteger(targetValue)) {
+        formattedValue = Math.floor(currentValue).toLocaleString();
+      } else {
+        formattedValue = currentValue.toFixed(2);
+      }
+      
+      this.valueElement.textContent = prefix + formattedValue + suffix;
+      
+      if (progress < 1) {
+        requestAnimationFrame(animate);
+      }
+    };
+    
+    requestAnimationFrame(animate);
+  }
+
+  updateProgress(percent, options = {}) {
+    if (!this.progressFill) return;
+    
+    const duration = options.duration || 600;
+    const currentWidth = parseFloat(this.progressFill.style.width || '0');
+    const targetWidth = Math.min(Math.max(percent, 0), 100);
+    
+    const startTime = performance.now();
+    
+    const animate = (currentTime) => {
+      const elapsed = currentTime - startTime;
+      const progress = Math.min(elapsed / duration, 1);
+      const easeProgress = 1 - Math.pow(1 - progress, 3);
+      
+      const currentWidthValue = currentWidth + (targetWidth - currentWidth) * easeProgress;
+      this.progressFill.style.width = currentWidthValue + '%';
+      
+      if (progress < 1) {
+        requestAnimationFrame(animate);
+      }
+    };
+    
+    requestAnimationFrame(animate);
+  }
+
+  setTrend(direction, value) {
+    const trendElement = this.element.querySelector('.ds-statcard__trend');
+    if (!trendElement) return;
+    
+    trendElement.className = `ds-statcard__trend ds-statcard__trend--${direction}`;
+    
+    const iconSvg = direction === 'up' 
+      ? '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/></svg>'
+      : direction === 'down'
+      ? '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="1 18 10.5 8.5 15.5 13.5 23 6"/></svg>'
+      : '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="12 19 18 13 12 7 6 13"/></svg>';
+    
+    trendElement.innerHTML = iconSvg + value;
+  }
+
+  destroy() {
+    if (this._observer) {
+      this._observer.disconnect();
+      this._observer = null;
+    }
+    this.animated = false;
+    this.valueElement = null;
+    this.progressFill = null;
+    this.element = null;
+  }
+}
+
+function initStatCard(element) {
+  if (element.__kupolaInitialized) return;
+
+  const instance = new StatCard(element);
+  element.__kupolaInstance = instance;
+  element.__kupolaInitialized = true;
+}
+
+function cleanupStatCard(element) {
+  if (!element.__kupolaInitialized || !element.__kupolaInstance) return;
+
+  const instance = element.__kupolaInstance;
+  instance.destroy();
+
+  element.__kupolaInstance = null;
+  element.__kupolaInitialized = false;
+}
+
+function initStatCards() {
+  document.querySelectorAll('.ds-statcard').forEach(card => {
+    initStatCard(card);
+  });
+}
+
+function updateStatCard(selector, newValue) {
+  const card = document.querySelector(selector);
+  if (card && card.__kupolaInstance) {
+    card.__kupolaInstance.updateValue(newValue);
+  }
+}
+
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = { StatCard, initStatCards, initStatCard, cleanupStatCard, updateStatCard };
+} else {
+  window.StatCard = StatCard;
+  window.initStatCard = initStatCard;
+  window.cleanupStatCard = cleanupStatCard;
+}
+
+if (window.kupolaInitializer) {
+  window.kupolaInitializer.register('statcard', initStatCard, cleanupStatCard);
+}

package/js/tag.js

@@ -0,0 +1,83 @@
+class Tag {
+    constructor(element) {
+        this.element = element;
+        this.closeBtn = element.querySelector('.ds-tag__close');
+        this._listeners = [];
+        this.init();
+    }
+
+    init() {
+        if (this.closeBtn) {
+            const closeHandler = (e) => {
+                e.stopPropagation();
+                this.element.dispatchEvent(new CustomEvent('ds-tag-remove', {
+                    detail: { tag: this.element },
+                    bubbles: true
+                }));
+                this.element.remove();
+            };
+            this.closeBtn.addEventListener('click', closeHandler);
+            this._listeners.push({ el: this.closeBtn, event: 'click', handler: closeHandler });
+        }
+    }
+
+    setContent(content) {
+        const textNodes = [];
+        this.element.childNodes.forEach(node => {
+            if (node.nodeType === Node.TEXT_NODE) {
+                textNodes.push(node);
+            }
+        });
+        textNodes.forEach(node => node.remove());
+        this.element.insertBefore(document.createTextNode(content), this.closeBtn || null);
+    }
+
+    getContent() {
+        return this.element.textContent.trim();
+    }
+
+    destroy() {
+        this._listeners.forEach(({ el, event, handler }) => {
+            el.removeEventListener(event, handler);
+        });
+        this._listeners = null;
+        this.closeBtn = null;
+        this.element = null;
+    }
+}
+
+function initTag(element) {
+    if (element.__kupolaInitialized) return;
+
+    const instance = new Tag(element);
+    element.__kupolaInstance = instance;
+    element.__kupolaInitialized = true;
+}
+
+function cleanupTag(element) {
+    if (!element.__kupolaInitialized || !element.__kupolaInstance) return;
+
+    const instance = element.__kupolaInstance;
+    instance.destroy();
+
+    element.__kupolaInstance = null;
+    element.__kupolaInitialized = false;
+}
+
+function initTags() {
+    document.querySelectorAll('.ds-tag').forEach(tag => {
+        initTag(tag);
+    });
+}
+
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = { Tag, initTags, initTag, cleanupTag };
+} else {
+    window.Tag = Tag;
+    window.initTag = initTag;
+    window.cleanupTag = cleanupTag;
+}
+
+if (window.kupolaInitializer) {
+    window.kupolaInitializer.register('tag', initTag, cleanupTag);
+}

package/js/test-utils.js

@@ -0,0 +1,251 @@
+class KupolaTestUtils {
+  static createElement(html) {
+    const container = document.createElement('div');
+    container.innerHTML = html;
+    return container.firstElementChild;
+  }
+
+  static mountComponent(ComponentClass, props = {}, html = '') {
+    const element = this.createElement(html);
+    const component = new ComponentClass(element);
+    Object.assign(component.props, props);
+    return { component, element };
+  }
+
+  static async waitFor(condition, timeout = 1000) {
+    const startTime = Date.now();
+    return new Promise((resolve, reject) => {
+      const check = async () => {
+        try {
+          const result = await condition();
+          if (result) {
+            resolve(result);
+          } else if (Date.now() - startTime < timeout) {
+            requestAnimationFrame(check);
+          } else {
+            reject(new Error('waitFor timeout'));
+          }
+        } catch (error) {
+          if (Date.now() - startTime < timeout) {
+            requestAnimationFrame(check);
+          } else {
+            reject(new Error('waitFor timeout'));
+          }
+        }
+      };
+      requestAnimationFrame(check);
+    });
+  }
+
+  static async waitForElement(selector, parent = document, timeout = 1000) {
+    return this.waitFor(() => parent.querySelector(selector), timeout);
+  }
+
+  static async waitForText(text, parent = document, timeout = 1000) {
+    return this.waitFor(() => parent.textContent.includes(text), timeout);
+  }
+
+  static fireEvent(element, eventName, detail = {}) {
+    const event = new CustomEvent(eventName, { 
+      bubbles: true, 
+      cancelable: true, 
+      detail 
+    });
+    element.dispatchEvent(event);
+  }
+
+  static fireInput(element, value) {
+    element.value = value;
+    this.fireEvent(element, 'input');
+    this.fireEvent(element, 'change');
+  }
+
+  static fireClick(element) {
+    this.fireEvent(element, 'click');
+  }
+
+  static fireKeyDown(element, key) {
+    const event = new KeyboardEvent('keydown', { key, bubbles: true });
+    element.dispatchEvent(event);
+  }
+
+  static async nextTick() {
+    return new Promise(resolve => requestAnimationFrame(resolve));
+  }
+
+  static mockDate(date) {
+    const originalNow = Date.now;
+    const originalDate = Date;
+    
+    Date.now = () => date.getTime();
+    globalThis.Date = class extends Date {
+      constructor(...args) {
+        super(...args);
+        if (args.length === 0) {
+          return new Date(date);
+        }
+        return new originalDate(...args);
+      }
+    };
+    
+    return () => {
+      Date.now = originalNow;
+      globalThis.Date = originalDate;
+    };
+  }
+
+  static mockFetch(mockResponses) {
+    const originalFetch = fetch;
+    
+    globalThis.fetch = jest.fn(async (url, options) => {
+      for (const mock of mockResponses) {
+        if (typeof mock.url === 'string' && url === mock.url) {
+          return mock.response();
+        }
+        if (mock.url instanceof RegExp && mock.url.test(url)) {
+          return mock.response();
+        }
+        if (mock.method && options && options.method === mock.method) {
+          return mock.response();
+        }
+      }
+      return originalFetch(url, options);
+    });
+    
+    return () => {
+      globalThis.fetch = originalFetch;
+    };
+  }
+
+  static async mountAndWait(ComponentClass, props = {}, html = '') {
+    const { component, element } = this.mountComponent(ComponentClass, props, html);
+    await component.mount();
+    await this.nextTick();
+    return { component, element };
+  }
+
+  static async unmountAndWait(component) {
+    await component.unmount();
+    await this.nextTick();
+  }
+
+  static getByText(parent, text) {
+    const elements = parent.querySelectorAll('*');
+    for (const element of elements) {
+      if (element.textContent.trim() === text) {
+        return element;
+      }
+    }
+    throw new Error(`Element with text "${text}" not found`);
+  }
+
+  static queryByText(parent, text) {
+    const elements = parent.querySelectorAll('*');
+    for (const element of elements) {
+      if (element.textContent.trim() === text) {
+        return element;
+      }
+    }
+    return null;
+  }
+
+  static getByTestId(parent, testId) {
+    const element = parent.querySelector(`[data-testid="${testId}"]`);
+    if (!element) {
+      throw new Error(`Element with data-testid="${testId}" not found`);
+    }
+    return element;
+  }
+
+  static queryByTestId(parent, testId) {
+    return parent.querySelector(`[data-testid="${testId}"]`);
+  }
+
+  static getByRole(parent, role) {
+    const element = parent.querySelector(`[role="${role}"]`);
+    if (!element) {
+      throw new Error(`Element with role="${role}" not found`);
+    }
+    return element;
+  }
+
+  static queryByRole(parent, role) {
+    return parent.querySelector(`[role="${role}"]`);
+  }
+
+  static async simulateDrag(element, startX, startY, endX, endY) {
+    this.fireEvent(element, 'dragstart', {
+      clientX: startX,
+      clientY: startY
+    });
+    
+    this.fireEvent(element, 'drag', {
+      clientX: (startX + endX) / 2,
+      clientY: (startY + endY) / 2
+    });
+    
+    this.fireEvent(element, 'dragend', {
+      clientX: endX,
+      clientY: endY
+    });
+  }
+
+  static async simulateTouch(element, startX, startY, endX, endY) {
+    const touchStart = new TouchEvent('touchstart', {
+      touches: [{ clientX: startX, clientY: startY }],
+      bubbles: true
+    });
+    element.dispatchEvent(touchStart);
+    
+    const touchMove = new TouchEvent('touchmove', {
+      touches: [{ clientX: (startX + endX) / 2, clientY: (startY + endY) / 2 }],
+      bubbles: true
+    });
+    element.dispatchEvent(touchMove);
+    
+    const touchEnd = new TouchEvent('touchend', {
+      touches: [{ clientX: endX, clientY: endY }],
+      bubbles: true
+    });
+    element.dispatchEvent(touchEnd);
+  }
+
+  static async waitForState(component, stateKey, expectedValue) {
+    return this.waitFor(() => {
+      return component.state[stateKey] === expectedValue;
+    });
+  }
+
+  static async waitForProps(component, propKey, expectedValue) {
+    return this.waitFor(() => {
+      return component.props[propKey] === expectedValue;
+    });
+  }
+
+  static async waitForEmitted(component, eventName) {
+    return this.waitFor(() => {
+      return component._emitted && component._emitted[eventName];
+    });
+  }
+
+  static spyOn(obj, methodName) {
+    const original = obj[methodName];
+    const spy = function(...args) {
+      spy.called = true;
+      spy.callCount = (spy.callCount || 0) + 1;
+      spy.args = (spy.args || []).concat([args]);
+      return original.apply(this, args);
+    };
+    obj[methodName] = spy;
+    return () => {
+      obj[methodName] = original;
+    };
+  }
+
+  static async flushPromises() {
+    return new Promise(resolve => setImmediate(resolve));
+  }
+}
+
+window.KupolaTestUtils = KupolaTestUtils;
+window.testUtils = KupolaTestUtils;