react-native-varia 0.0.1 → 0.2.0

package/lib/components/Slideshow.tsx

@@ -1,52 +1,36 @@
-import {
-  Children,
-  forwardRef,
-  type ReactNode,
-  useImperativeHandle,
-  useState,
-} from 'react';
-import { View } from 'react-native';
+import {Children, 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';
+} 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 {PalettesWithNestedKeys} from '../style/varia/types'
 
 export type SlideshowRef = {
-  handleNext: () => void | null;
-  handlePrev: () => void | null;
-};
+  handleNext: () => void | null
+  handlePrev: () => void | null
+}
 
-type SlideshowVariants = UnistylesVariants<typeof SlideshowStyles>;
+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>;
+  animation?: keyof typeof SlideshowTokens.variants.animation
+  colorPalette?: PalettesWithNestedKeys
+  allowGestures?: boolean
+  flex?: number
+  onSlideChange?: (index: number) => void
+  slideContainerType?: any
+  children: ReactNode
+  ref?: React.RefObject<SlideshowRef>
 }
 
-// const slideshowTokens = getTokens('slideshow');
-
 /**
  * Flex Wrapper
  * @param colorScheme ? string: color scheme
@@ -60,228 +44,169 @@ type SlideshowProps = SlideshowVariants & {
  * @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);
+  colorPalette = 'accent',
+  variant = 'solid',
+  allowGestures = true,
+  flex = 1,
+  onSlideChange,
+  animation = SlideshowTokens.defaultProps.animation,
+  children,
+  ref,
+}: SlideshowProps) => {
+  const slides = Children.toArray(children)
+  const NUM_PAGES = slides.length
+  const scalingFactor = 1 / NUM_PAGES
+
+  SlideshowStyles.useVariants({
+    variant,
+  })
+
+  const [containerWidth, setContainerWidth] = useState(0)
+
+  const slideWidth = 100 / NUM_PAGES
+  const translateX = useSharedValue(0)
+  const currentSlide = useSharedValue(0)
+
+  type AnimationType = 'withSpring' | 'withTiming'
+
+  const animations = {
+    withSpring,
+    withTiming,
+  }
+  const animationVariant =
+    SlideshowTokens.variants?.animation && animation
+      ? SlideshowTokens.variants.animation[animation]
+      : {
+          type: 'withSpring' as AnimationType,
+          props: {
+            damping: 15,
+            stiffness: 100,
+            mass: 1,
+          },
         }
-      }
-    };
 
-    useAnimatedReaction(
-      () => currentSlide.value,
-      () => {
-        animateSlide(-currentSlide.value * slideWidth);
+  const animateSlide = (destination: number) => {
+    'worklet'
+
+    if (
+      animationVariant &&
+      animationVariant.type &&
+      animations[animationVariant.type]
+    ) {
+      translateX.value = animations[animationVariant.type](
+        destination,
+        animationVariant.props,
+      )
+
+      if (onSlideChange) {
+        runOnJS(onSlideChange)((destination / 100) * NUM_PAGES * -1)
       }
-    );
-
-    // 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>
-    );
+  useAnimatedReaction(
+    () => currentSlide.value,
+    () => {
+      animateSlide(-currentSlide.value * slideWidth)
+    },
+  )
+
+  const handlePrev = () => {
+    'worklet'
+    if (currentSlide.value > 0) {
+      currentSlide.value -= 1
+    }
+  }
+  const handleNext = () => {
+    'worklet'
+    if (currentSlide.value < NUM_PAGES - 1) {
+      currentSlide.value += 1
+    }
   }
 
-export default Slideshow;
+  const context = useSharedValue({x: 0, snapPoint: 0})
+  const velocityThreshold = 500
+
+  const slideGesture = Gesture.Pan()
+    .enabled(allowGestures)
+    .onBegin(() => {
+      context.value.x = translateX.value
+    })
+    .onUpdate(e => {
+      const pixelToPercentage =
+        (e.translationX / containerWidth) * 100 * scalingFactor
+      translateX.value = context.value.x + pixelToPercentage
+    })
+    .onEnd(({velocityX, translationX}) => {
+      const pixelToPercentage =
+        (translationX / containerWidth) * 100 * scalingFactor
+      const slideWidthPercentage = 100 / NUM_PAGES
+
+      const currentIndex = Math.round(-context.value.x / slideWidthPercentage)
+
+      let targetIndex
+      if (Math.abs(velocityX) > velocityThreshold) {
+        targetIndex = velocityX > 0 ? currentIndex - 1 : currentIndex + 1
+      } else {
+        const crossedThreshold =
+          Math.abs(pixelToPercentage) > slideWidthPercentage / 2
+        targetIndex =
+          crossedThreshold && pixelToPercentage < 0
+            ? currentIndex + 1
+            : crossedThreshold
+            ? currentIndex - 1
+            : currentIndex
+      }
+      targetIndex = Math.max(0, Math.min(NUM_PAGES - 1, targetIndex))
+      animateSlide(-targetIndex * slideWidthPercentage)
+      currentSlide.value = targetIndex
+    })
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{translateX: `${translateX.value}%`}],
+  }))
+
+  useImperativeHandle(ref, () => ({
+    handlePrev,
+    handleNext,
+  }))
+
+  return (
+    <View style={styles.flex(flex)}>
+      <GestureDetector gesture={slideGesture}>
+        <View
+          style={[styles.container(), SlideshowStyles.container(colorPalette)]}
+          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}%`),
+                  SlideshowStyles.slideContainer(colorPalette),
+                ]}>
+                {Slide}
+              </View>
+            ))}
+          </Animated.View>
+        </View>
+      </GestureDetector>
+    </View>
+  )
+}
 
-// type SlideshowTokenType = ReturnType<Tokens['slideshow']>; // This is the return of the function
-// type VariantsType = SlideshowTokenType['variants'];
-// type SlideContainerType = SlideshowTokenType['slideContainer']['variants'];
+export default Slideshow
 
 const styles = StyleSheet.create({
-  flex: (flex) => ({
+  flex: flex => ({
     flex,
     flexDirection: 'row',
   }),
-  container: (
-    // variants: VariantsType
-  ) => ({
+  container: () => ({
     zIndex: 1,
     width: '100%',
     height: '100%',
@@ -290,28 +215,16 @@ const styles = StyleSheet.create({
     alignItems: 'flex-start',
     backgroundColor: 'white',
     borderRadius: 16,
-    // backgroundColor: slideshowTokens.baseStyles?.backgroundColor?.(theme),
-    // borderRadius: slideshowTokens.baseStyles?.borderRadius,
-    // variants: {
-    //   colorScheme: variants.colorScheme as any,
-    // },
   }),
-  slidesContainer: (width) => ({
+  slidesContainer: width => ({
     flexDirection: 'row',
     width,
     flex: 1,
   }),
-  slide: (width, 
-    // variants: SlideContainerType
-  ) => ({
+  slide: width => ({
     width,
     flex: 1,
-    // height: '100%',
     justifyContent: 'center',
     alignItems: 'center',
-    // variants: {
-    //   colorScheme: variants.colorScheme as any,
-    //   spacing: variants.spacing as any,
-    // },
   }),
-});
+})