From 39bc31727073bcac368d6d07af4fd25a8675b5cd Mon Sep 17 00:00:00 2001 From: Mateusz Rostkowski Date: Fri, 19 Apr 2024 16:48:22 +0200 Subject: [PATCH 1/8] chore: add gap to checkboxes list --- src/components/molecules/Field/Checkbox.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/molecules/Field/Checkbox.tsx b/src/components/molecules/Field/Checkbox.tsx index c8585be8..9791bc77 100644 --- a/src/components/molecules/Field/Checkbox.tsx +++ b/src/components/molecules/Field/Checkbox.tsx @@ -52,7 +52,7 @@ export const Checkbox = ({ }, [checkboxes, value, props, onChange]) return ( - + {checkboxes ? ( renderCheckboxes From 8eac05005218102e9e557f28b44030f0005b0ddb Mon Sep 17 00:00:00 2001 From: Mateusz Rostkowski Date: Fri, 19 Apr 2024 16:55:18 +0200 Subject: [PATCH 2/8] chore: improve radio button styles --- src/components/molecules/Field/Radio.tsx | 51 ++++++++++++++++-------- 1 file changed, 34 insertions(+), 17 deletions(-) diff --git a/src/components/molecules/Field/Radio.tsx b/src/components/molecules/Field/Radio.tsx index deb40ee7..d1bfb7f1 100644 --- a/src/components/molecules/Field/Radio.tsx +++ b/src/components/molecules/Field/Radio.tsx @@ -10,6 +10,15 @@ import { forwardRef, useCallback, useMemo } from 'react' import { FieldRadioProps } from './types' +const radioSizes = { + sm: { + boxSize: 4, + }, + md: { + boxSize: 5, + }, +} as const + export const Radio = forwardRef( ( { @@ -18,6 +27,7 @@ export const Radio = forwardRef( radioOptions, errorMessage, isError, + size = 'sm', onChange, label, labelStyle, @@ -25,13 +35,24 @@ export const Radio = forwardRef( }, ref ) => { - const borderColor: ColorNames = useMemo( - () => (isError ? 'border.error' : isDisabled ? 'border.disabled' : 'border.brand'), - [isError, isDisabled] - ) - const bgColor = useCallback( - (item: string): ColorNames => (item === value ? 'bg.brand.primary' : 'bg.tertiary'), - [value] + 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( @@ -49,21 +70,17 @@ export const Radio = forwardRef( - {item === value ? ( - - ) : null} - + borderColor={getBorderColor(item === value)} + borderWidth={item === value ? 5 : 1} + /> {item} ) }), - [radioOptions, value, bgColor, borderColor, onChange, ref] + [radioOptions, ref, checkboxSize.boxSize, getBorderColor, value, onChange] ) return ( From b027537c654cec633516e492be276f965ecd22a9 Mon Sep 17 00:00:00 2001 From: Mateusz Rostkowski Date: Fri, 19 Apr 2024 16:56:37 +0200 Subject: [PATCH 3/8] chore: improve checkbox styles --- src/design-system/components/Checkbox.tsx | 76 +++++++++++------------ src/design-system/components/types.ts | 1 + 2 files changed, 37 insertions(+), 40 deletions(-) diff --git a/src/design-system/components/Checkbox.tsx b/src/design-system/components/Checkbox.tsx index e2be0237..17f39687 100644 --- a/src/design-system/components/Checkbox.tsx +++ b/src/design-system/components/Checkbox.tsx @@ -1,7 +1,7 @@ import { forwardRef, useCallback, useMemo } from 'react' -import { View, Pressable, StyleSheet } from 'react-native' +import { View, TouchableOpacity, StyleSheet } from 'react-native' -import { Box } from './Box' +import { Center } from './Center' import { Icon } from './Icon' import { Text } from './Text' import { CheckboxProps } from './types' @@ -14,16 +14,16 @@ const hitSlop = { const checkboxSizes = { sm: { - boxSize: 16, + boxSize: 4, iconSize: 12, }, md: { - boxSize: 20, + boxSize: 5, iconSize: 14, }, } as const -export const Checkbox = forwardRef( +export const Checkbox = forwardRef( ( { checkboxes, @@ -52,66 +52,62 @@ export const Checkbox = forwardRef( return 'fg.white' }, [disabled, value]) - const bgColor = useMemo(() => { - if (!value) { - return 'fg.white' - } + const bgColor = useMemo(() => { if (disabled) { return 'bg.disabled_subtle' } + if (!isChecked) { + return undefined + } + return 'bg.brand.solid' - }, [disabled, value]) + }, [disabled, isChecked]) - const borderColor = useMemo( - () => - disabled - ? 'border.disabled' - : isError - ? 'border.error' - : value - ? 'bg.brand.solid' - : 'border.primary', - [value, isError, disabled] - ) + const borderColor = useMemo(() => { + if (disabled) { + return 'border.disabled' + } + if (isError) { + return 'border.error' + } + + if (isChecked) { + return 'bg.brand.solid' + } + + return 'border.primary' + }, [isChecked, isError, disabled]) return ( - - {isChecked ? ( ) : null} - + {checkboxText} - + ) } ) const styles = StyleSheet.create({ - checkbox: { - alignItems: 'center', - borderRadius: 4, - borderWidth: 1, - justifyContent: 'center', - marginRight: 8, - }, mainContainer: { alignItems: 'center', flexDirection: 'row', diff --git a/src/design-system/components/types.ts b/src/design-system/components/types.ts index e75d1af2..fb1e7b57 100644 --- a/src/design-system/components/types.ts +++ b/src/design-system/components/types.ts @@ -214,6 +214,7 @@ export type RadioProps = { radioOptions?: string[] isError?: boolean value?: string | number + size?: 'sm' | 'md' } export type CheckboxProps = ViewProps & { From 249a426708652c636aab075f562287ebeac5365f Mon Sep 17 00:00:00 2001 From: Mateusz Rostkowski Date: Fri, 19 Apr 2024 16:58:40 +0200 Subject: [PATCH 4/8] chore: improve select styles --- src/design-system/components/Select.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/design-system/components/Select.tsx b/src/design-system/components/Select.tsx index 9c156485..38396698 100644 --- a/src/design-system/components/Select.tsx +++ b/src/design-system/components/Select.tsx @@ -168,7 +168,7 @@ export const Select = ({ styles.textInput, isError ? { borderColor: colors.text.error.primary } - : { borderColor: colors.border.brand }, + : { borderColor: colors.border.primary }, ]} color={inputColor} > From d99543fb5ecc62ca9dbb37a752fdf3813ff4a907 Mon Sep 17 00:00:00 2001 From: Mateusz Rostkowski Date: Fri, 19 Apr 2024 17:26:58 +0200 Subject: [PATCH 5/8] fix: add translations to bottom tabs --- src/i18n/translations/en.json | 8 ++++++++ src/i18n/translations/pl.json | 8 ++++++++ .../tabNavigator/components/BottomBar.tsx | 5 +++-- .../tabNavigator/components/SideBar.tsx | 5 +++-- src/navigation/tabNavigator/navigation-config.ts | 16 +++++++++------- src/types/i18next.d.ts | 7 ++++++- 6 files changed, 37 insertions(+), 12 deletions(-) diff --git a/src/i18n/translations/en.json b/src/i18n/translations/en.json index 0e408ac1..01ddb9e1 100644 --- a/src/i18n/translations/en.json +++ b/src/i18n/translations/en.json @@ -16,6 +16,14 @@ "confirm": "Yes, delete" } }, + "bottom_tabs": { + "home": "Home", + "categories": "Categories", + "example": "Example", + "settings": "Settings", + "profile": "Profile", + "details": "Details" + }, "common": { "add": "Add", "back": "Back", diff --git a/src/i18n/translations/pl.json b/src/i18n/translations/pl.json index 6598e41b..6ae9f1c5 100644 --- a/src/i18n/translations/pl.json +++ b/src/i18n/translations/pl.json @@ -16,6 +16,14 @@ "confirm": "Tak, usuń" } }, + "bottom_tabs": { + "home": "Home", + "categories": "Kategorie", + "example": "Przykłady", + "settings": "Ustawienia", + "profile": "Profil", + "details": "Detale" + }, "common": { "add": "Dodaj", "back": "Cofnij", diff --git a/src/navigation/tabNavigator/components/BottomBar.tsx b/src/navigation/tabNavigator/components/BottomBar.tsx index 7acce626..f1e5063c 100644 --- a/src/navigation/tabNavigator/components/BottomBar.tsx +++ b/src/navigation/tabNavigator/components/BottomBar.tsx @@ -1,5 +1,5 @@ import { Column, Icon, Text } from '@baca/design-system' -import { useTheme } from '@baca/hooks' +import { useTheme, useTranslation } from '@baca/hooks' import cssStyles from '@baca/styles' import { Platform, StyleSheet, View } from 'react-native' import { useSafeAreaInsets } from 'react-native-safe-area-context' @@ -10,6 +10,7 @@ import { cns } from '../utils' export function BottomBar({ visible }: { visible: boolean }) { const { colors } = useTheme() + const { t } = useTranslation() return ( - {tab.displayedName} + {t(tab.displayedNameTx)} )} diff --git a/src/navigation/tabNavigator/components/SideBar.tsx b/src/navigation/tabNavigator/components/SideBar.tsx index d69f95b0..12167d40 100644 --- a/src/navigation/tabNavigator/components/SideBar.tsx +++ b/src/navigation/tabNavigator/components/SideBar.tsx @@ -1,4 +1,4 @@ -import { useSafeAreaInsets, useTheme } from '@baca/hooks' +import { useSafeAreaInsets, useTheme, useTranslation } from '@baca/hooks' import { signOut } from '@baca/store/auth' import cssStyles from '@baca/styles' import { Platform, StyleSheet, View } from 'react-native' @@ -13,6 +13,7 @@ const NAV_MEDIUM_WIDTH = 244 export function SideBar({ visible }: { visible: boolean }) { const { colors } = useTheme() + const { t } = useTranslation() const { top } = useSafeAreaInsets() const isLarge = useUniversalWidth(1264) @@ -73,7 +74,7 @@ export function SideBar({ visible }: { visible: boolean }) { {upperSideTabs.map((tab) => ( - {tab.displayedName} + {t(tab.displayedNameTx)} ))} diff --git a/src/navigation/tabNavigator/navigation-config.ts b/src/navigation/tabNavigator/navigation-config.ts index 1ca342d7..730656a1 100644 --- a/src/navigation/tabNavigator/navigation-config.ts +++ b/src/navigation/tabNavigator/navigation-config.ts @@ -1,7 +1,9 @@ +import { I18nKeys } from '@baca/types/i18next' import { IconNames } from '@baca/types/icon' type Tab = { - displayedName: string + // This will be passed to translations object and translated in the app + displayedNameTx: I18nKeys icon: IconNames iconFocused: IconNames id: string @@ -13,35 +15,35 @@ type Tabs = Tab[] // name with '/' at the begging will not be resolved as 'bottom tab', will be as usual screen export const upperSideTabs: Tabs = [ { - displayedName: 'Home', + displayedNameTx: 'bottom_tabs.home', icon: 'home-5-line', iconFocused: 'home-5-fill', id: 'home', name: 'home', }, { - displayedName: 'Categories', + displayedNameTx: 'bottom_tabs.categories', icon: 'stack-line', iconFocused: 'stack-fill', id: 'categories', name: 'categories', }, { - displayedName: 'Example', + displayedNameTx: 'bottom_tabs.example', icon: 'aliens-line', iconFocused: 'aliens-fill', id: 'example', name: 'example', }, { - displayedName: 'Settings', + displayedNameTx: 'bottom_tabs.settings', icon: 'settings-2-line', iconFocused: 'settings-2-fill', id: 'settings', name: 'settings', }, { - displayedName: 'Profile', + displayedNameTx: 'bottom_tabs.profile', icon: 'user-3-line', iconFocused: 'user-3-fill', id: 'profile', @@ -50,7 +52,7 @@ export const upperSideTabs: Tabs = [ // In case you want to navigate to screen with params you can do this like this // { - // displayedName: 'Details', + // displayedNameTx: 'bottom_tabs.details', // icon: 'baidu-line', // iconFocused: 'baidu-fill', // id: 'details', diff --git a/src/types/i18next.d.ts b/src/types/i18next.d.ts index 15a4de8e..5fa4cd31 100644 --- a/src/types/i18next.d.ts +++ b/src/types/i18next.d.ts @@ -1,7 +1,9 @@ -import 'i18next' +import { ParseKeys } from 'i18next' import english from '@baca/i18n/translations/en.json' +import polish from '@baca/i18n/translations/pl.json' type EN = typeof english +type PL = typeof polish declare module 'i18next' { interface CustomTypeOptions { @@ -9,6 +11,9 @@ declare module 'i18next' { returnNull: false resources: { en: EN + pl: PL } } } + +export type I18nKeys = ParseKeys From 92433a7bc1c841cf1aca94840af9e96065260e40 Mon Sep 17 00:00:00 2001 From: Mateusz Rostkowski Date: Fri, 19 Apr 2024 17:35:07 +0200 Subject: [PATCH 6/8] chore: make hitSlop bigger on bottom tabs links --- .../tabNavigator/components/TabBarItemWrapper.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/navigation/tabNavigator/components/TabBarItemWrapper.tsx b/src/navigation/tabNavigator/components/TabBarItemWrapper.tsx index 2ac29c1e..b286cc6f 100644 --- a/src/navigation/tabNavigator/components/TabBarItemWrapper.tsx +++ b/src/navigation/tabNavigator/components/TabBarItemWrapper.tsx @@ -25,19 +25,23 @@ export function TabBarItemWrapper({ const focused = useIsTabSelected(id) if (onPress) { - return {(props) => children?.({ ...props, focused })} + return ( + + {(props) => children?.({ ...props, focused })} + + ) } if (name.startsWith('/') || name.startsWith('.')) { return ( - {(props) => children?.({ ...props, focused })} + {(props) => children?.({ ...props, focused })} ) } return ( - {(props) => children?.({ ...props, focused })} + {(props) => children?.({ ...props, focused })} ) } From 94856adc4327e97f6538e383453e3321254109a6 Mon Sep 17 00:00:00 2001 From: Mateusz Rostkowski Date: Wed, 24 Apr 2024 11:43:22 +0200 Subject: [PATCH 7/8] chore: fixes after code review --- src/design-system/components/Checkbox.tsx | 40 ++++++++++------------- 1 file changed, 17 insertions(+), 23 deletions(-) diff --git a/src/design-system/components/Checkbox.tsx b/src/design-system/components/Checkbox.tsx index 17f39687..5bf6b72e 100644 --- a/src/design-system/components/Checkbox.tsx +++ b/src/design-system/components/Checkbox.tsx @@ -1,5 +1,5 @@ import { forwardRef, useCallback, useMemo } from 'react' -import { View, TouchableOpacity, StyleSheet } from 'react-native' +import { TouchableOpacity, StyleSheet } from 'react-native' import { Center } from './Center' import { Icon } from './Icon' @@ -82,26 +82,25 @@ export const Checkbox = forwardRef( return ( - -
- {isChecked ? ( - - ) : null} -
- {checkboxText} - +
+ {isChecked ? ( + + ) : null} +
+ {checkboxText} ) } @@ -109,13 +108,8 @@ export const Checkbox = forwardRef( const styles = StyleSheet.create({ mainContainer: { - alignItems: 'center', - flexDirection: 'row', - }, - row: { alignItems: 'center', display: 'flex', flexDirection: 'row', - justifyContent: 'center', }, }) From 7a7dfb0b8fc871133de47555e2a92386e1cfb3d5 Mon Sep 17 00:00:00 2001 From: Mateusz Rostkowski Date: Wed, 24 Apr 2024 11:43:57 +0200 Subject: [PATCH 8/8] feat: add radio and checkbox to components screen --- src/screens/ComponentsScreen.tsx | 49 ++++++++++++++++++++++++++++++-- 1 file changed, 47 insertions(+), 2 deletions(-) diff --git a/src/screens/ComponentsScreen.tsx b/src/screens/ComponentsScreen.tsx index f3e9de42..05bf10e9 100644 --- a/src/screens/ComponentsScreen.tsx +++ b/src/screens/ComponentsScreen.tsx @@ -1,6 +1,16 @@ import { SocialButton } from '@baca/components' -import { Loader, Box, Text, Button, Center, ScrollView, Display } from '@baca/design-system' -import { useCallback, useScreenOptions, useTranslation } from '@baca/hooks' +import { Radio } from '@baca/components/molecules/Field/Radio' +import { + Loader, + Box, + Text, + Button, + Center, + ScrollView, + Display, + Checkbox, +} from '@baca/design-system' +import { useBoolean, useCallback, useScreenOptions, useState, useTranslation } from '@baca/hooks' import { noop, showInformationToast } from '@baca/utils' import * as Linking from 'expo-linking' @@ -27,6 +37,37 @@ const loaderVariants = [ }, ] as const +const TestCheckbox = () => { + const { t } = useTranslation() + const [isChecked, setIsChecked] = useBoolean() + + return ( + + ) +} + +const AGES = ['18-30', '31-40', '41-50'] +const TextRadioButtons = () => { + const { t } = useTranslation() + const [selectedRadio, setSelectedRadio] = useState() + + return ( + + ) +} + export const ComponentsScreen = (): JSX.Element => { const { t } = useTranslation() @@ -77,6 +118,10 @@ export const ComponentsScreen = (): JSX.Element => { + + + +