react-native-varia 0.3.0 → 0.4.1

package/lib/components/SlidingDrawer.tsx

@@ -1,301 +0,0 @@
-import React, {useImperativeHandle} from 'react'
-import {StyleSheet, UnistylesVariants} from 'react-native-unistyles'
-import {Gesture, GestureDetector} from 'react-native-gesture-handler'
-import Animated, {
-  useAnimatedStyle,
-  useSharedValue,
-  withSpring,
-  withTiming,
-  type SharedValue,
-} from 'react-native-reanimated'
-import {scheduleOnRN} from 'react-native-worklets'
-import {
-  SlidingDrawerTokens,
-  SlidingDrawerStyles,
-} from '../theme/SlidingDrawer.recipe'
-import {PalettesWithNestedKeys} from '../style/varia/types'
-import {TouchableWithoutFeedback, ViewStyle} from 'react-native'
-
-export type SlidingDrawerRef = {
-  snapTo: (point: number) => void | null
-  expand: () => void | null
-  collapse: () => void | null
-}
-
-type SlidingDrawerVariants = UnistylesVariants<typeof SlidingDrawerStyles>
-
-type SlidingDrawerProps = SlidingDrawerVariants & {
-  colorPalette?: PalettesWithNestedKeys
-  animation?: keyof typeof SlidingDrawerTokens.variants.animation
-  width?: string
-  flex?: number
-  direction?: 1 | -1
-  onCollapse?: () => void
-  onExpand?: () => void
-  onSnap?: (point: number) => void
-  snapPoints: number[]
-  axis: 'y' | 'x'
-  allowGestures?: boolean
-  overlay?: boolean
-  closeOnOverlayPress?: boolean
-  children?: React.ReactNode
-  ref?: React.RefObject<SlidingDrawerRef | null>
-}
-
-const AnimatedTouchableOpacity = Animated.createAnimatedComponent(
-  TouchableWithoutFeedback,
-)
-
-const SlidingDrawer = ({
-  colorPalette = 'accent',
-  variant = SlidingDrawerTokens.defaultProps.variant,
-  animation = SlidingDrawerTokens.defaultProps.animation,
-  width = '100%',
-  flex = 0,
-  direction = 1,
-  onCollapse,
-  onExpand,
-  onSnap,
-  snapPoints,
-  axis,
-  allowGestures = true,
-  overlay = false,
-  closeOnOverlayPress = true,
-  children,
-  ref,
-}: SlidingDrawerProps) => {
-  SlidingDrawerStyles.useVariants({
-    variant,
-  })
-
-  const points = snapPoints.map(point => point * direction)
-
-  const translate = useSharedValue(points[0])
-
-  const context: SharedValue<{
-    position: number
-    snapPoint: number
-  }> = useSharedValue({
-    position: points[0],
-    snapPoint: 0,
-  })
-
-  const changeDisplay = useSharedValue('none')
-  const opacity = useSharedValue(0)
-
-  const VELOCITY_THRESHOLD = 2000
-
-  const updateCurrentSnapPoint = (snapPoint: number) => {
-    'worklet'
-    context.value = {position: context.value.position, snapPoint}
-  }
-
-  const animations = {
-    withSpring,
-    withTiming,
-  }
-
-  const animationVariant = SlidingDrawerTokens.variants.animation[animation]
-
-  const snapTo = (destination: number) => {
-    'worklet'
-
-    if (animationVariant && animationVariant.type) {
-      translate.value = animations[animationVariant.type](
-        points[destination],
-        animationVariant.props,
-      )
-      updateCurrentSnapPoint(destination)
-      onSnap && scheduleOnRN(onSnap, destination)
-    }
-  }
-
-  const expand = () => {
-    snapTo(points.length - 1)
-    if (overlay) {
-      showOverlay()
-    }
-    onExpand && scheduleOnRN(onExpand)
-  }
-
-  const isCollapsed = () => {
-    'worklet'
-    return context.value.snapPoint === 0
-  }
-
-  const collapse = () => {
-    snapTo(0)
-    if (overlay) {
-      hideOverlay()
-    }
-    onCollapse && scheduleOnRN(onCollapse)
-  }
-
-  const hideOverlay = () => {
-    'worklet'
-    changeDisplay.value = 'none'
-    opacity.value = withTiming(0, {duration: 200})
-  }
-  const showOverlay = () => {
-    'worklet'
-    changeDisplay.value = 'flex'
-    opacity.value = withTiming(1, {duration: 200})
-  }
-
-  useImperativeHandle(ref, () => ({
-    expand,
-    collapse,
-    snapTo,
-    isCollapsed,
-  }))
-
-  const slideGesture = Gesture.Pan()
-    .enabled(allowGestures)
-    .onBegin(() => {
-      context.value.position = translate.value
-    })
-    .onUpdate(event => {
-      const delta = axis === 'y' ? event.translationY : event.translationX
-
-      const proposed = delta + (context.value.position ?? 0)
-
-      const minPoint = Math.min(...points)
-      const maxPoint = Math.max(...points)
-
-      let clamped = proposed
-
-      if (proposed < minPoint) {
-        const overdrag = minPoint - proposed
-        clamped = minPoint - overdrag / (1 + overdrag / 60)
-      } else if (proposed > maxPoint) {
-        const overdrag = proposed - maxPoint
-        clamped = maxPoint + overdrag / (1 + overdrag / 60)
-      }
-
-      translate.value = clamped
-    })
-    .onEnd(({velocityX, velocityY, translationX, translationY}) => {
-      const velocity = axis === 'y' ? velocityY : velocityX
-      const translation = axis === 'y' ? translationY : translationX
-
-      const minPoint = Math.min(...points)
-      const maxPoint = Math.max(...points)
-
-      if (translate.value < minPoint) {
-        translate.value = withSpring(minPoint, {velocity})
-        return
-      } else if (translate.value > maxPoint) {
-        translate.value = withSpring(maxPoint, {velocity})
-        return
-      }
-
-      const forwardsThreshold =
-        (points[context.value.snapPoint] +
-          points[context.value.snapPoint + 1]) /
-        2
-      const backwardsThreshold =
-        (points[context.value.snapPoint] +
-          points[context.value.snapPoint - 1]) /
-        2
-
-      if (translation * direction < 0) {
-        if (
-          ((direction === 1 && translate.value < forwardsThreshold) ||
-            (direction === -1 && translate.value > forwardsThreshold) ||
-            velocity * direction < -VELOCITY_THRESHOLD) &&
-          context.value.snapPoint < points.length - 1
-        ) {
-          snapTo(context.value.snapPoint + 1)
-        } else {
-          snapTo(context.value.snapPoint)
-        }
-      } else {
-        if (
-          ((direction === 1 && translate.value > backwardsThreshold) ||
-            (direction === -1 && translate.value < backwardsThreshold) ||
-            velocity * direction > VELOCITY_THRESHOLD) &&
-          context.value.snapPoint > 0
-        ) {
-          snapTo(context.value.snapPoint - 1)
-        } else {
-          snapTo(context.value.snapPoint)
-        }
-      }
-    })
-    .onFinalize(() => {
-      if (overlay) {
-        if (isCollapsed()) {
-          hideOverlay()
-        } else {
-          showOverlay()
-        }
-      }
-    })
-
-  const blockAnimatedStyle = useAnimatedStyle(() => {
-    if (axis === 'y') {
-      return {
-        transform: [{translateY: translate.value}],
-      }
-    } else {
-      return {
-        transform: [{translateX: translate.value}],
-      }
-    }
-  })
-
-  const displayOverlayStyle = useAnimatedStyle(() => {
-    return {
-      display: changeDisplay.value as ViewStyle['display'],
-      opacity: opacity.value,
-    }
-  })
-
-  return (
-    <>
-      {overlay && (
-        <AnimatedTouchableOpacity
-          onPress={() => closeOnOverlayPress && collapse()}>
-          <Animated.View
-            style={[
-              StyleSheet.absoluteFillObject,
-              displayOverlayStyle,
-              SlidingDrawerStyles.overlay(colorPalette),
-            ]}
-          />
-        </AnimatedTouchableOpacity>
-      )}
-      <GestureDetector gesture={slideGesture}>
-        <Animated.View
-          style={[
-            styles.container(flex, direction, axis, width),
-            blockAnimatedStyle,
-            SlidingDrawerStyles.slider(colorPalette),
-          ]}>
-          {children}
-        </Animated.View>
-      </GestureDetector>
-    </>
-  )
-}
-export default SlidingDrawer
-
-const styles = StyleSheet.create({
-  container: (flex, direction, axis, width) => ({
-    position: flex === 0 ? 'absolute' : 'relative',
-    bottom: axis === 'y' && direction === -1 ? 0 : 'auto',
-    top: axis === 'y' && direction === 1 ? 0 : 'auto',
-    left: axis === 'x' ? 0 : 'auto',
-    flex: flex === 0 ? 1 : flex,
-    height: '100%',
-    width,
-    flexDirection: 'column',
-    alignSelf: 'stretch',
-    alignItems: 'center',
-    justifyContent: 'flex-start',
-    zIndex: 100,
-  }),
-  customStyle: style => ({
-    ...style,
-  }),
-})

