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

package/src/components/conversation/empty_conversation_blank_state.tsx

@@ -1,11 +1,15 @@
-import { BlankState } from '../display'
+import BlankState from '../primitive/blank_state_primitive'
 
 export const EmptyConversationBlankState = () => {
   return (
-    <BlankState
-      iconName="general.outlinedTextMessage"
-      title="No messages"
-      subtitle="Conversation is hidden from everyone until you send a message."
-    />
+    <BlankState.Root>
+      <BlankState.Imagery name="general.outlinedTextMessage" />
+      <BlankState.Content>
+        <BlankState.Heading>No messages</BlankState.Heading>
+        <BlankState.Text>
+          Conversation is hidden from everyone until you send a message.
+        </BlankState.Text>
+      </BlankState.Content>
+    </BlankState.Root>
   )
 }

package/src/components/conversations/conversations.tsx

@@ -6,7 +6,7 @@ import { useConversationsContext } from '../../contexts/conversations_context'
 import { useTheme } from '../../hooks'
 import { ConversationResource } from '../../types'
 import { throwResponseError } from '../../utils/response_error'
-import { BlankState } from '../display'
+import BlankState from '../primitive/blank_state_primitive'
 import { ConversationPreview, ConversationPreviewSkeleton } from './conversation_preview'
 import { useConversationsJoltEvents } from '../../hooks/use_conversations_jolt_events'
 
