@neko-os/ui 0.0.12 → 0.1.0

package/src/components/form/FormItem.js

@@ -5,38 +5,75 @@ import { Text } from '../text/Text'
 import { View } from '../structure/View'
 import { clearProps } from '../../modifiers/_helpers'
 import { useFormInstance, useFormState } from './Form'
+import { shouldValidateOn } from './validation'
 
-export function FormItem({ name, label, isAbsolutePath, children, useDefaultValue, ...props }) {
+export function FormItem({
+  name,
+  label,
+  isAbsolutePath,
+  children,
+  useDefaultValue,
+  rules,
+  validateTrigger = 'onSubmit',
+  ...props
+}) {
   const form = useFormInstance()
   const formState = useFormState()
   const listPath = useRelativePath(name, { isAbsolutePath })
+  const listPathStr = listPath.join('$NEKOJOIN$')
   const [value, setValue] = React.useState(form.getFieldValue(listPath))
-  const error = form.getError(listPath)
+  const [error, setError] = React.useState(form.getError(listPath))
 
+  // Register rules with the form
+  React.useEffect(() => {
+    return form.registerRules(listPath, rules, validateTrigger)
+  }, [listPathStr, JSON.stringify(rules), validateTrigger])
+
+  // Listen for value changes
   React.useEffect(() => {
     return form.registerListener(listPath, (val) => setValue(val))
-  }, [listPath.join('$NEKOJOIN$')])
+  }, [listPathStr])
+
+  // Listen for error changes
+  React.useEffect(() => {
+    return form.registerErrorListener(listPath, (err) => setError(err))
+  }, [listPathStr])
 
   const handleChange = (e) => {
     const val = e?.target?.value ?? e
     form.setFieldValue(listPath, val)
+
+    if (shouldValidateOn('onChange', rules, validateTrigger)) {
+      form.validateField(listPath, 'onChange')
+    }
+  }
+
+  const handleBlur = (e, originalOnBlur) => {
+    if (originalOnBlur) originalOnBlur(e)
+
+    if (shouldValidateOn('onBlur', rules, validateTrigger)) {
+      form.validateField(listPath, 'onBlur')
+    }
   }
 
   let valueKey = 'value'
   if (!!useDefaultValue) valueKey = 'defaultValue'
 
+  const child = typeof children === 'function' ? null : React.Children.only(children)
+  const originalOnBlur = child?.props?.onBlur
+
   const childProps = clearProps({
     [valueKey]: value === undefined ? '' : value,
     onChange: handleChange,
-    // loading: formState?.loading === true || undefined,
+    onBlur: (e) => handleBlur(e, originalOnBlur),
     disabled: formState?.disabled === true || undefined,
+    error: !!error || undefined,
   })
 
   let content
   if (typeof children === 'function') {
     content = children(childProps)
   } else {
-    const child = React.Children.only(children)
     content = React.cloneElement(child, { ...child.props, ...childProps })
   }
 

package/src/components/form/FormList.js

@@ -3,22 +3,32 @@ import React from 'react'
 import { FormGroup, useRelativePath } from './FormGroup'
 import { Text } from '../text/Text'
 import { useFormInstance } from './Form'
+import { shouldValidateOn } from './validation'
 
 const FormListContext = React.createContext(null)
 const useFormList = () => React.useContext(FormListContext)
 
