@wix/ditto-codegen-public 1.0.181 → 1.0.183

package/dist/examples-apps/custom-element/src/widgets/custom-elements/countdown-timer/widget.tsx

@@ -1,493 +0,0 @@
-import { items } from '@wix/data';
-import { window as wixWindow } from '@wix/site-window';
-
-interface CountdownConfig {
-  _id: string;
-  targetDate: Date;
-  title?: string;
-  isActive: boolean;
-}
-
-interface TimeRemaining {
-  days: number;
-  hours: number;
-  minutes: number;
-  seconds: number;
-}
-
-export default class extends HTMLElement {
-  private intervalId: number | null = null;
-  private config: CountdownConfig | null = null;
-  private isEditorMode = false;
-
-  public async connectedCallback(): Promise<void> {
-    await this.checkEnvironment();
-    if (this.isEditorMode) {
-      this.renderEditorPlaceholder();
-    } else {
-      await this.loadConfig();
-    }
-  }
-
-  public disconnectedCallback(): void {
-    if (this.intervalId !== null) {
-      clearInterval(this.intervalId);
-      this.intervalId = null;
-    }
-  }
-
-  private async checkEnvironment(): Promise<void> {
-    try {
-      const currentViewMode = await wixWindow.viewMode();
-      this.isEditorMode = currentViewMode === 'Editor';
-    } catch (error) {
-      console.error('Failed to check view mode:', error);
-      this.isEditorMode = false;
-    }
-  }
-
-  private async loadConfig(): Promise<void> {
-    try {
-      const result = await items.query('countdown-config')
-        .eq('isActive', true)
-        .limit(1)
-        .find();
-
-      if (result.items.length > 0) {
-        const item = result.items[0];
-        this.config = {
-          _id: item._id as string,
-          targetDate: new Date(item.targetDate as string),
-          title: item.title as string | undefined,
-          isActive: item.isActive as boolean
-        };
-        this.render();
-        this.startCountdown();
-      } else {
-        this.renderNoConfig();
-      }
-    } catch (error) {
-      console.error('Failed to load countdown config:', error);
-      this.renderError();
-    }
-  }
-
-  private calculateTimeRemaining(targetDate: Date): TimeRemaining | null {
-    const now = new Date().getTime();
-    const target = targetDate.getTime();
-    const difference = target - now;
-
-    if (difference <= 0) {
-      return null;
-    }
-
-    const days = Math.floor(difference / (1000 * 60 * 60 * 24));
-    const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
-    const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
-    const seconds = Math.floor((difference % (1000 * 60)) / 1000);
-
-    return { days, hours, minutes, seconds };
-  }
-
-  private startCountdown(): void {
-    if (!this.config || !this.config.isActive) {
-      return;
-    }
-
-    this.intervalId = window.setInterval(() => {
-      this.updateCountdown();
-    }, 1000);
-  }
-
-  private updateCountdown(): void {
-    if (!this.config) {
-      return;
-    }
-
-    const timeRemaining = this.calculateTimeRemaining(this.config.targetDate);
-
-    if (timeRemaining === null) {
-      this.renderExpired();
-      if (this.intervalId !== null) {
-        clearInterval(this.intervalId);
-        this.intervalId = null;
-      }
-      return;
-    }
-
-    this.renderCountdown(timeRemaining);
-  }
-
-  private render(): void {
-    if (!this.config) {
-      return;
-    }
-
-    const timeRemaining = this.calculateTimeRemaining(this.config.targetDate);
-
-    if (timeRemaining === null) {
-      this.renderExpired();
-    } else {
-      this.renderCountdown(timeRemaining);
-    }
-  }
-
-  private getStyles(): string {
-    return `
-      <style>
-        /* Editor Placeholder Styles */
-        .editor-container {
-          font-family: 'Courier New', monospace;
-          background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
-          color: #00ff88;
-          padding: 48px 24px;
-          border-radius: 16px;
-          text-align: center;
-          box-shadow: 0 8px 32px rgba(0, 255, 136, 0.2);
-          max-width: 600px;
-          margin: 0 auto;
-          border: 2px solid #00ff88;
-        }
-
-        .editor-icon {
-          font-size: 64px;
-          margin-bottom: 16px;
-          animation: pulse 2s ease-in-out infinite;
-        }
-
-        .editor-title {
-          font-size: 28px;
-          font-weight: 700;
-          margin: 0 0 12px 0;
-          text-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
-          letter-spacing: 2px;
-        }
-
-        .editor-message {
-          font-size: 16px;
-          opacity: 0.85;
-          margin: 0;
-          line-height: 1.6;
-        }
-
-        /* Countdown Timer Styles */
-        .timer-container {
-          font-family: 'Orbitron', 'Rajdhani', 'Exo 2', monospace, sans-serif;
-          background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
-          color: #00d9ff;
-          padding: 40px 24px;
-          border-radius: 20px;
-          text-align: center;
-          box-shadow: 0 20px 60px rgba(0, 217, 255, 0.3), inset 0 0 40px rgba(0, 217, 255, 0.1);
-          max-width: 700px;
-          margin: 0 auto;
-          position: relative;
-          overflow: hidden;
-        }
-
-        .timer-glow {
-          content: '';
-          position: absolute;
-          top: -50%;
-          left: -50%;
-          width: 200%;
-          height: 200%;
-          background: radial-gradient(circle, rgba(0, 217, 255, 0.1) 0%, transparent 70%);
-          animation: rotate 10s linear infinite;
-        }
-
-        .timer-title {
-          font-size: 32px;
-          font-weight: 900;
-          margin: 0 0 12px 0;
-          text-shadow: 0 0 20px rgba(0, 217, 255, 0.8), 0 0 40px rgba(0, 217, 255, 0.4);
-          letter-spacing: 3px;
-          text-transform: uppercase;
-          position: relative;
-          z-index: 1;
-        }
-
-        .timer-grid {
-          display: grid;
-          grid-template-columns: repeat(4, 1fr);
-          gap: 20px;
-          margin: 32px 0;
-          position: relative;
-          z-index: 1;
-        }
-
-        .time-unit {
-          background: rgba(0, 217, 255, 0.15);
-          border-radius: 12px;
-          padding: 24px 12px;
-          backdrop-filter: blur(10px);
-          border: 2px solid rgba(0, 217, 255, 0.3);
-          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 0 20px rgba(0, 217, 255, 0.1);
-          transition: all 0.3s ease;
-        }
-
-        .time-unit:hover {
-          transform: translateY(-4px);
-          border-color: rgba(0, 217, 255, 0.6);
-          box-shadow: 0 12px 40px rgba(0, 217, 255, 0.4), inset 0 0 30px rgba(0, 217, 255, 0.2);
-        }
-
-        .time-number {
-          font-size: 48px;
-          font-weight: 900;
-          margin: 0;
-          text-shadow: 0 0 15px rgba(0, 217, 255, 0.8), 0 0 30px rgba(0, 217, 255, 0.4);
-          font-family: 'Orbitron', monospace;
-          letter-spacing: 2px;
-        }
-
-        .time-label {
-          font-size: 13px;
-          text-transform: uppercase;
-          letter-spacing: 2px;
-          margin: 8px 0 0 0;
-          opacity: 0.9;
-          font-weight: 700;
-        }
-
-        /* Expired State Styles */
-        .expired-container {
-          font-family: 'Bebas Neue', 'Anton', 'Oswald', sans-serif;
-          background: linear-gradient(135deg, #2d1b00 0%, #5c3a1f 50%, #8b4513 100%);
-          color: #ffa500;
-          padding: 48px 24px;
-          border-radius: 20px;
-          text-align: center;
-          box-shadow: 0 20px 60px rgba(255, 165, 0, 0.4), inset 0 0 40px rgba(255, 165, 0, 0.1);
-          max-width: 600px;
-          margin: 0 auto;
-          border: 3px solid #ffa500;
-        }
-
-        .expired-icon {
-          font-size: 80px;
-          margin-bottom: 16px;
-          animation: bounce 1s ease-in-out infinite;
-        }
-
-        .expired-title {
-          font-size: 48px;
-          font-weight: 900;
-          margin: 0 0 16px 0;
-          text-shadow: 0 0 20px rgba(255, 165, 0, 0.8), 0 4px 8px rgba(0, 0, 0, 0.5);
-          letter-spacing: 4px;
-          text-transform: uppercase;
-        }
-
-        .expired-message {
-          font-size: 20px;
-          margin: 0;
-          opacity: 0.95;
-          font-weight: 600;
-          letter-spacing: 1px;
-        }
-
-        /* No Config State Styles */
-        .no-config-container {
-          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-          background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-          color: #2c3e50;
-          padding: 40px 24px;
-          border-radius: 16px;
-          text-align: center;
-          border: 2px dashed #95a5a6;
-          max-width: 500px;
-          margin: 0 auto;
-        }
-
-        .no-config-icon {
-          font-size: 64px;
-          margin-bottom: 16px;
-        }
-
-        .no-config-title {
-          font-size: 24px;
-          font-weight: 700;
-          margin: 0 0 12px 0;
-          color: #34495e;
-        }
-
-        .no-config-message {
-          font-size: 16px;
-          margin: 0;
-          line-height: 1.6;
-          color: #7f8c8d;
-        }
-
-        /* Error State Styles */
-        .error-container {
-          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-          background: #fff5f5;
-          color: #c53030;
-          padding: 32px 24px;
-          border-radius: 12px;
-          text-align: center;
-          border: 2px solid #fc8181;
-          max-width: 500px;
-          margin: 0 auto;
-        }
-
-        .error-icon {
-          font-size: 48px;
-          margin-bottom: 12px;
-        }
-
-        .error-message {
-          margin: 0;
-          font-size: 16px;
-          font-weight: 600;
-        }
-
-        /* Animations */
-        @keyframes pulse {
-          0%, 100% { 
-            opacity: 1; 
-            transform: scale(1); 
-          }
-          50% { 
-            opacity: 0.6; 
-            transform: scale(1.1); 
-          }
-        }
-
-        @keyframes rotate {
-          from { 
-            transform: rotate(0deg); 
-          }
-          to { 
-            transform: rotate(360deg); 
-          }
-        }
-
-        @keyframes bounce {
-          0%, 100% { 
-            transform: translateY(0); 
-          }
-          50% { 
-            transform: translateY(-20px); 
-          }
-        }
-
-        /* Responsive Styles */
-        @media (max-width: 600px) {
-          .timer-grid {
-            grid-template-columns: repeat(2, 1fr);
-            gap: 16px;
-          }
-
-          .time-number {
-            font-size: 36px;
-          }
-
-          .timer-container {
-            padding: 24px 16px;
-          }
-
-          .timer-title {
-            font-size: 24px;
-          }
-        }
-      </style>
-    `;
-  }
-
-  private renderEditorPlaceholder(): void {
-    this.innerHTML = `
-      ${this.getStyles()}
-      <div class="editor-container" data-testid="countdown-timer-editor">
-        <div class="editor-icon">⏱️</div>
-        <h2 class="editor-title">COUNTDOWN TIMER</h2>
-        <p class="editor-message">
-          This widget will display a live countdown on your published site.<br>
-          Configure the target date in your dashboard to get started.
-        </p>
-      </div>
-    `;
-  }
-
-  private renderCountdown(timeRemaining: TimeRemaining): void {
-    if (!this.config) {
-      return;
-    }
-
-    const timeUnits = [
-      { value: timeRemaining.days, label: 'Days' },
-      { value: timeRemaining.hours, label: 'Hours' },
-      { value: timeRemaining.minutes, label: 'Minutes' },
-      { value: timeRemaining.seconds, label: 'Seconds' }
-    ];
-
-    const timeUnitsHtml = timeUnits
-      .map(unit => `
-        <div class="time-unit">
-          <div class="time-number">${unit.value.toString().padStart(2, '0')}</div>
-          <div class="time-label">${unit.label}</div>
-        </div>
-      `)
-      .join('');
-
-    const titleHtml = this.config.title
-      ? `<h2 class="timer-title">${this.escapeHtml(this.config.title)}</h2>`
-      : '';
-
-    this.innerHTML = `
-      ${this.getStyles()}
-      <div class="timer-container" data-testid="countdown-timer">
-        <div class="timer-glow"></div>
-        ${titleHtml}
-        <div class="timer-grid">
-          ${timeUnitsHtml}
-        </div>
-      </div>
-    `;
-  }
-
-  private renderExpired(): void {
-    const message = this.config && this.config.title
-      ? `${this.escapeHtml(this.config.title)} has ended.`
-      : 'The countdown has ended.';
-
-    this.innerHTML = `
-      ${this.getStyles()}
-      <div class="expired-container" data-testid="countdown-timer-expired">
-        <div class="expired-icon">🎉</div>
-        <h2 class="expired-title">Time's Up!</h2>
-        <p class="expired-message">${message}</p>
-      </div>
-    `;
-  }
-
-  private renderNoConfig(): void {
-    this.innerHTML = `
-      ${this.getStyles()}
-      <div class="no-config-container" data-testid="countdown-timer-no-config">
-        <div class="no-config-icon">⚙️</div>
-        <h2 class="no-config-title">No Active Countdown</h2>
-        <p class="no-config-message">
-          Please configure a countdown timer in your dashboard to display it here.
-        </p>
-      </div>
-    `;
-  }
-
-  private renderError(): void {
-    this.innerHTML = `
-      ${this.getStyles()}
-      <div class="error-container" data-testid="countdown-timer-error">
-        <div class="error-icon">⚠️</div>
-        <p class="error-message">Unable to load countdown timer</p>
-      </div>
-    `;
-  }
-
-  private escapeHtml(text: string): string {
-    const div = document.createElement('div');
-    div.textContent = text;
-    return div.innerHTML;
-  }
-}