ezfw-core 1.0.0

package/components/form/EzValidators.test.js

@@ -0,0 +1,421 @@
+// ==========================================================
+// EzValidators - Unit Tests
+// ==========================================================
+// Para correr: npm test EzValidators
+// ==========================================================
+
+import { describe, it, expect } from 'vitest';
+import { EzValidators, validateField, runValidator, defaultMessages } from './EzValidators.js';
+
+// ==========================================================
+// EzValidators.required
+// ==========================================================
+
+describe('EzValidators.required', () => {
+
+    it('should return false for null', () => {
+        expect(EzValidators.required(null)).toBe(false);
+    });
+
+    it('should return false for undefined', () => {
+        expect(EzValidators.required(undefined)).toBe(false);
+    });
+
+    it('should return false for empty string', () => {
+        expect(EzValidators.required('')).toBe(false);
+    });
+
+    it('should return false for whitespace only', () => {
+        expect(EzValidators.required('   ')).toBe(false);
+    });
+
+    it('should return true for non-empty string', () => {
+        expect(EzValidators.required('hello')).toBe(true);
+    });
+
+    it('should return true for zero', () => {
+        expect(EzValidators.required(0)).toBe(true);
+    });
+
+    it('should return false for empty array', () => {
+        expect(EzValidators.required([])).toBe(false);
+    });
+
+    it('should return true for non-empty array', () => {
+        expect(EzValidators.required([1, 2])).toBe(true);
+    });
+
+});
+
+// ==========================================================
+// EzValidators.minLength
+// ==========================================================
+
+describe('EzValidators.minLength', () => {
+
+    it('should return true for empty value (not required)', () => {
+        const validator = EzValidators.minLength(5);
+        expect(validator('')).toBe(true);
+        expect(validator(null)).toBe(true);
+    });
+
+    it('should return false if length < min', () => {
+        const validator = EzValidators.minLength(5);
+        expect(validator('abc')).toBe(false);
+    });
+
+    it('should return true if length >= min', () => {
+        const validator = EzValidators.minLength(5);
+        expect(validator('abcde')).toBe(true);
+        expect(validator('abcdef')).toBe(true);
+    });
+
+});
+
+// ==========================================================
+// EzValidators.maxLength
+// ==========================================================
+
+describe('EzValidators.maxLength', () => {
+
+    it('should return true for empty value', () => {
+        const validator = EzValidators.maxLength(5);
+        expect(validator('')).toBe(true);
+    });
+
+    it('should return true if length <= max', () => {
+        const validator = EzValidators.maxLength(5);
+        expect(validator('abc')).toBe(true);
+        expect(validator('abcde')).toBe(true);
+    });
+
+    it('should return false if length > max', () => {
+        const validator = EzValidators.maxLength(5);
+        expect(validator('abcdef')).toBe(false);
+    });
+
+});
+
+// ==========================================================
+// EzValidators.min / max (numeric)
+// ==========================================================
+
+describe('EzValidators.min', () => {
+
+    it('should return true for empty value', () => {
+        const validator = EzValidators.min(10);
+        expect(validator('')).toBe(true);
+    });
+
+    it('should return false if value < min', () => {
+        const validator = EzValidators.min(10);
+        expect(validator(5)).toBe(false);
+        expect(validator('5')).toBe(false);
+    });
+
+    it('should return true if value >= min', () => {
+        const validator = EzValidators.min(10);
+        expect(validator(10)).toBe(true);
+        expect(validator(15)).toBe(true);
+    });
+
+});
+
+describe('EzValidators.max', () => {
+
+    it('should return true for empty value', () => {
+        const validator = EzValidators.max(100);
+        expect(validator('')).toBe(true);
+    });
+
+    it('should return true if value <= max', () => {
+        const validator = EzValidators.max(100);
+        expect(validator(50)).toBe(true);
+        expect(validator(100)).toBe(true);
+    });
+
+    it('should return false if value > max', () => {
+        const validator = EzValidators.max(100);
+        expect(validator(150)).toBe(false);
+    });
+
+});
+
+// ==========================================================
+// EzValidators.email
+// ==========================================================
+
+describe('EzValidators.email', () => {
+
+    it('should return true for empty value', () => {
+        expect(EzValidators.email('')).toBe(true);
+    });
+
+    it('should return true for valid email', () => {
+        expect(EzValidators.email('test@example.com')).toBe(true);
+        expect(EzValidators.email('user.name@domain.org')).toBe(true);
+    });
+
+    it('should return false for invalid email', () => {
+        expect(EzValidators.email('invalid')).toBe(false);
+        expect(EzValidators.email('test@')).toBe(false);
+        expect(EzValidators.email('@domain.com')).toBe(false);
+    });
+
+});
+
+// ==========================================================
+// EzValidators.pattern
+// ==========================================================
+
+describe('EzValidators.pattern', () => {
+
+    it('should return true for empty value', () => {
+        const validator = EzValidators.pattern(/^\d+$/);
+        expect(validator('')).toBe(true);
+    });
+
+    it('should return true if pattern matches', () => {
+        const validator = EzValidators.pattern(/^\d+$/);
+        expect(validator('12345')).toBe(true);
+    });
+
+    it('should return false if pattern does not match', () => {
+        const validator = EzValidators.pattern(/^\d+$/);
+        expect(validator('abc')).toBe(false);
+    });
+
+    it('should accept string pattern', () => {
+        const validator = EzValidators.pattern('^[A-Z]+$');
+        expect(validator('ABC')).toBe(true);
+        expect(validator('abc')).toBe(false);
+    });
+
+});
+
+// ==========================================================
+// EzValidators.match
+// ==========================================================
+
+describe('EzValidators.match', () => {
+
+    it('should return true for empty value', () => {
+        const validator = EzValidators.match('password');
+        expect(validator('', { password: 'secret' })).toBe(true);
+    });
+
+    it('should return true if values match', () => {
+        const validator = EzValidators.match('password');
+        expect(validator('secret', { password: 'secret' })).toBe(true);
+    });
+
+    it('should return false if values do not match', () => {
+        const validator = EzValidators.match('password');
+        expect(validator('different', { password: 'secret' })).toBe(false);
+    });
+
+});
+
+// ==========================================================
+// EzValidators.numeric
+// ==========================================================
+
+describe('EzValidators.numeric', () => {
+
+    it('should return true for empty value', () => {
+        expect(EzValidators.numeric('')).toBe(true);
+    });
+
+    it('should return true for valid numbers', () => {
+        expect(EzValidators.numeric('123')).toBe(true);
+        expect(EzValidators.numeric(456)).toBe(true);
+        expect(EzValidators.numeric('3.14')).toBe(true);
+    });
+
+    it('should return false for non-numeric', () => {
+        expect(EzValidators.numeric('abc')).toBe(false);
+        expect(EzValidators.numeric('12abc')).toBe(false);
+    });
+
+});
+
+// ==========================================================
+// EzValidators.integer
+// ==========================================================
+
+describe('EzValidators.integer', () => {
+
+    it('should return true for empty value', () => {
+        expect(EzValidators.integer('')).toBe(true);
+    });
+
+    it('should return true for integers', () => {
+        expect(EzValidators.integer(123)).toBe(true);
+        expect(EzValidators.integer('456')).toBe(true);
+    });
+
+    it('should return false for decimals', () => {
+        expect(EzValidators.integer(3.14)).toBe(false);
+        expect(EzValidators.integer('3.14')).toBe(false);
+    });
+
+});
+
+// ==========================================================
+// EzValidators.url
+// ==========================================================
+
+describe('EzValidators.url', () => {
+
+    it('should return true for empty value', () => {
+        expect(EzValidators.url('')).toBe(true);
+    });
+
+    it('should return true for valid URL', () => {
+        expect(EzValidators.url('https://example.com')).toBe(true);
+        expect(EzValidators.url('http://localhost:3000')).toBe(true);
+    });
+
+    it('should return false for invalid URL', () => {
+        expect(EzValidators.url('not-a-url')).toBe(false);
+        expect(EzValidators.url('example.com')).toBe(false);
+    });
+
+});
+
+// ==========================================================
+// EzValidators.phone
+// ==========================================================
+
+describe('EzValidators.phone', () => {
+
+    it('should return true for empty value', () => {
+        expect(EzValidators.phone('')).toBe(true);
+    });
+
+    it('should return true for valid phone formats', () => {
+        expect(EzValidators.phone('1234567890')).toBe(true);
+        expect(EzValidators.phone('+1 (555) 123-4567')).toBe(true);
+        expect(EzValidators.phone('555-123-4567')).toBe(true);
+    });
+
+    it('should return false for too short', () => {
+        expect(EzValidators.phone('123')).toBe(false);
+    });
+
+    it('should return false for letters', () => {
+        expect(EzValidators.phone('555-CALL-ME')).toBe(false);
+    });
+
+});
+
+// ==========================================================
+// validateField
+// ==========================================================
+
+describe('validateField', () => {
+
+    it('should validate with object config', () => {
+        const result = validateField('', { required: true });
+        expect(result.valid).toBe(false);
+        expect(result.message).toBe('This field is required');
+    });
+
+    it('should validate multiple rules and stop at first error', () => {
+        const result = validateField('ab', {
+            required: true,
+            minLength: 5
+        });
+        expect(result.valid).toBe(false);
+        expect(result.message).toContain('5');
+    });
+
+    it('should pass when all rules pass', () => {
+        const result = validateField('hello@test.com', {
+            required: true,
+            email: true
+        });
+        expect(result.valid).toBe(true);
+        expect(result.message).toBe(null);
+    });
+
+    it('should use custom message', () => {
+        const result = validateField('', {
+            required: true,
+            message: 'Custom error message'
+        });
+        expect(result.valid).toBe(false);
+        expect(result.message).toBe('Custom error message');
+    });
+
+    it('should handle custom validation function', () => {
+        const customValidator = (value) => {
+            if (value !== 'expected') return 'Value must be "expected"';
+            return true;
+        };
+
+        expect(validateField('wrong', customValidator).valid).toBe(false);
+        expect(validateField('expected', customValidator).valid).toBe(true);
+    });
+
+    it('should pass formData to match validator', () => {
+        const result = validateField('different', {
+            match: 'password'
+        }, { password: 'secret' });
+
+        expect(result.valid).toBe(false);
+    });
+
+});
+
+// ==========================================================
+// runValidator
+// ==========================================================
+
+describe('runValidator', () => {
+
+    it('should handle simple boolean rule', () => {
+        const result = runValidator('required', true, '');
+        expect(result.valid).toBe(false);
+    });
+
+    it('should handle parameterized rule', () => {
+        const result = runValidator('minLength', 5, 'abc');
+        expect(result.valid).toBe(false);
+        expect(result.message).toContain('5');
+    });
+
+    it('should handle object rule with custom message', () => {
+        const result = runValidator('minLength', { value: 5, message: 'Too short!' }, 'abc');
+        expect(result.valid).toBe(false);
+        expect(result.message).toBe('Too short!');
+    });
+
+    it('should return valid for unknown validator', () => {
+        const result = runValidator('unknownRule', true, 'value');
+        expect(result.valid).toBe(true);
+    });
+
+});
+
+// ==========================================================
+// defaultMessages
+// ==========================================================
+
+describe('defaultMessages', () => {
+
+    it('should have message for required', () => {
+        expect(defaultMessages.required).toBe('This field is required');
+    });
+
+    it('should have function for minLength', () => {
+        expect(typeof defaultMessages.minLength).toBe('function');
+        expect(defaultMessages.minLength(5)).toContain('5');
+    });
+
+    it('should have function for maxLength', () => {
+        expect(typeof defaultMessages.maxLength).toBe('function');
+        expect(defaultMessages.maxLength(10)).toContain('10');
+    });
+
+});

