react-native-varia 0.2.3 → 0.3.0

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,49 @@ 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,
+    outline: 'none'
+  }),
+  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/Modal.tsx

@@ -94,7 +94,7 @@ const ModalOverlay = ({children, ...props}: ModalOverlayProps) => {
       entering={ModalTokens.animations.variants[animation]?.enteringOverlay}
       exiting={ModalTokens.animations.variants[animation]?.exitingOverlay}>
       <TouchableWithoutFeedback onPress={() => setIsOpen(false)}>
-        <View style={RNStyleSheet.absoluteFillObject} />
+        <View style={StyleSheet.absoluteFillObject} />
       </TouchableWithoutFeedback>
       {children}
     </Animated.View>
@@ -151,14 +151,7 @@ type ModalBodyProps = Omit<ModalVariants, 'variant'> & {
   customStyle?: any
 }
 
-const ModalBody = ({children, ...props}: ModalBodyProps) => {
-  const context = useModalContext()
-  const {colorPalette = 'accent', variant} = {
-    ...context,
-    ...props,
-  }
-
-  ModalStyles.useVariants({variant})
+const ModalBody = ({children}: ModalBodyProps) => {
   return <View>{children}</View>
 }
 
@@ -243,7 +236,7 @@ const styles = StyleSheet.create(theme => {
   }
 })
 
-export const Modal = Object.assign(ModalRoot, {
+const Modal = Object.assign(ModalRoot, {
   Root: ModalRoot,
   Overlay: ModalOverlay,
   Content: ModalContent,
@@ -253,3 +246,4 @@ export const Modal = Object.assign(ModalRoot, {
   CloseTrigger: ModalCloseTrigger,
   CloseButton: CloseButton,
 })
+export default Modal

package/lib/components/NumberInput.tsx

@@ -1,18 +1,25 @@
-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 {
@@ -36,6 +43,9 @@ type SimpleNumberInputProps = NumberInputVariants & {
   flex?: number
   min?: number
   max?: number
+  alignSelf?: AlignSelf
+  style?: StyleProp<ViewStyle>
+  direction?: 'row' | 'column'
 }
 
 export const SimpleNumberInputContext = createContext<{
@@ -48,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() {
@@ -75,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)
@@ -103,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>
@@ -126,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)
@@ -138,8 +178,9 @@ const NumberInput = {
     return (
       <TextInput
         style={[
-          simpleNumberInputstyles.input,
+          simpleNumberInputstyles.input(childFlex as number),
           NumberInputStyles.input(colorPalette),
+          style || {},
         ]}
         keyboardType="numeric"
         value={value.toString()}
@@ -236,14 +277,16 @@ const DecreaseTriggerIcon = ({color}: {color?: string}) => {
 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',