@htlkg/components 0.0.1

package/src/composables/useForm.test.ts

@@ -0,0 +1,229 @@
+import { describe, it, expect, vi } from 'vitest';
+import { useForm } from './useForm';
+
+describe('useForm composable', () => {
+  it('initializes with provided values', () => {
+    const initialValues = { name: 'John', email: 'john@example.com' };
+    const { values } = useForm({ initialValues });
+
+    expect(values.value).toEqual(initialValues);
+  });
+
+  it('sets field value correctly', () => {
+    const { values, setFieldValue } = useForm({
+      initialValues: { name: '', email: '' }
+    });
+
+    setFieldValue('name', 'Jane');
+    expect(values.value.name).toBe('Jane');
+  });
+
+  it('sets field error correctly', () => {
+    const { errors, setFieldError } = useForm({
+      initialValues: { name: '' }
+    });
+
+    setFieldError('name', 'Name is required');
+    expect(errors.value.name).toBe('Name is required');
+  });
+
+  it('sets field touched correctly', () => {
+    const { touched, setFieldTouched } = useForm({
+      initialValues: { name: '' }
+    });
+
+    setFieldTouched('name', true);
+    expect(touched.value.name).toBe(true);
+  });
+
+  it('validates field with rules', async () => {
+    const { validateField, errors } = useForm({
+      initialValues: { name: '' },
+      validationRules: {
+        name: [
+          {
+            validate: (value) => value.length > 0,
+            message: 'Name is required'
+          }
+        ]
+      }
+    });
+
+    const isValid = await validateField('name');
+    expect(isValid).toBe(false);
+    expect(errors.value.name).toBe('Name is required');
+  });
+
+  it('clears error when validation passes', async () => {
+    const { values, validateField, errors, setFieldValue } = useForm({
+      initialValues: { name: '' },
+      validationRules: {
+        name: [
+          {
+            validate: (value) => value.length > 0,
+            message: 'Name is required'
+          }
+        ]
+      }
+    });
+
+    // First validation should fail
+    await validateField('name');
+    expect(errors.value.name).toBe('Name is required');
+
+    // Set valid value
+    setFieldValue('name', 'John');
+    await validateField('name');
+    expect(errors.value.name).toBeUndefined();
+  });
+
+  it('validates entire form', async () => {
+    const { validateForm, errors } = useForm({
+      initialValues: { name: '', email: '' },
+      validationRules: {
+        name: [
+          {
+            validate: (value) => value.length > 0,
+            message: 'Name is required'
+          }
+        ],
+        email: [
+          {
+            validate: (value) => value.includes('@'),
+            message: 'Invalid email'
+          }
+        ]
+      }
+    });
+
+    const isValid = await validateForm();
+    expect(isValid).toBe(false);
+    expect(errors.value.name).toBe('Name is required');
+    expect(errors.value.email).toBe('Invalid email');
+  });
+
+  it('handles form submission', async () => {
+    const onSubmit = vi.fn();
+    const { handleSubmit, values, setFieldValue } = useForm({
+      initialValues: { name: '' },
+      onSubmit
+    });
+
+    setFieldValue('name', 'John');
+    await handleSubmit();
+
+    expect(onSubmit).toHaveBeenCalledWith({ name: 'John' });
+  });
+
+  it('prevents submission when validation fails', async () => {
+    const onSubmit = vi.fn();
+    const { handleSubmit } = useForm({
+      initialValues: { name: '' },
+      validationRules: {
+        name: [
+          {
+            validate: (value) => value.length > 0,
+            message: 'Name is required'
+          }
+        ]
+      },
+      onSubmit
+    });
+
+    await handleSubmit();
+    expect(onSubmit).not.toHaveBeenCalled();
+  });
+
+  it('marks all fields as touched on submit', async () => {
+    const { handleSubmit, touched } = useForm({
+      initialValues: { name: '', email: '' }
+    });
+
+    await handleSubmit();
+    expect(touched.value.name).toBe(true);
+    expect(touched.value.email).toBe(true);
+  });
+
+  it('resets form to initial values', () => {
+    const initialValues = { name: 'John', email: 'john@example.com' };
+    const { values, setFieldValue, resetForm } = useForm({ initialValues });
+
+    setFieldValue('name', 'Jane');
+    expect(values.value.name).toBe('Jane');
+
+    resetForm();
+    expect(values.value).toEqual(initialValues);
+  });
+
+  it('clears errors and touched on reset', () => {
+    const { errors, touched, setFieldError, setFieldTouched, resetForm } = useForm({
+      initialValues: { name: '' }
+    });
+
+    setFieldError('name', 'Error');
+    setFieldTouched('name', true);
+
+    resetForm();
+    expect(errors.value).toEqual({});
+    expect(touched.value).toEqual({});
+  });
+
+  it('computes isValid correctly', () => {
+    const { isValid, setFieldError } = useForm({
+      initialValues: { name: '' }
+    });
+
+    expect(isValid.value).toBe(true);
+
+    setFieldError('name', 'Error');
+    expect(isValid.value).toBe(false);
+  });
+
+  it('handles async validation rules', async () => {
+    const { validateField, errors } = useForm({
+      initialValues: { username: '' },
+      validationRules: {
+        username: [
+          {
+            validate: async (value) => {
+              await new Promise(resolve => setTimeout(resolve, 10));
+              return value === 'available';
+            },
+            message: 'Username not available'
+          }
+        ]
+      }
+    });
+
+    const isValid = await validateField('username');
+    expect(isValid).toBe(false);
+    expect(errors.value.username).toBe('Username not available');
+  });
+
+  it('prevents concurrent submissions', async () => {
+    const onSubmit = vi.fn(async () => {
+      await new Promise(resolve => setTimeout(resolve, 100));
+    });
+
+    const { handleSubmit, isSubmitting } = useForm({
+      initialValues: { name: 'John' },
+      onSubmit
+    });
+
+    // Start first submission
+    const promise1 = handleSubmit();
+    
+    // Wait a tick for the isSubmitting flag to be set
+    await new Promise(resolve => setTimeout(resolve, 0));
+    expect(isSubmitting.value).toBe(true);
+
+    // Try second submission while first is in progress
+    await handleSubmit();
+
+    // Wait for first to complete
+    await promise1;
+
+    // Should only be called once
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+  });
+});

