BA-2279: mobile settings menu

packages/components/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @baseapp-frontend/components
 
+## 1.0.13
+
+### Patch Changes
+
+- Remove `ProfileSettingsComponent` Appbar, it should now use `AppbarNavigationLayout` layout when it's rendered on a page route. 
+- Updated dependencies
+  - @baseapp-frontend/design-system@1.0.6
+
 ## 1.0.12
 
 ### Patch Changes

packages/components/baseapp-frontend-imports.d.ts

@@ -9,14 +9,11 @@
  *    subpath imports, even if no file in our workspace has imported them yet.
  *  - Ensure auto-import suggestions display these subpaths immediately, without
  *    waiting for an existing import to reveal them.
- *
- * In other words, we’re “seeding” the TypeScript language service with references
- * to many subpaths in our monorepo. By listing them here, we avoid the scenario where
- * the editor only autocompletes subpaths that are already imported elsewhere.
  */
 // @baseapp-frontend/design-system
 import '@baseapp-frontend/design-system/components/common'
 import '@baseapp-frontend/design-system/components/native/appbars'
+import '@baseapp-frontend/design-system/components/native/avatars'
 import '@baseapp-frontend/design-system/components/native/buttons'
 import '@baseapp-frontend/design-system/components/native/displays'
 import '@baseapp-frontend/design-system/components/native/drawers'

packages/components/modules/profiles/native/ProfileSettingsComponent/index.tsx

@@ -1,6 +1,5 @@
 import { FC, useCallback, useRef, useState } from 'react'
 
-import { AppBar } from '@baseapp-frontend/design-system/components/native/appbars'
 import { Button } from '@baseapp-frontend/design-system/components/native/buttons'
 import { CameraIcon, ImageIcon } from '@baseapp-frontend/design-system/components/native/icons'
 import { TextInput } from '@baseapp-frontend/design-system/components/native/inputs'
