react-native-varia 0.4.0 → 0.4.2

package/lib/components/Accordion.tsx

@@ -77,7 +77,13 @@ function AccordionGroupRoot({
     })
   })
 
-  return <View style={styles.groupContainer(flex, alignSelf)}>{items}</View>
+  return (
+    <View
+      testID="varia-accordion-group-root"
+      style={styles.groupContainer(flex, alignSelf)}>
+      {items}
+    </View>
+  )
 }
 
 function AccordionGroupItem({
@@ -88,23 +94,28 @@ function AccordionGroupItem({
   children,
   isOpen = false,
   onToggle,
+  itemKey,
 }: AccordionItemProps) {
   AccordionStyles.useVariants({variant, size, active: isOpen})
   return (
     <AnimatedView
+      testID={`varia-accordion-group-item-${itemKey}`}
       layout={LinearTransition.duration(150)}
       style={[
         styles.itemContainer,
         AccordionStyles.itemContainer(colorPalette),
       ]}>
       <Pressable
+        testID={`varia-accordion-group-header-${itemKey}`}
         onPress={onToggle}
         style={[styles.header, AccordionStyles.header(colorPalette)]}>
         <Text style={AccordionStyles.headerTitle(colorPalette)}>{title}</Text>
       </Pressable>
 
       {isOpen && (
-        <View style={styles.contentContainer}>
+        <View
+          style={styles.contentContainer}
+          testID={`varia-accordion-group-content-${itemKey}`}>
           <View style={styles.innerContent}>{children}</View>
         </View>
       )}

package/lib/components/Checkbox.tsx

@@ -48,16 +48,24 @@ function Checkbox({
 
   return (
     <Pressable
+      testID="varia-checkbox-container"
       style={[styles.container, CheckboxStyles.container(colorPalette)]}
       onPress={handlePress}>
       <View
+        testID="varia-check-container"
         style={[
           styles.checkContainer,
           CheckboxStyles.checkContainer(colorPalette),
         ]}>
-        {isChecked && <Check size={checkSize} color={checkColor} />}
+        {isChecked && (
+          <Check testID="varia-check" size={checkSize} color={checkColor} />
+        )}
       </View>
-      <Text style={CheckboxStyles.label(colorPalette)}>{children}</Text>
+      <Text
+        testID="varia-checkbox-label"
+        style={CheckboxStyles.label(colorPalette)}>
+        {children}
+      </Text>
     </Pressable>
   )
 }
@@ -81,9 +89,22 @@ const styles = StyleSheet.create({
 
 export default Checkbox
 
-const Check = ({size, color}: {size: string; color: string}) => {
+const Check = ({
+  size,
+  color,
+  testID,
+}: {
+  size: string
+  color: string
+  testID?: string
+}) => {
   return (
-    <Svg width={size} height={size} viewBox="0 0 16 13" fill="none">
+    <Svg
+      testID={testID}
+      width={size}
+      height={size}
+      viewBox="0 0 16 13"
+      fill="none">
       <Line
         x1="1.64402"
         y1="6.05591"

package/lib/components/Divider.tsx

@@ -17,8 +17,13 @@ const Divider = ({
   colorPalette?: PalettesWithNestedKeys
 }) => {
   return (
-    <View style={styles.container(size, axis, margin)}>
-      <View style={[styles.divider(color, colorPalette, size, axis)]} />
+    <View
+      testID="varia-divider-container"
+      style={styles.container(size, axis, margin)}>
+      <View
+        testID="varia-divider"
+        style={[styles.divider(color, colorPalette, size, axis)]}
+      />
     </View>
   )
 }

package/lib/components/Drawer.tsx

@@ -1,10 +1,18 @@
 import React, {
   createContext,
   useContext,
+  useEffect,
   useImperativeHandle,
   useMemo,
+  useState,
 } from 'react'
-import {Platform, TouchableWithoutFeedback, View} from 'react-native'
+import {
+  Dimensions,
+  Keyboard,
+  Platform,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native'
 import {Gesture, GestureDetector} from 'react-native-gesture-handler'
 import Animated, {
   measure,
@@ -228,8 +236,29 @@ const DrawerSliderInternal = ({
 
   DrawerStyles.useVariants({variant})
 
+  const [keyboardHeight, setKeyboardHeight] = useState<number>(0)
+
+  useEffect(() => {
+    const showSub = Keyboard.addListener('keyboardDidShow', e => {
+      if (e.endCoordinates.height < 50) return // ignoramos eventos “prematuros”
+
+      console.log(e.endCoordinates.height)
+      setKeyboardHeight(e.endCoordinates.height)
+    })
+    const hideSub = Keyboard.addListener('keyboardDidHide', () => {
+      setKeyboardHeight(0)
+    })
+    return () => {
+      showSub.remove()
+      hideSub.remove()
+    }
+  }, [])
+
   const screenHeight =
-    UnistylesRuntime.screen.height - UnistylesRuntime.insets.top
+    Dimensions.get('window').height - UnistylesRuntime.insets.top
+
+  // const screenHeight =
+  //   UnistylesRuntime.screen.height - UnistylesRuntime.insets.top
   const screenWidth = UnistylesRuntime.screen.width
 
   const animations = {withSpring, withTiming}
@@ -251,7 +280,10 @@ const DrawerSliderInternal = ({
     )
   }
 
+  const initialized = useSharedValue(false)
+
   const onLayout = () => {
+    if (initialized.value) return
     const _screenHeight = screenHeight
     const _screenWidth = screenWidth
     const _axis = axis
@@ -275,6 +307,7 @@ const DrawerSliderInternal = ({
         resolvedSnapPoints.value = resolved
         translate.value = resolved[0]
         context.value = {position: resolved[0], snapPoint: 0}
+        initialized.value = true
       }
     })
   }
@@ -446,7 +479,7 @@ const DrawerSliderInternal = ({
     return {
       transform: [
         axis === 'y'
-          ? {translateY: translate.value}
+          ? {translateY: translate.value - keyboardHeight}
           : {translateX: translate.value},
       ],
     }

package/lib/components/Field.tsx

@@ -40,6 +40,7 @@ const FieldRoot = ({
 
   return (
     <View
+      testID="varia-field-root"
       style={[
         styles.root(flex),
         FieldStyles.root(colorPalette),
@@ -71,7 +72,11 @@ const FieldLabel = ({children, ...props}: FieldLabelProps) => {
 
   FieldStyles.useVariants({variant, size})
 
-  return <Text style={FieldStyles.label(colorPalette)}>{children}</Text>
+  return (
+    <Text testID="varia-field-label" style={FieldStyles.label(colorPalette)}>
+      {children}
+    </Text>
+  )
 }
 
 type FieldErrorProps = {
@@ -96,7 +101,10 @@ const FieldError = ({...props}: FieldErrorProps) => {
   FieldStyles.useVariants({size, variant})
 
   return (
-    <Text size={size} color={FieldStyles.error(colorPalette).color}>
+    <Text
+      testID="varia-field-error"
+      size={size}
+      color={FieldStyles.error(colorPalette).color}>
       {error}
     </Text>
   )

package/lib/components/FloatingAction.tsx

@@ -0,0 +1,216 @@
+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
+      testID="varia-floating-action-item"
+      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',
+  )
+  return (
+    <View
+      testID="varia-floating-action-container"
+      style={[
+        styles.buttonContainer(top, bottom, left, right),
+        FloatingActionStyles.buttonContainer(colorPalette),
+      ]}>
+      <AnimatedPressable
+        testID="varia-floating-action-button"
+        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/IconWrapper.tsx

@@ -68,7 +68,7 @@ const Icon = ({
       <Svg
         width={size || width}
         height={size || height}
-        viewBox="0 0 24 24"
+        viewBox="0 0 23 23"
         // viewBox={`0 0 ${viewBoxWidth} ${viewBoxHeight}`}
         fill="none"
         {...rest}>

package/lib/components/Input.tsx

@@ -129,9 +129,11 @@ const Input = ({
 
   return (
     <View
+      testID="varia-input-container"
       style={styles.container(flex, direction, alignSelf, textAlignVertical)}>
       {IconRendered}
       <TextInput
+        testID="varia-input"
         editable={!disabled}
         style={[
           styles.input(

package/lib/theme/Drawer.recipe.tsx

@@ -65,23 +65,11 @@ export const DrawerStyles = StyleSheet.create((theme, rt) => ({
         card: {
           boxShadow: 'none',
           borderRadius: theme.radii.lg,
-          // marginHorizontal: theme.spacing[3],
           borderWidth: 2,
           borderColor: theme.colors.border.default,
-          // height: rt.screen.height,
-          // height: 'auto',
           alignSelf: 'auto',
           maxWidth: '90%',
         },
-        new: {
-          maxWidth: '80%',
-        },
-        iglooroom: {
-          padding: 0,
-          boxShadow: 'none',
-          borderRadius: theme.radii.none,
-          backgroundColor: 'transparent',
-        },
       },
     },
   }),

package/lib/theme/FloatingAction.tsx

@@ -0,0 +1,117 @@
+import {StyleSheet} from 'react-native-unistyles'
+import {PalettesWithNestedKeys} from '../style/varia/types'
+import {textStyle} from '../style/varia/textStyles'
+
+export const FloatingActionDefaultVariants = {
+  variant: 'solid',
+  size: 'md',
+} as const
+
+export const FloatingActionStyles = StyleSheet.create(theme => ({
+  buttonContainer: (colorPalette: PalettesWithNestedKeys) => ({
+    variants: {
+      variant: {
+        solid: {},
+        subtle: {},
+        outline: {},
+        ghost: {},
+      },
+      size: {
+        sm: {},
+        md: {},
+        lg: {},
+      },
+    },
+  }),
+  button: (colorPalette: PalettesWithNestedKeys) => ({
+    borderRadius: theme.radii.full,
+    variants: {
+      variant: {
+        solid: {
+          backgroundColor: theme.colors[colorPalette].default,
+        },
+        outline: {
+          borderWidth: 1,
+          borderColor: theme.colors[colorPalette].a7,
+        },
+        subtle: {
+          backgroundColor: theme.colors[colorPalette]['a3'],
+        },
+        ghost: {
+          backgroundColor: 'transparent',
+        },
+      },
+      size: {
+        sm: {
+          height: theme.sizes['8'],
+          width: theme.sizes['8'],
+        },
+        md: {
+          height: theme.sizes['10'],
+          width: theme.sizes['10'],
+        },
+        lg: {
+          height: theme.sizes['16'],
+          width: theme.sizes['16'],
+        },
+      },
+    },
+  }),
+  buttonIcon: (colorPalette: PalettesWithNestedKeys) => ({
+    variants: {
+      variant: {
+        solid: {
+          color: theme.colors.fg.default,
+        },
+        outline: {
+          color: theme.colors[colorPalette].text,
+        },
+        ghost: {
+          color: theme.colors.gray.text,
+        },
+        subtle: {
+          color: theme.colors[colorPalette].text,
+        },
+      },
+      size: {
+        sm: {},
+        md: {},
+        lg: {},
+      },
+    },
+  }),
+  item: (colorPalette: PalettesWithNestedKeys) => ({
+    borderRadius: theme.radii.full,
+    variants: {
+      variant: {
+        solid: {
+          backgroundColor: theme.colors[colorPalette].default,
+        },
+        outline: {
+          borderWidth: 1,
+          borderColor: theme.colors[colorPalette].a7,
+        },
+        subtle: {
+          backgroundColor: theme.colors[colorPalette]['a3'],
+        },
+        ghost: {
+          backgroundColor: 'transparent',
+        },
+      },
+      size: {
+        sm: {
+          height: theme.sizes['8'],
+          width: theme.sizes['8'],
+        },
+        md: {
+          height: theme.sizes['10'],
+          width: theme.sizes['10'],
+        },
+        lg: {
+          height: theme.sizes['16'],
+          width: theme.sizes['16'],
+        },
+      },
+    },
+  }),
+}))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-varia",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "bin": {
     "varia": "bin/cli.js"
   },