react-native-varia 0.3.0 → 0.4.1

package/lib/components/Slider.tsx

@@ -9,6 +9,7 @@ import Animated, {
 import {runOnJS} from 'react-native-worklets'
 import {SliderStyles, SliderDefaultVariants} from '../theme/Slider.recipe'
 import {PalettesWithNestedKeys} from '../style/varia/types'
+import {getCompoundVariantValue} from '../style/varia/utils'
 
 function throttle<T extends (...args: any[]) => any>(
   func: T,
@@ -28,6 +29,8 @@ function throttle<T extends (...args: any[]) => any>(
 
 type SliderVariants = UnistylesVariants<typeof SliderStyles>
 
+const AnimatedView = Animated.createAnimatedComponent(View)
+
 type ThumbStyleExtended = ReturnType<typeof SliderStyles.thumb> & {
   width: number
   height: number
@@ -38,7 +41,6 @@ type SliderProps = SliderVariants & {
   thickness?: number
   minimumTrackThickness?: number
   minimumTrackColor?: string
-  displayStepsOnMinimumTrack?: boolean
   thumbSize?: {
     width: number
     height: number
@@ -56,7 +58,6 @@ const Slider = ({
   colorPalette = 'accent',
   variant = SliderDefaultVariants.variant,
   size = SliderDefaultVariants.size,
-  displayStepsOnMinimumTrack = false,
   thumbChildren: ThumbChildren,
   axis = 'x',
   value = 0,
@@ -80,10 +81,21 @@ const Slider = ({
     return throttle(onValueChange, 50)
   }, [onValueChange])
 
-  const thumbStyle = SliderStyles.thumb(colorPalette) as ThumbStyleExtended
+  // const thumbStyle = SliderStyles.thumb(colorPalette) as ThumbStyleExtended
+  // const thumbWidth = getVariantValue(SliderStyles.thumb(colorPalette), 'size', size, 'width', true)
+  const thumbWidth = getCompoundVariantValue(
+    SliderStyles.thumb(colorPalette),
+    {axis, size},
+    'width',
+  )
+  const thumbHeight = getCompoundVariantValue(
+    SliderStyles.thumb(colorPalette),
+    {axis, size},
+    'height',
+  )
+  // const thumbHeight = getVariantValue(SliderStyles.thumb(colorPalette), 'size', size, 'height', true)
 
-  const halfSize =
-    axis === 'x' ? (thumbStyle.width ?? 0) / 2 : (thumbStyle.height ?? 0) / 2
+  const halfSize = ((axis === 'x' ? thumbWidth : thumbHeight) ?? 0) / 2
   const context = useSharedValue({x: 0})
   const translate = useSharedValue(value)
   const trackLength = useSharedValue(0)
@@ -240,9 +252,11 @@ const Slider = ({
       onSlidingComplete && runOnJS(onSlidingComplete)(snappedValue)
     })
 
-  const animatedTrack = useAnimatedStyle(() => ({
-    [axis === 'y' ? 'height' : 'width']: translate.value + halfSize,
-  }))
+  const animatedTrack = useAnimatedStyle(() => {
+    return {
+      [axis === 'y' ? 'height' : 'width']: translate.value + halfSize,
+    }
+  })
 
   const animatedThumb = useAnimatedStyle(() => {
     if (axis === 'x') {
@@ -257,8 +271,6 @@ const Slider = ({
     }
   })
 
-  const opacityTrack = steps !== undefined && displayStepsOnMinimumTrack
-
   return (
     <View
       style={[
@@ -273,10 +285,10 @@ const Slider = ({
             SliderStyles.maximumTrack(colorPalette),
           ]}
           onLayout={handleTrackLayout}>
-          <Animated.View
+          <AnimatedView
             style={[
               styles.minimumTrack(halfSize),
-              SliderStyles.minimumTrack(colorPalette, opacityTrack),
+              SliderStyles.minimumTrack(colorPalette),
               animatedTrack,
             ]}
           />
@@ -300,7 +312,7 @@ const Slider = ({
           )}
           <GestureDetector gesture={slideGesture}>
             <View style={styles.thumbContainerFull}>
-              <Animated.View style={[animatedThumb]}>
+              <AnimatedView style={[animatedThumb, {flex: 1}]}>
                 <View
                   style={[
                     SliderStyles.thumb(colorPalette),
@@ -308,7 +320,7 @@ const Slider = ({
                   ]}>
                   {ThumbChildren || null}
                 </View>
-              </Animated.View>
+              </AnimatedView>
             </View>
           </GestureDetector>
         </View>
@@ -326,16 +338,18 @@ const styles = StyleSheet.create(theme => ({
   ) => ({
     flex,
     alignSelf,
+    overflow: 'hidden',
+    // flexBasis: 'auto',
     variants: {
       axis: {
         x: {
-          maxWidth: 'auto',
+          // maxWidth: 'auto',
           paddingTop: 0,
           paddingRight: halfSize,
           flexDirection: 'row',
         },
         y: {
-          maxHeight: 'auto',
+          // maxHeight: 'auto',
           height: '100%',
           paddingTop: halfSize,
           paddingRight: 0,
@@ -343,11 +357,16 @@ const styles = StyleSheet.create(theme => ({
         },
       },
     },
+    _web: {
+      _classNames: 'slider-container-base',
+      flex: flex === 0 ? undefined : flex,
+    },
   }),
   maximumTrack: () => ({
     flex: 1,
     position: 'relative',
     overflow: 'visible',
+    flexBasis: 'auto',
     variants: {
       axis: {
         x: {
@@ -358,8 +377,12 @@ const styles = StyleSheet.create(theme => ({
         },
       },
     },
+    _web: {
+      _classNames: 'slider-maximun-track-base',
+    },
   }),
   minimumTrack: (halfSize: number) => ({
+    flexBasis: 'auto',
     variants: {
       axis: {
         x: {
@@ -369,9 +392,6 @@ const styles = StyleSheet.create(theme => ({
           bottom: 'auto',
           paddingBottom: 0,
           paddingLeft: halfSize,
-          borderBottomLeftRadius: 20,
-          borderBottomRightRadius: 0,
-          borderTopLeftRadius: 20,
           justifyContent: 'center',
           alignItems: 'flex-end',
         },
@@ -380,13 +400,13 @@ const styles = StyleSheet.create(theme => ({
           paddingBottom: halfSize,
           marginBottom: halfSize * -1,
           paddingLeft: 0,
-          borderBottomLeftRadius: 20,
-          borderBottomRightRadius: 20,
-          borderTopLeftRadius: 0,
           alignItems: 'flex-start',
         },
       },
     },
+    _web: {
+      _classNames: 'slider-minimum-track-base',
+    },
   }),
   thumbContainerFull: {
     position: 'absolute',
@@ -395,21 +415,28 @@ const styles = StyleSheet.create(theme => ({
     top: 0,
     bottom: 0,
     zIndex: 2,
+    _web: {
+      _classNames: 'thumb-container-full-base',
+    },
   },
   thumb: halfSize => ({
-    borderRadius: 25,
     variants: {
       axis: {
         x: {
           height: '100%',
           justifyContent: 'center',
+          alignItems: 'center',
         },
         y: {
           width: '100%',
+          justifyContent: 'center',
           alignItems: 'center',
         },
       },
     },
+    _web: {
+      _classNames: 'slider-thumb-base',
+    },
   }),
 
   stepsOverlay: {
@@ -419,6 +446,9 @@ const styles = StyleSheet.create(theme => ({
     top: 0,
     bottom: 0,
     zIndex: 1,
+    _web: {
+      _classNames: 'slider-steps-overlay-base',
+    },
   },
   steps: {
     width: '100%',
@@ -437,6 +467,9 @@ const styles = StyleSheet.create(theme => ({
         },
       },
     },
+    _web: {
+      _classNames: 'slider-steps-base',
+    },
   },
   step: (index, length) => ({
     backgroundColor:
@@ -453,6 +486,9 @@ const styles = StyleSheet.create(theme => ({
         },
       },
     },
+    _web: {
+      _classNames: 'slider-step-base',
+    },
   }),
 }))
 

package/lib/components/Slideshow.tsx

@@ -18,6 +18,7 @@ export type SlideshowRef = {
   handlePrev: () => void | null
 }
 
+const AnimatedView = Animated.createAnimatedComponent(View)
 type SlideshowVariants = UnistylesVariants<typeof SlideshowStyles>
 
 type Axis = 'x' | 'y'
@@ -174,7 +175,7 @@ const Slideshow = ({
             setContainerWidth(e.nativeEvent.layout.width)
             setContainerHeight(e.nativeEvent.layout.height)
           }}>
-          <Animated.View
+          <AnimatedView
             style={[
               styles.slidesContainer(`${NUM_PAGES * 100}%`, isHorizontal),
               animatedStyle,
@@ -189,7 +190,7 @@ const Slideshow = ({
                 {Slide}
               </View>
             ))}
-          </Animated.View>
+          </AnimatedView>
         </View>
       </GestureDetector>
     </View>
@@ -201,15 +202,24 @@ export default Slideshow
 const styles = StyleSheet.create({
   flex: flex => ({
     flex,
+    flexBasis: 'auto',
     flexDirection: 'row',
+    alignSelf: 'stretch',
+    _web: {
+      _classNames: 'slideshow-container-flex-base',
+    },
   }),
 
   container: () => ({
+    flexBasis: 'auto',
     width: '100%',
-    height: '100%',
+    maxHeight: '100%',
     overflow: 'hidden',
     justifyContent: 'flex-start',
     alignItems: 'flex-start',
+    _web: {
+      _classNames: 'slideshow-container-base',
+    },
   }),
 
   slidesContainer: (size, isHorizontal) => ({
@@ -217,6 +227,9 @@ const styles = StyleSheet.create({
     width: isHorizontal ? size : '100%',
     minHeight: isHorizontal ? '100%' : size,
     flex: 1,
+    _web: {
+      _classNames: 'slideshow-container-slides-container-base',
+    },
   }),
 
   slide: (size, isHorizontal) => ({
@@ -225,5 +238,8 @@ const styles = StyleSheet.create({
     height: isHorizontal ? '100%' : size,
     justifyContent: 'center',
     alignItems: 'center',
+    _web: {
+      _classNames: 'slideshow-container-slide-base',
+    },
   }),
 })

package/lib/components/Spinner.tsx

@@ -34,17 +34,23 @@ const BaseSpinner = ({
   ...props
 }: SpinnerProps) => {
   const resolvedColor = resolveColor(color, colors, colorPalette)
-  
+
   SpinnerStyles.useVariants({
     size,
   })
 
   // console.log('color', color)
 
-  const resolvedSize = getVariantValue(SpinnerStyles.base, 'size', size, 'width')
-  
+  const resolvedSize = getVariantValue(
+    SpinnerStyles.base,
+    'size',
+    size,
+    'width',
+  )
+
   return (
     <ActivityIndicator
+      testID="spinner"
       color={resolvedColor}
       size={resolvedSize}
       {...props}

package/lib/components/Switch.tsx

@@ -1,4 +1,4 @@
-import {TouchableWithoutFeedback, View} from 'react-native'
+import {Platform, TouchableWithoutFeedback, View} from 'react-native'
 import Animated, {
   useAnimatedStyle,
   useSharedValue,
@@ -9,13 +9,15 @@ import {StyleSheet, UnistylesVariants} from 'react-native-unistyles'
 import {useAnimatedVariantColor} from 'react-native-unistyles/reanimated'
 import {ReactNode, useLayoutEffect, useRef} from 'react'
 import {SwitchTokens, SwitchStyles} from '../theme/Switch.recipe'
-import {PalettesWithNestedKeys} from '../style/varia/types'
+import {AlignSelf, Flex, PalettesWithNestedKeys} from '../style/varia/types'
+import {getVariantValue} from '../style/varia/utils'
 
 const animations = {
   withSpring,
   withTiming,
 }
 
+const AnimatedView = Animated.createAnimatedComponent(View)
 type AnimationType = 'withSpring' | 'withTiming'
 
 type SwitchVariants = UnistylesVariants<typeof SwitchStyles>
@@ -25,9 +27,10 @@ type SwitchProps = SwitchVariants & {
   value?: boolean
   animation?: keyof typeof SwitchTokens.variants.animation
   onValueChange?: (value: boolean) => void
-  flex?: number
-  enabledIcon: ReactNode
-  disabledIcon: ReactNode
+  flex?: Flex
+  enabledIcon?: ReactNode
+  disabledIcon?: ReactNode
+  alignSelf?: AlignSelf
 }
 
 const Switch = ({
@@ -39,7 +42,8 @@ const Switch = ({
   onValueChange = () => {},
   variant = SwitchTokens.defaultProps.variant,
   size = SwitchTokens.defaultProps.size,
-  flex = 1,
+  flex = 0,
+  alignSelf = 'flex-start',
 }: SwitchProps) => {
   const animatedRef = useRef<View>(null)
 
@@ -62,15 +66,20 @@ const Switch = ({
             mass: 1,
           },
         }
-
-  const color = useAnimatedVariantColor(
-    SwitchStyles.container(colorPalette),
-    'backgroundColor',
-  )
-  const thumbColor = useAnimatedVariantColor(
-    SwitchStyles.thumb(colorPalette),
-    'backgroundColor',
-  )
+  const color =
+    Platform.OS === 'web'
+      ? {value: 'blue'}
+      : useAnimatedVariantColor(
+          SwitchStyles.container(colorPalette),
+          'backgroundColor',
+        )
+  const thumbColor =
+    Platform.OS === 'web'
+      ? {value: 'white'}
+      : useAnimatedVariantColor(
+          SwitchStyles.thumb(colorPalette),
+          'backgroundColor',
+        )
   const thumbEnabledPosition = useSharedValue(0)
   const animatedValue = useSharedValue(0)
   const containerWidth = useSharedValue(0)
@@ -78,10 +87,24 @@ const Switch = ({
   useLayoutEffect(() => {
     animatedRef.current?.measure((x, y, width) => {
       containerWidth.value = width
-      const thumbWidth = SwitchStyles.thumb(colorPalette).width
-      const padding = SwitchStyles.container(colorPalette).padding || 0
-      const trackBorderWidth =
-        SwitchStyles.container(colorPalette).borderWidth || 0
+      // 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
       thumbEnabledPosition.value =
         width - thumbWidth - trackBorderWidth * 2 - padding * 2
     })
@@ -133,14 +156,14 @@ const Switch = ({
           },
         )
       }}>
-      <Animated.View
+      <AnimatedView
         ref={animatedRef}
         style={[
-          styles.container(flex),
+          styles.container(flex, alignSelf),
           animatedStyle,
           SwitchStyles.container(colorPalette),
         ]}>
-        <Animated.View
+        <AnimatedView
           style={[
             styles.thumb,
             SwitchStyles.thumb(colorPalette),
@@ -148,8 +171,8 @@ const Switch = ({
             circleTranslationStyle,
           ]}>
           {Icon && Icon}
-        </Animated.View>
-      </Animated.View>
+        </AnimatedView>
+      </AnimatedView>
     </TouchableWithoutFeedback>
   )
 }
@@ -157,17 +180,25 @@ const Switch = ({
 export default Switch
 
 const styles = StyleSheet.create({
-  container: (flex: number) => ({
+  container: (flex: Flex, alignSelf: AlignSelf) => ({
     flexGrow: flex,
+    flexBasis: 'auto',
+    alignSelf,
     flexShrink: 0,
-    alignSelf: 'flex-start',
+    // alignSelf: 'flex-start',
     flexDirection: 'row',
     alignItems: 'center',
     margin: 0,
+    _web: {
+      _classNames: 'switch-container-base',
+    },
   }),
   thumb: {
     borderRadius: 9999,
     justifyContent: 'center',
     alignItems: 'center',
+    _web: {
+      _classNames: 'switch-thumb-base',
+    },
   },
 })

package/lib/components/Text.tsx

@@ -54,6 +54,9 @@ const styles = StyleSheet.create(theme => ({
       color: extractThemeColor(color, theme),
     }),
     ...(fontSize && {fontSize}),
+    _web: {
+      _classNames: 'text-base',
+    },
   }),
 }))