package/components/form/EzValidators.ts

@@ -0,0 +1,202 @@
+type FormData = Record<string, unknown>;
+
+interface ValidationResult {
+    valid: boolean;
+    message: string | null;
+}
+
+interface RuleConfig {
+    value?: unknown;
+    message?: string;
+}
+
+type RuleValue = boolean | number | string | RegExp | RuleConfig;
+
+interface ValidateConfig {
+    message?: string;
+    [key: string]: RuleValue | string | undefined;
+}
+
+type ValidateInput = ValidateConfig | ((value: unknown, formData: FormData) => boolean | string | null);
+
+export const defaultMessages: Record<string, string | ((param: unknown) => string)> = {
+    required: 'This field is required',
+    minLength: (min: unknown) => `Minimum ${min} characters required`,
+    maxLength: (max: unknown) => `Maximum ${max} characters allowed`,
+    min: (n: unknown) => `Value must be at least ${n}`,
+    max: (n: unknown) => `Value must be at most ${n}`,
+    email: 'Please enter a valid email address',
+    pattern: 'Invalid format',
+    match: (field: unknown) => `Must match ${field}`,
+};
+
+export const EzValidators = {
+    required(value: unknown): boolean {
+        if (value == null) return false;
+        if (typeof value === 'string') return value.trim() !== '';
+        if (Array.isArray(value)) return value.length > 0;
+        return true;
+    },
+
+    minLength(min: number) {
+        return (value: unknown): boolean => {
+            if (value == null || value === '') return true;
+            return String(value).length >= min;
+        };
+    },
+
+    maxLength(max: number) {
+        return (value: unknown): boolean => {
+            if (value == null || value === '') return true;
+            return String(value).length <= max;
+        };
+    },
+
+    min(n: number) {
+        return (value: unknown): boolean => {
+            if (value == null || value === '') return true;
+            return Number(value) >= n;
+        };
+    },
+
+    max(n: number) {
+        return (value: unknown): boolean => {
+            if (value == null || value === '') return true;
+            return Number(value) <= n;
+        };
+    },
+
+    email(value: unknown): boolean {
+        if (value == null || value === '') return true;
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        return emailRegex.test(String(value));
+    },
+
+    pattern(regex: RegExp | string) {
+        const re = typeof regex === 'string' ? new RegExp(regex) : regex;
+        return (value: unknown): boolean => {
+            if (value == null || value === '') return true;
+            return re.test(String(value));
+        };
+    },
+
+    match(fieldName: string) {
+        return (value: unknown, formData: FormData = {}): boolean => {
+            if (value == null || value === '') return true;
+            return value === formData[fieldName];
+        };
+    },
+
+    numeric(value: unknown): boolean {
+        if (value == null || value === '') return true;
+        return !isNaN(Number(value)) && isFinite(Number(value));
+    },
+
+    integer(value: unknown): boolean {
+        if (value == null || value === '') return true;
+        return Number.isInteger(Number(value));
+    },
+
+    url(value: unknown): boolean {
+        if (value == null || value === '') return true;
+        try {
+            new URL(String(value));
+            return true;
+        } catch {
+            return false;
+        }
+    },
+
+    phone(value: unknown): boolean {
+        if (value == null || value === '') return true;
+        const phoneRegex = /^[\d\s\-\(\)\+]+$/;
+        const str = String(value);
+        return phoneRegex.test(str) && str.replace(/\D/g, '').length >= 7;
+    }
+} as const;
+
+type ValidatorName = keyof typeof EzValidators;
+
+export function runValidator(
+    ruleName: string,
+    ruleValue: RuleValue,
+    fieldValue: unknown,
+    formData: FormData = {}
+): ValidationResult {
+    const validator = EzValidators[ruleName as ValidatorName];
+    if (!validator) {
+        console.warn(`[EzValidators] Unknown validator: ${ruleName}`);
+        return { valid: true, message: null };
+    }
+
+    let isValid: boolean;
+    let message: string | undefined;
+
+    if (ruleValue === true) {
+        const result = (validator as (value: unknown, formData?: FormData) => boolean)(fieldValue, formData);
+        isValid = result;
+        const defaultMsg = defaultMessages[ruleName];
+        message = typeof defaultMsg === 'function'
+            ? defaultMsg(undefined)
+            : defaultMsg;
+    } else if (typeof ruleValue === 'number' || typeof ruleValue === 'string' || ruleValue instanceof RegExp) {
+        const validateFn = (validator as (param: unknown) => (value: unknown, formData?: FormData) => boolean)(ruleValue);
+        isValid = validateFn(fieldValue, formData);
+        const defaultMsg = defaultMessages[ruleName];
+        message = typeof defaultMsg === 'function'
+            ? defaultMsg(ruleValue)
+            : defaultMsg;
+    } else if (typeof ruleValue === 'object' && ruleValue !== null) {
+        const { value, message: customMessage } = ruleValue as RuleConfig;
+        let validateFn: (value: unknown, formData?: FormData) => boolean;
+        if (value !== undefined) {
+            validateFn = (validator as (param: unknown) => (value: unknown, formData?: FormData) => boolean)(value);
+        } else {
+            validateFn = validator as (value: unknown, formData?: FormData) => boolean;
+        }
+        isValid = validateFn(fieldValue, formData);
+        const defaultMsg = defaultMessages[ruleName];
+        message = customMessage || (typeof defaultMsg === 'function'
+            ? defaultMsg(value)
+            : defaultMsg);
+    } else {
+        isValid = true;
+        message = undefined;
+    }
+
+    return {
+        valid: isValid,
+        message: isValid ? null : (message || 'Invalid value')
+    };
+}
+
+export function validateField(
+    value: unknown,
+    validate: ValidateInput,
+    formData: FormData = {}
+): ValidationResult {
+    if (typeof validate === 'function') {
+        const result = validate(value, formData);
+        if (result === true || result == null) {
+            return { valid: true, message: null };
+        }
+        return { valid: false, message: typeof result === 'string' ? result : 'Invalid value' };
+    }
+
+    if (typeof validate === 'object' && validate !== null) {
+        for (const [ruleName, ruleValue] of Object.entries(validate)) {
+            if (ruleName === 'message') continue;
+            if (ruleValue === undefined) continue;
+
+            const result = runValidator(ruleName, ruleValue as RuleValue, value, formData);
+            if (!result.valid) {
+                return {
+                    valid: false,
+                    message: (validate.message as string) || result.message
+                };
+            }
+        }
+    }
+
+    return { valid: true, message: null };
+}