package/src/composables/useForm.ts

@@ -0,0 +1,130 @@
+import { ref, computed, type Ref, type ComputedRef } from 'vue';
+
+export interface ValidationRule<T = any> {
+  validate: (value: T) => boolean | Promise<boolean>;
+  message: string;
+}
+
+export interface FieldConfig {
+  rules?: ValidationRule[];
+  initialValue?: any;
+}
+
+export interface UseFormOptions<T extends Record<string, any>> {
+  initialValues: T;
+  validationRules?: Partial<Record<keyof T, ValidationRule[]>>;
+  onSubmit?: (values: T) => void | Promise<void>;
+}
+
+export interface UseFormReturn<T extends Record<string, any>> {
+  values: Ref<T>;
+  errors: Ref<Partial<Record<keyof T, string>>>;
+  touched: Ref<Partial<Record<keyof T, boolean>>>;
+  isSubmitting: Ref<boolean>;
+  isValid: ComputedRef<boolean>;
+  setFieldValue: (field: keyof T, value: any) => void;
+  setFieldError: (field: keyof T, error: string) => void;
+  setFieldTouched: (field: keyof T, touched: boolean) => void;
+  validateField: (field: keyof T) => Promise<boolean>;
+  validateForm: () => Promise<boolean>;
+  handleSubmit: (event?: Event) => Promise<void>;
+  resetForm: () => void;
+}
+
+export function useForm<T extends Record<string, any>>(
+  options: UseFormOptions<T>
+): UseFormReturn<T> {
+  const values = ref<T>({ ...options.initialValues }) as Ref<T>;
+  const errors = ref<Partial<Record<keyof T, string>>>({});
+  const touched = ref<Partial<Record<keyof T, boolean>>>({});
+  const isSubmitting = ref(false);
+
+  const isValid = computed(() => Object.keys(errors.value).length === 0);
+
+  function setFieldValue(field: keyof T, value: any) {
+    values.value[field] = value;
+  }
+
+  function setFieldError(field: keyof T, error: string) {
+    errors.value[field] = error;
+  }
+
+  function setFieldTouched(field: keyof T, isTouched: boolean) {
+    touched.value[field] = isTouched;
+  }
+
+  async function validateField(field: keyof T): Promise<boolean> {
+    const rules = options.validationRules?.[field];
+    if (!rules || rules.length === 0) return true;
+
+    const value = values.value[field];
+
+    for (const rule of rules) {
+      const isValid = await rule.validate(value);
+      if (!isValid) {
+        setFieldError(field, rule.message);
+        return false;
+      }
+    }
+
+    // Clear error if validation passed
+    delete errors.value[field];
+    return true;
+  }
+
+  async function validateForm(): Promise<boolean> {
+    const fields = Object.keys(values.value) as Array<keyof T>;
+    const validationResults = await Promise.all(
+      fields.map(field => validateField(field))
+    );
+
+    return validationResults.every(result => result);
+  }
+
+  async function handleSubmit(event?: Event) {
+    if (event) {
+      event.preventDefault();
+    }
+
+    if (isSubmitting.value) return;
+
+    // Mark all fields as touched
+    for (const field of Object.keys(values.value) as Array<keyof T>) {
+      setFieldTouched(field, true);
+    }
+
+    // Validate form
+    const isFormValid = await validateForm();
+    if (!isFormValid) return;
+
+    // Submit form
+    isSubmitting.value = true;
+    try {
+      await options.onSubmit?.(values.value);
+    } finally {
+      isSubmitting.value = false;
+    }
+  }
+
+  function resetForm() {
+    values.value = { ...options.initialValues };
+    errors.value = {};
+    touched.value = {};
+    isSubmitting.value = false;
+  }
+
+  return {
+    values,
+    errors,
+    touched,
+    isSubmitting,
+    isValid,
+    setFieldValue,
+    setFieldError,
+    setFieldTouched,
+    validateField,
+    validateForm,
+    handleSubmit,
+    resetForm
+  };
+}

