react-native-varia 0.3.0 → 0.4.0

package/lib/components/Slideshow.tsx

@@ -18,6 +18,7 @@ export type SlideshowRef = {
   handlePrev: () => void | null
 }
 
+const AnimatedView = Animated.createAnimatedComponent(View)
 type SlideshowVariants = UnistylesVariants<typeof SlideshowStyles>
 
 type Axis = 'x' | 'y'
@@ -174,7 +175,7 @@ const Slideshow = ({
             setContainerWidth(e.nativeEvent.layout.width)
             setContainerHeight(e.nativeEvent.layout.height)
           }}>
-          <Animated.View
+          <AnimatedView
             style={[
               styles.slidesContainer(`${NUM_PAGES * 100}%`, isHorizontal),
               animatedStyle,
@@ -189,7 +190,7 @@ const Slideshow = ({
                 {Slide}
               </View>
             ))}
-          </Animated.View>
+          </AnimatedView>
         </View>
       </GestureDetector>
     </View>
@@ -201,15 +202,24 @@ export default Slideshow
 const styles = StyleSheet.create({
   flex: flex => ({
     flex,
+    flexBasis: 'auto',
     flexDirection: 'row',
+    alignSelf: 'stretch',
+    _web: {
+      _classNames: 'slideshow-container-flex-base',
+    },
   }),
 
   container: () => ({
+    flexBasis: 'auto',
     width: '100%',
-    height: '100%',
+    maxHeight: '100%',
     overflow: 'hidden',
     justifyContent: 'flex-start',
     alignItems: 'flex-start',
+    _web: {
+      _classNames: 'slideshow-container-base',
+    },
   }),
 
   slidesContainer: (size, isHorizontal) => ({
@@ -217,6 +227,9 @@ const styles = StyleSheet.create({
     width: isHorizontal ? size : '100%',
     minHeight: isHorizontal ? '100%' : size,
     flex: 1,
+    _web: {
+      _classNames: 'slideshow-container-slides-container-base',
+    },
   }),
 
   slide: (size, isHorizontal) => ({
@@ -225,5 +238,8 @@ const styles = StyleSheet.create({
     height: isHorizontal ? '100%' : size,
     justifyContent: 'center',
     alignItems: 'center',
+    _web: {
+      _classNames: 'slideshow-container-slide-base',
+    },
   }),
 })

package/lib/components/Spinner.tsx

@@ -34,17 +34,23 @@ const BaseSpinner = ({
   ...props
 }: SpinnerProps) => {
   const resolvedColor = resolveColor(color, colors, colorPalette)
-  
+
   SpinnerStyles.useVariants({
     size,
   })
 
   // console.log('color', color)
 
-  const resolvedSize = getVariantValue(SpinnerStyles.base, 'size', size, 'width')
-  
+  const resolvedSize = getVariantValue(
+    SpinnerStyles.base,
+    'size',
+    size,
+    'width',
+  )
+
   return (
     <ActivityIndicator
+      testID="spinner"
       color={resolvedColor}
       size={resolvedSize}
       {...props}

package/lib/components/Switch.tsx

@@ -1,4 +1,4 @@
-import {TouchableWithoutFeedback, View} from 'react-native'
+import {Platform, TouchableWithoutFeedback, View} from 'react-native'
 import Animated, {
   useAnimatedStyle,
   useSharedValue,
@@ -9,13 +9,15 @@ import {StyleSheet, UnistylesVariants} from 'react-native-unistyles'
 import {useAnimatedVariantColor} from 'react-native-unistyles/reanimated'
 import {ReactNode, useLayoutEffect, useRef} from 'react'
 import {SwitchTokens, SwitchStyles} from '../theme/Switch.recipe'
-import {PalettesWithNestedKeys} from '../style/varia/types'
+import {AlignSelf, Flex, PalettesWithNestedKeys} from '../style/varia/types'
+import {getVariantValue} from '../style/varia/utils'
 
 const animations = {
   withSpring,
   withTiming,
 }
 
+const AnimatedView = Animated.createAnimatedComponent(View)
 type AnimationType = 'withSpring' | 'withTiming'
 
 type SwitchVariants = UnistylesVariants<typeof SwitchStyles>
@@ -25,9 +27,10 @@ type SwitchProps = SwitchVariants & {
   value?: boolean
   animation?: keyof typeof SwitchTokens.variants.animation
   onValueChange?: (value: boolean) => void
-  flex?: number
-  enabledIcon: ReactNode
-  disabledIcon: ReactNode
+  flex?: Flex
+  enabledIcon?: ReactNode
+  disabledIcon?: ReactNode
+  alignSelf?: AlignSelf
 }
 
 const Switch = ({
@@ -39,7 +42,8 @@ const Switch = ({
   onValueChange = () => {},
   variant = SwitchTokens.defaultProps.variant,
   size = SwitchTokens.defaultProps.size,
-  flex = 1,
+  flex = 0,
+  alignSelf = 'flex-start',
 }: SwitchProps) => {
   const animatedRef = useRef<View>(null)
 
@@ -62,15 +66,20 @@ const Switch = ({
             mass: 1,
           },
         }
-
-  const color = useAnimatedVariantColor(
-    SwitchStyles.container(colorPalette),
-    'backgroundColor',
-  )
-  const thumbColor = useAnimatedVariantColor(
-    SwitchStyles.thumb(colorPalette),
-    'backgroundColor',
-  )
+  const color =
+    Platform.OS === 'web'
+      ? {value: 'blue'}
+      : useAnimatedVariantColor(
+          SwitchStyles.container(colorPalette),
+          'backgroundColor',
+        )
+  const thumbColor =
+    Platform.OS === 'web'
+      ? {value: 'white'}
+      : useAnimatedVariantColor(
+          SwitchStyles.thumb(colorPalette),
+          'backgroundColor',
+        )
   const thumbEnabledPosition = useSharedValue(0)
   const animatedValue = useSharedValue(0)
   const containerWidth = useSharedValue(0)
@@ -78,10 +87,24 @@ const Switch = ({
   useLayoutEffect(() => {
     animatedRef.current?.measure((x, y, width) => {
       containerWidth.value = width
-      const thumbWidth = SwitchStyles.thumb(colorPalette).width
-      const padding = SwitchStyles.container(colorPalette).padding || 0
-      const trackBorderWidth =
-        SwitchStyles.container(colorPalette).borderWidth || 0
+      // const thumbWidth = SwitchStyles.thumb(colorPalette).width
+      const thumbWidth = getVariantValue(
+        SwitchStyles.thumb(colorPalette),
+        'size',
+        size,
+        'width',
+      )
+      // const padding = SwitchStyles.container(colorPalette).padding || 0
+      const padding =
+        getVariantValue(
+          SwitchStyles.container(colorPalette),
+          'size',
+          size,
+          'padding',
+        ) || 0
+      // const trackBorderWidth =
+      //   SwitchStyles.container(colorPalette).borderWidth || 0
+      const trackBorderWidth = 1
       thumbEnabledPosition.value =
         width - thumbWidth - trackBorderWidth * 2 - padding * 2
     })
@@ -133,14 +156,14 @@ const Switch = ({
           },
         )
       }}>
-      <Animated.View
+      <AnimatedView
         ref={animatedRef}
         style={[
-          styles.container(flex),
+          styles.container(flex, alignSelf),
           animatedStyle,
           SwitchStyles.container(colorPalette),
         ]}>
-        <Animated.View
+        <AnimatedView
           style={[
             styles.thumb,
             SwitchStyles.thumb(colorPalette),
@@ -148,8 +171,8 @@ const Switch = ({
             circleTranslationStyle,
           ]}>
           {Icon && Icon}
-        </Animated.View>
-      </Animated.View>
+        </AnimatedView>
+      </AnimatedView>
     </TouchableWithoutFeedback>
   )
 }
@@ -157,17 +180,25 @@ const Switch = ({
 export default Switch
 
 const styles = StyleSheet.create({
-  container: (flex: number) => ({
+  container: (flex: Flex, alignSelf: AlignSelf) => ({
     flexGrow: flex,
+    flexBasis: 'auto',
+    alignSelf,
     flexShrink: 0,
-    alignSelf: 'flex-start',
+    // alignSelf: 'flex-start',
     flexDirection: 'row',
     alignItems: 'center',
     margin: 0,
+    _web: {
+      _classNames: 'switch-container-base',
+    },
   }),
   thumb: {
     borderRadius: 9999,
     justifyContent: 'center',
     alignItems: 'center',
+    _web: {
+      _classNames: 'switch-thumb-base',
+    },
   },
 })

package/lib/components/Text.tsx

@@ -54,6 +54,9 @@ const styles = StyleSheet.create(theme => ({
       color: extractThemeColor(color, theme),
     }),
     ...(fontSize && {fontSize}),
+    _web: {
+      _classNames: 'text-base',
+    },
   }),
 }))
 

package/lib/components/Toast.tsx

@@ -1,23 +1,28 @@
-import React, {useEffect} from 'react'
-import {StyleSheet} from 'react-native'
+import React, {useEffect, useState} from 'react'
+import {StyleSheet} from 'react-native-unistyles'
 import Animated, {
   useSharedValue,
   useAnimatedStyle,
+  useAnimatedRef,
+  measure,
   withTiming,
   Easing,
 } from 'react-native-reanimated'
-import {scheduleOnRN} from 'react-native-worklets'
+import {scheduleOnRN, scheduleOnUI} from 'react-native-worklets'
 import {ToastStyles, ToastDefaultVariants} from '../theme/Toast.recipe'
 import {UnistylesVariants} from 'react-native-unistyles'
 import {PalettesWithNestedKeys} from '../style/varia/types'
 import Text from './Text'
+import {AnimatedHStack, VStack} from '../patterns/newPatterns'
 
 type ToastVariants = UnistylesVariants<typeof ToastStyles>
-type ToastProps = ToastVariants & {
+
+export type ToastProps = ToastVariants & {
   colorPalette?: PalettesWithNestedKeys
   message: string
   duration?: number
   onClose?: () => void
+  position?: 'top' | 'bottom'
 }
 
 const Toast: React.FC<ToastProps> = ({
@@ -27,13 +32,13 @@ const Toast: React.FC<ToastProps> = ({
   message,
   duration = 5000,
   onClose,
+  position = 'bottom',
 }) => {
-  ToastStyles.useVariants({
-    variant,
-    size,
-  })
+  ToastStyles.useVariants({variant, size})
+
+  const animatedRef = useAnimatedRef<Animated.View>()
+  const translateY = useSharedValue(0)
   const opacity = useSharedValue(0)
-  const translateY = useSharedValue(50) // Aparece desde abajo
 
   const animatedStyle = useAnimatedStyle(() => ({
     opacity: opacity.value,
@@ -41,49 +46,118 @@ const Toast: React.FC<ToastProps> = ({
   }))
 
   useEffect(() => {
-    // Animación de entrada
-    opacity.value = withTiming(1, {
-      duration: 200,
-      easing: Easing.out(Easing.ease),
-    })
-    translateY.value = withTiming(0, {
-      duration: 200,
-      easing: Easing.out(Easing.ease),
-    })
+    scheduleOnUI(() => {
+      'worklet'
+      const m = measure(animatedRef)
+      if (m === null) return
+      const height = m.height
+
+      translateY.value = position === 'bottom' ? height : -height
+      opacity.value = 0
 
-    // Animación de salida
-    const timeout = setTimeout(() => {
-      opacity.value = withTiming(0, {duration: 300})
-      translateY.value = withTiming(50, {duration: 300}, () => {
-        if (onClose) scheduleOnRN(onClose)
+      translateY.value = withTiming(0, {
+        duration: 200,
+        easing: Easing.out(Easing.ease),
+      })
+      opacity.value = withTiming(1, {
+        duration: 200,
+        easing: Easing.out(Easing.ease),
       })
-    }, duration)
 
-    return () => clearTimeout(timeout)
+      const timeout = setTimeout(() => {
+        opacity.value = withTiming(0, {duration: 300})
+        translateY.value = withTiming(
+          position === 'bottom' ? height : -height,
+          {duration: 300},
+          () => {
+            if (onClose) {
+              scheduleOnRN(onClose)
+            }
+          },
+        )
+      }, duration)
+    })
   }, [])
 
   return (
-    <Animated.View
+    <VStack
       style={[
+        {
+          ...StyleSheet.absoluteFill,
+          justifyContent:
+            position === 'bottom' || !position ? 'flex-end' : 'flex-start',
+        },
         styles.container,
-        animatedStyle,
-        ToastStyles.container(colorPalette),
+        ToastStyles.root,
       ]}>
-      <Text style={ToastStyles.text(colorPalette)}>{message}</Text>
-    </Animated.View>
+      <AnimatedHStack
+        ref={animatedRef}
+        style={[animatedStyle, ToastStyles.container(colorPalette)]}>
+        <Text style={ToastStyles.text(colorPalette)}>{message}</Text>
+      </AnimatedHStack>
+    </VStack>
   )
 }
 
 const styles = StyleSheet.create({
   container: {
-    position: 'absolute',
-    bottom: 50,
-    // left: 20,
-    // right: 20,
-    padding: 15,
-    borderRadius: 8,
     alignItems: 'center',
+    overflow: 'hidden',
+    zIndex: 100,
+    pointerEvents: 'box-none',
+    _web: {
+      pointerEvents: 'none',
+      _classNames: 'toast-container-base',
+    },
   },
 })
 
 export default Toast
+
+type ToastItem = ToastProps & {id: number}
+
+let nextId = 0
+let enqueueToastInternal: ((opts: ToastProps) => number | void) | null = null
+
+export function showToast(opts: ToastProps): number | void {
+  if (enqueueToastInternal) {
+    return enqueueToastInternal(opts)
+  } else {
+    console.warn('ToastController not mounted — no toast shown')
+  }
+}
+
+export const ToastController: React.FC = () => {
+  const [currentToast, setCurrentToast] = useState<ToastItem | null>(null)
+  const [queue, setQueue] = useState<ToastItem[]>([])
+
+  useEffect(() => {
+    enqueueToastInternal = (opts: ToastProps) => {
+      const id = nextId++
+      const toastItem = {...opts, id}
+
+      setQueue(prev => [...prev, toastItem])
+      return id
+    }
+
+    return () => {
+      enqueueToastInternal = null
+    }
+  }, [])
+
+  const handleClose = () => {
+    setCurrentToast(null)
+  }
+
+  useEffect(() => {
+    if (!currentToast && queue.length > 0) {
+      const [nextToast, ...rest] = queue
+      setCurrentToast(nextToast)
+      setQueue(rest)
+    }
+  }, [currentToast, queue])
+
+  if (!currentToast) return null
+
+  return <Toast key={currentToast.id} {...currentToast} onClose={handleClose} />
+}