chore: improve radio, select and checkbox components

Author: MateuszRostkowski

src/components/molecules/Field/Radio.tsx

@@ -2,23 +2,13 @@ import {
   FormErrorMessage,
   FormLabel,
   Box,
-  Touchable,
-  Text,
   TouchableRef,
+  RadioButton,
 } from '@baca/design-system/components'
-import { forwardRef, useCallback, useMemo } from 'react'
+import { forwardRef, useMemo } from 'react'
 
 import { FieldRadioProps } from './types'
 
-const radioSizes = {
-  sm: {
-    boxSize: 4,
-  },
-  md: {
-    boxSize: 5,
-  },
-} as const
-
 export const Radio = forwardRef<TouchableRef, FieldRadioProps>(
   (
     {
@@ -27,60 +17,32 @@ export const Radio = forwardRef<TouchableRef, FieldRadioProps>(
       radioOptions,
       errorMessage,
       isError,
-      size = 'sm',
+      size = 'md',
       onChange,
       label,
       labelStyle,
       isDisabled,
     },
     ref
   ) => {
-    const checkboxSize = useMemo(() => radioSizes[size], [size])
-
-    const getBorderColor = useCallback(
-      (isSelected: boolean): ColorNames | undefined => {
-        if (isDisabled) {
-          return 'border.disabled'
-        }
-        if (isError) {
-          return 'border.error'
-        }
-
-        if (isSelected) {
-          return 'bg.brand.solid'
-        }
-
-        return 'border.primary'
-      },
-      [isDisabled, isError]
-    )
-
     const renderRadioButtons = useMemo(
       () =>
         radioOptions?.map((item: string, index: number) => {
           return (
-            <Touchable
+            <RadioButton
               ref={ref}
               key={index}
-              onPress={() => onChange(item)}
-              alignItems="center"
-              flexDirection="row"
-              height={8}
-            >
-              <Box
-                alignItems="center"
-                borderRadius={50}
-                height={checkboxSize.boxSize}
-                width={checkboxSize.boxSize}
-                justifyContent="center"
-                borderColor={getBorderColor(item === value)}
-                borderWidth={item === value ? 5 : 1}
-              />
-              <Text ml={4}>{item}</Text>
-            </Touchable>
+              isDisabled={isDisabled}
+              isError={isError}
+              isSelected={item === value}
+              onChange={() => onChange(item)}
+              pb={2}
+              label={item}
+              size={size}
+            />
           )
         }),
-      [radioOptions, ref, checkboxSize.boxSize, getBorderColor, value, onChange]
+      [radioOptions, ref, isDisabled, isError, value, size, onChange]
     )
 
     return (

src/components/molecules/Field/Select.tsx

@@ -58,7 +58,7 @@ export const Select = <T extends SelectKey>({
     <Box {...layoutProps} width="100%" mb={2}>
       <Pressable>
         <FormLabel label={label} isRequired={isRequired} labelStyle={labelStyle} />
-        <CustomSelect {...props} />
+        <CustomSelect label={label} {...props} />
         <FormErrorMessage errorMessage={errorMessage} />
       </Pressable>
     </Box>

src/components/molecules/Field/types.ts

@@ -1,10 +1,4 @@
-import {
-  CheckboxProps,
-  FormLabelProps,
-  InputProps,
-  RadioProps,
-  SelectProps,
-} from '@baca/design-system'
+import { CheckboxProps, FormLabelProps, InputProps, SelectProps } from '@baca/design-system'
 
 export type FieldInputProps = InputProps &
   FormLabelProps & {
@@ -14,14 +8,18 @@ export type FieldInputProps = InputProps &
     onFocus?: () => void
   }
 
-export type FieldRadioProps = RadioProps &
-  FormLabelProps & {
-    radioOptions?: string[]
-    errorMessage?: string
-    isInvalid?: boolean
-    isDisabled?: boolean
-    name: string
-  }
+export type FieldRadioProps = FormLabelProps & {
+  radioOptions?: string[]
+  errorMessage?: string
+  isInvalid?: boolean
+  isDisabled?: boolean
+  name: string
+  onChange: (val: string) => void
+  label?: string
+  isError?: boolean
+  value?: string | number
+  size?: 'sm' | 'md'
+}
 
 export type FieldSelectProps<T> = SelectProps<T> &
   FormLabelProps & {

src/design-system/components/Checkbox.tsx

@@ -1,6 +1,7 @@
 import { forwardRef, useCallback, useMemo } from 'react'
 import { TouchableOpacity, StyleSheet } from 'react-native'
 
+import { Box } from './Box'
 import { Center } from './Center'
 import { Icon } from './Icon'
 import { Text } from './Text'
@@ -32,8 +33,9 @@ export const Checkbox = forwardRef<TouchableOpacity, CheckboxProps>(
       isChecked,
       isError,
       onChange,
-      size = 'sm',
+      size = 'md',
       value,
+      pb,
       ...props
     },
     ref
@@ -80,28 +82,30 @@ export const Checkbox = forwardRef<TouchableOpacity, CheckboxProps>(
     }, [isChecked, isError, disabled])
 
     return (
-      <TouchableOpacity
-        {...{ disabled, hitSlop, ref }}
-        activeOpacity={0.5}
-        onPress={handleValueChange}
-        style={styles.mainContainer}
-      >
-        <Center
-          bg={bgColor}
-          borderColor={borderColor}
-          borderRadius={4}
-          borderWidth={1}
-          height={checkboxSize.boxSize}
-          mr={2}
-          width={checkboxSize.boxSize}
-          {...{ ...props }}
+      <Box pb={pb}>
+        <TouchableOpacity
+          {...{ disabled, hitSlop, ref }}
+          activeOpacity={0.5}
+          onPress={handleValueChange}
+          style={styles.mainContainer}
         >
-          {isChecked ? (
-            <Icon color={iconColor} name="check-line" size={checkboxSize.iconSize} />
-          ) : null}
-        </Center>
-        <Text.SmRegular>{checkboxText}</Text.SmRegular>
-      </TouchableOpacity>
+          <Center
+            bg={bgColor}
+            borderColor={borderColor}
+            borderRadius={4}
+            borderWidth={1}
+            height={checkboxSize.boxSize}
+            mr={2}
+            width={checkboxSize.boxSize}
+            {...{ ...props }}
+          >
+            {isChecked ? (
+              <Icon color={iconColor} name="check-line" size={checkboxSize.iconSize} />
+            ) : null}
+          </Center>
+          <Text.SmRegular>{checkboxText}</Text.SmRegular>
+        </TouchableOpacity>
+      </Box>
     )
   }
 )