react-native-varia 0.3.0 → 0.4.1

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} />
+}

package/lib/patterns/index.tsx

@@ -1,102 +1,331 @@
-import React from 'react'
+import React, {useMemo} from 'react'
 import {Children, useLayoutEffect, useRef, useState} from 'react'
 import type {ReactNode} from 'react'
 import {ScrollView, View} from 'react-native'
 import type {StyleProp, ViewProps, ViewStyle} from 'react-native'
+import Animated, {AnimatedRef} from 'react-native-reanimated'
 import {StyleSheet, UnistylesRuntime} from 'react-native-unistyles'
 
-type SpacingValue = number | string
-
-export interface SpacingProps {
-  m?: SpacingValue
-  mt?: SpacingValue
-  mb?: SpacingValue
-  ml?: SpacingValue
-  mr?: SpacingValue
-  mx?: SpacingValue
-  my?: SpacingValue
-  p?: SpacingValue
-  pt?: SpacingValue
-  pb?: SpacingValue
-  pl?: SpacingValue
-  pr?: SpacingValue
-  px?: SpacingValue
-  py?: SpacingValue
-
+interface StackProps {
+  backgroundColor?: ViewStyle['backgroundColor']
+  bg?: ViewStyle['backgroundColor']
+  width?: ViewStyle['width']
+  w?: ViewStyle['width']
+  minWidth?: ViewStyle['width']
+  maxWidth?: ViewStyle['width']
+  height?: ViewStyle['height']
+  h?: ViewStyle['height']
+  minHeight?: ViewStyle['height']
+  maxHeight?: ViewStyle['height']
+  borderColor?: ViewStyle['borderColor']
+  borderWidth?: ViewStyle['borderWidth']
+  borderStyle?: ViewStyle['borderStyle']
+  borderRadius?: ViewStyle['borderRadius']
+  br?: ViewStyle['borderRadius']
   alignSelf?: ViewStyle['alignSelf']
-
   alignItems?: ViewStyle['alignItems']
   justifyContent?: ViewStyle['justifyContent']
+  flex?: ViewStyle['flex']
+  flexShrink?: ViewStyle['flexShrink']
+  flexGrow?: ViewStyle['flexGrow']
+  flexBasis?: ViewStyle['flexBasis']
+  flexWrap?: ViewStyle['flexWrap']
+  gap?: ViewStyle['gap']
+  m?: ViewStyle['margin']
+  mt?: ViewStyle['marginTop']
+  mb?: ViewStyle['marginBottom']
+  ml?: ViewStyle['marginLeft']
+  mr?: ViewStyle['marginRight']
+  mx?: ViewStyle['marginHorizontal']
+  my?: ViewStyle['marginVertical']
+  margin?: ViewStyle['margin']
+  marginVertical?: ViewStyle['marginVertical']
+  marginHorizontal?: ViewStyle['marginHorizontal']
+  marginTop?: ViewStyle['marginTop']
+  marginBottom?: ViewStyle['marginBottom']
+  marginLeft?: ViewStyle['marginLeft']
+  marginRight?: ViewStyle['marginRight']
+  p?: ViewStyle['padding']
+  pt?: ViewStyle['paddingVertical']
+  pb?: ViewStyle['paddingVertical']
+  pl?: ViewStyle['paddingLeft']
+  pr?: ViewStyle['paddingRight']
+  px?: ViewStyle['paddingHorizontal']
+  py?: ViewStyle['paddingVertical']
+  padding?: ViewStyle['padding']
+  paddingVertical?: ViewStyle['paddingVertical']
+  paddingHorizontal?: ViewStyle['paddingHorizontal']
+  paddingTop?: ViewStyle['paddingTop']
+  paddingBottom?: ViewStyle['paddingBottom']
+  paddingLeft?: ViewStyle['paddingLeft']
+  paddingRight?: ViewStyle['paddingRight']
+  children?: React.ReactNode
+  // style?: ViewStyle
+  style?: StyleProp<ViewStyle>
+  align?: 'center' | 'vCenter' | 'hCenter'
 }
 
-type LayoutProps = {
-  center?: boolean
-  vCenter?: boolean
-  hCenter?: boolean
-  flex?: number
-  gap?: number
+function mapProps(props: StackProps) {
+  const stylesArr: any[] = []
+
+  Object.entries(props).forEach(([key, value]) => {
+    if (value == null) return
+
+    const fn = (stackStyles as any)[key]
+    if (typeof fn === 'function') {
+      stylesArr.push(fn(value))
+    }
+  })
+
+  return stylesArr
 }
 
-export type HStackProps = SpacingProps &
-  LayoutProps &
-  Omit<React.ComponentProps<'View'>, keyof SpacingProps | keyof LayoutProps>
+const VStack = ({children, style, align, ...props}: StackProps) => {
+  stackStyles.useVariants({align})
+  const styleArr = useMemo(() => mapProps(props), [props])
 
-export type HstackProps = {
-  children?: ReactNode
-  style?: StyleProp<ViewStyle>
-  center?: boolean
-  vCenter?: boolean
-  hCenter?: boolean
-  flex?: number
-  gap?: number
-  stretch?: boolean
-} & ViewProps
+  return (
+    <View style={[stackStyles.stack, stackStyles.vstack, styleArr, style]}>
+      {children}
+    </View>
+  )
+}
+
+const HStack = ({children, style, align, ...props}: StackProps) => {
+  stackStyles.useVariants({align})
+  const styleArr = useMemo(() => mapProps(props), [props])
 
-const HStack: React.FC<HstackProps> = ({
-  children,
-  style,
-  center,
-  vCenter,
-  hCenter,
-  flex = 0,
-  gap = 0,
-  stretch,
-  ...props
-}) => {
   return (
-    <View
-      style={[
-        styles.hStack(center, vCenter, hCenter, gap, flex, stretch),
-        style,
-      ]}
-      {...props}>
+    <View style={[stackStyles.stack, stackStyles.hstack, styleArr, style]}>
       {children}
     </View>
   )
 }
-const VStack: React.FC<HstackProps> = ({
+const AnimatedView = Animated.createAnimatedComponent(View)
+
+const AnimatedHStack = ({
   children,
   style,
-  center,
-  vCenter,
-  hCenter,
-  flex = 0,
-  gap = 0,
-  stretch,
+  align,
+  ref,
   ...props
+}: StackProps & {
+  ref?: AnimatedRef<Animated.View>
 }) => {
+  stackStyles.useVariants({align})
+  const styleArr = useMemo(() => mapProps(props), [props])
+
   return (
-    <View
-      style={[
-        styles.vStack(center, vCenter, hCenter, gap, flex, stretch),
-        style,
-      ]}
-      {...props}>
+    <AnimatedView
+      ref={ref && ref}
+      style={[stackStyles.stack, stackStyles.vstack, styleArr, style]}>
       {children}
-    </View>
+    </AnimatedView>
   )
 }
 
+const stackStyles = StyleSheet.create({
+  stack: {},
+  vstack: {
+    flexDirection: 'column',
+    variants: {
+      align: {
+        center: {
+          alignItems: 'center',
+          justifyContent: 'center',
+        },
+        vCenter: {
+          justifyContent: 'center',
+        },
+        hCenter: {
+          alignItems: 'center',
+        },
+      },
+    },
+  },
+  hstack: {
+    flexDirection: 'row',
+    variants: {
+      align: {
+        center: {
+          alignItems: 'center',
+          justifyContent: 'center',
+        },
+        vCenter: {
+          alignItems: 'center',
+        },
+        hCenter: {
+          justifyContent: 'center',
+        },
+      },
+    },
+  },
+
+  backgroundColor: value => ({
+    backgroundColor: value,
+  }),
+  bg: value => ({
+    backgroundColor: value,
+  }),
+
+  width: value => ({
+    width: value,
+  }),
+  w: value => ({
+    width: value,
+  }),
+  minWidth: value => ({
+    minWidth: value,
+  }),
+  maxWidth: value => ({
+    maxWidth: value,
+  }),
+  height: value => ({
+    height: value,
+  }),
+  h: value => ({
+    height: value,
+  }),
+  minHeight: value => ({
+    minHeight: value,
+  }),
+  maxHeight: value => ({
+    maxHeight: value,
+  }),
+
+  borderColor: value => ({
+    borderColor: value,
+  }),
+  borderWidth: value => ({
+    borderWidth: value,
+  }),
+  borderStyle: value => ({
+    borderStyle: value,
+  }),
+  borderRadius: value => ({
+    borderRadius: value,
+  }),
+  br: value => ({
+    borderRadius: value,
+  }),
+
+  flex: value => ({
+    flex: value,
+  }),
+  flexShrink: value => ({
+    flexShrink: value,
+  }),
+  flexGrow: value => ({
+    flexGrow: value,
+  }),
+  flexBasis: value => ({
+    flexBasis: value,
+  }),
+  flexWrap: value => ({
+    flexWrap: value,
+  }),
+  alignSelf: value => ({
+    alignSelf: value,
+  }),
+  alignItems: value => ({
+    alignItems: value,
+  }),
+  justifyContent: value => ({
+    justifyContent: value,
+  }),
+  gap: value => ({
+    gap: value,
+  }),
+
+  m: value => ({
+    margin: value,
+  }),
+  mt: value => ({
+    marginTop: value,
+  }),
+  mb: value => ({
+    marginBottom: value,
+  }),
+  ml: value => ({
+    marginLeft: value,
+  }),
+  mr: value => ({
+    marginRight: value,
+  }),
+  mx: value => ({
+    marginHorizontal: value,
+  }),
+  my: value => ({
+    marginVertical: value,
+  }),
+  margin: value => ({
+    margin: value,
+  }),
+  marginVertical: value => ({
+    marginVertical: value,
+  }),
+  marginHorizontal: value => ({
+    marginHorizontal: value,
+  }),
+  marginLeft: value => ({
+    marginLeft: value,
+  }),
+  marginRight: value => ({
+    marginRight: value,
+  }),
+  marginTop: value => ({
+    marginTop: value,
+  }),
+  marginBottom: value => ({
+    marginBottom: value,
+  }),
+
+  p: value => ({
+    padding: value,
+  }),
+  pt: value => ({
+    paddingTop: value,
+  }),
+  pb: value => ({
+    paddingBottom: value,
+  }),
+  pl: value => ({
+    paddingLeft: value,
+  }),
+  pr: value => ({
+    paddingRight: value,
+  }),
+  px: value => ({
+    paddingHorizontal: value,
+  }),
+  py: value => ({
+    paddingVertical: value,
+  }),
+  padding: value => ({
+    padding: value,
+  }),
+  paddingHorizontal: value => ({
+    paddingHorizontal: value,
+  }),
+  paddingVertical: value => ({
+    paddingVertical: value,
+  }),
+  paddingLeft: value => ({
+    paddingLeft: value,
+  }),
+  paddingRight: value => ({
+    paddingRight: value,
+  }),
+  paddingTop: value => ({
+    paddingTop: value,
+  }),
+  paddingBottom: value => ({
+    paddingBottom: value,
+  }),
+})
+
+export {VStack, HStack, AnimatedHStack}
+
 export const VSpacer = ({size}: {size?: number}) => {
   return (
     <View
@@ -126,26 +355,6 @@ export const FlexSpacer = () => {
     />
   )
 }
-const styles = StyleSheet.create(() => ({
-  hStack: (center, vCenter, hCenter, gap, flex, stretch) => ({
-    flex,
-    gap,
-    flexDirection: 'row',
-    alignItems: center ? 'center' : vCenter ? 'center' : 'stretch',
-    justifyContent: center ? 'center' : hCenter ? 'center' : 'flex-start',
-    ...(stretch ? {alignSelf: 'stretch'} : {}),
-  }),
-  vStack: (center, vCenter, hCenter, gap, flex, stretch) => ({
-    flex,
-    gap,
-    flexDirection: 'column',
-    alignItems: center ? 'center' : vCenter ? 'center' : 'stretch',
-    justifyContent: center ? 'center' : hCenter ? 'center' : 'flex-start',
-    ...(stretch ? {alignSelf: 'stretch'} : {}),
-  }),
-}))
-
-export {HStack, VStack}
 
 export const gap = (size: number) => ({
   gap: size,