react-native-varia 0.0.1

package/lib/components/Slideshow.tsx

@@ -0,0 +1,317 @@
+import {
+  Children,
+  forwardRef,
+  type ReactNode,
+  useImperativeHandle,
+  useState,
+} from 'react';
+import { View } from 'react-native';
+import Animated, {
+  useAnimatedReaction,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+  withTiming,
+} from 'react-native-reanimated';
+import {runOnJS} from 'react-native-worklets';
+import { StyleSheet, UnistylesVariants } from 'react-native-unistyles';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import { SlideshowStyles, SlideshowTokens } from '../theme/Slideshow.recipe';
+import { SlidingDrawerTokens } from '../theme/SlidingDrawer.recipe';
+// import type { SpringConfig } from 'react-native-reanimated/lib/typescript/animation/springUtils';
+// import type {
+//   SlideshowAnimationVariants,
+//   SlideshowColorSchemeVariants,
+// } from '../style/styles/types';
+// import { type Tokens } from '../style/tokenManager';
+// import { useTokens } from '../style/useTokens';
+
+export type SlideshowRef = {
+  handleNext: () => void | null;
+  handlePrev: () => void | null;
+};
+
+type SlideshowVariants = UnistylesVariants<typeof SlideshowStyles>;
+
+type SlideshowProps = SlideshowVariants & {
+  animation?: keyof typeof SlidingDrawerTokens.variants.animation;
+  // spacing?: SlideshowSlideContainerSpacing;
+  allowGestures?: boolean;
+  flex?: number;
+  onSlideChange?: (index: number) => void;
+  // slideContainerType?: SlideshowSlideContainerColorScheme;
+  slideContainerType?: any;
+  children: ReactNode;
+  ref?: React.RefObject<SlideshowRef>;
+}
+
+// const slideshowTokens = getTokens('slideshow');
+
+/**
+ * Flex Wrapper
+ * @param colorScheme ? string: color scheme
+ * @param animation ? string: animation props
+ * @param allowGestures ? boolean: allow gestures
+ * @param flex ? number: flex value
+ * @param onSlideChange ? function: callback function
+ * @param slideContainerType ? color scheme
+ * @param children ? react children
+ * @param ref ? react ref
+ * @returns Slideshow react component
+ */
+const Slideshow = ({
+      allowGestures = true,
+      flex = 1,
+      onSlideChange,
+      colorPalette,
+      animation = SlideshowTokens.defaultProps.animation,
+      spacing = 'none',
+      // slideContainerType = 'primary',
+      children,
+      ref
+    } : SlideshowProps,
+  ) => {
+    // const slideshowTokens = useTokens('slideshow')();
+
+    // const resolvedColorScheme =
+    //   colorScheme ??
+    //   (slideshowTokens.defaultProps
+    //     .colorScheme as keyof SlideshowColorSchemeVariants);
+
+    // const resolvedAnimation =
+    //   animation ??
+    //   (SlideshowTokens.defaultProps.animation 
+    //     // as keyof SlideshowTokens.variants.animation
+    //   );
+
+    // const resolvedSpacing =
+    //   spacing ??
+    //   (slideshowTokens.defaultProps
+    //     .spacing as keyof SlideshowSlideContainerSpacing);
+
+    const slides = Children.toArray(children);
+    const NUM_PAGES = slides.length; // Total number of slides
+    const scalingFactor = 1 / NUM_PAGES;
+
+    // styles.useVariants({
+    //   colorScheme: resolvedColorScheme,
+    //   spacing,
+    // });
+
+    SlideshowStyles.useVariants({
+      colorPalette,
+    });
+    
+    const [containerWidth, setContainerWidth] = useState(0); // To store the container width
+
+    const slideWidth = 100 / NUM_PAGES; // Each slide's width as a percentage
+    const translateX = useSharedValue(0); // Tracks the animated X position
+    const currentSlide = useSharedValue(0); // Tracks the current slide index
+
+    type AnimationType = 'withSpring' | 'withTiming';
+
+    const animations = {
+      withSpring,
+      withTiming,
+    };
+    const animationVariant =
+      SlideshowTokens.variants?.animation && animation
+        ? SlideshowTokens.variants.animation[animation]
+        : {
+            type: 'withSpring' as AnimationType, // Type assertion ensures 'withSpring' is a valid value
+            props: {
+              damping: 15,
+              stiffness: 100,
+              mass: 1,
+            },
+          };
+
+    const animateSlide = (destination: number) => {
+      'worklet';
+
+      if (
+        animationVariant &&
+        animationVariant.type &&
+        animations[animationVariant.type]
+      ) {
+        translateX.value = animations[animationVariant.type](
+          destination,
+          animationVariant.props
+        );
+
+        // Optional callback for onSlideChange
+        if (onSlideChange) {
+          runOnJS(onSlideChange)((destination / 100) * NUM_PAGES * -1);
+        }
+      }
+    };
+
+    useAnimatedReaction(
+      () => currentSlide.value,
+      () => {
+        animateSlide(-currentSlide.value * slideWidth);
+      }
+    );
+
+    // Move to the previous slide
+    const handlePrev = () => {
+      'worklet';
+      if (currentSlide.value > 0) {
+        currentSlide.value -= 1;
+      }
+    };
+    // Move to the next slide
+    const handleNext = () => {
+      'worklet';
+      if (currentSlide.value < NUM_PAGES - 1) {
+        currentSlide.value += 1;
+      }
+    };
+
+    const context = useSharedValue({ x: 0, snapPoint: 0 });
+    const velocityThreshold = 500; // Velocity threshold in px/s
+
+    const slideGesture = Gesture.Pan()
+      .enabled(allowGestures)
+      .onBegin(() => {
+        context.value.x = translateX.value;
+      })
+      .onUpdate((e) => {
+        const pixelToPercentage =
+          (e.translationX / containerWidth) * 100 * scalingFactor; // Adjusted conversion (px to %)
+        translateX.value = context.value.x + pixelToPercentage;
+      })
+      .onEnd(({ velocityX, translationX }) => {
+        const pixelToPercentage =
+          (translationX / containerWidth) * 100 * scalingFactor;
+        const slideWidthPercentage = 100 / NUM_PAGES;
+
+        // Determine current slide index based on translateX
+        const currentIndex = Math.round(
+          -context.value.x / slideWidthPercentage
+        );
+
+        // Decide snapping based on velocity or distance
+        let targetIndex;
+        if (Math.abs(velocityX) > velocityThreshold) {
+          // Use velocity to decide direction
+          targetIndex = velocityX > 0 ? currentIndex - 1 : currentIndex + 1;
+        } else {
+          // Use the 50% distance rule
+          const crossedThreshold =
+            Math.abs(pixelToPercentage) > slideWidthPercentage / 2;
+          targetIndex =
+            crossedThreshold && pixelToPercentage < 0
+              ? currentIndex + 1
+              : crossedThreshold
+                ? currentIndex - 1
+                : currentIndex;
+        }
+
+        // Clamp to valid range
+        targetIndex = Math.max(0, Math.min(NUM_PAGES - 1, targetIndex));
+
+        // Animate to the target slide
+        animateSlide(-targetIndex * slideWidthPercentage);
+
+        // Update the currentSlide shared value
+        currentSlide.value = targetIndex;
+      });
+
+    // Animated style for the slides container
+    const animatedStyle = useAnimatedStyle(() => ({
+      transform: [{ translateX: `${translateX.value}%` }],
+    }));
+
+    useImperativeHandle(ref, () => ({
+      handlePrev,
+      handleNext,
+    }));
+
+    return (
+      <View style={styles.flex(flex)}>
+        <GestureDetector gesture={slideGesture}>
+          <View
+            //@ts-ignore
+            // TODO: fix type
+            style={[styles.container(
+              // slideshowTokens.variants
+            ),
+            SlideshowStyles.container
+          ]}
+            onLayout={(e) => setContainerWidth(e.nativeEvent.layout.width)}
+          >
+            <Animated.View
+              style={[
+                styles.slidesContainer(`${NUM_PAGES * 100}%`),
+                animatedStyle,
+              ]}
+            >
+              {slides.map((Slide, index) => (
+                <View
+                  key={index}
+                  style={[
+                    styles.slide(
+                      `${slideWidth}%`,
+                      // SlideshowTokens.slideContainer.variants
+                    ),
+                    SlideshowStyles.slideContainer
+                  ]}
+                >
+                  {Slide}
+                </View>
+              ))}
+            </Animated.View>
+          </View>
+        </GestureDetector>
+      </View>
+    );
+  }
+
+export default Slideshow;
+
+// type SlideshowTokenType = ReturnType<Tokens['slideshow']>; // This is the return of the function
+// type VariantsType = SlideshowTokenType['variants'];
+// type SlideContainerType = SlideshowTokenType['slideContainer']['variants'];
+
+const styles = StyleSheet.create({
+  flex: (flex) => ({
+    flex,
+    flexDirection: 'row',
+  }),
+  container: (
+    // variants: VariantsType
+  ) => ({
+    zIndex: 1,
+    width: '100%',
+    height: '100%',
+    overflow: 'hidden',
+    justifyContent: 'flex-start',
+    alignItems: 'flex-start',
+    backgroundColor: 'white',
+    borderRadius: 16,
+    // backgroundColor: slideshowTokens.baseStyles?.backgroundColor?.(theme),
+    // borderRadius: slideshowTokens.baseStyles?.borderRadius,
+    // variants: {
+    //   colorScheme: variants.colorScheme as any,
+    // },
+  }),
+  slidesContainer: (width) => ({
+    flexDirection: 'row',
+    width,
+    flex: 1,
+  }),
+  slide: (width, 
+    // variants: SlideContainerType
+  ) => ({
+    width,
+    flex: 1,
+    // height: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    // variants: {
+    //   colorScheme: variants.colorScheme as any,
+    //   spacing: variants.spacing as any,
+    // },
+  }),
+});

