metaowl 0.1.3 → 0.2.0

package/modules/forms.js

@@ -0,0 +1,353 @@
+/**
+ * @module Forms
+ *
+ * Form handling and validation for MetaOwl applications.
+ *
+ * Features:
+ * - useForm() hook for form state
+ * - Field-level validation
+ * - Schema validation (Zod-compatible)
+ * - Error display
+ * - Field dirty/touched tracking
+ * - Async validation support
+ *
+ * @example
+ * import { useForm } from 'metaowl'
+ *
+ * const form = useForm({
+ *   name: { default: '', validation: (v) => v.length > 2 || 'Min 3 chars' },
+ *   email: { default: '', validation: (v) => /^[^\s@]+@[^\s@]+$/.test(v) || 'Invalid' }
+ * })
+ *
+ * form.handleSubmit((values) => {
+ *   console.log(values.name, values.email)
+ * })
+ */
+
+import { reactive } from '@odoo/owl'
+
+/**
+ * Create a form controller.
+ *
+ * @param {object} fieldsConfig - Field configurations
+ * @returns {FormController}
+ *
+ * @example
+ * const form = useForm({
+ *   name: { default: '', validation: (v) => v.length > 0 || 'Required' },
+ *   email: {
+ *     default: '',
+ *     validation: [
+ *       (v) => !!v || 'Required',
+ *       (v) => /.+@.+/.test(v) || 'Invalid email'
+ *     ],
+ *     asyncValidation: async (v) => await checkEmail(v) || 'Taken'
+ *   }
+ * })
+ */
+export function useForm(fieldsConfig = {}) {
+  const fields = {}
+  const errors = {}
+  const touched = {}
+  const dirty = {}
+  const validating = {}
+
+  // Initialize field states
+  for (const [name, config] of Object.entries(fieldsConfig)) {
+    const initialValue = config?.default ?? ''
+    fields[name] = initialValue
+    errors[name] = null
+    touched[name] = false
+    dirty[name] = false
+    validating[name] = false
+  }
+
+  const state = reactive({
+    fields,
+    errors,
+    touched,
+    dirty,
+    validating,
+    isSubmitting: false,
+    isValidating: false,
+    submitCount: 0
+  })
+
+  /**
+   * Validate a single field.
+   *
+   * @param {string} name
+   * @returns {Promise<boolean>}
+   */
+  async function validateField(name) {
+    const config = fieldsConfig[name]
+    if (!config?.validation) {
+      state.errors[name] = null
+      return true
+    }
+
+    const value = state.fields[name]
+    const validators = Array.isArray(config.validation)
+      ? config.validation
+      : [config.validation]
+
+    // Sync validation
+    for (const validator of validators) {
+      const result = validator(value, state.fields)
+      if (result !== true) {
+        state.errors[name] = result || 'Invalid'
+        return false
+      }
+    }
+
+    // Async validation
+    if (config.asyncValidation) {
+      state.validating[name] = true
+      state.isValidating = true
+      try {
+        const result = await config.asyncValidation(value, state.fields)
+        if (result !== true) {
+          state.errors[name] = result || 'Invalid'
+          return false
+        }
+      } finally {
+        state.validating[name] = false
+        state.isValidating = Object.values(state.validating).some(Boolean)
+      }
+    }
+
+    state.errors[name] = null
+    return true
+  }
+
+  /**
+   * Validate all fields.
+   *
+   * @returns {Promise<boolean>}
+   */
+  async function validateAll() {
+    const results = await Promise.all(
+      Object.keys(fieldsConfig).map(name => validateField(name))
+    )
+    return results.every(Boolean)
+  }
+
+  return {
+    // State (reactive)
+    fields: state.fields,
+    errors: state.errors,
+    touched: state.touched,
+    dirty: state.dirty,
+    validating: state.validating,
+    isSubmitting: state.isSubmitting,
+    isValidating: state.isValidating,
+    submitCount: state.submitCount,
+
+    // Computed
+    get isValid() {
+      return Object.values(state.errors).every(e => e === null)
+    },
+
+    get isDirty() {
+      return Object.values(state.dirty).some(Boolean)
+    },
+
+    get isTouched() {
+      return Object.values(state.touched).some(Boolean)
+    },
+
+    // Methods
+    /**
+     * Update a field value.
+     *
+     * @param {string} name
+     * @param {*} value
+     */
+    setValue(name, value) {
+      state.fields[name] = value
+      state.dirty[name] = value !== (fieldsConfig[name]?.default ?? '')
+    },
+
+    /**
+     * Mark field as touched.
+     *
+     * @param {string} name
+     */
+    setTouched(name) {
+      state.touched[name] = true
+    },
+
+    /**
+     * Mark all fields as touched.
+     */
+    setAllTouched() {
+      for (const name of Object.keys(fieldsConfig)) {
+        state.touched[name] = true
+      }
+    },
+
+    /**
+     * Validate a field.
+     *
+     * @param {string} name
+     * @returns {Promise<boolean>}
+     */
+    validateField,
+
+    /**
+     * Validate all fields.
+     *
+     * @returns {Promise<boolean>}
+     */
+    validate: validateAll,
+
+    /**
+     * Reset form to initial state.
+     */
+    reset() {
+      for (const [name, config] of Object.entries(fieldsConfig)) {
+        state.fields[name] = config?.default ?? ''
+        state.errors[name] = null
+        state.touched[name] = false
+        state.dirty[name] = false
+      }
+      state.isSubmitting = false
+      state.submitCount = 0
+    },
+
+    /**
+     * Create submit handler.
+     *
+     * @param {Function} onSubmit - Callback with form values
+     * @param {object} [options]
+     * @param {boolean} [options.validate=true] - Validate before submit
+     * @returns {Function} Submit handler
+     */
+    handleSubmit(onSubmit, options = {}) {
+      const { validate = true } = options
+
+      return async (...args) => {
+        state.isSubmitting = true
+        state.submitCount++
+
+        try {
+          if (validate) {
+            this.setAllTouched()
+            const isValid = await this.validate()
+            if (!isValid) {
+              state.isSubmitting = false
+              return
+            }
+          }
+
+          await onSubmit({ ...state.fields }, ...args)
+        } finally {
+          state.isSubmitting = false
+        }
+      }
+    },
+
+    /**
+     * Get field props for binding.
+     *
+     * @param {string} name
+     * @returns {object} Bindable props
+     */
+    register(name) {
+      return {
+        value: state.fields[name],
+        onChange: (e) => this.setValue(name, e.target?.value ?? e),
+        onBlur: () => {
+          this.setTouched(name)
+          this.validateField(name)
+        },
+        error: state.touched[name] ? state.errors[name] : null
+      }
+    }
+  }
+}
+
+/**
+ * Common validators.
+ */
+export const validators = {
+  required: (message = 'Required') => (v) => !!v || message,
+
+  minLength: (min, message) => (v) =>
+    (v?.length ?? 0) >= min || message || `Min ${min} characters`,
+
+  maxLength: (max, message) => (v) =>
+    (v?.length ?? 0) <= max || message || `Max ${max} characters`,
+
+  min: (min, message) => (v) =>
+    Number(v) >= min || message || `Min ${min}`,
+
+  max: (max, message) => (v) =>
+    Number(v) <= max || message || `Max ${max}`,
+
+  email: (message = 'Invalid email') => (v) =>
+    /^[^\s@]+@[^\s@]+$/.test(v) || message,
+
+  url: (message = 'Invalid URL') => (v) =>
+    /^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})[/\w .-]*\/?$/.test(v) || message,
+
+  pattern: (regex, message = 'Invalid format') => (v) =>
+    regex.test(v) || message,
+
+  match: (field, message) => (v, values) =>
+    v === values[field] || message || 'Fields do not match'
+}
+
+/**
+ * Create validation schema from config.
+ *
+ * @param {object} schema
+ * @returns {object}
+ *
+ * @example
+ * const schema = createSchema({
+ *   name: [validators.required(), validators.minLength(3)],
+ *   email: [validators.required(), validators.email()]
+ * })
+ *
+ * const form = useForm(schema)
+ */
+export function createSchema(schema) {
+  const fieldsConfig = {}
+
+  for (const [name, validators] of Object.entries(schema)) {
+    const validatorArray = Array.isArray(validators) ? validators : [validators]
+
+    fieldsConfig[name] = {
+      default: '',
+      validation: (v, values) => {
+        for (const validator of validatorArray) {
+          const result = validator(v, values)
+          if (result !== true) return result
+        }
+        return true
+      }
+    }
+  }
+
+  return fieldsConfig
+}
+
+/**
+ * Field component props helper.
+ *
+ * @param {object} form - Form controller from useForm
+ * @param {string} name - Field name
+ * @returns {object} Props for input component
+ */
+export function fieldProps(form, name) {
+  return {
+    value: form.fields[name],
+    error: form.touched[name] ? form.errors[name] : null,
+    onChange: (value) => form.setValue(name, value),
+    onBlur: () => {
+      form.setTouched(name)
+      form.validateField(name)
+    }
+  }
+}

