react-native-varia 0.4.1 → 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

@@ -89,6 +89,7 @@ function Item({children, onPress, ...props}: ItemProps) {
 
   return (
     <AnimatedPressable
+      testID="varia-floating-action-item"
       style={[
         animatedStyles,
         styles.itemButton,
@@ -150,15 +151,15 @@ function Root({
     variant,
     'color',
   )
-  console.log('🚀 ~ iconColor:', iconColor)
-
   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,

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

@@ -73,6 +73,11 @@ export const FloatingActionStyles = StyleSheet.create(theme => ({
           color: theme.colors[colorPalette].text,
         },
       },
+      size: {
+        sm: {},
+        md: {},
+        lg: {},
+      },
     },
   }),
   item: (colorPalette: PalettesWithNestedKeys) => ({

package/package.json

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