react-native-varia 0.2.2 → 0.2.4

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,
   }),
 })
 

package/lib/components/NumberInput.tsx

@@ -1,19 +1,32 @@
-import React, {createContext, useContext, useState} from 'react'
-import {View, TextInput, Pressable} from 'react-native'
+import React, {createContext, useContext, useMemo, useState} from 'react'
+import {View, TextInput, Pressable, StyleProp, ViewStyle} from 'react-native'
 import {UnistylesVariants, StyleSheet} from 'react-native-unistyles'
 import {
   NumberInputStyles,
   NumberInputDefaultVariants,
 } from '../theme/NumberInput.recipe'
-import {PalettesWithNestedKeys} from '../style/varia/types'
+import {
+  AlignSelf,
+  PalettesWithNestedKeys,
+  StackDirection,
+} from '../style/varia/types'
 import Plus from '../icons/Plus'
 import Minus from '../icons/Minus'
+import {computeFlexSync} from '../style/varia/utils'
 
 type NumberInputVariants = UnistylesVariants<typeof NumberInputStyles>
 
 type PublicInputProps = Omit<NumberInputVariants, 'variant' | 'size'> & {
   placeholder?: string
+  flex?: number
+  style?: StyleProp<ViewStyle>
 }
+
+interface IconProps {
+  color?: string
+  size?: number
+}
+
 type PublicTriggerProps = {
   children?: React.ReactNode
   variant?: NumberInputVariants['variant']
@@ -30,6 +43,9 @@ type SimpleNumberInputProps = NumberInputVariants & {
   flex?: number
   min?: number
   max?: number
+  alignSelf?: AlignSelf
+  style?: StyleProp<ViewStyle>
+  direction?: 'row' | 'column'
 }
 
 export const SimpleNumberInputContext = createContext<{
@@ -42,12 +58,16 @@ export const SimpleNumberInputContext = createContext<{
   distribution?: NumberInputVariants['distribution']
   min?: number
   max?: number
+  flex?: number
+  alignSelf?: AlignSelf
+  direction?: StackDirection
 }>({
   value: 0,
   setValue: () => {},
   onBlur: undefined,
   min: undefined,
   max: undefined,
+  flex: 0,
 })
 
 function useSimpleNumberInputContext() {
@@ -69,9 +89,12 @@ const NumberInput = {
     variant = NumberInputDefaultVariants.variant,
     size = NumberInputDefaultVariants.size,
     children,
-    flex = 1,
+    flex = 0,
     min,
     max,
+    alignSelf = 'auto',
+    direction = 'column',
+    style,
   }: React.PropsWithChildren<SimpleNumberInputProps>) => {
     NumberInputStyles.useVariants({variant, size, distribution})
     const [internalValue, setInternalValue] = useState<number>(defaultValue)
@@ -97,11 +120,15 @@ const NumberInput = {
           variant,
           size,
           distribution,
+          flex,
+          alignSelf,
+          direction,
         }}>
         <View
           style={[
-            simpleNumberInputstyles.rootContainer(flex),
+            simpleNumberInputstyles.rootContainer(flex, alignSelf),
             NumberInputStyles.container(colorPalette),
+            style || {},
           ]}>
           {children}
         </View>
@@ -120,7 +147,26 @@ const NumberInput = {
       distribution,
       min,
       max,
+      style,
+      flex,
+      alignSelf,
+      direction,
     } = {...useSimpleNumberInputContext(), ...props}
+    const resolvedDirection =
+      direction === 'row'
+        ? distribution === 'horizontal'
+          ? 'row'
+          : 'column'
+        : 'row'
+
+    const {flex: childFlex} = useMemo(() => {
+      return computeFlexSync(
+        flex as number,
+        alignSelf,
+        resolvedDirection as StackDirection,
+      )
+    }, [flex, alignSelf, direction])
+
     const handleChangeText = (text: string) => {
       const numeric = text.replace(/[^0-9]/g, '')
       let num = numeric === '' ? 0 : parseInt(numeric, 10)
@@ -132,8 +178,9 @@ const NumberInput = {
     return (
       <TextInput
         style={[
-          simpleNumberInputstyles.input,
+          simpleNumberInputstyles.input(childFlex as number),
           NumberInputStyles.input(colorPalette),
+          style || {},
         ]}
         keyboardType="numeric"
         value={value.toString()}
@@ -153,10 +200,20 @@ const NumberInput = {
       distribution = NumberInputDefaultVariants.distribution,
       colorPalette = 'accent',
       children,
-      min,
       max,
     } = {...useSimpleNumberInputContext(), ...props}
     NumberInputStyles.useVariants({variant, size, distribution})
+
+    const color = (NumberInputStyles.buttons(colorPalette) as {color: string})
+      .color
+
+    const iconElement = children || <IncreaseTriggerIcon />
+    const iconWithProps = React.isValidElement<IconProps>(iconElement)
+      ? React.cloneElement(iconElement, {
+          color,
+        })
+      : iconElement
+
     return (
       <Pressable
         onPress={() => setValue(value + 1)}
@@ -166,7 +223,7 @@ const NumberInput = {
           NumberInputStyles.buttons(colorPalette),
           NumberInputStyles.increaseTrigger(colorPalette),
         ]}>
-        {children || <IncreaseTriggerIcon />}
+        {iconWithProps}
       </Pressable>
     )
   },
@@ -181,9 +238,19 @@ const NumberInput = {
       colorPalette = 'accent',
       children,
       min,
-      max,
     } = {...useSimpleNumberInputContext(), ...props}
     NumberInputStyles.useVariants({variant, size, distribution})
+
+    const color = (NumberInputStyles.buttons(colorPalette) as {color: string})
+      .color
+
+    const iconElement = children || <DecreaseTriggerIcon />
+    const iconWithProps = React.isValidElement<IconProps>(iconElement)
+      ? React.cloneElement(iconElement, {
+          color,
+        })
+      : iconElement
+
     return (
       <Pressable
         onPress={() => setValue(value - 1)}
@@ -193,31 +260,33 @@ const NumberInput = {
           NumberInputStyles.buttons(colorPalette),
           NumberInputStyles.decreaseTrigger(colorPalette),
         ]}>
-        {children || <DecreaseTriggerIcon />}
+        {iconWithProps}
       </Pressable>
     )
   },
 }
 
-const IncreaseTriggerIcon = () => {
-  return <Plus scale={0.8} variant="solid" />
+const IncreaseTriggerIcon = ({color}: {color?: string}) => {
+  return <Plus color={color} />
 }
 
-const DecreaseTriggerIcon = () => {
-  return <Minus scale={0.8} variant="solid" />
+const DecreaseTriggerIcon = ({color}: {color?: string}) => {
+  return <Minus color={color} />
 }
 
 export default NumberInput
 
 const simpleNumberInputstyles = StyleSheet.create({
-  rootContainer: (flex: number) => ({
+  rootContainer: (flex: number, alignSelf?: AlignSelf) => ({
     flexDirection: 'row',
-    flexGrow: flex,
-    alignSelf: 'flex-start',
+    flex,
+    alignSelf,
+    alignItems: 'stretch',
   }),
-  input: {
+  input: (flex: number) => ({
     paddingVertical: 0,
-  },
+    flex,
+  }),
   button: {
     justifyContent: 'center',
     alignItems: 'center',