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

package/dist/tokens/tokenValidator.esm.js

@@ -0,0 +1,497 @@
+
+
+export interface ValidationResult {
+  isValid;
+  errors];
+  warnings];
+}
+
+export interface ValidationError {
+  path;
+  message;
+  severity;
+}
+
+export interface ValidationWarning {
+  path;
+  message;
+  suggestion?;
+}
+
+export class TokenValidator {
+  /**
+   * Validates a complete theme tokens object
+   */
+  static validateTokens(tokens)] = [];
+    const warnings] = [];
+
+    // Validate basic structure
+    if (!tokens.theme) {
+      errors.push({
+        path,
+        message,
+        severity});
+    }
+
+    if (!tokens.version) {
+      errors.push({
+        path,
+        message,
+        severity});
+    }
+
+    if (!tokens.tokens) {
+      errors.push({
+        path,
+        message,
+        severity});
+    }
+
+    // Validate token categories
+    if (tokens.tokens) {
+      this.validateTokenCategory(tokens.tokens.color, 'color', errors, warnings);
+      this.validateTokenCategory(tokens.tokens.font, 'font', errors, warnings);
+      this.validateTokenCategory(tokens.tokens.spacing, 'spacing', errors, warnings);
+      this.validateTokenCategory(tokens.tokens.shadow, 'shadow', errors, warnings);
+      this.validateTokenCategory(tokens.tokens.transition, 'transition', errors, warnings);
+      this.validateTokenCategory(tokens.tokens.breakpoint, 'breakpoint', errors, warnings);
+    }
+
+    return {
+      isValid=== 0,
+      errors,
+      warnings
+    };
+  }
+
+  /**
+   * Validates a specific token category
+   */
+  private static validateTokenCategory(
+    category, 
+    categoryName, 
+    errors], 
+    warnings]
+  ) {
+    if (!category) return;
+
+    if (typeof category !== 'object') {
+      errors.push({
+        path}`,
+        message} category must be an object`,
+        severity});
+      return;
+    }
+
+    this.validateTokenGroup(category, `tokens.${categoryName}`, errors, warnings);
+  }
+
+  /**
+   * Validates a token group recursively
+   */
+  private static validateTokenGroup(
+    group, 
+    path, 
+    errors], 
+    warnings]
+  ) {
+    Object.entries(group).forEach(([key, value]) => {
+      const currentPath = `${path}.${key}`;
+
+      if (this.isToken(value)) {
+        this.validateToken(value as DesignToken, currentPath, errors, warnings);
+      } else if (typeof value === 'object' && value !== null) {
+        // Recursively validate nested groups
+        this.validateTokenGroup(value, currentPath, errors, warnings);
+      } else {
+        errors.push({
+          path,
+          message}`,
+          severity});
+      }
+    });
+  }
+
+  /**
+   * Validates an individual token
+   */
+  private static validateToken(
+    token, 
+    path, 
+    errors], 
+    warnings]
+  ) {
+    // Check required properties
+    if (token.value === undefined || token.value === null) {
+      errors.push({
+        path,
+        message,
+        severity});
+    }
+
+    if (!token.type) {
+      errors.push({
+        path,
+        message,
+        severity});
+    } else if (!this.isValidTokenType(token.type)) {
+      errors.push({
+        path,
+        message}`,
+        severity});
+    }
+
+    // Validate token type-specific values
+    this.validateTokenValue(token, path, errors, warnings);
+
+    // Check for missing descriptions (warning)
+    if (!token.description) {
+      warnings.push({
+        path,
+        message,
+        suggestion});
+    }
+
+    // Check for missing tags (warning)
+    if (!token.tags || token.tags.length === 0) {
+      warnings.push({
+        path,
+        message,
+        suggestion});
+    }
+  }
+
+  /**
+   * Validates token value based on type
+   */
+  private static validateTokenValue(
+    token, 
+    path, 
+    errors], 
+    warnings]
+  ) {
+    switch (token.type) {
+      case 'color', path, errors, warnings);
+        break;
+      case 'fontFamily', path, errors, warnings);
+        break;
+      case 'fontSize', path, errors, warnings);
+        break;
+      case 'fontWeight', path, errors, warnings);
+        break;
+      case 'lineHeight', path, errors, warnings);
+        break;
+      case 'spacing', path, errors, warnings);
+        break;
+      case 'shadow', path, errors, warnings);
+        break;
+      case 'transition', path, errors, warnings);
+        break;
+      case 'breakpoint', path, errors, warnings);
+        break;
+    }
+  }
+
+  /**
+   * Validates color tokens
+   */
+  private static validateColorToken(
+    token, 
+    path, 
+    errors], 
+    warnings]
+  ) {
+    const value = token.value as string;
+    
+    if (typeof value !== 'string') {
+      errors.push({
+        path,
+        message,
+        severity});
+      return;
+    }
+
+    // Check if it's a valid color format
+    if (!this.isValidColor(value)) {
+      errors.push({
+        path,
+        message}`,
+        severity});
+    }
+
+    // Check for semantic color consistency
+    if (token.category === 'color' && !(token as any).semantic) {
+      warnings.push({
+        path,
+        message,
+        suggestion, secondary, accent, success, warning, error, neutral)'
+      });
+    }
+  }
+
+  /**
+   * Validates font family tokens
+   */
+  private static validateFontFamilyToken(
+    token, 
+    path, 
+    errors], 
+    _warnings]
+  ) {
+    const value = token.value as string;
+    
+    if (typeof value !== 'string') {
+      errors.push({
+        path,
+        message,
+        severity});
+    }
+
+    if (value.trim().length === 0) {
+      errors.push({
+        path,
+        message,
+        severity});
+    }
+  }
+
+  /**
+   * Validates font size tokens
+   */
+  private static validateFontSizeToken(
+    token, 
+    path, 
+    errors], 
+    _warnings]
+  ) {
+    const value = token.value as string | number;
+    
+    if (typeof value === 'number') {
+      if (value <= 0) {
+        errors.push({
+          path,
+          message,
+          severity});
+      }
+    } else if (typeof value === 'string') {
+      if (!this.isValidCSSUnit(value)) {
+        errors.push({
+          path,
+          message}`,
+          severity});
+      }
+    } else {
+      errors.push({
+        path,
+        message,
+        severity});
+    }
+  }
+
+  /**
+   * Validates font weight tokens
+   */
+  private static validateFontWeightToken(
+    token, 
+    path, 
+    errors], 
+    _warnings]
+  ) {
+    const value = token.value as string | number;
+    
+    if (typeof value === 'number') {
+      if (value < 100 || value > 900 || value % 100 !== 0) {
+        errors.push({
+          path,
+          message,
+          severity});
+      }
+    } else if (typeof value === 'string') {
+      const validWeights = ['normal', 'bold', 'lighter', 'bolder'];
+      if (!validWeights.includes(value)) {
+        errors.push({
+          path,
+          message}`,
+          severity});
+      }
+    } else {
+      errors.push({
+        path,
+        message,
+        severity});
+    }
+  }
+
+  /**
+   * Validates line height tokens
+   */
+  private static validateLineHeightToken(
+    token, 
+    path, 
+    errors], 
+    _warnings]
+  ) {
+    const value = token.value as string | number;
+    
+    if (typeof value === 'number') {
+      if (value <= 0) {
+        errors.push({
+          path,
+          message,
+          severity});
+      }
+    } else if (typeof value === 'string') {
+      if (!this.isValidCSSUnit(value) && value !== 'normal') {
+        errors.push({
+          path,
+          message}`,
+          severity});
+      }
+    } else {
+      errors.push({
+        path,
+        message,
+        severity});
+    }
+  }
+
+  /**
+   * Validates spacing tokens
+   */
+  private static validateSpacingToken(
+    token, 
+    path, 
+    errors], 
+    _warnings]
+  ) {
+    const value = token.value as number;
+    
+    if (typeof value !== 'number') {
+      errors.push({
+        path,
+        message,
+        severity});
+      return;
+    }
+
+    if (value < 0) {
+      errors.push({
+        path,
+        message,
+        severity});
+    }
+  }
+
+  /**
+   * Validates shadow tokens
+   */
+  private static validateShadowToken(
+    token, 
+    path, 
+    errors], 
+    _warnings]
+  ) {
+    const value = token.value as string;
+    
+    if (typeof value !== 'string') {
+      errors.push({
+        path,
+        message,
+        severity});
+    }
+
+    if (value.trim().length === 0) {
+      errors.push({
+        path,
+        message,
+        severity});
+    }
+  }
+
+  /**
+   * Validates transition tokens
+   */
+  private static validateTransitionToken(
+    token, 
+    path, 
+    errors], 
+    _warnings]
+  ) {
+    const value = token.value as string;
+    
+    if (typeof value !== 'string') {
+      errors.push({
+        path,
+        message,
+        severity});
+    }
+
+    if (value.trim().length === 0) {
+      errors.push({
+        path,
+        message,
+        severity});
+    }
+  }
+
+  /**
+   * Validates breakpoint tokens
+   */
+  private static validateBreakpointToken(
+    token, 
+    path, 
+    errors], 
+    _warnings]
+  ) {
+    const value = token.value as number;
+    
+    if (typeof value !== 'number') {
+      errors.push({
+        path,
+        message,
+        severity});
+      return;
+    }
+
+    if (value < 0) {
+      errors.push({
+        path,
+        message,
+        severity});
+    }
+  }
+
+  /**
+   * Checks if a value is a valid token
+   */
+  private static isToken(value)=== 'object' && 
+           'value' in value && 
+           'type' in value;
+  }
+
+  /**
+   * Checks if a token type is valid
+   */
+  private static isValidTokenType(type)] = [
+      'color', 'fontFamily', 'fontSize', 'fontWeight', 'lineHeight', 
+      'letterSpacing', 'spacing', 'borderRadius', 'shadow', 'transition', 
+      'zIndex', 'breakpoint'
+    ];
+    return validTypes.includes(type);
+  }
+
+  /**
+   * Checks if a color value is valid
+   */
+  private static isValidColor(color), rgb, rgba, named colors
+    const colorRegex = /^(#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})|rgb\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*\)|rgba\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*,\s*[\d.]+\s*\)|transparent|currentColor)$/;
+    return colorRegex.test(color);
+  }
+
+  /**
+   * Checks if a CSS unit is valid
+   */
+  private static isValidCSSUnit(value)= /^[\d.]+(px|em|rem|vh|vw|%|ch|ex|in|cm|mm|pt|pc)$/;
+    return unitRegex.test(value);
+  }
+}