anubis-ui 1.2.15 → 1.2.18

package/src/tools/validation/color.validation.ts

@@ -0,0 +1,68 @@
+import { IColor } from '@interfaces/color.interface';
+import { log } from '@tools/logger';
+
+/**
+ * Validates a single color value (hex color or 'transparent')
+ */
+const isValidColorValue = (value: string): boolean => {
+    if (value === 'transparent') {
+        return true;
+    }
+    // Validate hex color format (#RRGGBB or #RGB)
+    return /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(value);
+};
+
+/**
+ * Validates the colors configuration
+ * Ensures each color has at least one valid theme (light or dark)
+ * @throws Error if validation fails
+ */
+const validateColors = (colors: IColor): void => {
+    const errors: string[] = [];
+
+    Object.entries(colors).forEach(([colorName, colorConfig]) => {
+        const { light, dark } = colorConfig;
+
+        // Check if at least one theme is defined
+        if (!light && !dark) {
+            errors.push(
+                `Color "${colorName}": must have at least one theme defined (light or dark)`
+            );
+            return;
+        }
+
+        // Validate light color if defined
+        if (light && !isValidColorValue(light)) {
+            errors.push(
+                `Color "${colorName}": invalid light color value "${light}". Expected hex format (#RRGGBB) or "transparent"`
+            );
+        }
+
+        // Validate dark color if defined
+        if (dark && !isValidColorValue(dark)) {
+            errors.push(
+                `Color "${colorName}": invalid dark color value "${dark}". Expected hex format (#RRGGBB) or "transparent"`
+            );
+        }
+    });
+
+    if (errors.length > 0) {
+        const errorMessage = [
+            '❌ Color configuration validation failed:',
+            ...errors.map(err => `  - ${err}`),
+            '',
+            'Please check your colors.config.json or anubis.config.json file.',
+        ].join('\n');
+
+        log(errorMessage);
+        throw new Error('Invalid color configuration');
+    }
+
+    log(
+        `✅ Color configuration validated (${
+            Object.keys(colors).length
+        } colors)`
+    );
+};
+
+export { validateColors, isValidColorValue };

package/tests/README.md

@@ -0,0 +1,54 @@
+# 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

@@ -0,0 +1,182 @@
+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

@@ -6,8 +6,17 @@
     "module": "commonjs",
     "target": "es2019",
     "skipLibCheck": true,  // Ignore la vérification des fichiers .d.ts dans node_modules
-    "esModuleInterop": true
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "baseUrl": "./src",
+    "paths": {
+      "@/*": ["./*"],
+      "@config/*": ["./config/*"],
+      "@interfaces/*": ["./interfaces/*"],
+      "@tools/*": ["./tools/*"],
+      "@validation/*": ["./tools/validation/*"]
+    }
   },
-  "include": ["src/**/*"],
+  "include": ["src/**/*", "package.json"],
   "exclude": ["node_modules", "dist"]
 }

package/vitest.config.ts

@@ -0,0 +1,19 @@
+import { defineConfig } from 'vitest/config';
+import path from 'path';
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+      '@config': path.resolve(__dirname, './src/config'),
+      '@interfaces': path.resolve(__dirname, './src/interfaces'),
+      '@tools': path.resolve(__dirname, './src/tools'),
+      '@validation': path.resolve(__dirname, './src/tools/validation'),
+    },
+  },
+  test: {
+    globals: true,
+    environment: 'node',
+    include: ['tests/**/*.test.ts'],
+  },
+});

package/src/config/presets.config.json

@@ -1,51 +0,0 @@
-[
-  {
-    "prefix": "bg",
-    "declaration": "background: ${color}"
-  },
-  {
-    "prefix": "text",
-    "declaration": "color: ${color}"
-  },
-  {
-    "prefix": "border",
-    "declaration": "border-width: ${value} !important; border-color: ${color} !important; border-style: solid;",
-    "variations": {
-      "default": "4px",
-      "thinest": "1px",
-      "thiner": "2px",
-      "thin": "3px",
-      "thick": "6px",
-      "thicker": "8px",
-      "thickest": "10px",
-      "node": "0.2rem"
-    }
-  },
-  {
-    "prefix": "inner-border",
-    "declaration": "box-shadow: inset 0px 0px 0px ${value} ${color}",
-    "variations": {
-      "default": "4px" ,
-      "thinest": "1px" ,
-      "thiner": "2px" ,
-      "thin2": "3px" ,
-      "thick": "6px" ,
-      "thicker": "8px" ,
-      "thickest": "10px" ,
-      "node": "0.2rem"
-    }
-  },
-  {
-    "prefix": "shadow",
-    "declaration": "box-shadow: ${value} ${color}",
-    "variations": {
-      "default": "0px 0px 7px 1px" ,
-      "densest": "0px 0px 3px 1px" ,
-      "lower": "0px 0px 5px 1px" ,
-      "dense": "0px 0px 5px 1px" ,
-      "wide": "0px 0px 10px 1px" ,
-      "wider": "0px 0px 15px 1px" ,
-      "widest": "0px 0px 20px 1px"
-    }
-  }
-]

