react-native-varia 0.0.1

package/lib/components/Switch.tsx

@@ -0,0 +1,224 @@
+import React, { useLayoutEffect, useRef } from 'react';
+import Animated, {
+  useAnimatedStyle,
+  interpolateColor,
+  useSharedValue,
+  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';
+
+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;
+// }
+
+const Switch = ({
+  value,
+  onValueChange,
+  size,
+  colorPalette,
+  flex = 0,
+  thumbChildren: ThumbChildren,
+  colors
+}: SwitchProps) => {
+  // const switchTokens = useTokens('switch')();
+  const animatedRef = useRef(null);
+
+  // const resolvedColorScheme =
+  //   colorScheme ??
+  //   (switchTokens.defaultProps.colorScheme as keyof SwitchColorSchemeVariants);
+  // const resolvedSize =
+  //   size ?? (switchTokens.defaultProps.size as keyof SwitchSizeVariants);
+
+  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);
+
+  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);
+        }
+      );
+    }
+  };
+
+  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,
+        },
+      ],
+    };
+  });
+  return (
+    <TouchableWithoutFeedback
+      onPress={() => {
+        animate();
+      }}
+    >
+      <Animated.View
+        ref={animatedRef}
+        style={[
+          styles.container(
+            flex,
+            maxHeight,
+            trackBorderWidth,
+            trackBorderColor,
+            // switchTokens.track.variants
+          ),
+          SwitchStyles.track,
+          backgroundColorStyle,
+        ]}
+        testID="switch"
+      >
+        <Animated.View
+          style={[
+            styles.thumb(),
+            SwitchStyles.thumb,
+            circleTranslationStyle,
+          ]}
+        >
+          {ThumbChildren || null}
+        </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'];
+
+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,
+    // },
+  }),
+  thumb: (
+    // variants: ThumbVariantsType
+  ) => ({
+    borderRadius: 50,
+    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/Text.tsx

@@ -0,0 +1,107 @@
+import {Text as RNText} 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';
+
+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'
+
+const Text: React.FC<Props> = ({
+  as = variant,
+  fontSize,
+  color,
+  style,
+  children,
+  numberOfLines,
+  adjustsFontSizeToFit = false,
+  // mixins,
+}) => {
+  // const textTokens = useTokens('text')();
+
+  styles.useVariants({
+    as,
+  })
+
+  return (
+    <RNText
+      style={[
+        textStyles.text,
+        styles.text(color, fontSize),
+        style,
+        // mixins && mixins,
+      ]}
+      numberOfLines={numberOfLines !== undefined ? numberOfLines : undefined}
+      adjustsFontSizeToFit={adjustsFontSizeToFit}>
+      {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,
+          },
+        },
+      },
+    }
+  },
+}))
+
+export default Text

package/lib/components/index.tsx

@@ -0,0 +1,83 @@
+import { StyleSheet, UnistylesVariants } from "react-native-unistyles"
+import ButtonRaw from "./Button-old"
+import ButtonStyles from "../theme/Button.recipe-old"
+
+// const ButtonStyles = StyleSheet.create(theme => ({
+//   container: {
+//     variants: {
+//       colorPalette: {
+//         primary: {
+//           backgroundColor: 'tomato',
+//         },
+//         secondary: {
+//           backgroundColor: theme.colors.foreground2,
+//         }
+//       },
+//       size: {
+//         sm: {
+//           height: 32,
+//           maxHeight: 32,
+//           padding: 6,
+//         },
+//         md: {
+//           maxHeight: 48,
+//           height: 48,
+//           padding: 8,
+//         },
+//         lg: {
+//           maxHeight: 64,
+//           height: 64,
+//           padding: 12,
+//         },
+//         xl: {
+//           maxHeight: 80,
+//           height: 80,
+//           padding: 16,
+//         }
+//       }
+//     },
+//   },
+//   text: {
+//     variants: {
+//       colorPalette: {
+//         primary: {
+//           color: 'white',
+//         },
+//         secondary: {
+//           color: theme.colors.categoryAquamarine,
+//         }
+//       },
+//       size: {
+//         sm: {
+//           fontSize: 24,
+//         },
+//         md: {
+//           fontSize: 28,
+//         },
+//         lg: {
+//           fontSize: 32,
+//         },
+//         xl: {
+//           fontSize: 36,
+//         }
+//       }
+//     }
+//   }
+// }))
+
+type ButtonVariants = UnistylesVariants<typeof ButtonStyles>;
+
+type ButtonProps = ButtonVariants & {
+  onPress: () => void;
+};
+
+export const Button = ({ size, colorPalette, ...props }: ButtonProps) => {
+  return (
+    <ButtonRaw
+      buttonStyles={ButtonStyles}
+      size={size}
+      colorPalette={colorPalette}
+      {...props}
+    />
+  );
+};

package/lib/mixins.ts

