@tamilvananmurugan/xlibs/ruleset-loader.ts

Comprehensive UI component library with Aceternity, MagicUI, and ShadCN components

// Ruleset Loader
// Centralized access to UI generation rules from ruleset.json

import ruleset from './ruleset.json';

export interface Ruleset {
  ui_generation_rules: {
    version: string;
    description: string;
    ui_best_practice_defaults: {
      layout_defaults: {
        page_layout: {
          default_structure: string;
          header_height_vh: number;
          footer_height_vh: number;
          main_content_padding_vw: number[];
          max_content_width_vw: number;
          center_content: boolean;
        };
        section_layout: {
          default_structure: string;
          section_padding_vw: number;
          section_margin_vw: number;
          max_section_width_vw: number;
        };
        component_layout: {
          default_structure: string;
          component_padding_vw: number;
          component_margin_vw: number;
          max_component_width_vw: number;
        };
      };
      sizing_defaults: {
        component_sizing: {
          max_component_dimensions: {
            width_viewport_percent: number;
            height_viewport_percent: number;
            width_container_percent: number;
            height_container_percent: number;
          };
          minimum_viable_sizing: {
            text_height_vh: number;
            text_height_container_percent: number;
            interactive_element_vmin: number;
            interactive_element_container_percent: number;
          };
        };
      };
      spacing_system: {
        positive_rules: {
          relative_spatial_system: {
            base_unit_vw: number;
            base_unit_container_percent: number;
            allowed_vw_multiples: number[];
            allowed_container_multiples: number[];
          };
          hierarchical_spacing: {
            level_1_page_vw: number[];
            level_1_page_container_percent: number[];
            level_2_sections_vw: number;
            level_2_sections_container_percent: number;
            level_3_components_vw: number;
            level_3_components_container_percent: number;
            level_4_elements_vw: number;
            level_4_elements_container_percent: number;
          };
        };
      };
      typography_constraints: {
        responsive_typography_scale: {
          h1_vw_mobile: number;
          h1_vw_desktop: number;
          h2_vw_mobile: number;
          h2_vw_desktop: number;
          h3_vw_mobile: number;
          h3_vw_desktop: number;
          h4_vw_mobile: number;
          h4_vw_desktop: number;
          body_vw_mobile: number;
          body_vw_desktop: number;
          small_vw_mobile: number;
          small_vw_desktop: number;
        };
      };
    };
  };
}

export class RulesetLoader {
  private static instance: RulesetLoader;
  private ruleset: Ruleset;
  
  private constructor() {
    this.ruleset = ruleset as unknown as Ruleset;
  }
  
  static getInstance(): RulesetLoader {
    if (!RulesetLoader.instance) {
      RulesetLoader.instance = new RulesetLoader();
    }
    return RulesetLoader.instance;
  }
  
  // Get sizing constraints
  getSizingConstraints() {
    return this.ruleset.ui_generation_rules.ui_best_practice_defaults.sizing_defaults.component_sizing;
  }
  
  // Get spacing system
  getSpacingSystem() {
    return this.ruleset.ui_generation_rules.ui_best_practice_defaults.spacing_system;
  }
  
  // Get typography constraints
  getTypographyConstraints() {
    return this.ruleset.ui_generation_rules.ui_best_practice_defaults.typography_constraints;
  }
  
  // Get component sizing defaults
  getComponentSizingDefaults() {
    const sizing = this.getSizingConstraints();
    return {
      max_width_vw: sizing.max_component_dimensions.width_viewport_percent,
      max_height_vw: sizing.max_component_dimensions.height_viewport_percent,
      min_text_height_vh: sizing.minimum_viable_sizing.text_height_vh,
      min_interactive_element_vmin: sizing.minimum_viable_sizing.interactive_element_vmin
    };
  }
  
  // Get spacing defaults
  getSpacingDefaults() {
    const spacing = this.getSpacingSystem();
    return {
      base_unit_vw: spacing.positive_rules.relative_spatial_system.base_unit_vw,
      base_unit_container_percent: spacing.positive_rules.relative_spatial_system.base_unit_container_percent,
      page_spacing_vw: spacing.positive_rules.hierarchical_spacing.level_1_page_vw[0],
      section_spacing_vw: spacing.positive_rules.hierarchical_spacing.level_2_sections_vw,
      component_spacing_vw: spacing.positive_rules.hierarchical_spacing.level_3_components_vw,
      element_spacing_vw: spacing.positive_rules.hierarchical_spacing.level_4_elements_vw
    };
  }
  
  // Get typography defaults
  getTypographyDefaults() {
    const typography = this.getTypographyConstraints();
    return {
      h1_mobile_vw: typography.responsive_typography_scale.h1_vw_mobile,
      h1_desktop_vw: typography.responsive_typography_scale.h1_vw_desktop,
      h2_mobile_vw: typography.responsive_typography_scale.h2_vw_mobile,
      h2_desktop_vw: typography.responsive_typography_scale.h2_vw_desktop,
      body_mobile_vw: typography.responsive_typography_scale.body_vw_mobile,
      body_desktop_vw: typography.responsive_typography_scale.body_vw_desktop
    };
  }
}

// Export a default instance for easy access
export const rulesetLoader = RulesetLoader.getInstance();

// Utility functions for common access patterns
export const getSizingDefaults = () => rulesetLoader.getComponentSizingDefaults();
export const getSpacingDefaults = () => rulesetLoader.getSpacingDefaults();
export const getTypographyDefaults = () => rulesetLoader.getTypographyDefaults();