package/src/config/qol.config.json

@@ -1,78 +0,0 @@
-[
-  {
-    "prefix": "blur",
-    "standalone": true,
-    "declaration": "backdrop-filter: blur(${value})",
-    "variations": {
-      "default": "3px"
-    }
-  },
-  {
-    "prefix": "smooth",
-    "standalone": true,
-    "declaration": "transition-duration: ${value}",
-    "variations": {
-      "default": "0.1s",
-      "slowest": "0.5s",
-      "slower": "0.3s",
-      "slow": "0.2s",
-      "quick": "0.07s",
-      "quicker": "0.05s",
-      "quickest": "0.03s"
-    }
-  },
-  {
-    "prefix": "rounded",
-    "standalone": true,
-    "declaration": "border-radius: ${value}",
-    "variations": {
-      "default": "8px",
-      "square": "0px",
-      "xs": "2px",
-      "sm": "4px",
-      "md": "8px",
-      "lg": "12px",
-      "xl": "16px",
-      "very": "9999px",
-      "full": "50%",
-      "half": "100%"
-    }
-  },
-  {
-    "prefix": "border",
-    "declaration": "border-style: ${value}",
-    "variations": {
-      "solid": "solid",
-      "dashed": "dashed",
-      "dotted": "dotted"
-    }
-  },
-  {
-    "prefix": "position",
-    "declaration": "position: ${value}",
-    "variations": {
-      "relative": "relative",
-      "absolute": "absolute"
-    }
-  },
-  {
-    "prefix": "size",
-    "declaration": "font-size: ${value} !important",
-    "variations": {
-      "2xs": "10px",
-      "xs": "12px",
-      "sm": "14px",
-      "md": "16px",
-      "lg": "18px",
-      "xl": "20px",
-      "2xl": "24px",
-      "3xl": "30px",
-      "4xl": "36px",
-      "5xl": "48px",
-      "6xl": "60px",
-      "7xl": "72px",
-      "8xl": "96px",
-      "9xl": "128px"
-    }
-  }
-]

package/src/interfaces/declaration.interface.ts

@@ -1,10 +0,0 @@
-export interface IDeclaration {
-  /** Color variable name, defined in the DOM :root */
-  name: string
-
-  /** Hexadecimal color code */
-  color: string|number
-
-  // light?: string
-  // dark?: string
-}

package/src/tools/fileStuff/configFile.ts

@@ -1,26 +0,0 @@
-const fs = require('fs')
-const path = require('path')
-
-import { log } from '../logger'
-
-const userConfigPath = path.join(process.cwd(), 'anubis.config.json')
-let userConfig = null
-
-const readUserConfigFile = () => {
-  const userConfigExists = fs.existsSync(userConfigPath)
-
-  if (!userConfigExists) {
-    log('No user config file found, using default configuration.')
-    return
-  }
-
-  const config = fs.readFileSync(userConfigPath, { encoding: 'utf-8'})
-  userConfig = JSON.parse(config)
-
-  return userConfig
-}
-
-export {
-  userConfig,
-  readUserConfigFile
-}

package/src/tools/fileStuff/cssFile.ts

@@ -1,37 +0,0 @@
-const fs = require('fs')
-const path = require('path')
-
-import { cssHeader, log } from '../logger'
-
-const srcDir = path.join(process.cwd(), 'src', 'css')
-const outputPath = path.join(srcDir, '_anubis.scss')
-
-const checkCssRuleFilePresence = () => {
-  try {
-    fs.mkdirSync(srcDir, { recursive: true })
-
-    if (fs.existsSync(outputPath)) { return }
-
-    log('Output file missing, generating..')
-    fs.writeFileSync(outputPath, '')
-  } catch (err: any) {
-    throw new Error(`Erreur lors de la vérification du fichier CSS: ${err.message}`)
-  }
-}
-
-const buildCssRuleFile = (classes: string = '') => {
-  try {
-    checkCssRuleFilePresence()
-
-    fs.writeFileSync(outputPath, cssHeader + '\n' + classes)
-
-    return outputPath
-  } catch (err: any) {
-    throw new Error(`Erreur lors de l'écriture du fichier CSS: ${err.message}`)
-  }
-}
-
-export {
-  checkCssRuleFilePresence,
-  buildCssRuleFile
-}