@neko-os/ui 0.0.13 → 0.1.0

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

package/src/components/inputs/Select.js

@@ -1,3 +1,4 @@
+import { dissoc } from 'ramda'
 import React from 'react'
 
 import { Icon, IconLabel } from '../presentation'
@@ -38,6 +39,7 @@ export function Select({
   pickerProps,
   popoverProps,
   popoverMaxHeight,
+  snapPoints,
   ...props
 }) {
   const [focus, setFocus] = React.useState(false)
@@ -52,7 +54,17 @@ export function Select({
   onEndReached = onEndReached || pickerProps?.onEndReached
   renderFooter = renderFooter || pickerProps?.renderFooter
   renderHeader = renderHeader || pickerProps?.renderHeader
-  pickerProps = { ...pickerProps, labelKey, valueKey, useRawOption, multiple, onEndReached, renderFooter, renderHeader }
+  pickerProps = {
+    ...pickerProps,
+
+    labelKey,
+    valueKey,
+    useRawOption,
+    multiple,
+    onEndReached,
+    renderFooter,
+    renderHeader,
+  }
 
   popoverMaxHeight = popoverMaxHeight || 300
 
@@ -93,7 +105,10 @@ export function Select({
   const finalRenderOption = React.useCallback(
     (params) => {
       if (!!renderOption) return renderOption(params)
-      const { option, labelKey, selected } = params
+      let { option, labelKey, selected } = params
+      if (option?.id) option = dissoc('id', option)
+      if (option?.color) option = { ...option, color: undefined, iconColor: option.color }
+
       return <IconLabel {...option} label={option?.[labelKey]} flex strong={selected} />
     },
     [renderOption]
@@ -103,7 +118,7 @@ export function Select({
     <Popover
       trigger="click"
       placement={placement || 'bottomLeft'}
-      snapPoints={[450]}
+      snapPoints={snapPoints || [450]}
       useBottomDrawer={useBottomDrawer}
       parentWidth
       padding={0}
@@ -112,17 +127,6 @@ export function Select({
       maxHeight={popoverMaxHeight}
       {...popoverProps}
       renderContent={({ onClose }) => (
-        <>
-          {useBottomDrawer && useSearch && (
-            <View padding="md" paddingB="xs">
-              <TextInput
-                prefixIcon="search-line"
-                prefixIconColor="text4"
-                value={search}
-                onChange={handleChangeSearch}
-              />
-            </View>
-          )}
           <Picker
             row={false}
             options={searchOptions(options, search, { labelKey })}
@@ -137,6 +141,19 @@ export function Select({
               if (!multiple) onClose()
             }}
             {...pickerProps}
+            renderHeader={useBottomDrawer && useSearch ? () => (
+              <>
+                <View padding="md" paddingB="xs">
+                  <TextInput
+                    prefixIcon="search-line"
+                    prefixIconColor="text4"
+                    value={search}
+                    onChange={handleChangeSearch}
+                  />
+                </View>
+                {renderHeader?.()}
+              </>
+            ) : renderHeader}
             renderOption={({ option, selected, onChange }) => (
               <Link
                 row
@@ -156,7 +173,6 @@ export function Select({
               </Link>
             )}
           />
-        </>
       )}
     >
       <Input

package/src/components/presentation/Avatar.js

@@ -54,7 +54,7 @@ export function Avatar(rootProps) {
     useOverflowModifier
   )([{}, rootProps])
 
-  let { initials, name, icon, src, invert, textProps, iconProps, ...props } = formattedProps
+  let { initials, name, icon, src, invert, textProps, iconProps, iconSize, ...props } = formattedProps
   initials = initials || getInitials(name)
 
   let content = (
@@ -66,7 +66,7 @@ export function Avatar(rootProps) {
       icon={icon}
       invert={invert}
       textProps={{ strong: true, ...textProps }}
-      iconProps={iconProps}
+      iconProps={{ size: iconSize, ...iconProps }}
     />
   )
   if (!!src) content = <Image br={0} src={src} width={sizeCode} height={sizeCode} />

package/src/components/presentation/AvatarLabel.js

@@ -26,6 +26,7 @@ export function AvatarLabel(rootProps) {
     avatarProps,
     moveAvatarSizeScale,
     avatarSize,
+    iconSize,
     ...props
   } = formattedProps
   const hasAvatar = !!name || !!initials || !!src
@@ -47,6 +48,7 @@ export function AvatarLabel(rootProps) {
           dynamicColor={dynamicColor}
           square={square}
           marginH={2}
+          iconSize={iconSize}
           {...avatarProps}
         />
       }

package/src/components/presentation/LabelValue.js

@@ -4,11 +4,12 @@ import { IconLabel } from './IconLabel'
 import { Text } from '../text/Text'
 import { View } from '../structure/View'
 import { moveScale } from '../../theme/helpers/sizeScale'
+import { useColorConverter } from '../../modifiers/colorConverter'
 import { useDefaultModifier } from '../../modifiers/default'
 import { useSizeConverter } from '../../modifiers/sizeConverter'
 import { useThemeComponentModifier } from '../../modifiers/themeComponent'
 
-const DEFAULT_PROPS = ([{ sizeCode }, { vertical, spread }]) => {
+const DEFAULT_PROPS = ([{ sizeCode, color }, { vertical, spread }]) => {
   return {
     row: !vertical,
     centerV: !vertical,
@@ -17,7 +18,7 @@ const DEFAULT_PROPS = ([{ sizeCode }, { vertical, spread }]) => {
     labelProps: {
       size: moveScale(sizeCode, !vertical ? 0 : -2),
       moveIconSizeScale: !vertical ? -1 : -2,
-      color: 'text3',
+      color: color || 'text3',
     },
     valueProps: {
       size: sizeCode,
@@ -28,17 +29,18 @@ const DEFAULT_PROPS = ([{ sizeCode }, { vertical, spread }]) => {
 
 export function LabelValue({ children, ...rootProps }) {
   const [{ sizeCode, color }, formattedProps] = pipe(
-    // useColorConverter(),
+    useColorConverter(),
     useSizeConverter('elementHeights', 'md'),
     useThemeComponentModifier('Labelvalue'), //
     useDefaultModifier(DEFAULT_PROPS)
   )([{}, rootProps])
 
-  const { icon, label, iconColor, labelProps, value, valueProps, vertical, spread, ...props } = formattedProps
+  const { icon, label, iconColor, labelProps, value, valueColor, valueProps, vertical, spread, ...props } =
+    formattedProps
   let separator = !vertical && !spread ? ':' : ''
 
   let content = children || value
-  if (is(String, value)) content = <Text label={value} {...valueProps} />
+  if (is(String, value)) content = <Text label={value} color={valueColor || color} {...valueProps} />
 
   return (
     <View className="neko-label-value" {...props}>

package/src/components/presentation/Result.js

@@ -46,11 +46,11 @@ export function Result({
     <View className="neko-result" center padding="lg" {...props}>
       {!!icon && <Icon name={icon} color={iconColor} size={42} primary {...iconProps} />}
       {!!icon && <Divider height={10} />}
-      <Text h4 {...textProps} {...titleProps}>
+      <Text h4 center {...textProps} {...titleProps}>
         {title}
       </Text>
       {!!description && (
-        <Text text3 sm marginT="sm" {...textProps} {...descriptionProps}>
+        <Text text3 sm marginT="sm" center {...textProps} {...descriptionProps}>
           {description}
         </Text>
       )}