react-native-varia 0.0.1

package/lib/components/GradientBackground.tsx

@@ -0,0 +1,68 @@
+import {View, StyleSheet, type ColorValue} from 'react-native'
+import Svg, {Defs, LinearGradient, Stop, Rect} from 'react-native-svg'
+import {withUnistyles} from 'react-native-unistyles'
+import {gradientBackgroundTokens} from '../theme/GradientBackground.recipe'
+
+interface GradientBackgroundProps {
+  colorPalette?: keyof typeof gradientBackgroundTokens.variants.colorPalette
+  direction?: keyof typeof gradientBackgroundTokens.variants.direction
+  // colors: Record<string, ColorValue>;
+  colors: Record<string, ColorValue>
+}
+
+const BaseGradientBackground = ({
+  colorPalette = gradientBackgroundTokens.defaultProps.colorPalette,
+  direction = gradientBackgroundTokens.defaultProps.direction,
+  colors,
+}: GradientBackgroundProps) => {
+  const tokenColorKey =
+    gradientBackgroundTokens.variants.colorPalette[colorPalette]
+  const startColor =
+    tokenColorKey.startColor in colors
+      ? colors[tokenColorKey.startColor]
+      : tokenColorKey.startColor
+
+  const endColor =
+    tokenColorKey.endColor in colors
+      ? colors[tokenColorKey.endColor]
+      : tokenColorKey.endColor
+
+  const directionVariant =
+    gradientBackgroundTokens.variants.direction[direction]
+
+  return (
+    <View style={styles.container}>
+      <Svg
+        width="100%"
+        height="100%"
+        viewBox="0 0 100 100"
+        preserveAspectRatio="none">
+        <Defs>
+          <LinearGradient
+            id="grad"
+            x1={directionVariant?.x1}
+            y1={directionVariant?.y1}
+            x2={directionVariant?.x2}
+            y2={directionVariant?.y2}>
+            <Stop offset="0%" stopColor={startColor} stopOpacity="1" />
+            <Stop offset="100%" stopColor={endColor} stopOpacity="1" />
+          </LinearGradient>
+        </Defs>
+        <Rect width="100" height="100" fill="url(#grad)" />
+      </Svg>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    ...StyleSheet.absoluteFillObject,
+  },
+})
+
+// export default GradientBackground;
+const GradientBackground = withUnistyles(BaseGradientBackground, theme => ({
+  colors: theme.colors,
+}))
+
+export default GradientBackground

package/lib/components/GradientText.tsx

