@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.6 → 0.2.8

package/dist/themes/validation.esm.js

@@ -0,0 +1,411 @@
+// Theme Validation System
+// This file provides comprehensive validation for theme configurations
+
+import { 
+  MultiThemeConfig, 
+  ThemeValidationResult, 
+  ThemeValidationError, 
+  ThemeValidationWarning 
+} from './types';
+import { ColorManager } from './colorManager';
+
+export class ThemeValidator {
+  private static readonly REQUIRED_FIELDS = [
+    'fonts.primary.family',
+    'fonts.primary.sizes.md',
+    'colors.primary.500',
+    'colors.semantic.success',
+    'colors.semantic.error',
+    'colors.semantic.warning',
+    'colors.semantic.info',
+    'colors.surface.background',
+    'colors.text.primary',
+    'spacing.scale.md',
+    'shadows.md',
+    'transitions.duration.normal',
+    'transitions.easing.ease',
+    'meta.name',
+    'meta.description',
+    'meta.version'
+  ];
+
+  private static readonly COLOR_FORMATS = {
+    hex]{6}|[A-Fa-f0-9]{3})$/,
+    rgb,\s*\d+\s*,\s*\d+\s*\)$/,
+    rgba,\s*\d+\s*,\s*\d+\s*,\s*[\d.]+\s*\)$/,
+    hsl,\s*\d+%\s*,\s*\d+%\s*\)$/,
+    hsla,\s*\d+%\s*,\s*\d+%\s*,\s*[\d.]+\s*\)$/
+  };
+
+  private static readonly FONT_WEIGHTS = [100, 200, 300, 400, 500, 600, 700, 800, 900];
+
+  /**
+   * Validate a complete theme configuration
+   */
+  static validateTheme(theme)] = [];
+    const warnings] = [];
+
+    // Validate required fields
+    this.validateRequiredFields(theme, errors);
+
+    // Validate color formats
+    this.validateColorFormats(theme, errors, warnings);
+
+    // Validate color contrast
+    this.validateColorContrast(theme, warnings);
+
+    // Validate font configurations
+    this.validateFontConfigurations(theme, warnings);
+
+    // Validate spacing scales
+    this.validateSpacingScales(theme, warnings);
+
+    // Validate navigation configurations
+    this.validateNavigationConfigurations(theme, errors, warnings);
+
+    // Validate metadata
+    this.validateMetadata(theme, errors, warnings);
+
+    // Validate semantic consistency
+    this.validateSemanticConsistency(theme, warnings);
+
+    return {
+      isValid=== 0,
+      errors,
+      warnings
+    };
+  }
+
+  /**
+   * Validate that all required fields are present
+   */
+  private static validateRequiredFields(theme, errors])) {
+      const value = this.getNestedValue(theme, fieldPath);
+      if (value === undefined || value === null || value === '') {
+        errors.push({
+          path,
+          message}' is missing or empty`,
+          severity});
+      }
+    }
+  }
+
+  /**
+   * Validate color format consistency
+   */
+  private static validateColorFormats(theme, errors], warnings])= this.getAllColorFields(theme);
+    const formats = new Set<string>();
+
+    for (const { path, value } of colorFields) {
+      if (typeof value === 'string') {
+        // Use colorManager for validation
+        if (!ColorManager.isValidColor(value)) {
+          errors.push({
+            path,
+            message}'. Expected hex, rgb, hsl, or named color format`,
+            severity});
+        } else {
+          const format = this.detectColorFormat(value);
+          if (format) {
+            formats.add(format);
+          }
+        }
+      }
+    }
+
+    // Warn if multiple color formats are used
+    if (formats.size > 1) {
+      warnings.push({
+        path,
+        message).join(', ')}. Consider using a consistent format for better maintainability`,
+        severity});
+    }
+  }
+
+  /**
+   * Validate color contrast ratios
+   */
+  private static validateColorContrast(theme, warnings])= [
+      theme.colors?.text?.primary,
+      theme.colors?.text?.secondary,
+      theme.colors?.text?.muted
+    ].filter(Boolean);
+
+    const backgroundColors = [
+      theme.colors?.surface?.background,
+      theme.colors?.surface?.surface
+    ].filter(Boolean);
+
+    for (const textColor of textColors) {
+      for (const bgColor of backgroundColors) {
+        if (textColor && bgColor) {
+          // Use colorManager for contrast checking
+          const accessibility = ColorManager.checkColorContrast(textColor, bgColor);
+          
+          if (!accessibility.aa) {
+            warnings.push({
+              path,
+              message)}}' and '${bgColor}' is below WCAG AA standard (4.5)`,
+              severity});
+          } else if (!accessibility.aaa) {
+            warnings.push({
+              path,
+              message)}}' and '${bgColor}' is below WCAG AAA standard (7)`,
+              severity});
+          }
+
+          // Add accessibility recommendations
+          if (accessibility.recommended.length > 0) {
+            warnings.push({
+              path,
+              message; ')}`,
+              severity});
+          }
+        }
+      }
+    }
+  }
+
+  /**
+   * Validate font configurations
+   */
+  private static validateFontConfigurations(theme, warnings])) {
+      for (const weight of theme.fonts.primary.weights) {
+        if (!this.FONT_WEIGHTS.includes(weight)) {
+          warnings.push({
+            path,
+            message} is not a standard CSS font weight. Consider using, ')}`,
+            severity});
+        }
+      }
+    }
+
+    // Validate font size scale
+    if (theme.fonts?.primary?.sizes) {
+      const sizes = Object.values(theme.fonts.primary.sizes);
+      const numericSizes = sizes.map(size => parseFloat(size)).filter(size => !isNaN(size));
+      
+      if (numericSizes.length > 1) {
+        for (let i = 1; i < numericSizes.length; i++) {
+          if (numericSizes[i] <= numericSizes[i - 1]) {
+            warnings.push({
+              path,
+              message]} followed by ${numericSizes[i]}`,
+              severity});
+          }
+        }
+      }
+    }
+
+    // Validate font family fallbacks
+    if (theme.fonts?.primary?.family) {
+      const family = theme.fonts.primary.family;
+      if (!family.includes(',') && !family.includes('"') && !family.includes("'")) {
+        warnings.push({
+          path,
+          message}' should include fallback fonts for better cross-platform compatibility`,
+          severity});
+      }
+    }
+  }
+
+  /**
+   * Validate spacing scales
+   */
+  private static validateSpacingScales(theme, warnings])) {
+      const scales = Object.values(theme.spacing.scale);
+      const numericScales = scales.map(scale => parseFloat(scale)).filter(scale => !isNaN(scale));
+      
+      if (numericScales.length > 1) {
+        // Check if spacing follows a consistent pattern
+        const ratios = [];
+        for (let i = 1; i < numericScales.length; i++) {
+          ratios.push(numericScales[i] / numericScales[i - 1]);
+        }
+        
+        const avgRatio = ratios.reduce((sum, ratio) => sum + ratio, 0) / ratios.length;
+        const variance = ratios.reduce((sum, ratio) => sum + Math.pow(ratio - avgRatio, 2), 0) / ratios.length;
+        
+        if (variance > 0.1) { // High variance indicates inconsistent spacing
+          warnings.push({
+            path,
+            message, 1.5x or 2x multiplier) for better visual harmony`,
+            severity});
+        }
+      }
+    }
+  }
+
+  /**
+   * Validate navigation configurations
+   */
+  private static validateNavigationConfigurations(theme, _errors], warnings])) {
+      // Validate layout and behavior combinations
+      const { layout, behavior } = theme.navigation;
+      
+      if (layout === 'sidebar' && behavior === 'floating') {
+        warnings.push({
+          path,
+          message,
+          severity});
+      }
+
+      if (layout === 'tabs' && behavior === 'overlay') {
+        warnings.push({
+          path,
+          message,
+          severity});
+      }
+
+      // Validate responsive behavior
+      if (theme.navigation.responsive === 'desktop-first' && layout === 'horizontal') {
+        warnings.push({
+          path,
+          message,
+          severity});
+      }
+    }
+  }
+
+  /**
+   * Validate metadata
+   */
+  private static validateMetadata(theme, errors], warnings])) {
+      // Validate version format
+      if (theme.meta.version && !/^\d+\.\d+\.\d+/.test(theme.meta.version)) {
+        warnings.push({
+          path,
+          message}' should follow semantic versioning (e.g., 1.0.0)`,
+          severity});
+      }
+
+      // Validate category
+      if (theme.meta.category && !['brand', 'enterprise', 'custom', 'accessibility'].includes(theme.meta.category)) {
+        errors.push({
+          path,
+          message}'. Must be one of, enterprise, custom, accessibility`,
+          severity});
+      }
+
+      // Validate tags
+      if (theme.meta.tags && theme.meta.tags.length > 10) {
+        warnings.push({
+          path,
+          message} tags. Consider limiting to 10 tags for better organization`,
+          severity});
+      }
+    }
+  }
+
+  /**
+   * Validate semantic consistency
+   */
+  private static validateSemanticConsistency(theme, warnings])) {
+      const semanticColors = Object.values(theme.colors.semantic);
+      const primaryColors = Object.values(theme.colors.primary);
+      
+      for (const semanticColor of semanticColors) {
+        for (const primaryColor of primaryColors) {
+          if (this.colorsAreSimilar(semanticColor, primaryColor)) {
+            warnings.push({
+              path,
+              message}' is too similar to primary color '${primaryColor}'. Consider using more distinct colors for better semantic clarity`,
+              severity});
+          }
+        }
+      }
+    }
+  }
+
+  /**
+   * Helper, path)).reduce((current, key) => current?.[key], obj);
+  }
+
+  /**
+   * Helper); value}> {
+    const fields; value}> = [];
+    
+    const traverseColors = (obj, path) => {
+      if (obj && typeof obj === 'object') {
+        for (const [key, value] of Object.entries(obj)) {
+          const currentPath = path ? `${path}.${key}` ;
+          if (typeof value === 'string' && this.isColorValue(value)) {
+            fields.push({ path, value });
+          } else if (typeof value === 'object') {
+            traverseColors(value, currentPath);
+          }
+        }
+      }
+    };
+
+    traverseColors(theme.colors, 'colors');
+    return fields;
+  }
+
+  /**
+   * Helper), regex] of Object.entries(this.COLOR_FORMATS)) {
+      if (regex.test(color)) {
+        return format;
+      }
+    }
+    return null;
+  }
+
+  /**
+   * Helper), let detectColorFormat validate it
+    return value.startsWith('#') || 
+           value.startsWith('rgb') || 
+           value.startsWith('hsl') || 
+           value.startsWith('var(--') || 
+           value === 'transparent' || 
+           value === 'currentColor' ||
+           value === 'inherit' ||
+           // Also accept any string that might be a color (for validation)
+           value.includes('color') ||
+           value.includes('invalid');
+  }
+
+  /**
+   * Helper, color2)= this.getLuminance(color1);
+      const luminance2 = this.getLuminance(color2);
+      
+      const lighter = Math.max(luminance1, luminance2);
+      const darker = Math.min(luminance1, luminance2);
+      
+      return (lighter + 0.05) / (darker + 0.05);
+    } catch {
+      return 1; // Default fallback
+    }
+  }
+
+  /**
+   * Helper)) || color === 'transparent' || color === 'currentColor' || color === 'inherit') {
+      return 0.5; // Default fallback
+    }
+
+    // Convert hex to RGB and calculate luminance
+    try {
+      const hex = color.replace('#', '');
+      const r = parseInt(hex.substr(0, 2), 16) / 255;
+      const g = parseInt(hex.substr(2, 2), 16) / 255;
+      const b = parseInt(hex.substr(4, 2), 16) / 255;
+      
+      const [rs, gs, bs] = [r, g, b].map(c => {
+        if (c <= 0.03928) return c / 12.92;
+        return Math.pow((c + 0.055) / 1.055, 2.4);
+      });
+      
+      return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
+    } catch {
+      return 0.5; // Default fallback
+    }
+  }
+
+  /**
+   * Helper, color2)= this.calculateColorContrast(color1, color2);
+      return contrast < 2.0; // Very low contrast indicates similar colors
+    } catch {
+      return false;
+    }
+  }
+}