react-native-varia 0.2.2 → 0.2.4

package/lib/components/Drawer.tsx

@@ -0,0 +1,496 @@
+import React, {
+  createContext,
+  useContext,
+  useImperativeHandle,
+  useMemo,
+} from 'react'
+import {TouchableWithoutFeedback} from 'react-native'
+import {Gesture, GestureDetector} from 'react-native-gesture-handler'
+import Animated, {
+  measure,
+  SharedValue,
+  useAnimatedReaction,
+  useAnimatedRef,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+  withTiming,
+} from 'react-native-reanimated'
+import {runOnUI, scheduleOnRN, scheduleOnUI} from 'react-native-worklets'
+import {
+  SlidingDrawerTokens,
+  SlidingDrawerStyles,
+} from '../theme/SlidingDrawer.recipe'
+import {PalettesWithNestedKeys} from '../style/varia/types'
+import {
+  StyleSheet,
+  UnistylesRuntime,
+  UnistylesVariants,
+} from 'react-native-unistyles'
+import {HStack} from '../patterns'
+
+/* -----------------------------
+ * Types
+ * ----------------------------*/
+
+export type SlidingDrawerRef = {
+  expand: () => void | null
+  collapse: () => void | null
+  snapTo: (point: number) => void | null
+  isCollapsed: () => boolean
+}
+
+type SlidingDrawerVariants = UnistylesVariants<typeof SlidingDrawerStyles>
+
+type DrawerContextType = SlidingDrawerVariants & {
+  colorPalette: PalettesWithNestedKeys
+  overlayOpacity: SharedValue<number>
+}
+
+type DrawerRootProps = SlidingDrawerVariants & {
+  colorPalette?: PalettesWithNestedKeys
+  children?: React.ReactNode
+}
+
+/* -----------------------------
+ * Context
+ * ----------------------------*/
+
+const DrawerContext = createContext<DrawerContextType | null>(null)
+const useDrawer = () => {
+  const ctx = useContext(DrawerContext)
+  if (!ctx)
+    throw new Error('Drawer subcomponents must be used within Drawer.Root')
+  return ctx
+}
+
+/* -----------------------------
+ * Root
+ * ----------------------------*/
+
+const DrawerRoot = ({
+  colorPalette = 'accent',
+  variant = SlidingDrawerTokens.defaultProps.variant,
+  children,
+}: DrawerRootProps) => {
+  SlidingDrawerStyles.useVariants({variant})
+
+  const overlayOpacity = useSharedValue(0)
+  const value = useMemo(
+    () => ({
+      colorPalette,
+      variant,
+      overlayOpacity,
+    }),
+    [colorPalette, variant],
+  )
+
+  return (
+    <DrawerContext.Provider value={value}>{children}</DrawerContext.Provider>
+  )
+}
+
+/* -----------------------------
+ * Positioner
+ * ----------------------------*/
+const DrawerPositioner = ({
+  children,
+  direction,
+  axis,
+}: {
+  children?: React.ReactNode
+  direction: 1 | -1
+  axis: 'x' | 'y'
+}) => {
+  const {variant} = useDrawer()
+  SlidingDrawerStyles.useVariants({variant})
+
+  type WithDirection = {direction?: 1 | -1; axis?: 'x' | 'y'}
+
+  const enhancedChildren = React.Children.map(children, child => {
+    if (React.isValidElement(child)) {
+      return React.cloneElement(child as React.ReactElement<WithDirection>, {
+        direction,
+        axis,
+      })
+    }
+    return child
+  })
+
+  return (
+    <HStack
+      style={[
+        styles.positioner,
+        SlidingDrawerStyles.positioner,
+        {
+          justifyContent:
+            axis === 'y'
+              ? 'center'
+              : direction === 1
+              ? 'flex-start'
+              : 'flex-end',
+          alignItems:
+            axis === 'x'
+              ? 'center'
+              : direction === 1
+              ? 'flex-start'
+              : 'flex-end',
+        },
+      ]}>
+      {enhancedChildren}
+    </HStack>
+  )
+}
+
+/* -----------------------------
+ * Overlay
+ * ----------------------------*/
+const AnimatedTouchable = Animated.createAnimatedComponent(
+  TouchableWithoutFeedback,
+)
+
+const DrawerOverlay = ({onPress}: {onPress?: () => void}) => {
+  const {colorPalette, overlayOpacity, variant} = useDrawer()
+  SlidingDrawerStyles.useVariants({variant})
+  const visible = useSharedValue(0)
+
+  useAnimatedReaction(
+    () => overlayOpacity.value,
+    value => {
+      if (value === 0) {
+        visible.value = 0
+      } else {
+        visible.value = 1
+      }
+    },
+  )
+
+  const displayOverlayStyle = useAnimatedStyle(() => ({
+    opacity: withTiming(overlayOpacity.value, {duration: 50}),
+    display: visible.value === 0 ? 'none' : 'flex',
+  }))
+
+  return (
+    <AnimatedTouchable onPress={onPress}>
+      <Animated.View
+        style={[
+          StyleSheet.absoluteFillObject,
+          displayOverlayStyle,
+          SlidingDrawerStyles.overlay(colorPalette),
+        ]}
+      />
+    </AnimatedTouchable>
+  )
+}
+
+/* -----------------------------
+ * Slider (gestión independiente)
+ * ----------------------------*/
+
+type InternalDrawerSliderProps = {
+  axis: 'x' | 'y'
+  direction: 1 | -1
+  lockAtEdges?: boolean
+  snapPoints?: number[] | ('hidden' | 'content')[]
+  animation?: keyof typeof SlidingDrawerTokens.variants.animation
+  onExpand?: () => void
+  onCollapse?: () => void
+  onSnap?: (point: number) => void
+  allowGestures?: boolean
+  children?: React.ReactNode
+  ref?: React.RefObject<SlidingDrawerRef | null>
+  externalTranslate?: SharedValue<number>
+}
+
+export type DrawerSliderProps = Omit<
+  InternalDrawerSliderProps,
+  'direction' | 'axis'
+>
+
+export const DrawerSlider = (props: DrawerSliderProps) => {
+  return <DrawerSliderInternal {...(props as InternalDrawerSliderProps)} />
+}
+
+const DrawerSliderInternal = ({
+  axis,
+  direction,
+  lockAtEdges = false,
+  snapPoints = ['hidden', 'content'],
+  animation = SlidingDrawerTokens.defaultProps.animation,
+  onExpand,
+  onCollapse,
+  onSnap,
+  allowGestures = true,
+  children,
+  externalTranslate,
+  ref,
+}: InternalDrawerSliderProps) => {
+  const {variant, colorPalette, overlayOpacity} = useDrawer()
+
+  SlidingDrawerStyles.useVariants({variant})
+
+  const screenHeight =
+    UnistylesRuntime.screen.height - UnistylesRuntime.insets.top
+  const screenWidth = UnistylesRuntime.screen.width
+
+  const animations = {withSpring, withTiming}
+  const animationVariant = SlidingDrawerTokens.variants.animation[animation]
+  const VELOCITY_THRESHOLD = 2000
+
+  const viewRef = useAnimatedRef<Animated.View>()
+  const translate = useSharedValue(screenHeight)
+  const context = useSharedValue({position: screenHeight, snapPoint: 0})
+  const contentHeight = useSharedValue(0)
+  const resolvedSnapPoints = useSharedValue<number[]>([])
+
+  if (externalTranslate) {
+    useAnimatedReaction(
+      () => translate.value,
+      value => {
+        externalTranslate.value = value
+      },
+    )
+  }
+
+  const onLayout = () => {
+    const _screenHeight = screenHeight
+    const _screenWidth = screenWidth
+    const _axis = axis
+    const _direction = direction
+    const _snapPoints = snapPoints
+
+    scheduleOnUI(() => {
+      'worklet'
+      const measured = measure(viewRef)
+      if (measured) {
+        const {height, width} = measured
+        const size = _axis === 'y' ? height : width
+        const screenSize = _axis === 'y' ? _screenHeight : _screenWidth
+
+        const resolved = _snapPoints.map(p => {
+          if (p === 'hidden') return screenSize * _direction
+          if (p === 'content') return (screenSize - size) * _direction
+          return (p as number) * _direction
+        })
+
+        resolvedSnapPoints.value = resolved
+        translate.value = resolved[0]
+        context.value = {position: resolved[0], snapPoint: 0}
+      }
+    })
+  }
+
+  const getPoints = () => {
+    'worklet'
+    return resolvedSnapPoints.value.length > 0
+      ? resolvedSnapPoints.value
+      : snapPoints.map(p => {
+          // if (p === 'hidden') return screenHeight * direction
+          // if (p === 'content') return (screenHeight - contentHeight.value) * direction
+          return (p as number) * direction
+        })
+  }
+
+  const updateCurrentSnapPoint = (snapPoint: number) => {
+    'worklet'
+    context.value = {position: context.value.position, snapPoint}
+  }
+
+  const snapTo = (destination: number) => {
+    'worklet'
+    const points = getPoints()
+    const point = points[destination]
+    if (animationVariant?.type && point != null) {
+      translate.value = animations[animationVariant.type](
+        point,
+        animationVariant.props,
+      )
+      updateCurrentSnapPoint(destination)
+      onSnap && scheduleOnRN(onSnap, destination)
+    }
+  }
+
+  const isCollapsed = () => {
+    'worklet'
+    return context.value.snapPoint === 0
+  }
+
+  const showOverlay = () => {
+    'worklet'
+    overlayOpacity.value = withTiming(1, {duration: 200})
+  }
+
+  const hideOverlay = () => {
+    'worklet'
+    overlayOpacity.value = withTiming(0, {duration: 200})
+  }
+
+  const expand = () => {
+    const points = getPoints()
+    snapTo(points.length - 1)
+    showOverlay()
+    onExpand && scheduleOnRN(onExpand)
+  }
+
+  const collapse = () => {
+    snapTo(0)
+    hideOverlay()
+    onCollapse && scheduleOnRN(onCollapse)
+  }
+
+  useImperativeHandle(ref, () => ({
+    expand,
+    collapse,
+    snapTo,
+    isCollapsed,
+  }))
+
+  useAnimatedReaction(
+    () => translate.value,
+    value => {
+      const points = getPoints()
+      if (points.length < 2) return
+
+      const collapsed = points[0]
+      const next = points[1] ?? collapsed
+      const threshold = 20
+      const opensUpward = next < collapsed
+      const delta = value - collapsed
+      const isExpanded = opensUpward ? delta < -threshold : delta > threshold
+
+      overlayOpacity.value = withTiming(isExpanded ? 1 : 0, {duration: 150})
+    },
+  )
+
+  const slideGesture = Gesture.Pan()
+    .enabled(allowGestures)
+    .onBegin(() => {
+      context.value.position = translate.value
+    })
+    .onUpdate(event => {
+      const delta = axis === 'y' ? event.translationY : event.translationX
+      const proposed = delta + (context.value.position ?? 0)
+      const points = getPoints()
+      const minPoint = Math.min(...points)
+      const maxPoint = Math.max(...points)
+      let clamped = proposed
+
+      if (proposed < minPoint) {
+        if (lockAtEdges) {
+          clamped = minPoint
+        } else {
+          const overdrag = minPoint - proposed
+          clamped = minPoint - overdrag / (1 + overdrag / 60)
+        }
+      } else if (proposed > maxPoint) {
+        if (lockAtEdges) {
+          clamped = maxPoint
+        } else {
+          const overdrag = proposed - maxPoint
+          clamped = maxPoint + overdrag / (1 + overdrag / 60)
+        }
+      }
+
+      translate.value = clamped
+    })
+    .onEnd(({velocityX, velocityY, translationX, translationY}) => {
+      const velocity = axis === 'y' ? velocityY : velocityX
+      const translation = axis === 'y' ? translationY : translationX
+      const points = getPoints()
+
+      const minPoint = Math.min(...points)
+      const maxPoint = Math.max(...points)
+
+      if (translate.value < minPoint) {
+        translate.value = withSpring(minPoint, {velocity})
+        return
+      } else if (translate.value > maxPoint) {
+        translate.value = withSpring(maxPoint, {velocity})
+        return
+      }
+
+      const forwardsThreshold =
+        (points[context.value.snapPoint] +
+          points[context.value.snapPoint + 1]) /
+        2
+      const backwardsThreshold =
+        (points[context.value.snapPoint] +
+          points[context.value.snapPoint - 1]) /
+        2
+
+      if (translation * direction < 0) {
+        if (
+          ((direction === 1 && translate.value < forwardsThreshold) ||
+            (direction === -1 && translate.value > forwardsThreshold) ||
+            velocity * direction < -VELOCITY_THRESHOLD) &&
+          context.value.snapPoint < points.length - 1
+        ) {
+          snapTo(context.value.snapPoint + 1)
+        } else {
+          snapTo(context.value.snapPoint)
+        }
+      } else {
+        if (
+          ((direction === 1 && translate.value > backwardsThreshold) ||
+            (direction === -1 && translate.value < backwardsThreshold) ||
+            velocity * direction > VELOCITY_THRESHOLD) &&
+          context.value.snapPoint > 0
+        ) {
+          snapTo(context.value.snapPoint - 1)
+        } else {
+          snapTo(context.value.snapPoint)
+        }
+      }
+    })
+
+  const blockAnimatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [
+        axis === 'y'
+          ? {translateY: translate.value}
+          : {translateX: translate.value},
+      ],
+    }
+  })
+
+  return (
+    <GestureDetector gesture={slideGesture}>
+      <Animated.View
+        ref={viewRef}
+        onLayout={onLayout}
+        style={[
+          styles.slider,
+          blockAnimatedStyle,
+          SlidingDrawerStyles.slider(colorPalette),
+        ]}>
+        {children}
+      </Animated.View>
+    </GestureDetector>
+  )
+}
+
+export const Drawer = {
+  Root: DrawerRoot,
+  Positioner: DrawerPositioner,
+  Overlay: DrawerOverlay,
+  Slider: DrawerSlider,
+}
+
+const styles = StyleSheet.create((theme, rt) => ({
+  positioner: {
+    flex: 1,
+    alignSelf: 'stretch',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+  slider: {
+    flex: 1,
+    alignSelf: 'stretch',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    zIndex: 100,
+  },
+}))

package/lib/components/Field.tsx

@@ -1,36 +1,21 @@
-import React, {createContext, useContext} from 'react'
-import {UnistylesVariants} from 'react-native-unistyles'
+import React from 'react'
 import Text from './Text'
-import {VStack} from '../patterns'
 import {DefaultFieldVariants, FieldStyles} from '../theme/Field.recipe'
-import {PalettesWithNestedKeys} from '../style/varia/types'
-
-type FieldVariants = UnistylesVariants<typeof FieldStyles>
-
-type FieldContextType = {
-  error?: string
-  variant?: FieldVariants['variant']
-  size?: FieldVariants['size']
-  colorPalette?: PalettesWithNestedKeys
-}
-
-const FieldContext = createContext<FieldContextType | undefined>(undefined)
-
-function useField() {
-  const context = useContext(FieldContext)
-  if (!context) {
-    throw new Error(
-      'Field subcomponents (Label, Error) must be used inside Field.Root',
-    )
-  }
-  return context
-}
+import {Flex, PalettesWithNestedKeys} from '../style/varia/types'
+import FieldContext, {
+  FieldContextType,
+  FieldVariants,
+  useField,
+} from './context/Field'
+import {StyleProp, View, ViewStyle} from 'react-native'
+import {StyleSheet} from 'react-native-unistyles'
 
 type FieldRootProps = FieldVariants & {
   children: React.ReactNode
   error?: string
   colorPalette?: PalettesWithNestedKeys
   flex?: number
+  style?: StyleProp<ViewStyle>
 }
 
 const FieldRoot = ({
@@ -39,7 +24,8 @@ const FieldRoot = ({
   variant = DefaultFieldVariants.variant,
   size = DefaultFieldVariants.size,
   colorPalette = 'accent',
-  flex = 1,
+  flex = 0,
+  style,
 }: FieldRootProps) => {
   FieldStyles.useVariants({size})
 
@@ -53,20 +39,16 @@ const FieldRoot = ({
   FieldStyles.useVariants({variant, size})
 
   return (
-    <VStack
+    <View
       style={[
-        {
-          flexShrink: 1,
-          flexGrow: flex,
-          alignItems: 'stretch',
-          alignSelf: 'stretch',
-        },
+        styles.root(flex),
         FieldStyles.root(colorPalette),
+        style && style,
       ]}>
       <FieldContext.Provider value={contextValue}>
         {children}
       </FieldContext.Provider>
-    </VStack>
+    </View>
   )
 }
 
@@ -89,11 +71,7 @@ const FieldLabel = ({children, ...props}: FieldLabelProps) => {
 
   FieldStyles.useVariants({variant, size})
 
-  return (
-    <Text size={size} color={FieldStyles.label(colorPalette).color}>
-      {children}
-    </Text>
-  )
+  return <Text style={FieldStyles.label(colorPalette)}>{children}</Text>
 }
 
 type FieldErrorProps = {
@@ -124,6 +102,13 @@ const FieldError = ({...props}: FieldErrorProps) => {
   )
 }
 
+const styles = StyleSheet.create({
+  root: (flex: Flex) => ({
+    flex,
+    flexDirection: 'column',
+  }),
+})
+
 export const Field = Object.assign(FieldRoot, {
   Root: FieldRoot,
   Label: FieldLabel,

package/lib/components/GradientBackground.tsx

@@ -1,16 +1,23 @@
-import {View, StyleSheet, StyleProp, ViewStyle} from 'react-native'
+import {View, StyleProp, ViewStyle} from 'react-native'
 import Svg, {Defs, LinearGradient, Stop, Rect} from 'react-native-svg'
 import {withUnistyles} from 'react-native-unistyles'
 import {gradientBackgroundTokens} from '../theme/GradientBackground.recipe'
-import {PalettesWithNestedKeys} from '../style/varia/types'
+import {
+  NestedColorsType,
+  PalettesWithNestedKeys,
+  ThemeColors,
+} from '../style/varia/types'
 import {resolveColor} from '../style/varia/utils'
+import {StyleSheet} from 'react-native-unistyles'
 
 interface GradientBackgroundProps {
   colorPalette?: PalettesWithNestedKeys
   variant?: keyof typeof gradientBackgroundTokens.variants.variant
   direction?: keyof typeof gradientBackgroundTokens.variants.direction
   containerStyles?: StyleProp<ViewStyle>
-  colors: any
+  colors: NestedColorsType
+  startColor?: ThemeColors
+  endColor?: ThemeColors
 }
 
 const BaseGradientBackground = ({
@@ -19,10 +26,20 @@ const BaseGradientBackground = ({
   direction = gradientBackgroundTokens.defaultProps.direction,
   containerStyles,
   colors,
+  startColor,
+  endColor,
 }: GradientBackgroundProps) => {
   const colorValue = gradientBackgroundTokens.variants.variant[variant]
-  const startColor = resolveColor(colorValue.startColor, colors, colorPalette)
-  const endColor = resolveColor(colorValue.endColor, colors, colorPalette)
+  const resolvedStartColor = resolveColor(
+    startColor || colorValue.startColor,
+    colors,
+    colorPalette,
+  )
+  const resolvedEndColor = resolveColor(
+    endColor || colorValue.endColor,
+    colors,
+    colorPalette,
+  )
 
   const directionVariant =
     gradientBackgroundTokens.variants.direction[direction]
@@ -41,8 +58,8 @@ const BaseGradientBackground = ({
             y1={directionVariant?.y1}
             x2={directionVariant?.x2}
             y2={directionVariant?.y2}>
-            <Stop offset="0%" stopColor={startColor} stopOpacity="1" />
-            <Stop offset="100%" stopColor={endColor} stopOpacity="1" />
+            <Stop offset="0%" stopColor={resolvedStartColor} stopOpacity="1" />
+            <Stop offset="100%" stopColor={resolvedEndColor} stopOpacity="1" />
           </LinearGradient>
         </Defs>
         <Rect width="100" height="100" fill="url(#grad)" />
@@ -54,6 +71,7 @@ const BaseGradientBackground = ({
 const styles = StyleSheet.create({
   container: {
     ...StyleSheet.absoluteFillObject,
+    alignSelf: 'stretch',
     borderWidth: 0,
     overflow: 'hidden',
     borderColor: 'transparent',