react-native-varia 0.0.1 → 0.2.0

package/lib/components/NumberInput.tsx

@@ -0,0 +1,226 @@
+import React, {createContext, useContext, useState} from 'react'
+import {View, TextInput, Pressable} from 'react-native'
+import {
+  NumberInputStyles,
+  NumberInputDefaultVariants,
+} from '../theme/NumberInput.recipe'
+import {PalettesWithNestedKeys} from '../style/varia/types'
+import {UnistylesVariants, StyleSheet} from 'react-native-unistyles'
+import Arrow from '../icons/Arrow'
+import Plus from '../icons/Plus'
+import Minus from '../icons/Minus'
+
+type NumberInputVariants = UnistylesVariants<typeof NumberInputStyles>
+
+type PublicInputProps = Omit<NumberInputVariants, 'variant' | 'size'> & {
+  placeholder?: string
+}
+type PublicTriggerProps = {
+  children?: React.ReactNode
+  variant?: NumberInputVariants['variant']
+  size?: NumberInputVariants['size']
+  colorPalette?: PalettesWithNestedKeys
+}
+
+type SimpleNumberInputProps = NumberInputVariants & {
+  value?: number
+  onChange?: (n: number) => void
+  onBlur?: () => void
+  defaultValue?: number
+  colorPalette?: PalettesWithNestedKeys
+  flex?: number
+  min?: number
+  max?: number
+}
+
+export const SimpleNumberInputContext = createContext<{
+  value: number
+  setValue: (n: number) => void
+  onBlur?: () => void
+  colorPalette?: PalettesWithNestedKeys
+  variant?: NumberInputVariants['variant']
+  size?: NumberInputVariants['size']
+  distribution?: NumberInputVariants['distribution']
+  min?: number
+  max?: number
+}>({
+  value: 0,
+  setValue: () => {},
+  onBlur: undefined,
+  min: undefined,
+  max: undefined,
+})
+
+function useSimpleNumberInputContext() {
+  const ctx = useContext(SimpleNumberInputContext)
+  if (!ctx) {
+    throw new Error('SimpleNumberInput.* must be inside SimpleNumberInput.Root')
+  }
+  return ctx
+}
+
+const NumberInput = {
+  Root: ({
+    value: propValue,
+    onChange: propOnChange,
+    onBlur: propOnBlur,
+    defaultValue = 0,
+    colorPalette = 'accent',
+    distribution = NumberInputDefaultVariants.distribution,
+    variant = NumberInputDefaultVariants.variant,
+    size = NumberInputDefaultVariants.size,
+    children,
+    flex = 1,
+    min,
+    max,
+  }: React.PropsWithChildren<SimpleNumberInputProps>) => {
+    NumberInputStyles.useVariants({variant, size, distribution})
+    const [internalValue, setInternalValue] = useState<number>(defaultValue)
+    const isControlled = propValue !== undefined && propOnChange !== undefined
+    const value = isControlled ? propValue! : internalValue
+
+    const setValue = (n: number) => {
+      if (isControlled) {
+        propOnChange!(n)
+      } else {
+        setInternalValue(n)
+      }
+    }
+
+    return (
+      <SimpleNumberInputContext.Provider
+        value={{
+          value,
+          setValue,
+          onBlur: propOnBlur,
+          min,
+          max,
+          variant,
+          size,
+          distribution,
+        }}>
+        <View
+          style={[
+            simpleNumberInputstyles.rootContainer(flex),
+            NumberInputStyles.container(colorPalette),
+          ]}>
+          {children}
+        </View>
+      </SimpleNumberInputContext.Provider>
+    )
+  },
+
+  Input: ({placeholder, ...props}: PublicInputProps) => {
+    const {
+      value,
+      setValue,
+      onBlur,
+      colorPalette = 'accent',
+      variant,
+      size,
+      distribution,
+      min,
+      max,
+    } = {...useSimpleNumberInputContext(), ...props}
+    const handleChangeText = (text: string) => {
+      const numeric = text.replace(/[^0-9]/g, '')
+      let num = numeric === '' ? 0 : parseInt(numeric, 10)
+      if (min !== undefined && num < min) num = min
+      if (max !== undefined && num > max) num = max
+      setValue(num)
+    }
+    NumberInputStyles.useVariants({variant, size, distribution})
+    return (
+      <TextInput
+        style={[
+          simpleNumberInputstyles.input,
+          NumberInputStyles.input(colorPalette),
+        ]}
+        keyboardType="numeric"
+        value={value.toString()}
+        onChangeText={handleChangeText}
+        onBlur={onBlur}
+        placeholder={placeholder}
+      />
+    )
+  },
+
+  Increment: ({...props}: PublicTriggerProps) => {
+    const {
+      value,
+      setValue,
+      variant = NumberInputDefaultVariants.variant,
+      size = NumberInputDefaultVariants.size,
+      distribution = NumberInputDefaultVariants.distribution,
+      colorPalette = 'accent',
+      children,
+      min,
+      max,
+    } = {...useSimpleNumberInputContext(), ...props}
+    NumberInputStyles.useVariants({variant, size, distribution})
+    return (
+      <Pressable
+        onPress={() => setValue(value + 1)}
+        disabled={max !== undefined && value >= max}
+        style={[
+          simpleNumberInputstyles.button,
+          NumberInputStyles.buttons(colorPalette),
+          NumberInputStyles.increaseTrigger(colorPalette),
+        ]}>
+        {children || <IncreaseTriggerIcon />}
+      </Pressable>
+    )
+  },
+
+  Decrement: ({...props}: PublicTriggerProps) => {
+    const {
+      value,
+      setValue,
+      variant = NumberInputDefaultVariants.variant,
+      size = NumberInputDefaultVariants.size,
+      distribution = NumberInputDefaultVariants.distribution,
+      colorPalette = 'accent',
+      children,
+      min,
+      max,
+    } = {...useSimpleNumberInputContext(), ...props}
+    NumberInputStyles.useVariants({variant, size, distribution})
+    return (
+      <Pressable
+        onPress={() => setValue(value - 1)}
+        disabled={min !== undefined && value <= min}
+        style={[
+          simpleNumberInputstyles.button,
+          NumberInputStyles.buttons(colorPalette),
+          NumberInputStyles.decreaseTrigger(colorPalette),
+        ]}>
+        {children || <DecreaseTriggerIcon />}
+      </Pressable>
+    )
+  },
+}
+
+const IncreaseTriggerIcon = () => {
+  return <Plus scale={0.8} variant="solid" />
+}
+
+const DecreaseTriggerIcon = () => {
+  return <Minus scale={0.8} variant="solid" />
+}
+
+export default NumberInput
+
+const simpleNumberInputstyles = StyleSheet.create({
+  rootContainer: (flex: number) => ({
+    flexDirection: 'row',
+    flexGrow: flex,
+    alignSelf: 'flex-start',
+  }),
+  input: {
+    paddingVertical: 0,
+  },
+  button: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+})

