@neko-os/ui 0.0.12 → 0.1.0

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

package/src/components/presentation/Tooltip.js

@@ -10,7 +10,7 @@ import { useThemeComponentModifier } from '../../modifiers/themeComponent'
 export function Tooltip(rootProps) {
   const [{ loading, fontColor, sizeCode }, formattedProps] = pipe(
     useColorConverter('overlayBG'),
-    useSizeConverter('text', 'md'),
+    useSizeConverter('text', 'sm'),
     useThemeComponentModifier('Tooltip'),
     useFullColorModifier
   )([{}, rootProps])

package/src/components/sections/Section.js

@@ -0,0 +1,50 @@
+import { pipe } from 'ramda'
+import React from 'react'
+
+import { Divider } from '../helpers/Separator'
+import { Text } from '../text'
+import { View } from '../structure'
+import { useDefaultModifier } from '../../modifiers/default'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+const DEFAULT_PROPS = {
+  marginH: 'md',
+  bg: 'overlayBG',
+  br: 'md',
+  titleProps: {
+    strong: true,
+    text4: true,
+    sm: true,
+    marginB: 'sm',
+    paddingH: 'md',
+  },
+  dividerProps: {
+    line: true,
+    height: 1,
+  },
+}
+
+export function Section({ children, title, ...rootProps }) {
+  const [{}, formattedProps] = pipe(
+    useThemeComponentModifier('Section'), //
+    useDefaultModifier(DEFAULT_PROPS)
+  )([{}, rootProps])
+
+  const { titleProps, dividerProps, ...props } = formattedProps
+
+  const childArray = React.Children.toArray(children)
+
+  return (
+    <View>
+      {!!title && <Text marginH={props.marginH} {...titleProps} label={title} />}
+      <View className="neko-section" {...props}>
+        {childArray.map((child, i) => (
+          <React.Fragment key={child.key}>
+            {child}
+            {i < childArray.length - 1 && <Divider {...dividerProps} />}
+          </React.Fragment>
+        ))}
+      </View>
+    </View>
+  )
+}

package/src/components/sections/SectionItem.js

@@ -0,0 +1,24 @@
+import { pipe } from 'ramda'
+
+import { LabelValue } from '../presentation'
+import { useColorConverter } from '../../modifiers/colorConverter'
+import { useDefaultModifier } from '../../modifiers/default'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+const DEFAULT_PROPS = {
+  paddingH: 'md',
+  paddingV: 'sm',
+  minH: 'md',
+}
+
+export function SectionItem({ ...rootProps }) {
+  const [{ color }, formattedProps] = pipe(
+    useColorConverter(),
+    useThemeComponentModifier('SectionItem'), //
+    useDefaultModifier(DEFAULT_PROPS)
+  )([{}, rootProps])
+
+  const { ...props } = formattedProps
+
+  return <LabelValue spread className="neko-section-item" color={color} {...props} />
+}

package/src/components/sections/SectionItemLink.js

@@ -0,0 +1,33 @@
+import { pipe } from 'ramda'
+
+import { IconLabel } from '../presentation'
+import { Link } from '../actions'
+import { SectionItem } from './SectionItem'
+import { useColorConverter } from '../../modifiers/colorConverter'
+import { useDefaultModifier } from '../../modifiers/default'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+const DEFAULT_PROPS = {
+  icon: 'md',
+  paddingV: 'sm',
+  minH: 'md',
+  icon: 'arrow-right-s-line',
+}
+
+export function SectionItemLink({ children, value, onPress, ...rootProps }) {
+  const [{ color }, formattedProps] = pipe(
+    useColorConverter(),
+    useThemeComponentModifier('SectionItemLink'), //
+    useDefaultModifier(DEFAULT_PROPS)
+  )([{}, rootProps])
+
+  const { icon, iconLabelProps, ...props } = formattedProps
+
+  return (
+    <Link className="neko-section-item-link" onPress={onPress}>
+      <SectionItem color={color} {...props}>
+        {children || <IconLabel gap={2} invert color={color} {...iconLabelProps} label={value} icon={icon} />}
+      </SectionItem>
+    </Link>
+  )
+}

package/src/components/sections/index.js

@@ -0,0 +1,3 @@
+export * from './Section'
+export * from './SectionItem'
+export * from './SectionItemLink'

package/src/components/state/StatePresenter.js

@@ -0,0 +1,41 @@
+import { Loading } from './Loading'
+import { Result } from '../presentation'
+import { View } from '../structure'
+
+export function StatePresenter({
+  loading,
+  error,
+  empty,
+  errorTitle = 'Something went wrong',
+  errorDescription,
+  emptyTitle = 'No results',
+  emptyDescription,
+  children,
+  ...props
+}) {
+  if (loading) {
+    return (
+      <View flex center {...props}>
+        <Loading />
+      </View>
+    )
+  }
+
+  if (error) {
+    return (
+      <View flex center {...props}>
+        <Result type="error" title={errorTitle} description={errorDescription || error.message} />
+      </View>
+    )
+  }
+
+  if (empty) {
+    return (
+      <View flex center {...props}>
+        <Result type="empty" title={emptyTitle} description={emptyDescription} />
+      </View>
+    )
+  }
+
+  return children
+}

package/src/components/state/index.js

@@ -1,2 +1,3 @@
 export * from './Loading'
 export * from './LoadingView'
+export * from './StatePresenter'

package/src/components/structure/BlurView.js

@@ -25,6 +25,7 @@ const DEFAULT_PROPS =
     const isDark = tinycolor(colors?.overlayBG || colors?.bg).isDark()
 
     return {
+      width: 'auto',
       tint: isDark ? 'dark' : 'light',
     }
   }

