@neko-os/ui 0.0.13 → 0.1.0

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)

package/src/components/structure/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/structure/index.js

@@ -12,3 +12,5 @@ export * from './drawer'
 export * from './bottomDrawer'
 export * from './popover/Popover'
 export * from './Segment'
+export * from './TopBar'
+export * from './KeyboardAvoidingView'

package/src/components/text/DateText.js

@@ -0,0 +1,11 @@
+import { is } from 'ramda'
+import dayjs from 'dayjs'
+
+import { Text } from '../text'
+
+export function DateText({ format = 'DD MMM YYYY', value, children, ...props }) {
+  value = is(String, children) ? children : value
+  // TODO: Get format from i18n
+
+  return <Text {...props}>{dayjs(value).format(format)}</Text>
+}

package/src/components/text/index.js

@@ -1,2 +1,3 @@
 export * from './Text'
 export * from './VerticalText'
+export * from './DateText'

package/src/components/theme/ThemePicker.js

@@ -7,7 +7,7 @@ import { Picker } from '../inputs'
 import { ThemeThumb } from './ThemeThumb'
 
 export function ThemePicker({ onChange, onlyKeys, hideKeys }) {
-  const { activeThemeKey, setActiveThemeKey, themes, onChangeTheme } = useThemeHandler()
+  const { activeThemeKey, themes, onChangeTheme } = useThemeHandler()
 
   let options = pipe(
     mergeDeepRight(DEFAULT_THEMES),
@@ -27,7 +27,6 @@ export function ThemePicker({ onChange, onlyKeys, hideKeys }) {
       gap="lg"
       value={activeThemeKey}
       onChange={(key) => {
-        setActiveThemeKey(key)
         onChangeTheme?.(key)
         onChange?.(key)
       }}

package/src/helpers/index.js

@@ -2,3 +2,4 @@ export * from './debounce'
 export * from './string'
 export * from './random'
 export * from './storage'
+export * from './../abstractions/helpers/useSafeAreaInsets'