metaowl 0.4.0 → 0.5.0

package/modules/forms.js

@@ -1,353 +0,0 @@
-/**
- * @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

@@ -1,333 +0,0 @@
-/**
- * @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'
-})