react-native-varia 0.0.1 → 0.2.0

package/lib/components/Switch.tsx

@@ -1,224 +1,177 @@
-import React, { useLayoutEffect, useRef } from 'react';
+import {TouchableWithoutFeedback} from 'react-native'
 import Animated, {
   useAnimatedStyle,
-  interpolateColor,
   useSharedValue,
+  withSpring,
   withTiming,
-  Easing,
-} from 'react-native-reanimated';
-import { runOnJS } from 'react-native-worklets';
-import { ColorValue, TouchableWithoutFeedback } from 'react-native';
-import { StyleSheet, UnistylesVariants, withUnistyles } from 'react-native-unistyles';
-import { SwitchStyles, SwitchTokens } from '../theme/Switch.recipe';
+} from 'react-native-reanimated'
+import {StyleSheet, UnistylesVariants} from 'react-native-unistyles'
+import {useAnimatedVariantColor} from 'react-native-unistyles/reanimated'
+import {ReactNode, useLayoutEffect, useRef} from 'react'
+import {SwitchTokens, SwitchStyles} from '../theme/Switch.recipe'
+import {PalettesWithNestedKeys} from '../style/varia/types'
+
+const animations = {
+  withSpring,
+  withTiming,
+}
+
+type AnimationType = 'withSpring' | 'withTiming'
 
