xlibs-components/dist/lib/config.js

Modern React component library with Aceternity, MagicUI, and ShadCN components for building beautiful web applications

import { cn } from "./utils";
// Configuration utility functions
export function createComponentConfig(config) {
    return config;
}
export function getVariantClasses(config, variant = "default") {
    return config.variants[variant]?.className || config.variants.default?.className || "";
}
export function getSizeClasses(config, size = "md") {
    return config.sizes[size]?.className || config.sizes.md?.className || "";
}
export function buildComponentClasses(config, variant = "default", size = "md", className) {
    return cn(getVariantClasses(config, variant), getSizeClasses(config, size), className);
}
// Theme validation utilities
export function validateThemeColors(className) {
    const hardcodedColors = [
        /#[0-9a-fA-F]{3,6}/, // Hex colors
        /rgb\([^)]+\)/, // RGB colors
        /hsl\([^)]+\)/, // HSL colors
        /bg-white/, // Common hardcoded colors
        /text-black/,
        /border-gray-/,
        /bg-blue-/,
        /text-gray-/
    ];
    return !hardcodedColors.some(pattern => pattern.test(className));
}
// Configuration validation
export function validateComponentConfig(config) {
    const errors = [];
    // Check if variants exist
    if (!config.variants || Object.keys(config.variants).length === 0) {
        errors.push("Component must have at least one variant");
    }
    // Check if sizes exist
    if (!config.sizes || Object.keys(config.sizes).length === 0) {
        errors.push("Component must have at least one size");
    }
    // Check for hardcoded colors in variants
    Object.entries(config.variants).forEach(([name, variant]) => {
        if (!validateThemeColors(variant.className)) {
            errors.push(`Variant '${name}' contains hardcoded colors. Use theme variables instead.`);
        }
    });
    // Check for hardcoded colors in sizes
    Object.entries(config.sizes).forEach(([name, size]) => {
        if (!validateThemeColors(size.className)) {
            errors.push(`Size '${name}' contains hardcoded colors. Use theme variables instead.`);
        }
    });
    return {
        isValid: errors.length === 0,
        errors
    };
}