react-native-varia 0.3.0 → 0.4.1

package/lib/components/Accordion.tsx

@@ -2,10 +2,16 @@ import React, {ReactNode, useState} from 'react'
 import {View, Pressable} from 'react-native'
 import Animated from 'react-native-reanimated'
 import {LinearTransition} from 'react-native-reanimated'
-import {StyleSheet} from 'react-native-unistyles'
+import {StyleSheet, UnistylesVariants} from 'react-native-unistyles'
 import Text from './Text'
+import {AccordionStyles, AccordionDefaultVariants} from '../theme/Accordion'
+import {AlignSelf, Flex, PalettesWithNestedKeys} from '../style/varia/types'
 
-type AccordionItemProps = {
+const AnimatedView = Animated.createAnimatedComponent(View)
+type AccordionVariants = UnistylesVariants<typeof AccordionStyles>
+
+type AccordionItemProps = AccordionVariants & {
+  colorPalette?: PalettesWithNestedKeys
   title: string
   itemKey: string
   children: ReactNode
@@ -14,10 +20,12 @@ type AccordionItemProps = {
   scrollViewRef?: any
 }
 
-type AccordionGroupRootProps = {
+type AccordionGroupRootProps = AccordionVariants & {
   children: ReactNode
   defaultOpenKeys?: string[]
   allowMultiple?: boolean
+  flex?: Flex
+  alignSelf?: AlignSelf
 }
 
 export const AccordionGroup = {
@@ -26,9 +34,13 @@ export const AccordionGroup = {
 }
 
 function AccordionGroupRoot({
+  variant = AccordionDefaultVariants.variant,
+  size = AccordionDefaultVariants.size,
   children,
   defaultOpenKeys = [],
   allowMultiple = false,
+  flex = 1,
+  alignSelf = 'auto',
 }: AccordionGroupRootProps) {
   const [openKeys, setOpenKeys] = useState<Set<string>>(
     () => new Set(defaultOpenKeys),
@@ -52,31 +64,43 @@ function AccordionGroupRoot({
 
   const items = React.Children.map(children, child => {
     if (!React.isValidElement(child)) return child
-    const cp = child.props as AccordionItemProps
-    const key = cp.itemKey
+
+    const element = child as React.ReactElement<AccordionItemProps>
+    const key = element.props.itemKey
     const isOpen = openKeys.has(key)
-    return React.cloneElement(child, {
+
+    return React.cloneElement(element, {
       isOpen,
+      variant,
+      size,
       onToggle: () => toggleItem(key),
     })
   })
 
-  return <View style={styles.groupContainer}>{items}</View>
+  return <View style={styles.groupContainer(flex, alignSelf)}>{items}</View>
 }
 
 function AccordionGroupItem({
+  variant = AccordionDefaultVariants.variant,
+  size = AccordionDefaultVariants.size,
+  colorPalette = 'accent',
   title,
   children,
   isOpen = false,
   onToggle,
 }: AccordionItemProps) {
+  AccordionStyles.useVariants({variant, size, active: isOpen})
   return (
-    <Animated.View
-      // Aquí aplicas la transición de layout
+    <AnimatedView
       layout={LinearTransition.duration(150)}
-      style={styles.itemContainer}>
-      <Pressable onPress={onToggle} style={styles.header}>
-        <Text style={styles.headerText}>{title}</Text>
+      style={[
+        styles.itemContainer,
+        AccordionStyles.itemContainer(colorPalette),
+      ]}>
+      <Pressable
+        onPress={onToggle}
+        style={[styles.header, AccordionStyles.header(colorPalette)]}>
+        <Text style={AccordionStyles.headerTitle(colorPalette)}>{title}</Text>
       </Pressable>
 
       {isOpen && (
@@ -84,30 +108,46 @@ function AccordionGroupItem({
           <View style={styles.innerContent}>{children}</View>
         </View>
       )}
-    </Animated.View>
+    </AnimatedView>
   )
 }
 
 const styles = StyleSheet.create({
-  groupContainer: {},
+  groupContainer: (flex: Flex, alignSelf: AlignSelf) => ({
+    flex,
+    alignSelf,
+    flexBasis: 'auto',
+    _web: {
+      _classNames: 'accordion-group-container-base',
+    },
+  }),
   itemContainer: {
     borderWidth: 1,
-    borderColor: '#ddd',
     borderRadius: 6,
     marginVertical: 8,
-    overflow: 'hidden', // importante para que no se vea contenido fuera
+    overflow: 'hidden',
+    _web: {
+      _classNames: 'accordion-item-container-base',
+    },
   },
   header: {
-    padding: 12,
-    backgroundColor: '#f0f0f0',
+    justifyContent: 'center',
+    _web: {
+      _classNames: 'accordion-header-base',
+    },
   },
   headerText: {
     fontSize: 16,
+    color: 'blue',
+    _web: {
+      _classNames: 'accordion-header-text-base',
+    },
   },
-  contentContainer: {
-    // no necesitamos animar altura manual, lo hace el layout
-  },
+  contentContainer: {},
   innerContent: {
     padding: 12,
+    _web: {
+      _classNames: 'accordion-item-content-base',
+    },
   },
 })

package/lib/components/Badge.tsx

@@ -80,6 +80,9 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     alignItems: 'center',
     justifyContent: 'center',
+    _web: {
+      _classNames: 'badge-base',
+    },
   },
   badgeAbsolute: (x, y) => ({
     position: 'absolute',
@@ -89,9 +92,15 @@ const styles = StyleSheet.create({
       {translateY: y === 'top' ? '-50%' : '50%'},
       {translateX: x === 'left' ? '-50%' : '50%'},
     ],
+    _web: {
+      _classNames: 'badge-absolute-base',
+    },
   }),
   text: {
     textAlign: 'center',
+    _web: {
+      _classNames: 'badge-text-base',
+    },
   },
   customStyle: style => ({
     ...style,

package/lib/components/Button.tsx

@@ -5,7 +5,7 @@ import {useMemo} from 'react'
 import {IconWrapperProps} from './IconWrapper'
 import Spinner, {SpinnerProps} from './Spinner'
 import {PalettesWithNestedKeys} from '../style/varia/types'
-import { getVariantValue } from '../style/varia/utils'
+import {getVariantValue} from '../style/varia/utils'
 
 type TextAdjustment = 'singleLine' | 'multiline' | 'adjustToFit'
 
@@ -23,6 +23,7 @@ type ButtonProps = ButtonVariants & {
   onPress: () => void
   loading?: boolean
   disabled?: boolean
+  activeOpacity?: number
   maxWidth?: number | string
   flex?: number
   textAdjustment?: TextAdjustment
@@ -41,6 +42,7 @@ const Button = ({
   colorPalette = 'accent',
   size = ButtonDefaultVariants.size,
   variant = ButtonDefaultVariants.variant,
+  activeOpacity = 0.6,
   onPress,
   text,
   loading = false,
@@ -57,7 +59,6 @@ const Button = ({
     variant,
     disabled,
   })
-    console.log("🚀 ~ size:", size)
 
   const getTextProps = useMemo(
     () => (): TextAdjustmentProps => {
@@ -78,7 +79,12 @@ const Button = ({
     [textAdjustment],
   )
 
-  const resolvedColor = getVariantValue(ButtonStyles.text(colorPalette), 'variant', variant, 'color')
+  const resolvedColor = getVariantValue(
+    ButtonStyles.text(colorPalette),
+    'variant',
+    variant,
+    'color',
+  )
 
   const IconComponent = icon?.component
   const IconRendered = IconComponent ? (
@@ -95,6 +101,8 @@ const Button = ({
 
   return (
     <TouchableOpacity
+      role="button"
+      activeOpacity={activeOpacity}
       style={[
         styles.container(flex, maxWidth),
         ButtonStyles.container(colorPalette),
@@ -104,10 +112,7 @@ const Button = ({
       onPress={onPress}
       disabled={disabled || loading}>
       {loading ? (
-        <Spinner
-          size={size as SpinnerProps['size']}
-          color={resolvedColor}
-        />
+        <Spinner size={size as SpinnerProps['size']} color={resolvedColor} />
       ) : (
         <>
           {icon?.position === 'left' && IconRendered}
@@ -133,10 +138,16 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
-    flexShrink: 1,
+    flexBasis: 'auto',
+    _web: {
+      _classNames: 'button-container-base',
+    },
   }),
   text: {
     textAlign: 'center',
+    _web: {
+      _classNames: 'button-text-base',
+    },
   },
 })
 

package/lib/components/Checkbox.tsx

@@ -1,10 +1,11 @@
 import React, {useCallback} from 'react'
-import {View, Text, Pressable, StyleSheet} from 'react-native'
+import {View, Text, Pressable} from 'react-native'
+import {StyleSheet} from 'react-native-unistyles'
 import {UnistylesVariants} from 'react-native-unistyles'
 import {CheckboxDefaultVariants, CheckboxStyles} from '../theme/Checkbox.recipe'
 import {PalettesWithNestedKeys} from '../style/varia/types'
 import Svg, {Line} from 'react-native-svg'
-import { getVariantValue } from '../style/varia/utils'
+import {getVariantValue} from '../style/varia/utils'
 
 type CheckboxVariants = UnistylesVariants<typeof CheckboxStyles>
 
@@ -32,16 +33,18 @@ function Checkbox({
 
   const isChecked = checked
 
-  // const checkStyle = CheckboxStyles.check(colorPalette) as {
-  //   width: string
-  //   color: string
-  // }
-  // const checkSize = checkStyle.width
-  // const checkColor = checkStyle.color
-
-  const checkColor = getVariantValue(CheckboxStyles.check(colorPalette), 'variant', variant, 'color')
-  const checkSize = getVariantValue(CheckboxStyles.check(colorPalette), 'size', size, 'width')
-  
+  const checkColor = getVariantValue(
+    CheckboxStyles.check(colorPalette),
+    'variant',
+    variant,
+    'color',
+  )
+  const checkSize = getVariantValue(
+    CheckboxStyles.check(colorPalette),
+    'size',
+    size,
+    'width',
+  )
 
   return (
     <Pressable
@@ -63,10 +66,16 @@ const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
     alignItems: 'center',
+    _web: {
+      _classNames: 'checkbox-container-base',
+    },
   },
   checkContainer: {
     alignItems: 'center',
     justifyContent: 'center',
+    _web: {
+      _classNames: 'badge-check-container-base',
+    },
   },
 })
 

package/lib/components/CircleProgress.tsx

@@ -163,10 +163,18 @@ const styles = StyleSheet.create({
     flex,
     maxWidth: width,
     maxHeight: height,
+    flexBasis: 'auto',
+    _web: {
+      _classNames: 'circle-progress-container',
+    },
   }),
   childContainer: {
+    flexBasis: 'auto',
     justifyContent: 'center',
     alignItems: 'center',
+    _web: {
+      _classNames: 'circle-progress-child-container',
+    },
   },
 })
 

package/lib/components/Divider.tsx

@@ -34,6 +34,9 @@ const styles = StyleSheet.create(theme => ({
     maxHeight: axis === 'x' ? size : '100%',
     marginHorizontal: axis === 'x' ? margin : 0,
     marginVertical: axis === 'y' ? margin : 0,
+    _web: {
+      _classNames: 'divider-container-base',
+    },
   }),
   divider: (color, colorPalette, size, axis) => ({
     width: axis === 'y' ? size : '100%',
@@ -41,6 +44,9 @@ const styles = StyleSheet.create(theme => ({
     backgroundColor: color
       ? resolveColor(color, theme.colors, colorPalette)
       : theme.colors.fg.default,
+    _web: {
+      _classNames: 'divider-base',
+    },
   }),
 }))
 

package/lib/components/Drawer.tsx

@@ -4,7 +4,7 @@ import React, {
   useImperativeHandle,
   useMemo,
 } from 'react'
-import {TouchableWithoutFeedback} from 'react-native'
+import {Platform, TouchableWithoutFeedback, View} from 'react-native'
 import {Gesture, GestureDetector} from 'react-native-gesture-handler'
 import Animated, {
   measure,
@@ -145,6 +145,7 @@ const DrawerPositioner = ({
 const AnimatedTouchable = Animated.createAnimatedComponent(
   TouchableWithoutFeedback,
 )
+const AnimatedView = Animated.createAnimatedComponent(View)
 
 const DrawerOverlay = ({onPress}: {onPress?: () => void}) => {
   const {colorPalette, overlayOpacity, variant} = useDrawer()
@@ -169,11 +170,12 @@ const DrawerOverlay = ({onPress}: {onPress?: () => void}) => {
 
   return (
     <AnimatedTouchable onPress={onPress}>
-      <Animated.View
+      <AnimatedView
         style={[
           StyleSheet.absoluteFillObject,
           displayOverlayStyle,
           DrawerStyles.overlay(colorPalette),
+          {pointerEvents: 'auto'},
         ]}
       />
     </AnimatedTouchable>
@@ -452,16 +454,17 @@ const DrawerSliderInternal = ({
 
   return (
     <GestureDetector gesture={slideGesture}>
-      <Animated.View
+      <AnimatedView
         ref={viewRef}
         onLayout={onLayout}
         style={[
           styles.slider,
           blockAnimatedStyle,
           DrawerStyles.slider(colorPalette),
+          {pointerEvents: 'auto'},
         ]}>
         {children}
-      </Animated.View>
+      </AnimatedView>
     </GestureDetector>
   )
 }
@@ -482,6 +485,12 @@ const styles = StyleSheet.create((theme, rt) => ({
     left: 0,
     right: 0,
     bottom: 0,
+    pointerEvents: 'box-none',
+    _web: {
+      pointerEvents: 'none',
+      overflow: 'hidden',
+      _classNames: 'drawer-positioner-base',
+    },
   },
   slider: {
     flex: 1,
@@ -489,5 +498,8 @@ const styles = StyleSheet.create((theme, rt) => ({
     alignItems: 'center',
     justifyContent: 'flex-start',
     zIndex: 100,
+    _web: {
+      _classNames: 'drawer-slider-base',
+    },
   },
 }))

package/lib/components/Field.tsx

@@ -106,6 +106,10 @@ const styles = StyleSheet.create({
   root: (flex: Flex) => ({
     flex,
     flexDirection: 'column',
+    flexBasis: 'auto',
+    _web: {
+      _classNames: 'field-root',
+    },
   }),
 })
 

package/lib/components/FloatingAction.tsx

@@ -0,0 +1,215 @@
+import React, {createContext, useContext} from 'react'
+import {View, Pressable} from 'react-native'
+import Animated, {
+  withDelay,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+  withTiming,
+} from 'react-native-reanimated'
+import {StyleSheet, UnistylesVariants} from 'react-native-unistyles'
+import Plus from '../icons/Plus'
+import {
+  FloatingActionDefaultVariants,
+  FloatingActionStyles,
+} from '../theme/FloatingAction'
+import {ViewStyle} from 'react-native'
+import {PalettesWithNestedKeys} from '../style/varia/types'
+import {getVariantValue} from '../style/varia/utils'
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable)
+
+const SPRING_CONFIG = {
+  duration: 800,
+  overshootClamping: true,
+  dampingRatio: 0.8,
+}
+
+const FloatingActionContext = createContext<any>(null)
+
+const useFloatingContext = () => {
+  const ctx = useContext(FloatingActionContext)
+  if (!ctx)
+    throw new Error('FloatingAction.Item must be inside FloatingAction.Root')
+  return ctx
+}
+
+type ItemProps = FloatingActionVariants & {
+  children: React.ReactNode
+  onPress: () => void
+}
+
+function Item({children, onPress, ...props}: ItemProps) {
+  const {
+    direction,
+    gap,
+    isExpanded,
+    index,
+    variant,
+    size,
+    colorPalette = 'accent',
+  } = {...useFloatingContext(), ...props}
+  FloatingActionStyles.useVariants({
+    variant,
+    size,
+  })
+
+  const iconHeight = getVariantValue(
+    FloatingActionStyles.button(colorPalette),
+    'size',
+    size,
+    'height',
+  )
+  const animatedStyles = useAnimatedStyle(() => {
+    const multiplier = direction === 'toTop' ? -1 : 1
+    const OFFSET_FROM_MAIN = iconHeight + gap
+
+    const moveValue = isExpanded.value
+      ? (OFFSET_FROM_MAIN + (gap + iconHeight) * (index - 1)) * multiplier
+      : 0
+
+    const delay = index * 30
+
+    return {
+      opacity: withDelay(
+        delay,
+        withTiming(isExpanded.value ? 1 : 0, {duration: 150}),
+      ),
+      transform: [
+        {translateY: withDelay(delay, withSpring(moveValue, SPRING_CONFIG))},
+        {
+          scale: withDelay(
+            delay,
+            withTiming(isExpanded.value ? 1 : 0.95, {duration: 200}),
+          ),
+        },
+      ],
+    }
+  })
+
+  return (
+    <AnimatedPressable
+      style={[
+        animatedStyles,
+        styles.itemButton,
+        FloatingActionStyles.item(colorPalette),
+      ]}
+      onPress={onPress}>
+      {children}
+    </AnimatedPressable>
+  )
+}
+
+type directions = 'toTop' | 'toBottom'
+type FloatingActionVariants = UnistylesVariants<typeof FloatingActionStyles>
+type FloatingActionProps = FloatingActionVariants & {
+  colorPalette?: PalettesWithNestedKeys
+  gap?: ViewStyle['gap']
+  direction?: directions
+  top?: ViewStyle['top']
+  bottom?: ViewStyle['bottom']
+  right?: ViewStyle['right']
+  left?: ViewStyle['left']
+  children: React.ReactNode
+}
+
+function Root({
+  variant = FloatingActionDefaultVariants.variant,
+  size = FloatingActionDefaultVariants.size,
+  colorPalette = 'accent',
+  children,
+  gap = 10,
+  direction = 'toTop',
+  top = null,
+  bottom = null,
+  right = null,
+  left = null,
+}: FloatingActionProps) {
+  FloatingActionStyles.useVariants({
+    variant,
+    size,
+  })
+
+  const isExpanded = useSharedValue(false)
+
+  const plusIconStyle = useAnimatedStyle(() => ({
+    transform: [{rotate: withTiming(isExpanded.value ? '45deg' : '0deg')}],
+  }))
+
+  const arrayChildren = React.Children.toArray(children)
+
+  const iconHeight = getVariantValue(
+    FloatingActionStyles.button(colorPalette),
+    'size',
+    size,
+    'height',
+  )
+  const iconColor = getVariantValue(
+    FloatingActionStyles.buttonIcon(colorPalette),
+    'variant',
+    variant,
+    'color',
+  )
+  console.log('🚀 ~ iconColor:', iconColor)
+
+  return (
+    <View
+      style={[
+        styles.buttonContainer(top, bottom, left, right),
+        FloatingActionStyles.buttonContainer(colorPalette),
+      ]}>
+      <AnimatedPressable
+        onPress={() => (isExpanded.value = !isExpanded.value)}
+        style={[
+          plusIconStyle,
+          styles.button,
+          FloatingActionStyles.button(colorPalette),
+        ]}>
+        <Plus size={iconHeight - 20} color={iconColor} />
+      </AnimatedPressable>
+      {arrayChildren.map((child: any, i) => (
+        <FloatingActionContext.Provider
+          key={i}
+          value={{
+            direction,
+            gap,
+            isExpanded,
+            index: i + 1,
+            variant,
+            size,
+            colorPalette,
+          }}>
+          {child}
+        </FloatingActionContext.Provider>
+      ))}
+    </View>
+  )
+}
+
+const FloatingAction = {
+  Root,
+  Item,
+}
+export default FloatingAction
+
+const styles = StyleSheet.create({
+  buttonContainer: (top, bottom, left, right) => ({
+    position: 'absolute',
+    ...(top !== null && top !== undefined ? {top} : {}),
+    ...(bottom !== null && bottom !== undefined ? {bottom} : {}),
+    ...(left !== null && left !== undefined ? {left} : {}),
+    ...(right !== null && right !== undefined ? {right} : {}),
+    zIndex: 99,
+    alignItems: 'center',
+  }),
+  button: {
+    zIndex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  itemButton: {
+    position: 'absolute',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+})

package/lib/components/GradientBackground.tsx

@@ -75,6 +75,9 @@ const styles = StyleSheet.create({
     borderWidth: 0,
     overflow: 'hidden',
     borderColor: 'transparent',
+    _web: {
+      _classNames: 'gradient_background-container-base',
+    },
   },
 })