react-native-varia 0.4.2 → 0.4.4

package/lib/components/CircleProgress.tsx

@@ -169,6 +169,11 @@ const styles = StyleSheet.create({
     },
   }),
   childContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
     flexBasis: 'auto',
     justifyContent: 'center',
     alignItems: 'center',

package/lib/components/Drawer.tsx

@@ -240,9 +240,7 @@ const DrawerSliderInternal = ({
 
   useEffect(() => {
     const showSub = Keyboard.addListener('keyboardDidShow', e => {
-      if (e.endCoordinates.height < 50) return // ignoramos eventos “prematuros”
-
-      console.log(e.endCoordinates.height)
+      if (e.endCoordinates.height < 50) return
       setKeyboardHeight(e.endCoordinates.height)
     })
     const hideSub = Keyboard.addListener('keyboardDidHide', () => {

package/lib/components/Link.tsx

@@ -40,14 +40,16 @@ const Link = ({
   console.log(color)
   return (
     <TouchableOpacity
+      testID="varia-link"
       onPress={async () => {
         try {
           await Linking.openURL(url)
         } catch {
-          Alert.alert('No se pudo abrir este enlace')
+          Alert.alert('Could not open this link')
         }
       }}>
       <Text
+        testID="varia-link-text"
         size={size}
         variant={variant}
         fontSize={fontSize}

package/lib/components/Modal.tsx

@@ -91,11 +91,15 @@ const ModalOverlay = ({children, ...props}: ModalOverlayProps) => {
 
   return (
     <AnimatedView
+      testID="varia-modal-overlay"
       style={[styles.overlay, ModalStyles.overlay(colorPalette)]}
       entering={ModalTokens.animations.variants[animation]?.enteringOverlay}
       exiting={ModalTokens.animations.variants[animation]?.exitingOverlay}>
       <TouchableWithoutFeedback onPress={() => setIsOpen(false)}>
-        <View style={StyleSheet.absoluteFillObject} />
+        <View
+          testID="varia-modal-backdrop"
+          style={StyleSheet.absoluteFillObject}
+        />
       </TouchableWithoutFeedback>
       {children}
     </AnimatedView>
@@ -125,6 +129,7 @@ const ModalContent = ({children, ...props}: ModalContentProps) => {
 
   return (
     <AnimatedView
+      testID="varia-modal-content"
       style={[styles.content(), ModalStyles.content(colorPalette)]}
       entering={ModalTokens.animations.variants[animation]?.enteringContent}
       exiting={ModalTokens.animations.variants[animation]?.exitingContent}>
@@ -134,7 +139,11 @@ const ModalContent = ({children, ...props}: ModalContentProps) => {
 }
 
 const ModalHeader = ({children}: {children: React.ReactNode}) => {
-  return <View style={styles.header}>{children}</View>
+  return (
+    <View testID="varia-modal-header" style={styles.header}>
+      {children}
+    </View>
+  )
 }
 
 const ModalTitle = ({children, ...props}: {children: React.ReactNode}) => {
@@ -142,7 +151,11 @@ const ModalTitle = ({children, ...props}: {children: React.ReactNode}) => {
   const {variant, colorPalette = 'accent'} = {...context, ...props}
 
   ModalStyles.useVariants({variant})
-  return <Text style={ModalStyles.title(colorPalette)}>{children}</Text>
+  return (
+    <Text testID="varia-modal-title" style={ModalStyles.title(colorPalette)}>
+      {children}
+    </Text>
+  )
 }
 
 type ModalBodyProps = Omit<ModalVariants, 'variant'> & {
@@ -153,7 +166,7 @@ type ModalBodyProps = Omit<ModalVariants, 'variant'> & {
 }
 
 const ModalBody = ({children}: ModalBodyProps) => {
-  return <View>{children}</View>
+  return <View testID="varia-modal-body">{children}</View>
 }
 
 type CloseButtonProps = {
@@ -168,7 +181,7 @@ const CloseButton = ({
   color,
   ...rest
 }: CloseButtonProps) => (
-  <TouchableOpacity onPress={onClose}>
+  <TouchableOpacity testID="varia-modal-close-button" onPress={onClose}>
     <Svg
       width={scale * 24}
       height={scale * 24}

package/lib/components/NumberInput.tsx

@@ -125,6 +125,7 @@ const NumberInput = {
           direction,
         }}>
         <View
+          testID="varia-select-root"
           style={[
             simpleNumberInputstyles.rootContainer(flex, alignSelf),
             NumberInputStyles.container(colorPalette),
@@ -177,6 +178,7 @@ const NumberInput = {
     NumberInputStyles.useVariants({variant, size, distribution})
     return (
       <TextInput
+        testID="varia-select-input"
         style={[
           simpleNumberInputstyles.input(childFlex as number),
           NumberInputStyles.input(colorPalette),
@@ -222,6 +224,7 @@ const NumberInput = {
 
     return (
       <Pressable
+        testID="varia-select-increment"
         onPress={() => setValue(value + 1)}
         disabled={max !== undefined && value >= max}
         style={[
@@ -265,6 +268,7 @@ const NumberInput = {
 
     return (
       <Pressable
+        testID="varia-select-decrement"
         onPress={() => setValue(value - 1)}
         disabled={min !== undefined && value <= min}
         style={[

package/lib/components/RadioGroup.tsx

@@ -91,6 +91,7 @@ function Root({
   return (
     <RadioGroupContext.Provider value={contextValue}>
       <View
+        testID="varia-radio-group-root"
         style={[
           styles.root(
             flex,
@@ -139,6 +140,8 @@ function Item({children, value: itemValue}: PublicItemProps) {
 
   return (
     <Pressable
+      aria-checked={value === itemValue}
+      testID={`varia-radio-group-item-${value}`}
       style={({pressed}) => [
         styles.item,
         RadioGroupStyles.item(colorPalette, pressed),
@@ -172,7 +175,9 @@ function Indicator({
   })
 
   return (
-    <View style={RadioGroupStyles.control(colorPalette)}>
+    <View
+      testID="varia-radio-group-indicator"
+      style={RadioGroupStyles.control(colorPalette)}>
       <View style={RadioGroupStyles.indicator(colorPalette)} />
     </View>
   )
@@ -214,7 +219,7 @@ const styles = StyleSheet.create({
     alignSelf?: AlignSelf,
     justifyContent?: ViewStyle['justifyContent'],
     alignItems?: ViewStyle['alignItems'],
-    gap?: number,
+    gap?: Gap,
   ) => ({
     flex,
     flexDirection: direction,

package/lib/components/Select.tsx

@@ -116,7 +116,7 @@ const SelectRoot = ({
   )
 
   return (
-    <View style={[styles.container(flex, stretch)]}>
+    <View style={[styles.container(flex, stretch)]} testID="varia-select-root">
       {trigger &&
         React.cloneElement(trigger as ReactElement<TriggerProps>, {
           isOpen,
@@ -194,7 +194,8 @@ const SelectTrigger = ({
       style={({pressed}) => [
         styles.input(childFlex),
         SelectStyles.trigger(colorPalette, pressed),
-      ]}>
+      ]}
+      testID="varia-select-trigger">
       <Text>{selected ? selected.label : placeholder}</Text>
     </Pressable>
   )
@@ -214,7 +215,10 @@ const SelectOverlay = ({
   const {setIsOpen} = useSelect()
   return (
     <TouchableWithoutFeedback onPress={() => setIsOpen(false)}>
-      <View style={[styles.backdrop, SelectStyles.overlay(colorPalette)]} />
+      <View
+        style={[styles.backdrop, SelectStyles.overlay(colorPalette)]}
+        testID="varia-select-overlay"
+      />
     </TouchableWithoutFeedback>
   )
 }
@@ -231,7 +235,9 @@ const SelectContent = ({
   const {variant, size, colorPalette} = {...useSelect(), ...props}
   SelectStyles.useVariants({variant, size})
   return (
-    <View style={[styles.modalContent, SelectStyles.content(colorPalette)]}>
+    <View
+      style={[styles.modalContent, SelectStyles.content(colorPalette)]}
+      testID="varia-select-content">
       <ScrollView>{children}</ScrollView>
     </View>
   )
@@ -249,7 +255,10 @@ const SelectItem = ({value, label, ...props}: Option) => {
   const isSelected = selected === value
   SelectStyles.useVariants({variant, size})
   return (
-    <TouchableOpacity onPress={() => setValue(value)}>
+    <TouchableOpacity
+      onPress={() => setValue(value)}
+      testID="varia-select-item"
+      aria-selected={isSelected}>
       <View style={[styles.item, SelectStyles.item(colorPalette, isSelected)]}>
         <Text style={SelectStyles.itemText(colorPalette, isSelected)}>
           {label}

package/lib/components/Slider.tsx

@@ -273,6 +273,7 @@ const Slider = ({
 
   return (
     <View
+      testID="varia-slider-container"
       style={[
         styles.container(halfSize, flex, alignSelf),
         SliderStyles.container(colorPalette),
@@ -280,12 +281,14 @@ const Slider = ({
       {axis === 'x' && <View style={{width: halfSize}} />}
       <GestureDetector gesture={Gesture.Simultaneous(trackPan, tapGesture)}>
         <View
+          testID="varia-slider-maximun-track"
           style={[
             styles.maximumTrack(),
             SliderStyles.maximumTrack(colorPalette),
           ]}
           onLayout={handleTrackLayout}>
           <AnimatedView
+            testID="varia-slider-minimum-track"
             style={[
               styles.minimumTrack(halfSize),
               SliderStyles.minimumTrack(colorPalette),
@@ -295,7 +298,7 @@ const Slider = ({
 
           {steps && (
             <View style={[styles.stepsOverlay]} pointerEvents="none">
-              <View style={styles.steps}>
+              <View style={styles.steps} testID="varia-slider-steps">
                 {Array.from({length: steps + 1}, (_, index) => index).map(
                   (_, i) => (
                     <View
@@ -311,7 +314,7 @@ const Slider = ({
             </View>
           )}
           <GestureDetector gesture={slideGesture}>
-            <View style={styles.thumbContainerFull}>
+            <View style={styles.thumbContainerFull} testID="varia-slider-tumb">
               <AnimatedView style={[animatedThumb, {flex: 1}]}>
                 <View
                   style={[
@@ -350,7 +353,7 @@ const styles = StyleSheet.create(theme => ({
         },
         y: {
           // maxHeight: 'auto',
-          height: '100%',
+          // height: '100%',
           paddingTop: halfSize,
           paddingRight: 0,
           flexDirection: 'column',

package/lib/components/Slideshow.tsx

@@ -170,6 +170,7 @@ const Slideshow = ({
     <View style={styles.flex(flex)}>
       <GestureDetector gesture={slideGesture}>
         <View
+          testID="varia-slideshow"
           style={[styles.container(), SlideshowStyles.container(colorPalette)]}
           onLayout={e => {
             setContainerWidth(e.nativeEvent.layout.width)
@@ -182,6 +183,7 @@ const Slideshow = ({
             ]}>
             {slides.map((Slide, index) => (
               <View
+                testID={`varia-slides-slide-${index}`}
                 key={index}
                 style={[
                   styles.slide(`${slideSize}%`, isHorizontal),

package/lib/components/Switch.tsx

@@ -87,24 +87,30 @@ const Switch = ({
   useLayoutEffect(() => {
     animatedRef.current?.measure((x, y, width) => {
       containerWidth.value = width
-      // 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
+        ) ||
+        SwitchStyles.container(colorPalette).padding ||
+        0
+      const trackBorderWidth =
+        getVariantValue(
+          SwitchStyles.container(colorPalette),
+          'size',
+          size,
+          'borderWidth',
+        ) ||
+        SwitchStyles.container(colorPalette).borderWidth ||
+        0
       thumbEnabledPosition.value =
         width - thumbWidth - trackBorderWidth * 2 - padding * 2
     })
@@ -141,6 +147,7 @@ const Switch = ({
 
   return (
     <TouchableWithoutFeedback
+      testID="varia-switch"
       onPress={() => {
         if (isAnimating.value) return
         isAnimating.value = true
@@ -164,6 +171,7 @@ const Switch = ({
           SwitchStyles.container(colorPalette),
         ]}>
         <AnimatedView
+          testID="varia-switch-thumb"
           style={[
             styles.thumb,
             SwitchStyles.thumb(colorPalette),

package/lib/components/Toast.tsx

@@ -13,7 +13,7 @@ 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'
+import {AnimatedHStack, VStack} from '../patterns'
 
 type ToastVariants = UnistylesVariants<typeof ToastStyles>
 
@@ -81,6 +81,7 @@ const Toast: React.FC<ToastProps> = ({
 
   return (
     <VStack
+      testID="varia-toast"
       style={[
         {
           ...StyleSheet.absoluteFill,

package/lib/patterns/index.tsx

@@ -6,7 +6,7 @@ import type {StyleProp, ViewProps, ViewStyle} from 'react-native'
 import Animated, {AnimatedRef} from 'react-native-reanimated'
 import {StyleSheet, UnistylesRuntime} from 'react-native-unistyles'
 
-interface StackProps {
+interface StackProps extends ViewProps {
   backgroundColor?: ViewStyle['backgroundColor']
   bg?: ViewStyle['backgroundColor']
   width?: ViewStyle['width']
@@ -85,7 +85,9 @@ const VStack = ({children, style, align, ...props}: StackProps) => {
   const styleArr = useMemo(() => mapProps(props), [props])
 
   return (
-    <View style={[stackStyles.stack, stackStyles.vstack, styleArr, style]}>
+    <View
+      style={[stackStyles.stack, stackStyles.vstack, styleArr, style]}
+      {...props}>
       {children}
     </View>
   )
@@ -96,7 +98,9 @@ const HStack = ({children, style, align, ...props}: StackProps) => {
   const styleArr = useMemo(() => mapProps(props), [props])
 
   return (
-    <View style={[stackStyles.stack, stackStyles.hstack, styleArr, style]}>
+    <View
+      style={[stackStyles.stack, stackStyles.hstack, styleArr, style]}
+      {...props}>
       {children}
     </View>
   )

package/lib/theme/Slider.recipe.tsx

@@ -26,15 +26,41 @@ export const SliderStyles = StyleSheet.create(theme => ({
         },
       },
       size: {
-        sm: {},
-        md: {},
-        lg: {},
-        xl: {},
+        sm: {
+          borderRadius: theme.radii.lg,
+        },
+        md: {
+          borderRadius: theme.radii.xl,
+        },
+        lg: {
+          borderRadius: theme.radii['2xl'],
+        },
         flex: {},
         minimal: {},
       },
     },
     compoundVariants: [
+      {
+        size: 'sm',
+        variant: 'outline',
+        styles: {
+          borderRadius: theme.radii.sm,
+        },
+      },
+      {
+        size: 'md',
+        variant: 'outline',
+        styles: {
+          borderRadius: theme.radii.sm,
+        },
+      },
+      {
+        size: 'lg',
+        variant: 'outline',
+        styles: {
+          borderRadius: theme.radii.sm,
+        },
+      },
       {
         axis: 'x',
         size: 'sm',
@@ -56,13 +82,6 @@ export const SliderStyles = StyleSheet.create(theme => ({
           height: theme.sizes[8],
         },
       },
-      {
-        axis: 'x',
-        size: 'xl',
-        styles: {
-          height: theme.sizes[10],
-        },
-      },
       {
         axis: 'x',
         size: 'flex',
@@ -91,13 +110,6 @@ export const SliderStyles = StyleSheet.create(theme => ({
           width: theme.sizes[8],
         },
       },
-      {
-        axis: 'y',
-        size: 'xl',
-        styles: {
-          width: theme.sizes[10],
-        },
-      },
       {
         axis: 'y',
         size: 'flex',
@@ -125,7 +137,6 @@ export const SliderStyles = StyleSheet.create(theme => ({
         sm: {},
         md: {},
         lg: {},
-        xl: {},
         flex: {},
         minimal: {},
       },
@@ -152,13 +163,6 @@ export const SliderStyles = StyleSheet.create(theme => ({
           height: theme.sizes[8],
         },
       },
-      {
-        axis: 'x',
-        size: 'xl',
-        styles: {
-          height: theme.sizes[10],
-        },
-      },
       {
         axis: 'x',
         size: 'flex',
@@ -185,13 +189,6 @@ export const SliderStyles = StyleSheet.create(theme => ({
           width: theme.sizes[8],
         },
       },
-      {
-        axis: 'y',
-        size: 'xl',
-        styles: {
-          width: theme.sizes[10],
-        },
-      },
     ],
   }),
   minimumTrack: (colorPalette: PalettesWithNestedKeys) => ({
@@ -199,14 +196,14 @@ export const SliderStyles = StyleSheet.create(theme => ({
     variants: {
       axis: {
         x: {
-          borderBottomLeftRadius: theme.radii.xl,
-          borderBottomRightRadius: 0,
-          borderTopLeftRadius: theme.radii.xl,
+          // borderBottomLeftRadius: theme.radii.xl,
+          // borderBottomRightRadius: 0,
+          // borderTopLeftRadius: theme.radii.xl,
         },
         y: {
-          borderBottomLeftRadius: theme.radii.xl,
-          borderBottomRightRadius: theme.radii.xl,
-          borderTopLeftRadius: 0,
+          // borderBottomLeftRadius: theme.radii.xl,
+          // borderBottomRightRadius: theme.radii.xl,
+          // borderTopLeftRadius: 0,
         },
       },
       variant: {
@@ -218,10 +215,9 @@ export const SliderStyles = StyleSheet.create(theme => ({
         sm: {},
         md: {},
         lg: {},
-        xl: {},
         flex: {},
         minimal: {
-          borderRadius: theme.radii.sm,
+          // borderRadius: theme.radii.sm,
         },
       },
     },
@@ -247,13 +243,6 @@ export const SliderStyles = StyleSheet.create(theme => ({
           height: theme.sizes[8],
         },
       },
-      {
-        axis: 'x',
-        size: 'xl',
-        styles: {
-          height: theme.sizes[10],
-        },
-      },
       {
         axis: 'x',
         size: 'flex',
@@ -280,13 +269,6 @@ export const SliderStyles = StyleSheet.create(theme => ({
           width: theme.sizes[8],
         },
       },
-      {
-        axis: 'y',
-        size: 'xl',
-        styles: {
-          width: theme.sizes[10],
-        },
-      },
       {
         axis: 'y',
         size: 'flex',
@@ -318,7 +300,6 @@ export const SliderStyles = StyleSheet.create(theme => ({
         sm: {},
         md: {},
         lg: {},
-        xl: {},
         flex: {},
         minimal: {},
       },
@@ -328,16 +309,16 @@ export const SliderStyles = StyleSheet.create(theme => ({
         axis: 'x',
         size: 'sm',
         styles: {
-          width: theme.sizes[6],
-          height: theme.sizes[6],
+          width: theme.sizes[4],
+          height: theme.sizes[4],
         },
       },
       {
         axis: 'x',
         size: 'md',
         styles: {
-          width: theme.sizes[7],
-          height: theme.sizes[7],
+          width: theme.sizes[5],
+          height: theme.sizes[5],
         },
       },
       {
@@ -348,22 +329,11 @@ export const SliderStyles = StyleSheet.create(theme => ({
           height: theme.sizes[8],
         },
       },
-      {
-        axis: 'x',
-        size: 'xl',
-        styles: {
-          width: theme.sizes[11],
-          height: theme.sizes[11],
-        },
-      },
       {
         axis: 'x',
         size: 'flex',
         styles: {
           width: 30,
-          // height: 50,
-          // alignSel: 'stretch',
-          // flex: 1,
         },
       },
       {
@@ -371,9 +341,6 @@ export const SliderStyles = StyleSheet.create(theme => ({
         size: 'minimal',
         styles: {
           width: 0,
-          // height: 50,
-          // alignSel: 'stretch',
-          // flex: 1,
         },
       },
       {
@@ -400,14 +367,6 @@ export const SliderStyles = StyleSheet.create(theme => ({
           height: theme.sizes[8],
         },
       },
-      {
-        axis: 'y',
-        size: 'xl',
-        styles: {
-          width: theme.sizes[11],
-          height: theme.sizes[11],
-        },
-      },
       {
         axis: 'y',
         size: 'flex',
@@ -444,7 +403,6 @@ export const SliderStyles = StyleSheet.create(theme => ({
         sm: {},
         md: {},
         lg: {},
-        xl: {},
         flex: {},
         minimal: {},
       },

package/lib/theme/Switch.recipe.tsx

@@ -30,8 +30,6 @@ export const SwitchTokens = {
 
 export const SwitchStyles = StyleSheet.create(theme => ({
   container: (colorPalette: PalettesWithNestedKeys) => ({
-    // width: theme.sizes[16],
-    // height: theme.sizes[16],
     borderRadius: theme.radii.full,
     padding: theme.spacing['0.5'],
     borderWidth: 0,
@@ -57,7 +55,6 @@ export const SwitchStyles = StyleSheet.create(theme => ({
         },
         flex: {
           borderRadius: theme.radii.md,
-          // alignSelf: 'stretch',
         },
       },
       enabled: {
@@ -81,8 +78,6 @@ export const SwitchStyles = StyleSheet.create(theme => ({
   thumb: (colorPalette: PalettesWithNestedKeys) => ({
     backgroundColor: theme.colors.bg.default,
     borderRadius: theme.radii.full,
-    // width: theme.sizes[6],
-    // height: theme.sizes[6],
     variants: {
       variant: {
         solid: {},

package/package.json

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