@tachui/forms 0.7.0-alpha1 → 0.8.0-alpha

package/src/validation/index.ts

@@ -0,0 +1,641 @@
+/**
+ * TachUI Forms Validation System
+ *
+ * Comprehensive validation engine with built-in rules, custom validators,
+ * async validation support, and i18n-ready error messages.
+ */
+
+import type {
+  CustomValidationRule,
+  FieldState,
+  FieldValidation,
+  ValidationResult,
+  ValidationRule,
+} from '../types'
+
+/**
+ * Built-in validation rules
+ */
+const VALIDATION_RULES: Record<
+  string,
+  (value: any, options?: any) => ValidationResult
+> = {
+  required: (value: any): ValidationResult => ({
+    valid: value !== null && value !== undefined && value !== '',
+    message: 'This field is required',
+    code: 'REQUIRED',
+  }),
+
+  email: (value: string): ValidationResult => {
+    if (!value) return { valid: true }
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+    return {
+      valid: emailRegex.test(value),
+      message: 'Please enter a valid email address',
+      code: 'INVALID_EMAIL',
+    }
+  },
+
+  url: (value: string): ValidationResult => {
+    if (!value) return { valid: true }
+    try {
+      new URL(value)
+      return { valid: true }
+    } catch {
+      return {
+        valid: false,
+        message: 'Please enter a valid URL',
+        code: 'INVALID_URL',
+      }
+    }
+  },
+
+  number: (value: any): ValidationResult => {
+    if (!value) return { valid: true }
+    const num = Number(value)
+    return {
+      valid: !Number.isNaN(num) && Number.isFinite(num),
+      message: 'Please enter a valid number',
+      code: 'INVALID_NUMBER',
+    }
+  },
+
+  integer: (value: any): ValidationResult => {
+    if (!value) return { valid: true }
+    const num = Number(value)
+    return {
+      valid:
+        !Number.isNaN(num) && Number.isFinite(num) && Number.isInteger(num),
+      message: 'Please enter a valid integer',
+      code: 'INVALID_INTEGER',
+    }
+  },
+
+  min: (value: any, options: { min: number }): ValidationResult => {
+    if (!value) return { valid: true }
+    const num = Number(value)
+    if (Number.isNaN(num)) return { valid: true } // Let number validation handle this
+
+    return {
+      valid: num >= options.min,
+      message: `Value must be at least ${options.min}`,
+      code: 'MIN_VALUE',
+    }
+  },
+
+  max: (value: any, options: { max: number }): ValidationResult => {
+    if (!value) return { valid: true }
+    const num = Number(value)
+    if (Number.isNaN(num)) return { valid: true } // Let number validation handle this
+
+    return {
+      valid: num <= options.max,
+      message: `Value must be at most ${options.max}`,
+      code: 'MAX_VALUE',
+    }
+  },
+
+  minLength: (
+    value: string,
+    options: { minLength: number }
+  ): ValidationResult => {
+    if (!value) return { valid: true }
+    return {
+      valid: value.length >= options.minLength,
+      message: `Must be at least ${options.minLength} characters`,
+      code: 'MIN_LENGTH',
+    }
+  },
+
+  maxLength: (
+    value: string,
+    options: { maxLength: number }
+  ): ValidationResult => {
+    if (!value) return { valid: true }
+    return {
+      valid: value.length <= options.maxLength,
+      message: `Must be at most ${options.maxLength} characters`,
+      code: 'MAX_LENGTH',
+    }
+  },
+
+  pattern: (
+    value: string,
+    options: { pattern: string | RegExp; message?: string }
+  ): ValidationResult => {
+    if (!value) return { valid: true }
+    const regex =
+      typeof options.pattern === 'string'
+        ? new RegExp(options.pattern)
+        : options.pattern
+    return {
+      valid: regex.test(value),
+      message: options.message || 'Value does not match required pattern',
+      code: 'PATTERN_MISMATCH',
+    }
+  },
+
+  // Additional validation rules expected by tests
+  numeric: (value: any): ValidationResult => {
+    if (!value) return { valid: true }
+    const num = Number(value)
+    return {
+      valid: !Number.isNaN(num) && Number.isFinite(num),
+      message: 'Please enter a valid number',
+      code: 'INVALID_NUMERIC',
+    }
+  },
+
+  phone: (value: string): ValidationResult => {
+    if (!value) return { valid: true }
+    const phoneRegex = /^\+?[\d\s\-().]+$/
+    const digits = value.replace(/[\s\-().]/g, '')
+    return {
+      valid: phoneRegex.test(value) && digits.length >= 10,
+      message: 'Please enter a valid phone number',
+      code: 'INVALID_PHONE',
+    }
+  },
+
+  creditCard: (value: string): ValidationResult => {
+    if (!value) return { valid: true }
+    const digits = value.replace(/\s/g, '')
+    // Basic Luhn algorithm check
+    let sum = 0
+    let alternate = false
+    for (let i = digits.length - 1; i >= 0; i--) {
+      let n = parseInt(digits.charAt(i))
+      if (alternate) {
+        n *= 2
+        if (n > 9) n = (n % 10) + 1
+      }
+      sum += n
+      alternate = !alternate
+    }
+    return {
+      valid: /^\d{13,19}$/.test(digits) && sum % 10 === 0,
+      message: 'Please enter a valid credit card number',
+      code: 'INVALID_CREDIT_CARD',
+    }
+  },
+
+  ssn: (value: string): ValidationResult => {
+    if (!value) return { valid: true }
+    const digits = value.replace(/[-\s]/g, '')
+    return {
+      valid: /^\d{9}$/.test(digits),
+      message: 'Please enter a valid Social Security Number',
+      code: 'INVALID_SSN',
+    }
+  },
+
+  postalCode: (value: string): ValidationResult => {
+    if (!value) return { valid: true }
+    // US ZIP code (5 or 9 digits) or international postal codes
+    const usZip = /^\d{5}(-\d{4})?$/
+    const intlPostal = /^[A-Z0-9]{3,10}$/i
+    return {
+      valid: usZip.test(value) || intlPostal.test(value),
+      message: 'Please enter a valid postal code',
+      code: 'INVALID_POSTAL_CODE',
+    }
+  },
+
+  zipCode: (value: string): ValidationResult => {
+    if (!value) return { valid: true }
+    // US ZIP code (5 or 9 digits)
+    const usZip = /^\d{5}(-\d{4})?$/
+    return {
+      valid: usZip.test(value),
+      message: 'Please enter a valid ZIP code',
+      code: 'INVALID_ZIP_CODE',
+    }
+  },
+
+  date: (value: string): ValidationResult => {
+    if (!value) return { valid: true }
+    const date = new Date(value)
+    return {
+      valid:
+        !Number.isNaN(date.getTime()) && !!value.match(/^\d{4}-\d{2}-\d{2}$/),
+      message: 'Please enter a valid date (YYYY-MM-DD)',
+      code: 'INVALID_DATE',
+    }
+  },
+
+  time: (value: string): ValidationResult => {
+    if (!value) return { valid: true }
+    return {
+      valid: /^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$/.test(value),
+      message: 'Please enter a valid time (HH:MM)',
+      code: 'INVALID_TIME',
+    }
+  },
+
+  strongPassword: (value: string): ValidationResult => {
+    if (!value) return { valid: true }
+    const hasUpperCase = /[A-Z]/.test(value)
+    const hasLowerCase = /[a-z]/.test(value)
+    const hasNumbers = /\d/.test(value)
+    const hasNonalphas = /\W/.test(value)
+    const isLongEnough = value.length >= 8
+
+    const valid =
+      hasUpperCase && hasLowerCase && hasNumbers && hasNonalphas && isLongEnough
+    return {
+      valid,
+      message: valid
+        ? undefined
+        : 'Password must be at least 8 characters with uppercase, lowercase, number and special character',
+      code: 'WEAK_PASSWORD',
+    }
+  },
+}
+
+/**
+ * Custom validation rule registry
+ */
+const customRules = new Map<string, CustomValidationRule>()
+
+/**
+ * Register a custom validation rule
+ */
+export function registerValidationRule(rule: CustomValidationRule): void {
+  customRules.set(rule.name, rule)
+}
+
+/**
+ * Unregister a custom validation rule
+ */
+export function unregisterValidationRule(name: string): void {
+  customRules.delete(name)
+}
+
+/**
+ * Get all registered validation rules
+ */
+export function getValidationRules(): string[] {
+  return [...Object.keys(VALIDATION_RULES), ...customRules.keys()]
+}
+
+/**
+ * Validate a single value against validation rules
+ */
+export function validateValue(
+  value: any,
+  rules: ValidationRule[],
+  options?: Record<string, any>
+): ValidationResult {
+  for (const rule of rules) {
+    let result: ValidationResult
+
+    if (typeof rule === 'string') {
+      // Built-in rule
+      const validator = VALIDATION_RULES[rule]
+      if (validator) {
+        result = validator(value, options?.[rule])
+      } else {
+        // Check custom rules
+        const customRule = customRules.get(rule)
+        if (customRule) {
+          result = customRule.validate(value, customRule.options)
+        } else {
+          console.warn(`Unknown validation rule: ${rule}`)
+          continue
+        }
+      }
+    } else if ('validate' in rule) {
+      // Custom validation rule object
+      result = rule.validate(value, rule.options)
+    } else {
+      // Built-in validation rule object (BuiltInValidationRule)
+      const validator = VALIDATION_RULES[rule.name]
+      if (validator) {
+        result = validator(value, rule.options)
+      } else {
+        console.warn(`Unknown built-in validation rule: ${rule.name}`)
+        continue
+      }
+    }
+
+    if (!result.valid) {
+      return result
+    }
+  }
+
+  return { valid: true }
+}
+
+/**
+ * Validate a field state
+ */
+export function validateField(
+  field: FieldState,
+  validation?: FieldValidation
+): ValidationResult {
+  if (!validation?.rules || validation.rules.length === 0) {
+    return { valid: true }
+  }
+
+  return validateValue(field.value, validation.rules)
+}
+
+/**
+ * Async validation function
+ */
+export async function validateValueAsync(
+  value: any,
+  rules: ValidationRule[],
+  options?: Record<string, any>
+): Promise<ValidationResult> {
+  for (const rule of rules) {
+    let result: ValidationResult | Promise<ValidationResult>
+
+    if (typeof rule === 'string') {
+      const validator = VALIDATION_RULES[rule]
+      if (validator) {
+        result = validator(value, options?.[rule])
+      } else {
+        const customRule = customRules.get(rule)
+        if (customRule) {
+          result = customRule.validate(value, customRule.options)
+        } else {
+          continue
+        }
+      }
+    } else if ('validate' in rule) {
+      // Custom validation rule object
+      result = rule.validate(value, rule.options)
+    } else {
+      // Built-in validation rule object (BuiltInValidationRule)
+      const validator = VALIDATION_RULES[rule.name]
+      if (validator) {
+        result = validator(value, rule.options)
+      } else {
+        continue
+      }
+    }
+
+    // Handle async validation
+    const validationResult = await Promise.resolve(result)
+
+    if (!validationResult.valid) {
+      return validationResult
+    }
+  }
+
+  return { valid: true }
+}
+
+/**
+ * Debounced validation
+ */
+export function createDebouncedValidator(
+  validator: (value: any) => ValidationResult | Promise<ValidationResult>,
+  delayMs: number = 300
+) {
+  let timeoutId: ReturnType<typeof setTimeout>
+  let lastValue: any
+  let lastResult: ValidationResult | Promise<ValidationResult>
+
+  return (value: any): Promise<ValidationResult> => {
+    return new Promise(resolve => {
+      // If value hasn't changed, return cached result
+      if (value === lastValue && lastResult) {
+        Promise.resolve(lastResult).then(resolve)
+        return
+      }
+
+      lastValue = value
+
+      // Clear previous timeout
+      clearTimeout(timeoutId)
+
+      // Set new timeout
+      timeoutId = setTimeout(async () => {
+        try {
+          lastResult = validator(value)
+          const result = await Promise.resolve(lastResult)
+          resolve(result)
+        } catch (_error) {
+          resolve({
+            valid: false,
+            message: 'Validation error occurred',
+            code: 'VALIDATION_ERROR',
+          })
+        }
+      }, delayMs)
+    })
+  }
+}
+
+/**
+ * Cross-field validation utilities
+ */
+export const CrossFieldValidators = {
+  /**
+   * Validate that two fields match (e.g., password confirmation)
+   */
+  fieldMatch:
+    (field1: string, field2: string, message = 'Fields must match') =>
+    (values: Record<string, any>): ValidationResult => {
+      const isValid = values[field1] === values[field2]
+      if (isValid) {
+        return { valid: true }
+      }
+      return {
+        valid: false,
+        message,
+        code: 'FIELD_MISMATCH',
+      }
+    },
+
+  /**
+   * Validate that at least one field in a group is filled
+   */
+  requireOneOf:
+    (fields: string[], message = 'At least one field is required') =>
+    (values: Record<string, any>): ValidationResult => {
+      const hasValue = fields.some(field => {
+        const value = values[field]
+        return value !== null && value !== undefined && value !== ''
+      })
+
+      if (hasValue) {
+        return { valid: true }
+      }
+      return {
+        valid: false,
+        message,
+        code: 'REQUIRE_ONE_OF',
+      }
+    },
+
+  /**
+   * Validate that a field is required when another field has a specific value
+   */
+  requiredWhen:
+    (
+      targetField: string,
+      conditionalField: string,
+      conditionalValue: any,
+      message = `${targetField} is required`
+    ) =>
+    (values: Record<string, any>): ValidationResult => {
+      if (values[conditionalField] === conditionalValue) {
+        const targetValue = values[targetField]
+        const isValid =
+          targetValue !== null &&
+          targetValue !== undefined &&
+          targetValue !== ''
+        if (isValid) {
+          return { valid: true }
+        }
+        return {
+          valid: false,
+          message,
+          code: 'REQUIRED_WHEN',
+        }
+      }
+      return { valid: true }
+    },
+
+  /**
+   * Validate date range (start date before end date)
+   */
+  dateRange:
+    (
+      startField: string,
+      endField: string,
+      message = 'End date must be after start date'
+    ) =>
+    (values: Record<string, any>): ValidationResult => {
+      const startDate = values[startField]
+      const endDate = values[endField]
+
+      if (!startDate || !endDate) return { valid: true }
+
+      const start = new Date(startDate)
+      const end = new Date(endDate)
+      const isValid = end >= start
+
+      if (isValid) {
+        return { valid: true }
+      }
+      return {
+        valid: false,
+        message,
+        code: 'INVALID_DATE_RANGE',
+      }
+    },
+}
+
+/**
+ * Built-in validation rule presets
+ */
+export const ValidationPresets = {
+  email: ['required', 'email'],
+  password: ['required', { name: 'minLength', options: { minLength: 8 } }],
+  phone: [
+    'required',
+    {
+      name: 'pattern',
+      options: { pattern: /^\+?[\d\s-()]+$/, message: 'Invalid phone number' },
+    },
+  ],
+  url: ['required', 'url'],
+  positiveNumber: ['required', 'number', { name: 'min', options: { min: 0 } }],
+  percentage: [
+    'required',
+    'number',
+    { name: 'min', options: { min: 0 } },
+    { name: 'max', options: { max: 100 } },
+  ],
+}
+
+/**
+ * Validation message formatter
+ */
+export class ValidationMessageFormatter {
+  private messages: Record<string, string> = {}
+
+  constructor(messages: Record<string, string> = {}) {
+    this.messages = messages
+  }
+
+  setMessage(code: string, message: string): void {
+    this.messages[code] = message
+  }
+
+  setMessages(messages: Record<string, string>): void {
+    this.messages = { ...this.messages, ...messages }
+  }
+
+  format(result: ValidationResult, fieldName?: string): string {
+    if (result.code && this.messages[result.code]) {
+      return this.messages[result.code].replace(
+        `\${field}`,
+        fieldName || 'field'
+      )
+    }
+    return result.message || 'Validation failed'
+  }
+}
+
+/**
+ * Default validation message formatter instance
+ */
+export const defaultMessageFormatter = new ValidationMessageFormatter()
+
+/**
+ * Validation utilities
+ */
+export const ValidationUtils = {
+  /**
+   * Check if a validation result represents an error
+   */
+  isError: (result: ValidationResult): boolean => !result.valid,
+
+  /**
+   * Check if a validation result is valid
+   */
+  isValid: (result: ValidationResult): boolean => result.valid,
+
+  /**
+   * Combine multiple validation results
+   */
+  combineResults: (results: ValidationResult[]): ValidationResult => {
+    const errors = results.filter(r => !r.valid)
+    if (errors.length === 0) {
+      return { valid: true }
+    }
+
+    return {
+      valid: false,
+      message: errors.map(e => e.message).join(', '),
+      code: 'MULTIPLE_ERRORS',
+    }
+  },
+
+  /**
+   * Create a validation function from a rule configuration
+   */
+  createValidator:
+    (rules: ValidationRule[], options?: Record<string, any>) =>
+    (value: any): ValidationResult =>
+      validateValue(value, rules, options),
+
+  /**
+   * Create an async validation function
+   */
+  createAsyncValidator:
+    (rules: ValidationRule[], options?: Record<string, any>) =>
+    (value: any): Promise<ValidationResult> =>
+      validateValueAsync(value, rules, options),
+}
+
+// Export all validation functionality
+export { VALIDATION_RULES }
+
+// Export component validation for plugin registration
+export * from './component-validation'