-export function FormList({ name, isAbsolutePath, children }) {
+export function FormList({ name, isAbsolutePath, children, rules, validateTrigger = 'onSubmit' }) {
   const form = useFormInstance()
   const listPath = useRelativePath(name, { isAbsolutePath })
-  // To avoid watch being recalled
   const listPathStr = listPath.join('$NEKOJOIN$')
-  const error = form.getError(listPath)
+  const [error, setError] = React.useState(form.getError(listPath))
 
   // Counter to generate unique keys
   const keyCounter = React.useRef(0)
   // Map to track keys by value reference
   const keysMap = React.useRef(new WeakMap())
 
+  // Register rules with the form
+  React.useEffect(() => {
+    return form.registerRules(listPath, rules, validateTrigger)
+  }, [listPathStr, JSON.stringify(rules), validateTrigger])
+
+  // Listen for error changes
+  React.useEffect(() => {
+    return form.registerErrorListener(listPath, (err) => setError(err))
+  }, [listPathStr])
+
   const generateFields = (items) => {
     if (!Array.isArray(items)) return []
     return items.map((item, index) => {
@@ -47,14 +57,22 @@ export function FormList({ name, isAbsolutePath, children }) {
     })
   }, [listPathStr])
 
+  const validateOnChange = () => {
+    if (shouldValidateOn('onChange', rules, validateTrigger)) {
+      form.validateField(listPath, 'onChange')
+    }
+  }
+
   const add = (defaultValue = {}) => {
     const current = form.getFieldValue(listPath) || []
     form.setFieldValue(listPath, [...current, defaultValue])
+    validateOnChange()
   }
 
   const addOn = (index, defaultValue = {}) => {
     const current = form.getFieldValue(listPath) || []
     form.setFieldValue(listPath, [...current.slice(0, index), defaultValue, ...current.slice(index)])
+    validateOnChange()
   }
 
   const replace = (index, value) => {
@@ -91,6 +109,7 @@ export function FormList({ name, isAbsolutePath, children }) {
       listPath,
       current.filter((_, i) => i !== index)
     )
+    validateOnChange()
   }
 
   const actions = React.useMemo(
@@ -102,7 +121,7 @@ export function FormList({ name, isAbsolutePath, children }) {
       move,
       duplicate,
     }),
-    [listPathStr]
+    [listPathStr, rules, validateTrigger]
   )
 
   let content

package/src/components/form/SubmitButton.js

@@ -1,12 +1,14 @@
 import { Button } from '../actions/Button'
 import { useFormInstance, useFormState } from './Form'
 
-export function SubmitButton({ form, disabled, ...props }) {
+export function SubmitButton({ form, disabled, Wrapper, ...props }) {
   const formState = useFormState()
   const contextForm = useFormInstance()
   form = form || contextForm
   disabled = formState?.disabled || disabled
 
+  Wrapper = Wrapper || Button
+
   const handleSubmit = () => {
     if (!form) {
       console.error('No form provided to useWatch. Pass it as params or wrap it inside a <Form> component.')
@@ -16,5 +18,5 @@ export function SubmitButton({ form, disabled, ...props }) {
     form.handleSubmit()
   }
 
-  return <Button {...props} disabled={disabled} onPress={handleSubmit} />
+  return <Wrapper {...props} disabled={disabled} onPress={handleSubmit} />
 }

package/src/components/form/index.js

@@ -6,3 +6,4 @@ export * from './FormGroup'
 export * from './useNewForm'
 export * from './useWatch'
 export * from './SubmitButton'
+export * from './validation'

package/src/components/form/useNewForm.js

@@ -1,34 +1,61 @@
 import { assocPath, path } from 'ramda'
 import React from 'react'
+import { validateRules, validateAllFields, normalizeRules } from './validation'
 
 export function useNewForm({ initialValues = {}, validate, onSubmit } = {}) {
   const valuesRef = React.useRef({ ...initialValues })
-  const errorsRef = React.useRef({})
+  const errorsRef = React.useRef({}) // Flat structure: { 'users': 'error', 'users.0.name': 'error' }
   const listenersRef = React.useRef({})
+  const errorListenersRef = React.useRef({})
+  const rulesRegistryRef = React.useRef(new Map())
 
   const formApi = React.useMemo(() => {
+    const toKey = (name) => (Array.isArray(name) ? name.join('.') : name)
+    const toPath = (name) => (Array.isArray(name) ? name : [name])
+
     const notify = (name) => {
-      const key = Array.isArray(name) ? name.join('.') : name
+      const key = toKey(name)
       if (listenersRef.current[key]) {
-        listenersRef.current[key].forEach((cb) => cb(path(name, valuesRef.current)))
+        listenersRef.current[key].forEach((cb) => cb(path(toPath(name), valuesRef.current)))
+      }
+    }
+
+    const notifyError = (name) => {
+      const key = toKey(name)
+      if (errorListenersRef.current[key]) {
+        errorListenersRef.current[key].forEach((cb) => cb(errorsRef.current[key]))
       }
     }
 
     const setFieldValue = (name, value) => {
-      valuesRef.current = assocPath(name, value, valuesRef.current)
+      valuesRef.current = assocPath(toPath(name), value, valuesRef.current)
       notify(name)
     }
 
-    const getFieldValue = (name) => path(name, valuesRef.current)
+    const getFieldValue = (name) => path(toPath(name), valuesRef.current)
 
-    const getError = (name) => path(name, errorsRef.current)
+    // Flat error lookup by key
+    const getError = (name) => {
+      const key = toKey(name)
+      return errorsRef.current[key]
+    }
 
     const setError = (name, error) => {
-      errorsRef.current = assocPath(name, error, errorsRef.current)
+      const key = toKey(name)
+      if (error) {
+        errorsRef.current[key] = error
+      } else {
+        delete errorsRef.current[key]
+      }
+      notifyError(name)
+    }
+
+    const clearErrors = () => {
+      errorsRef.current = {}
     }
 
     const registerListener = (name, cb) => {
-      const key = Array.isArray(name) ? name.join('.') : name
+      const key = toKey(name)
       if (!listenersRef.current[key]) {
         listenersRef.current[key] = []
       }
@@ -38,15 +65,77 @@ export function useNewForm({ initialValues = {}, validate, onSubmit } = {}) {
       }
     }
 
-    const validateForm = () => {
-      if (!validate) return true
-      const newErrors = validate(valuesRef.current) || {}
-      errorsRef.current = newErrors
-      return Object.keys(newErrors).length === 0
+    const registerErrorListener = (name, cb) => {
+      const key = toKey(name)
+      if (!errorListenersRef.current[key]) {
+        errorListenersRef.current[key] = []
+      }
+      errorListenersRef.current[key].push(cb)
+      return () => {
+        errorListenersRef.current[key] = errorListenersRef.current[key].filter((fn) => fn !== cb)
+      }
+    }
+
+    const registerRules = (name, rules, defaultTrigger = 'onSubmit') => {
+      if (!rules) return
+      const key = toKey(name)
+      const rulesArray = normalizeRules(rules).map((rule) => ({
+        ...rule,
+        trigger: rule.trigger || defaultTrigger,
+      }))
+      rulesRegistryRef.current.set(key, { path: name, rules: rulesArray })
+      return () => rulesRegistryRef.current.delete(key)
+    }
+
+    const validateField = async (name, trigger = 'onSubmit') => {
+      const key = toKey(name)
+      const entry = rulesRegistryRef.current.get(key)
+      if (!entry) return null
+
+      const value = path(name, valuesRef.current)
+      const error = await validateRules(value, entry.rules, trigger)
+
+      if (error) {
+        errorsRef.current[key] = error
+      } else {
+        delete errorsRef.current[key]
+      }
+      notifyError(name)
+      return error
+    }
+
+    const validateForm = async () => {
+      // Clear previous errors
+      errorsRef.current = {}
+
+      // Run rules-based validation
+      const rulesErrors = await validateAllFields(valuesRef.current, rulesRegistryRef.current)
+
+      // Run legacy validate function if provided
+      const legacyErrors = validate ? validate(valuesRef.current) || {} : {}
+
+      // Store errors in flat structure
+      Object.entries(rulesErrors).forEach(([key, error]) => {
+        errorsRef.current[key] = error
+      })
+
+      // Legacy errors are already flat (or should be converted)
+      Object.entries(legacyErrors).forEach(([key, error]) => {
+        if (!errorsRef.current[key]) {
+          errorsRef.current[key] = error
+        }
+      })
+
+      // Notify all error listeners
+      rulesRegistryRef.current.forEach((_, key) => {
+        notifyError(key)
+      })
+
+      return Object.keys(errorsRef.current).length === 0
     }
 
-    const handleSubmit = () => {
-      const isValid = validateForm()
+    const handleSubmit = async () => {
+      const isValid = await validateForm()
       if (!isValid) return
       console.log('SUBMIT')
       onSubmit(valuesRef.current)
@@ -57,7 +146,11 @@ export function useNewForm({ initialValues = {}, validate, onSubmit } = {}) {
       getFieldValue,
       getError,
       setError,
+      clearErrors,
       registerListener,
+      registerErrorListener,
+      registerRules,
+      validateField,
       handleSubmit,
       valuesRef,
     }

package/src/components/form/validation/defaultMessages.js

@@ -0,0 +1,20 @@
+export const defaultMessages = {
+  required: 'This field is required',
+  type: {
+    email: 'Please enter a valid email address',
+    url: 'Please enter a valid URL',
+    number: 'Please enter a valid number',
+    integer: 'Please enter a valid integer',
+  },
+  min: {
+    string: (min) => `Must be at least ${min} characters`,
+    number: (min) => `Must be at least ${min}`,
+    array: (min) => `Must have at least ${min} items`,
+  },
+  max: {
+    string: (max) => `Must be at most ${max} characters`,
+    number: (max) => `Must be at most ${max}`,
+    array: (max) => `Must have at most ${max} items`,
+  },
+  pattern: 'Invalid format',
+}

package/src/components/form/validation/index.js

@@ -0,0 +1,5 @@
+export { defaultMessages } from './defaultMessages'
+export { validators } from './validators'
+export { validateRules, validateAllFields } from './validateRules'
+export { normalizeRules } from './normalizeRules'
+export { shouldValidateOn } from './shouldValidateOn'

package/src/components/form/validation/normalizeRules.js

@@ -0,0 +1,22 @@
+/**
+ * Normalizes rules to array format.
+ * Accepts either array format or object shorthand.
+ *
+ * Array format (full control):
+ *   [{ required: true, message: 'Required' }, { min: 2 }]
+ *
+ * Object shorthand (simple cases):
+ *   { required: true, min: 2, max: 7, type: 'email' }
+ *   -> converts to: [{ required: true }, { min: 2 }, { max: 7 }, { type: 'email' }]
+ *
+ * @param {Array|Object} rules
+ * @returns {Array}
+ */
+export function normalizeRules(rules) {
+  if (!rules) return []
+  if (Array.isArray(rules)) return rules
+  if (typeof rules === 'object') {
+    return Object.entries(rules).map(([key, value]) => ({ [key]: value }))
+  }
+  return []
+}

package/src/components/form/validation/shouldValidateOn.js

@@ -0,0 +1,21 @@
+import { normalizeRules } from './normalizeRules'
+
+/**
+ * Checks if validation should run for a given trigger.
+ * @param {string} trigger - The trigger to check ('onChange', 'onBlur', 'onSubmit')
+ * @param {Array|Object} rules - The rules (array or object format)
+ * @param {string|string[]} validateTrigger - The default trigger(s) for the field
+ * @returns {boolean}
+ */
+export function shouldValidateOn(trigger, rules, validateTrigger = 'onSubmit') {
+  if (!rules) return false
+
+  const triggers = Array.isArray(validateTrigger) ? validateTrigger : [validateTrigger]
+  if (triggers.includes(trigger)) return true
+
+  // Check per-rule triggers
+  const rulesArray = normalizeRules(rules)
+  return rulesArray.some(
+    (rule) => rule.trigger === trigger || (Array.isArray(rule.trigger) && rule.trigger.includes(trigger))
+  )
+}

package/src/components/form/validation/validateRules.js

@@ -0,0 +1,83 @@
+import { path as getPath } from 'ramda'
+import { validators } from './validators'
+
+/**
+ * Validates a value against an array of rules
+ * @param {any} value - The value to validate
+ * @param {Array} rules - Array of rule objects
+ * @param {string} trigger - Current validation trigger ('onSubmit', 'onBlur', 'onChange')
+ * @returns {Promise<string|null>} - First error message or null if valid
+ */
+export async function validateRules(value, rules, trigger = 'onSubmit') {
+  if (!rules || rules.length === 0) return null
+
+  for (const rule of rules) {
+    const ruleTrigger = rule.trigger || 'onSubmit'
+    const triggers = Array.isArray(ruleTrigger) ? ruleTrigger : [ruleTrigger]
+
+    // Always run on submit, otherwise check trigger match
+    if (trigger !== 'onSubmit' && !triggers.includes(trigger)) {
+      continue
+    }
+
+    let error = null
+
+    // Custom validator takes precedence
+    if (rule.validator) {
+      try {
+        await rule.validator(rule, value)
+      } catch (e) {
+        error = e.message || rule.message || 'Validation failed'
+      }
+    } else {
+      // Run built-in validators
+      if (rule.required) {
+        error = validators.required(value, rule)
+      }
+      if (!error && rule.type) {
+        error = validators.type(value, rule)
+      }
+      if (!error && rule.min !== undefined) {
+        error = validators.min(value, rule)
+      }
+      if (!error && rule.max !== undefined) {
+        error = validators.max(value, rule)
+      }
+      if (!error && rule.pattern) {
+        error = validators.pattern(value, rule)
+      }
+    }
+
+    if (error) {
+      return error
+    }
+  }
+
+  return null
+}
+
+/**
+ * Validates multiple fields at once (for form-level validation)
+ * @param {Object} values - All form values
+ * @param {Map} rulesRegistry - Map of field path keys to { path: array, rules: array }
+ * @returns {Promise<Object>} - Object of path key -> error message
+ */
+export async function validateAllFields(values, rulesRegistry) {
+  const errors = {}
+  const validationPromises = []
+
+  rulesRegistry.forEach(({ path, rules }, pathKey) => {
+    const value = getPath(path, values)
+
+    validationPromises.push(
+      validateRules(value, rules, 'onSubmit').then((error) => {
+        if (error) {
+          errors[pathKey] = error
+        }
+      })
+    )
+  })
+
+  await Promise.all(validationPromises)
+  return errors
+}

package/src/components/form/validation/validators.js

@@ -0,0 +1,82 @@
+import { defaultMessages } from './defaultMessages'
+
+const isEmpty = (value) => {
+  if (value === undefined || value === null) return true
+  if (typeof value === 'string' && value.trim() === '') return true
+  if (Array.isArray(value) && value.length === 0) return true
+  return false
+}
+
+export const validators = {
+  required: (value, rule) => {
+    if (isEmpty(value)) {
+      return rule.message || defaultMessages.required
+    }
+    return null
+  },
+
+  type: (value, rule) => {
+    if (isEmpty(value)) return null
+
+    const typeValidators = {
+      email: (v) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v),
+      url: (v) => {
+        try {
+          new URL(v)
+          return true
+        } catch {
+          return false
+        }
+      },
+      number: (v) => !isNaN(Number(v)),
+      integer: (v) => Number.isInteger(Number(v)) && !isNaN(Number(v)),
+    }
+
+    const validator = typeValidators[rule.type]
+    if (validator && !validator(value)) {
+      return rule.message || defaultMessages.type[rule.type] || `Invalid ${rule.type}`
+    }
+    return null
+  },
+
+  min: (value, rule) => {
+    if (isEmpty(value)) return null
+
+    if (typeof value === 'string' && value.length < rule.min) {
+      return rule.message || defaultMessages.min.string(rule.min)
+    }
+    if (typeof value === 'number' && value < rule.min) {
+      return rule.message || defaultMessages.min.number(rule.min)
+    }
+    if (Array.isArray(value) && value.length < rule.min) {
+      return rule.message || defaultMessages.min.array(rule.min)
+    }
+    return null
+  },
+
+  max: (value, rule) => {
+    if (isEmpty(value)) return null
+
+    if (typeof value === 'string' && value.length > rule.max) {
+      return rule.message || defaultMessages.max.string(rule.max)
+    }
+    if (typeof value === 'number' && value > rule.max) {
+      return rule.message || defaultMessages.max.number(rule.max)
+    }
+    if (Array.isArray(value) && value.length > rule.max) {
+      return rule.message || defaultMessages.max.array(rule.max)
+    }
+    return null
+  },
+
+  pattern: (value, rule) => {
+    if (isEmpty(value)) return null
+
+    const regex = rule.pattern instanceof RegExp ? rule.pattern : new RegExp(rule.pattern)
+
+    if (!regex.test(String(value))) {
+      return rule.message || defaultMessages.pattern
+    }
+    return null
+  },
+}

package/src/components/index.js

@@ -14,3 +14,4 @@ export * from './calendar'
 export * from './list'
 export * from './tabs'
 export * from './theme'
+export * from './sections'

package/src/components/inputs/InputWrapper.js

@@ -48,7 +48,7 @@ export function InputWrapper({
   if (!!suffix && is(String, suffix)) suffix = <Text>{suffix}</Text>
   if (!prefix && !!prefixIcon) prefix = <Icon name={prefixIcon} size={sizeCode} color={prefixIconColor} />
   if (!suffix && !!suffixIcon) suffix = <Icon name={suffixIcon} size={sizeCode} color={suffixIconColor} />
-  if (!prefix && !!error) suffix = <Icon name="close-circle-fill" size={sizeCode} red />
+  if (!prefix && !!error) suffix = <Icon name="alert-fill" size={sizeCode} red />
   if (!!loading) suffix = <Loading size={sizeCode} />
 
   let borderColor = !!hover ? 'primary_op40' : 'divider'

package/src/components/inputs/NumberInput.js

@@ -73,11 +73,11 @@ export function formatNumericValue(newValue, prevValue, options = {}) {
   return numericValue
 }
 
-export function NumberInput({ onChange, value, useInt, precision, min, max, error, ...props }) {
+export function NumberInput({ onChange, onBlur, value, useInt, precision, min, max, error, ...props }) {
   const [hasError, setHasError] = React.useState(false)
   const [inputValue, setInputValue] = React.useState(value)
   const [localValue, setLocalValue] = React.useState(value)
-  React.useEffect(() => setInputValue(value), [value])
+  React.useEffect(() => setInputValue(value?.toString() || ''), [value])
 
   if (useInt) precision = 0
   if (!useInt && precision === 0) useInt = true
@@ -85,6 +85,7 @@ export function NumberInput({ onChange, value, useInt, precision, min, max, erro
 
   return (
     <TextInput
+      {...props}
       onChange={(newValue) => {
         const numericValue = formatNumericValue(newValue, localValue, opts)
         setInputValue(newValue?.toString() || '')
@@ -92,14 +93,14 @@ export function NumberInput({ onChange, value, useInt, precision, min, max, erro
         onChange?.(numericValue)
         setHasError(!isValidNumber(newValue, opts))
       }}
-      onBlur={() => {
-        setInputValue(localValue)
+      onBlur={(e) => {
+        setInputValue(localValue?.toString() || '')
         setHasError(!isValidNumber(localValue, opts))
+        onBlur?.(e)
       }}
       value={inputValue}
       keyboardType={useInt ? 'number-pad' : 'decimal-pad'}
       error={error || hasError}
-      {...props}
     />
   )
 }

package/src/components/inputs/Picker.js

@@ -2,9 +2,10 @@ import { is } from 'ramda'
 import React from 'react'
 
 import { Col } from '../structure/Col'
-import { FlatList } from '../list/FlatList'
+import { DrawerFlatList } from '../structure/bottomDrawer'
 import { LoadingView } from '../state/LoadingView'
 import { Row } from '../structure/Row'
+import { View } from '../structure'
 import { normalizeString } from '../../helpers/string'
 import { useOptions } from '../../helpers/options'
 
@@ -94,7 +95,7 @@ function DefaultPickerWrapper({ renderItem, options, ...props }) {
 
 function FlatListPickerWrapper({ renderItem, options, valueKey, ...props }) {
   return (
-    <FlatList
+    <DrawerFlatList
       keyExtractor={(i) => i[valueKey]}
       data={options}
       divider