-type SwitchVariants = UnistylesVariants<typeof SwitchStyles>;
+type SwitchVariants = UnistylesVariants<typeof SwitchStyles>
 
 type SwitchProps = SwitchVariants & {
-  value: boolean;
-  onValueChange: (value: boolean) => void;
-  flex?: number;
-  thumbChildren?: React.ReactNode;
-  colors?: Record<string, ColorValue>;
-};
-
-// interface SwitchProps {
-//   value: boolean;
-//   onValueChange: (value: boolean) => void;
-//   size: keyof SwitchSizeVariants;
-//   colorScheme: keyof SwitchColorSchemeVariants;
-//   flex?: number;
-//   thumbChildren?: React.ReactNode;
-// }
+  colorPalette?: PalettesWithNestedKeys
+  value?: boolean
+  animation?: keyof typeof SwitchTokens.variants.animation
+  onValueChange?: (value: boolean) => void
+  flex?: number
+  enabledIcon: ReactNode
+  disabledIcon: ReactNode
+}
 
 const Switch = ({
+  colorPalette = 'accent',
   value,
-  onValueChange,
-  size,
-  colorPalette,
-  flex = 0,
-  thumbChildren: ThumbChildren,
-  colors
+  enabledIcon: EnabledIcon,
+  disabledIcon: DisabledIcon,
+  animation = SwitchTokens.defaultProps.animation,
+  onValueChange = () => {},
+  variant = SwitchTokens.defaultProps.variant,
+  size = SwitchTokens.defaultProps.size,
+  flex = 1,
 }: SwitchProps) => {
-  // const switchTokens = useTokens('switch')();
-  const animatedRef = useRef(null);
+  const animatedRef = useRef(null)
 
-  // const resolvedColorScheme =
-  //   colorScheme ??
-  //   (switchTokens.defaultProps.colorScheme as keyof SwitchColorSchemeVariants);
-  // const resolvedSize =
-  //   size ?? (switchTokens.defaultProps.size as keyof SwitchSizeVariants);
+  const isAnimating = useSharedValue(false)
 
   SwitchStyles.useVariants({
-    // colorPalette: colorPalette,
-    size: size,
-  });
-
-  // const { styles, theme } = useStyles(stylesheet, {
-  //   size,
-  //   // type,
-  // });
-  const trackTokenColorKey = SwitchTokens.track.variants.colorPalette[colorPalette];
-  console.log("🚀 ~ trackTokenColorKey:", trackTokenColorKey)
-  const thumbTokenColorKey = SwitchTokens.thumb.variants.colorPalette[colorPalette];
-  console.log("🚀 ~ thumbTokenColorKey:", thumbTokenColorKey)
-  console.log("🚀 ~ colors:", colors)
-
-  const trackDisabledColor = colors[trackTokenColorKey?.disabled?.backgroundColor];
-  console.log("🚀 ~ trackDisabledColor:", trackDisabledColor)
-  const trackEnabledColor =
-    colors[trackTokenColorKey?.enabled?.backgroundColor];
-  console.log("🚀 ~ trackEnabledColor:", trackEnabledColor)
-  const thumbDisabledColor =
-    colors[thumbTokenColorKey?.disabled?.backgroundColor];
-  console.log("🚀 ~ thumbDisabledColor:", thumbDisabledColor)
-  const thumbEnabledColor =
-    colors[thumbTokenColorKey?.enabled?.backgroundColor];
-  console.log("🚀 ~ thumbEnabledColor:", thumbEnabledColor)
-  const trackBorderWidth = 1;
-  const trackBorderColor = 'white';
-  // const trackBorderWidth =
-  //   switchTokens?.track?.variants?.colorScheme?.[colorScheme]?.borderWidth ?? 0;
-  // const trackBorderColor =
-  //   switchTokens?.track?.variants?.colorScheme?.[colorScheme]?.borderColor ?? 'transparent';
-  const maxHeight = SwitchTokens?.track?.variants?.size?.[size]?.height;
-
-  const animatedValue = useSharedValue(0);
-  const containerWidth = useSharedValue(0);
+    variant,
+    size,
+    enabled: value,
+  })
+
+  const animationVariant =
+    SwitchTokens.variants?.animation && animation
+      ? SwitchTokens.variants.animation[animation]
+      : {
+          type: 'withSpring' as AnimationType,
+          props: {
+            damping: 15,
+            stiffness: 100,
+            mass: 1,
+          },
+        }
+
+  const color = useAnimatedVariantColor(
+    SwitchStyles.container(colorPalette),
+    'backgroundColor',
+  )
+  const thumbColor = useAnimatedVariantColor(
+    SwitchStyles.thumb(colorPalette),
+    'backgroundColor',
+  )
+  const thumbEnabledPosition = useSharedValue(0)
+  const animatedValue = useSharedValue(0)
+  const containerWidth = useSharedValue(0)
 
   useLayoutEffect(() => {
     //@ts-ignore
-    animatedRef.current?.measure((x, y, width, height, pageX, pageY) => {
-      console.log("🚀 ~ animatedRef.current?.measure ~ width:", width)
-      const thumbWidth =
-        SwitchTokens?.thumb?.variants?.size?.[size]?.width ?? 0;
-      containerWidth.value = width - thumbWidth;
-    });
-  }, []);
-
-  const animate = () => {
-    if (animatedValue.value === 0) {
-      animatedValue.value = withTiming(
-        containerWidth.value - 6 - trackBorderWidth * 2,
-        {
-          duration: 200,
-          easing: Easing.ease,
-        },
-        () => {
-          runOnJS(onValueChange)(!value);
-        }
-      );
-    } else {
-      animatedValue.value = withTiming(
-        0,
-        { duration: 200, easing: Easing.ease },
-        () => {
-          runOnJS(onValueChange)(!value);
-        }
-      );
+    animatedRef.current?.measure((x, y, width) => {
+      containerWidth.value = width
+      //@ts-ignore
+      const thumbWidth = SwitchStyles.thumb(colorPalette).width
+      //@ts-ignore
+      const padding = SwitchStyles.container(colorPalette).padding || 0
+      const trackBorderWidth =
+        //@ts-ignore
+        SwitchStyles.container(colorPalette).borderWidth || 0
+      thumbEnabledPosition.value =
+        width - thumbWidth - trackBorderWidth * 2 - padding * 2
+    })
+  }, [])
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      backgroundColor: animations[animationVariant.type](
+        color.value,
+        animationVariant.props,
+      ),
     }
-  };
+  })
+  const thumbAnimatedStyle = useAnimatedStyle(() => {
+    return {
+      backgroundColor: animations[animationVariant.type](
+        thumbColor.value,
+        animationVariant.props,
+      ),
+    }
+  })
 