package/src/components/structure/KeyboardAvoidingView.js

@@ -0,0 +1,52 @@
+import { pipe } from 'ramda'
+
+import { AbsKeyboardAvoidingView } from '../../abstractions/KeyboardAvoidingView'
+import { Platform } from '../../abstractions/Platform'
+import { useSafeAreaInsets } from '../../abstractions/helpers/useSafeAreaInsets'
+import { useAnimationModifier } from '../../modifiers/animation'
+import { useBackgroundModifier } from '../../modifiers/background'
+import { useBorderModifier } from '../../modifiers/border'
+import { useCursorModifier } from '../../modifiers/cursor'
+import { useDisplayModifier } from '../../modifiers/display'
+import { useFlexModifier } from '../../modifiers/flex'
+import { useFlexWrapperModifier } from '../../modifiers/flexWrapper'
+import { useMarginModifier } from '../../modifiers/margin'
+import { useOverflowModifier } from '../../modifiers/overflow'
+import { usePaddingModifier } from '../../modifiers/padding'
+import { usePositionModifier } from '../../modifiers/position'
+import { useShadowModifier } from '../../modifiers/shadow'
+import { useSizeModifier } from '../../modifiers/size'
+import { useStateModifier } from '../../modifiers/state'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+export function KeyboardAvoidingView({ children, keyboardVerticalOffset = 0, ...rootProps }) {
+  const { bottom } = useSafeAreaInsets()
+
+  const [_, props] = pipe(
+    useThemeComponentModifier('KeyboardAvoidingView'),
+    useFlexWrapperModifier,
+    useDisplayModifier,
+    useCursorModifier,
+    useAnimationModifier,
+    useStateModifier,
+    useSizeModifier,
+    usePositionModifier,
+    useOverflowModifier,
+    usePaddingModifier,
+    useMarginModifier,
+    useFlexModifier,
+    useBackgroundModifier,
+    useBorderModifier,
+    useShadowModifier
+  )([{}, rootProps])
+
+  return (
+    <AbsKeyboardAvoidingView
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      keyboardVerticalOffset={keyboardVerticalOffset + bottom}
+      {...props}
+    >
+      {children}
+    </AbsKeyboardAvoidingView>
+  )
+}

package/src/components/structure/TopBar.js

