@neko-os/ui 0.0.13 → 0.2.0

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

@@ -3,6 +3,7 @@ export * from './animations'
 export * from './form'
 export * from './presentation'
 export * from './structure'
+export * from './modals'
 export * from './text'
 export * from './helpers'
 export * from './inputs'
@@ -14,3 +15,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 '../modals/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/modals/bottomDrawer/index.js

@@ -0,0 +1,3 @@
+export { BottomDrawer } from './web/BottomDrawer'
+export { ScrollView as DrawerScrollView } from '../../list/ScrollView'
+export { FlatList as DrawerFlatList } from '../../list/FlatList'

package/src/components/{structure → modals}/bottomDrawer/index.native.js

@@ -1,4 +1,5 @@
 export { BottomDrawer } from './native/BottomDrawer'
-export { DrawerScrollView } from './native/DrawerScrollView'
+export { DrawerScrollView, DrawerFlatList } from './native/DrawerScrollView'
+export { createDrawerScrollComponent } from './native/createDrawerScrollComponent'
 export { DrawerHandle } from './native/DrawerHandle'
 export { DrawerProvider, useDrawerContext } from './native/DrawerContext'

package/src/components/{structure → modals}/bottomDrawer/index.web.js

@@ -1,4 +1,5 @@
 export { BottomDrawer } from './native/BottomDrawer'
-export { DrawerScrollView } from './native/DrawerScrollView'
+export { DrawerScrollView, DrawerFlatList } from './native/DrawerScrollView'
+export { createDrawerScrollComponent } from './native/createDrawerScrollComponent'
 export { DrawerHandle } from './native/DrawerHandle'
 export { DrawerProvider, useDrawerContext } from './native/DrawerContext'

package/src/components/{structure → modals}/bottomDrawer/native/BottomDrawer.js

@@ -6,14 +6,13 @@ import Animated, {
   useAnimatedStyle,
   withSpring,
   runOnJS,
-  useAnimatedReaction,
 } from 'react-native-reanimated'
 import React from 'react'
 
 import { DrawerHandle } from './DrawerHandle'
 import { DrawerProvider } from './DrawerContext'
 import { Pressable } from '../../../actions/Pressable'
-import { View } from '../../View'
+import { View } from '../../../structure/View'
 import { normalizeSnapPoints, findClosestSnapPoint } from './utils'
 import { useColors } from '../../../../theme/ThemeHandler'
 
