react-native-varia 0.0.1 → 0.2.0

package/lib/components/SlidingDrawer.tsx

@@ -1,286 +1,243 @@
-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 {Gesture, GestureDetector} from 'react-native-gesture-handler'
+import React, {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';
+} from 'react-native-reanimated'
+import {runOnJS} from 'react-native-worklets'
+import {
+  SlidingDrawerTokens,
+  SlidingDrawerStyles,
+} from '../theme/SlidingDrawer.recipe'
+import {PalettesWithNestedKeys} from '../style/varia/types'
 
 export type SlidingDrawerRef = {
-  snapTo: (point: number) => void | null;
-  expand: () => void | null;
-  collapse: () => void | null;
-};
+  snapTo: (point: number) => void | null
+  expand: () => void | null
+  collapse: () => void | null
+}
 
-type SlidingDrawerVariants = UnistylesVariants<typeof SlidingDrawerStyles>;
+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>;
+  colorPalette?: PalettesWithNestedKeys
+  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
+  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
-    });
+  colorPalette = 'accent',
+  variant = SlidingDrawerTokens.defaultProps.variant,
+  animation = SlidingDrawerTokens.defaultProps.animation,
+  flex = 0,
+  direction = 1,
+  onCollapse,
+  onExpand,
+  onSnap,
+  snapPoints,
+  axis,
+  allowGestures = true,
+  overlay = false,
+  children,
+  ref,
+}: SlidingDrawerProps) => {
+  SlidingDrawerStyles.useVariants({
+    variant,
+  })
+
+  const points = snapPoints.map(point => point * direction)
+
+  const translate = useSharedValue(points[0])
+
+  const context: SharedValue<{
+    position: any
+    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 changeDisplay = useSharedValue('none');
-    const opacity = useSharedValue(0);
+  const animations = {
+    withSpring,
+    withTiming,
+  }
 
-    const VELOCITY_THRESHOLD = 2000;
+  const animationVariant = SlidingDrawerTokens.variants.animation[animation]
 
-    const updateCurrentSnapPoint = (snapPoint: number) => {
-      'worklet';
-      context.value = { position: context.value.position, snapPoint };
-    };
+  const snapTo = (destination: number) => {
+    'worklet'
 
-    const animations = {
-      withSpring,
-      withTiming,
-    };
+    if (animationVariant && animationVariant.type) {
+      translate.value = animations[animationVariant.type](
+        points[destination],
+        animationVariant.props,
+      )
+      updateCurrentSnapPoint(destination)
+      onSnap && runOnJS(onSnap)(destination)
+    }
+  }
 
-    const animationVariant =
-      SlidingDrawerTokens.variants.animation[animation];
-    // const animationVariant = variants.animation[animation];
+  const expand = () => {
+    snapTo(points.length - 1)
+    if (overlay) {
+      showOverlay()
+    }
+    onExpand && runOnJS(onExpand)()
+  }
 
-    console.log("🚀 ~ animationVariant:", animationVariant)
+  const isCollapsed = () => {
+    'worklet'
+    return context.value.snapPoint === 0
+  }
 
-    const snapTo = (destination: number) => {
-      'worklet';
+  const collapse = () => {
+    snapTo(0)
+    if (overlay) {
+      hideOverlay()
+    }
+    onCollapse && runOnJS(onCollapse)()
+  }
 
-      // 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 hideOverlay = () => {
+    'worklet'
+    changeDisplay.value = 'none'
+    opacity.value = withTiming(0, {duration: 200})
+  }
+  const showOverlay = () => {
+    'worklet'
+    changeDisplay.value = 'flex'
+    opacity.value = withTiming(1, {duration: 200})
+  }
 
-    const expand = () => {
-      snapTo(points.length - 1);
-      if (overlay) {
-        showOverlay();
+  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
+      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 =
+        (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)
+        }
       }
-      onExpand && runOnJS(onExpand)();
-    };
-
-    const isCollapsed = () => {
-      'worklet';
-      return context.value.snapPoint === 0;
-    };
-
-    const collapse = () => {
-      snapTo(0);
+    })
+    .onFinalize(() => {
       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);
-          }
+        if (isCollapsed()) {
+          hideOverlay()
         } 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();
-          }
+          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 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,
+            },
+            displayOverlayStyle,
+            SlidingDrawerStyles.backdrop(colorPalette),
+          ]}
+        />
+      )}
+      <GestureDetector gesture={slideGesture}>
+        <Animated.View
+          style={[
+            styles.container(flex, direction, axis, SlidingDrawerTokens),
+            blockAnimatedStyle,
+            SlidingDrawerStyles.container(colorPalette),
+          ]}>
+          {children}
+        </Animated.View>
+      </GestureDetector>
+    </>
+  )
+}
+export default SlidingDrawer
 
 const styles = StyleSheet.create({
   container: (flex, direction, axis, slidingDrawerTokens): any => ({
@@ -291,17 +248,11 @@ const styles = StyleSheet.create({
     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,
-    // },
+    zIndex: 100,
   }),
-  customStyle: (style) => ({
+  customStyle: style => ({
     ...style,
   }),
-});
+})

package/lib/components/Spinner.tsx

@@ -1,36 +1,45 @@
 import {
   ActivityIndicator,
-  ColorValue,
   type ActivityIndicatorProps,
   type StyleProp,
   type ViewStyle,
 } from 'react-native'
 import {withUnistyles} from 'react-native-unistyles'
-import {ThemeColors} from '../style/types'
+import {PalettesWithNestedKeys, ThemeColors} from '../style/varia/types'
 import {SpinnerTokens} from '../theme/Spinner.recipe'
+import {resolveColor} from '../style/varia/utils'
+import {SpinnerStyles} from '../theme/Spinner.recipe'
+import {UnistylesVariants} from 'react-native-unistyles'
 
-interface SpinnerProps extends ActivityIndicatorProps {
-  color?: ThemeColors
-  size?: number
-  style?: StyleProp<ViewStyle>
-  mixins?: StyleProp<ViewStyle> | StyleProp<ViewStyle>[]
-  colors: Record<string, ColorValue>
-}
+type SpinnerVariants = UnistylesVariants<typeof SpinnerStyles>
+type SpinnerProps = SpinnerVariants &
+  Omit<ActivityIndicatorProps, 'size'> & {
+    color?: ThemeColors
+    style?: StyleProp<ViewStyle>
+    mixins?: StyleProp<ViewStyle> | StyleProp<ViewStyle>[]
+    colors: any
+    colorPalette?: PalettesWithNestedKeys
+  }
 
 const BaseSpinner = ({
-  size = SpinnerTokens.defaultProps.size,
+  size = SpinnerTokens.defaultProps.size as SpinnerProps['size'],
   color = SpinnerTokens.defaultProps.color,
   style,
   mixins,
   colors,
+  colorPalette = 'accent',
   ...props
 }: SpinnerProps) => {
-  const resolvedColor = color && color in colors ? colors[color] : color
+  const resolvedColor = resolveColor(color, colors, colorPalette)
+
+  SpinnerStyles.useVariants({
+    size,
+  })
 
   return (
     <ActivityIndicator
       color={resolvedColor}
-      size={size}
+      size={SpinnerStyles.base.width}
       {...props}
       style={[style && style, mixins && mixins]}
     />