react-native-varia 0.0.1

package/lib/components/ReText.tsx

@@ -0,0 +1,124 @@
+import type { StyleProp, TextInputProps, TextStyle } from 'react-native';
+import { TextInput } from 'react-native';
+import Animated, { useAnimatedProps } from 'react-native-reanimated';
+import { StyleSheet } from 'react-native-unistyles';
+import { TextSemanticSizes } from '../style/types';
+import reTextTokens from '../theme/ReText.recipe';
+
+Animated.addWhitelistedNativeProps({ text: true });
+
+export interface TextProps extends Omit<TextInputProps, 'value' | 'style'> {
+  text: Animated.SharedValue<string>;
+  as?: TextSemanticSizes;
+  fontSize?: number | undefined;
+  color?: string | undefined;
+  style?: TextStyle;
+  children?: React.ReactNode;
+  numberOfLines?: number;
+  adjustsFontSizeToFit?: boolean;
+  // style?: Animated.AnimateProps<RNTextProps>['style'];
+  mixins?: StyleProp<TextStyle> | StyleProp<TextStyle>[];
+}
+
+const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
+
+const ReText = ({
+  as = 'body',
+  fontSize,
+  color,
+  text,
+  style,
+  mixins,
+  ...rest
+}: TextProps) => {
+
+  styles.useVariants({
+    as,
+  });
+
+  const animatedProps = useAnimatedProps(() => {
+    return {
+      text: text.value,
+    } as any;
+  });
+  return (
+    <AnimatedTextInput
+      underlineColorAndroid="transparent"
+      multiline={true}
+      editable={false}
+      value={text.value}
+      style={[
+        styles.text(fontSize, color, reTextTokens.defaultProps),
+        style,
+        mixins && mixins,
+      ]}
+      onStartShouldSetResponder={() => true}
+      {...rest}
+      {...{ animatedProps }}
+    />
+  );
+};
+
+const styles = StyleSheet.create((theme) => ({
+  text: (
+    fontSize: number | undefined,
+    color: string | undefined,
+    defaultProps
+  ) => ({
+    verticalAlign: 'bottom',
+    padding: 0,
+    //@ts-ignore
+    fontSize: theme.fontSizes.xxl,
+    textAlign: 'left',
+    color: color || defaultProps.color,
+    variants: {
+      as: {
+        h1: {
+          //@ts-ignore
+          fontSize: fontSize || theme.fontSizes.xxl,
+        },
+        h2: {
+          //@ts-ignore
+          fontSize: fontSize || theme.fontSizes.xl,
+        },
+        h3: {
+          //@ts-ignore
+          fontSize: fontSize || theme.fontSizes.lg,
+        },
+        h4: {
+          //@ts-ignore
+          fontSize: fontSize || theme.fontSizes.md,
+        },
+        h5: {
+          //@ts-ignore
+          fontSize: fontSize || theme.fontSizes.sm,
+        },
+        h6: {
+          //@ts-ignore
+          fontSize: fontSize || theme.fontSizes.xs,
+        },
+        h7: {
+          //@ts-ignore
+          fontSize: fontSize || theme.fontSizes.xs,
+        },
+        h8: {
+          //@ts-ignore
+          fontSize: fontSize || theme.fontSizes.xxs,
+        },
+        h9: {
+          //@ts-ignore
+          fontSize: fontSize || theme.fontSizes.xxs,
+        },
+        body: {
+          //@ts-ignore
+          fontSize: fontSize || theme.fontSizes.md,
+        },
+      },
+    },
+  }),
+  customStyle: (style) => ({
+    ...style,
+  }),
+}));
+
+export default ReText;

package/lib/components/Slider.tsx

