anubis-ui 1.3.0 → 1.4.0

package/src/tools/mapping/mapClassIntoRule.ts

@@ -1,335 +0,0 @@
-import { IRuleInfo } from '@/interfaces/preset.interface';
-import { config } from '@tools/config.tool';
-import { log } from '@tools/logger';
-
-const mapClassesIntoRules = (classes: string[]) => {
-	const usedVariations = new Map<string, string>();
-	const ruleInfos = classes
-		.map(cssClass => mapClassIntoRule(cssClass))
-		.filter(ruleInfo => ruleInfo !== null);
-
-	// Collecter les variations utilisés dans les règles générées
-	ruleInfos.forEach(ruleInfo => {
-		if (ruleInfo.variant && ruleInfo.variant.shouldExport) {
-			const variableName = `${ruleInfo.variant.prefix}-${ruleInfo.variant.variantName}`;
-			usedVariations.set(variableName, ruleInfo.variant.variantValue);
-		}
-	});
-
-	// Générer les règles CSS
-	const rules = generateCssRules(ruleInfos);
-
-	log(`${ruleInfos.length} rules generated`);
-
-	return {
-		rules,
-		variationsFromRules: Object.fromEntries(usedVariations),
-	};
-};
-
-const generateCssRules = (ruleInfos: IRuleInfo[]): string => {
-	return ruleInfos
-		.map(ruleInfo => `.${ruleInfo.selector} { ${ruleInfo.declaration} }`)
-		.join('\n');
-};
-
-const mapClassIntoRule = (stringClass: string): IRuleInfo | null => {
-	const params = getClassInfos(stringClass);
-	if (!params.utility) { return null }
-
-	const needsColor = params.utility?.declaration?.includes('${color}')
-	const usesVariation = params.variationName
-	const hasDefaultVariation = !params.utility?.variations || Object.keys(params.utility?.variations || []).includes('default')
-
-	/**
-	 * If need color but doesn't have one or if need a variation but doesn't have one either
-	 * this is a no go
-	*/
-	if ((needsColor && !params.color) || (!hasDefaultVariation && !usesVariation)) {
-		return null
-	}
-
-	const ruleInfo = buildRuleInfo(params);
-	return ruleInfo;
-};
-
-const getClassInfos = (stringClass: string) => {
-	const { cleanedClass, state } = getStateInfos(stringClass);
-	const { cleanedColor, prefix } = getPrefixInfos(cleanedClass);
-	const { color, baseColor, utility, variation, variationName } = getUtilityInfos({
-		cleanedColor,
-		prefix,
-	});
-
-	return {
-		state,
-
-		color,
-		baseColor,
-		prefix,
-
-		utility,
-		variation,
-		variationName,
-	};
-};
-
-const getStateInfos = (stringClass: string) => {
-	const state = config.states.find(configState =>
-		stringClass.startsWith(configState)
-	);
-
-	const cleanedClass = state
-		? stringClass.slice(state.length + 1)
-		: stringClass;
-
-	return {
-		cleanedClass,
-		state,
-	};
-};
-
-const getPrefixInfos = (
-	stringClass: string
-): { cleanedColor: string; prefix: string } => {
-	const prefixes = [
-		...config.utilities.map(u => u.prefix)
-	];
-
-	for (const prefix of prefixes) {
-		if (!stringClass.startsWith(prefix)) {
-			continue;
-		}
-
-		return {
-			cleanedColor: stringClass.slice(prefix.length + 1),
-			prefix,
-		};
-	}
-
-	log(`No matching prefix found for class: ${stringClass}`);
-	return { cleanedColor: stringClass, prefix: null };
-};
-
-const getUtilityInfos = ({
-	cleanedColor,
-	prefix,
-}: {
-	cleanedColor: string;
-	prefix?: string;
-}) => {
-	/**
-	 * Find utility variations matching the prefix from the config
-	 * Since a prefix can be in multiple utilities, filter every matching prefixes
-	 */
-	const possibleUtility = [...config.utilities].filter(
-		p => p.prefix === prefix
-	);
-
-	if (!possibleUtility.length) {
-		return { matchingUtility: null, variation: null };
-	}
-
-	const { colorExists } = getColorInfos(cleanedColor);
-	const possibleUtilityVariations = possibleUtility.filter(({ variations }) => Object.keys(variations || {})?.length)
-
-	/**
-	 * Find the utility where the variations exist
-	 * Logic:
-	 * 1. If
-	 * 		OR we have a valid color
-	 * 		OR no color specified
-	 * 		OR no possible utilities have variation
-	 *   Then use the first utility
-	 * 2. Otherwise, find a utility with a matching variation
-	 */
-	let matchingUtility;
-
-	if (colorExists || !cleanedColor || possibleUtilityVariations?.length <= 0) {
-		matchingUtility = possibleUtility[0];
-	} else {
-		// Find utility with matching variation
-		matchingUtility = possibleUtilityVariations.find(({ variations }) => {
-			if (!variations) return true;
-
-			const mappedVariations = Array.isArray(variations) ? variations : Object.keys(variations)
-
-			return mappedVariations.some(
-				v => cleanedColor === v || cleanedColor.endsWith(v)
-			);
-		});
-	}
-
-	if (!matchingUtility) {
-		// log(`No utility found for ${cleanedColor || prefix}`);
-
-		return {
-			matchingUtility,
-			variation: null,
-		};
-	}
-
-	if (!colorExists && !matchingUtility.variations) {
-		// log(`Unknow stuff -> ${[prefix, cleanedColor].join('-')}`);
-
-		return {
-			matchingUtility,
-			variation: null,
-		};
-	}
-
-	const possibleVariations = matchingUtility.variations || { default: '' };
-
-	const defaultVariation = 'default';
-	/**
-	 * Variation matching logic:
-	 * 1. Check for exact match first (prevents "xl" matching when looking for "2xl")
-	 * 2. Fall back to endsWith for edge cases where variation is a suffix
-	 */
-	const exactVariation = Object.keys(possibleVariations).find(
-		v => cleanedColor === v
-	);
-	const closestVariation = Object.keys(possibleVariations).find(v =>
-		cleanedColor.endsWith(v)
-	);
-
-	const matchingVariation = exactVariation || closestVariation;
-
-	const variation = possibleVariations[matchingVariation || defaultVariation];
-	const color = matchingVariation
-		? cleanedColor.slice(0, -matchingVariation.length - 1)
-		: cleanedColor;
-
-	const { baseColor } = getColorInfos(color)
-
-	return {
-		color,
-		baseColor,
-		utility: matchingUtility,
-		variationName: matchingVariation,
-		variation,
-	};
-};
-
-// Map state names to CSS pseudo-selectors
-const stateSelectors: Record<string, string> = {
-	hover: ':hover',
-	'not-hover': ':not(:hover)',
-};
-
-const buildRuleInfo = ({
-	state,
-	prefix,
-	color,
-	baseColor,
-	utility,
-	variation,
-	variationName,
-}): IRuleInfo | null => {
-	// Get state selector from mapping
-	const stateSelector = state ? stateSelectors[state] || '' : '';
-
-	let selector = `${prefix}${color ? `-${color}` : ''}${
-		variationName ? `-${variationName}` : ''
-	}`;
-
-	if (state) {
-		selector = `${state}\\:${selector}${stateSelector}`;
-	}
-
-	// Vérifier que la couleur existe dans la config
-	if (baseColor && !config.colors[baseColor]) {
-		log(
-			`Color '${baseColor}' not found in colors config - skipping rule generation`
-		);
-		return null;
-	}
-
-	// Gérer les variations avec variables CSS ou valeurs directes
-	let variableToUse = variation;
-	let variantInfo = undefined;
-
-	// Vérifier si on doit exporter les variations en tant que variables CSS
-	const exportVariations = utility['export'];
-	const useVariables = exportVariations === 'variations' || exportVariations === 'all';
-
-	if (variationName && variationName !== 'default') {
-		const variablePrefix = prefix;
-		const variableName = `${variablePrefix}-${variationName}`;
-
-		// Si export-variations: true, utiliser une variable CSS, sinon la valeur directe
-		if (useVariables) {
-			variableToUse = `var(--${variableName})`;
-			variantInfo = {
-				prefix,
-				variantName: variationName,
-				variantValue: variation,
-				shouldExport: true,
-			};
-		} else {
-			// Utiliser la valeur directe, pas de variable CSS
-			variableToUse = variation;
-		}
-	} else if (variation && variationName === 'default') {
-		// Pour les variations par défaut
-		const variableName = `${prefix}-default`;
-
-		if (useVariables) {
-			variableToUse = `var(--${variableName})`;
-			variantInfo = {
-				prefix,
-				variantName: 'default',
-				variantValue: variation,
-				shouldExport: true,
-			};
-		} else {
-			variableToUse = variation;
-		}
-	}
-
-	let declaration = utility.declaration
-		.replace('${value}', variableToUse)
-		.replace('${color}', color ? `var(--${color})` : '');
-
-	if (!declaration.endsWith(';')) {
-		declaration += ';';
-	}
-
-	if (!declaration.includes('!important')) {
-		declaration = declaration.replace(';', ' !important;');
-	}
-
-	return {
-		selector,
-		declaration,
-		color: color || undefined,
-		variant: variantInfo,
-	};
-};
-
-/**
- * _ Check if a color includes opacity (ends with 2 digits)
- * * Opacity is included in the color name during mixin declaration
- * */
-// Cache regex outside function to avoid recompilation on every call
-const OPACITY_DETECTION_REGEX = /(?:(\w-?)+)-\d{2}$/; // Strings that end with two digits (e.g., primary-50)
-const OPACITY_SUFFIX_LENGTH = 3; // Length of "-NN" format
-
-const getColorInfos = (color: string) => {
-	const isOpacity = OPACITY_DETECTION_REGEX.test(color);
-
-	const baseColor = isOpacity
-		? color.slice(0, -OPACITY_SUFFIX_LENGTH)
-		: color;
-	const colorExists = Object.keys(config.colors).some(
-		configColor => configColor === baseColor
-	);
-
-	return {
-		colorExists,
-		isOpacity,
-		baseColor,
-	};
-};
-
-export { mapClassesIntoRules };

