@planningcenter/chat-react-native 3.14.0-rc.5 → 3.14.0

package/src/components/display/toggle_button.tsx

@@ -8,7 +8,11 @@ import {
   useCreateAndroidRippleColor,
   useInteractionGhostBackgroundColor,
 } from '../../hooks'
-import { platformFontWeightBold, platformPressedOpacityStyle } from '../../utils'
+import {
+  MAX_FONT_SIZE_MULTIPLIER_LANDMARK,
+  platformFontWeightBold,
+  platformPressedOpacityStyle,
+} from '../../utils'
 import { Icon, IconString } from './icon'
 import { tokens } from '../../vendor/tapestry/tokens'
 import { Haptic } from '../../utils/native_adapters/configuration'
@@ -66,7 +70,7 @@ export function ToggleButton({
   allowFontScaling = true,
   iconNameLeft,
   iconNameRight,
-  maxFontSizeMultiplier,
+  maxFontSizeMultiplier = MAX_FONT_SIZE_MULTIPLIER_LANDMARK,
   minimumFontScale,
   title,
   style,

package/src/components/page/error_boundary.tsx

@@ -1,11 +1,8 @@
 import { useNavigation } from '@react-navigation/native'
 import { useQueryErrorResetBoundary } from '@tanstack/react-query'
 import React, { PropsWithChildren, useEffect, useMemo } from 'react'
-import { StyleSheet, View } from 'react-native'
-import { useSafeAreaInsets } from 'react-native-safe-area-context'
-import { Button, Heading, Icon, Text, TextButton } from '../display'
-import { useTheme } from '../../hooks'
 import { ResponseError } from '../../utils/response_error'
+import BlankState from '../primitive/blank_state_primitive'
 
 type ErrorBoundaryState = {
   error: ResponseError | Error | TypeError | null
@@ -108,54 +105,26 @@ function ResponseErrorView({ response }: { response: Response; onReset: () => vo
 }
 
 function ErrorContent({ heading, body }: { heading: string; body: string }) {
-  const styles = useStyles()
   const navigation = useNavigation()
 
   return (
-    <View style={styles.container}>
-      <Icon name="general.outlinedTextMessage" size={32} color={styles.icon.color} />
-      <View style={styles.information}>
-        <Heading variant="h3" style={styles.heading}>
-          {heading}
-        </Heading>
-        <Text style={styles.body}>{body}</Text>
-      </View>
-      <Button variant="outline" onPress={navigation.goBack} title="Go back" size="md" />
-      <TextButton variant="tertiary" onPress={() => navigation.navigate('BugReport')}>
+    <BlankState.Root>
+      <BlankState.Imagery name="people.noTextMessage" />
+      <BlankState.Content>
+        <BlankState.Heading>{heading}</BlankState.Heading>
+        <BlankState.Text>{body}</BlankState.Text>
+      </BlankState.Content>
+      <BlankState.Button
+        title="Go back"
+        onPress={navigation.goBack}
+        size="md"
+        accessibilityRole="link"
+      />
+      <BlankState.TextButton onPress={() => navigation.navigate('BugReport')}>
         Report a bug
-      </TextButton>
-    </View>
+      </BlankState.TextButton>
+    </BlankState.Root>
   )
 }
 
-const useStyles = () => {
-  const theme = useTheme()
-  const { bottom } = useSafeAreaInsets()
-  return StyleSheet.create({
-    container: {
-      flex: 1,
-      justifyContent: 'center',
-      alignItems: 'center',
-      gap: 24,
-      paddingHorizontal: 16,
-      paddingBottom: bottom,
-    },
-    information: {
-      alignItems: 'center',
-      gap: 8,
-    },
-    heading: {
-      textAlign: 'center',
-      lineHeight: 20,
-    },
-    body: {
-      textAlign: 'center',
-      lineHeight: 20,
-    },
-    icon: {
-      color: theme.colors.iconColorDefaultDisabled,
-    },
-  })
-}
-
 export default ErrorBoundary

package/src/components/primitive/avatar_primitive.tsx

@@ -1,9 +1,10 @@
 import React, { createContext, useContext, useEffect, useState } from 'react'
 import { StyleSheet, View, ViewProps } from 'react-native'
-import { useTheme } from '../../hooks'
+import { useFontScale, useTheme } from '../../hooks'
 import { Icon, IconString } from '../display/icon'
 import { Image, ImageProps } from '../display/image'
 import { Spinner } from '../display/spinner'
+import { MAX_FONT_SIZE_MULTIPLIER } from '../../utils'
 
 // =================================
 // ====== Exports ==================
@@ -146,8 +147,10 @@ interface AvatarImageProps extends Omit<ImageProps, 'source' | 'alt'> {
 
 function AvatarImage({ sourceUri, ...props }: AvatarImageProps) {
   const { size } = useAvatarContext()
+  const fontScale = useFontScale({ maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER })
+  const scaledAvatarSize = AVATAR_PX[size] * fontScale
 
-  return <Image source={{ uri: sourceUri }} loaderSize={AVATAR_PX[size]} {...props} alt="" />
+  return <Image source={{ uri: sourceUri }} loaderSize={scaledAvatarSize} {...props} alt="" />
 }
 
 AvatarImage.displayName = 'Avatar.Image'
@@ -171,12 +174,14 @@ interface AvatarImageFallbackProps {
 function AvatarImageFallback({ name = 'general.person' }: AvatarImageFallbackProps) {
   const { size } = useAvatarContext()
   const styles = useStyles()
+  const fontScale = useFontScale({ maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER })
+  const scaledIconSize = AVATAR_FALLBACK_ICON_PX[size] * fontScale
 
   return (
     <View style={styles.fallbackContainer}>
       <Icon
         name={name}
-        size={AVATAR_FALLBACK_ICON_PX[size]}
+        size={scaledIconSize}
         style={styles.fallbackIcon}
         accessibilityElementsHidden={true}
       />
@@ -309,12 +314,14 @@ AvatarGroup.displayName = 'Avatar.Group'
 function AvatarGroupLoader() {
   const { size, allImagesLoaded } = useAvatarContext()
   const styles = useStyles({ size })
+  const fontScale = useFontScale({ maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER })
+  const scaledSpinnerSize = AVATAR_PX[size] * fontScale
 
   if (allImagesLoaded) return null
 
   return (
     <View style={styles.groupLoader}>
-      <Spinner size={AVATAR_PX[size]} />
+      <Spinner size={scaledSpinnerSize} />
     </View>
   )
 }
@@ -349,12 +356,13 @@ interface Styles {
 
 const useStyles = ({ size = 'md', presence = 'offline' }: Styles = {}) => {
   const { colors } = useTheme()
+  const fontScale = useFontScale({ maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER })
   const PRESENCE_COLOR = {
     online: colors.fillColorInteractionOnlineDefault,
     offline: colors.iconColorDefaultDisabled,
   }
-  const presenceDiameter = AVATAR_PRESENCE_PX[size]
-  const avatarDiameter = AVATAR_PX[size]
+  const presenceDiameter = AVATAR_PRESENCE_PX[size] * fontScale
+  const avatarDiameter = AVATAR_PX[size] * fontScale
   const groupGap = 1
 
   return StyleSheet.create({

package/src/components/primitive/blank_state_primitive.tsx

@@ -5,11 +5,13 @@ import {
   Button,
   Heading,
   Icon,
+  TextButton,
   Text,
   type ButtonProps,
   type HeadingProps,
   type IconString,
   type IconStyle,
+  type TextButtonProps,
   type TextProps,
 } from '../display'
 
@@ -24,6 +26,7 @@ const BlankState = {
   Heading: BlankStateHeading,
   Text: BlankStateText,
   Button: BlankStateButton,
+  TextButton: BlankStateTextButton,
 } as const
 
 type BlankStateComponents = {
@@ -33,6 +36,7 @@ type BlankStateComponents = {
   Heading: FC<BlankStateHeadingProps>
   Text: FC<BlankStateTextProps>
   Button: FC<BlankStateButtonProps>
+  TextButton: FC<BlankStateTextButtonProps>
 }
 
 export default BlankState as BlankStateComponents
@@ -43,6 +47,7 @@ export type {
   BlankStateHeadingProps,
   BlankStateTextProps,
   BlankStateButtonProps,
+  BlankStateTextButtonProps,
 }
 
 // ========================================
@@ -159,6 +164,18 @@ function BlankStateButton(props: BlankStateButtonProps) {
 
 BlankStateButton.displayName = 'BlankState.Button'
 
+// ========================================
+// ====== BlankStateTextButton ================
+// ========================================
+
+interface BlankStateTextButtonProps extends TextButtonProps {}
+
+function BlankStateTextButton(props: BlankStateTextButtonProps) {
+  return <TextButton variant="tertiary" {...props} />
+}
+
+BlankStateTextButton.displayName = 'BlankState.TextButton'
+
 // ========================================
 // ====== Styles ==========================
 // ========================================

package/src/navigation/index.tsx

@@ -42,7 +42,7 @@ import {
   MessageReadReceiptsScreenOptions,
 } from '../screens/conversation/message_read_receipts_screen'
 import { Platform } from 'react-native'
-import { HeaderSubmitButton } from '../components/display/platform_modal_header_buttons'
+import { HeaderTextButton } from '../components/display/platform_modal_header_buttons'
 import { TeamConversationScreen } from '../screens/team_conversation_screen'
 import { CardStyleInterpolators } from '@react-navigation/stack'
 
@@ -63,7 +63,7 @@ export const NewConversationStack = createNativeStackNavigator({
       options: ({ navigation }) => ({
         title: 'New conversation',
         headerRight: (props: NativeStackHeaderRightProps) => (
-          <HeaderSubmitButton {...props} onPress={navigation.goBack} title="Cancel" />
+          <HeaderTextButton {...props} onPress={navigation.goBack} title="Cancel" />
         ),
         headerBackVisible: false,
       }),
@@ -73,7 +73,7 @@ export const NewConversationStack = createNativeStackNavigator({
       options: ({ navigation, route }) => ({
         title: 'New conversation',
         headerRight: (props: NativeStackHeaderRightProps) => (
-          <HeaderSubmitButton
+          <HeaderTextButton
             {...props}
             onPress={() => navigation.popTo('Conversations', route.params)}
             title="Cancel"
@@ -86,7 +86,7 @@ export const NewConversationStack = createNativeStackNavigator({
       options: ({ navigation, route }) => ({
         title: 'New conversation',
         headerRight: (props: NativeStackHeaderRightProps) => (
-          <HeaderSubmitButton
+          <HeaderTextButton
             {...props}
             onPress={() => navigation.popTo('Conversations', route.params)}
             title="Cancel"
@@ -104,7 +104,7 @@ export const NewConversationStack = createNativeStackNavigator({
         title: 'New conversation',
         headerLeft: () => null,
         headerRight: (props: NativeStackHeaderRightProps) => (
-          <HeaderSubmitButton
+          <HeaderTextButton
             {...props}
             onPress={() => navigation.getParent()?.goBack()}
             title="Cancel"
@@ -195,7 +195,7 @@ export const ChatStack = createNativeStackNavigator({
         presentation: 'modal',
         title: 'Conversation details',
         headerRight: (props: NativeStackHeaderRightProps) => (
-          <HeaderSubmitButton {...props} onPress={navigation.goBack} title="Done" />
+          <HeaderTextButton {...props} onPress={navigation.goBack} title="Done" />
         ),
       }),
     },

package/src/screens/bug_report_screen.tsx

@@ -20,8 +20,8 @@ import { useUploadClient } from '../hooks/use_upload_client'
 import { ImagePicker, ImagePickerResult, platformFontWeightBold } from '../utils'
 import { useReportBugAction } from '../hooks/use_report_bug_action'
 import {
-  HeaderCancelButton,
-  HeaderSubmitButton,
+  HeaderDismissButton,
+  HeaderTextButton,
 } from '../components/display/platform_modal_header_buttons'
 import { DefaultLoading } from '../components/page/loading'
 import { startsWith } from 'lodash'
@@ -46,7 +46,7 @@ export const BugReportScreenOptions = ({
 }: NativeStackScreenProps<any>): NativeStackNavigationOptions => ({
   presentation: 'modal',
   title: 'Report a bug',
-  headerLeft: () => <HeaderCancelButton title="Cancel" onPress={() => navigation.goBack()} />,
+  headerLeft: () => <HeaderDismissButton title="Cancel" onPress={() => navigation.goBack()} />,
 })
 
 interface Attachment {
@@ -150,7 +150,7 @@ ${stepsToResolve}`
     navigation.setOptions({
       // eslint-disable-next-line react/no-unstable-nested-components
       headerRight: () => (
-        <HeaderSubmitButton title="Submit" onPress={handleSubmit} disabled={!formValid} />
+        <HeaderTextButton title="Submit" onPress={handleSubmit} disabled={!formValid} />
       ),
     })
   }, [formValid, handleSubmit, navigation])
@@ -237,7 +237,7 @@ ${stepsToResolve}`
         >
           <View style={styles.modalContainer}>
             <View style={styles.modalHeader}>
-              <HeaderCancelButton title="Cancel" onPress={() => setShowBugTypePicker(false)} />
+              <HeaderDismissButton title="Cancel" onPress={() => setShowBugTypePicker(false)} />
               <Text style={styles.modalTitle}>Select Bug Type</Text>
               <View style={styles.modalHeaderSpacer} />
             </View>

package/src/screens/conversation_details_screen.tsx

@@ -12,7 +12,6 @@ import {
   StyleSheet,
   TextInput,
   View,
-  type TextStyle,
   type ViewStyle,
   type ViewProps,
   Pressable,
@@ -20,7 +19,17 @@ import {
   Platform,
 } from 'react-native'
 import { HeaderTitle as ElementsHeaderTitle, HeaderTitleProps } from '@react-navigation/elements'
-import { Badge, ChildNotice, Heading, Icon, Person, Switch, Text, TextButton } from '../components'
+import {
+  Badge,
+  ChildNotice,
+  Heading,
+  Icon,
+  Person,
+  Switch,
+  Text,
+  TextButton,
+  type TextStyle,
+} from '../components'
 import { useSuspensePaginator, useTheme } from '../hooks'
 import {
   useConversation,
@@ -30,7 +39,7 @@ import {
   useConversationUpdate,
 } from '../hooks/use_conversation'
 import { MemberResource, isDefined } from '../types'
-import { HeaderSubmitButton } from '../components/display/platform_modal_header_buttons'
+import { HeaderTextButton } from '../components/display/platform_modal_header_buttons'
 import { FlashList } from '@shopify/flash-list'
 import { tokens } from '../vendor/tapestry/tokens'
 import { ButtonAppearanceUnion } from '../components/display/utils/button_colors'
@@ -192,7 +201,7 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
 
   const HeaderRight = useCallback(() => {
     return (
-      <HeaderSubmitButton
+      <HeaderTextButton
         onPress={() => {
           saveTitle({ title: trimmedTitle || conversation.title })
           navigation.goBack()

package/src/screens/conversation_new/components/filter_by_plan.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import { StyleSheet, View, FlatList, Platform } from 'react-native'
 import { Header, PlatformPressable } from '@react-navigation/elements'
 import { Banner, Icon, Spinner, Text, Heading } from '../../../components'
-import { HeaderCancelButton } from '../../../components/display/platform_modal_header_buttons'
+import { HeaderDismissButton } from '../../../components/display/platform_modal_header_buttons'
 import { useTeamPlans } from '../../../hooks/services/use_team_plans'
 import { useTheme } from '../../../hooks'
 import { tokens } from '../../../vendor/tapestry/tokens'
@@ -192,7 +192,7 @@ export function FilterByPlanModal({
 // ==========================================
 
 const createStableHeaderRight = (onClose: () => void) => () => (
-  <HeaderCancelButton onPress={onClose} title="Cancel" />
+  <HeaderDismissButton onPress={onClose} title="Cancel" />
 )
 
 function OptionItem({ plan, isSelected, onPress }: OptionItemProps) {

package/src/screens/conversations/components/list_header_component.tsx

@@ -8,6 +8,7 @@ import { useCanDisplayGroups } from '../../../hooks/use_groups'
 import { ConversationsScreenProps } from '../conversations_screen'
 import { ChatGroupBadge } from './chat_group_badge'
 import { Haptic } from '../../../utils/native_adapters'
+import { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../../utils'
 
 const ROW_PADDING_HORIZONTAL = 16
 
@@ -63,7 +64,11 @@ export const ListHeaderComponent = () => {
         <Heading numberOfLines={1} variant="h2">
           Conversations
         </Heading>
-        <TextButton onPress={alertMarkAllRead} disabled={isPending}>
+        <TextButton
+          onPress={alertMarkAllRead}
+          disabled={isPending}
+          maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
+        >
           Mark all read
         </TextButton>
       </View>

package/src/screens/conversations/conversations_screen.tsx

@@ -6,7 +6,7 @@ import { ActionButton } from '../../components/display/action_button'
 import { ConversationsContextProvider } from '../../contexts/conversations_context'
 import { useCanCreateConversations } from '../../hooks'
 import { GraphId } from '../../types/resources/group_resource'
-import { destructureChatGroupGraphId } from '../../utils'
+import { destructureChatGroupGraphId, MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../utils'
 import { ListHeaderComponent } from './components/list_header_component'
 import { AppName } from '../../types/resources/app_name'
 
@@ -69,7 +69,11 @@ export function ConversationsScreen({ route }: ConversationsScreenProps) {
         onPress={handleNewConversationNavigation}
         buttonIconNameLeft="churchCenter.signups"
         secondaryButton={
-          <TextButton variant="tertiary" onPress={reportABug}>
+          <TextButton
+            variant="tertiary"
+            onPress={reportABug}
+            maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
+          >
             Report a bug
           </TextButton>
         }

package/src/utils/styles.ts

@@ -2,6 +2,7 @@ import { Platform } from 'react-native'
 import { tokens } from '../vendor/tapestry/tokens'
 
 export const MAX_FONT_SIZE_MULTIPLIER = 1.5
+export const MAX_FONT_SIZE_MULTIPLIER_LANDMARK = 1.3 // Use in headers, footers, toolbars, etc.
 
 export const CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL = 16 // TODO: move to `screens/conversation/utils/styles` when `/screens/conversation` is created
 

package/build/navigation/header.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-import { HeaderButtonProps } from '@react-navigation/elements';
-import { TextProps, TextStyle } from 'react-native';
-type HeaderRightButtonProps = HeaderButtonProps & {
-    children: TextProps['children'];
-    textStyle?: TextStyle;
-};
-export declare const HeaderRightButton: (props: HeaderRightButtonProps) => React.JSX.Element;
-export {};
-//# sourceMappingURL=header.d.ts.map

package/build/navigation/header.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../src/navigation/header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAgB,iBAAiB,EAAQ,MAAM,4BAA4B,CAAA;AAClF,OAAO,EAAc,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAE/D,KAAK,sBAAsB,GAAG,iBAAiB,GAAG;IAChD,QAAQ,EAAE,SAAS,CAAC,UAAU,CAAC,CAAA;IAC/B,SAAS,CAAC,EAAE,SAAS,CAAA;CACtB,CAAA;AAED,eAAO,MAAM,iBAAiB,UAAW,sBAAsB,sBAc9D,CAAA"}

package/build/navigation/header.js

@@ -1,16 +0,0 @@
-import React from 'react';
-import { HeaderButton, Text } from '@react-navigation/elements';
-import { StyleSheet } from 'react-native';
-export const HeaderRightButton = (props) => {
-    const styles = StyleSheet.create({
-        text: {
-            fontSize: 16,
-        },
-    });
-    return (<HeaderButton {...props} style={props.style}>
-      <Text style={[styles.text, props.textStyle]} numberOfLines={1}>
-        {props.children}
-      </Text>
-    </HeaderButton>);
-};
-//# sourceMappingURL=header.js.map

package/build/navigation/header.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"header.js","sourceRoot":"","sources":["../../src/navigation/header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,YAAY,EAAqB,IAAI,EAAE,MAAM,4BAA4B,CAAA;AAClF,OAAO,EAAE,UAAU,EAAwB,MAAM,cAAc,CAAA;AAO/D,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAE,EAAE;IACjE,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;QAC/B,IAAI,EAAE;YACJ,QAAQ,EAAE,EAAE;SACb;KACF,CAAC,CAAA;IAEF,OAAO,CACL,CAAC,YAAY,CAAC,IAAI,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAC1C;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAC5D;QAAA,CAAC,KAAK,CAAC,QAAQ,CACjB;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,YAAY,CAAC,CAChB,CAAA;AACH,CAAC,CAAA","sourcesContent":["import React from 'react'\nimport { HeaderButton, HeaderButtonProps, Text } from '@react-navigation/elements'\nimport { StyleSheet, TextProps, TextStyle } from 'react-native'\n\ntype HeaderRightButtonProps = HeaderButtonProps & {\n  children: TextProps['children']\n  textStyle?: TextStyle\n}\n\nexport const HeaderRightButton = (props: HeaderRightButtonProps) => {\n  const styles = StyleSheet.create({\n    text: {\n      fontSize: 16,\n    },\n  })\n\n  return (\n    <HeaderButton {...props} style={props.style}>\n      <Text style={[styles.text, props.textStyle]} numberOfLines={1}>\n        {props.children}\n      </Text>\n    </HeaderButton>\n  )\n}\n"]}

package/src/navigation/header.tsx

@@ -1,24 +0,0 @@
-import React from 'react'
-import { HeaderButton, HeaderButtonProps, Text } from '@react-navigation/elements'
-import { StyleSheet, TextProps, TextStyle } from 'react-native'
-
-type HeaderRightButtonProps = HeaderButtonProps & {
-  children: TextProps['children']
-  textStyle?: TextStyle
-}
-
-export const HeaderRightButton = (props: HeaderRightButtonProps) => {
-  const styles = StyleSheet.create({
-    text: {
-      fontSize: 16,
-    },
-  })
-
-  return (
-    <HeaderButton {...props} style={props.style}>
-      <Text style={[styles.text, props.textStyle]} numberOfLines={1}>
-        {props.children}
-      </Text>
-    </HeaderButton>
-  )
-}