package/components/grid/EzGrid.scss

@@ -0,0 +1,88 @@
+// ==========================================================
+// EzGrid - Base Styles & Design Tokens
+// ==========================================================
+
+.ez-grid {
+  // ----------------------------------------------------------
+  // Design Tokens (CSS Custom Properties)
+  // ----------------------------------------------------------
+
+  // Colors - Surfaces (inherit from theme)
+  --ez-grid-bg: var(--ez-surface-secondary, #ffffff);
+  --ez-grid-surface: var(--ez-surface-primary, #f8fafc);
+  --ez-grid-surface-hover: var(--ez-surface-tertiary, #f1f5f9);
+  --ez-grid-surface-active: var(--ez-border, #e2e8f0);
+
+  // Colors - Borders (inherit from theme)
+  --ez-grid-border: var(--ez-border, #e2e8f0);
+  --ez-grid-border-light: var(--ez-surface-tertiary, #f1f5f9);
+
+  // Colors - Text (inherit from theme)
+  --ez-grid-text: var(--ez-text-primary, #1e293b);
+  --ez-grid-text-secondary: var(--ez-text-secondary, #475569);
+  --ez-grid-text-muted: var(--ez-text-tertiary, #94a3b8);
+
+  // Colors - Primary (inherit from theme)
+  --ez-grid-primary: var(--ez-primary, #005871);
+  --ez-grid-primary-light: var(--ez-primary-light, rgba(0, 88, 113, 0.15));
+  --ez-grid-primary-border: var(--ez-primary, #005871);
+
+  // Colors - Selection (inherit from theme)
+  --ez-grid-row-selected: var(--ez-primary-light, rgba(0, 88, 113, 0.08));
+  --ez-grid-row-hover: var(--ez-surface-primary, #f8fafc);
+
+  // Colors - Danger (inherit from theme)
+  --ez-grid-danger: var(--ez-danger, #dc2626);
+  --ez-grid-danger-light: var(--ez-danger-light, rgba(220, 38, 38, 0.08));
+
+  // Typography
+  --ez-grid-font-size: 13px;
+  --ez-grid-font-size-sm: 12px;
+  --ez-grid-font-size-lg: 15px;
+  --ez-grid-font-weight: 400;
+  --ez-grid-font-weight-medium: 500;
+  --ez-grid-font-weight-semibold: 600;
+
+  // Spacing
+  --ez-grid-cell-padding: 0 12px;
+  --ez-grid-row-height: 40px;
+  --ez-grid-header-height: 40px;
+
+  // Radius
+  --ez-grid-radius: 8px;
+  --ez-grid-radius-sm: 4px;
+
+  // ----------------------------------------------------------
+  // Base Layout
+  // ----------------------------------------------------------
+  background: var(--ez-grid-bg);
+  border-radius: var(--ez-grid-radius);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  font-size: var(--ez-grid-font-size);
+  color: var(--ez-grid-text);
+
+  // ----------------------------------------------------------
+  // Variants
+  // ----------------------------------------------------------
+  &.ez-grid--flat {
+    border: none;
+    box-shadow: none;
+  }
+
+  &.ez-grid--outlined {
+    border: 1px solid var(--ez-grid-border);
+    box-shadow: none;
+  }
+
+  &.ez-grid--elevated {
+    border: 1px solid var(--ez-grid-border);
+    box-shadow:
+      0 1px 3px rgba(0, 0, 0, 0.04),
+      0 4px 12px rgba(0, 0, 0, 0.03);
+  }
+}