@@ -246,103 +245,100 @@ const ProfileSettingsComponent: FC<ProfileSettingsComponentProps> = ({ profile:
   const hasErrorBanner = bannerImageUrl.includes('error')
 
   return (
-    <View style={styles.pageContainer}>
-      <AppBar title="Profile Settings" statusBarHeight={0} />
-      <ScrollView style={styles.scrollViewContainer}>
-        <View style={styles.container}>
-          <View style={styles.headerContainer}>
-            <View style={styles.bannerContainer}>
-              <Image
-                source={{ uri: bannerImageUrl }}
-                style={[styles.bannerImage, hasErrorBanner ? styles.errorBorder : {}]}
-              />
-              <Pressable style={styles.editIconContainer} onPress={handleEditBanner}>
-                <CameraIcon width={20} height={20} color={theme.colors.surface.default} />
-              </Pressable>
-            </View>
-            <View style={styles.profileContainer}>
-              {imageUrl ? (
-                <Image
-                  source={{ uri: imageUrl }}
-                  style={[styles.profileImage, hasErrorImage ? styles.errorBorder : {}]}
-                />
-              ) : (
-                <ImageIcon
-                  width={33}
-                  height={33}
-                  color={theme.colors.object.disabled}
-                  style={hasErrorImage ? styles.errorBorder : {}}
-                />
-              )}
-              <Pressable
-                style={[styles.editIconContainer, { bottom: 0, right: 0 }]}
-                onPress={handleEditProfile}
-              >
-                <CameraIcon width={20} height={20} color={theme.colors.surface.default} />
-              </Pressable>
-            </View>
+    <ScrollView style={styles.scrollViewContainer}>
+      <View style={styles.container}>
+        <View style={styles.headerContainer}>
+          <View style={styles.bannerContainer}>
+            <Image
+              source={{ uri: bannerImageUrl }}
+              style={[styles.bannerImage, hasErrorBanner ? styles.errorBorder : {}]}
+            />
+            <Pressable style={styles.editIconContainer} onPress={handleEditBanner}>
+              <CameraIcon width={20} height={20} color={theme.colors.surface.default} />
+            </Pressable>
           </View>
-          <View style={styles.formContainer}>
-            <View style={styles.formGroup}>
-              <TextInput
-                label="Name"
-                name={PROFILE_FORM_VALUE.name}
-                control={control}
-                mode="outlined"
-                outlineStyle={styles.input}
-              />
-              <TextInput
-                label="Username"
-                name={PROFILE_FORM_VALUE.urlPath}
-                control={control}
-                mode="outlined"
-                outlineStyle={styles.input}
-              />
-              {/* TODO: Add a formattable TextInput for phone numbers */}
-              <TextInput
-                label="Phone Number"
-                name={PROFILE_FORM_VALUE.phoneNumber}
-                control={control}
-                mode="outlined"
-                outlineStyle={styles.input}
+          <View style={styles.profileContainer}>
+            {imageUrl ? (
+              <Image
+                source={{ uri: imageUrl }}
+                style={[styles.profileImage, hasErrorImage ? styles.errorBorder : {}]}
               />
-            </View>
-            <View style={styles.formGroup}>
-              <TextInput
-                label="Bio"
-                name={PROFILE_FORM_VALUE.biography}
-                control={control}
-                mode="outlined"
-                multiline
-                numberOfLines={4}
-                style={styles.bioInput}
-                outlineStyle={styles.input}
+            ) : (
+              <ImageIcon
+                width={33}
+                height={33}
+                color={theme.colors.object.disabled}
+                style={hasErrorImage ? styles.errorBorder : {}}
               />
-              <View style={styles.saveButtonContainer}>
-                <Button
-                  onPress={handleSubmit(handleSave)}
-                  size="medium"
-                  loading={isMutationInFlight}
-                  contentStyle={hasChanged ? styles.saveButton : styles.saveButtonDisabled}
-                  labelStyle={styles.saveButtonLabel}
-                  disabled={isMutationInFlight || !hasChanged}
-                >
-                  {isMutationInFlight ? '' : 'Save Changes'}
-                </Button>
-              </View>
+            )}
+            <Pressable
+              style={[styles.editIconContainer, { bottom: 0, right: 0 }]}
+              onPress={handleEditProfile}
+            >
+              <CameraIcon width={20} height={20} color={theme.colors.surface.default} />
+            </Pressable>
+          </View>
+        </View>
+        <View style={styles.formContainer}>
+          <View style={styles.formGroup}>
+            <TextInput
+              label="Name"
+              name={PROFILE_FORM_VALUE.name}
+              control={control}
+              mode="outlined"
+              outlineStyle={styles.input}
+            />
+            <TextInput
+              label="Username"
+              name={PROFILE_FORM_VALUE.urlPath}
+              control={control}
+              mode="outlined"
+              outlineStyle={styles.input}
+            />
+            {/* TODO: Add a formattable TextInput for phone numbers */}
+            <TextInput
+              label="Phone Number"
+              name={PROFILE_FORM_VALUE.phoneNumber}
+              control={control}
+              mode="outlined"
+              outlineStyle={styles.input}
+            />
+          </View>
+          <View style={styles.formGroup}>
+            <TextInput
+              label="Bio"
+              name={PROFILE_FORM_VALUE.biography}
+              control={control}
+              mode="outlined"
+              multiline
+              numberOfLines={4}
+              style={styles.bioInput}
+              outlineStyle={styles.input}
+            />
+            <View style={styles.saveButtonContainer}>
+              <Button
+                onPress={handleSubmit(handleSave)}
+                size="medium"
+                loading={isMutationInFlight}
+                contentStyle={hasChanged ? styles.saveButton : styles.saveButtonDisabled}
+                labelStyle={styles.saveButtonLabel}
+                disabled={isMutationInFlight || !hasChanged}
+              >
+                {isMutationInFlight ? '' : 'Save Changes'}
+              </Button>
             </View>
           </View>
-          <BottomDrawer
-            bottomDrawerRef={bottomDrawerRef}
-            handleSheetChanges={handleSheetChanges}
-            type={fieldType}
-            handleViewPhotoLibrary={handleViewPhotoLibrary}
-            handleTakePhoto={handleTakePhoto}
-            handleRemoveImage={handleRemoveImage}
-          />
         </View>
-      </ScrollView>
-    </View>
+        <BottomDrawer
+          bottomDrawerRef={bottomDrawerRef}
+          handleSheetChanges={handleSheetChanges}
+          type={fieldType}
+          handleViewPhotoLibrary={handleViewPhotoLibrary}
+          handleTakePhoto={handleTakePhoto}
+          handleRemoveImage={handleRemoveImage}
+        />
+      </View>
+    </ScrollView>
   )
 }
 

packages/components/modules/profiles/native/ProfileSettingsComponent/styles.ts

@@ -4,11 +4,6 @@ import { StyleSheet } from 'react-native'
 
 export const createStyles = (theme: Theme) =>
   StyleSheet.create({
-    pageContainer: {
-      paddingHorizontal: 0,
-      paddingTop: 0,
-      flex: 1,
-    },
     scrollViewContainer: {
       padding: 0,
       flex: 1,

packages/components/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@baseapp-frontend/components",
   "description": "BaseApp components modules such as comments, notifications, messages, and more.",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "sideEffects": false,
   "scripts": {
     "babel:transpile": "babel modules -d tmp-babel --extensions .ts,.tsx --ignore '**/__tests__/**','**/__storybook__/**'",

packages/design-system/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @baseapp-frontend/design-system
 
+## 1.0.6
+
+### Patch Changes
+
+- Redesing the `Appbar` native component to make it more reusable.
+- Create several native icons.
+- Add the `ClickableAvatar` native component.
+- The param `dismissKeyboard` defaults to `false` on the native View component.
+- Add the `AppbarNavigationLayout` native layout.
+- The `BottomNavigationLayout` native layout can now exclude the header for the selected routes.
+
 ## 1.0.5
 
 ### Patch Changes

packages/design-system/components/native/appbars/AppBar/index.tsx

@@ -1,41 +1,43 @@
 import { FC } from 'react'
 
-import { useRouter } from 'expo-router'
-import { Platform } from 'react-native'
-import { Appbar } from 'react-native-paper'
-
 import { useTheme } from '../../../../providers/native'
+import { IconButton } from '../../buttons'
+import { ChevronIcon as DefaultBackIcon, CloseIcon as DefaultCloseIcon } from '../../icons'
+import { Text } from '../../typographies'
+import { View } from '../../views'
 import { createStyles } from './styles'
 import { AppBarProps } from './types'
 
-const AppBar: FC<AppBarProps> = ({ title, goBack, headerStyle, statusBarHeight }) => {
-  const router = useRouter()
+const AppBar: FC<AppBarProps> = ({
+  title,
+  onBack,
+  onClose,
+  BackIcon = DefaultBackIcon,
+  CloseIcon = DefaultCloseIcon,
+}) => {
   const theme = useTheme()
-
   const styles = createStyles(theme)
 
-  const isAndroid = Platform.OS === 'android'
-
-  const titleStyle = [styles.title, isAndroid && styles.titleAndroid]
-
-  const handleGoBack = () => {
-    if (goBack) {
-      goBack()
-    } else {
-      router.back()
-    }
-  }
-
   return (
-    <Appbar.Header style={[styles.container, headerStyle]} statusBarHeight={statusBarHeight}>
-      <Appbar.BackAction
-        onPress={handleGoBack}
-        size={16}
-        color={theme.colors.object.low}
-        style={isAndroid && styles.backActionAndroid}
-      />
-      <Appbar.Content title={title} titleStyle={titleStyle} />
-    </Appbar.Header>
+    <View style={styles.container}>
+      <View style={styles.buttonContainer}>
+        {onBack && (
+          <IconButton onPress={onBack}>
+            <BackIcon />
+          </IconButton>
+        )}
+      </View>
+      <Text variant="subtitle2" style={styles.title}>
+        {title}
+      </Text>
+      <View style={styles.buttonContainer}>
+        {onClose && (
+          <IconButton onPress={onClose}>
+            <CloseIcon />
+          </IconButton>
+        )}
+      </View>
+    </View>
   )
 }
 

packages/design-system/components/native/appbars/AppBar/styles.ts

@@ -5,28 +5,20 @@ import { Theme } from '../../../../styles/native'
 export const createStyles = (theme: Theme) =>
   StyleSheet.create({
     container: {
-      backgroundColor: theme.colors.surface.background,
-      borderBottomWidth: 1,
+      alignItems: 'center',
       borderBottomColor: theme.colors.surface.border,
-      paddingHorizontal: 8,
-      paddingBottom: 0,
-      elevation: 0,
+      borderBottomWidth: 1,
+      flexDirection: 'row',
+      height: 64,
+      justifyContent: 'center',
+      padding: 16,
     },
     title: {
-      alignSelf: 'center',
-      color: theme.colors.object.high,
-      overflow: 'hidden',
+      flex: 1,
       textAlign: 'center',
-      fontSize: 14,
-      fontStyle: 'normal',
-      fontWeight: 600,
-      lineHeight: 22,
-    },
-    titleAndroid: {
-      marginLeft: -8,
     },
-    backActionAndroid: {
-      position: 'absolute',
-      left: 8,
+    buttonContainer: {
+      alignItems: 'center',
+      width: 24,
     },
   })

packages/design-system/components/native/appbars/AppBar/types.ts

@@ -1,9 +1,11 @@
-import type { StyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet'
-import type { ViewStyle } from 'react-native/Libraries/StyleSheet/StyleSheetTypes'
+import { FC } from 'react'
+
+import { SvgIconProps } from '../../icons'
 
 export type AppBarProps = {
   title: string
-  goBack?: () => void
-  headerStyle?: StyleProp<ViewStyle>
-  statusBarHeight?: number | undefined
+  onBack?: () => void
+  onClose?: () => void
+  BackIcon?: FC<SvgIconProps>
+  CloseIcon?: FC<SvgIconProps>
 }