package/modules/i18n.js

@@ -0,0 +1,333 @@
+/**
+ * @module i18n
+ *
+ * Internationalization (i18n) support for MetaOwl applications.
+ *
+ * Features:
+ * - Translation function t()
+ * - Locale switching
+ * - Pluralization support
+ * - Interpolation: {{variable}}
+ * - Named formats
+ * - Async locale loading
+ * - Fallback locales
+ *
+ * @example
+ * import { i18n, t } from 'metaowl'
+ *
+ * // Configure
+ * i18n.configure({
+ *   locale: 'de',
+ *   fallbackLocale: 'en',
+ *   messages: {
+ *     en: { hello: 'Hello {{name}}' },
+ *     de: { hello: 'Hallo {{name}}' }
+ *   }
+ * })
+ *
+ * // Use in templates
+ * t('hello', { name: 'World' }) // 'Hallo World'
+ *
+ * // Use in OWL templates
+ * xml`<span t-esc="t('hello', { name: state.user })" />`
+ */
+
+import { reactive } from '@odoo/owl'
+
+/**
+ * Reactive i18n state.
+ */
+const _state = reactive({
+  locale: 'en',
+  fallbackLocale: 'en',
+  messages: {},
+  loading: false
+})
+
+/**
+ * Default pluralization rules.
+ */
+const _pluralRules = new Map()
+
+/**
+ * Configure pluralization for a locale.
+ *
+ * @param {string} locale
+ * @param {Function} rule - (count) => form ('zero'|'one'|'two'|'few'|'many'|'other')
+ */
+export function setPluralizationRule(locale, rule) {
+  _pluralRules.set(locale, rule)
+}
+
+/**
+ * Default pluralization (English-like).
+ *
+ * @param {number} count
+ * @returns {string}
+ */
+function defaultPluralRule(count) {
+  if (count === 0) return 'zero'
+  if (count === 1) return 'one'
+  return 'other'
+}
+
+/**
+ * Get plural form for count and locale.
+ *
+ * @param {number} count
+ * @param {string} locale
+ * @returns {string}
+ */
+function getPluralForm(count, locale) {
+  const rule = _pluralRules.get(locale) || defaultPluralRule
+  return rule(count)
+}
+
+/**
+ * Configure i18n settings.
+ *
+ * @param {object} config
+ * @param {string} [config.locale='en']
+ * @param {string} [config.fallbackLocale='en']
+ * @param {object} [config.messages={}]
+ * @param {boolean} [config.warnOnMissing=true]
+ */
+export function configureI18n(config) {
+  if (config.locale) {
+    _state.locale = config.locale
+    document.documentElement.lang = config.locale
+  }
+  if (config.fallbackLocale) {
+    _state.fallbackLocale = config.fallbackLocale
+  }
+  if (config.messages) {
+    _state.messages = config.messages
+  }
+}
+
+/**
+ * Get current locale.
+ *
+ * @returns {string}
+ */
+export function getLocale() {
+  return _state.locale
+}
+
+/**
+ * Set current locale.
+ *
+ * @param {string} locale
+ * @returns {Promise<void>}
+ */
+export async function setLocale(locale) {
+  _state.locale = locale
+  document.documentElement.lang = locale
+}
+
+/**
+ * Load locale messages asynchronously.
+ *
+ * @param {string} locale
+ * @param {object|Promise<object>} messages
+ */
+export async function loadLocaleMessages(locale, messages) {
+  _state.loading = true
+  try {
+    const loaded = await messages
+    if (!_state.messages[locale]) {
+      _state.messages[locale] = {}
+    }
+    Object.assign(_state.messages[locale], loaded)
+  } finally {
+    _state.loading = false
+  }
+}
+
+/**
+ * Translate a key with optional interpolation.
+ *
+ * @param {string} key - Dot-notation key (e.g., 'messages.hello')
+ * @param {object} [values] - Interpolation values
+ * @param {string} [defaultMessage] - Fallback message
+ * @returns {string} Translated string
+ *
+ * @example
+ * t('hello') // 'Hello'
+ * t('hello', { name: 'World' }) // 'Hello World'
+ * t('count', { n: 5 }) // Uses plural forms
+ */
+export function t(key, values = {}, defaultMessage) {
+  const locale = _state.locale
+  const fallbackLocale = _state.fallbackLocale
+
+  // Get message
+  let message = getMessage(key, locale)
+
+  // Fallback
+  if (!message && locale !== fallbackLocale) {
+    message = getMessage(key, fallbackLocale)
+  }
+
+  // Still not found
+  if (!message) {
+    return defaultMessage || key
+  }
+
+  // Handle pluralization
+  if (typeof message === 'object') {
+    const count = values.n || values.count || 0
+    const form = getPluralForm(count, locale)
+    message = message[form] || message.other || message.one || key
+  }
+
+  // Interpolate
+  return interpolate(message, values)
+}
+
+/**
+ * Get message by dot-notation key.
+ *
+ * @param {string} key
+ * @param {string} locale
+ * @returns {string|object|undefined}
+ */
+function getMessage(key, locale) {
+  const parts = key.split('.')
+  let current = _state.messages[locale]
+
+  for (const part of parts) {
+    if (!current || typeof current !== 'object') {
+      return undefined
+    }
+    current = current[part]
+  }
+
+  return current
+}
+
+/**
+ * Interpolate values into message.
+ *
+ * @param {string} message
+ * @param {object} values
+ * @returns {string}
+ */
+function interpolate(message, values) {
+  return message.replace(/\{\{(\w+)\}\}/g, (match, key) => {
+    return values[key] !== undefined ? values[key] : match
+  })
+}
+
+/**
+ * Format a date according to locale.
+ *
+ * @param {Date|number|string} date
+ * @param {object} [options] - Intl.DateTimeFormat options
+ * @returns {string}
+ */
+export function formatDate(date, options = {}) {
+  const d = new Date(date)
+  return new Intl.DateTimeFormat(_state.locale, options).format(d)
+}
+
+/**
+ * Format a number according to locale.
+ *
+ * @param {number} number
+ * @param {object} [options] - Intl.NumberFormat options
+ * @returns {string}
+ */
+export function formatNumber(number, options = {}) {
+  return new Intl.NumberFormat(_state.locale, options).format(number)
+}
+
+/**
+ * Format currency according to locale.
+ *
+ * @param {number} amount
+ * @param {string} currency - Currency code (e.g., 'USD', 'EUR')
+ * @param {object} [options]
+ * @returns {string}
+ */
+export function formatCurrency(amount, currency, options = {}) {
+  return new Intl.NumberFormat(_state.locale, {
+    style: 'currency',
+    currency,
+    ...options
+  }).format(amount)
+}
+
+/**
+ * Format relative time (e.g., "2 hours ago").
+ *
+ * @param {Date|number|string} date
+ * @param {string} [style='long'] - 'long'|'short'|'narrow'
+ * @returns {string}
+ */
+export function formatRelativeTime(date, style = 'long') {
+  const d = new Date(date)
+  const now = new Date()
+  const diff = d.getTime() - now.getTime()
+
+  const seconds = Math.round(diff / 1000)
+  const minutes = Math.round(seconds / 60)
+  const hours = Math.round(minutes / 60)
+  const days = Math.round(hours / 24)
+
+  const rtf = new Intl.RelativeTimeFormat(_state.locale, { style })
+
+  if (Math.abs(seconds) < 60) return rtf.format(seconds, 'second')
+  if (Math.abs(minutes) < 60) return rtf.format(minutes, 'minute')
+  if (Math.abs(hours) < 24) return rtf.format(hours, 'hour')
+  return rtf.format(days, 'day')
+}
+
+/**
+ * i18n helper for OWL templates.
+ * Use as: t-esc="i18n.t('key', values)"
+ */
+export const i18n = {
+  get locale() { return _state.locale },
+  get fallbackLocale() { return _state.fallbackLocale },
+  get loading() { return _state.loading },
+  get messages() { return _state.messages },
+  configure: configureI18n,
+  setLocale,
+  t,
+  formatDate,
+  formatNumber,
+  formatCurrency,
+  formatRelativeTime
+}
+
+/**
+ * Create a namespaced translation function.
+ *
+ * @param {string} namespace - e.g., 'forms', 'errors'
+ * @returns {Function} - (key, values) => string
+ *
+ * @example
+ * const tf = createNamespacedT('forms')
+ * tf('name.label') // Same as t('forms.name.label')
+ */
+export function createNamespacedT(namespace) {
+  return (key, values) => t(`${namespace}.${key}`, values)
+}
+
+// Set up German pluralization
+setPluralizationRule('de', (count) => {
+  if (count === 0) return 'zero'
+  if (count === 1) return 'one'
+  return 'other'
+})
+
+// Set up Russian pluralization (complex)
+setPluralizationRule('ru', (count) => {
+  const mod10 = count % 10
+  const mod100 = count % 100
+  if (mod10 === 1 && mod100 !== 11) return 'one'
+  if ([2, 3, 4].includes(mod10) && ![12, 13, 14].includes(mod100)) return 'few'
+  if (mod10 === 0 || [5, 6, 7, 8, 9].includes(mod10) || [11, 12, 13, 14].includes(mod100)) return 'many'
+  return 'other'
+})