@planningcenter/chat-react-native 3.30.0-rc.2 → 3.30.0-rc.4

package/build/screens/conversation_screen.js

@@ -4,27 +4,27 @@ import { CommonActions, useNavigation, useTheme as useNavigationTheme, useRoute,
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { FlatList, Platform, StyleSheet, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { Badge, Icon, Text } from '@/components';
-import { EmptyConversationBlankState } from '@/components/conversation/empty_conversation_blank_state';
-import { JumpToBottomButton } from '@/components/conversation/jump_to_bottom_button';
-import { Message } from '@/components/conversation/message';
-import { MessageForm } from '@/components/conversation/message_form';
-import { LeaderMessagesDisabledBanner, MemberMessagesDisabledBanner, } from '@/components/conversation/messages_disabled_banners';
-import { ReplyShadowMessage } from '@/components/conversation/reply_shadow_message';
-import { TypingIndicator } from '@/components/conversation/typing_indicator';
-import { KeyboardView } from '@/components/display/keyboard_view';
-import BlankState from '@/components/primitive/blank_state_primitive';
-import { ConversationContextProvider } from '@/contexts/conversation_context';
-import { useTheme } from '@/hooks';
-import { useConversation } from '@/hooks/use_conversation';
-import { useConversationJoltEvents } from '@/hooks/use_conversation_jolt_events';
-import { useConversationMessages } from '@/hooks/use_conversation_messages';
-import { useConversationMessagesJoltEvents } from '@/hooks/use_conversation_messages_jolt_events';
-import { useMarkLatestMessageRead } from '@/hooks/use_mark_latest_message_read';
-import { normalizeAnalyticsMetadata, usePublishProductAnalyticsEvent, } from '@/hooks/use_product_analytics';
-import { getRelativeDateStatus } from '@/utils/date';
-import dayjs from '@/utils/dayjs';
-import { CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL } from '@/utils/styles';
+import { Badge, Icon, Text } from '../components';
+import { EmptyConversationBlankState } from '../components/conversation/empty_conversation_blank_state';
+import { JumpToBottomButton } from '../components/conversation/jump_to_bottom_button';
+import { Message } from '../components/conversation/message';
+import { MessageForm } from '../components/conversation/message_form';
+import { LeaderMessagesDisabledBanner, MemberMessagesDisabledBanner, } from '../components/conversation/messages_disabled_banners';
+import { ReplyShadowMessage } from '../components/conversation/reply_shadow_message';
+import { TypingIndicator } from '../components/conversation/typing_indicator';
+import { KeyboardView } from '../components/display/keyboard_view';
+import BlankState from '../components/primitive/blank_state_primitive';
+import { ConversationContextProvider } from '../contexts/conversation_context';
+import { useTheme } from '../hooks';
+import { useConversation } from '../hooks/use_conversation';
+import { useConversationJoltEvents } from '../hooks/use_conversation_jolt_events';
+import { useConversationMessages } from '../hooks/use_conversation_messages';
+import { useConversationMessagesJoltEvents } from '../hooks/use_conversation_messages_jolt_events';
+import { useMarkLatestMessageRead } from '../hooks/use_mark_latest_message_read';
+import { normalizeAnalyticsMetadata, usePublishProductAnalyticsEvent, } from '../hooks/use_product_analytics';
+import { getRelativeDateStatus } from '../utils/date';
+import dayjs from '../utils/dayjs';
+import { CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL } from '../utils/styles';
 export function ConversationScreen({ route }) {
     const { conversation_id, reply_root_id } = route.params;
     const { data: conversation } = useConversation({ conversation_id });

package/build/screens/conversation_select_recipients/components/groups_recipient_row.d.ts

@@ -1,4 +1,4 @@
-import { GroupsGroupResource } from '@/types';
+import { GroupsGroupResource } from '../../../types';
 interface GroupsRecipientRowProps {
     group: GroupsGroupResource;
     onPress: (group: GroupsGroupResource) => void;

package/build/screens/conversation_select_recipients/components/groups_recipient_row.js

@@ -1,5 +1,5 @@
 import { RecipientLinkRow } from './recipient_link_row';
-import { pluralize } from '@/utils';
+import { pluralize } from '../../../utils';
 export const GroupsRecipientRow = ({ group, onPress }) => {
     const groupAccessibilityLabel = `Select ${group.name} with ${pluralize(group.membershipsCount, 'member')}`;
     return (<RecipientLinkRow imageUri={group.headerImage?.thumbnail} title={group.name} subtitle={`${group.membershipsCount} members`} onPress={() => onPress(group)} accessibilityLabel={groupAccessibilityLabel} accessibilityHint={`Selects group as recipient and navigates to the final screen to finish creating the conversation`}/>);

package/build/screens/conversation_select_recipients/components/recipient_link_row.js

@@ -1,9 +1,9 @@
 import { PlatformPressable } from '@react-navigation/elements';
 import React from 'react';
 import { Platform, StyleSheet, View } from 'react-native';
-import { Icon, Image, Text } from '@/components';
-import { useTheme } from '@/hooks';
-import { platformFontWeightMedium } from '@/utils';
+import { Icon, Image, Text } from '../../../components';
+import { useTheme } from '../../../hooks';
+import { platformFontWeightMedium } from '../../../utils';
 export const RecipientLinkRow = ({ onPress, accessibilityLabel, accessibilityHint, imageUri, title, subtitle, }) => {
     const styles = useStyles();
     return (<PlatformPressable style={styles.row} onPress={onPress} accessibilityRole="link" accessibilityLabel={accessibilityLabel} accessibilityHint={accessibilityHint}>

package/build/screens/conversation_select_recipients/components/restricted_group_row.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { GroupsGroupResource } from '@/types';
+import { GroupsGroupResource } from '../../../types';
 interface RestrictedGroupRowProps {
     group: GroupsGroupResource;
 }

package/build/screens/conversation_select_recipients/components/restricted_group_row.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
-import { Image, Text } from '@/components';
-import { useTheme } from '@/hooks';
-import { platformFontWeightMedium } from '@/utils';
+import { Image, Text } from '../../../components';
+import { useTheme } from '../../../hooks';
+import { platformFontWeightMedium } from '../../../utils';
 const DEFAULT_REASON = 'Chat is not enabled for this group';
 const REASON_DISPLAY_TEXT = {
     leaders_only: 'Only leaders can start conversations',

package/build/screens/conversation_select_recipients/components/team_recipient_row.d.ts

@@ -1,4 +1,4 @@
-import { ServiceTypeWithTeams } from '@/screens/conversation_filter_recipients/types';
+import { ServiceTypeWithTeams } from '../../../screens/conversation_filter_recipients/types';
 interface TeamRecipientRowProps {
     serviceType: ServiceTypeWithTeams;
     onPress: (teams: ServiceTypeWithTeams['teams']) => void;

package/build/screens/conversation_select_recipients/components/team_recipient_row.js

@@ -1,5 +1,5 @@
 import { RecipientLinkRow } from './recipient_link_row';
-import { pluralize } from '@/utils';
+import { pluralize } from '../../../utils';
 export const TeamRecipientRow = ({ serviceType, onPress }) => {
     const serviceTypeAccessibilityLabel = `Select ${pluralize(serviceType.teams.length, 'team')} for ${serviceType.name}`;
     const teamNames = serviceType.teams.map(team => team.name).join(', ');

package/build/screens/conversation_select_recipients/components/view_more_link_row.js

@@ -1,5 +1,5 @@
 import { StyleSheet, View } from 'react-native';
-import { TextButton } from '@/components';
+import { TextButton } from '../../../components';
 export const ViewMoreLinkRow = ({ accessibilityHint, onPress }) => {
     const styles = useRowStyles();
     return (<View style={[styles.row]}>

package/build/screens/conversation_select_recipients/conversation_new_entry_screen.js

@@ -2,10 +2,10 @@ import { useNavigation } from '@react-navigation/native';
 import React, { useEffect } from 'react';
 import { ScrollView, StyleSheet, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { Button, Heading } from '@/components';
-import { DefaultLoading } from '@/components/page/loading';
-import { useNewConversationEntry } from '@/hooks/use_new_conversation_entry';
-import { Haptic } from '@/utils/native_adapters';
+import { Button, Heading } from '../../components';
+import { DefaultLoading } from '../../components/page/loading';
+import { useNewConversationEntry } from '../../hooks/use_new_conversation_entry';
+import { Haptic } from '../../utils/native_adapters';
 export const ConversationNewEntryScreen = ({ route }) => {
     const styles = useStyles();
     const navigation = useNavigation();

package/build/screens/conversation_select_recipients/conversation_select_group_recipients_screen.js

@@ -5,8 +5,8 @@ import { SectionList, StyleSheet, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { GroupsRecipientRow } from './components/groups_recipient_row';
 import { RestrictedGroupRow } from './components/restricted_group_row';
-import { Heading, Text } from '@/components';
-import { useGroupsGroups } from '@/hooks/use_groups_groups';
+import { Heading, Text } from '../../components';
+import { useGroupsGroups } from '../../hooks/use_groups_groups';
 const SectionKey = {
     my: 'my',
     more: 'more',

package/build/screens/conversation_select_recipients/conversation_select_teams_i_lead_recipients_screen.js

@@ -3,10 +3,10 @@ import React from 'react';
 import { FlatList, StyleSheet, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { TeamRecipientRow } from './components/team_recipient_row';
-import { Button, Heading } from '@/components';
-import { useServiceTypesWithTeams } from '@/screens/conversation_filter_recipients/hooks/use_service_types_with_teams';
-import { TeamFilterTypes, } from '@/screens/conversation_filter_recipients/types';
-import { Haptic } from '@/utils/native_adapters';
+import { Button, Heading } from '../../components';
+import { useServiceTypesWithTeams } from '../../screens/conversation_filter_recipients/hooks/use_service_types_with_teams';
+import { TeamFilterTypes, } from '../../screens/conversation_filter_recipients/types';
+import { Haptic } from '../../utils/native_adapters';
 export const ConversationSelectTeamsILeadRecipientsScreen = ({ route, }) => {
     const styles = useStyles();
     const navigation = useNavigation();

package/build/screens/conversation_select_recipients/types/screen_props.d.ts

@@ -1,6 +1,6 @@
 import { StaticScreenProps } from '@react-navigation/native';
-import { AppName } from '@/types/resources/app_name';
-import { GraphId } from '@/types/resources/group_resource';
+import { AppName } from '../../../types/resources/app_name';
+import { GraphId } from '../../../types/resources/group_resource';
 export type ConversationSelectRecipientsParams = {
     chat_group_graph_id?: GraphId;
     group_source_app_name?: AppName;

package/build/screens/conversation_select_type_screen.d.ts

@@ -1,7 +1,7 @@
 import { StaticScreenProps } from '@react-navigation/native';
 import React from 'react';
-import { AppName } from '@/types/resources/app_name';
-import { GraphId } from '@/types/resources/group_resource';
+import { AppName } from '../types/resources/app_name';
+import { GraphId } from '../types/resources/group_resource';
 export declare const ConversationSelectTypeScreenOptions: import("@react-navigation/native-stack").NativeStackNavigationOptions;
 export type ConversationSelectTypeScreenProps = StaticScreenProps<{
     chat_group_graph_id?: GraphId;

package/build/screens/conversation_select_type_screen.js

@@ -1,7 +1,7 @@
 import { useNavigation } from '@react-navigation/native';
 import React from 'react';
-import FormSheet, { getFormSheetScreenOptions } from '@/components/primitive/form_sheet';
-import { Haptic } from '@/utils/native_adapters';
+import FormSheet, { getFormSheetScreenOptions } from '../components/primitive/form_sheet';
+import { Haptic } from '../utils/native_adapters';
 export const ConversationSelectTypeScreenOptions = getFormSheetScreenOptions({
     headerTitle: 'New conversation',
 });

package/build/screens/conversations/components/chat_group_badge.js

@@ -1,8 +1,8 @@
 import { useNavigation, useRoute } from '@react-navigation/native';
 import React, { useCallback } from 'react';
 import { StyleSheet, View } from 'react-native';
-import { Badge } from '@/components';
-import { useApiGet } from '@/hooks/use_api';
+import { Badge } from '../../../components';
+import { useApiGet } from '../../../hooks/use_api';
 export const ChatGroupBadge = ({ rowPaddingHorizontal }) => {
     const styles = useStyles({ rowPaddingHorizontal });
     const navigation = useNavigation();

package/build/screens/conversations/components/list_header_action_button.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { PressableProps } from 'react-native';
-import { type IconString } from '@/components/display/icon';
+import { type IconString } from '../../../components/display/icon';
 interface ListHeaderActionButtonProps extends PressableProps {
     /**
      * Provides context to screen readers about what the button does.

package/build/screens/conversations/components/list_header_action_button.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import { Pressable, StyleSheet } from 'react-native';
-import { Icon } from '@/components/display/icon';
-import { useTheme, useFontScale, useCreateAndroidRippleColor } from '@/hooks';
-import { platformPressedOpacityStyle } from '@/utils';
-import { tokens } from '@/vendor/tapestry/tokens';
+import { Icon } from '../../../components/display/icon';
+import { useTheme, useFontScale, useCreateAndroidRippleColor } from '../../../hooks';
+import { platformPressedOpacityStyle } from '../../../utils';
+import { tokens } from '../../../vendor/tapestry/tokens';
 export function ListHeaderActionButton({ accessibilityLabel, maxFontSizeMultiplier, name, ...props }) {
     const styles = useStyles({ maxFontSizeMultiplier });
     const { colors } = useTheme();

package/build/screens/conversations/components/list_header_component.js

@@ -3,15 +3,15 @@ import React, { useCallback, useMemo } from 'react';
 import { Alert, ScrollView, StyleSheet, View } from 'react-native';
 import { ChatGroupBadge } from './chat_group_badge';
 import { ListHeaderActionButton } from './list_header_action_button';
-import { Heading, TextButton, ToggleButton } from '@/components';
-import { useAtFontScaleBreakpoint, useCurrentPersonCache, useTheme } from '@/hooks';
-import { useCanCreateConversations } from '@/hooks';
-import { useAppName } from '@/hooks/use_app_name';
-import { useMarkAllRead } from '@/hooks/use_conversations_actions';
-import { useCanDisplayGroups } from '@/hooks/use_groups';
-import { useNewConversationEntry } from '@/hooks/use_new_conversation_entry';
-import { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '@/utils';
-import { Haptic } from '@/utils/native_adapters';
+import { Heading, TextButton, ToggleButton } from '../../../components';
+import { useAtFontScaleBreakpoint, useCurrentPersonCache, useTheme } from '../../../hooks';
+import { useCanCreateConversations } from '../../../hooks';
+import { useAppName } from '../../../hooks/use_app_name';
+import { useMarkAllRead } from '../../../hooks/use_conversations_actions';
+import { useCanDisplayGroups } from '../../../hooks/use_groups';
+import { useNewConversationEntry } from '../../../hooks/use_new_conversation_entry';
+import { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../../utils';
+import { Haptic } from '../../../utils/native_adapters';
 const ROW_PADDING_HORIZONTAL = 16;
 var FilterTypes;
 (function (FilterTypes) {

package/build/screens/conversations/conversations_screen.d.ts

@@ -1,7 +1,7 @@
 import { StaticScreenProps } from '@react-navigation/native';
 import React from 'react';
-import { AppName } from '@/types/resources/app_name';
-import { GraphId } from '@/types/resources/group_resource';
+import { AppName } from '../../types/resources/app_name';
+import { GraphId } from '../../types/resources/group_resource';
 export type ConversationsScreenProps = StaticScreenProps<{
     title?: string;
     chat_group_graph_id?: GraphId;

package/build/screens/conversations/conversations_screen.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
 import { ListHeaderComponent } from './components/list_header_component';
-import { Conversations } from '@/components';
-import { ConversationsContextProvider } from '@/contexts/conversations_context';
-import { usePublishProductAnalyticsEvent } from '@/hooks';
+import { Conversations } from '../../components';
+import { ConversationsContextProvider } from '../../contexts/conversations_context';
+import { usePublishProductAnalyticsEvent } from '../../hooks';
 export function ConversationsScreen({ route }) {
     const styles = useStyles();
     usePublishProductAnalyticsEvent('chat.mobile.conversations.index.opened');

package/build/screens/design_system_screen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"design_system_screen.d.ts","sourceRoot":"","sources":["../../src/screens/design_system_screen.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAiFvC,wBAAgB,kBAAkB,sBAkBjC"}
+{"version":3,"file":"design_system_screen.d.ts","sourceRoot":"","sources":["../../src/screens/design_system_screen.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAiFvC,wBAAgB,kBAAkB,sBAmBjC"}

package/build/screens/design_system_screen.js

@@ -1,11 +1,12 @@
+import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
 import React, { useState } from 'react';
 import { Alert, Pressable, ScrollView, StyleSheet, View } from 'react-native';
-import { Avatar, AvatarGroup, Badge, Banner, BannerCollapsible, Button, ToggleButton, Heading, Icon, IconButton, Image, Person, Spinner, Switch, Text, TextButton, TextInlineButton, ImageAttachmentPreview, } from '@/components/display';
-import { VideoAttachmentPreview } from '@/components/display/video_attachment_preview';
-import BannerPrimitive from '@/components/primitive/banner_primitive';
-import BlankState from '@/components/primitive/blank_state_primitive';
-import { useInteractionGhostBackgroundColor, useTheme } from '@/hooks';
-import { MAX_FONT_SIZE_MULTIPLIER, platformPressedOpacityStyle, platformFontWeightMedium, Haptic, } from '@/utils';
+import { Avatar, AvatarGroup, Badge, Banner, BannerCollapsible, Button, ToggleButton, Heading, Icon, IconButton, Image, Person, Spinner, Switch, Text, TextButton, TextInlineButton, ImageAttachmentPreview, } from '../components/display';
+import { VideoAttachmentPreview } from '../components/display/video_attachment_preview';
+import BannerPrimitive from '../components/primitive/banner_primitive';
+import BlankState from '../components/primitive/blank_state_primitive';
+import { useInteractionGhostBackgroundColor, useTheme } from '../hooks';
+import { MAX_FONT_SIZE_MULTIPLIER, platformPressedOpacityStyle, platformFontWeightMedium, Haptic, } from '../utils';
 // =================================
 // ====== Docs Utils ===============
 // =================================
@@ -60,6 +61,7 @@ export function DesignSystemScreen() {
       <ImageIconsSection />
       <FormControlsSection />
       <StatusComponentsSection />
+      <FontAwesomeIconsSection />
       <MiscComponentsSection isLast/>
     </ScrollView>);
 }
@@ -572,6 +574,96 @@ function StatusComponentsSection({ isLast }) {
       </Group>
     </CollapsableSection>);
 }
+const FA_ICONS = [
+    {
+        category: 'Church',
+        icons: [
+            'book-bible',
+            'church',
+            'cross',
+            'dove',
+            'hands-heart',
+            'person-rays',
+            'praying-hands',
+            'podium',
+            'droplet',
+            'person-drowning',
+            'lighthouse',
+        ],
+    },
+    {
+        category: 'Services',
+        icons: [
+            'guitar',
+            'guitar-electric',
+            'violin',
+            'calendar-heart',
+            'hand-heart',
+            'hand-wave',
+            'baby',
+            'children',
+            'mug-hot',
+            'video-camera',
+            'music',
+            'piano-keyboard',
+            'drum',
+            'user-graduate',
+            'comments-question',
+            'presentation',
+            'microphone-stand',
+            'id-badge',
+            'book-user',
+            'hand-holding-heart',
+            'guitars',
+            'amp-guitar',
+            'school-flag',
+            'shield-check',
+            'projector',
+        ],
+    },
+    {
+        category: 'Groups',
+        icons: [
+            'people',
+            'people-group',
+            'person-dress',
+            'person',
+            'seedling',
+            'comments-alt',
+            'globe',
+            'book-open-reader',
+            'running',
+            'leaf',
+        ],
+    },
+];
+function FontAwesomeIconsSection({ isLast }) {
+    const { colors } = useTheme();
+    return (<CollapsableSection title="FontAwesome Pro Icons" isLast={isLast}>
+      {FA_ICONS.map(({ category, icons }) => (<Group key={category} title={category}>
+          <View style={faStyles.grid}>
+            {icons.map(name => (<View key={name} style={faStyles.cell}>
+                <FontAwesomeIcon icon={['fas', name]} size={20} color={colors.iconColorDefaultSecondary}/>
+                <Text variant="footnote" numberOfLines={1}>
+                  {name}
+                </Text>
+              </View>))}
+          </View>
+        </Group>))}
+    </CollapsableSection>);
+}
+const faStyles = StyleSheet.create({
+    grid: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+    },
+    cell: {
+        width: '25%',
+        alignItems: 'center',
+        gap: 4,
+        paddingVertical: 12,
+    },
+});
 function MiscComponentsSection({ isLast }) {
     return (<CollapsableSection title="Misc components" isLast={isLast}>
       <Group title="Person" description="Takes a person object (`MemberResource` type) and displays an avatar, name, and badges. If person is a child we show a special badge and faded styles. Implomentation is based on a similar Chat Web component.">