package/lib/components/SlidingDrawer.tsx

@@ -0,0 +1,307 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import React, { forwardRef, useImperativeHandle } from 'react';
+import { StyleSheet, UnistylesVariants } from 'react-native-unistyles';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+  withTiming,
+  type SharedValue,
+} from 'react-native-reanimated';
+import {runOnJS} from 'react-native-worklets';
+// import type { SpringConfig } from 'react-native-reanimated/lib/typescript/animation/springUtils';
+
+// import type {
+//   SlidingDrawerAnimationVariants,
+//   SlidingDrawerColorSchemeVariants,
+// } from '../style/styles/types';
+// import { useTokens } from '../style/useTokens';
+import {SlidingDrawerTokens, SlidingDrawerStyles} from '../theme/SlidingDrawer.recipe';
+
+export type SlidingDrawerRef = {
+  snapTo: (point: number) => void | null;
+  expand: () => void | null;
+  collapse: () => void | null;
+};
+
+type SlidingDrawerVariants = UnistylesVariants<typeof SlidingDrawerStyles>;
+
+type SlidingDrawerProps = SlidingDrawerVariants & {
+  // colorScheme?: keyof typeof SlidingDrawerTokens.variants.colorPalette;
+  animation?: keyof typeof SlidingDrawerTokens.variants.animation;
+  flex?: number;
+  direction?: 1 | -1;
+  onCollapse?: () => void;
+  onExpand?: () => void;
+  onSnap?: (point: number) => void;
+  snapPoints: number[];
+  axis: 'y' | 'x';
+  allowGestures?: boolean;
+  overlay?: boolean;
+  children?: React.ReactNode;
+  // style?: StyleProp<ViewStyle>;
+  // mixins?: StyleProp<ViewStyle> | StyleProp<ViewStyle>[];
+  ref?: React.RefObject<SlidingDrawerRef>;
+}
+
+const SlidingDrawer = ({
+      colorPalette,
+      animation = SlidingDrawerTokens.defaultProps.animation,
+      flex = 0,
+      direction = 1,
+      onCollapse,
+      onExpand,
+      onSnap,
+      snapPoints,
+      axis,
+      allowGestures = true,
+      overlay = false,
+      children,
+      // style,
+      // mixins,
+      ref
+    }: SlidingDrawerProps
+  ) => {
+    console.log("🚀 ~ ref:", ref)
+    // const slidingDrawerTokens = useTokens('slidingDrawer')();
+
+    // const resolvedColorScheme =
+    //   colorScheme ??
+    //   (slidingDrawerTokens.defaultProps
+    //     .colorScheme as keyof SlidingDrawerColorSchemeVariants);
+
+    // const resolvedAnimation =
+    //   animation ??
+    //   (slidingDrawerTokens.defaultProps
+    //     .animation as keyof SlidingDrawerAnimationVariants);
+
+    SlidingDrawerStyles.useVariants({
+      colorPalette,
+      // animation,
+    });
+
+    // Adjust points based on direction and axis
+    const points = snapPoints.map((point) => point * direction);
+
+    const translate = useSharedValue(points[0]);
+
+    const context: SharedValue<{
+      position: any;
+      snapPoint: number;
+    }> = useSharedValue({
+      position: points[0], // Default position
+      snapPoint: 0, // Default snapPoint
+    });
+
+    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 animationVariant = variants.animation[animation];
+
+    console.log("🚀 ~ animationVariant:", animationVariant)
+
+    const snapTo = (destination: number) => {
+      'worklet';
+
+      // Type guard to ensure animationVariant is not undefined
+      if (animationVariant && animationVariant.type) {
+        translate.value = animations[animationVariant.type](
+          points[destination],
+          animationVariant.props
+        );
+        updateCurrentSnapPoint(destination);
+        onSnap && runOnJS(onSnap)(destination);
+      }
+    };
+
+    const expand = () => {
+      snapTo(points.length - 1);
+      if (overlay) {
+        showOverlay();
+      }
+      onExpand && runOnJS(onExpand)();
+    };
+
+    const isCollapsed = () => {
+      'worklet';
+      return context.value.snapPoint === 0;
+    };
+
+    const collapse = () => {
+      snapTo(0);
+      if (overlay) {
+        hideOverlay();
+      }
+      onCollapse && runOnJS(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 endLimit = direction === 1 ? points[0] : points[points.length - 1];
+
+    const slideGesture = Gesture.Pan()
+      .enabled(allowGestures)
+      .onBegin(() => {
+        context.value.position = translate.value;
+      })
+      .onUpdate((event) => {
+        const delta = axis === 'y' ? event.translationY : event.translationX;
+        translate.value = delta + (context.value.position ?? 0);
+      })
+      .onEnd(({ velocityX, velocityY, translationX, translationY }) => {
+        const velocity = axis === 'y' ? velocityY : velocityX;
+        const translation = axis === 'y' ? translationY : translationX;
+
+        const forwardsThreshold =
+          // @ts-ignore
+          (points[context.value.snapPoint] +
+            // @ts-ignore
+            points[context.value.snapPoint + 1]) /
+          2;
+        const backwardsThreshold =
+          // @ts-ignore
+          (points[context.value.snapPoint] +
+            // @ts-ignore
+            points[context.value.snapPoint - 1]) /
+          2;
+
+        if (translation * direction < 0) {
+          if (
+            // @ts-ignore
+            ((direction === 1 && translate.value < forwardsThreshold) ||
+              // @ts-ignore
+              (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 (
+            // @ts-ignore
+            ((direction === 1 && translate.value > backwardsThreshold) ||
+              // @ts-ignore
+              (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(() => {
+      return {
+        transform: [
+          { [axis === 'y' ? 'translateY' : 'translateX']: translate.value },
+        ],
+      } as any;
+    });
+
+    const displayOverlayStyle = useAnimatedStyle(() => {
+      return {
+        display: changeDisplay.value,
+        opacity: opacity.value,
+      } as any;
+    });
+
+    return (
+      <>
+        {overlay && (
+          <Animated.View
+            style={[
+              {
+                ...StyleSheet.absoluteFillObject,
+                backgroundColor: 'rgba(0, 0, 0, 0.5)',
+              },
+              displayOverlayStyle,
+            ]}
+          />
+        )}
+        <GestureDetector gesture={slideGesture}>
+          <Animated.View
+            style={[
+              styles.container(flex, direction, axis, SlidingDrawerTokens),
+              blockAnimatedStyle,
+              SlidingDrawerStyles.container,
+              // style && styles.customStyle(style),
+              // mixins && mixins,
+            ]}
+          >
+            {children}
+          </Animated.View>
+        </GestureDetector>
+      </>
+    );
+  }
+;
+
+export default SlidingDrawer;
+
+const styles = StyleSheet.create({
+  container: (flex, direction, axis, slidingDrawerTokens): any => ({
+    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: '100%',
+    backgroundColor: slidingDrawerTokens.defaultProps.backgroundColor,
+    borderRadius: slidingDrawerTokens.defaultProps.borderRadius,
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    boxShadow: slidingDrawerTokens.defaultProps.boxShadow,
+    zIndex: 5,
+    // variants: {
+    //   colorScheme: slidingDrawerTokens.variants.colorScheme,
+    // },
+  }),
+  customStyle: (style) => ({
+    ...style,
+  }),
+});

package/lib/components/Spinner.tsx

@@ -0,0 +1,44 @@
+import {
+  ActivityIndicator,
+  ColorValue,
+  type ActivityIndicatorProps,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native'
+import {withUnistyles} from 'react-native-unistyles'
+import {ThemeColors} from '../style/types'
+import {SpinnerTokens} from '../theme/Spinner.recipe'
+
+interface SpinnerProps extends ActivityIndicatorProps {
+  color?: ThemeColors
+  size?: number
+  style?: StyleProp<ViewStyle>
+  mixins?: StyleProp<ViewStyle> | StyleProp<ViewStyle>[]
+  colors: Record<string, ColorValue>
+}
+
+const BaseSpinner = ({
+  size = SpinnerTokens.defaultProps.size,
+  color = SpinnerTokens.defaultProps.color,
+  style,
+  mixins,
+  colors,
+  ...props
+}: SpinnerProps) => {
+  const resolvedColor = color && color in colors ? colors[color] : color
+
+  return (
+    <ActivityIndicator
+      color={resolvedColor}
+      size={size}
+      {...props}
+      style={[style && style, mixins && mixins]}
+    />
+  )
+}
+
+const Spinner = withUnistyles(BaseSpinner, theme => ({
+  colors: theme.colors,
+}))
+
+export default Spinner