anti-ui/src/utils/classTransformer.ts

Una librería para hacer que tus proyectos de Tailwind se vean horribles automáticamente

import { IntensityLevel, ThemeRules } from '../types';
import { themes } from '../themes';

// Factor de aplicación según la intensidad
const INTENSITY_FACTORS: Record<IntensityLevel, number> = {
  'subtle': 0.25,
  'moderate': 0.5,
  'maximum': 0.75,
  'forbidden': 1.0
};

/**
 * Transforma las clases de Tailwind según el tema y la intensidad seleccionados
 */
export const transformClasses = (
  originalClasses: string,
  themeName: string,
  intensity: IntensityLevel
): string => {
  // Si no es un tema válido, devolver las clases originales
  if (!themes[themeName as keyof typeof themes]) {
    return originalClasses;
  }

  const theme = themes[themeName as keyof typeof themes];
  const intensityFactor = INTENSITY_FACTORS[intensity];
  
  // Separar las clases en un array
  const classArray = originalClasses.split(' ');
  let transformedClasses: string[] = [];
  
  // Por cada clase, determinar si se aplica la transformación según la intensidad
  classArray.forEach(originalClass => {
    // Probabilidad de que se aplique la transformación basada en la intensidad
    const applyTransform = Math.random() < intensityFactor;
    
    if (applyTransform) {
      // Aplicar transformaciones en orden
      let transformedClass = applyThemeRules(originalClass, theme);
      transformedClasses.push(transformedClass);
    } else {
      // Mantener la clase original
      transformedClasses.push(originalClass);
    }
  });
  
  // Eliminar duplicados y clases vacías
  transformedClasses = transformedClasses.filter(Boolean);
  transformedClasses = [...new Set(transformedClasses)];
  
  return transformedClasses.join(' ');
};

/**
 * Aplica las reglas de tema a una clase específica
 */
function applyThemeRules(originalClass: string, theme: ThemeRules): string {
  // Intentar cada tipo de transformación en orden
  let result = originalClass;
  
  // Aplicar transformaciones en orden de prioridad
  const transformations = [
    theme.fontFamily,
    theme.colors,
    theme.spacing,
    theme.alignment,
    theme.borders,
    theme.shadows,
    theme.animations,
    theme.misc
  ];
  
  for (const transformation of transformations) {
    const transformed = transformation(result);
    // Si la transformación cambió algo, usar el resultado
    if (transformed !== result) {
      return transformed;
    }
  }
  
  return result;
}

/**
 * Parsea un string de clases de Tailwind y las transforma
 */
export const processClassString = (
  classString?: string | null,
  themeName: string = 'nightmare90s',
  intensity: IntensityLevel = 'moderate'
): string => {
  if (!classString) return '';
  
  return transformClasses(classString, themeName, intensity);
};