@@ -64,7 +64,12 @@ export const Conversations = ({ ListHeaderComponent }: ConversationsProps) => {
         ListHeaderComponent={ListHeaderComponent}
         ListEmptyComponent={
           <View style={styles.listEmpty}>
-            <BlankState iconName="general.outlinedTextMessage" title="No conversations" />
+            <BlankState.Root>
+              <BlankState.Imagery name="general.outlinedTextMessage" />
+              <BlankState.Content>
+                <BlankState.Heading>No conversations</BlankState.Heading>
+              </BlankState.Content>
+            </BlankState.Root>
           </View>
         }
         renderItem={({ item }) => {

package/src/components/display/action_button.tsx

@@ -6,6 +6,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useTheme } from '../../hooks'
 import { Text } from './text'
 import { IconString } from './icon'
+import { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../utils'
 
 export const ActionButton = ({
   visible = true,
@@ -56,6 +57,7 @@ export const ActionButton = ({
           style={secondaryButton ? null : styles.fullWidthButton}
           iconNameLeft={buttonIconNameLeft}
           loading={loading}
+          maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
         />
       </View>
     </Animated.View>

package/src/components/display/badge.tsx

@@ -175,9 +175,9 @@ const useStyles = ({
 
   const statusColorMap = useStatusColorAppearanceMap()
 
-  const badgePaddingHorizontal = 8 * fontScale
-  const badgePaddingVertical = 4 * fontScale
   const badgeGap = 4 * fontScale
+  const badgePaddingHorizontal = 8
+  const badgePaddingVertical = 4
   const badgeFontSize = 12
 
   const variantStylesMap: VariantStyles = {
@@ -188,7 +188,7 @@ const useStyles = ({
       paddingHorizontal: badgePaddingHorizontal,
       paddingVertical: badgePaddingVertical,
       borderWidth: tokens.borderSizeDefault * fontScale,
-      borderRadius: tokens.borderRadiusMd,
+      borderRadius: tokens.borderRadiusMd * fontScale,
       textColor: statusColorMap[appearance].text,
       fontWeight: 'normal',
     },
@@ -199,7 +199,7 @@ const useStyles = ({
       paddingHorizontal: badgePaddingHorizontal,
       paddingVertical: badgePaddingVertical,
       borderWidth: tokens.borderSizeDefault * fontScale,
-      borderRadius: tokens.borderRadiusMd,
+      borderRadius: tokens.borderRadiusMd * fontScale,
       textColor: statusColorMap[appearance].text,
       fontWeight: platformFontWeightMedium,
     },
@@ -219,7 +219,6 @@ const useStyles = ({
   return StyleSheet.create({
     badgeWrapper: {
       flexDirection: 'row',
-      alignItems: 'center',
       justifyContent: 'center',
       alignSelf: 'flex-start',
       borderRadius: variantStylesMap[variant].borderRadius,
@@ -255,6 +254,7 @@ const useStyles = ({
     metaLabel: {
       paddingHorizontal: variantStylesMap[variant].paddingHorizontal,
       fontSize: badgeFontSize,
+      alignSelf: 'center',
       flexShrink: 1,
       paddingLeft: variantStylesMap[variant].metaLabelPaddingLeft,
     },

package/src/components/display/index.ts

@@ -3,7 +3,6 @@ export * from './avatar'
 export * from './badge'
 export * from './banner_collapsible'
 export * from './banner'
-export * from './blank_state'
 export * from './button'
 export * from './child_notice'
 export * from './heading'

package/src/components/display/platform_modal_header_buttons.tsx

@@ -4,17 +4,17 @@ import { HeaderButton } from '@react-navigation/elements'
 import { Icon } from './icon'
 import { useTheme } from '../../hooks'
 
-interface HeaderSubmitButtonProps {
+interface HeaderTextButtonProps {
   onPress: () => void
   title?: string
   disabled?: boolean
 }
 
-export const HeaderSubmitButton = ({
+export const HeaderTextButton = ({
   onPress,
   title = 'Submit',
   ...props
-}: HeaderSubmitButtonProps) => {
+}: HeaderTextButtonProps) => {
   const styles = useStyles()
 
   return (
@@ -29,18 +29,18 @@ export const HeaderSubmitButton = ({
   )
 }
 
-interface HeaderCancelButtonProps {
+interface HeaderDismissButtonProps {
   onPress: () => void
   title?: string
   tintColor?: ColorValue
 }
 
-export const HeaderCancelButton = ({
+export const HeaderDismissButton = ({
   onPress,
   title = 'Cancel',
   tintColor,
   ...props
-}: HeaderCancelButtonProps) => {
+}: HeaderDismissButtonProps) => {
   const styles = useStyles()
 
   return Platform.select({

package/src/components/display/text.tsx

@@ -1,13 +1,37 @@
 import { useTheme } from '../../hooks'
 import React from 'react'
 import { StyleSheet, Text as ReactNativeText, Platform } from 'react-native'
-import type { TextStyle, TextProps as ReactNativeTextProps } from 'react-native'
+import type {
+  TextStyle as ReactNativeTextStyle,
+  TextProps as ReactNativeTextProps,
+  StyleProp,
+} from 'react-native'
 import { tokens } from '../../vendor/tapestry/tokens'
 
 // =================================
 // ====== Constants ================
 // =================================
 
+// TextStyle extends ViewStyle, which includes border properties.
+// CCA has issues with borders on Text on iOS. (https://github.com/planningcenter/chat-mobile/pull/177)
+// Our pattern is to apply boarders to a parent View instead.
+type BorderKeys =
+  | 'borderWidth'
+  | 'borderBottomWidth'
+  | 'borderLeftWidth'
+  | 'borderRightWidth'
+  | 'borderTopWidth'
+  | 'borderColor'
+  | 'borderBottomColor'
+  | 'borderLeftColor'
+  | 'borderRightColor'
+  | 'borderTopColor'
+  | 'borderStyle'
+
+export type TextStyle = Omit<ReactNativeTextStyle, BorderKeys> & {
+  [K in BorderKeys]?: never
+}
+
 const VARIANTS = {
   plain: 'plain',
   secondary: 'secondary',
@@ -22,11 +46,15 @@ type VariantStyles = Record<VariantUnion, TextStyle>
 // ====== Component ================
 // =================================
 
-export interface TextProps extends ReactNativeTextProps {
+export interface TextProps extends Omit<ReactNativeTextProps, 'style'> {
   /**
    * Changes the styles and size of the text.
    */
   variant?: VariantUnion
+  /**
+   * Text styles (border and background properties are not allowed)
+   */
+  style?: StyleProp<TextStyle>
 }
 
 export function Text({ style, variant = 'plain', children, ...props }: TextProps) {

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

@@ -0,0 +1,211 @@
+import React, { FC, ReactNode } from 'react'
+import { View, StyleSheet, ViewStyle } from 'react-native'
+import { useTheme } from '../../hooks'
+import {
+  Button,
+  Heading,
+  Icon,
+  TextButton,
+  Text,
+  type ButtonProps,
+  type HeadingProps,
+  type IconString,
+  type IconStyle,
+  type TextButtonProps,
+  type TextProps,
+} from '../display'
+
+// ========================================
+// ====== Exports =========================
+// ========================================
+
+const BlankState = {
+  Root: BlankStateRoot,
+  Imagery: BlankStateImagery,
+  Content: BlankStateContent,
+  Heading: BlankStateHeading,
+  Text: BlankStateText,
+  Button: BlankStateButton,
+  TextButton: BlankStateTextButton,
+} as const
+
+type BlankStateComponents = {
+  Root: FC<BlankStateRootProps>
+  Imagery: FC<BlankStateImageryProps>
+  Content: FC<BlankStateContentProps>
+  Heading: FC<BlankStateHeadingProps>
+  Text: FC<BlankStateTextProps>
+  Button: FC<BlankStateButtonProps>
+  TextButton: FC<BlankStateTextButtonProps>
+}
+
+export default BlankState as BlankStateComponents
+export type {
+  BlankStateRootProps,
+  BlankStateImageryProps,
+  BlankStateContentProps,
+  BlankStateHeadingProps,
+  BlankStateTextProps,
+  BlankStateButtonProps,
+  BlankStateTextButtonProps,
+}
+
+// ========================================
+// ====== BlankStateRoot ==================
+// ========================================
+
+interface BlankStateRootProps {
+  children: ReactNode
+  style?: ViewStyle
+}
+
+function BlankStateRoot({ children, style }: BlankStateRootProps) {
+  const styles = useStyles()
+
+  return <View style={[styles.container, style]}>{children}</View>
+}
+
+BlankStateRoot.displayName = 'BlankState.Root'
+
+// ========================================
+// ====== BlankStateImagery ===============
+// ========================================
+
+interface BlankStateImageryProps {
+  name: IconString
+  size?: number
+  style?: IconStyle
+}
+
+function BlankStateImagery({ name, size = 32, style }: BlankStateImageryProps) {
+  const styles = useStyles()
+
+  /*
+  NOTE:
+  BlankState.Imagery will eventually return more then just an Icon component
+  Eventually it will need to return SVG illustrations from the theme or internally for Services Mobile.
+  This first step of using a more abstract component just allows us to keep this component open to change, without being overly perscriptive on how the change should be implomented.
+
+*/
+
+  return <Icon name={name} size={size} style={[styles.imagery, style]} />
+}
+
+BlankStateImagery.displayName = 'BlankState.Imagery'
+
+// ========================================
+// ====== BlankStateContent ===============
+// ========================================
+
+interface BlankStateContentProps {
+  children: ReactNode
+  style?: ViewStyle
+}
+
+function BlankStateContent({ children, style }: BlankStateContentProps) {
+  const styles = useStyles()
+
+  return <View style={[styles.content, style]}>{children}</View>
+}
+
+BlankStateContent.displayName = 'BlankState.Content'
+
+// ========================================
+// ====== BlankStateHeading ===============
+// ========================================
+
+interface BlankStateHeadingProps {
+  children: ReactNode
+  style?: HeadingProps['style']
+}
+
+function BlankStateHeading({ children, style }: BlankStateHeadingProps) {
+  const styles = useStyles()
+
+  return (
+    <Heading variant="h3" style={[styles.heading, style]}>
+      {children}
+    </Heading>
+  )
+}
+
+BlankStateHeading.displayName = 'BlankState.Heading'
+
+// ========================================
+// ====== BlankStateText ==================
+// ========================================
+
+interface BlankStateTextProps {
+  children: ReactNode
+  style?: TextProps['style']
+}
+
+function BlankStateText({ children, style }: BlankStateTextProps) {
+  const styles = useStyles()
+
+  return (
+    <Text variant="tertiary" style={[styles.text, style]}>
+      {children}
+    </Text>
+  )
+}
+
+BlankStateText.displayName = 'BlankState.Text'
+
+// ========================================
+// ====== BlankStateButton ================
+// ========================================
+
+interface BlankStateButtonProps extends ButtonProps {}
+
+function BlankStateButton(props: BlankStateButtonProps) {
+  return <Button variant="outline" size="sm" {...props} />
+}
+
+BlankStateButton.displayName = 'BlankState.Button'
+
+// ========================================
+// ====== BlankStateTextButton ================
+// ========================================
+
+interface BlankStateTextButtonProps extends TextButtonProps {}
+
+function BlankStateTextButton(props: BlankStateTextButtonProps) {
+  return <TextButton variant="tertiary" {...props} />
+}
+
+BlankStateTextButton.displayName = 'BlankState.TextButton'
+
+// ========================================
+// ====== Styles ==========================
+// ========================================
+
+const useStyles = () => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: 16,
+      padding: 16,
+    },
+    imagery: {
+      color: colors.iconColorDefaultDisabled,
+    },
+    content: {
+      alignItems: 'center',
+      gap: 4,
+      maxWidth: 250,
+    },
+    heading: {
+      textAlign: 'center',
+      color: colors.textColorDefaultSecondary,
+    },
+    text: {
+      textAlign: 'center',
+      color: colors.textColorDefaultSecondary,
+    },
+  })
+}

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" />
         ),
       }),
     },