-  const backgroundColorStyle = useAnimatedStyle(() => {
-    //@ts-ignore
-    const backgroundColor = interpolateColor(
-      animatedValue.value,
-      [0, containerWidth.value],
-      [trackDisabledColor, trackEnabledColor]
-    );
-    return { backgroundColor };
-  });
   const circleTranslationStyle = useAnimatedStyle(() => {
-    //@ts-ignore
-    const backgroundColor = interpolateColor(
-      animatedValue.value,
-      [0, containerWidth.value],
-      [thumbDisabledColor, thumbEnabledColor]
-    );
     return {
-      backgroundColor,
       transform: [
         {
           translateX: animatedValue.value,
         },
       ],
-    };
-  });
+    }
+  })
+
+  const Icon = value ? EnabledIcon : DisabledIcon
+
   return (
     <TouchableWithoutFeedback
       onPress={() => {
-        animate();
-      }}
-    >
+        if (isAnimating.value) return
+        isAnimating.value = true
+        const toValue =
+          animatedValue.value === 0 ? thumbEnabledPosition.value : 0
+        onValueChange(!value)
+        animatedValue.value = animations[animationVariant.type](
+          toValue,
+          animationVariant.props,
+          () => {
+            'worklet'
+            isAnimating.value = false
+          },
+        )
+      }}>
       <Animated.View
         ref={animatedRef}
         style={[
-          styles.container(
-            flex,
-            maxHeight,
-            trackBorderWidth,
-            trackBorderColor,
-            // switchTokens.track.variants
-          ),
-          SwitchStyles.track,
-          backgroundColorStyle,
-        ]}
-        testID="switch"
-      >
+          styles.container(flex),
+          animatedStyle,
+          SwitchStyles.container(colorPalette),
+        ]}>
         <Animated.View
           style={[
-            styles.thumb(),
-            SwitchStyles.thumb,
+            styles.thumb,
+            SwitchStyles.thumb(colorPalette),
+            thumbAnimatedStyle,
             circleTranslationStyle,
-          ]}
-        >
-          {ThumbChildren || null}
+          ]}>
+          {Icon && Icon}
         </Animated.View>
       </Animated.View>
     </TouchableWithoutFeedback>
-  );
-};
+  )
+}
 
-// type SwitchTokenType = ReturnType<Tokens['switch']>; // This is the return of the function
-// type TrackVariantsType = SwitchTokenType['track']['variants'];
-// type ThumbVariantsType = SwitchTokenType['thumb']['variants'];
+export default Switch
 
 const styles = StyleSheet.create({
-  container: (
-    flex,
-    maxHeight,
-    borderWidth,
-    borderColor,
-    // variants: TrackVariantsType
-  ) => ({
-    // width: 60,
-    // height: 34,
-    flex,
-    maxHeight,
-    borderRadius: 9999,
-    justifyContent: 'center',
-    padding: 3,
-    borderWidth,
-    borderColor,
-    // variants: {
-    //   size: variants.size,
-    // },
+  container: (flex: number) => ({
+    flexGrow: flex,
+    flexShrink: 0,
+    alignSelf: 'flex-start',
+    flexDirection: 'row',
+    alignItems: 'center',
+    margin: 0,
   }),
-  thumb: (
-    // variants: ThumbVariantsType
-  ) => ({
-    borderRadius: 50,
+  thumb: {
+    borderRadius: 9999,
     justifyContent: 'center',
     alignItems: 'center',
-    // variants: {
-      // size: variants.size,
-      // type: thumbVariants.type(theme),
-      // type: switchTokens.thumb.variants.type(theme),
-    // },
-  }),
-});
-
-export default Switch;
-
-export const ThemedSwitch = withUnistyles(Switch, (theme, rt) => ({
-  colors: theme.colors,
-}));
+  },
+})

package/lib/components/Switchold.tsx

