react-native-varia 0.2.4 → 0.4.0

package/lib/components/IconWrapper.tsx

@@ -14,7 +14,6 @@ import {
   NestedColorsType,
   PalettesWithNestedKeys,
   ThemeColors,
-  ThemeType,
 } from '../style/varia/types'
 import {resolveColor} from '../style/varia/utils'
 
@@ -107,7 +106,9 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
     ...(rotation && {transform: [{rotate: `${rotation}deg`}]}),
-    // transform: rotation ? [{rotate: `${rotation}deg`}] : [],
+    _web: {
+      _classNames: 'icon_wrapper-root-base',
+    },
   }),
 })
 

package/lib/components/Input.tsx

@@ -19,6 +19,7 @@ import {
 } from '../style/varia/types'
 import {useState} from 'react'
 import {IconWrapperProps} from './IconWrapper'
+import {getVariantValue} from '../style/varia/utils'
 
 type InputVariants = UnistylesVariants<typeof InputStyles>
 
@@ -89,17 +90,22 @@ const Input = ({
     disabled,
     invalid,
   })
-  const iconPosition = icon ? !icon.position && 'left' : null
+  const iconPosition = icon ? icon.position || 'left' : null
 
-  const placeholderStyle = InputStyles.placeholder(colorPalette) as {
-    color: string
-  }
-  const placeholderColor = placeholderStyle.color
+  const resolvedPlaceholderColor = getVariantValue(
+    InputStyles.placeholder(colorPalette),
+    'variant',
+    variant,
+    'color',
+  )
 
-  const inputResolvedVariantStyle = InputStyles.input(colorPalette) as {
-    paddingHorizontal?: number
-  }
-  const paddingHorizontal = inputResolvedVariantStyle.paddingHorizontal ?? 0
+  const resolvedPaddingHorizontal =
+    getVariantValue(
+      InputStyles.input(colorPalette),
+      'size',
+      size,
+      'paddingHorizontal',
+    ) || 0
 
   const IconComponent = icon?.component
   const IconRendered = IconComponent ? (
@@ -110,16 +116,16 @@ const Input = ({
         colorPalette,
         size: icon.size,
         color: InputStyles.input(colorPalette).color,
-        style: styles.icon(iconPosition, paddingHorizontal, textAlignVertical),
+        style: styles.icon(
+          iconPosition,
+          resolvedPaddingHorizontal,
+          textAlignVertical,
+        ),
       }}
     />
   ) : null
 
-  console.log(
-    iconPosition === 'left'
-      ? (icon?.size || 0) + paddingHorizontal * 2
-      : paddingHorizontal,
-  )
+  const withIconPadding = (icon?.size || 0) + resolvedPaddingHorizontal * 2
 
   return (
     <View
@@ -132,18 +138,29 @@ const Input = ({
             flex,
             maxWidth,
             iconPosition,
-            paddingHorizontal,
+            resolvedPaddingHorizontal,
             textAlignVertical,
-            (icon?.size || 0) + paddingHorizontal * 2,
+            (icon?.size || 0) + resolvedPaddingHorizontal * 2,
             alignSelf,
           ),
           InputStyles.input(colorPalette),
           inputMixins && inputMixins,
           style && style,
+          iconPosition && {
+            paddingInline: 0,
+            paddingLeft:
+              iconPosition === 'left'
+                ? withIconPadding - 0.1
+                : resolvedPaddingHorizontal,
+            paddingRight:
+              iconPosition === 'right'
+                ? withIconPadding - 0.1
+                : resolvedPaddingHorizontal,
+          },
         ]}
         value={value}
         placeholder={placeholder}
-        placeholderTextColor={placeholderColor}
+        placeholderTextColor={resolvedPlaceholderColor}
         inputMode={inputMode}
         keyboardType={keyboardType}
         secureTextEntry={password}