package/dist/Form-ueYEcSg1.cjs

@@ -1,2 +0,0 @@
-"use strict";const a=require("@tachui/core"),k=require("./forms-core-W_JGVLAI.cjs");function v(t,r){return Array.isArray(t)?t.flatMap(o=>C(o,r)):C(t,r)}function C(t,r){if(t==null)return[];if(typeof t=="object"&&"type"in t&&t.type==="component"){const o={...t,props:{...t.props,_formContext:r}},i=t.render.bind(o)();return Array.isArray(i)?i:[i]}return a.defaultChildrenRenderer(t)}const R=t=>{const{onSubmit:r,onChange:o,validation:n={validateOn:"blur",stopOnFirstError:!1,debounceMs:300},initialValues:i={},resetOnSubmit:l=!1,preserveValues:y=!1,children:g,...m}=t,s=k.createFormState(i),[S,u]=a.createSignal("idle"),h=async c=>{if(c&&c.preventDefault(),!!r)try{if(u("idle"),await s.validateForm()){const d=s.watch();await r(d,s.state),u("success"),l&&s.resetForm()}else u("error")}catch(f){u("error"),console.error("Form submission error:",f)}};a.createEffect(()=>{if(o){const c=s.state,f=Object.keys(c.fields).filter(d=>c.fields[d].dirty);if(f.length>0){const d=f[f.length-1],b=c.fields[d];o(d,b.value,b)}}});const x={register:s.register,unregister:s.unregister,setValue:s.setValue,getValue:s.getValue,getError:s.getError,validateField:s.validateField,validation:n,onChange:o};return{type:"component",id:m.id||"form",render:()=>a.h("form",{...m,onsubmit:h,novalidate:!0,"data-tachui-form":!0,"data-form-state":s.state.valid?"valid":"invalid","data-form-submitting":s.state.submitting,"data-submission-result":S()},...v(g,x)),props:t,cleanup:[()=>{y||s.resetForm()}]}},B=t=>{const{title:r,description:o,header:n,footer:i,style:l="automatic",spacing:y=12,collapsible:g=!1,collapsed:m=!1,onToggle:s,accessibilityLabel:S,accessibilityRole:u="group",children:h,...x}=t,[p,c]=a.createSignal(m),f=()=>{const e=!p();c(e),s&&s(e)},d=e=>e?typeof e=="string"?e:typeof e=="function"?e():e:null,b=()=>{const e={marginBottom:"20px",border:"none",padding:"0",margin:"0 0 20px 0"};switch(l){case"grouped":return{...e,backgroundColor:"#ffffff",border:"1px solid #e0e0e0",borderRadius:"12px",overflow:"hidden"};case"inset":return{...e,backgroundColor:"#f8f9fa",border:"1px solid #e9ecef",borderRadius:"8px",margin:"0 16px 20px 16px"};case"sidebar":return{...e,borderLeft:"3px solid #007AFF",paddingLeft:"16px",backgroundColor:"#f8f9fa",borderRadius:"0 8px 8px 0"};case"plain":return e;default:return{...e,backgroundColor:"#ffffff",border:"1px solid #f0f0f0",borderRadius:"8px"}}},w=()=>{const e={fontSize:"16px",fontWeight:"600",color:"#1a1a1a",margin:"0 0 12px 0"};switch(l){case"grouped":case"inset":return{...e,padding:"12px 16px 0 16px",backgroundColor:"#f8f9fa",borderBottom:"1px solid #e9ecef"};case"sidebar":return{...e,fontSize:"14px",textTransform:"uppercase",letterSpacing:"0.5px",color:"#666",marginBottom:"8px"};default:return{...e,padding:"0 0 8px 0"}}},A=()=>{const e={display:"flex",flexDirection:"column",gap:`${y}px`};switch(l){case"grouped":case"inset":return{...e,padding:"16px"};case"sidebar":return{...e,padding:"8px 0"};default:return{...e,padding:"12px"}}},E=()=>{const e={fontSize:"14px",color:"#666",margin:"8px 0 0 0"};switch(l){case"grouped":case"inset":return{...e,padding:"0 16px 12px 16px",backgroundColor:"#f8f9fa",borderTop:"1px solid #e9ecef"};default:return{...e,padding:"0 0 4px 0"}}},O=()=>{const e=r||d(n);if(!e)return[];const F=w();if(g){const I=p()?"▶":"▼";return[a.h("legend",{style:{...F,cursor:"pointer",display:"flex",alignItems:"center",gap:"8px"},onclick:f},a.h("span",{style:{fontSize:"12px",color:"#666"}},a.text(I)),...typeof e=="string"?[a.text(e)]:[e.render()].flat())]}return[a.h("legend",{style:F},...typeof e=="string"?[a.text(e)]:[e.render()].flat())]},V=()=>!o||p()?[]:[a.h("div",{style:{fontSize:"14px",color:"#666",marginBottom:"12px",padding:l==="grouped"||l==="inset"?"0 16px":"0"}},a.text(o))],z=()=>g&&p()?[]:[a.h("div",{style:A()},...v(h,t._formContext))],D=()=>{const e=d(i);return!e||p()?[]:[a.h("div",{style:E()},...typeof e=="string"?[a.text(e)]:[e.render()].flat())]};return{type:"component",id:x.id||"form-section",render:()=>a.h("fieldset",{...x,style:b(),"aria-label":S,role:u,"data-tachui-form-section":!0,"data-collapsible":g,"data-collapsed":p(),"data-style":l},...O(),...V(),...z(),...D()),props:t}},L={createAutoForm:t=>(console.log("Auto form creation:",t),R),validation:{createSchema:t=>({fields:t,validate:async r=>({valid:!0,errors:{}})})},serialize:{toFormData:t=>{const r=new FormData;return Object.entries(t).forEach(([o,n])=>{n!=null&&(n instanceof File||n instanceof Blob?r.append(o,n):Array.isArray(n)?n.forEach((i,l)=>{r.append(`${o}[${l}]`,String(i))}):r.append(o,String(n)))}),r},toURLSearchParams:t=>{const r=new URLSearchParams;return Object.entries(t).forEach(([o,n])=>{n!=null&&(Array.isArray(n)?n.forEach(i=>r.append(o,String(i))):r.append(o,String(n)))}),r},toJSON:t=>JSON.stringify(t,null,2)}};exports.Form=R;exports.FormSection=B;exports.FormUtils=L;
-//# sourceMappingURL=Form-ueYEcSg1.cjs.map