@@ -0,0 +1,174 @@
+import {TouchableWithoutFeedback} from 'react-native'
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+  withTiming,
+} from 'react-native-reanimated'
+import {StyleSheet, UnistylesVariants} from 'react-native-unistyles'
+import {useAnimatedVariantColor} from 'react-native-unistyles/reanimated'
+import {useLayoutEffect, useRef, useState} from 'react'
+import {SwitchTokens, SwitchStyles} from '../theme/Switch.recipe'
+import {PalettesWithNestedKeys} from '../style/varia/types'
+
+const animations = {
+  withSpring,
+  withTiming,
+}
+
+type AnimationType = 'withSpring' | 'withTiming'
+
+type SwitchVariants = UnistylesVariants<typeof SwitchStyles>
+
+type SwitchProps = SwitchVariants & {
+  colorPalette?: PalettesWithNestedKeys
+  value?: boolean
+  animation?: keyof typeof SwitchTokens.variants.animation
+  onValueChange?: (value: boolean) => void
+  flex?: number
+}
+
+const Switch = ({
+  colorPalette = 'accent',
+  value,
+  animation = SwitchTokens.defaultProps.animation,
+  onValueChange = () => {},
+  variant = SwitchTokens.defaultProps.variant,
+  size = SwitchTokens.defaultProps.size,
+  flex = 1,
+}: SwitchProps) => {
+  const animatedRef = useRef(null)
+
+  SwitchStyles.useVariants({
+    variant,
+    size,
+    enabled: value,
+  })
+
+  const animationVariant =
+    SwitchTokens.variants?.animation && animation
+      ? SwitchTokens.variants.animation[animation]
+      : {
+          type: 'withSpring' as AnimationType,
+          props: {
+            damping: 15,
+            stiffness: 100,
+            mass: 1,
+          },
+        }
+  console.log('🚀 ~ animationVariant:', animationVariant)
+
+  const color = useAnimatedVariantColor(
+    SwitchStyles.container(colorPalette),
+    'backgroundColor',
+  )
+  const thumbColor = useAnimatedVariantColor(
+    SwitchStyles.thumb(colorPalette),
+    'backgroundColor',
+  )
+  const thumbEnabledPosition = useSharedValue(0)
+  const animatedValue = useSharedValue(0)
+  const containerWidth = useSharedValue(0)
+
+  useLayoutEffect(() => {
+    //@ts-ignore
+    animatedRef.current?.measure((x, y, width) => {
+      containerWidth.value = width
+      //@ts-ignore
+      const thumbWidth = SwitchStyles.thumb(colorPalette).width
+      //@ts-ignore
+      const padding = SwitchStyles.container(colorPalette).padding || 0
+      const trackBorderWidth =
+        //@ts-ignore
+        SwitchStyles.container(colorPalette).borderWidth || 0
+      thumbEnabledPosition.value =
+        width - thumbWidth - trackBorderWidth * 2 - padding * 2
+    })
+  }, [])
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      backgroundColor: animations[animationVariant.type](
+        color.value,
+        animationVariant.props,
+      ),
+      // backgroundColor: withTiming(color.value, {
+      //   duration: 100,
+      //   easing: Easing.ease,
+      // }),
+    }
+  })
+  const thumbAnimatedStyle = useAnimatedStyle(() => {
+    return {
+      backgroundColor: animations[animationVariant.type](
+        thumbColor.value,
+        animationVariant.props,
+      ),
+      // backgroundColor: withTiming(thumbColor.value, {
+      //   duration: 100,
+      //   easing: Easing.ease,
+      // }),
+    }
+  })
+
+  const circleTranslationStyle = useAnimatedStyle(() => {
+    return {
+      transform: [
+        {
+          translateX: animatedValue.value,
+        },
+      ],
+    }
+  })
+
+  return (
+    <TouchableWithoutFeedback
+      onPress={() => {
+        onValueChange(!value)
+        animatedValue.value = animations[animationVariant.type](
+          animatedValue.value === 0 ? thumbEnabledPosition.value : 0,
+          animationVariant.props,
+        )
+        // animatedValue.value = withTiming(
+        //   animatedValue.value === 0 ? thumbEnabledPosition.value : 0,
+        //   {duration: 100, easing: Easing.ease},
+        // )
+      }}>
+      <Animated.View
+        ref={animatedRef}
+        style={[
+          styles.container(flex),
+          animatedStyle,
+          SwitchStyles.container(colorPalette),
+        ]}>
+        <Animated.View
+          style={[
+            styles.thumb,
+            SwitchStyles.thumb(colorPalette),
+            thumbAnimatedStyle,
+            circleTranslationStyle,
+          ]}
+        />
+      </Animated.View>
+    </TouchableWithoutFeedback>
+  )
+}
+
+export default Switch
+
+const styles = StyleSheet.create((theme, rt) => ({
+  container: (flex: number) => ({
+    // flex,
+    flexGrow: flex,
+    flexShrink: 0,
+    alignSelf: 'flex-start',
+    flexDirection: 'row',
+    alignItems: 'center',
+    margin: 0,
+    borderRadius: 20,
+  }),
+  thumb: {
+    borderRadius: 9999,
+  },
+}))

