react-native-varia 0.2.3 → 0.2.4

package/lib/components/Field.tsx

@@ -1,36 +1,21 @@
-import React, {createContext, useContext} from 'react'
-import {UnistylesVariants} from 'react-native-unistyles'
+import React from 'react'
 import Text from './Text'
-import {VStack} from '../patterns'
 import {DefaultFieldVariants, FieldStyles} from '../theme/Field.recipe'
-import {PalettesWithNestedKeys} from '../style/varia/types'
-
-type FieldVariants = UnistylesVariants<typeof FieldStyles>
-
-type FieldContextType = {
-  error?: string
-  variant?: FieldVariants['variant']
-  size?: FieldVariants['size']
-  colorPalette?: PalettesWithNestedKeys
-}
-
-const FieldContext = createContext<FieldContextType | undefined>(undefined)
-
-function useField() {
-  const context = useContext(FieldContext)
-  if (!context) {
-    throw new Error(
-      'Field subcomponents (Label, Error) must be used inside Field.Root',
-    )
-  }
-  return context
-}
+import {Flex, PalettesWithNestedKeys} from '../style/varia/types'
+import FieldContext, {
+  FieldContextType,
+  FieldVariants,
+  useField,
+} from './context/Field'
+import {StyleProp, View, ViewStyle} from 'react-native'
+import {StyleSheet} from 'react-native-unistyles'
 
 type FieldRootProps = FieldVariants & {
   children: React.ReactNode
   error?: string
   colorPalette?: PalettesWithNestedKeys
   flex?: number
+  style?: StyleProp<ViewStyle>
 }
 
 const FieldRoot = ({
@@ -39,7 +24,8 @@ const FieldRoot = ({
   variant = DefaultFieldVariants.variant,
   size = DefaultFieldVariants.size,
   colorPalette = 'accent',
-  flex = 1,
+  flex = 0,
+  style,
 }: FieldRootProps) => {
   FieldStyles.useVariants({size})
 
@@ -53,20 +39,16 @@ const FieldRoot = ({
   FieldStyles.useVariants({variant, size})
 
   return (
-    <VStack
+    <View
       style={[
-        {
-          flexShrink: 1,
-          flexGrow: flex,
-          alignItems: 'stretch',
-          alignSelf: 'stretch',
-        },
+        styles.root(flex),
         FieldStyles.root(colorPalette),
+        style && style,
       ]}>
       <FieldContext.Provider value={contextValue}>
         {children}
       </FieldContext.Provider>
-    </VStack>
+    </View>
   )
 }
 
@@ -89,11 +71,7 @@ const FieldLabel = ({children, ...props}: FieldLabelProps) => {
 
   FieldStyles.useVariants({variant, size})
 
-  return (
-    <Text size={size} color={FieldStyles.label(colorPalette).color}>
-      {children}
-    </Text>
-  )
+  return <Text style={FieldStyles.label(colorPalette)}>{children}</Text>
 }
 
 type FieldErrorProps = {
@@ -124,6 +102,13 @@ const FieldError = ({...props}: FieldErrorProps) => {
   )
 }
 
+const styles = StyleSheet.create({
+  root: (flex: Flex) => ({
+    flex,
+    flexDirection: 'column',
+  }),
+})
+
 export const Field = Object.assign(FieldRoot, {
   Root: FieldRoot,
   Label: FieldLabel,

package/lib/components/GradientBackground.tsx

@@ -1,16 +1,23 @@
-import {View, StyleSheet, StyleProp, ViewStyle} from 'react-native'
+import {View, StyleProp, ViewStyle} 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'
-import {PalettesWithNestedKeys} from '../style/varia/types'
+import {
+  NestedColorsType,
+  PalettesWithNestedKeys,
+  ThemeColors,
+} from '../style/varia/types'
 import {resolveColor} from '../style/varia/utils'
+import {StyleSheet} from 'react-native-unistyles'
 
 interface GradientBackgroundProps {
   colorPalette?: PalettesWithNestedKeys
   variant?: keyof typeof gradientBackgroundTokens.variants.variant
   direction?: keyof typeof gradientBackgroundTokens.variants.direction
   containerStyles?: StyleProp<ViewStyle>
-  colors: any
+  colors: NestedColorsType
+  startColor?: ThemeColors
+  endColor?: ThemeColors
 }
 
 const BaseGradientBackground = ({
@@ -19,10 +26,20 @@ const BaseGradientBackground = ({
   direction = gradientBackgroundTokens.defaultProps.direction,
   containerStyles,
   colors,
+  startColor,
+  endColor,
 }: GradientBackgroundProps) => {
   const colorValue = gradientBackgroundTokens.variants.variant[variant]
-  const startColor = resolveColor(colorValue.startColor, colors, colorPalette)
-  const endColor = resolveColor(colorValue.endColor, colors, colorPalette)
+  const resolvedStartColor = resolveColor(
+    startColor || colorValue.startColor,
+    colors,
+    colorPalette,
+  )
+  const resolvedEndColor = resolveColor(
+    endColor || colorValue.endColor,
+    colors,
+    colorPalette,
+  )
 
   const directionVariant =
     gradientBackgroundTokens.variants.direction[direction]
@@ -41,8 +58,8 @@ const BaseGradientBackground = ({
             y1={directionVariant?.y1}
             x2={directionVariant?.x2}
             y2={directionVariant?.y2}>
-            <Stop offset="0%" stopColor={startColor} stopOpacity="1" />
-            <Stop offset="100%" stopColor={endColor} stopOpacity="1" />
+            <Stop offset="0%" stopColor={resolvedStartColor} stopOpacity="1" />
+            <Stop offset="100%" stopColor={resolvedEndColor} stopOpacity="1" />
           </LinearGradient>
         </Defs>
         <Rect width="100" height="100" fill="url(#grad)" />
@@ -54,6 +71,7 @@ const BaseGradientBackground = ({
 const styles = StyleSheet.create({
   container: {
     ...StyleSheet.absoluteFillObject,
+    alignSelf: 'stretch',
     borderWidth: 0,
     overflow: 'hidden',
     borderColor: 'transparent',

package/lib/components/GradientText.tsx

@@ -1,4 +1,4 @@
-import {View, type ColorValue} from 'react-native'
+import {StyleSheet, TextStyle, View, type ColorValue} from 'react-native'
 import Svg, {
   Defs,
   LinearGradient,
@@ -8,16 +8,23 @@ import Svg, {
 } from 'react-native-svg'
 import {withUnistyles} from 'react-native-unistyles'
 import {gradientTextTokens} from '../theme/GradientText.recipe'
-import {PalettesWithNestedKeys} from '../style/varia/types'
+import {
+  NestedColorsType,
+  PalettesWithNestedKeys,
+  ThemeType,
+} from '../style/varia/types'
 import {resolveColor, resolveFontSize} from '../style/varia/utils'
+import {ThemeColors} from '../style/varia/types'
 
 interface GradientTextProps {
   colorPalette: PalettesWithNestedKeys
   variant?: keyof typeof gradientTextTokens.variants.variant
   direction?: keyof typeof gradientTextTokens.variants.direction
-  colors: any
-  fontSizes: any
-  fontSize?: number | undefined
+  colors: NestedColorsType
+  startColor?: ThemeColors
+  endColor?: ThemeColors
+  fontSizes: ThemeType['fontSizes']
+  fontSize?: TextStyle['fontSize']
   children?: React.ReactNode
   size?: keyof typeof gradientTextTokens.variants.size
 }
@@ -28,13 +35,24 @@ const BaseGradientText = ({
   colorPalette = 'accent',
   direction = gradientTextTokens.defaultProps.direction,
   colors,
+  startColor,
+  endColor,
   fontSizes,
   children,
   size = gradientTextTokens.defaultProps.size,
 }: GradientTextProps) => {
   const colorValue = gradientTextTokens.variants.variant[variant]
-  const startColor = resolveColor(colorValue.startColor, colors, colorPalette)
-  const endColor = resolveColor(colorValue.endColor, colors, colorPalette)
+
+  const resolvedStartColor = resolveColor(
+    startColor || colorValue.startColor,
+    colors,
+    colorPalette,
+  )
+  const resolvedEndColor = resolveColor(
+    endColor || colorValue.endColor,
+    colors,
+    colorPalette,
+  )
 
   const fontSizeValue = gradientTextTokens.variants.size[size].fontSize
   const resolvedFontSize = fontSize || resolveFontSize(fontSizeValue, fontSizes)
@@ -42,8 +60,8 @@ const BaseGradientText = ({
   const directionVariant = gradientTextTokens.variants.direction[direction]
 
   return (
-    <View style={{flexDirection: 'row'}}>
-      <View style={{width: '100%'}}>
+    <View style={styles.root}>
+      <View style={styles.innerContainer}>
         <Svg height={resolvedFontSize + 20} width="100%">
           <Defs>
             <LinearGradient
@@ -52,8 +70,8 @@ const BaseGradientText = ({
               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} />
+              <Stop offset="0%" stopColor={resolvedStartColor as ColorValue} />
+              <Stop offset="100%" stopColor={resolvedEndColor as ColorValue} />
             </LinearGradient>
           </Defs>
           <Text
@@ -74,6 +92,15 @@ const BaseGradientText = ({
   )
 }
 
+const styles = StyleSheet.create({
+  root: {
+    flexDirection: 'row',
+  },
+  innerContainer: {
+    width: '100%',
+  },
+})
+
 const GradientText = withUnistyles(BaseGradientText, theme => ({
   colors: theme.colors,
   fontSizes: theme.fontSizes,

package/lib/components/IconWrapper.tsx

@@ -7,20 +7,20 @@ import {
   type ReactNode,
 } from 'react'
 import Svg from 'react-native-svg'
-import {View} from 'react-native'
-import {withUnistyles} from 'react-native-unistyles'
+import {StyleProp, View, ViewStyle} from 'react-native'
+import {StyleSheet, withUnistyles} from 'react-native-unistyles'
 import {IconTokens} from '../theme/IconWrapper.recipe'
 import {
   NestedColorsType,
   PalettesWithNestedKeys,
   ThemeColors,
+  ThemeType,
 } from '../style/varia/types'
 import {resolveColor} from '../style/varia/utils'
 
 interface SVGChildProps {
   color?: string
 }
-
 export type IconWrapperProps = {
   variant?: keyof typeof IconTokens.variants.variant
   size?: number
@@ -30,7 +30,8 @@ export type IconWrapperProps = {
   scale?: number
   color?: ThemeColors
   rotation?: number
-  colors?: any
+  colors?: NestedColorsType
+  style?: StyleProp<ViewStyle>
 }
 
 /**
@@ -50,12 +51,13 @@ const Icon = ({
   color,
   rotation,
   colors,
+  style,
   ...rest
 }: IconWrapperProps) => {
   const colorValue = IconTokens.variants.variant[variant].color
   const resolvedColor = color
-    ? resolveColor(color, colors, colorPalette)
-    : resolveColor(colorValue, colors, colorPalette)
+    ? resolveColor(color, colors as NestedColorsType, colorPalette)
+    : resolveColor(colorValue, colors as NestedColorsType, colorPalette)
 
   const width = IconTokens.variants.sizeVariant[sizeVariant].width ?? 0
   const height = IconTokens.variants.sizeVariant[sizeVariant].height ?? 0
@@ -63,14 +65,7 @@ const Icon = ({
   // const viewBoxHeight = IconTokens.variants.size[size].viewBoxHeight ?? 0
 
   return (
-    <View
-      style={{
-        width: size || width,
-        height: size || height,
-        justifyContent: 'center',
-        alignItems: 'center',
-        transform: rotation ? [{rotate: `${rotation}deg`}] : [],
-      }}>
+    <View style={[styles.root(size, width, height, rotation), style]}>
       <Svg
         width={size || width}
         height={size || height}
@@ -105,6 +100,17 @@ const Icon = ({
 
 export default Icon
 
+const styles = StyleSheet.create({
+  root: (size, width, height, rotation) => ({
+    width: size || width,
+    height: size || height,
+    justifyContent: 'center',
+    alignItems: 'center',
+    ...(rotation && {transform: [{rotate: `${rotation}deg`}]}),
+    // transform: rotation ? [{rotate: `${rotation}deg`}] : [],
+  }),
+})
+
 export const ThemedIcon = withUnistyles(Icon, theme => ({
   colors: theme.colors,
 }))

package/lib/components/Input.tsx

@@ -5,85 +5,141 @@ import {
   TextInput,
   TextInputProps,
   TextStyle,
+  View,
   type ViewStyle,
 } from 'react-native'
 import {StyleSheet, UnistylesVariants} from 'react-native-unistyles'
 import {InputStyles, InputDefaultVariants} from '../theme/Input.recipe'
-import {PalettesWithNestedKeys} from '../style/varia/types'
+import {
+  AlignSelf,
+  Flex,
+  MaxWidth,
+  PalettesWithNestedKeys,
+  StackDirection,
+} from '../style/varia/types'
 import {useState} from 'react'
-import {HStack} from '../patterns'
+import {IconWrapperProps} from './IconWrapper'
 
 type InputVariants = UnistylesVariants<typeof InputStyles>
 
 type InputProps = InputVariants &
   TextInputProps & {
     colorPalette?: PalettesWithNestedKeys
-    onChange?: (value: string) => void
+    onChangeText?: (value: string) => void
     placeholder: string
     inputMode?: InputModeOptions
     keyboardType?: KeyboardTypeOptions
-    flex?: number
-    maxWidth?: number | string
+    flex?: Flex
+    maxWidth?: MaxWidth
     password?: boolean
     onFocus?: () => void
     onBlur?: () => void
-    value: any
+    value: string
     disabled?: boolean
     containerMixins?: StyleProp<ViewStyle> | StyleProp<ViewStyle>[]
+    alignSelf?: AlignSelf
     labelMixins?:
       | StyleProp<ViewStyle>
       | StyleProp<ViewStyle>[]
       | StyleProp<TextStyle>
       | StyleProp<TextStyle>[]
     inputMixins?: StyleProp<ViewStyle> | StyleProp<ViewStyle>[]
+    icon?: {
+      component: React.ComponentType<IconWrapperProps>
+      position?: 'left' | 'right'
+      scale?: number
+      rotation?: number
+      size?: number
+    }
+    style?: StyleProp<ViewStyle>
+    direction?: StackDirection
   }
 
 const Input = ({
   colorPalette = 'accent',
   size = InputDefaultVariants.size,
+  variant = InputDefaultVariants.variant,
   placeholder,
-  onChange,
-  inputMode,
+  onChangeText,
+  inputMode = 'text',
   keyboardType,
-  flex = 1,
+  flex = 0,
   maxWidth = '100%',
   password = false,
   onFocus = () => {},
   onBlur = () => {},
   value,
   containerMixins,
+  alignSelf = 'auto',
   labelMixins,
   inputMixins,
   disabled,
   invalid,
+  style,
+  icon,
+  textAlignVertical = 'center',
+  direction = 'column',
   ...props
 }: InputProps) => {
   const [focused, setFocused] = useState(false)
   InputStyles.useVariants({
     size,
+    variant,
     focused,
     disabled,
     invalid,
   })
+  const iconPosition = icon ? !icon.position && 'left' : null
 
   const placeholderStyle = InputStyles.placeholder(colorPalette) as {
     color: string
   }
   const placeholderColor = placeholderStyle.color
 
+  const inputResolvedVariantStyle = InputStyles.input(colorPalette) as {
+    paddingHorizontal?: number
+  }
+  const paddingHorizontal = inputResolvedVariantStyle.paddingHorizontal ?? 0
+
+  const IconComponent = icon?.component
+  const IconRendered = IconComponent ? (
+    <IconComponent
+      {...{
+        rotation: icon.rotation,
+        scale: icon.scale,
+        colorPalette,
+        size: icon.size,
+        color: InputStyles.input(colorPalette).color,
+        style: styles.icon(iconPosition, paddingHorizontal, textAlignVertical),
+      }}
+    />
+  ) : null
+
+  console.log(
+    iconPosition === 'left'
+      ? (icon?.size || 0) + paddingHorizontal * 2
+      : paddingHorizontal,
+  )
+
   return (
-    <HStack
-      style={{
-        flexGrow: flex,
-        flexShrink: 0,
-        alignSelf: 'stretch',
-      }}>
+    <View
+      style={styles.container(flex, direction, alignSelf, textAlignVertical)}>
+      {IconRendered}
       <TextInput
         editable={!disabled}
         style={[
-          styles.input(flex, maxWidth),
+          styles.input(
+            flex,
+            maxWidth,
+            iconPosition,
+            paddingHorizontal,
+            textAlignVertical,
+            (icon?.size || 0) + paddingHorizontal * 2,
+            alignSelf,
+          ),
           InputStyles.input(colorPalette),
           inputMixins && inputMixins,
+          style && style,
         ]}
         value={value}
         placeholder={placeholder}
@@ -99,23 +155,48 @@ const Input = ({
           onBlur()
           setFocused(false)
         }}
-        onChangeText={onChange}
-        multiline={false}
+        onChangeText={onChangeText}
         {...props}
       />
-    </HStack>
+    </View>
   )
 }
 
 const styles = StyleSheet.create({
-  input: (flex, maxWidth) => ({
+  container: (flex, direction, alignSelf, textAlignVertical) => ({
+    flex,
+    flexDirection: direction,
+    alignSelf,
+    alignItems: 'stretch',
+    justifyContent:
+      textAlignVertical === 'center'
+        ? 'center'
+        : textAlignVertical === 'bottom'
+        ? 'flex-end'
+        : 'flex-start',
+  }),
+  input: (
     flex,
-    paddingVertical: 0,
-    flexDirection: 'row',
-    flexGrow: 1,
-    flexShrink: 0,
-    alignSelf: 'stretch',
     maxWidth,
+    iconPosition,
+    paddingHorizontal,
+    textAlignVertical,
+    padding,
+    alignSelf,
+  ) => ({
+    flex,
+    paddingLeft: iconPosition === 'left' ? padding : paddingHorizontal,
+    paddingRight: iconPosition === 'right' ? padding : paddingHorizontal,
+    textAlignVertical,
+    maxWidth,
+    alignSelf,
+  }),
+  icon: (iconPosition, paddingHorizontal, textAlignVertical) => ({
+    position: 'absolute',
+    ...(iconPosition === 'left' && {left: paddingHorizontal}),
+    ...(iconPosition === 'right' && {right: paddingHorizontal}),
+    top: textAlignVertical !== 'top' ? 'auto' : 10,
+    bottom: textAlignVertical !== 'bottom' ? 'auto' : 10,
   }),
 })