package/src/composables/useFormValidation.test.ts

@@ -0,0 +1,189 @@
+import { describe, it, expect } from 'vitest';
+import {
+  required,
+  minLength,
+  maxLength,
+  email,
+  pattern,
+  min,
+  max,
+  custom,
+  useFormValidation
+} from './useFormValidation';
+
+describe('useFormValidation composable', () => {
+  describe('required', () => {
+    it('validates non-empty strings', () => {
+      const rule = required();
+      expect(rule.validate('test')).toBe(true);
+      expect(rule.validate('')).toBe(false);
+      expect(rule.validate('  ')).toBe(false);
+    });
+
+    it('validates non-empty arrays', () => {
+      const rule = required();
+      expect(rule.validate([1, 2, 3])).toBe(true);
+      expect(rule.validate([])).toBe(false);
+    });
+
+    it('validates null and undefined', () => {
+      const rule = required();
+      expect(rule.validate(null)).toBe(false);
+      expect(rule.validate(undefined)).toBe(false);
+    });
+
+    it('uses custom message', () => {
+      const rule = required('Custom message');
+      expect(rule.message).toBe('Custom message');
+    });
+  });
+
+  describe('minLength', () => {
+    it('validates minimum length', () => {
+      const rule = minLength(5);
+      expect(rule.validate('hello')).toBe(true);
+      expect(rule.validate('hi')).toBe(false);
+    });
+
+    it('allows empty values', () => {
+      const rule = minLength(5);
+      expect(rule.validate('')).toBe(true);
+    });
+
+    it('uses custom message', () => {
+      const rule = minLength(5, 'Too short');
+      expect(rule.message).toBe('Too short');
+    });
+  });
+
+  describe('maxLength', () => {
+    it('validates maximum length', () => {
+      const rule = maxLength(5);
+      expect(rule.validate('hello')).toBe(true);
+      expect(rule.validate('hello world')).toBe(false);
+    });
+
+    it('allows empty values', () => {
+      const rule = maxLength(5);
+      expect(rule.validate('')).toBe(true);
+    });
+
+    it('uses custom message', () => {
+      const rule = maxLength(5, 'Too long');
+      expect(rule.message).toBe('Too long');
+    });
+  });
+
+  describe('email', () => {
+    it('validates email format', () => {
+      const rule = email();
+      expect(rule.validate('test@example.com')).toBe(true);
+      expect(rule.validate('invalid')).toBe(false);
+      expect(rule.validate('test@')).toBe(false);
+      expect(rule.validate('@example.com')).toBe(false);
+    });
+
+    it('allows empty values', () => {
+      const rule = email();
+      expect(rule.validate('')).toBe(true);
+    });
+
+    it('uses custom message', () => {
+      const rule = email('Invalid email format');
+      expect(rule.message).toBe('Invalid email format');
+    });
+  });
+
+  describe('pattern', () => {
+    it('validates against regex pattern', () => {
+      const rule = pattern(/^\d{3}-\d{3}-\d{4}$/);
+      expect(rule.validate('123-456-7890')).toBe(true);
+      expect(rule.validate('1234567890')).toBe(false);
+    });
+
+    it('allows empty values', () => {
+      const rule = pattern(/^\d+$/);
+      expect(rule.validate('')).toBe(true);
+    });
+
+    it('uses custom message', () => {
+      const rule = pattern(/^\d+$/, 'Must be numbers only');
+      expect(rule.message).toBe('Must be numbers only');
+    });
+  });
+
+  describe('min', () => {
+    it('validates minimum value', () => {
+      const rule = min(10);
+      expect(rule.validate(10)).toBe(true);
+      expect(rule.validate(15)).toBe(true);
+      expect(rule.validate(5)).toBe(false);
+    });
+
+    it('allows null and undefined', () => {
+      const rule = min(10);
+      expect(rule.validate(null)).toBe(true);
+      expect(rule.validate(undefined)).toBe(true);
+    });
+
+    it('uses custom message', () => {
+      const rule = min(10, 'Too small');
+      expect(rule.message).toBe('Too small');
+    });
+  });
+
+  describe('max', () => {
+    it('validates maximum value', () => {
+      const rule = max(10);
+      expect(rule.validate(10)).toBe(true);
+      expect(rule.validate(5)).toBe(true);
+      expect(rule.validate(15)).toBe(false);
+    });
+
+    it('allows null and undefined', () => {
+      const rule = max(10);
+      expect(rule.validate(null)).toBe(true);
+      expect(rule.validate(undefined)).toBe(true);
+    });
+
+    it('uses custom message', () => {
+      const rule = max(10, 'Too large');
+      expect(rule.message).toBe('Too large');
+    });
+  });
+
+  describe('custom', () => {
+    it('validates with custom function', () => {
+      const rule = custom((value) => value === 'valid', 'Must be valid');
+      expect(rule.validate('valid')).toBe(true);
+      expect(rule.validate('invalid')).toBe(false);
+    });
+
+    it('supports async validation', async () => {
+      const rule = custom(
+        async (value) => {
+          await new Promise(resolve => setTimeout(resolve, 10));
+          return value === 'valid';
+        },
+        'Must be valid'
+      );
+      expect(await rule.validate('valid')).toBe(true);
+      expect(await rule.validate('invalid')).toBe(false);
+    });
+  });
+
+  describe('useFormValidation', () => {
+    it('returns all validation functions', () => {
+      const validation = useFormValidation();
+      
+      expect(validation.required).toBeDefined();
+      expect(validation.minLength).toBeDefined();
+      expect(validation.maxLength).toBeDefined();
+      expect(validation.email).toBeDefined();
+      expect(validation.pattern).toBeDefined();
+      expect(validation.min).toBeDefined();
+      expect(validation.max).toBeDefined();
+      expect(validation.custom).toBeDefined();
+    });
+  });
+});