@@ -0,0 +1,45 @@
+import { Text } from '../text'
+import { View } from './View'
+import { useResponsiveConverter } from '../../modifiers/responsiveConverter'
+import { useSafeAreaInsets } from '../../abstractions/helpers/useSafeAreaInsets'
+
+export function TopBar({ right, left, WrapperView, children, ...rootProps }) {
+  const { top: safeTop } = useSafeAreaInsets()
+
+  const [_, props] = useResponsiveConverter([])([{}, rootProps])
+  let { useSafeArea = true, title, subtitle } = props
+
+  const hasContent = !!title || !!subtitle || !!children || !!right || !!left
+
+  WrapperView = WrapperView || View
+
+  return (
+    <WrapperView paddingT={useSafeArea && safeTop} {...props}>
+      {!!hasContent && (
+        <View minH="md" centerV row paddingH="md" paddingV="sm" gap="sm" fullW>
+          <View flex={1} toLeft>
+            {left}
+          </View>
+
+          <View center flex={3}>
+            {children || (
+              <Text center h6 numberOfLines={1}>
+                {title}
+              </Text>
+            )}
+
+            {subtitle && (
+              <Text center xs numberOfLines={1}>
+                {subtitle}
+              </Text>
+            )}
+          </View>
+
+          <View flex={1} toRight>
+            {right}
+          </View>
+        </View>
+      )}
+    </WrapperView>
+  )
+}

package/src/components/structure/bottomDrawer/index.js

@@ -1 +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/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/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/bottomDrawer/native/BottomDrawer.js

@@ -6,7 +6,6 @@ import Animated, {
   useAnimatedStyle,
   withSpring,
   runOnJS,
-  useAnimatedReaction,
 } from 'react-native-reanimated'
 import React from 'react'
 
@@ -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/bottomDrawer/native/DrawerScrollView.js

@@ -1,83 +1,5 @@
-import React from 'react'
-import { ScrollView } from 'react-native'
-import Animated, { useAnimatedScrollHandler, useAnimatedReaction, runOnJS } from 'react-native-reanimated'
-import { useDrawerContext } from './DrawerContext'
+import { FlatList, ScrollView } from '../../../list'
+import { createDrawerScrollComponent } from './createDrawerScrollComponent'
 
-const AnimatedScrollView = Animated.createAnimatedComponent(ScrollView)
-
-export const DrawerScrollView = React.forwardRef((props, ref) => {
-  const {
-    children,
-    onScroll,
-    scrollEventThrottle = 16,
-    showsVerticalScrollIndicator = true,
-    bounces = true,
-    ...scrollViewProps
-  } = props
-
-  const { scrollOffset, scrollEnabled, isScrolling } = useDrawerContext()
-
-  const scrollRef = React.useRef(null)
-
-  // Convert shared value to React state for the component
-  const [isScrollEnabled, setIsScrollEnabled] = React.useState(true)
-
-  React.useImperativeHandle(ref, () => scrollRef.current)
-
-  // Handle scroll lock/unlock based on drawer position
-  useAnimatedReaction(
-    () => scrollEnabled.value,
-    (enabled) => {
-      if (!enabled && scrollOffset.value > 0) {
-        runOnJS(() => {
-          scrollRef.current?.scrollTo({ y: 0, animated: false })
-        })()
-        scrollOffset.value = 0
-      }
-      // Update React state
-      runOnJS(setIsScrollEnabled)(enabled)
-    },
-    []
-  )
-
-  const handleScrollBeginDrag = React.useCallback(() => {
-    isScrolling.value = true
-  }, [isScrolling])
-
-  const handleScrollEndDrag = React.useCallback(() => {
-    isScrolling.value = false
-  }, [isScrolling])
-
-  const animatedScrollHandler = useAnimatedScrollHandler({
-    onScroll: (event) => {
-      scrollOffset.value = event.contentOffset.y
-
-      if (onScroll) {
-        runOnJS(onScroll)(event)
-      }
-    },
-    onBeginDrag: () => {
-      runOnJS(handleScrollBeginDrag)()
-    },
-    onEndDrag: () => {
-      runOnJS(handleScrollEndDrag)()
-    },
-  })
-
-  return (
-    <AnimatedScrollView
-      ref={scrollRef}
-      style={{ flex: 1 }}
-      scrollEnabled={isScrollEnabled}
-      onScroll={animatedScrollHandler}
-      scrollEventThrottle={scrollEventThrottle}
-      showsVerticalScrollIndicator={showsVerticalScrollIndicator}
-      bounces={bounces}
-      {...scrollViewProps}
-    >
-      {children}
-    </AnimatedScrollView>
-  )
-})
-
-DrawerScrollView.displayName = 'DrawerScrollView'
+export const DrawerScrollView = createDrawerScrollComponent(ScrollView)
+export const DrawerFlatList = createDrawerScrollComponent(FlatList)