@@ -0,0 +1,121 @@
+import {View, type ColorValue} from 'react-native'
+import Svg, {
+  Defs,
+  LinearGradient,
+  Stop,
+  Text,
+  type NumberProp,
+} from 'react-native-svg'
+import {StyleSheet, withUnistyles} from 'react-native-unistyles'
+import {gradientTextTokens} from '../theme/GradientText.recipe'
+import {TextSemanticSizes} from '../style/types'
+
+interface GradientTextProps {
+  colorPalette?: keyof typeof gradientTextTokens.variants.colorPalette
+  direction?: keyof typeof gradientTextTokens.variants.direction
+  // colors: Record<string, ColorValue>;
+  colors: Record<string, ColorValue>
+  as?: TextSemanticSizes
+  fontSize?: number | undefined
+  children?: React.ReactNode
+}
+
+const BaseGradientText = ({
+  as = 'body',
+  fontSize,
+  colorPalette = gradientTextTokens.defaultProps.colorPalette,
+  direction = gradientTextTokens.defaultProps.direction,
+  colors,
+  children,
+}: GradientTextProps) => {
+  const tokenColorKey = gradientTextTokens.variants.colorPalette[colorPalette]
+  const startColor =
+    tokenColorKey.startColor in colors
+      ? colors[tokenColorKey.startColor]
+      : tokenColorKey.startColor
+
+  const endColor =
+    tokenColorKey.endColor in colors
+      ? colors[tokenColorKey.endColor]
+      : tokenColorKey.endColor
+
+  const directionVariant = gradientTextTokens.variants.direction[direction]
+
+  return (
+    <View style={{flexDirection: 'row'}}>
+      <View style={{width: '100%'}}>
+        <Svg height={styles[as](fontSize).fontSize + 20} width="100%">
+          <Defs>
+            <LinearGradient
+              id="gradient"
+              x1={directionVariant?.x1 as NumberProp}
+              y1={directionVariant?.y1 as NumberProp}
+              x2={directionVariant?.x2 as NumberProp}
+              y2={directionVariant?.y2 as NumberProp}>
+              <Stop offset="0%" stopColor={startColor as ColorValue} />
+              <Stop offset="100%" stopColor={endColor as ColorValue} />
+            </LinearGradient>
+          </Defs>
+          <Text
+            fill="url(#gradient)"
+            fontSize={styles[as](fontSize).fontSize}
+            fontWeight={400}
+            x="50%"
+            y={styles[as](fontSize).fontSize}
+            textAnchor="middle">
+            {children}
+          </Text>
+        </Svg>
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create(theme => ({
+  h1: fontSize => ({
+    //@ts-ignore
+    fontSize: fontSize || theme.fontSizes.xxl,
+  }),
+  h2: fontSize => ({
+    //@ts-ignore
+    fontSize: fontSize || theme.fontSizes.xl,
+  }),
+  h3: fontSize => ({
+    //@ts-ignore
+    fontSize: fontSize || theme.fontSizes.lg,
+  }),
+  h4: fontSize => ({
+    //@ts-ignore
+    fontSize: fontSize || theme.fontSizes.md,
+  }),
+  h5: fontSize => ({
+    //@ts-ignore
+    fontSize: fontSize || theme.fontSizes.sm,
+  }),
+  h6: fontSize => ({
+    //@ts-ignore
+    fontSize: fontSize || theme.fontSizes.xs,
+  }),
+  h7: fontSize => ({
+    //@ts-ignore
+    fontSize: fontSize || theme.fontSizes.xs,
+  }),
+  h8: fontSize => ({
+    //@ts-ignore
+    fontSize: fontSize || theme.fontSizes.xxs,
+  }),
+  h9: fontSize => ({
+    //@ts-ignore
+    fontSize: fontSize || theme.fontSizes.xxs,
+  }),
+  body: fontSize => ({
+    //@ts-ignore
+    fontSize: fontSize || theme.fontSizes.md,
+  }),
+}))
+
+const GradientText = withUnistyles(BaseGradientText, theme => ({
+  colors: theme.colors,
+}))
+
+export default GradientText

package/lib/components/Icon.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { IconWrapperProps, ThemedIcon } from '../components/IconWrapper';
+
+const IconName = ({color, ...props}: Omit<IconWrapperProps, 'children' | 'colors'>) => {
+  return (
+    <ThemedIcon {...props} color={color}>
+      <>
+      {/* Icon content */}
+      </>
+    </ThemedIcon>
+  );
+};
+export default IconName;

package/lib/components/IconWrapper.tsx

@@ -0,0 +1,109 @@
+import {
+  Children,
+  cloneElement,
+  Fragment,
+  isValidElement,
+  ReactElement,
+  type ReactNode,
+} from 'react'
+import Svg from 'react-native-svg'
+import {View} from 'react-native'
+import {withUnistyles} from 'react-native-unistyles'
+import {IconTokens} from '../theme/IconWrapper.recipe'
+import {ThemeColors} from '../style/types'
+
+interface SVGChildProps {
+  color?: string
+}
+export type IconWrapperProps = {
+  size?: keyof typeof IconTokens.variants.size
+  colorPalette?: keyof typeof IconTokens.variants.colorPalette
+  children?: ReactElement<SVGChildProps>
+  scale?: number
+  color?: ThemeColors
+  rotation?: number
+  colors?: any
+}
+
+/**
+ * @param name string key icon name
+ * @param scale optional number scale icon size
+ * @param color optional ThemeColor color
+ * @param rotate optional number rotation of the icon
+ * @returns Icon react component
+ */
+const Icon = ({
+  size = IconTokens.defaultProps.size,
+  colorPalette = IconTokens.defaultProps.colorPalette,
+  children,
+  scale = IconTokens.defaultProps.scale,
+  color,
+  rotation,
+  colors,
+  ...rest
+}: IconWrapperProps) => {
+  const colorPaletteKey = IconTokens.variants.colorPalette[colorPalette]
+  const colorScheme =
+    colorPaletteKey.color in colors
+      ? colors[colorPaletteKey.color]
+      : colorPaletteKey.color
+  const resolvedColor = color
+    ? color in colors
+      ? colors[color]
+      : color
+    : colorScheme
+
+  const width = IconTokens.variants.size[size].width ?? 0
+  const height = IconTokens.variants.size[size].height ?? 0
+  const viewBoxWidth = IconTokens.variants.size[size].viewBoxWidth ?? 0
+  const viewBoxHeight = IconTokens.variants.size[size].viewBoxHeight ?? 0
+
+  return (
+    <View
+      style={{
+        width: scale * width,
+        height: scale * height,
+        transform: rotation ? [{rotate: `${rotation}deg`}] : [],
+      }}>
+      <Svg
+        width={scale * width}
+        height={scale * height}
+        viewBox={`0 0 ${viewBoxWidth} ${viewBoxHeight}`}
+        fill="none"
+        {...rest}>
+        {Children.map(children, child => {
+          if (isFragmentElement(child)) {
+            return cloneElement(
+              child,
+              {},
+              Children.map(child.props.children, pathChild => {
+                if (isValidElement(pathChild)) {
+                  return cloneElement(
+                    pathChild as React.ReactElement<{stroke?: string}>,
+                    {
+                      stroke: resolvedColor ?? colorScheme,
+                    },
+                  )
+                }
+                return pathChild
+              }),
+            )
+          }
+          return child
+        })}
+      </Svg>
+    </View>
+  )
+}
+
+export default Icon
+
+export const ThemedIcon = withUnistyles(Icon, (theme, rt) => ({
+  colors: theme.colors,
+}))
+
+function isFragmentElement(
+  node: ReactNode,
+): node is React.ReactElement<{children?: ReactNode}> {
+  return isValidElement(node) && node.type === Fragment
+}

package/lib/components/Input.tsx

@@ -0,0 +1,120 @@
+import {
+  type InputModeOptions,
+  type KeyboardTypeOptions,
+  type StyleProp,
+  TextInput,
+  TextStyle,
+  View,
+  type ViewStyle,
+} from 'react-native'
+// import Text from './Text';
+import {StyleSheet, UnistylesVariants} from 'react-native-unistyles'
+// import Text from './Text';
+import {InputTokens, InputStyles} from '../theme/Input.recipe'
+import Text from './Text'
+
+type InputVariants = UnistylesVariants<typeof InputStyles>
+
+type InputProps = InputVariants & {
+  label?: string
+  onChange?: (value: string) => void
+  placeholder: string
+  inputMode?: InputModeOptions
+  keyboardType?: KeyboardTypeOptions
+  flex?: number
+  maxWidth?: number | string
+  password?: boolean
+  onFocus?: () => void
+  value: any
+  containerMixins?: StyleProp<ViewStyle> | StyleProp<ViewStyle>[]
+  labelMixins?:
+    | StyleProp<ViewStyle>
+    | StyleProp<ViewStyle>[]
+    | StyleProp<TextStyle>
+    | StyleProp<TextStyle>[]
+  inputMixins?: StyleProp<ViewStyle> | StyleProp<ViewStyle>[]
+  // containerStyle?: StyleProp<ViewStyle>;
+  // labelStyle?: StyleProp<ViewStyle>;
+  // inputStyle?: StyleProp<ViewStyle>;
+}
+
+const Input = ({
+  colorPalette = InputTokens.defaultProps.colorPalette,
+  size = InputTokens.defaultProps.size,
+  spacing = InputTokens.defaultProps.spacing,
+  label,
+  placeholder,
+  onChange,
+  inputMode,
+  keyboardType,
+  flex = 1,
+  maxWidth = '100%',
+  password = false,
+  onFocus = () => {},
+  value,
+  containerMixins,
+  labelMixins,
+  inputMixins,
+}: // containerStyle,
+// labelStyle,
+// inputStyle,
+InputProps) => {
+  InputStyles.useVariants({
+    colorPalette,
+    size,
+    spacing,
+  })
+
+  return (
+    <View
+      style={[
+        styles.container(flex, maxWidth),
+        // containerStyle && styles.customStyle(containerStyle),
+        containerMixins && containerMixins,
+      ]}>
+      {label && (
+        <Text
+          as="h5"
+          style={
+            [
+              // styles.label,
+              InputStyles.label,
+              // labelStyle && styles.customStyle(labelStyle),
+              labelMixins && labelMixins,
+            ] as any
+          }>
+          {label}
+        </Text>
+      )}
+      <TextInput
+        style={[
+          // styles.input,
+          InputStyles.input,
+          // inputStyle && styles.customStyle(inputStyle),
+          inputMixins && inputMixins,
+        ]}
+        value={value}
+        placeholder={placeholder}
+        inputMode={inputMode}
+        keyboardType={keyboardType}
+        secureTextEntry={password}
+        onFocus={onFocus}
+        onChangeText={onChange}
+      />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: (flex, maxWidth) => ({
+    flex,
+    width: '100%',
+    maxWidth,
+    gap: 5,
+  }),
+  // customStyle: style => ({
+  //   ...style,
+  // }),
+})
+
+export default Input

package/lib/components/Link.tsx

@@ -0,0 +1,87 @@
+import {
+  Alert,
+  Linking,
+  TextStyle,
+  TouchableOpacity,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native'
+import Text from './Text'
+import {StyleSheet, UnistylesVariants} from 'react-native-unistyles'
+import LinkStyles from '../theme/Link.recipe'
+import {TextSemanticSizes} from '../style/types'
+type LinkVariants = UnistylesVariants<typeof LinkStyles>
+
+type LinkProps = LinkVariants & {
+  text: string
+  url: string
+  underline?: boolean
+  as?: TextSemanticSizes
+  fontSize?: number
+  color?: string
+  style?: StyleProp<ViewStyle>
+  mixins?:
+    | StyleProp<ViewStyle>
+    | StyleProp<ViewStyle>[]
+    | StyleProp<TextStyle>
+    | StyleProp<TextStyle>[]
+}
+
+const Link = ({
+  colorPalette,
+  size,
+  text,
+  url,
+  underline,
+  as,
+  fontSize,
+  color,
+  mixins,
+}: LinkProps) => {
+  LinkStyles.useVariants({
+    colorPalette,
+    size,
+  })
+
+  return (
+    <TouchableOpacity
+      onPress={async () => {
+        try {
+          await Linking.openURL(url)
+        } catch {
+          Alert.alert('No se pudo abrir este enlace')
+        }
+      }}>
+      <Text
+        as={as}
+        fontSize={fontSize}
+        // color={color}
+        style={
+          [
+            styles.link(
+              underline ? 'underline' : 'none',
+              // linkTokens.variants,
+              // linkTokens.customVariants
+            ),
+            LinkStyles.link,
+            // style && styles.customStyle(style),
+            color && {color},
+            mixins && mixins,
+          ] as any
+        }>
+        {text}
+      </Text>
+    </TouchableOpacity>
+  )
+}
+
+const styles = StyleSheet.create({
+  link: (underline): any => ({
+    textDecorationLine: underline,
+  }),
+  // customStyle: style => ({
+  //   ...style,
+  // }),
+})
+
+export default Link

package/lib/components/Modal.tsx

@@ -0,0 +1,157 @@
+import {TouchableOpacity, TouchableWithoutFeedback, View} from 'react-native'
+import Animated, {FadeIn, FadeOut, Keyframe} from 'react-native-reanimated'
+import {StyleSheet, UnistylesVariants} from 'react-native-unistyles'
+import Text from './Text'
+import Svg, {Path} from 'react-native-svg'
+import {ModalStyles, ModalTokens} from '../theme/Modal.recipe'
+
+type ModalVariants = UnistylesVariants<typeof ModalStyles>
+
+type ModalProps = ModalVariants & {
+  isOpen: boolean
+  setIsOpen: (isOpen: boolean) => void
+  children: React.ReactNode
+  heading?: string
+}
+
+// Define animations outside of the component to avoid re-creation on each render
+const enteringModalContent = new Keyframe({
+  0: {opacity: 0, transform: [{scale: 0.8}]},
+  20: {opacity: 0.5, transform: [{scale: 0.9}]},
+  100: {opacity: 1, transform: [{scale: 1}]},
+}).duration(300)
+
+const exitingModalContent = new Keyframe({
+  0: {opacity: 1, transform: [{scale: 1}]},
+  100: {opacity: 0, transform: [{scale: 0.8}]},
+}).duration(200)
+
+const Modal = ({
+  isOpen,
+  setIsOpen,
+  heading,
+  children,
+  colorPalette = ModalTokens.defaultProps.colorPalette,
+}: ModalProps) => {
+  // const tokens = useTokens('modal')();
+  if (!isOpen) return null
+
+  // const resolvedColorScheme =
+  //   colorScheme ??
+  //   (tokens.defaultProps.colorScheme as keyof ModalColorSchemeVariants);
+
+  ModalStyles.useVariants({
+    colorPalette,
+  })
+
+  return (
+    <Animated.View
+      style={styles.overlay}
+      entering={FadeIn.duration(200)}
+      exiting={FadeOut.duration(250)}>
+      <TouchableWithoutFeedback onPress={() => setIsOpen(false)}>
+        <View style={StyleSheet.absoluteFillObject} />
+      </TouchableWithoutFeedback>
+      <Animated.View
+        // @ts-ignore
+        style={[styles.modalBox(), ModalStyles.container]}
+        entering={enteringModalContent}
+        exiting={exitingModalContent}>
+        <View style={styles.header(!heading)}>
+          <Text style={styles.headerTitle}>{!!heading && heading}</Text>
+          <View
+            style={{
+              position: 'absolute',
+              right: 0,
+              top: 0,
+            }}>
+            <CloseButton onClose={() => setIsOpen(false)} />
+          </View>
+        </View>
+        <View style={styles.content}>{children}</View>
+      </Animated.View>
+    </Animated.View>
+  )
+}
+
+// type ModalTokenType = ReturnType<Tokens['modal']>;
+// type VariantsType = ModalTokenType['variants'];
+
+const styles = StyleSheet.create(theme => {
+  return {
+    overlay: {
+      ...StyleSheet.absoluteFillObject,
+      backgroundColor: 'black',
+      zIndex: 1000,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    modalBox: () => ({
+      width: '80%',
+      justifyContent: 'center',
+      alignItems: 'center',
+      padding: 20,
+      borderRadius: 10,
+      // backgroundColor: theme.colors.background,
+      // boxShadow: '0px 0px 50px rgba(250, 250, 250, 0.6)',
+      // variants: {
+      //   colorScheme: variants.colorScheme as any,
+      // },
+    }),
+    header: padding => ({
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      width: '100%',
+      marginBottom: 10,
+      padding: padding && 10,
+    }),
+    headerTitle: {
+      textAlign: 'center',
+      flex: 1,
+    },
+    closeButton: {
+      color: 'white',
+    },
+    content: {
+      width: '100%',
+    },
+  }
+})
+
+export default Modal
+
+export interface CloseButtonProps {
+  scale?: number
+  color?: undefined
+  onClose: () => void
+}
+
+const defaultColor = 'white'
+
+const CloseButton = ({
+  onClose,
+  scale = 1,
+  color,
+  ...rest
+}: CloseButtonProps) => (
+  <TouchableOpacity onPress={onClose}>
+    <Svg
+      // TODO: fix types
+      //@ts-ignore
+      xmlns="http://www.w3.org/2000/svg"
+      width={scale * 24}
+      height={scale * 24}
+      viewBox={`0 0 ${24} ${24}`}
+      fill="none"
+      {...rest}>
+      <Path
+        stroke={color || defaultColor}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+        d="m7.757 7.757 8.486 8.486M7.757 16.243l8.486-8.486"
+      />
+    </Svg>
+  </TouchableOpacity>
+)