package/lib/components/RadioGroup.tsx

@@ -0,0 +1,195 @@
+import React, {createContext, useContext, useState, useCallback} from 'react'
+import {View, Text, Pressable} from 'react-native'
+import {StyleSheet, UnistylesVariants} from 'react-native-unistyles'
+import {
+  RadioGroupStyles,
+  RadioGroupDefaultVariants,
+} from '../theme/RadioGroup.recipe'
+import {PalettesWithNestedKeys} from '../style/varia/types'
+
+type RadioGroupVariants = UnistylesVariants<typeof RadioGroupStyles>
+
+type RadioGroupRootProps = RadioGroupVariants & {
+  children: React.ReactNode
+  colorPalette?: PalettesWithNestedKeys
+  defaultValue?: string
+  onValueChange?: (value: string) => void
+  direction?: 'horizontal' | 'vertical'
+}
+
+type RadioGroupContextProps = {
+  value?: string
+  onValueChange: (newValue: string) => void
+  colorPalette: PalettesWithNestedKeys
+  variant: RadioGroupVariants['variant']
+  size: RadioGroupVariants['size']
+}
+
+const RadioGroupContext = createContext<RadioGroupContextProps | null>(null)
+
+function useRadioGroupContext() {
+  const context = useContext(RadioGroupContext)
+  if (!context) {
+    throw new Error(
+      'RadioGroup.* component must be rendered within a RadioGroup.Root',
+    )
+  }
+  return context
+}
+
+function Root({
+  children,
+  defaultValue,
+  colorPalette = 'accent',
+  variant = RadioGroupDefaultVariants.variant,
+  size = RadioGroupDefaultVariants.size,
+  onValueChange,
+  direction = 'vertical',
+}: RadioGroupRootProps) {
+  RadioGroupStyles.useVariants({variant, size})
+  const [value, setValue] = useState(defaultValue)
+
+  const handleValueChange = useCallback(
+    (newValue: string) => {
+      setValue(newValue)
+      if (onValueChange) {
+        onValueChange(newValue)
+      }
+    },
+    [onValueChange],
+  )
+
+  const contextValue = {
+    value,
+    onValueChange: handleValueChange,
+    colorPalette,
+    variant,
+    size,
+  }
+
+  return (
+    <RadioGroupContext.Provider value={contextValue}>
+      <View
+        style={[
+          styles.root,
+          RadioGroupStyles.container(colorPalette),
+          direction === 'horizontal' && styles.rootHorizontal,
+        ]}>
+        {children}
+      </View>
+    </RadioGroupContext.Provider>
+  )
+}
+
+type PublicItemProps = {
+  value: string
+  children: React.ReactNode
+}
+
+function Item({children, value: itemValue}: PublicItemProps) {
+  const context = useRadioGroupContext()
+  const {value, onValueChange, colorPalette, variant, size} = context
+  const isSelected = value === itemValue
+
+  RadioGroupStyles.useVariants({
+    variant,
+    size,
+    checked: isSelected,
+  })
+
+  const childrenWithValue = React.Children.map(children, child => {
+    if (React.isValidElement(child)) {
+      return React.cloneElement(child as React.ReactElement<any>, {
+        itemValue,
+        isSelected,
+      })
+    }
+    return child
+  })
+
+  return (
+    <Pressable
+      style={[styles.item, RadioGroupStyles.item(colorPalette)]}
+      onPress={() => onValueChange(itemValue)}
+      accessibilityRole="radio"
+      accessibilityState={{checked: isSelected}}>
+      {childrenWithValue}
+    </Pressable>
+  )
+}
+
+function Indicator({
+  ...props
+}: Partial<RadioGroupVariants> & {itemValue?: string}) {
+  const {
+    itemValue,
+    value,
+    variant,
+    size,
+    colorPalette = 'accent',
+  } = {
+    ...useRadioGroupContext(),
+    ...props,
+  }
+  const isSelected = value === itemValue
+  RadioGroupStyles.useVariants({
+    variant,
+    size,
+    checked: isSelected,
+  })
+
+  return (
+    <View style={RadioGroupStyles.control(colorPalette)}>
+      <View style={RadioGroupStyles.indicator(colorPalette)} />
+    </View>
+  )
+}
+
+function ItemText({
+  children,
+  ...props
+}: {
+  children: React.ReactNode
+  itemValue?: string
+}) {
+  const {
+    value,
+    itemValue,
+    variant,
+    size,
+    colorPalette = 'accent',
+  } = {
+    ...useRadioGroupContext(),
+    ...props,
+  }
+  const isSelected = value === itemValue
+  RadioGroupStyles.useVariants({
+    variant,
+    size,
+    checked: isSelected,
+  })
+
+  return (
+    <Text style={[RadioGroupStyles.itemText(colorPalette)]}>{children}</Text>
+  )
+}
+
+const styles = StyleSheet.create({
+  root: {
+    flexDirection: 'column',
+  },
+  rootHorizontal: {
+    flexDirection: 'row',
+  },
+  item: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+})
+
+export const RadioGroup = {
+  Root,
+  Item,
+  Indicator,
+  ItemText,
+}