package/src/composables/useFormValidation.ts

@@ -0,0 +1,83 @@
+import type { ValidationRule } from './useForm';
+
+// Common validation rules
+export const required = (message = 'This field is required'): ValidationRule => ({
+  validate: (value: any) => {
+    if (value === null || value === undefined) return false;
+    if (typeof value === 'string') return value.trim().length > 0;
+    if (Array.isArray(value)) return value.length > 0;
+    return true;
+  },
+  message
+});
+
+export const minLength = (min: number, message?: string): ValidationRule => ({
+  validate: (value: string) => {
+    if (!value) return true; // Let required handle empty values
+    return value.length >= min;
+  },
+  message: message || `Must be at least ${min} characters`
+});
+
+export const maxLength = (max: number, message?: string): ValidationRule => ({
+  validate: (value: string) => {
+    if (!value) return true;
+    return value.length <= max;
+  },
+  message: message || `Must be at most ${max} characters`
+});
+
+export const email = (message = 'Invalid email address'): ValidationRule => ({
+  validate: (value: string) => {
+    if (!value) return true;
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(value);
+  },
+  message
+});
+
+export const pattern = (regex: RegExp, message = 'Invalid format'): ValidationRule => ({
+  validate: (value: string) => {
+    if (!value) return true;
+    return regex.test(value);
+  },
+  message
+});
+
+export const min = (minValue: number, message?: string): ValidationRule => ({
+  validate: (value: number) => {
+    if (value === null || value === undefined) return true;
+    return value >= minValue;
+  },
+  message: message || `Must be at least ${minValue}`
+});
+
+export const max = (maxValue: number, message?: string): ValidationRule => ({
+  validate: (value: number) => {
+    if (value === null || value === undefined) return true;
+    return value <= maxValue;
+  },
+  message: message || `Must be at most ${maxValue}`
+});
+
+export const custom = (
+  validator: (value: any) => boolean | Promise<boolean>,
+  message: string
+): ValidationRule => ({
+  validate: validator,
+  message
+});
+
+// Composable for form validation
+export function useFormValidation() {
+  return {
+    required,
+    minLength,
+    maxLength,
+    email,
+    pattern,
+    min,
+    max,
+    custom
+  };
+}