set divider in bottom sheet as optional; add iconConfig; move types to separate file

Author: vercia

src/design-system/bottomSheets/BottomSheet.tsx

@@ -6,30 +6,25 @@ import {
   BottomSheetBackdropProps,
   BottomSheetView,
 } from '@gorhom/bottom-sheet'
-import { RefObject, useCallback } from 'react'
+import { useCallback } from 'react'
 import { Dimensions } from 'react-native'
 
 import { BottomSheetScrollView } from './BootomSheetScrollables'
 import { BottomSheetHeader } from './BottomSheetHeader'
+import { BottomSheetProps } from './types'
 
 const screenHeight = Dimensions.get('screen').height
 
-type Props = {
-  bottomSheetRef: RefObject<BottomSheetModal>
-  children: JSX.Element | JSX.Element[]
-  title?: string
-  showCloseButton?: boolean
-  numberOfTitleLines?: number
-}
-
 export { BottomSheetScrollView }
 export const BottomSheet = ({
   children,
   title,
+  iconConfig,
+  isDivider = true,
   showCloseButton = true,
   numberOfTitleLines,
   bottomSheetRef,
-}: Props) => {
+}: BottomSheetProps) => {
   const { top } = useSafeAreaInsets()
 
   const handleClose = useCallback(() => {
@@ -52,13 +47,13 @@ export const BottomSheet = ({
     >
       <BottomSheetView>
         <BottomSheetHeader
+          iconConfig={iconConfig}
           title={title}
           numberOfLines={numberOfTitleLines}
           showCloseButton={showCloseButton}
           onClose={handleClose}
         />
-        <Box pb="1px" bg="bg.brand.primary" />
-
+        {isDivider && <Box pb="1px" bg="bg.brand.primary" />}
         {children}
       </BottomSheetView>
     </BottomSheetModal>

src/design-system/bottomSheets/BottomSheet.web.tsx

@@ -1,28 +1,22 @@
 import { Modal } from '@baca/components/Modal'
 import { useBoolean, useWeb } from '@baca/hooks'
-import { BottomSheetModal } from '@gorhom/bottom-sheet'
-import { RefObject, useCallback, useImperativeHandle } from 'react'
+import { useCallback, useImperativeHandle } from 'react'
 import { ScrollView } from 'react-native'
 
 import { BottomSheetHeader } from './BottomSheetHeader'
+import { BottomSheetProps } from './types'
 import { Box } from '../components/Box'
 
-type Props = {
-  bottomSheetRef: RefObject<BottomSheetModal>
-  children: JSX.Element | JSX.Element[]
-  title?: string
-  showCloseButton?: boolean
-  numberOfTitleLines?: number
-}
-
 export const BottomSheetScrollView = ScrollView
 export const BottomSheet = ({
   children,
+  iconConfig,
+  isDivider = true,
   title,
   showCloseButton = true,
   numberOfTitleLines,
   bottomSheetRef,
-}: Props) => {
+}: BottomSheetProps) => {
   const [isOpen, setIsOpen] = useBoolean(false)
   const { webContentWidth } = useWeb()
 
@@ -63,8 +57,9 @@ export const BottomSheet = ({
           numberOfLines={numberOfTitleLines}
           showCloseButton={showCloseButton}
           onClose={setIsOpen.off}
+          iconConfig={iconConfig}
         />
-        <Box pb="1px" bg="bg.brand.primary" />
+        {isDivider && <Box pb="1px" bg="bg.brand.primary" />}
         {children}
       </Box>
     </Modal>

src/design-system/bottomSheets/BottomSheetHeader.tsx

@@ -1,3 +1,4 @@
+import { BottomSheetHeaderProps } from './types'
 import { Box } from '../components/Box'
 import { Icon } from '../components/Icon'
 import { Row } from '../components/Row'
@@ -9,22 +10,25 @@ export const BottomSheetHeader = ({
   numberOfLines = undefined,
   showCloseButton,
   onClose,
-}: {
-  title?: string
-  numberOfLines?: number
-  showCloseButton?: boolean
-  onClose?: () => void
-}) => {
+  iconConfig,
+}: BottomSheetHeaderProps) => {
   if (!showCloseButton && !title) {
     return null
   }
 
   return (
     <Row alignItems="center">
+      {iconConfig && (
+        <Box backgroundColor={iconConfig.bgColor} p={3} borderRadius={100} ml={4} mt={4}>
+          <Icon name={iconConfig.name} size={24} color={iconConfig.color} />
+        </Box>
+      )}
       <Box flex={1} px={4}>
-        <Text.MdBold numberOfLines={numberOfLines} allowFontScaling={false}>
-          {title}
-        </Text.MdBold>
+        {title && (
+          <Text.MdBold numberOfLines={numberOfLines} allowFontScaling={false}>
+            {title}
+          </Text.MdBold>
+        )}
       </Box>
       {showCloseButton && (
         <Touchable onPress={onClose} hitSlop={10} p={4} pl={8}>

src/design-system/bottomSheets/types.ts

@@ -0,0 +1,27 @@
+import { IconNames } from '@baca/types/icon'
+import { BottomSheetModal } from '@gorhom/bottom-sheet'
+import { RefObject } from 'react'
+
+export type BottomSheetIconConfigProps = {
+  name: IconNames
+  color: ColorNames
+  bgColor: ColorNames
+}
+
+export type BottomSheetProps = {
+  bottomSheetRef: RefObject<BottomSheetModal>
+  children: JSX.Element | JSX.Element[]
+  isDivider?: boolean
+  title?: string
+  showCloseButton?: boolean
+  numberOfTitleLines?: number
+  iconConfig?: BottomSheetIconConfigProps
+}
+
+export type BottomSheetHeaderProps = {
+  title?: string
+  numberOfLines?: number
+  showCloseButton?: boolean
+  onClose?: () => void
+  iconConfig?: BottomSheetIconConfigProps
+}

src/design-system/bottomSheets/useBottomSheets.tsx

@@ -2,13 +2,22 @@ import { BottomSheetModal } from '@gorhom/bottom-sheet'
 import { useCallback, useRef } from 'react'
 
 import { BottomSheet } from './BottomSheet'
+import { BottomSheetIconConfigProps } from './types'
 
-export const useBottomSheet = ({ title = '' }) => {
+export const useBottomSheet = ({ title = '', isDivider = true }) => {
   const bottomSheetRef = useRef<BottomSheetModal>(null)
 
-  const bottomSheetComponentRenderFunction = (children: JSX.Element | JSX.Element[]) => {
+  const bottomSheetComponentRenderFunction = (
+    children: JSX.Element | JSX.Element[],
+    iconConfig?: BottomSheetIconConfigProps
+  ) => {
     return (
-      <BottomSheet title={title} bottomSheetRef={bottomSheetRef}>
+      <BottomSheet
+        title={title}
+        isDivider={isDivider}
+        bottomSheetRef={bottomSheetRef}
+        iconConfig={iconConfig}
+      >
         {children}
       </BottomSheet>
     )
@@ -18,8 +27,13 @@ export const useBottomSheet = ({ title = '' }) => {
     bottomSheetRef.current?.present?.()
   }, [])
 
+  const closeBottomSheet = useCallback(() => {
+    bottomSheetRef.current?.close?.()
+  }, [])
+
   return {
     bottomSheetComponentRenderFunction,
+    closeBottomSheet,
     presentBottomSheet,
   }
 }

src/i18n/translations/en.json

@@ -234,8 +234,14 @@
     "copy_push_token": "Copy push token",
     "current_theme": "Current theme: {{theme}}",
     "sign_out": "Sign out!",
-    "selected": " - selected",
-    "remove_account": "Remove account"
+    "selected": " - selected"
+  },
+  "profile_screen": {
+    "profile": "Profile",
+    "update_your_details": "Update your personal details here.",
+    "remove_account": "Remove account",
+    "are_you_sure": "Are you sure?",
+    "remove_account_desc": "This action cannot be undone.\n\nYou will lose access to your account. If you have an active subscription you will lose access to it.\n\nPlease make sure you are certain about this action."
   },
   "sign_in_screen": {
     "do_not_have_an_account": "Don't have an account?",

src/i18n/translations/pl.json

@@ -232,8 +232,14 @@
   "settings_screen": {
     "current_theme": "Current theme: {{theme}}",
     "selected": " - wybrano",
-    "sign_out": "Wyloguj!",
-    "remove_account": "Usuń konto"
+    "sign_out": "Wyloguj!"
+  },
+  "profile_screen": {
+    "profile": "Profil",
+    "update_your_details": "Zaktualizuj swoje dane osobowe tutaj.",
+    "remove_account": "Usuń konto",
+    "are_you_sure": "Jesteś pewny/a?",
+    "remove_account_desc": "Tej akcji nie można cofnąć.\n\nUtracisz dostęp do swojego konta. Jeśli masz aktywną subskrypcję, utracisz do niej dostęp.\n\nUpewnij się, że jesteś pewien tej akcji"
   },
   "sign_in_screen": {
     "do_not_have_an_account": "Nie masz konta?",