react-native-varia 0.0.1 → 0.2.0

package/lib/components/Field.tsx

@@ -0,0 +1,137 @@
+import React, {createContext, useContext} from 'react'
+import Text from './Text'
+import {VStack} from '../patterns'
+import {DefaultFieldVariants, FieldStyles} from '../theme/Field.recipe'
+import {UnistylesVariants} from 'react-native-unistyles'
+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
+}
+
+type FieldRootProps = FieldVariants & {
+  children: React.ReactNode
+  error?: string
+  colorPalette?: PalettesWithNestedKeys
+  flex?: number
+}
+
+const FieldRoot = ({
+  children,
+  error,
+  variant = DefaultFieldVariants.variant,
+  size = DefaultFieldVariants.size,
+  colorPalette = 'accent',
+  flex = 1,
+}: FieldRootProps) => {
+  FieldStyles.useVariants({size})
+
+  const contextValue: FieldContextType = {
+    error,
+    variant,
+    size,
+    colorPalette,
+  }
+
+  FieldStyles.useVariants({variant, size})
+
+  return (
+    <VStack
+      style={[
+        {
+          flexShrink: 1,
+          flexGrow: flex,
+          alignItems: 'stretch',
+          alignSelf: 'stretch',
+        },
+        FieldStyles.root(colorPalette),
+      ]}>
+      <FieldContext.Provider value={contextValue}>
+        {children}
+      </FieldContext.Provider>
+    </VStack>
+  )
+}
+
+type FieldLabelProps = {
+  children: React.ReactNode
+  size?: FieldVariants['size']
+  variant?: FieldVariants['variant']
+  colorPalette?: PalettesWithNestedKeys
+}
+
+const FieldLabel = ({children, ...props}: FieldLabelProps) => {
+  const {
+    size,
+    variant,
+    colorPalette = 'accent',
+  } = {
+    ...useField(),
+    ...props,
+  }
+
+  FieldStyles.useVariants({variant, size})
+
+  return (
+    <Text
+      size={size}
+      // @ts-ignore
+      color={FieldStyles.label(colorPalette).color}>
+      {children}
+    </Text>
+  )
+}
+
+type FieldErrorProps = {
+  size?: FieldVariants['size']
+  variant?: FieldVariants['variant']
+  colorPalette?: PalettesWithNestedKeys
+}
+
+const FieldError = ({...props}: FieldErrorProps) => {
+  const {
+    error,
+    size,
+    variant,
+    colorPalette = 'accent',
+  } = {
+    ...useField(),
+    ...props,
+  }
+
+  if (!error) return null
+
+  FieldStyles.useVariants({size, variant})
+
+  return (
+    // @ts-ignore
+    <Text size={size} color={FieldStyles.error(colorPalette).color}>
+      {error}
+    </Text>
+  )
+}
+
+export const Field = Object.assign(FieldRoot, {
+  Root: FieldRoot,
+  Label: FieldLabel,
+  Error: FieldError,
+})
+
+export default Field

package/lib/components/GradientBackground.tsx