@@ -0,0 +1,180 @@
+import {StyleSheet} from 'react-native-unistyles';
+import { ThemeColors } from '../src/style/types';
+import { extractThemeColor } from './utils';
+
+// const extractThemeColor = (color: ThemeColors, theme: any) => {
+//   return color in theme.colors ? theme.colors[color] : color;
+// }
+
+const mixins = StyleSheet.create((theme, rt) => ({
+  size: (width: number, height: number = width) => ({
+    width,
+    height,
+  }),
+  row: {
+    justifyContent: 'center',
+    flexDirection: 'row',
+  },
+  gap: (gap: number) => ({
+    gap,
+  }),
+  center: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  sx: (sx: any) => ({
+    ...sx,
+  }),
+  w: (width: number) => ({
+    width,
+  }),
+  h: (height: number) => ({
+    height,
+  }),
+  bg: (backgroundColor: ThemeColors) => ({
+    backgroundColor: extractThemeColor(backgroundColor, theme),
+  }),
+  flexColumn: (flex: number = 1) => ({
+    flex,
+    width: '100%',
+  }),
+  flexRow: (flex: number = 1) => ({
+    flex,
+    height: '100%',
+  }),
+  minMaxW: (minWidth: number, maxWidth: number) => ({
+    minWidth,
+    maxWidth,
+  }),
+  minMaxH: (minHeight: number, maxHeight: number) => ({
+    minHeight,
+    maxHeight,
+  }),
+  vw: (amount: number) => ({
+    width:
+      ((rt.screen.width - rt.insets.left - rt.insets.right) * amount) / 100,
+  }),
+  vh: (amount: number) => ({
+    height:
+      ((rt.screen.height - rt.insets.top - rt.insets.bottom) * amount) / 100,
+  }),
+  vwh: (amount: number) => ({
+    width:
+      ((rt.screen.width - rt.insets.left - rt.insets.right) * amount) / 100,
+    height:
+      ((rt.screen.height - rt.insets.top - rt.insets.bottom) * amount) / 100,
+  }),
+  self: (
+    alignSelf: 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch',
+  ) => ({
+    alignSelf,
+  }),
+  justify: (
+    justifyContent:
+      | 'flex-start'
+      | 'flex-end'
+      | 'center'
+      | 'space-around'
+      | 'space-between'
+      | 'space-evenly',
+  ) => ({
+    justifyContent,
+  }),
+  rtl: {
+    direction: 'rtl',
+  },
+  ar: (aspectRatio: number) => ({
+    aspectRatio,
+  }),
+  br: (borderRadius: number) => ({
+    borderRadius,
+  }),
+  bw: (borderWidth: number) => ({
+    borderWidth,
+  }),
+  bc: (borderColor: ThemeColors) => ({
+    borderColor: extractThemeColor(borderColor, theme),
+  }),
+  border: (borderWidth: number, borderColor: ThemeColors) => ({
+    borderWidth,
+    borderColor: extractThemeColor(borderColor, theme),
+  }),
+  m: (margin: number) => ({
+    margin,
+  }),
+  mt: (marginTop: number) => ({
+    marginTop,
+  }),
+  mb: (marginBottom: number) => ({
+    marginBottom,
+  }),
+  ml: (marginLeft: number) => ({
+    marginLeft,
+  }),
+  mr: (marginRight: number) => ({
+    marginRight,
+  }),
+  mx: (marginHorizontal: number) => ({
+    marginHorizontal,
+  }),
+  my: (marginVertical: number) => ({
+    marginVertical,
+  }),
+  p: (padding: number) => ({
+    padding,
+  }),
+  pt: (paddingTop: number) => ({
+    paddingTop,
+  }),
+  pb: (paddingBottom: number) => ({
+    paddingBottom,
+  }),
+  pl: (paddingLeft: number) => ({
+    paddingLeft,
+  }),
+  pr: (paddingRight: number) => ({
+    paddingRight,
+  }),
+  px: (paddingHorizontal: number) => ({
+    paddingHorizontal,
+  }),
+  py: (paddingVertical: number) => ({
+    paddingVertical,
+  }),
+  t: (top: number = 0) => ({
+    position: 'absolute',
+    top,
+  }),
+  b: (bottom: number = 0) => ({
+    position: 'absolute',
+    bottom,
+  }),
+  l: (left: number = 0) => ({
+    position: 'absolute',
+    left,
+  }),
+  r: (right: number = 0) => ({
+    position: 'absolute',
+    right,
+  }),
+  static: {
+    position: 'static',
+  },
+  absolute: {
+    position: 'absolute',
+  },
+  relative: {
+    position: 'relative',
+  },
+  z: (zIndex: number) => ({
+    zIndex,
+  }),
+  opacity: (opacity: number) => ({
+    opacity,
+  }),
+  circle: {
+    borderRadius: 9999,
+  },
+}));
+
+export default mixins;