@@ -0,0 +1,334 @@
+import React from 'react'
+import {type LayoutChangeEvent, View} 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 {hexToRgba} from '../style/utils'
+import {SliderStyles, SliderTokens} from '../theme/Slider.recipe'
+
+type SliderVariants = UnistylesVariants<typeof SliderStyles>
+
+type SliderProps = SliderVariants & {
+  thickness?: number
+  minimumTrackThickness?: number
+  minimumTrackColor?: string
+  displayStepsOnMinimumTrack?: boolean
+  thumbSize?: {
+    width: number
+    height: number
+  }
+  thumbChildren?: React.ReactNode
+  axis: 'x' | 'y'
+  steps?: number
+  value?: number
+  onValueChange?: (value: number) => void
+  onSlidingComplete?: (value: number) => void
+}
+
+const Slider = ({
+  size = SliderTokens.defaultProps.size,
+  colorPalette = SliderTokens.defaultProps.colorPalette,
+  thickness = 10,
+  minimumTrackColor = '#FFF',
+  displayStepsOnMinimumTrack = false,
+  thumbChildren: ThumbChildren,
+  axis = 'x',
+  value = 0,
+  steps,
+  onValueChange,
+  onSlidingComplete,
+}: SliderProps) => {
+  let styles
+  if (axis === 'x') {
+    styles = stylesX
+  } else {
+    styles = stylesY
+  }
+  SliderStyles.useVariants({
+    size,
+    colorPalette,
+  })
+  const halfSize = (SliderTokens.thumb.variants.size[size]?.width ?? 0) / 2
+  const thumbSize = {
+    width: SliderTokens.thumb.variants.size[size]?.width,
+    height: SliderTokens.thumb.variants.size[size]?.height,
+  }
+  const maximumTrackWidth =
+    SliderTokens.maximumTrack.variants.size[size]?.height ?? 0
+  const minimumTrackWidth =
+    SliderTokens.minimumTrack.variants.size[size]?.height ?? 0
+  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(() => {
+      // Mark the child gesture as active when touching the child zone
+      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)
+        onValueChange && runOnJS(onValueChange)(stepIndex)
+      } else {
+        onValueChange &&
+          runOnJS(onValueChange)(
+            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
+    })
+  // New Tap Gesture
+  const tapGesture = Gesture.Tap()
+    .onBegin(e => {
+      if (isInsideChild.value) {
+        return // Prevent parent gesture in child zone
+      }
+      const tapPosition = axis === 'x' ? e.x : e.y
+      const stepLength = steps ? trackLength.value / steps : 1
+
+      // Calculate the raw position
+      const rawValue =
+        axis === 'y'
+          ? Math.max(
+              0,
+              Math.min(trackLength.value - tapPosition, trackLength.value),
+            ) // Invert for "y"
+          : Math.max(0, Math.min(tapPosition, trackLength.value))
+
+      // Snap to step if needed
+      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 animatedTrack = useAnimatedStyle(() => ({
+    [axis === 'y' ? 'height' : 'width']: translate.value + halfSize,
+  }))
+
+  const opacityTrack = steps !== undefined && displayStepsOnMinimumTrack
+  console.log('🚀 ~ opacityTrack:', opacityTrack)
+
+  // const minimumTrackBackgroundColor =
+  //   SliderTokens.minimumTrack.variants.colorPalette[colorPalette]
+  //     ?.backgroundColor;
+  const minimumTrackBackgroundColor = hexToRgba('#ff0000', 0.5)
+  console.log('🚀 ~ minimumTrackBackgroundColor:', minimumTrackBackgroundColor)
+
+  return (
+    // <View style={{flexDirection: 'row', flex: 1}}>
+    <View
+      style={[
+        styles.container(maximumTrackWidth, halfSize),
+        SliderStyles.container,
+      ]}>
+      {axis === 'x' && <View style={{width: halfSize}} />}
+      <GestureDetector gesture={tapGesture}>
+        <View
+          style={[
+            styles.maximumTrack(maximumTrackWidth),
+            SliderStyles.maximumTrack,
+          ]}
+          onLayout={handleTrackLayout}>
+          {steps && (
+            <View style={styles.steps}>
+              {Array.from({length: steps + 1}, (_, index) => index).map(
+                (_, i) => (
+                  <View
+                    key={i}
+                    style={[styles.step(i, steps), SliderStyles.step]}
+                  />
+                ),
+              )}
+            </View>
+          )}
+          <Animated.View
+            style={[
+              styles.minimumTrack(halfSize, minimumTrackWidth),
+              SliderStyles.minimumTrack(opacityTrack),
+              animatedTrack,
+            ]}>
+            <GestureDetector gesture={slideGesture}>
+              <View
+                style={[SliderStyles.thumb, styles.thumb(halfSize, thumbSize)]}>
+                {ThumbChildren || null}
+              </View>
+            </GestureDetector>
+          </Animated.View>
+        </View>
+      </GestureDetector>
+      {axis === 'y' && <View style={{height: halfSize}} />}
+    </View>
+  )
+}
+
+const stylesX = StyleSheet.create(theme => ({
+  container: (thickness, halfSize) => ({
+    flex: thickness ? 1 : 1,
+    maxWidth: 'auto',
+    borderRadius: 22,
+    width: '100%',
+    height: '100%',
+    paddingTop: 0,
+    paddingRight: halfSize,
+    flexDirection: 'row',
+  }),
+  maximumTrack: thickness => ({
+    flex: thickness ? 1 : 1,
+    justifyContent: 'center',
+    position: 'relative',
+    borderRadius: 22,
+  }),
+  minimumTrack: (halfSize, minimumTrackThickness) => ({
+    height: minimumTrackThickness,
+    width: '100%',
+    left: halfSize * -1,
+    bottom: 'auto',
+    paddingBottom: 0,
+    paddingLeft: halfSize,
+    borderBottomLeftRadius: 20,
+    borderBottomRightRadius: 0,
+    borderTopLeftRadius: 20,
+    justifyContent: 'center',
+  }),
+  thumb: (halfSize, thumbSize) => ({
+    width: halfSize ? thumbSize.width : thumbSize.width,
+    height: thumbSize.height,
+    borderRadius: 25,
+    position: 'absolute',
+    right: 0,
+    zIndex: 2,
+    transform: [{translateX: '50%'}],
+  }),
+  steps: {
+    width: '100%',
+    height: '100%',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    zIndex: 0,
+    position: 'absolute',
+  },
+  step: (index, length) => ({
+    width: 1,
+    height: '100%',
+    backgroundColor:
+      index === 0 || index === length ? 'transparent' : theme.colors.background,
+  }),
+}))
+const stylesY = StyleSheet.create(theme => ({
+  container: (maximumTrackWidth, halfSize) => ({
+    // borderWidth: 1,
+    // borderColor: theme.colors.foreground,
+    flex: 1,
+    maxWidth: maximumTrackWidth,
+    maxHeight: 'auto',
+    borderRadius: 22,
+    width: '100%',
+    height: '100%',
+    paddingTop: halfSize,
+    paddingRight: 0,
+    backgroundColor: theme.colors.background,
+    flexDirection: 'column',
+  }),
+  maximumTrack: maximumTrackWidth => ({
+    flex: 1,
+    borderRadius: 22,
+    backgroundColor: theme.colors.background,
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'relative',
+    maxWidth: maximumTrackWidth,
+  }),
+  minimumTrack: (halfSize, minimumTrackWidth) => ({
+    position: 'absolute',
+    height: '100%',
+    width: minimumTrackWidth,
+    left: 'auto',
+    bottom: halfSize * -1,
+    paddingBottom: halfSize,
+    paddingLeft: 0,
+    borderBottomLeftRadius: 20,
+    borderBottomRightRadius: 20,
+    borderTopLeftRadius: 0,
+    alignItems: 'center',
+  }),
+  thumb: (halfSize, thumbSize) => ({
+    borderRadius: 25,
+    backgroundColor: theme.colors.foreground,
+    position: 'absolute',
+    top: 0,
+    zIndex: 2,
+    transform: [{translateY: halfSize * -1}],
+    width: thumbSize.height,
+    height: thumbSize.width,
+  }),
+  steps: {
+    width: '100%',
+    height: '100%',
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    zIndex: 0,
+  },
+  step: (index, length) => ({
+    width: '100%',
+    height: 1,
+    backgroundColor:
+      index === 0 || index === length ? 'transparent' : theme.colors.foreground,
+  }),
+}))
+
+export default Slider