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

package/dist/tokens/tokenValidator.d.ts

@@ -0,0 +1,488 @@
+export interface ValidationResult {
+  isValid: boolean;
+  errors: ValidationError[];
+  warnings: ValidationWarning[];
+}
+
+export interface ValidationError {
+  path: string;
+  message: string;
+  severity: 'error' | 'critical';
+}
+
+export interface ValidationWarning {
+  path: string;
+  message: string;
+  suggestion?: string;
+}
+
+export class TokenValidator {
+
+  static validateTokens(tokens: ThemeTokens): ValidationResult {
+    const errors: ValidationError[] = [];
+    const warnings: ValidationWarning[] = [];
+
+    // Validate basic structure
+    if (!tokens.theme) {
+      errors.push({
+        path: 'theme',
+        message: 'Theme name is required',
+        severity: 'critical'
+      });
+    }
+
+    if (!tokens.version) {
+      errors.push({
+        path: 'version',
+        message: 'Theme version is required',
+        severity: 'critical'
+      });
+    }
+
+    if (!tokens.tokens) {
+      errors.push({
+        path: 'tokens',
+        message: 'Tokens object is required',
+        severity: 'critical'
+      });
+    }
+
+    // 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: errors.length === 0,
+      errors,
+      warnings
+    };
+  }
+
+  private static validateTokenCategory(
+    category: any, 
+    categoryName: string, 
+    errors: ValidationError[], 
+    warnings: ValidationWarning[]
+  ) {
+    if (!category) return;
+
+    if (typeof category !== 'object') {
+      errors.push({
+        path: `tokens.${categoryName}`,
+        message: `${categoryName} category must be an object`,
+        severity: 'error'
+      });
+      return;
+    }
+
+    this.validateTokenGroup(category, `tokens.${categoryName}`, errors, warnings);
+  }
+
+  private static validateTokenGroup(
+    group: any, 
+    path: string, 
+    errors: ValidationError[], 
+    warnings: ValidationWarning[]
+  ) {
+    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: currentPath,
+          message: `Invalid token structure at ${currentPath}`,
+          severity: 'error'
+        });
+      }
+    });
+  }
+
+  private static validateToken(
+    token: DesignToken, 
+    path: string, 
+    errors: ValidationError[], 
+    warnings: ValidationWarning[]
+  ) {
+    // Check required properties
+    if (token.value === undefined || token.value === null) {
+      errors.push({
+        path,
+        message: 'Token value is required',
+        severity: 'error'
+      });
+    }
+
+    if (!token.type) {
+      errors.push({
+        path,
+        message: 'Token type is required',
+        severity: 'error'
+      });
+    } else if (!this.isValidTokenType(token.type)) {
+      errors.push({
+        path,
+        message: `Invalid token type: ${token.type}`,
+        severity: 'error'
+      });
+    }
+
+    // Validate token type-specific values
+    this.validateTokenValue(token, path, errors, warnings);
+
+    // Check for missing descriptions (warning)
+    if (!token.description) {
+      warnings.push({
+        path,
+        message: 'Token description is missing',
+        suggestion: 'Add a description to improve token documentation'
+      });
+    }
+
+    // Check for missing tags (warning)
+    if (!token.tags || token.tags.length === 0) {
+      warnings.push({
+        path,
+        message: 'Token tags are missing',
+        suggestion: 'Add tags to improve token categorization and searchability'
+      });
+    }
+  }
+
+  private static validateTokenValue(
+    token: DesignToken, 
+    path: string, 
+    errors: ValidationError[], 
+    warnings: ValidationWarning[]
+  ) {
+    switch (token.type) {
+      case 'color':
+        this.validateColorToken(token, path, errors, warnings);
+        break;
+      case 'fontFamily':
+        this.validateFontFamilyToken(token, path, errors, warnings);
+        break;
+      case 'fontSize':
+        this.validateFontSizeToken(token, path, errors, warnings);
+        break;
+      case 'fontWeight':
+        this.validateFontWeightToken(token, path, errors, warnings);
+        break;
+      case 'lineHeight':
+        this.validateLineHeightToken(token, path, errors, warnings);
+        break;
+      case 'spacing':
+        this.validateSpacingToken(token, path, errors, warnings);
+        break;
+      case 'shadow':
+        this.validateShadowToken(token, path, errors, warnings);
+        break;
+      case 'transition':
+        this.validateTransitionToken(token, path, errors, warnings);
+        break;
+      case 'breakpoint':
+        this.validateBreakpointToken(token, path, errors, warnings);
+        break;
+    }
+  }
+
+  private static validateColorToken(
+    token: DesignToken, 
+    path: string, 
+    errors: ValidationError[], 
+    warnings: ValidationWarning[]
+  ) {
+    const value = token.value as string;
+
+    if (typeof value !== 'string') {
+      errors.push({
+        path,
+        message: 'Color token value must be a string',
+        severity: 'error'
+      });
+      return;
+    }
+
+    // Check if it's a valid color format
+    if (!this.isValidColor(value)) {
+      errors.push({
+        path,
+        message: `Invalid color format: ${value}`,
+        severity: 'error'
+      });
+    }
+
+    // Check for semantic color consistency
+    if (token.category === 'color' && !(token as any).semantic) {
+      warnings.push({
+        path,
+        message: 'Semantic color missing semantic property',
+        suggestion: 'Add semantic property (primary, secondary, accent, success, warning, error, neutral)'
+      });
+    }
+  }
+
+  private static validateFontFamilyToken(
+    token: DesignToken, 
+    path: string, 
+    errors: ValidationError[], 
+    _warnings: ValidationWarning[]
+  ) {
+    const value = token.value as string;
+
+    if (typeof value !== 'string') {
+      errors.push({
+        path,
+        message: 'Font family token value must be a string',
+        severity: 'error'
+      });
+    }
+
+    if (value.trim().length === 0) {
+      errors.push({
+        path,
+        message: 'Font family token value cannot be empty',
+        severity: 'error'
+      });
+    }
+  }
+
+  private static validateFontSizeToken(
+    token: DesignToken, 
+    path: string, 
+    errors: ValidationError[], 
+    _warnings: ValidationWarning[]
+  ) {
+    const value = token.value as string | number;
+
+    if (typeof value === 'number') {
+      if (value <= 0) {
+        errors.push({
+          path,
+          message: 'Font size token value must be positive',
+          severity: 'error'
+        });
+      }
+    } else if (typeof value === 'string') {
+      if (!this.isValidCSSUnit(value)) {
+        errors.push({
+          path,
+          message: `Invalid font size unit: ${value}`,
+          severity: 'error'
+        });
+      }
+    } else {
+      errors.push({
+        path,
+        message: 'Font size token value must be a number or valid CSS unit string',
+        severity: 'error'
+      });
+    }
+  }
+
+  private static validateFontWeightToken(
+    token: DesignToken, 
+    path: string, 
+    errors: ValidationError[], 
+    _warnings: ValidationWarning[]
+  ) {
+    const value = token.value as string | number;
+
+    if (typeof value === 'number') {
+      if (value < 100 || value > 900 || value % 100 !== 0) {
+        errors.push({
+          path,
+          message: 'Font weight token value must be a multiple of 100 between 100 and 900',
+          severity: 'error'
+        });
+      }
+    } else if (typeof value === 'string') {
+      const validWeights = ['normal', 'bold', 'lighter', 'bolder'];
+      if (!validWeights.includes(value)) {
+        errors.push({
+          path,
+          message: `Invalid font weight value: ${value}`,
+          severity: 'error'
+        });
+      }
+    } else {
+      errors.push({
+        path,
+        message: 'Font weight token value must be a number or valid string',
+        severity: 'error'
+      });
+    }
+  }
+
+  private static validateLineHeightToken(
+    token: DesignToken, 
+    path: string, 
+    errors: ValidationError[], 
+    _warnings: ValidationWarning[]
+  ) {
+    const value = token.value as string | number;
+
+    if (typeof value === 'number') {
+      if (value <= 0) {
+        errors.push({
+          path,
+          message: 'Line height token value must be positive',
+          severity: 'error'
+        });
+      }
+    } else if (typeof value === 'string') {
+      if (!this.isValidCSSUnit(value) && value !== 'normal') {
+        errors.push({
+          path,
+          message: `Invalid line height value: ${value}`,
+          severity: 'error'
+        });
+      }
+    } else {
+      errors.push({
+        path,
+        message: 'Line height token value must be a number or valid CSS unit string',
+        severity: 'error'
+      });
+    }
+  }
+
+  private static validateSpacingToken(
+    token: DesignToken, 
+    path: string, 
+    errors: ValidationError[], 
+    _warnings: ValidationWarning[]
+  ) {
+    const value = token.value as number;
+
+    if (typeof value !== 'number') {
+      errors.push({
+        path,
+        message: 'Spacing token value must be a number',
+        severity: 'error'
+      });
+      return;
+    }
+
+    if (value < 0) {
+      errors.push({
+        path,
+        message: 'Spacing token value cannot be negative',
+        severity: 'error'
+      });
+    }
+  }
+
+  private static validateShadowToken(
+    token: DesignToken, 
+    path: string, 
+    errors: ValidationError[], 
+    _warnings: ValidationWarning[]
+  ) {
+    const value = token.value as string;
+
+    if (typeof value !== 'string') {
+      errors.push({
+        path,
+        message: 'Shadow token value must be a string',
+        severity: 'error'
+      });
+    }
+
+    if (value.trim().length === 0) {
+      errors.push({
+        path,
+        message: 'Shadow token value cannot be empty',
+        severity: 'error'
+      });
+    }
+  }
+
+  private static validateTransitionToken(
+    token: DesignToken, 
+    path: string, 
+    errors: ValidationError[], 
+    _warnings: ValidationWarning[]
+  ) {
+    const value = token.value as string;
+
+    if (typeof value !== 'string') {
+      errors.push({
+        path,
+        message: 'Transition token value must be a string',
+        severity: 'error'
+      });
+    }
+
+    if (value.trim().length === 0) {
+      errors.push({
+        path,
+        message: 'Transition token value cannot be empty',
+        severity: 'error'
+      });
+    }
+  }
+
+  private static validateBreakpointToken(
+    token: DesignToken, 
+    path: string, 
+    errors: ValidationError[], 
+    _warnings: ValidationWarning[]
+  ) {
+    const value = token.value as number;
+
+    if (typeof value !== 'number') {
+      errors.push({
+        path,
+        message: 'Breakpoint token value must be a number',
+        severity: 'error'
+      });
+      return;
+    }
+
+    if (value < 0) {
+      errors.push({
+        path,
+        message: 'Breakpoint token value cannot be negative',
+        severity: 'error'
+      });
+    }
+  }
+
+  private static isToken(value: any): value is DesignToken {
+    return value && 
+           typeof value === 'object' && 
+           'value' in value && 
+           'type' in value;
+  }
+
+  private static isValidTokenType(type: any): type is TokenType {
+    const validTypes: TokenType[] = [
+      'color', 'fontFamily', 'fontSize', 'fontWeight', 'lineHeight', 
+      'letterSpacing', 'spacing', 'borderRadius', 'shadow', 'transition', 
+      'zIndex', 'breakpoint'
+    ];
+    return validTypes.includes(type);
+  }
+
+  private static isValidColor(color: string): boolean {
+    // Basic color validation - hex, 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);
+  }
+
+  private static isValidCSSUnit(value: string): boolean {
+    const unitRegex = /^[\d.]+(px|em|rem|vh|vw|%|ch|ex|in|cm|mm|pt|pc)$/;
+    return unitRegex.test(value);
+  }
+}