Merge pull request #71 from binarapps/chore/overall-improvments

CHORE: Refactor form components

src/components/LanguagePicker.tsx

@@ -2,6 +2,7 @@ import { theme } from '@baca/design-system'
 import { Icon, Row, Text } from '@baca/design-system/components'
 import { Touchable, TouchableProps } from '@baca/design-system/components/Touchables/Touchable'
 import { useCallback, useTranslation } from '@baca/hooks'
+import languages from '@baca/i18n/languages.json'
 import { StyleSheet } from 'react-native'
 import Animated, {
   useAnimatedStyle,
@@ -11,7 +12,6 @@ import Animated, {
 } from 'react-native-reanimated'
 
 import { Menu, MenuProps } from './organisms/Menu'
-import languages from '../../assets/languages.json'
 
 type LanguagePickerProps = {
   isWeb?: boolean

src/components/README.md

@@ -227,7 +227,7 @@ _type_: `string` | `undefined`
 import { Field } from '@baca/components'
 
 const MyComponent: React.FC = () => (
-  <Field.Checkbox isRequired autoCapitalize="none" label="Confirm" />
+  <Field.CheckboxGroup isRequired autoCapitalize="none" label="Confirm" />
 )
 
 export default MyComponent
@@ -353,7 +353,7 @@ const MyComponent: React.FC = () => {
   })
 
   return (
-    <ControlledField.Checkbox
+    <ControlledField.CheckboxGroup
       control={control}
       errors={errors}
       label="Confirm"

src/components/molecules/Field/Checkbox.tsx

@@ -1,70 +1,17 @@
-import {
-  Box,
-  Checkbox as CustomCheckbox,
-  FormErrorMessage,
-  FormLabel,
-  Spacer,
-} from '@baca/design-system/components'
-import { Fragment, useMemo } from 'react'
+import { CheckboxButton, Box, FormErrorMessage } from '@baca/design-system'
 
 import { FieldCheckboxProps } from './types'
 
 export const Checkbox = ({
-  isInvalid,
   isRequired,
+  labelStyle,
   isDisabled,
-  label,
   errorMessage,
-  labelStyle,
-  checkboxes,
-  onChange,
-  value,
-  checkboxText,
   ...props
 }: FieldCheckboxProps) => {
-  const renderCheckboxes = useMemo(() => {
-    return checkboxes?.map((item: string, index: number) => {
-      const handleChange = () => {
-        if (Array.isArray(value)) {
-          if (!value?.includes(item)) {
-            const newArr = [...value, item]
-            onChange(newArr)
-          } else {
-            const newArr = value.filter((el) => el !== item)
-            onChange(newArr)
-          }
-        }
-      }
-      return (
-        <Fragment key={index}>
-          <CustomCheckbox
-            onChange={handleChange}
-            key={index}
-            checkboxText={item}
-            value={value}
-            {...(Array.isArray(value) && { isChecked: value?.includes(item) })}
-            {...props}
-          />
-          <Spacer y={2} />
-        </Fragment>
-      )
-    })
-  }, [checkboxes, value, props, onChange])
-
   return (
     <Box gap={1}>
-      <FormLabel label={label} isRequired={isRequired} labelStyle={labelStyle} />
-      {checkboxes ? (
-        renderCheckboxes
-      ) : (
-        <CustomCheckbox
-          onChange={onChange}
-          value={value}
-          checkboxText={checkboxText}
-          {...(typeof value === 'boolean' && { isChecked: value })}
-          {...props}
-        />
-      )}
+      <CheckboxButton {...props} />
       <FormErrorMessage errorMessage={errorMessage} />
     </Box>
   )

src/components/molecules/Field/CheckboxGroup.tsx

@@ -0,0 +1,62 @@
+import {
+  Box,
+  CheckboxButton,
+  FormErrorMessage,
+  FormLabel,
+  Spacer,
+} from '@baca/design-system/components'
+import { Fragment, useMemo } from 'react'
+
+import { FieldCheckboxGroupProps } from './types'
+
+export const CheckboxGroup = <T extends string>({
+  items,
+  onSelectItem,
+  isInvalid,
+  isRequired,
+  isDisabled,
+  label,
+  errorMessage,
+  selectedItems,
+  labelStyle,
+  ...props
+}: FieldCheckboxGroupProps<T>) => {
+  const renderCheckboxes = useMemo(() => {
+    return items.map((item, index) => {
+      const handleChange = () => {
+        if (Array.isArray(selectedItems)) {
+          if (!selectedItems?.includes(item.value)) {
+            const newArr = [...selectedItems, item.value]
+            onSelectItem(newArr)
+          } else {
+            const newArr = selectedItems.filter((el) => el !== item.value)
+            onSelectItem(newArr)
+          }
+        }
+      }
+
+      return (
+        <Fragment key={index}>
+          <CheckboxButton
+            onChange={handleChange}
+            key={index}
+            label={item.label}
+            {...(Array.isArray(selectedItems) && {
+              isSelected: selectedItems?.includes(item.value),
+            })}
+            {...props}
+          />
+          <Spacer y={2} />
+        </Fragment>
+      )
+    })
+  }, [items, selectedItems, props, onSelectItem])
+
+  return (
+    <Box gap={1}>
+      <FormLabel label={label} isRequired={isRequired} labelStyle={labelStyle} />
+      {renderCheckboxes}
+      <FormErrorMessage errorMessage={errorMessage} />
+    </Box>
+  )
+}

src/components/molecules/Field/RadioGroup.tsx

@@ -0,0 +1,46 @@
+import { FormErrorMessage, FormLabel, Box, RadioButton } from '@baca/design-system/components'
+import { useMemo } from 'react'
+
+import { RadioGroupProps } from './types'
+
+export const RadioGroup = <T extends string>({
+  selectedItem,
+  items,
+  onSelectItem,
+  isRequired,
+  errorMessage,
+  isError,
+  size = 'md',
+  label,
+  labelStyle,
+  isDisabled,
+  radioRef,
+}: RadioGroupProps<T>) => {
+  const renderRadioButtons = useMemo(
+    () =>
+      items?.map((item, index) => {
+        return (
+          <RadioButton
+            ref={radioRef}
+            key={index}
+            isDisabled={isDisabled}
+            isError={isError}
+            isSelected={item.value === selectedItem}
+            onChange={() => onSelectItem(item.value)}
+            pb={2}
+            label={item.label}
+            size={size}
+          />
+        )
+      }),
+    [items, radioRef, isDisabled, isError, selectedItem, size, onSelectItem]
+  )
+
+  return (
+    <Box width="100%" mb={2}>
+      <FormLabel label={label} isRequired={isRequired} labelStyle={labelStyle} />
+      {renderRadioButtons}
+      <FormErrorMessage errorMessage={errorMessage} />
+    </Box>
+  )
+}

src/components/molecules/Field/index.tsx

@@ -1,14 +1,16 @@
 import React, { PropsWithChildren } from 'react'
 
 import { Checkbox } from './Checkbox'
+import { CheckboxGroup } from './CheckboxGroup'
 import { Input } from './Input'
-import { Radio } from './Radio'
+import { RadioGroup } from './RadioGroup'
 import { Select } from './Select'
 
 type FieldComposition = React.FC<PropsWithChildren> & {
   Input: typeof Input
+  CheckboxGroup: typeof CheckboxGroup
   Checkbox: typeof Checkbox
-  Radio: typeof Radio
+  RadioGroup: typeof RadioGroup
   Select: typeof Select
 }
 
@@ -17,8 +19,9 @@ const Field: FieldComposition = ({ children }) => {
 }
 
 Field.Input = Input
+Field.CheckboxGroup = CheckboxGroup
 Field.Checkbox = Checkbox
-Field.Radio = Radio
+Field.RadioGroup = RadioGroup
 Field.Select = Select
 
 export { Field }