@@ -1,37 +1,34 @@
-import {View, StyleSheet, type ColorValue} from 'react-native'
+import {View, StyleSheet, 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 {resolveColor} from '../style/varia/utils'
 
 interface GradientBackgroundProps {
-  colorPalette?: keyof typeof gradientBackgroundTokens.variants.colorPalette
+  colorPalette?: PalettesWithNestedKeys
+  variant?: keyof typeof gradientBackgroundTokens.variants.variant
   direction?: keyof typeof gradientBackgroundTokens.variants.direction
-  // colors: Record<string, ColorValue>;
-  colors: Record<string, ColorValue>
+  containerStyles?: StyleProp<ViewStyle>
+  colors: any
 }
 
 const BaseGradientBackground = ({
-  colorPalette = gradientBackgroundTokens.defaultProps.colorPalette,
+  colorPalette = 'accent',
+  variant = gradientBackgroundTokens.defaultProps.variant,
   direction = gradientBackgroundTokens.defaultProps.direction,
+  containerStyles,
   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 colorValue = gradientBackgroundTokens.variants.variant[variant]
+  const startColor = resolveColor(colorValue.startColor, colors, colorPalette)
+  const endColor = resolveColor(colorValue.endColor, colors, colorPalette)
 
   const directionVariant =
     gradientBackgroundTokens.variants.direction[direction]
 
   return (
-    <View style={styles.container}>
+    <View style={[styles.container, containerStyles && containerStyles]}>
       <Svg
         width="100%"
         height="100%"
@@ -57,10 +54,12 @@ const BaseGradientBackground = ({
 const styles = StyleSheet.create({
   container: {
     ...StyleSheet.absoluteFillObject,
+    borderWidth: 0,
+    overflow: 'hidden',
+    borderColor: 'transparent',
   },
 })
 
-// export default GradientBackground;
 const GradientBackground = withUnistyles(BaseGradientBackground, theme => ({
   colors: theme.colors,
 }))

package/lib/components/GradientText.tsx

@@ -6,45 +6,45 @@ import Svg, {
   Text,
   type NumberProp,
 } from 'react-native-svg'
-import {StyleSheet, withUnistyles} from 'react-native-unistyles'
+import {withUnistyles} from 'react-native-unistyles'
 import {gradientTextTokens} from '../theme/GradientText.recipe'
-import {TextSemanticSizes} from '../style/types'
+import {PalettesWithNestedKeys} from '../style/varia/types'
+import {resolveColor, resolveFontSize} from '../style/varia/utils'
 
 interface GradientTextProps {
-  colorPalette?: keyof typeof gradientTextTokens.variants.colorPalette
+  colorPalette: PalettesWithNestedKeys
+  variant?: keyof typeof gradientTextTokens.variants.variant
   direction?: keyof typeof gradientTextTokens.variants.direction
-  // colors: Record<string, ColorValue>;
-  colors: Record<string, ColorValue>
-  as?: TextSemanticSizes
+  colors: any
+  fontSizes: any
   fontSize?: number | undefined
   children?: React.ReactNode
+  size?: keyof typeof gradientTextTokens.variants.size
 }
 
 const BaseGradientText = ({
-  as = 'body',
   fontSize,
-  colorPalette = gradientTextTokens.defaultProps.colorPalette,
+  variant = gradientTextTokens.defaultProps.variant,
+  colorPalette = 'accent',
   direction = gradientTextTokens.defaultProps.direction,
   colors,
+  fontSizes,
   children,
+  size = gradientTextTokens.defaultProps.size,
 }: GradientTextProps) => {
-  const tokenColorKey = gradientTextTokens.variants.colorPalette[colorPalette]
-  const startColor =
-    tokenColorKey.startColor in colors
-      ? colors[tokenColorKey.startColor]
-      : tokenColorKey.startColor
+  const colorValue = gradientTextTokens.variants.variant[variant]
+  const startColor = resolveColor(colorValue.startColor, colors, colorPalette)
+  const endColor = resolveColor(colorValue.endColor, colors, colorPalette)
 
-  const endColor =
-    tokenColorKey.endColor in colors
-      ? colors[tokenColorKey.endColor]
-      : tokenColorKey.endColor
+  const fontSizeValue = gradientTextTokens.variants.size[size].fontSize
+  const resolvedFontSize = fontSize || resolveFontSize(fontSizeValue, fontSizes)
 
   const directionVariant = gradientTextTokens.variants.direction[direction]
 
   return (
     <View style={{flexDirection: 'row'}}>
       <View style={{width: '100%'}}>
-        <Svg height={styles[as](fontSize).fontSize + 20} width="100%">
+        <Svg height={resolvedFontSize + 20} width="100%">
           <Defs>
             <LinearGradient
               id="gradient"
@@ -58,10 +58,13 @@ const BaseGradientText = ({
           </Defs>
           <Text
             fill="url(#gradient)"
-            fontSize={styles[as](fontSize).fontSize}
-            fontWeight={400}
+            fontSize={resolvedFontSize}
+            fontWeight={
+              (gradientTextTokens.variants.size[size] as {fontWeight?: number})
+                .fontWeight ?? 400
+            }
             x="50%"
-            y={styles[as](fontSize).fontSize}
+            y={resolvedFontSize}
             textAnchor="middle">
             {children}
           </Text>
@@ -71,51 +74,9 @@ const BaseGradientText = ({
   )
 }
 
-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,
+  fontSizes: theme.fontSizes,
 }))
 
 export default GradientText

package/lib/components/IconWrapper.tsx

@@ -10,14 +10,22 @@ 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'
+import {
+  NestedColorsType,
+  PalettesWithNestedKeys,
+  ThemeColors,
+} from '../style/varia/types'
+import {resolveColor} from '../style/varia/utils'
 
 interface SVGChildProps {
   color?: string
 }
+
 export type IconWrapperProps = {
-  size?: keyof typeof IconTokens.variants.size
-  colorPalette?: keyof typeof IconTokens.variants.colorPalette
+  variant?: keyof typeof IconTokens.variants.variant
+  size?: number
+  sizeVariant?: keyof typeof IconTokens.variants.sizeVariant
+  colorPalette?: PalettesWithNestedKeys
   children?: ReactElement<SVGChildProps>
   scale?: number
   color?: ThemeColors
@@ -33,8 +41,10 @@ export type IconWrapperProps = {
  * @returns Icon react component
  */
 const Icon = ({
-  size = IconTokens.defaultProps.size,
-  colorPalette = IconTokens.defaultProps.colorPalette,
+  size,
+  colorPalette = 'accent',
+  variant = IconTokens.defaultProps.variant,
+  sizeVariant = IconTokens.defaultProps.sizeVariant,
   children,
   scale = IconTokens.defaultProps.scale,
   color,
@@ -42,33 +52,30 @@ const Icon = ({
   colors,
   ...rest
 }: IconWrapperProps) => {
-  const colorPaletteKey = IconTokens.variants.colorPalette[colorPalette]
-  const colorScheme =
-    colorPaletteKey.color in colors
-      ? colors[colorPaletteKey.color]
-      : colorPaletteKey.color
+  const colorValue = IconTokens.variants.variant[variant].color
   const resolvedColor = color
-    ? color in colors
-      ? colors[color]
-      : color
-    : colorScheme
+    ? resolveColor(color, colors, colorPalette)
+    : resolveColor(colorValue, colors, colorPalette)
 
-  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
+  const width = IconTokens.variants.sizeVariant[sizeVariant].width ?? 0
+  const height = IconTokens.variants.sizeVariant[sizeVariant].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,
+        width: size || width,
+        height: size || height,
+        justifyContent: 'center',
+        alignItems: 'center',
         transform: rotation ? [{rotate: `${rotation}deg`}] : [],
       }}>
       <Svg
-        width={scale * width}
-        height={scale * height}
-        viewBox={`0 0 ${viewBoxWidth} ${viewBoxHeight}`}
+        width={size || width}
+        height={size || height}
+        viewBox="0 0 24 24"
+        // viewBox={`0 0 ${viewBoxWidth} ${viewBoxHeight}`}
         fill="none"
         {...rest}>
         {Children.map(children, child => {
@@ -81,7 +88,7 @@ const Icon = ({
                   return cloneElement(
                     pathChild as React.ReactElement<{stroke?: string}>,
                     {
-                      stroke: resolvedColor ?? colorScheme,
+                      stroke: resolvedColor,
                     },
                   )
                 }
@@ -98,7 +105,7 @@ const Icon = ({
 
 export default Icon
 
-export const ThemedIcon = withUnistyles(Icon, (theme, rt) => ({
+export const ThemedIcon = withUnistyles(Icon, theme => ({
   colors: theme.colors,
 }))
 

package/lib/components/Input.tsx

@@ -3,46 +3,44 @@ import {
   type KeyboardTypeOptions,
   type StyleProp,
   TextInput,
+  TextInputProps,
   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'
+import {InputStyles, InputDefaultVariants} from '../theme/Input.recipe'
+import {PalettesWithNestedKeys} from '../style/varia/types'
+import {useState} from 'react'
+import {HStack} from '../patterns'
 
 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>;
-}
+type InputProps = InputVariants &
+  TextInputProps & {
+    colorPalette?: PalettesWithNestedKeys
+    onChange?: (value: string) => void
+    placeholder: string
+    inputMode?: InputModeOptions
+    keyboardType?: KeyboardTypeOptions
+    flex?: number
+    maxWidth?: number | string
+    password?: boolean
+    onFocus?: () => void
+    onBlur?: () => void
+    value: any
+    disabled?: boolean
+    containerMixins?: StyleProp<ViewStyle> | StyleProp<ViewStyle>[]
+    labelMixins?:
+      | StyleProp<ViewStyle>
+      | StyleProp<ViewStyle>[]
+      | StyleProp<TextStyle>
+      | StyleProp<TextStyle>[]
+    inputMixins?: StyleProp<ViewStyle> | StyleProp<ViewStyle>[]
+  }
 
 const Input = ({
-  colorPalette = InputTokens.defaultProps.colorPalette,
-  size = InputTokens.defaultProps.size,
-  spacing = InputTokens.defaultProps.spacing,
-  label,
+  colorPalette = 'accent',
+  size = InputDefaultVariants.size,
   placeholder,
   onChange,
   inputMode,
@@ -51,70 +49,70 @@ const Input = ({
   maxWidth = '100%',
   password = false,
   onFocus = () => {},
+  onBlur = () => {},
   value,
   containerMixins,
   labelMixins,
   inputMixins,
-}: // containerStyle,
-// labelStyle,
-// inputStyle,
-InputProps) => {
+  disabled,
+  invalid,
+  ...props
+}: InputProps) => {
+  const [focused, setFocused] = useState(false)
   InputStyles.useVariants({
-    colorPalette,
     size,
-    spacing,
+    focused,
+    disabled,
+    invalid,
   })
 
   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>
-      )}
+    <HStack
+      style={{
+        flexGrow: flex,
+        flexShrink: 0,
+        alignSelf: 'stretch',
+      }}>
       <TextInput
+        editable={!disabled}
         style={[
-          // styles.input,
-          InputStyles.input,
-          // inputStyle && styles.customStyle(inputStyle),
+          styles.input(flex, maxWidth),
+          InputStyles.input(colorPalette),
           inputMixins && inputMixins,
         ]}
         value={value}
         placeholder={placeholder}
+        // @ts-ignore
+        placeholderTextColor={InputStyles.placeholder(colorPalette).color}
         inputMode={inputMode}
         keyboardType={keyboardType}
         secureTextEntry={password}
-        onFocus={onFocus}
+        onFocus={() => {
+          onFocus()
+          setFocused(true)
+        }}
+        onBlur={() => {
+          onBlur()
+          setFocused(false)
+        }}
         onChangeText={onChange}
+        multiline={false}
+        {...props}
       />
-    </View>
+    </HStack>
   )
 }
 
 const styles = StyleSheet.create({
-  container: (flex, maxWidth) => ({
+  input: (flex, maxWidth) => ({
     flex,
-    width: '100%',
+    paddingVertical: 0,
+    flexDirection: 'row',
+    flexGrow: 1,
+    flexShrink: 0,
+    alignSelf: 'stretch',
     maxWidth,
-    gap: 5,
   }),
-  // customStyle: style => ({
-  //   ...style,
-  // }),
 })
 
 export default Input