package/lib/components/Text.tsx

@@ -1,107 +1,60 @@
-import {Text as RNText} from 'react-native'
+import {Text as RNText, TextProps as RNTextProps} from 'react-native'
 import type {StyleProp, TextStyle} from 'react-native'
-import {StyleSheet} from 'react-native-unistyles'
-import textStyles from '../theme/Text.recipe'
-// import { useTokens } from '../style/useTokens';
+import {StyleSheet, UnistylesVariants} from 'react-native-unistyles'
+import {DefaultTextVariants, TextStyles} from '../theme/Text.recipe'
+import {PalettesWithNestedKeys, ThemeColors} from '../style/varia/types'
+import {extractThemeColor} from '../style/varia/utils'
 
-export interface Props {
-  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'h7' | 'h8' | 'h9' | 'body'
-  fontSize?: number | undefined
-  color?: string | undefined
-  style?: TextStyle
-  children?: React.ReactNode
-  numberOfLines?: number
-  adjustsFontSizeToFit?: boolean
-  mixins?: StyleProp<TextStyle> | StyleProp<TextStyle>[]
-}
-
-const fontSizeDefined = (textStyles.text as any).fontSize // solo si realmente confías
-const variant = fontSizeDefined ? undefined : 'h1'
+type TextVariants = UnistylesVariants<typeof TextStyles>
+type TextProps = TextVariants &
+  RNTextProps & {
+    colorPalette?: PalettesWithNestedKeys
+    fontSize?: number | undefined
+    color?: ThemeColors
+    style?: TextStyle
+    children?: React.ReactNode
+    mixins?: StyleProp<TextStyle> | StyleProp<TextStyle>[]
+  }
 
-const Text: React.FC<Props> = ({
-  as = variant,
+const Text = ({
+  colorPalette = 'accent',
+  variant,
+  size = DefaultTextVariants.size,
   fontSize,
   color,
   style,
   children,
-  numberOfLines,
-  adjustsFontSizeToFit = false,
-  // mixins,
-}) => {
-  // const textTokens = useTokens('text')();
-
-  styles.useVariants({
-    as,
+  mixins,
+  ...props
+}: TextProps) => {
+  TextStyles.useVariants({
+    variant,
+    size,
   })
 
   return (
     <RNText
       style={[
-        textStyles.text,
+        TextStyles.text(colorPalette),
         styles.text(color, fontSize),
+        mixins && mixins,
         style,
-        // mixins && mixins,
       ]}
-      numberOfLines={numberOfLines !== undefined ? numberOfLines : undefined}
-      adjustsFontSizeToFit={adjustsFontSizeToFit}>
+      {...props}>
       {children}
     </RNText>
   )
 }
 
 const styles = StyleSheet.create(theme => ({
-  text: (color?: string, fontSize?: number) => {
-    return {
-      verticalAlign: 'bottom',
-      textAlign: 'left',
-      ...(color && {color: color}),
-      ...(fontSize && {fontSize: fontSize}),
-      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,
-          },
-        },
-      },
-    }
-  },
+  text: (color?: string, fontSize?: number) => ({
+    verticalAlign: 'bottom',
+    textAlign: 'left',
+    ...(color && {
+      color: extractThemeColor(color, theme),
+    }),
+    ...(fontSize && {fontSize}),
+  }),
 }))
 
 export default Text