package/src/tools/mapping/mapColorIntoDeclaration.ts

@@ -1,14 +0,0 @@
-import { IColor } from '@interfaces/color.interface';
-import { defineColor } from '@tools/output/css.output';
-
-const mapColorsIntoMixinDeclaration = (colors: IColor) => {
-    const mappedColors = Object.entries(colors)
-        ?.map(([colorName, { light, dark }]) =>
-            defineColor(colorName, light, dark)
-        )
-        ?.join('\n');
-
-    return mappedColors;
-};
-
-export { mapColorsIntoMixinDeclaration };

package/src/tools/output/css.output.ts

@@ -1,104 +0,0 @@
-import { version } from '../../version';
-
-const header = `/**
- * Anubis v.${version}
- * Improba
- * Released under the MIT License.
- */`;
-
-const mixin = `
-$background-opacity: (
-  10: 0.1,
-  20: 0.2,
-  30: 0.3,
-  40: 0.4,
-  50: 0.5,
-  60: 0.6,
-  70: 0.7,
-  80: 0.8,
-  90: 0.9
-);
-
-// Mixin that will automatically generate colors for light and/or dark themes (with opacity variations)
-@mixin setRootColors ($name, $lightColor: null, $darkColor: null) {
-  :root {
-    @if $lightColor != null {
-      body.body--light {
-        #{"--"+$name}: $lightColor;
-
-        // Only generate opacity variations for non transparent colors
-        @if $lightColor != transparent {
-          @each $opacity, $multiplier in $background-opacity {
-            #{"--"+$name+"-"+$opacity}: #{rgba(red($lightColor), green($lightColor), blue($lightColor), $multiplier)};
-          }
-        }
-      }
-    }
-
-    @if $darkColor != null {
-      body.body--dark {
-        #{"--"+$name}: $darkColor;
-
-        // Only generate opacity variations for non transparent colors
-        @if $darkColor != transparent {
-          @each $opacity, $multiplier in $background-opacity {
-            #{"--"+$name+"-"+$opacity}: #{rgba(red($darkColor), green($darkColor), blue($darkColor), $multiplier)};
-          }
-        }
-      }
-    }
-  }
-}
-`;
-
-const COLOR_COMMENT = `/**
- * These colours will be mapped to css variables in
- * the :root element on the html page.
- *
- * It allows you to write custom css/scss classes in your web
- * components.
- */`;
-
-const VARIANT_COMMENT = `/**
- * These css variables are generated automatically when Anubis
- * detects that they are used in utilities in your config.
- *
- * It allows you to write custom css/scss classes in your web
- * components like:
- *
- * .paragraph-small {
- *    font-size: var(--size-xs);
- *    font-weight: var(--weight-light);
- * }
- *
- * (You can also force the generation of all variants from a
- * utility by setting the 'export' to 'variations')
- */`;
-
-const CLASS_COMMENT = `/**
- * These are the css classes generated by Anubis based on your config
- * and what was detected in your source files.
- */`;
-
-const defineColor = (colorName: string, light?: string, dark?: string) => {
-    // Handle cases where only dark is provided
-    if (!light && dark) {
-        return `@include setRootColors('${colorName}', null, ${dark});`;
-    }
-    // Handle cases where only light is provided or both are provided
-    return `@include setRootColors('${colorName}', ${light}${
-        dark ? ', ' + dark : ''
-    });`;
-};
-
-const getHeader = () => {
-    return `${header}${mixin}`;
-};
-
-export {
-    getHeader,
-    defineColor,
-    COLOR_COMMENT,
-    VARIANT_COMMENT,
-    CLASS_COMMENT,
-};

