react-native-varia 0.5.1 → 0.6.0

package/package.json

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

package/lib/components/ui/Slider.tsx

@@ -1,498 +0,0 @@
-import React from 'react'
-import {type LayoutChangeEvent, View, ViewStyle} from 'react-native'
-import {StyleSheet, UnistylesVariants} from 'react-native-unistyles'
-import {Gesture, GestureDetector} from 'react-native-gesture-handler'
-import Animated, {
-  useAnimatedStyle,
-  useSharedValue,
-} from 'react-native-reanimated'
-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,
-  limit = 50,
-): (...args: Parameters<T>) => void {
-  let inThrottle = false
-  return (...args: Parameters<T>) => {
-    if (!inThrottle) {
-      func(...(args as Parameters<T>))
-      inThrottle = true
-      setTimeout(() => {
-        inThrottle = false
-      }, limit)
-    }
-  }
-}
-
-type SliderVariants = UnistylesVariants<typeof SliderStyles>
-
-const AnimatedView = Animated.createAnimatedComponent(View)
-
-type ThumbStyleExtended = ReturnType<typeof SliderStyles.thumb> & {
-  width: number
-  height: number
-}
-
-type SliderProps = SliderVariants & {
-  colorPalette?: PalettesWithNestedKeys
-  thickness?: number
-  minimumTrackThickness?: number
-  minimumTrackColor?: string
-  thumbSize?: {
-    width: number
-    height: number
-  }
-  thumbChildren?: React.ReactNode
-  steps?: number
-  value?: number
-  onValueChange?: (value: number) => void
-  onSlidingComplete?: (value: number) => void
-  flex?: ViewStyle['flex']
-  alignSelf?: ViewStyle['alignSelf']
-}
-
-const Slider = ({
-  colorPalette = 'accent',
-  variant = SliderDefaultVariants.variant,
-  size = SliderDefaultVariants.size,
-  thumbChildren: ThumbChildren,
-  axis = 'x',
-  value = 0,
-  steps,
-  onValueChange,
-  onSlidingComplete,
-  flex = 0,
-  alignSelf = 'auto',
-}: SliderProps) => {
-  SliderStyles.useVariants({
-    size,
-    variant,
-    axis,
-  })
-  styles.useVariants({
-    axis,
-  })
-
-  const throttledOnValueChange = React.useMemo(() => {
-    if (!onValueChange) return undefined
-    return throttle(onValueChange, 50)
-  }, [onValueChange])
-
-  // 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' ? thumbWidth : thumbHeight) ?? 0) / 2
-  const context = useSharedValue({x: 0})
-  const translate = useSharedValue(value)
-  const trackLength = useSharedValue(0)
-  const isInsideChild = useSharedValue(false)
-
-  const handleTrackLayout = (event: LayoutChangeEvent) => {
-    const {width, height} = event.nativeEvent.layout
-    trackLength.value = axis === 'x' ? width : height
-  }
-
-  const slideGesture = Gesture.Pan()
-    .onTouchesDown(() => {
-      isInsideChild.value = true
-    })
-    .onBegin(() => {
-      context.value.x = translate.value
-    })
-    .onUpdate(e => {
-      const stepLength = steps ? trackLength.value / steps : 1
-      const delta = axis === 'y' ? -e.translationY : e.translationX
-
-      const rawValue = Math.max(
-        0,
-        Math.min(context.value.x + delta, trackLength.value),
-      )
-
-      const snappedValue = steps
-        ? Math.round(rawValue / stepLength) * stepLength
-        : rawValue
-
-      translate.value = snappedValue
-
-      if (steps) {
-        const stepIndex = Math.round(snappedValue / stepLength)
-        throttledOnValueChange && runOnJS(throttledOnValueChange)(stepIndex)
-      } else {
-        throttledOnValueChange &&
-          runOnJS(throttledOnValueChange)(
-            Math.round((snappedValue / trackLength.value) * 100) / 100,
-          )
-      }
-    })
-    .onEnd(() => {
-      const stepLength = steps ? trackLength.value / steps : 1
-
-      const snappedValue = steps
-        ? Math.round(translate.value / stepLength)
-        : translate.value / trackLength.value
-
-      onSlidingComplete && runOnJS(onSlidingComplete)(snappedValue)
-    })
-    .onFinalize(() => {
-      isInsideChild.value = false
-    })
-
-  const tapGesture = Gesture.Tap()
-    .onBegin(e => {
-      if (isInsideChild.value) {
-        return
-      }
-      const tapPosition = axis === 'x' ? e.x : e.y
-      const stepLength = steps ? trackLength.value / steps : 1
-
-      const rawValue =
-        axis === 'y'
-          ? Math.max(
-              0,
-              Math.min(trackLength.value - tapPosition, trackLength.value),
-            )
-          : Math.max(0, Math.min(tapPosition, trackLength.value))
-
-      const snappedValue = steps
-        ? Math.round(rawValue / stepLength) * stepLength
-        : rawValue
-
-      translate.value = snappedValue
-
-      if (steps) {
-        const stepIndex = Math.round(snappedValue / stepLength)
-        onValueChange && runOnJS(onValueChange)(stepIndex)
-        onSlidingComplete && runOnJS(onSlidingComplete)(stepIndex)
-      } else {
-        const normalizedValue =
-          Math.round((snappedValue / trackLength.value) * 100) / 100
-        onValueChange && runOnJS(onValueChange)(normalizedValue)
-        onSlidingComplete && runOnJS(onSlidingComplete)(normalizedValue)
-      }
-    })
-    .simultaneousWithExternalGesture(slideGesture)
-
-  const trackPan = Gesture.Pan()
-    .onBegin(e => {
-      if (trackLength.value <= 0) return
-
-      const tapPosition = axis === 'x' ? e.x : e.y
-      const stepLength = steps ? trackLength.value / steps : 1
-
-      const rawValue =
-        axis === 'y'
-          ? Math.max(
-              0,
-              Math.min(trackLength.value - tapPosition, trackLength.value),
-            )
-          : Math.max(0, Math.min(tapPosition, trackLength.value))
-
-      const snappedValue = steps
-        ? Math.round(rawValue / stepLength) * stepLength
-        : rawValue
-
-      context.value.x = snappedValue
-      translate.value = snappedValue
-
-      if (steps) {
-        const stepIndex = Math.round(snappedValue / stepLength)
-        onValueChange && runOnJS(onValueChange)(stepIndex)
-      } else {
-        const normalizedValue =
-          Math.round((snappedValue / trackLength.value) * 100) / 100
-        onValueChange && runOnJS(onValueChange)(normalizedValue)
-      }
-    })
-    .onUpdate(e => {
-      if (trackLength.value <= 0) return
-
-      const stepLength = steps ? trackLength.value / steps : 1
-      const delta = axis === 'y' ? -e.translationY : e.translationX
-
-      const rawValue = Math.max(
-        0,
-        Math.min(context.value.x + delta, trackLength.value),
-      )
-
-      if (steps) {
-        const snappedValue = Math.round(rawValue / stepLength) * stepLength
-        translate.value = snappedValue
-
-        const stepIndex = Math.round(snappedValue / stepLength)
-        throttledOnValueChange && runOnJS(throttledOnValueChange)(stepIndex)
-      } else {
-        translate.value = rawValue
-        throttledOnValueChange &&
-          runOnJS(throttledOnValueChange)(
-            Math.round((rawValue / trackLength.value) * 100) / 100,
-          )
-      }
-    })
-    .onEnd(() => {
-      const stepLength = steps ? trackLength.value / steps : 1
-
-      const snappedValue = steps
-        ? Math.round(translate.value / stepLength)
-        : translate.value / trackLength.value
-
-      onSlidingComplete && runOnJS(onSlidingComplete)(snappedValue)
-    })
-
-  const animatedTrack = useAnimatedStyle(() => {
-    return {
-      [axis === 'y' ? 'height' : 'width']: translate.value + halfSize,
-    }
-  })
-
-  const animatedThumb = useAnimatedStyle(() => {
-    if (axis === 'x') {
-      return {
-        transform: [{translateX: translate.value - halfSize}],
-      }
-    } else {
-      const translateY = trackLength.value - translate.value - halfSize
-      return {
-        transform: [{translateY}],
-      }
-    }
-  })
-
-  return (
-    <View
-      testID="varia-slider-container"
-      style={[
-        styles.container(halfSize, flex, alignSelf),
-        SliderStyles.container(colorPalette),
-      ]}>
-      {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),
-              animatedTrack,
-            ]}
-          />
-
-          {steps && (
-            <View style={[styles.stepsOverlay]} pointerEvents="none">
-              <View style={styles.steps} testID="varia-slider-steps">
-                {Array.from({length: steps + 1}, (_, index) => index).map(
-                  (_, i) => (
-                    <View
-                      key={i}
-                      style={[
-                        styles.step(i, steps),
-                        SliderStyles.step(colorPalette),
-                      ]}
-                    />
-                  ),
-                )}
-              </View>
-            </View>
-          )}
-          <GestureDetector gesture={slideGesture}>
-            <View style={styles.thumbContainerFull} testID="varia-slider-tumb">
-              <AnimatedView style={[animatedThumb, {flex: 1}]}>
-                <View
-                  style={[
-                    SliderStyles.thumb(colorPalette),
-                    styles.thumb(halfSize),
-                  ]}>
-                  {ThumbChildren || null}
-                </View>
-              </AnimatedView>
-            </View>
-          </GestureDetector>
-        </View>
-      </GestureDetector>
-      {axis === 'y' && <View style={{height: halfSize}} />}
-    </View>
-  )
-}
-
-const styles = StyleSheet.create(theme => ({
-  container: (
-    halfSize: number,
-    flex: ViewStyle['flex'],
-    alignSelf: ViewStyle['alignSelf'],
-  ) => ({
-    flex,
-    alignSelf,
-    overflow: 'hidden',
-    // flexBasis: 'auto',
-    variants: {
-      axis: {
-        x: {
-          // maxWidth: 'auto',
-          paddingTop: 0,
-          paddingRight: halfSize,
-          flexDirection: 'row',
-        },
-        y: {
-          // maxHeight: 'auto',
-          // height: '100%',
-          paddingTop: halfSize,
-          paddingRight: 0,
-          flexDirection: 'column',
-        },
-      },
-    },
-    _web: {
-      _classNames: 'slider-container-base',
-      flex: flex === 0 ? undefined : flex,
-    },
-  }),
-  maximumTrack: () => ({
-    flex: 1,
-    position: 'relative',
-    overflow: 'visible',
-    flexBasis: 'auto',
-    variants: {
-      axis: {
-        x: {
-          justifyContent: 'center',
-        },
-        y: {
-          justifyContent: 'flex-end',
-        },
-      },
-    },
-    _web: {
-      _classNames: 'slider-maximun-track-base',
-    },
-  }),
-  minimumTrack: (halfSize: number) => ({
-    flexBasis: 'auto',
-    variants: {
-      axis: {
-        x: {
-          flex: 1,
-          marginLeft: halfSize * -1,
-          width: '100%',
-          bottom: 'auto',
-          paddingBottom: 0,
-          paddingLeft: halfSize,
-          justifyContent: 'center',
-          alignItems: 'flex-end',
-        },
-        y: {
-          height: '100%',
-          paddingBottom: halfSize,
-          marginBottom: halfSize * -1,
-          paddingLeft: 0,
-          alignItems: 'flex-start',
-        },
-      },
-    },
-    _web: {
-      _classNames: 'slider-minimum-track-base',
-    },
-  }),
-  thumbContainerFull: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    top: 0,
-    bottom: 0,
-    zIndex: 2,
-    _web: {
-      _classNames: 'thumb-container-full-base',
-    },
-  },
-  thumb: halfSize => ({
-    variants: {
-      axis: {
-        x: {
-          height: '100%',
-          justifyContent: 'center',
-          alignItems: 'center',
-        },
-        y: {
-          width: '100%',
-          justifyContent: 'center',
-          alignItems: 'center',
-        },
-      },
-    },
-    _web: {
-      _classNames: 'slider-thumb-base',
-    },
-  }),
-
-  stepsOverlay: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    top: 0,
-    bottom: 0,
-    zIndex: 1,
-    _web: {
-      _classNames: 'slider-steps-overlay-base',
-    },
-  },
-  steps: {
-    width: '100%',
-    height: '100%',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    zIndex: 0,
-    position: 'absolute',
-    variants: {
-      axis: {
-        x: {
-          flexDirection: 'row',
-        },
-        y: {
-          flexDirection: 'column',
-        },
-      },
-    },
-    _web: {
-      _classNames: 'slider-steps-base',
-    },
-  },
-  step: (index, length) => ({
-    backgroundColor:
-      index === 0 || index === length ? 'transparent' : theme.colors.fg.default,
-    variants: {
-      axis: {
-        x: {
-          width: 1,
-          height: '100%',
-        },
-        y: {
-          width: '100%',
-          height: 1,
-        },
-      },
-    },
-    _web: {
-      _classNames: 'slider-step-base',
-    },
-  }),
-}))
-
-export default Slider

package/lib/components/ui/context/Field.tsx

@@ -1,27 +0,0 @@
-import {createContext, useContext} from 'react'
-import {UnistylesVariants} from 'react-native-unistyles'
-import {FieldStyles} from '../../../theme/Field.recipe'
-import {PalettesWithNestedKeys} from '../../../style/varia/types'
-
-export type FieldVariants = UnistylesVariants<typeof FieldStyles>
-
-export type FieldContextType = {
-  error?: string
-  variant?: FieldVariants['variant']
-  size?: FieldVariants['size']
-  colorPalette?: PalettesWithNestedKeys
-}
-
-const FieldContext = createContext<FieldContextType | undefined>(undefined)
-
-export function useField() {
-  const context = useContext(FieldContext)
-  if (!context) {
-    throw new Error(
-      'Field subcomponents (Label, Error) must be used inside Field.Root',
-    )
-  }
-  return context
-}
-
-export default FieldContext