@neko-os/ui 0.0.7 → 0.0.8

package/src/components/inputs/datePicker/YearPicker.js

@@ -0,0 +1,67 @@
+import { range } from 'ramda'
+import React from 'react'
+import dayjs from 'dayjs'
+
+import { CalendarNav } from '../../calendar/CalendarNav'
+import { Col } from '../../structure/Col'
+import { Divider } from '../../helpers'
+import { Grid } from '../../structure/Row'
+import { Link } from '../../actions/Link'
+import { Text } from '../../text/Text'
+import { View } from '../../structure/View'
+import { isDateDisabled } from '../../calendar/_helpers/dateDisabled'
+
+export function YearPicker({ value, onChange, min, max, onCheckDisabled, ...props }) {
+  const [localValue, setLocalValue] = React.useState(value)
+  value = value === undefined ? localValue : value
+
+  React.useEffect(() => {
+    setLocalValue(value)
+  }, [value?.year?.()])
+
+  const handleChange = (v) => {
+    const newValue = v.startOf('year')
+    setLocalValue(newValue)
+    onChange?.(newValue)
+  }
+
+  const [currentDecade, setCurrentDecade] = React.useState(() => {
+    const year = dayjs(value).year()
+    const decadeStartYear = Math.floor(year / 10) * 10
+    return dayjs().year(decadeStartYear).startOf('year')
+  })
+
+  const years = range(currentDecade.year(), currentDecade.year() + 10)
+
+  return (
+    <View className="neko-day-picker" width={275} {...props}>
+      <CalendarNav value={currentDecade} onChange={setCurrentDecade} level="decade" />
+      <Divider />
+
+      <Grid colSpan={12} gap="xs">
+        {years.map((year) => {
+          const dateVal = currentDecade.year(year)
+          const isActive = !!value && dateVal.isSame(value, 'week')
+          const disabled = isDateDisabled(dateVal, { min, max, onCheckDisabled })
+
+          return (
+            <Col key={year}>
+              <Link
+                fullW
+                br="md"
+                padding="sm"
+                onPress={() => handleChange(dateVal)}
+                bg={isActive && 'primary'}
+                disabled={disabled}
+              >
+                <Text text2={!isActive} strong={isActive} center>
+                  {dateVal.year()}
+                </Text>
+              </Link>
+            </Col>
+          )
+        })}
+      </Grid>
+    </View>
+  )
+}

package/src/components/inputs/index.js

@@ -3,4 +3,8 @@ export * from './Radio'
 export * from './Switch'
 export * from './InputWrapper'
 export * from './TextInput'
+export * from './LinkInput'
+export * from './MaskInput'
+export * from './DateInput'
+export * from './datePicker/DatePicker'
 export * from './Picker'

package/src/components/list/ScrollView.js

@@ -0,0 +1,58 @@
+import { pipe } from 'ramda'
+
+import { AbsScrollView } from '../../abstractions/ScrollView'
+import { View } from '../structure/View'
+import { useAnimationModifier } from '../../modifiers/animation'
+import { useBackgroundModifier } from '../../modifiers/background'
+import { useBorderModifier } from '../../modifiers/border'
+import { useDefaultModifier } from '../../modifiers/default'
+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 { useResponsiveValue } from '../../responsive'
+import { useShadowModifier } from '../../modifiers/shadow'
+import { useSizeModifier } from '../../modifiers/size'
+import { useStateModifier } from '../../modifiers/state'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+const DEFAULT_PROPS = ([_, { horizontal }]) => {
+  const overflowKey = horizontal ? 'scrollX' : 'scrollY'
+
+  return {
+    [overflowKey]: true,
+    row: !!horizontal,
+  }
+}
+
+export function ScrollView({ children, useNormalView, ...rootProps }) {
+  const [_, props] = pipe(
+    useThemeComponentModifier('ScrollView'),
+    useDefaultModifier(DEFAULT_PROPS),
+    useFlexWrapperModifier,
+    useDisplayModifier,
+    useAnimationModifier,
+    useStateModifier,
+    useSizeModifier,
+    usePositionModifier,
+    useOverflowModifier,
+    usePaddingModifier,
+    useMarginModifier,
+    useFlexModifier,
+    useBackgroundModifier,
+    useBorderModifier,
+    useShadowModifier
+  )([{}, rootProps])
+  useNormalView = useResponsiveValue(useNormalView)
+
+  if (useNormalView) return <View {...rootProps}>{children}</View>
+
+  return (
+    <AbsScrollView className="neko-scroll-view" {...props}>
+      {children}
+    </AbsScrollView>
+  )
+}

