@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.1.3 → 0.1.5

package/src/themes/fontLoader.ts

@@ -0,0 +1,201 @@
+/**
+ * Theme Font Loader
+ * Dynamically loads fonts for different themes
+ */
+
+import { FontThemeConfig, FontFiles } from './types';
+
+export class FontLoader {
+  private loadedFonts: Set<string> = new Set();
+
+  /**
+   * Load fonts for a theme
+   */
+  async loadThemeFonts(fonts: FontThemeConfig): Promise<void> {
+    const fontPromises: Promise<void>[] = [];
+
+    // Load primary font
+    fontPromises.push(this.loadFont(fonts.primary));
+
+    // Load secondary font
+    fontPromises.push(this.loadFont(fonts.secondary));
+
+    // Load display font
+    fontPromises.push(this.loadFont(fonts.display));
+
+    // Load body font
+    fontPromises.push(this.loadFont(fonts.body));
+
+    // Wait for all fonts to load
+    await Promise.all(fontPromises);
+  }
+
+  /**
+   * Load a single font family
+   */
+  private async loadFont(fontConfig: FontThemeConfig['primary']): Promise<void> {
+    const { family, weights, display = 'swap', source } = fontConfig;
+    
+    // Skip if already loaded
+    if (this.loadedFonts.has(family)) {
+      return;
+    }
+
+    try {
+      // Load based on source type
+      if (source?.type === 'google') {
+        await this.loadGoogleFont(family, weights, display);
+        this.loadedFonts.add(family);
+        return;
+      }
+
+      if (source?.type === 'custom' && source.files) {
+        await this.loadCustomFontFiles(family, source.files, weights, display);
+        this.loadedFonts.add(family);
+        return;
+      }
+
+      if (source?.type === 'system' || !source) {
+        // Check if font is available in the system
+        if (await this.isFontAvailable(family)) {
+          this.loadedFonts.add(family);
+          return;
+        }
+      }
+
+      // Fallback: try Google Fonts if it's a known web font
+      if (this.isGoogleFont(family)) {
+        await this.loadGoogleFont(family, weights, display);
+        this.loadedFonts.add(family);
+        return;
+      }
+
+      console.warn(`Font ${family} could not be loaded, falling back to system fonts`);
+    } catch (error) {
+      console.error(`Error loading font ${family}:`, error);
+    }
+  }
+
+  /**
+   * Check if a font is available in the system
+   */
+  private async isFontAvailable(fontFamily: string): Promise<boolean> {
+    if (typeof document === 'undefined') return false;
+
+    // Remove quotes and get the first font family
+    const cleanFamily = fontFamily.split(',')[0].replace(/['"]/g, '').trim();
+    
+    return new Promise((resolve) => {
+      // Use FontFace API if available
+      if ('fonts' in document) {
+        const font = new FontFace(cleanFamily, 'normal');
+        font.load().then(() => {
+          resolve(true);
+        }).catch(() => {
+          resolve(false);
+        });
+      } else {
+        // For now, assume font is available if FontFace API is not supported
+        resolve(true);
+      }
+    });
+  }
+
+  /**
+   * Check if a font is a Google Font
+   */
+  private isGoogleFont(fontFamily: string): boolean {
+    const googleFonts = [
+      'Poppins', 'Inter', 'Roboto', 'Open Sans', 'Lato', 'Montserrat', 'Source Sans Pro',
+      'Raleway', 'PT Sans', 'Ubuntu', 'Noto Sans', 'Oswald', 'Playfair Display'
+    ];
+    
+    const cleanFamily = fontFamily.split(',')[0].replace(/['"]/g, '').trim();
+    return googleFonts.includes(cleanFamily);
+  }
+
+  /**
+   * Load a Google Font
+   */
+  private async loadGoogleFont(family: string, weights: number[], display: string): Promise<void> {
+    const cleanFamily = family.split(',')[0].replace(/['"]/g, '').trim();
+    const weightsParam = weights.join(',');
+    
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = `https://fonts.googleapis.com/css2?family=${cleanFamily.replace(/\s+/g, '+')}:wght@${weightsParam}&display=${display}`;
+    
+    return new Promise((resolve, reject) => {
+      link.onload = () => resolve();
+      link.onerror = () => reject(new Error(`Failed to load Google Font: ${family}`));
+      document.head.appendChild(link);
+    });
+  }
+
+  /**
+   * Load custom font files using @font-face
+   */
+  private async loadCustomFontFiles(family: string, files: FontFiles, weights: number[], display: string): Promise<void> {
+    const promises: Promise<void>[] = [];
+
+    weights.forEach(weight => {
+      if (files.woff2) {
+        promises.push(this.loadFontFace(family, weight, files.woff2, 'woff2', display));
+      } else if (files.woff) {
+        promises.push(this.loadFontFace(family, weight, files.woff, 'woff', display));
+      } else if (files.ttf) {
+        promises.push(this.loadFontFace(family, weight, files.ttf, 'truetype', display));
+      }
+    });
+
+    await Promise.all(promises);
+  }
+
+  /**
+   * Load a single font face using @font-face
+   */
+  private async loadFontFace(family: string, weight: number, url: string, format: string, display: string): Promise<void> {
+    if (typeof document === 'undefined') return;
+
+    return new Promise((resolve, reject) => {
+      const style = document.createElement('style');
+      style.textContent = `
+        @font-face {
+          font-family: '${family}';
+          font-weight: ${weight};
+          font-display: ${display};
+          src: url('${url}') format('${format}');
+        }
+      `;
+      
+      style.onload = () => resolve();
+      style.onerror = () => reject(new Error(`Failed to load font: ${family} ${weight}`));
+      
+      document.head.appendChild(style);
+      
+      // Resolve immediately since CSS loading doesn't have a reliable onload event
+      resolve();
+    });
+  }
+
+
+
+  /**
+   * Clear loaded fonts
+   */
+  clearLoadedFonts(): void {
+    this.loadedFonts.clear();
+  }
+
+  /**
+   * Get list of loaded fonts
+   */
+  getLoadedFonts(): string[] {
+    return Array.from(this.loadedFonts);
+  }
+}
+
+/**
+ * Default font loader instance
+ */
+export const fontLoader = new FontLoader();