@@ -174,6 +191,10 @@ const styles = StyleSheet.create({
         : textAlignVertical === 'bottom'
         ? 'flex-end'
         : 'flex-start',
+    flexBasis: 'auto',
+    _web: {
+      _classNames: 'input-container-base',
+    },
   }),
   input: (
     flex,
@@ -185,11 +206,14 @@ const styles = StyleSheet.create({
     alignSelf,
   ) => ({
     flex,
-    paddingLeft: iconPosition === 'left' ? padding : paddingHorizontal,
-    paddingRight: iconPosition === 'right' ? padding : paddingHorizontal,
     textAlignVertical,
     maxWidth,
     alignSelf,
+    outline: 'none',
+    flexBasis: 'auto',
+    _web: {
+      _classNames: 'input-base',
+    },
   }),
   icon: (iconPosition, paddingHorizontal, textAlignVertical) => ({
     position: 'absolute',
@@ -197,6 +221,9 @@ const styles = StyleSheet.create({
     ...(iconPosition === 'right' && {right: paddingHorizontal}),
     top: textAlignVertical !== 'top' ? 'auto' : 10,
     bottom: textAlignVertical !== 'bottom' ? 'auto' : 10,
+    _web: {
+      _classNames: 'input-icon-base',
+    },
   }),
 })
 

package/lib/components/Link.tsx

@@ -37,6 +37,7 @@ const Link = ({
   color,
   mixins,
 }: LinkProps) => {
+  console.log(color)
   return (
     <TouchableOpacity
       onPress={async () => {
@@ -67,6 +68,9 @@ const Link = ({
 const styles = StyleSheet.create({
   link: (underline): any => ({
     textDecorationLine: underline,
+    _web: {
+      _classNames: 'link-base',
+    },
   }),
 })
 

package/lib/components/Modal.tsx

@@ -13,6 +13,7 @@ import Text from './Text'
 import {ModalStyles, ModalTokens} from '../theme/Modal.recipe'
 import {PalettesWithNestedKeys} from '../style/varia/types'
 
+const AnimatedView = Animated.createAnimatedComponent(View)
 type ModalVariants = UnistylesVariants<typeof ModalStyles>
 type AnimationKey = keyof typeof ModalTokens.animations.variants
 type ColorPaletteKey = PalettesWithNestedKeys
@@ -89,15 +90,15 @@ const ModalOverlay = ({children, ...props}: ModalOverlayProps) => {
   ModalStyles.useVariants({variant})
 
   return (
-    <Animated.View
+    <AnimatedView
       style={[styles.overlay, ModalStyles.overlay(colorPalette)]}
       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>
+    </AnimatedView>
   )
 }
 
@@ -123,12 +124,12 @@ const ModalContent = ({children, ...props}: ModalContentProps) => {
   ModalStyles.useVariants({variant})
 
   return (
-    <Animated.View
+    <AnimatedView
       style={[styles.content(), ModalStyles.content(colorPalette)]}
       entering={ModalTokens.animations.variants[animation]?.enteringContent}
       exiting={ModalTokens.animations.variants[animation]?.exitingContent}>
       {children}
-    </Animated.View>
+    </AnimatedView>
   )
 }
 
@@ -151,14 +152,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>
 }
 
@@ -224,11 +218,17 @@ const styles = StyleSheet.create(theme => {
       zIndex: 1000,
       justifyContent: 'center',
       alignItems: 'center',
+      _web: {
+        _classNames: 'modal-overlay-base',
+      },
     },
     content: () => ({
       justifyContent: 'center',
       alignItems: 'center',
       alignSelf: 'stretch',
+      _web: {
+        _classNames: 'modal-content-base',
+      },
     }),
     header: {
       flexDirection: 'row',
@@ -236,14 +236,20 @@ const styles = StyleSheet.create(theme => {
       alignItems: 'center',
       width: '100%',
       marginBottom: 10,
+      _web: {
+        _classNames: 'modal-header-base',
+      },
     },
     closeButton: {
       color: 'white',
+      _web: {
+        _classNames: 'modal-close-button-base',
+      },
     },
   }
 })
 
-export const Modal = Object.assign(ModalRoot, {
+const Modal = Object.assign(ModalRoot, {
   Root: ModalRoot,
   Overlay: ModalOverlay,
   Content: ModalContent,
@@ -253,3 +259,4 @@ export const Modal = Object.assign(ModalRoot, {
   CloseTrigger: ModalCloseTrigger,
   CloseButton: CloseButton,
 })
+export default Modal

package/lib/components/NumberInput.tsx

@@ -12,7 +12,7 @@ import {
 } from '../style/varia/types'
 import Plus from '../icons/Plus'
 import Minus from '../icons/Minus'
-import {computeFlexSync} from '../style/varia/utils'
+import {computeFlexSync, getVariantValue} from '../style/varia/utils'
 
 type NumberInputVariants = UnistylesVariants<typeof NumberInputStyles>
 
@@ -204,8 +204,14 @@ const NumberInput = {
     } = {...useSimpleNumberInputContext(), ...props}
     NumberInputStyles.useVariants({variant, size, distribution})
 
-    const color = (NumberInputStyles.buttons(colorPalette) as {color: string})
-      .color
+    // const color = (NumberInputStyles.buttons(colorPalette) as {color: string})
+    //   .color
+    const color = getVariantValue(
+      NumberInputStyles.buttons(colorPalette),
+      'variant',
+      variant,
+      'color',
+    )
 
     const iconElement = children || <IncreaseTriggerIcon />
     const iconWithProps = React.isValidElement<IconProps>(iconElement)
@@ -241,8 +247,14 @@ const NumberInput = {
     } = {...useSimpleNumberInputContext(), ...props}
     NumberInputStyles.useVariants({variant, size, distribution})
 
-    const color = (NumberInputStyles.buttons(colorPalette) as {color: string})
-      .color
+    // const color = (NumberInputStyles.buttons(colorPalette) as {color: string})
+    //   .color
+    const color = getVariantValue(
+      NumberInputStyles.buttons(colorPalette),
+      'variant',
+      variant,
+      'color',
+    )
 
     const iconElement = children || <DecreaseTriggerIcon />
     const iconWithProps = React.isValidElement<IconProps>(iconElement)
@@ -282,13 +294,23 @@ const simpleNumberInputstyles = StyleSheet.create({
     flex,
     alignSelf,
     alignItems: 'stretch',
+    flexBasis: 'auto',
+    _web: {
+      _classNames: 'number-input-root-base',
+    },
   }),
   input: (flex: number) => ({
     paddingVertical: 0,
     flex,
+    _web: {
+      _classNames: 'number-input-base',
+    },
   }),
   button: {
     justifyContent: 'center',
     alignItems: 'center',
+    _web: {
+      _classNames: 'number-input-button-base',
+    },
   },
 })

package/lib/components/RadioGroup.tsx

@@ -6,7 +6,11 @@ import {
   RadioGroupDefaultVariants,
 } from '../theme/RadioGroup.recipe'
 import {
+  AlignItems,
   AlignSelf,
+  Flex,
+  Gap,
+  JustifyContent,
   PalettesWithNestedKeys,
   StackDirection,
 } from '../style/varia/types'
@@ -21,9 +25,9 @@ type RadioGroupRootProps = RadioGroupVariants & {
   direction?: StackDirection
   flex?: number
   alignSelf?: AlignSelf
-  justifyContent?: string
-  alignItems?: string
-  gap?: number
+  justifyContent?: JustifyContent
+  alignItems?: AlignItems
+  gap?: Gap
 }
 
 type RadioGroupContextProps = {
@@ -32,7 +36,7 @@ type RadioGroupContextProps = {
   colorPalette: PalettesWithNestedKeys
   variant: RadioGroupVariants['variant']
   size: RadioGroupVariants['size']
-  flex: number
+  flex: Flex
   alignSelf?: AlignSelf
 }
 
@@ -58,7 +62,7 @@ function Root({
   flex = 0,
   alignSelf = 'auto',
   direction = 'column',
-  justifyContent,
+  justifyContent = 'space-between',
   alignItems,
   gap,
 }: RadioGroupRootProps) {
@@ -218,16 +222,25 @@ const styles = StyleSheet.create({
     alignItems,
     gap,
     justifyContent,
+    flexBasis: 'auto',
+    _web: {
+      _classNames: 'radio-root',
+    },
   }),
   item: {
     flexDirection: 'row',
     alignItems: 'center',
+    _web: {
+      _classNames: 'radio-item',
+    },
   },
 })
 
-export const RadioGroup = {
+const RadioGroup = {
   Root,
   Item,
   Indicator,
   ItemText,
 }
+
+export default RadioGroup

package/lib/components/ReText.tsx

@@ -52,7 +52,7 @@ const ReText = ({
     return {
       text: text.value,
     } as TextInputProps
-  })
+  }, [text])
   return (
     <AnimatedTextInput
       underlineColorAndroid="transparent"
@@ -81,6 +81,9 @@ const styles = StyleSheet.create(theme => ({
     }),
     ...(fontSize && {fontSize}),
     textAlign: 'left',
+    _web: {
+      _classNames: 'retext-text-base',
+    },
   }),
   customStyle: style => ({
     ...style,

package/lib/components/Select.tsx

@@ -277,24 +277,41 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     ...(stretch ? {alignSelf: stretch} : {}),
     alignItems: 'stretch',
+    flexBasis: 'auto',
+    _web: {
+      _classNames: 'select-container-base',
+    },
   }),
   input: (flex: Flex) => ({
     flex,
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
+    flexBasis: 'auto',
+    _web: {
+      _classNames: 'select-input-base',
+    },
   }),
   item: {
     alignItems: 'center',
     flexDirection: 'row',
+    _web: {
+      _classNames: 'select-item-base',
+    },
   },
   backdrop: {
     ...StyleSheet.absoluteFillObject,
     backgroundColor: 'rgba(0,0,0,0.3)',
+    _web: {
+      _classNames: 'select-backdrop-base',
+    },
   },
   modalContent: {
     overflow: 'hidden',
     alignSelf: 'stretch',
+    _web: {
+      _classNames: 'select-modal-content-base',
+    },
   },
   portalContainer: {
     position: 'absolute',
@@ -304,5 +321,8 @@ const styles = StyleSheet.create({
     bottom: 0,
     justifyContent: 'center',
     alignItems: 'center',
+    _web: {
+      _classNames: 'select-portal-container-base',
+    },
   },
 })