package/src/components/list/index.js

@@ -0,0 +1 @@
+export * from './ScrollView'

package/src/components/presentation/ImageBackground.js

@@ -0,0 +1,38 @@
+import { pipe } from 'ramda'
+
+import { AbsImageBackground } from '../../abstractions/ImageBackground'
+import { useAnimationModifier } from '../../modifiers/animation'
+import { useBackgroundModifier } from '../../modifiers/background'
+import { useBorderModifier } from '../../modifiers/border'
+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 ImageBackground({ ...rootProps }) {
+  const [_, props] = pipe(
+    useThemeComponentModifier('ImageBackground'),
+    useFlexWrapperModifier,
+    useDisplayModifier,
+    useAnimationModifier,
+    useStateModifier,
+    useSizeModifier,
+    usePositionModifier,
+    useOverflowModifier,
+    usePaddingModifier,
+    useMarginModifier,
+    useFlexModifier,
+    useBackgroundModifier,
+    useBorderModifier,
+    useShadowModifier
+  )([{}, rootProps])
+
+  return <AbsImageBackground className="neko-image-background" {...props} />
+}

package/src/components/presentation/Result.js

@@ -44,8 +44,8 @@ export function Result({
 
   return (
     <View className="neko-result" center padding="lg" {...props}>
-      <Icon name={icon} color={iconColor} size={42} primary {...iconProps} />
-      <Divider height={10} />
+      {!!icon && <Icon name={icon} color={iconColor} size={42} primary {...iconProps} />}
+      {!!icon && <Divider height={10} />}
       <Text h3 {...textProps} {...titleProps}>
         {title}
       </Text>

package/src/components/presentation/index.js

@@ -8,4 +8,5 @@ export * from './Badge'
 export * from './Avatar'
 export * from './AvatarLabel'
 export * from './Image'
+export * from './ImageBackground'
 export * from './LabelValue'

package/src/components/structure/Accordion.js

@@ -43,7 +43,7 @@ export function Accordion({ children, title, open, onChange, ...rootProps }) {
         row
         gap={moveScale(sizeCode, -2)}
         borderB={open ? props.border || true : open}
-        borderColor={props.borderColor}
+        borderColor={props.borderColor || 'bg'}
         centerV
         {...headerProps}
         onPress={toggle}

package/src/components/structure/BlurView.js

@@ -0,0 +1,58 @@
+import tinycolor from 'tinycolor2'
+import { pipe } from 'ramda'
+
+import { AbsBlurView } from '../../abstractions/BlurView'
+import { useAnimationModifier } from '../../modifiers/animation'
+import { useBackgroundModifier } from '../../modifiers/background'
+import { useBorderModifier } from '../../modifiers/border'
+import { useColors } from '../../theme'
+import { useDefaultModifier } from '../../modifiers/default'
+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'
+
+const DEFAULT_PROPS =
+  (colors) =>
+  ([{}, {}]) => {
+    const isDark = tinycolor(colors?.overlayBG || colors?.bg).isDark()
+
+    return {
+      tint: isDark ? 'dark' : 'light',
+    }
+  }
+
+export function BlurView({ children, ...rootProps }) {
+  const colors = useColors()
+
+  const [{}, props] = pipe(
+    useThemeComponentModifier('BlurView'),
+    useDefaultModifier(DEFAULT_PROPS(colors)),
+    useFlexWrapperModifier,
+    useDisplayModifier,
+    useAnimationModifier,
+    useStateModifier,
+    useSizeModifier,
+    usePositionModifier,
+    useOverflowModifier,
+    usePaddingModifier,
+    useMarginModifier,
+    useFlexModifier,
+    useBackgroundModifier,
+    useBorderModifier,
+    useShadowModifier
+  )([{}, rootProps])
+
+  return (
+    <AbsBlurView className="neko-blur-view" {...props}>
+      {children}
+    </AbsBlurView>
+  )
+}

package/src/components/structure/GradientView.js

@@ -0,0 +1,42 @@
+import { pipe } from 'ramda'
+
+import { AbsGradientView } from '../../abstractions/GradientView'
+import { useAnimationModifier } from '../../modifiers/animation'
+import { useBackgroundModifier } from '../../modifiers/background'
+import { useBorderModifier } from '../../modifiers/border'
+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 GradientView({ children, ...rootProps }) {
+  const [{ gradientColors }, props] = pipe(
+    useThemeComponentModifier('GradientView'),
+    useFlexWrapperModifier,
+    useDisplayModifier,
+    useAnimationModifier,
+    useStateModifier,
+    useSizeModifier,
+    usePositionModifier,
+    useOverflowModifier,
+    usePaddingModifier,
+    useMarginModifier,
+    useFlexModifier,
+    useBackgroundModifier,
+    useBorderModifier,
+    useShadowModifier
+  )([{}, rootProps])
+
+  return (
+    <AbsGradientView className="neko-gradient-view" colors={gradientColors} {...props}>
+      {children}
+    </AbsGradientView>
+  )
+}

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

@@ -0,0 +1 @@
+export { BottomDrawer } from './web/BottomDrawer'

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

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

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

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

package/src/components/structure/bottomDrawer/native/BottomDrawer.js

@@ -0,0 +1,229 @@
+import { GestureDetector, Gesture, GestureHandlerRootView } from 'react-native-gesture-handler'
+import { Modal, Dimensions, StyleSheet, BackHandler, Platform } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import Animated, {
+  useSharedValue,
+  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 { normalizeSnapPoints, findClosestSnapPoint } from './utils'
+import { useColors } from '../../../../theme/ThemeHandler'
+
+function InnerContent({
+  children,
+  render,
+  setRender,
+  open,
+  onClose,
+  snapPoints = ['50%'],
+  useSafeArea = true,
+  enableOverScroll = true,
+  enableHandlePanningGesture = true,
+  enableContentPanningGesture = true,
+  animationConfig = {
+    damping: 50,
+    stiffness: 500,
+    mass: 0.3,
+    overshootClamping: true,
+    restDisplacementThreshold: 10,
+    restSpeedThreshold: 10,
+  },
+  hideHandle,
+  contentProps,
+  ...props
+}) {
+  const { height: SCREEN_HEIGHT } = Dimensions.get('window')
+  const insets = useSafeAreaInsets()
+  const bottomInset = useSafeArea ? insets.bottom : 0
+
+  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)
+
+  const normalizedSnapPoints = React.useMemo(() => normalizeSnapPoints(snapPoints, SCREEN_HEIGHT), [snapPoints])
+  const maxSnapPoint = React.useMemo(() => Math.max(...normalizedSnapPoints), [normalizedSnapPoints])
+  const minSnapPoint = React.useMemo(() => Math.min(...normalizedSnapPoints), [normalizedSnapPoints])
+
+  React.useEffect(() => {
+    if (open) {
+      const targetY = SCREEN_HEIGHT - normalizedSnapPoints[0]
+      translateY.value = withSpring(targetY, animationConfig)
+      snapIndex.value = 0
+    } else {
+      translateY.value = withSpring(SCREEN_HEIGHT, animationConfig, () => {
+        scrollOffset.value = 0
+        scrollEnabled.value = false
+        runOnJS(setRender)(false)
+      })
+      snapIndex.value = -1
+    }
+  }, [open])
+
+  React.useEffect(() => {
+    if (!onClose || !open || Platform.OS !== 'android') return
+    const backHandler = BackHandler.addEventListener('hardwareBackPress', () => {
+      onClose()
+      return true
+    })
+    return () => backHandler.remove()
+  }, [open, onClose])
+
+  useAnimatedReaction(
+    () => translateY.value,
+    (currentY) => {
+      const atMaxSnapPoint = currentY <= SCREEN_HEIGHT - maxSnapPoint
+      scrollEnabled.value = atMaxSnapPoint
+    },
+    []
+  )
+
+  let handleClose = React.useCallback(() => {
+    onClose?.()
+  }, [onClose])
+  if (!onClose) handleClose = false
+
+  const snapTo = React.useCallback(
+    (index) => {
+      'worklet'
+      const snapPoint = normalizedSnapPoints[index]
+      if (snapPoint !== undefined) {
+        translateY.value = withSpring(SCREEN_HEIGHT - snapPoint, animationConfig)
+        snapIndex.value = index
+      }
+    },
+    [normalizedSnapPoints]
+  )
+
+  // contexto manual para gesto
+  const gestureStartTranslateY = useSharedValue(0)
+
+  const panGesture = React.useMemo(() => {
+    return Gesture.Pan()
+      .enabled(enableHandlePanningGesture || enableContentPanningGesture)
+      .onStart(() => {
+        gestureStartTranslateY.value = translateY.value
+      })
+      .onUpdate((event) => {
+        const newTranslateY = gestureStartTranslateY.value + event.translationY
+        const maxPosition = SCREEN_HEIGHT - maxSnapPoint
+
+        if (enableOverScroll && newTranslateY >= maxPosition) {
+          translateY.value = newTranslateY
+        } else {
+          translateY.value = Math.max(maxPosition, Math.min(SCREEN_HEIGHT, newTranslateY))
+        }
+
+        velocityY.value = event.velocityY
+      })
+      .onEnd(() => {
+        const currentPosition = SCREEN_HEIGHT - translateY.value
+        const shouldClose =
+          !!handleClose &&
+          ((velocityY.value > 2000 && currentPosition < minSnapPoint * 0.75) || currentPosition < minSnapPoint * 0.25)
+
+        if (shouldClose) {
+          runOnJS(handleClose)()
+        } else {
+          const closestSnapIndex = findClosestSnapPoint(currentPosition, normalizedSnapPoints, velocityY.value)
+          const targetSnapPoint = normalizedSnapPoints[closestSnapIndex]
+          translateY.value = withSpring(SCREEN_HEIGHT - targetSnapPoint, animationConfig)
+          snapIndex.value = closestSnapIndex
+        }
+      })
+  }, [
+    enableHandlePanningGesture,
+    enableContentPanningGesture,
+    enableOverScroll,
+    maxSnapPoint,
+    minSnapPoint,
+    normalizedSnapPoints,
+    animationConfig,
+    handleClose,
+  ])
+
+  const animatedSheetStyle = useAnimatedStyle(() => {
+    const currentHeight = SCREEN_HEIGHT - translateY.value
+    return {
+      transform: [{ translateY: translateY.value }],
+      maxHeight: currentHeight,
+    }
+  })
+
+  const contextValue = React.useMemo(
+    () => ({
+      translateY,
+      scrollOffset,
+      scrollEnabled,
+      isScrolling,
+      snapIndex,
+      maxSnapPoint,
+      snapTo,
+      animationConfig,
+    }),
+    [maxSnapPoint]
+  )
+
+  return (
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <Pressable
+        absoluteFill
+        bg="backdrop_op70"
+        onPress={() => {
+          if (!handleClose) return
+          runOnJS(handleClose)()
+        }}
+      />
+
+      <DrawerProvider value={contextValue}>
+        <GestureDetector gesture={panGesture}>
+          <Animated.View style={[styles.container, { height: SCREEN_HEIGHT }, animatedSheetStyle]}>
+            <View flex bg="overlayBG" shadow paddingB={useSafeArea && bottomInset} borderRadiusT="xxxl" {...props}>
+              <DrawerHandle hide={hideHandle} />
+              <View flex {...contentProps}>
+                {children}
+              </View>
+            </View>
+          </Animated.View>
+        </GestureDetector>
+      </DrawerProvider>
+    </GestureHandlerRootView>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+  },
+})
+
+export function BottomDrawer({ open, ...props }) {
+  const [render, setRender] = React.useState(open)
+
+  React.useEffect(() => {
+    if (open) {
+      setRender(true)
+    }
+  }, [open])
+
+  return (
+    <Modal visible={render} transparent statusBarTranslucent navigationBarTranslucent animationType="none">
+      <InnerContent {...props} open={open} render={render} setRender={setRender} />
+    </Modal>
+  )
+}

package/src/components/structure/bottomDrawer/native/DrawerContext.js

@@ -0,0 +1,21 @@
+import React from 'react';
+
+const DrawerContext = React.createContext(null);
+
+export function DrawerProvider({ children, value }) {
+  return (
+    <DrawerContext.Provider value={value}>
+      {children}
+    </DrawerContext.Provider>
+  );
+}
+
+export function useDrawerContext() {
+  const context = React.useContext(DrawerContext);
+
+  if (!context) {
+    throw new Error('useDrawerContext must be used within a DrawerProvider');
+  }
+
+  return context;
+}

package/src/components/structure/bottomDrawer/native/DrawerHandle.js

@@ -0,0 +1,12 @@
+import { Divider } from '../../../helpers/Separator'
+import { View } from '../../View'
+
+export function DrawerHandle({ hide }) {
+  if (!!hide) return false
+
+  return (
+    <View center padding="sm">
+      <Divider maxWidth={35} line={4} color="text4_op30" height={4} />
+    </View>
+  )
+}

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

@@ -0,0 +1,83 @@
+import React from 'react'
+import { ScrollView } from 'react-native'
+import Animated, { useAnimatedScrollHandler, useAnimatedReaction, runOnJS } from 'react-native-reanimated'
+import { useDrawerContext } from './DrawerContext'
+
+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'