package/lib/components/ReText.tsx

@@ -1,28 +1,38 @@
-import type { StyleProp, TextInputProps, TextStyle } from 'react-native';
-import { TextInput } from 'react-native';
-import Animated, { useAnimatedProps } from 'react-native-reanimated';
-import { StyleSheet } from 'react-native-unistyles';
-import { TextSemanticSizes } from '../style/types';
-import reTextTokens from '../theme/ReText.recipe';
+import type {StyleProp, TextInputProps, TextStyle} from 'react-native'
+import {TextInput} from 'react-native'
+import Animated, {SharedValue, useAnimatedProps} from 'react-native-reanimated'
+import {StyleSheet, UnistylesVariants} from 'react-native-unistyles'
+import {
+  PalettesWithNestedKeys,
+  TextSemanticSizes,
+  ThemeColors,
+} from '../style/varia/types'
+import {TextStyles, DefaultTextVariants} from '../theme/Text.recipe'
+import {useMemo} from 'react'
+import {extractThemeColor} from '../style/varia/utils'
 
-Animated.addWhitelistedNativeProps({ text: true });
+type ReTextVariants = UnistylesVariants<typeof TextStyles>
 
-export interface TextProps extends Omit<TextInputProps, 'value' | 'style'> {
-  text: Animated.SharedValue<string>;
-  as?: TextSemanticSizes;
-  fontSize?: number | undefined;
-  color?: string | undefined;
-  style?: TextStyle;
-  children?: React.ReactNode;
-  numberOfLines?: number;
-  adjustsFontSizeToFit?: boolean;
-  // style?: Animated.AnimateProps<RNTextProps>['style'];
-  mixins?: StyleProp<TextStyle> | StyleProp<TextStyle>[];
-}
+type TextProps = ReTextVariants &
+  Omit<TextInputProps, 'value' | 'style'> & {
+    colorPalette?: PalettesWithNestedKeys
+    text: SharedValue<string>
+    as?: TextSemanticSizes
+    fontSize?: number | undefined
+    color?: ThemeColors
+    style?: TextStyle
+    children?: React.ReactNode
+    numberOfLines?: number
+    adjustsFontSizeToFit?: boolean
+    mixins?: StyleProp<TextStyle> | StyleProp<TextStyle>[]
+  }
 