@@ -47,9 +46,6 @@ function InnerContent({
   const colors = useColors()
 
   const translateY = useSharedValue(SCREEN_HEIGHT)
-  const scrollOffset = useSharedValue(0)
-  const scrollEnabled = useSharedValue(false)
-  const isScrolling = useSharedValue(false)
   const snapIndex = useSharedValue(0)
   const velocityY = useSharedValue(0)
 
@@ -67,8 +63,6 @@ function InnerContent({
       snapIndex.value = 0
     } else {
       translateY.value = withSpring(SCREEN_HEIGHT, animationConfig, () => {
-        scrollOffset.value = 0
-        scrollEnabled.value = false
         runOnJS(setRender)(false)
       })
       snapIndex.value = -1
@@ -84,15 +78,6 @@ function InnerContent({
     return () => backHandler.remove()
   }, [open, onClose])
 
-  useAnimatedReaction(
-    () => translateY.value,
-    (currentY) => {
-      const atMaxSnapPoint = currentY <= SCREEN_HEIGHT - maxSnapPoint
-      scrollEnabled.value = atMaxSnapPoint
-    },
-    []
-  )
-
   let handleClose = React.useCallback(() => {
     onClose?.()
   }, [onClose])
@@ -112,9 +97,11 @@ function InnerContent({
 
   // contexto manual para gesto
   const gestureStartTranslateY = useSharedValue(0)
+  const panRef = React.useRef()
 
   const panGesture = React.useMemo(() => {
     return Gesture.Pan()
+      .withRef(panRef)
       .enabled(enableHandlePanningGesture || enableContentPanningGesture)
       .onStart(() => {
         gestureStartTranslateY.value = translateY.value
@@ -135,7 +122,11 @@ function InnerContent({
         const currentPosition = SCREEN_HEIGHT - translateY.value
         const shouldClose =
           !!handleClose &&
-          ((velocityY.value > 2000 && currentPosition < minSnapPoint * 0.75) || currentPosition < minSnapPoint * 0.25)
+          (
+            velocityY.value > 1500 ||
+            (velocityY.value > 800 && currentPosition < minSnapPoint) ||
+            currentPosition < minSnapPoint * 0.35
+          )
 
         if (shouldClose) {
           runOnJS(handleClose)()
@@ -168,15 +159,18 @@ function InnerContent({
   const contextValue = React.useMemo(
     () => ({
       translateY,
-      scrollOffset,
-      scrollEnabled,
-      isScrolling,
       snapIndex,
       maxSnapPoint,
       snapTo,
       animationConfig,
+      panRef,
+      normalizedSnapPoints,
+      SCREEN_HEIGHT,
+      minSnapPoint,
+      handleClose,
+      velocityY,
     }),
-    [maxSnapPoint]
+    [maxSnapPoint, normalizedSnapPoints, SCREEN_HEIGHT, minSnapPoint, handleClose]
   )
 
   return (

package/src/components/{structure → modals}/bottomDrawer/native/DrawerHandle.js

@@ -1,5 +1,5 @@
 import { Divider } from '../../../helpers/Separator'
-import { View } from '../../View'
+import { View } from '../../../structure/View'
 
 export function DrawerHandle({ hide }) {
   if (!!hide) return false

package/src/components/modals/bottomDrawer/native/DrawerScrollView.js

@@ -0,0 +1,5 @@
+import { FlatList, ScrollView } from '../../../list'
+import { createDrawerScrollComponent } from './createDrawerScrollComponent'
+
+export const DrawerScrollView = createDrawerScrollComponent(ScrollView)
+export const DrawerFlatList = createDrawerScrollComponent(FlatList)

package/src/components/modals/bottomDrawer/native/createDrawerScrollComponent.js

@@ -0,0 +1,131 @@
+import { Gesture, GestureDetector } from 'react-native-gesture-handler'
+import Animated, {
+  useSharedValue,
+  useAnimatedScrollHandler,
+  useAnimatedRef,
+  scrollTo,
+  withSpring,
+  runOnJS,
+} from 'react-native-reanimated'
+import React from 'react'
+
+import { findClosestSnapPoint, clamp } from './utils'
+import { useDrawerContext } from './DrawerContext'
+
+export function createDrawerScrollComponent(Component) {
+  const AnimatedComponent = Animated.createAnimatedComponent(Component)
+
+  function DrawerScrollComponent({ ref, onScroll, ...props }) {
+    const {
+      translateY,
+      panRef,
+      normalizedSnapPoints,
+      SCREEN_HEIGHT,
+      maxSnapPoint,
+      minSnapPoint,
+      handleClose,
+      animationConfig,
+      snapIndex,
+    } = useDrawerContext()
+
+    const scrollRef = useAnimatedRef()
+    const scrollOffset = useSharedValue(0)
+    const prevTranslationY = useSharedValue(0)
+    const drawerMoved = useSharedValue(false)
+
+    React.useImperativeHandle(ref, () => scrollRef.current)
+
+    const maxPosition = SCREEN_HEIGHT - maxSnapPoint
+
+    const panGesture = React.useMemo(() => {
+      return Gesture.Pan()
+        .activeOffsetY([-10, 10])
+        .blocksExternalGesture(panRef)
+        .onStart(() => {
+          prevTranslationY.value = 0
+          drawerMoved.value = false
+        })
+        .onUpdate((event) => {
+          const delta = event.translationY - prevTranslationY.value
+          prevTranslationY.value = event.translationY
+
+          const currentY = translateY.value
+          const atMaxSnap = currentY <= maxPosition + 1
+          const atScrollTop = scrollOffset.value <= 0
+
+          if (drawerMoved.value) {
+            const newY = clamp(currentY + delta, maxPosition, SCREEN_HEIGHT)
+            translateY.value = newY
+            scrollTo(scrollRef, 0, 0, false)
+
+            if (newY <= maxPosition + 1 && delta < 0) {
+              drawerMoved.value = false
+            }
+          } else if (!atMaxSnap) {
+            drawerMoved.value = true
+            const newY = clamp(currentY + delta, maxPosition, SCREEN_HEIGHT)
+            translateY.value = newY
+            scrollTo(scrollRef, 0, 0, false)
+          } else if (atScrollTop && delta > 0) {
+            drawerMoved.value = true
+            const newY = clamp(currentY + delta, maxPosition, SCREEN_HEIGHT)
+            translateY.value = newY
+            scrollTo(scrollRef, 0, 0, false)
+          }
+        })
+        .onEnd((event) => {
+          if (!drawerMoved.value) return
+
+          const currentPosition = SCREEN_HEIGHT - translateY.value
+          const velocity = event.velocityY
+
+          const shouldClose =
+            !!handleClose &&
+            (velocity > 1500 ||
+              (velocity > 800 && currentPosition < minSnapPoint) ||
+              currentPosition < minSnapPoint * 0.35)
+
+          if (shouldClose) {
+            runOnJS(handleClose)()
+          } else {
+            const closestSnapIndex = findClosestSnapPoint(currentPosition, normalizedSnapPoints, velocity)
+            const targetSnapPoint = normalizedSnapPoints[closestSnapIndex]
+            translateY.value = withSpring(SCREEN_HEIGHT - targetSnapPoint, animationConfig)
+            snapIndex.value = closestSnapIndex
+          }
+        })
+    }, [panRef, maxPosition, normalizedSnapPoints, minSnapPoint, handleClose, animationConfig])
+
+    const nativeGesture = React.useMemo(() => Gesture.Native(), [])
+
+    const composedGesture = React.useMemo(
+      () => Gesture.Simultaneous(panGesture, nativeGesture),
+      [panGesture, nativeGesture]
+    )
+
+    const animatedScrollHandler = useAnimatedScrollHandler({
+      onScroll: (event) => {
+        scrollOffset.value = event.contentOffset.y
+        if (onScroll) {
+          runOnJS(onScroll)(event)
+        }
+      },
+    })
+
+    return (
+      <GestureDetector gesture={composedGesture}>
+        <AnimatedComponent
+          ref={scrollRef}
+          style={{ flex: 1 }}
+          onScroll={animatedScrollHandler}
+          scrollEventThrottle={16}
+          bounces={false}
+          overScrollMode="never"
+          {...props}
+        />
+      </GestureDetector>
+    )
+  }
+
+  return DrawerScrollComponent
+}

package/src/components/modals/index.js

@@ -0,0 +1,4 @@
+export * from './modal'
+export * from './drawer'
+export * from './bottomDrawer'
+export * from './router'

package/src/components/{structure → modals}/modal/Modal.native.js

@@ -6,7 +6,7 @@ import { ModalContent } from './ModalContent'
 import { ModalFooter } from './ModalFooter'
 import { ModalHeader } from './ModalHeader'
 import { Pressable } from '../../actions/Pressable'
-import { View } from '../View'
+import { View } from '../../structure/View'
 import { useDefaultModifier } from '../../../modifiers/default'
 import { useThemeComponentModifier } from '../../../modifiers/themeComponent'
 

package/src/components/{structure → modals}/modal/ModalBackdrop.js

@@ -2,7 +2,7 @@ import { pipe } from 'ramda'
 import React from 'react'
 
 import { AnimatedView } from '../../animations/AnimatedView'
-import { SafeAreaView } from '../SafeAreaView'
+import { SafeAreaView } from '../../structure/SafeAreaView'
 import { useDefaultModifier } from '../../../modifiers/default'
 import { useThemeComponentModifier } from '../../../modifiers/themeComponent'
 

package/src/components/{structure → modals}/modal/ModalContent.js

@@ -1,6 +1,6 @@
 import { pipe } from 'ramda'
 
-import { View } from '../View'
+import { View } from '../../structure/View'
 import { useDefaultModifier } from '../../../modifiers/default'
 import { useThemeComponentModifier } from '../../../modifiers/themeComponent'
 

package/src/components/{structure → modals}/modal/ModalFooter.js

@@ -1,6 +1,6 @@
 import { pipe } from 'ramda'
 
-import { View } from '../View'
+import { View } from '../../structure/View'
 import { moveScale } from '../../../theme/helpers/sizeScale'
 import { useDefaultModifier } from '../../../modifiers/default'
 import { useSizeConverter } from '../../../modifiers/sizeConverter'

package/src/components/{structure → modals}/modal/ModalHeader.js

@@ -3,7 +3,7 @@ import { pipe } from 'ramda'
 import { Icon } from '../../presentation/Icon'
 import { Link } from '../../actions/Link'
 import { Text } from '../../text/Text'
-import { View } from '../View'
+import { View } from '../../structure/View'
 import { moveScale } from '../../../theme/helpers/sizeScale'
 import { useDefaultModifier } from '../../../modifiers/default'
 import { useSizeConverter } from '../../../modifiers/sizeConverter'