@neko-os/ui 0.0.13 → 0.2.0

package/src/components/animations/AnimatedTopBar.native.js

@@ -0,0 +1,34 @@
+import Animated, { useAnimatedStyle, useSharedValue, useAnimatedReaction, withTiming } from 'react-native-reanimated'
+
+import { TopBar } from '../structure'
+import { useReanimatedScroll } from './ReanimatedScrollHandler'
+import { useSafeAreaInsets } from '../../abstractions/helpers/useSafeAreaInsets'
+
+export function AnimatedTopBar({ showAfter = 90, duration = 300, fade = true, slide, ...props }) {
+  const { scrollY } = useReanimatedScroll()
+  const { top: safeTop } = useSafeAreaInsets()
+
+  const visibility = useSharedValue(0)
+
+  useAnimatedReaction(
+    () => scrollY.value >= showAfter - safeTop,
+    (shouldShow, prev) => {
+      if (shouldShow !== prev) {
+        visibility.value = withTiming(shouldShow ? 1 : 0, { duration })
+      }
+    }
+  )
+
+  const animatedStyle = useAnimatedStyle(() => {
+    const style = {}
+    if (fade) style.opacity = visibility.value
+    if (slide) style.transform = [{ translateY: (1 - visibility.value) * (-50 - safeTop) }]
+    return style
+  })
+
+  return (
+    <Animated.View style={[{ position: 'absolute', top: 0, left: 0, right: 0, zIndex: 90 }, animatedStyle]}>
+      <TopBar {...props} />
+    </Animated.View>
+  )
+}

package/src/components/animations/AnimatedTopBar.web.js

@@ -0,0 +1 @@
+export { AnimatedTopBar } from './AnimatedTopBar.native'

package/src/components/animations/ParallaxHeader.js

@@ -0,0 +1,9 @@
+import { AnimatedView } from './AnimatedView'
+
+export function ParallaxHeader({ children, height = 200, ...props }) {
+  return (
+    <AnimatedView height={height} fade {...props}>
+      {children}
+    </AnimatedView>
+  )
+}

package/src/components/animations/ParallaxHeader.native.js

@@ -0,0 +1,32 @@
+import Animated, { useAnimatedStyle, interpolate, Extrapolation } from 'react-native-reanimated'
+
+import { useReanimatedScroll } from './ReanimatedScrollHandler'
+
+const SCALE_FACTOR = 2
+
+export function ParallaxHeader({ children, height = 200, parallaxSpeed = 0.5, disableResistence }) {
+  const { scrollY } = useReanimatedScroll()
+
+  const imageStyle = useAnimatedStyle(() => {
+    const scale = scrollY.value < 0 ? 1 + (Math.abs(scrollY.value) / height) * SCALE_FACTOR : 1
+    const translateY =
+      scrollY.value < 0 ? 0 : interpolate(scrollY.value, [0, height], [0, height * parallaxSpeed], Extrapolation.CLAMP)
+    return { transform: [{ translateY }, { scale }] }
+  })
+
+  const containerStyle = useAnimatedStyle(() => {
+    let calcHeight = height
+    if (disableResistence) calcHeight = scrollY.value < 0 ? height + Math.abs(scrollY.value) : height
+    return {
+      height: calcHeight,
+      overflow: scrollY.value < 0 ? 'visible' : 'hidden',
+      zIndex: -1,
+    }
+  })
+
+  return (
+    <Animated.View style={containerStyle}>
+      <Animated.View style={imageStyle}>{children}</Animated.View>
+    </Animated.View>
+  )
+}

package/src/components/animations/ParallaxHeader.web.js

@@ -0,0 +1,32 @@
+import Animated, { useAnimatedStyle, interpolate, Extrapolation } from 'react-native-reanimated'
+
+import { useReanimatedScroll } from './ReanimatedScrollHandler'
+
+const SCALE_FACTOR = 2
+
+export function ParallaxHeader({ children, height = 200, parallaxSpeed = 0.5, disableResistence }) {
+  const { scrollY } = useReanimatedScroll()
+
+  const imageStyle = useAnimatedStyle(() => {
+    const scale = scrollY.value < 0 ? 1 + (Math.abs(scrollY.value) / height) * SCALE_FACTOR : 1
+    const translateY =
+      scrollY.value < 0 ? 0 : interpolate(scrollY.value, [0, height], [0, height * parallaxSpeed], Extrapolation.CLAMP)
+    return { transform: [{ translateY }, { scale }] }
+  })
+
+  const containerStyle = useAnimatedStyle(() => {
+    let calcHeight = height
+    if (disableResistence) calcHeight = scrollY.value < 0 ? height + Math.abs(scrollY.value) : height
+    return {
+      height: calcHeight,
+      overflow: scrollY.value < 0 ? 'visible' : 'hidden',
+      zIndex: -1,
+    }
+  })
+
+  return (
+    <Animated.View style={containerStyle}>
+      <Animated.View style={imageStyle}>{children}</Animated.View>
+    </Animated.View>
+  )
+}

package/src/components/animations/ReanimatedScrollHandler.js

@@ -0,0 +1,8 @@
+export function useReanimatedScroll() {
+  if (!context) console.error('useReanimatedScroll its not supported for neko web')
+  return null
+}
+
+export function ReanimatedScrollHandler({ children }) {
+  return children
+}

package/src/components/animations/ReanimatedScrollHandler.native.js

@@ -0,0 +1,24 @@
+import { createContext, useContext, useMemo } from 'react'
+import { useSharedValue, useAnimatedScrollHandler } from 'react-native-reanimated'
+
+const ReanimatedScrollContext = createContext(null)
+
+export function useReanimatedScroll() {
+  const context = useContext(ReanimatedScrollContext)
+  if (!context) throw new Error('useReanimatedScroll must be used within ReanimatedScrollHandler')
+  return context
+}
+
+export function ReanimatedScrollHandler({ children }) {
+  const scrollY = useSharedValue(0)
+
+  const scrollHandler = useAnimatedScrollHandler({
+    onScroll: (event) => {
+      scrollY.value = event.contentOffset.y
+    },
+  })
+
+  const value = useMemo(() => ({ scrollY, scrollHandler }), [])
+
+  return <ReanimatedScrollContext.Provider value={value}>{children}</ReanimatedScrollContext.Provider>
+}

package/src/components/animations/ReanimatedScrollHandler.web.js

@@ -0,0 +1 @@
+export { ReanimatedScrollHandler, useReanimatedScroll } from './ReanimatedScrollHandler.native'

package/src/components/animations/index.js

@@ -1,2 +1,5 @@
 export * from './AnimatedView'
 export * from './DraggableSlideView'
+export * from './ReanimatedScrollHandler'
+export * from './AnimatedTopBar'
+export * from './ParallaxHeader'

package/src/components/feedback/alerter.js

@@ -2,7 +2,7 @@ import { is } from 'ramda'
 
 import { Button } from '../actions'
 import { Result } from '../presentation'
-import { useModalOpener } from '../structure/modal'
+import { useModalOpener } from '../modals/modal'
 
 export function useAlerter() {
   const { open } = useModalOpener()

package/src/components/feedback/confirmer.js

@@ -5,7 +5,7 @@ import { Button } from '../actions'
 import { RESULT_TYPES } from '../presentation/Result'
 import { Result } from '../presentation'
 import { View } from '../structure/View'
-import { useModalOpener } from '../structure/modal'
+import { useModalOpener } from '../modals/modal'
 
 function Footer({ cancelLabel, confirmLabel, onConfirm, type, onClose }) {
   const [loading, setLoading] = React.useState(false)

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))
+  )
+}