package/lib/patterns/newPatterns.tsx

@@ -1,285 +0,0 @@
-import {useMemo} from 'react'
-import {StyleProp, View, ViewStyle} from 'react-native'
-import {StyleSheet} from 'react-native-unistyles'
-
-interface StackProps {
-  backgroundColor?: ViewStyle['backgroundColor']
-  bg?: ViewStyle['backgroundColor']
-  width?: ViewStyle['width']
-  w?: ViewStyle['width']
-  height?: ViewStyle['height']
-  h?: ViewStyle['height']
-  borderColor?: ViewStyle['borderColor']
-  borderWidth?: ViewStyle['borderWidth']
-  borderStyle?: ViewStyle['borderStyle']
-  borderRadius?: ViewStyle['borderRadius']
-  br?: ViewStyle['borderRadius']
-  alignSelf?: ViewStyle['alignSelf']
-  alignItems?: ViewStyle['alignItems']
-  justifyContent?: ViewStyle['justifyContent']
-  flex?: ViewStyle['flex']
-  flexShrink?: ViewStyle['flexShrink']
-  flexGrow?: ViewStyle['flexGrow']
-  flexBasis?: ViewStyle['flexBasis']
-  flexWrap?: ViewStyle['flexWrap']
-  gap?: ViewStyle['gap']
-  m?: ViewStyle['margin']
-  mt?: ViewStyle['marginTop']
-  mb?: ViewStyle['marginBottom']
-  ml?: ViewStyle['marginLeft']
-  mr?: ViewStyle['marginRight']
-  mx?: ViewStyle['marginHorizontal']
-  my?: ViewStyle['marginVertical']
-  margin?: ViewStyle['margin']
-  marginVertical?: ViewStyle['marginVertical']
-  marginHorizontal?: ViewStyle['marginHorizontal']
-  marginTop?: ViewStyle['marginTop']
-  marginBottom?: ViewStyle['marginBottom']
-  marginLeft?: ViewStyle['marginLeft']
-  marginRight?: ViewStyle['marginRight']
-  p?: ViewStyle['padding']
-  pt?: ViewStyle['paddingVertical']
-  pb?: ViewStyle['paddingVertical']
-  pl?: ViewStyle['paddingLeft']
-  pr?: ViewStyle['paddingRight']
-  px?: ViewStyle['paddingHorizontal']
-  py?: ViewStyle['paddingVertical']
-  padding?: ViewStyle['padding']
-  paddingVertical?: ViewStyle['paddingVertical']
-  paddingHorizontal?: ViewStyle['paddingHorizontal']
-  paddingTop?: ViewStyle['paddingTop']
-  paddingBottom?: ViewStyle['paddingBottom']
-  paddingLeft?: ViewStyle['paddingLeft']
-  paddingRight?: ViewStyle['paddingRight']
-  children?: React.ReactNode
-  // style?: ViewStyle
-  style?: StyleProp<ViewStyle>
-  align?: 'center' | 'vCenter' | 'hCenter'
-}
-
-function mapProps(props: StackProps) {
-  const stylesArr: any[] = []
-
-  Object.entries(props).forEach(([key, value]) => {
-    if (value == null) return
-
-    const fn = (stackStyles as any)[key]
-    if (typeof fn === 'function') {
-      stylesArr.push(fn(value))
-    }
-  })
-
-  return stylesArr
-}
-
-const VStack = ({children, style, align, ...props}: StackProps) => {
-  stackStyles.useVariants({align})
-  const styleArr = useMemo(() => mapProps(props), [props])
-
-  return (
-    <View style={[stackStyles.stack, stackStyles.vstack, styleArr, style]}>
-      {children}
-    </View>
-  )
-}
-
-const HStack = ({children, style, align, ...props}: StackProps) => {
-  stackStyles.useVariants({align})
-  const styleArr = useMemo(() => mapProps(props), [props])
-
-  return (
-    <View style={[stackStyles.stack, stackStyles.hstack, styleArr, style]}>
-      {children}
-    </View>
-  )
-}
-
-const stackStyles = StyleSheet.create({
-  stack: {},
-  vstack: {
-    flexDirection: 'column',
-    variants: {
-      align: {
-        center: {
-          alignItems: 'center',
-          justifyContent: 'center',
-        },
-        vCenter: {
-          justifyContent: 'center',
-        },
-        hCenter: {
-          alignItems: 'center',
-        },
-      },
-    },
-  },
-  hstack: {
-    flexDirection: 'row',
-    variants: {
-      align: {
-        center: {
-          alignItems: 'center',
-          justifyContent: 'center',
-        },
-        vCenter: {
-          alignItems: 'center',
-        },
-        hCenter: {
-          justifyContent: 'center',
-        },
-      },
-    },
-  },
-
-  backgroundColor: value => ({
-    backgroundColor: value,
-  }),
-  bg: value => ({
-    backgroundColor: value,
-  }),
-
-  width: value => ({
-    width: value,
-  }),
-  w: value => ({
-    width: value,
-  }),
-  height: value => ({
-    height: value,
-  }),
-  h: value => ({
-    height: value,
-  }),
-
-  borderColor: value => ({
-    borderColor: value,
-  }),
-  borderWidth: value => ({
-    borderWidth: value,
-  }),
-  borderStyle: value => ({
-    borderStyle: value,
-  }),
-  borderRadius: value => ({
-    borderRadius: value,
-  }),
-  br: value => ({
-    borderRadius: value,
-  }),
-
-  flex: value => ({
-    flex: value,
-  }),
-  flexShrink: value => ({
-    flexShrink: value,
-  }),
-  flexGrow: value => ({
-    flexGrow: value,
-  }),
-  flexBasis: value => ({
-    flexBasis: value,
-  }),
-  flexWrap: value => ({
-    flexWrap: value,
-  }),
-  alignSelf: value => ({
-    alignSelf: value,
-  }),
-  alignItems: value => ({
-    alignItems: value,
-  }),
-  justifyContent: value => ({
-    justifyContent: value,
-  }),
-  gap: value => ({
-    gap: value,
-  }),
-
-  m: value => ({
-    margin: value,
-  }),
-  mt: value => ({
-    marginTop: value,
-  }),
-  mb: value => ({
-    marginBottom: value,
-  }),
-  ml: value => ({
-    marginLeft: value,
-  }),
-  mr: value => ({
-    marginRight: value,
-  }),
-  mx: value => ({
-    marginHorizontal: value,
-  }),
-  my: value => ({
-    marginVertical: value,
-  }),
-  margin: value => ({
-    margin: value,
-  }),
-  marginVertical: value => ({
-    marginVertical: value,
-  }),
-  marginHorizontal: value => ({
-    marginHorizontal: value,
-  }),
-  marginLeft: value => ({
-    marginLeft: value,
-  }),
-  marginRight: value => ({
-    marginRight: value,
-  }),
-  marginTop: value => ({
-    marginTop: value,
-  }),
-  marginBottom: value => ({
-    marginBottom: value,
-  }),
-
-  p: value => ({
-    padding: value,
-  }),
-  pt: value => ({
-    paddingTop: value,
-  }),
-  pb: value => ({
-    paddingBottom: value,
-  }),
-  pl: value => ({
-    paddingLeft: value,
-  }),
-  pr: value => ({
-    paddingRight: value,
-  }),
-  px: value => ({
-    paddingHorizontal: value,
-  }),
-  py: value => ({
-    paddingVertical: value,
-  }),
-  padding: value => ({
-    padding: value,
-  }),
-  paddingHorizontal: value => ({
-    paddingHorizontal: value,
-  }),
-  paddingVertical: value => ({
-    paddingVertical: value,
-  }),
-  paddingLeft: value => ({
-    paddingLeft: value,
-  }),
-  paddingRight: value => ({
-    paddingRight: value,
-  }),
-  paddingTop: value => ({
-    paddingTop: value,
-  }),
-  paddingBottom: value => ({
-    paddingBottom: value,
-  }),
-})
-
-export {VStack, HStack}