@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.1.4 → 0.1.6

package/src/tokens/tokenValidator.ts

@@ -0,0 +1,543 @@
+import type { ThemeTokens, DesignToken, TokenType } from './types';
+
+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 {
+  /**
+   * Validates a complete theme tokens object
+   */
+  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
+    };
+  }
+
+  /**
+   * Validates a specific token category
+   */
+  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);
+  }
+
+  /**
+   * Validates a token group recursively
+   */
+  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'
+        });
+      }
+    });
+  }
+
+  /**
+   * Validates an individual token
+   */
+  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'
+      });
+    }
+  }
+
+  /**
+   * Validates token value based on type
+   */
+  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;
+    }
+  }
+
+  /**
+   * Validates color tokens
+   */
+  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)'
+      });
+    }
+  }
+
+  /**
+   * Validates font family tokens
+   */
+  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'
+      });
+    }
+  }
+
+  /**
+   * Validates font size tokens
+   */
+  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'
+      });
+    }
+  }
+
+  /**
+   * Validates font weight tokens
+   */
+  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'
+      });
+    }
+  }
+
+  /**
+   * Validates line height tokens
+   */
+  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'
+      });
+    }
+  }
+
+  /**
+   * Validates spacing tokens
+   */
+  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'
+      });
+    }
+  }
+
+  /**
+   * Validates shadow tokens
+   */
+  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'
+      });
+    }
+  }
+
+  /**
+   * Validates transition tokens
+   */
+  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'
+      });
+    }
+  }
+
+  /**
+   * Validates breakpoint tokens
+   */
+  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'
+      });
+    }
+  }
+
+  /**
+   * Checks if a value is a valid token
+   */
+  private static isToken(value: any): value is DesignToken {
+    return value && 
+           typeof value === 'object' && 
+           'value' in value && 
+           'type' in value;
+  }
+
+  /**
+   * Checks if a token type is valid
+   */
+  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);
+  }
+
+  /**
+   * Checks if a color value is valid
+   */
+  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);
+  }
+
+  /**
+   * Checks if a CSS unit is valid
+   */
+  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);
+  }
+}

package/src/tokens/types.ts

@@ -0,0 +1,78 @@
+export interface DesignToken {
+  value: string | number;
+  type: TokenType;
+  description?: string;
+  category?: string;
+  tags?: string[];
+}
+
+export type TokenType = 
+  | 'color' 
+  | 'fontFamily' 
+  | 'fontSize' 
+  | 'fontWeight' 
+  | 'lineHeight' 
+  | 'letterSpacing' 
+  | 'spacing' 
+  | 'borderRadius' 
+  | 'shadow' 
+  | 'transition' 
+  | 'zIndex'
+  | 'breakpoint';
+
+export interface ColorToken extends DesignToken {
+  type: 'color';
+  value: string;
+  contrast?: {
+    light: string;
+    dark: string;
+  };
+  semantic?: 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'neutral';
+}
+
+export interface FontToken extends DesignToken {
+  type: 'fontFamily' | 'fontSize' | 'fontWeight' | 'lineHeight' | 'letterSpacing';
+  value: string | number;
+}
+
+export interface SpacingToken extends DesignToken {
+  type: 'spacing';
+  value: number;
+  unit?: 'px' | 'rem' | 'em';
+}
+
+export interface ShadowToken extends DesignToken {
+  type: 'shadow';
+  value: string;
+  elevation?: 'low' | 'medium' | 'high';
+}
+
+export interface TransitionToken extends DesignToken {
+  type: 'transition';
+  value: string;
+  easing?: 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out';
+}
+
+export interface TokenGroup {
+  [key: string]: DesignToken | TokenGroup;
+}
+
+export interface ThemeTokens {
+  theme: string;
+  version: string;
+  tokens: {
+    color?: TokenGroup;
+    font?: TokenGroup;
+    spacing?: TokenGroup;
+    shadow?: TokenGroup;
+    transition?: TokenGroup;
+    breakpoint?: TokenGroup;
+  };
+}
+
+export interface TokenExportOptions {
+  format: 'json' | 'css' | 'scss' | 'js' | 'ts';
+  platform?: 'web' | 'ios' | 'android' | 'figma';
+  includeMetadata?: boolean;
+  includeComments?: boolean;
+}