package/tests/README.md

@@ -1,54 +0,0 @@
-# AnubisUI Tests
-
-This directory contains all tests for the AnubisUI project.
-
-## Running Tests
-
-```bash
-# Run tests in watch mode (development)
-npm test
-
-# Run tests once (CI/production)
-npm run test:run
-
-# Run tests with UI
-npm run test:ui
-```
-
-## Test Structure
-
-```
-tests/
-└── validation/
-    └── color.validation.test.ts   # Color configuration validation tests
-```
-
-## Test Coverage
-
-### Color Validation (`color.validation.test.ts`)
-
-Tests the color configuration validation logic to ensure:
-- Valid colors pass validation
-- Invalid colors are properly rejected
-- Edge cases are handled correctly
-
-**Test groups:**
-1. **Valid configurations** - Tests all supported color formats
-2. **Invalid configurations** - Ensures improper configs are rejected
-3. **Helper functions** - Tests individual validation utilities
-
-## Adding New Tests
-
-1. Create a new test file in the appropriate subdirectory
-2. Use the `.test.ts` extension
-3. Import test utilities from Vitest:
-   ```typescript
-   import { describe, it, expect } from 'vitest';
-   ```
-
-## Test Framework
-
-We use [Vitest](https://vitest.dev/) for testing:
-- **Fast** - Native ESM and TypeScript support
-- **Compatible** - Jest-like API
-- **Modern** - Built for Vite projects

package/tests/validation/color.validation.test.ts

@@ -1,182 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import {
-    validateColors,
-    isValidColorValue,
-} from '@validation/color.validation';
-import { IColor } from '@interfaces/color.interface';
-
-describe('isValidColorValue', () => {
-    it('should accept valid hex colors (#RRGGBB)', () => {
-        expect(isValidColorValue('#ff00ff')).toBe(true);
-        expect(isValidColorValue('#0f84cb')).toBe(true);
-        expect(isValidColorValue('#000000')).toBe(true);
-        expect(isValidColorValue('#ffffff')).toBe(true);
-    });
-
-    it('should accept valid short hex colors (#RGB)', () => {
-        expect(isValidColorValue('#f0f')).toBe(true);
-        expect(isValidColorValue('#0ff')).toBe(true);
-        expect(isValidColorValue('#000')).toBe(true);
-        expect(isValidColorValue('#fff')).toBe(true);
-    });
-
-    it('should accept transparent keyword', () => {
-        expect(isValidColorValue('transparent')).toBe(true);
-    });
-
-    it('should accept mixed case hex values', () => {
-        expect(isValidColorValue('#FF00FF')).toBe(true);
-        expect(isValidColorValue('#Ff00fF')).toBe(true);
-    });
-
-    it('should reject invalid hex colors', () => {
-        expect(isValidColorValue('not-a-color')).toBe(false);
-        expect(isValidColorValue('#ff')).toBe(false);
-        expect(isValidColorValue('#fffffff')).toBe(false);
-        expect(isValidColorValue('ff00ff')).toBe(false);
-        expect(isValidColorValue('#gggggg')).toBe(false);
-        expect(isValidColorValue('#xyz')).toBe(false);
-    });
-});
-
-describe('validateColors', () => {
-    describe('Valid configurations', () => {
-        it('should accept color with both light and dark themes', () => {
-            const colors: IColor = {
-                primary: { light: '#0f84cb', dark: '#1a94db' },
-            };
-            expect(() => validateColors(colors)).not.toThrow();
-        });
-
-        it('should accept color with only light theme', () => {
-            const colors: IColor = {
-                'custom-light': { light: '#ff00ff' },
-            };
-            expect(() => validateColors(colors)).not.toThrow();
-        });
-
-        it('should accept color with only dark theme', () => {
-            const colors: IColor = {
-                'custom-dark': { dark: '#00ffff' },
-            };
-            expect(() => validateColors(colors)).not.toThrow();
-        });
-
-        it('should accept transparent colors', () => {
-            const colors: IColor = {
-                none: { light: 'transparent', dark: 'transparent' },
-            };
-            expect(() => validateColors(colors)).not.toThrow();
-        });
-
-        it('should accept short hex format (#RGB)', () => {
-            const colors: IColor = {
-                'short-hex': { light: '#f0f', dark: '#0ff' },
-            };
-            expect(() => validateColors(colors)).not.toThrow();
-        });
-
-        it('should accept multiple valid colors', () => {
-            const colors: IColor = {
-                primary: { light: '#0f84cb', dark: '#1a94db' },
-                secondary: { light: '#3b5161', dark: '#4a5f6f' },
-                accent: { light: '#0f84cb' },
-            };
-            expect(() => validateColors(colors)).not.toThrow();
-        });
-
-        it('should accept empty colors object', () => {
-            const colors: IColor = {};
-            expect(() => validateColors(colors)).not.toThrow();
-        });
-
-        it('should accept uppercase hex values', () => {
-            const colors: IColor = {
-                uppercase: { light: '#FF00FF', dark: '#00FFFF' },
-            };
-            expect(() => validateColors(colors)).not.toThrow();
-        });
-
-        it('should accept mixed case hex values', () => {
-            const colors: IColor = {
-                mixed: { light: '#Ff00fF', dark: '#00FfFf' },
-            };
-            expect(() => validateColors(colors)).not.toThrow();
-        });
-    });
-
-    describe('Invalid configurations', () => {
-        it('should reject empty color object (no light or dark)', () => {
-            const colors: IColor = {
-                'test-empty': {},
-            };
-            expect(() => validateColors(colors)).toThrow(
-                'Invalid color configuration'
-            );
-        });
-
-        it('should reject invalid hex color format', () => {
-            const colors: IColor = {
-                'test-invalid': { light: 'not-a-color' },
-            };
-            expect(() => validateColors(colors)).toThrow(
-                'Invalid color configuration'
-            );
-        });
-
-        it('should reject invalid short hex (#XX)', () => {
-            const colors: IColor = {
-                'test-short': { light: '#ff' },
-            };
-            expect(() => validateColors(colors)).toThrow(
-                'Invalid color configuration'
-            );
-        });
-
-        it('should reject hex color without #', () => {
-            const colors: IColor = {
-                'test-no-hash': { light: 'ff00ff' },
-            };
-            expect(() => validateColors(colors)).toThrow(
-                'Invalid color configuration'
-            );
-        });
-
-        it('should reject invalid characters in hex', () => {
-            const colors: IColor = {
-                'test-invalid-chars': { light: '#gggggg' },
-            };
-            expect(() => validateColors(colors)).toThrow(
-                'Invalid color configuration'
-            );
-        });
-
-        it('should reject when both light and dark are invalid', () => {
-            const colors: IColor = {
-                'test-both-invalid': { light: 'invalid', dark: 'also-invalid' },
-            };
-            expect(() => validateColors(colors)).toThrow(
-                'Invalid color configuration'
-            );
-        });
-
-        it('should reject when mixing valid and invalid colors', () => {
-            const colors: IColor = {
-                valid: { light: '#ff00ff' },
-                invalid: { light: 'not-valid' },
-            };
-            expect(() => validateColors(colors)).toThrow(
-                'Invalid color configuration'
-            );
-        });
-
-        it('should reject when only dark color is invalid', () => {
-            const colors: IColor = {
-                'test-dark-invalid': { light: '#ff00ff', dark: 'not-valid' },
-            };
-            expect(() => validateColors(colors)).toThrow(
-                'Invalid color configuration'
-            );
-        });
-    });
-});

package/tsconfig.json

@@ -1,22 +0,0 @@
-{
-  "compilerOptions": {
-    "outDir": "./dist",
-    "rootDir": "./src",
-    "declaration": true,
-    "module": "commonjs",
-    "target": "es2019",
-    "skipLibCheck": true,  // Ignore la vérification des fichiers .d.ts dans node_modules
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "baseUrl": "./src",
-    "paths": {
-      "@/*": ["./*"],
-      "@config/*": ["./config/*"],
-      "@interfaces/*": ["./interfaces/*"],
-      "@tools/*": ["./tools/*"],
-      "@validation/*": ["./tools/validation/*"]
-    }
-  },
-  "include": ["src/**/*"],
-  "exclude": ["node_modules", "dist"]
-}