-const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
+const AnimatedTextInput = Animated.createAnimatedComponent(TextInput)
 
 const ReText = ({
+  colorPalette = 'accent',
+  variant,
+  size = DefaultTextVariants.size,
   as = 'body',
   fontSize,
   color,
@@ -31,94 +41,50 @@ const ReText = ({
   mixins,
   ...rest
 }: TextProps) => {
+  TextStyles.useVariants({
+    variant,
+    size,
+  })
 
-  styles.useVariants({
-    as,
-  });
+  const initialValue = useMemo(() => text.value, [text])
 
   const animatedProps = useAnimatedProps(() => {
     return {
       text: text.value,
-    } as any;
-  });
+    } as any
+  })
   return (
     <AnimatedTextInput
       underlineColorAndroid="transparent"
       multiline={true}
       editable={false}
-      value={text.value}
+      value={initialValue}
       style={[
-        styles.text(fontSize, color, reTextTokens.defaultProps),
-        style,
+        TextStyles.text(colorPalette),
+        styles.text(fontSize, color),
+        style && style,
         mixins && mixins,
       ]}
       onStartShouldSetResponder={() => true}
       {...rest}
-      {...{ animatedProps }}
+      {...{animatedProps}}
     />
-  );
-};
+  )
+}
 
-const styles = StyleSheet.create((theme) => ({
-  text: (
-    fontSize: number | undefined,
-    color: string | undefined,
-    defaultProps
-  ) => ({
+const styles = StyleSheet.create(theme => ({
+  text: (fontSize?: number, color?: string) => ({
     verticalAlign: 'bottom',
     padding: 0,
-    //@ts-ignore
-    fontSize: theme.fontSizes.xxl,
+    ...(color && {
+      color: extractThemeColor(color, theme),
+    }),
+    ...(fontSize && {fontSize}),
     textAlign: 'left',
-    color: color || defaultProps.color,
-    variants: {
-      as: {
-        h1: {
-          //@ts-ignore
-          fontSize: fontSize || theme.fontSizes.xxl,
-        },
-        h2: {
-          //@ts-ignore
-          fontSize: fontSize || theme.fontSizes.xl,
-        },
-        h3: {
-          //@ts-ignore
-          fontSize: fontSize || theme.fontSizes.lg,
-        },
-        h4: {
-          //@ts-ignore
-          fontSize: fontSize || theme.fontSizes.md,
-        },
-        h5: {
-          //@ts-ignore
-          fontSize: fontSize || theme.fontSizes.sm,
-        },
-        h6: {
-          //@ts-ignore
-          fontSize: fontSize || theme.fontSizes.xs,
-        },
-        h7: {
-          //@ts-ignore
-          fontSize: fontSize || theme.fontSizes.xs,
-        },
-        h8: {
-          //@ts-ignore
-          fontSize: fontSize || theme.fontSizes.xxs,
-        },
-        h9: {
-          //@ts-ignore
-          fontSize: fontSize || theme.fontSizes.xxs,
-        },
-        body: {
-          //@ts-ignore
-          fontSize: fontSize || theme.fontSizes.md,
-        },
-      },
-    },
   }),
-  customStyle: (style) => ({
+  customStyle: style => ({
     ...style,
   }),
-}));
+}))
 
-export default ReText;
+export default ReText