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

package/src/screens/conversation_select_recipients/conversation_select_recipients_screen.tsx

@@ -1,7 +1,8 @@
 import { useNavigation } from '@react-navigation/native'
 import React from 'react'
 import { ScrollView, StyleSheet, View } from 'react-native'
-import { BlankState, Button, Heading } from '../../components'
+import { Button, Heading } from '../../components'
+import BlankState from '../../components/primitive/blank_state_primitive'
 import { GroupsGroupResource } from '../../types'
 import { useGroupsGroups } from '../../hooks/use_groups_groups'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
@@ -95,10 +96,7 @@ export const ConversationSelectRecipientsScreen = ({
             {isGroupsFetching ? (
               <DefaultLoading />
             ) : groupsWithCreatePermission.length === 0 ? (
-              <BlankState
-                subtitle="Join a group with chat enabled and permissions to start a new conversation."
-                style={styles.blankState}
-              />
+              <RecipientsBlankState subtitle="Join a group with chat enabled and permissions to start a new conversation." />
             ) : (
               <>
                 {visibleGroups.map(group => {
@@ -167,7 +165,7 @@ export const ConversationSelectRecipientsScreen = ({
                 )}
               </>
             ) : (
-              <BlankState subtitle="You don't lead any teams." style={styles.blankState} />
+              <RecipientsBlankState subtitle="You don't lead any teams." />
             )}
           </View>
         </View>
@@ -176,6 +174,19 @@ export const ConversationSelectRecipientsScreen = ({
   )
 }
 
+const RecipientsBlankState = ({ subtitle }: { subtitle: string }) => {
+  const styles = useStyles()
+
+  return (
+    <BlankState.Root style={styles.blankState}>
+      <BlankState.Imagery name="general.outlinedTextMessage" />
+      <BlankState.Content>
+        <BlankState.Text>{subtitle}</BlankState.Text>
+      </BlankState.Content>
+    </BlankState.Root>
+  )
+}
+
 const useStyles = () => {
   const { bottom } = useSafeAreaInsets()
 

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

@@ -7,6 +7,7 @@ import { useMarkAllRead } from '../../../hooks/use_conversations_actions'
 import { useCanDisplayGroups } from '../../../hooks/use_groups'
 import { ConversationsScreenProps } from '../conversations_screen'
 import { ChatGroupBadge } from './chat_group_badge'
+import { Haptic } from '../../../utils/native_adapters'
 
 const ROW_PADDING_HORIZONTAL = 16
 
@@ -41,6 +42,7 @@ export const ListHeaderComponent = () => {
 
   const handleMarkAllRead = useCallback(() => {
     currentPersonCache.update({ unreadCount: 0 })
+    Haptic.notificationSuccess()
     markAllRead()
   }, [currentPersonCache, markAllRead])
 

package/src/screens/design_system_screen.tsx

@@ -8,7 +8,6 @@ import {
   Badge,
   Banner,
   BannerCollapsible,
-  BlankState,
   Button,
   ToggleButton,
   Heading,
@@ -23,6 +22,7 @@ import {
   TextInlineButton,
   ImageAttachmentPreview,
 } from '../components/display'
+import BlankState from '../components/primitive/blank_state_primitive'
 import {
   MAX_FONT_SIZE_MULTIPLIER,
   platformPressedOpacityStyle,
@@ -1056,20 +1056,24 @@ function MiscComponentsSection({ isLast }: SectionProps) {
       </Group>
       <Group
         title="BlankState"
-        description="Displays a title and an optional icon, subtitle, and button. Button can be customized via `buttonProps`."
+        description="Compound component with primitives to display imagary, heading, title, and a button."
       >
         <Column>
-          <BlankState
-            iconName="general.outlinedTextMessage"
-            title="No messages"
-            subtitle="Conversation is hidden from everyone until you send a message."
-            buttonProps={{
-              onPress: buttonPress,
-              title: 'Go back',
-              accessibilityHint: 'Navigates back to the conversations list',
-              accessibilityRole: 'link',
-            }}
-          />
+          <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.Button
+              onPress={buttonPress}
+              title="Go back"
+              accessibilityHint="Navigates back to the conversations list"
+              accessibilityRole="link"
+            />
+          </BlankState.Root>
         </Column>
       </Group>
     </CollapsableSection>

package/src/screens/message_actions_screen.tsx

@@ -82,6 +82,7 @@ export function MessageActionsScreen({ route }: MessageActionsScreenProps) {
     mutationFn: deleteMessage,
     onSuccess: () => {
       refetch()
+      Haptic.notificationSuccess()
       navigation.goBack()
     },
     onError: () => {

package/src/screens/send_giphy_screen.tsx

@@ -1,7 +1,8 @@
 import { StackActions, StaticScreenProps, useNavigation } from '@react-navigation/native'
 import React from 'react'
 import { Image as NativeImage, Platform, StyleSheet, useWindowDimensions, View } from 'react-native'
-import { BlankState, Button, IconButton, IconString, TextButton } from '../components'
+import { Button, IconButton, IconString, TextButton } from '../components'
+import BlankState from '../components/primitive/blank_state_primitive'
 import { DefaultLoading } from '../components/page/loading'
 import FormSheet, { getFormSheetScreenOptions } from '../components/primitive/form_sheet'
 import { useCreateAndroidRippleColor, useTheme } from '../hooks'
@@ -36,16 +37,14 @@ export function SendGiphyScreen({ route }: SendGiphyScreenProps) {
   if (!result)
     return (
       <FormSheet.Root contentStyle={styles.blankStateContainer}>
-        <BlankState
-          style={styles.blankState}
-          title="No Giphys found"
-          subtitle="Try a different search term."
-          iconName="general.bolt"
-          buttonProps={{
-            onPress: () => navigation.goBack(),
-            title: 'Close',
-          }}
-        />
+        <BlankState.Root style={styles.blankState}>
+          <BlankState.Imagery name="general.bolt" />
+          <BlankState.Content>
+            <BlankState.Heading>No Giphys found</BlankState.Heading>
+            <BlankState.Text>Try a different search term.</BlankState.Text>
+          </BlankState.Content>
+          <BlankState.Button onPress={() => navigation.goBack()} title="Close" />
+        </BlankState.Root>
       </FormSheet.Root>
     )
 

package/build/components/conversations/action_toggle_button.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"action_toggle_button.d.ts","sourceRoot":"","sources":["../../../src/components/conversations/action_toggle_button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAA;AAC7E,OAAO,EAAQ,UAAU,EAAiB,MAAM,YAAY,CAAA;AAK5D,UAAU,uBAAwB,SAAQ,cAAc;IACtD,eAAe,EAAE,MAAM,CAAA;IACvB,OAAO,EAAE,OAAO,CAAA;IAChB,aAAa,EAAE;QACb,IAAI,EAAE;YAAE,QAAQ,EAAE,UAAU,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,CAAA;QAC7C,KAAK,EAAE;YAAE,QAAQ,EAAE,UAAU,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,CAAA;KAC/C,CAAA;IACD,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,wBAAgB,kBAAkB,CAAC,EACjC,eAAe,EACf,OAAO,EACP,aAAa,EACb,QAAgB,EAChB,OAAO,EACP,OAAe,EACf,GAAG,KAAK,EACT,EAAE,uBAAuB,qBA8BzB"}

package/build/components/conversations/action_toggle_button.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"action_toggle_button.js","sourceRoot":"","sources":["../../../src/components/conversations/action_toggle_button.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react'\nimport { StyleSheet } from 'react-native'\nimport { Pressable, type PressableProps } from 'react-native-gesture-handler'\nimport { Icon, IconString, Spinner, Text } from '../display'\nimport { useCreateAndroidRippleColor, useTheme } from '../../hooks'\nimport { platformFontWeightMedium, platformPressedOpacityStyle } from '../../utils/styles'\nimport { tokens } from '../../vendor/tapestry/tokens'\n\ninterface ActionToggleButtonProps extends PressableProps {\n  backgroundColor: string\n  toggled: boolean\n  toggleContent: {\n    true: { iconName: IconString; label: string }\n    false: { iconName: IconString; label: string }\n  }\n  loading?: boolean\n}\n\nexport function ActionToggleButton({\n  backgroundColor,\n  onPress,\n  toggleContent,\n  disabled = false,\n  toggled,\n  loading = false,\n  ...props\n}: ActionToggleButtonProps) {\n  const styles = useStyles({ backgroundColor, disabled })\n  const androidRippleColor = useCreateAndroidRippleColor({\n    color: backgroundColor,\n  })\n\n  const { iconName, label } = toggleContent[toggled ? 'true' : 'false']\n\n  return (\n    <Pressable\n      onPress={onPress}\n      style={({ pressed }) => [styles.button, pressed && platformPressedOpacityStyle]}\n      android_ripple={{ color: androidRippleColor, borderless: false, foreground: true }}\n      disabled={disabled || loading}\n      accessibilityRole=\"togglebutton\"\n      accessibilityState={{ checked: toggled }}\n      {...props}\n    >\n      {loading ? (\n        <Spinner size={20} />\n      ) : (\n        <>\n          <Icon name={iconName} style={styles.icon} size={20} />\n          <Text variant=\"footnote\" style={styles.text}>\n            {label}\n          </Text>\n        </>\n      )}\n    </Pressable>\n  )\n}\n\nconst useStyles = ({ backgroundColor, disabled }: Partial<ActionToggleButtonProps>) => {\n  const { colors } = useTheme()\n  const fillColor = disabled ? colors.textColorDefaultDisabled : tokens.colorNeutral100White\n  const buttonBackgroundColor = disabled\n    ? colors.fillColorButtonNeutralSolidDisabled\n    : backgroundColor\n\n  return StyleSheet.create({\n    button: {\n      flex: 1,\n      flexDirection: 'column',\n      alignItems: 'center',\n      justifyContent: 'center',\n      gap: 4,\n      height: '100%',\n      backgroundColor: buttonBackgroundColor,\n    },\n    icon: {\n      color: fillColor,\n      marginTop: 4,\n    },\n    text: {\n      color: fillColor,\n      fontWeight: platformFontWeightMedium,\n    },\n  })\n}\n"]}

package/build/components/display/blank_state.d.ts

@@ -1,18 +0,0 @@
-import { type ViewStyle } from 'react-native';
-import { type HeadingProps } from './heading';
-import { type IconString, type IconStyle } from './icon';
-import { type TextProps } from './text';
-import { type ButtonProps } from './button';
-interface BlankStateProps {
-    iconName?: IconString;
-    iconStyle?: IconStyle;
-    title?: string;
-    titleStyle?: HeadingProps['style'];
-    subtitle?: string;
-    subtitleStyle?: TextProps['style'];
-    style?: ViewStyle;
-    buttonProps?: ButtonProps;
-}
-export declare const BlankState: ({ iconName, title, titleStyle, subtitle, subtitleStyle, style, iconStyle, buttonProps, }: BlankStateProps) => import("react").JSX.Element;
-export {};
-//# sourceMappingURL=blank_state.d.ts.map

package/build/components/display/blank_state.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"blank_state.d.ts","sourceRoot":"","sources":["../../../src/components/display/blank_state.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,SAAS,EAAc,MAAM,cAAc,CAAA;AAC/D,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,WAAW,CAAA;AACtD,OAAO,EAAQ,KAAK,UAAU,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAA;AAC9D,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAA;AAE7C,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,UAAU,CAAA;AAEnD,UAAU,eAAe;IACvB,QAAQ,CAAC,EAAE,UAAU,CAAA;IACrB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAA;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,aAAa,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAA;IAClC,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,WAAW,CAAC,EAAE,WAAW,CAAA;CAC1B;AAED,eAAO,MAAM,UAAU,6FASpB,eAAe,gCAsBjB,CAAA"}

package/build/components/display/blank_state.js

@@ -1,47 +0,0 @@
-import { View, StyleSheet } from 'react-native';
-import { Heading } from './heading';
-import { Icon } from './icon';
-import { Text } from './text';
-import { useTheme } from '../../hooks';
-import { Button } from './button';
-export const BlankState = ({ iconName, title, titleStyle, subtitle, subtitleStyle, style, iconStyle, buttonProps, }) => {
-    const styles = useStyles();
-    return (<View style={[styles.container, style]}>
-      {iconName && <Icon name={iconName} size={32} style={[styles.icon, iconStyle]}/>}
-
-      <View style={styles.content}>
-        {title && (<Heading variant="h3" style={[styles.baseText, titleStyle]}>
-            {title}
-          </Heading>)}
-        {subtitle && (<Text variant="tertiary" style={[styles.baseText, subtitleStyle]}>
-            {subtitle}
-          </Text>)}
-      </View>
-      {buttonProps && <Button variant="outline" size="sm" {...buttonProps}/>}
-    </View>);
-};
-const useStyles = () => {
-    const { colors } = useTheme();
-    return StyleSheet.create({
-        container: {
-            flex: 1,
-            alignItems: 'center',
-            justifyContent: 'center',
-            gap: 16,
-            padding: 16,
-        },
-        icon: {
-            color: colors.iconColorDefaultDisabled,
-        },
-        content: {
-            alignItems: 'center',
-            gap: 4,
-            maxWidth: 250,
-        },
-        baseText: {
-            textAlign: 'center',
-            color: colors.textColorDefaultSecondary,
-        },
-    });
-};
-//# sourceMappingURL=blank_state.js.map

package/build/components/display/blank_state.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"blank_state.js","sourceRoot":"","sources":["../../../src/components/display/blank_state.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,UAAU,EAAE,MAAM,cAAc,CAAA;AAC/D,OAAO,EAAE,OAAO,EAAqB,MAAM,WAAW,CAAA;AACtD,OAAO,EAAE,IAAI,EAAmC,MAAM,QAAQ,CAAA;AAC9D,OAAO,EAAE,IAAI,EAAkB,MAAM,QAAQ,CAAA;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,EAAE,MAAM,EAAoB,MAAM,UAAU,CAAA;AAanD,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,QAAQ,EACR,KAAK,EACL,UAAU,EACV,QAAQ,EACR,aAAa,EACb,KAAK,EACL,SAAS,EACT,WAAW,GACK,EAAE,EAAE;IACpB,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAE1B,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,CACrC;MAAA,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,EAAG,CAEhF;;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAC1B;QAAA,CAAC,KAAK,IAAI,CACR,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC,CACzD;YAAA,CAAC,KAAK,CACR;UAAA,EAAE,OAAO,CAAC,CACX,CACD;QAAA,CAAC,QAAQ,IAAI,CACX,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC,CAC/D;YAAA,CAAC,QAAQ,CACX;UAAA,EAAE,IAAI,CAAC,CACR,CACH;MAAA,EAAE,IAAI,CACN;MAAA,CAAC,WAAW,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,WAAW,CAAC,EAAG,CACzE;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAE7B,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,SAAS,EAAE;YACT,IAAI,EAAE,CAAC;YACP,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,QAAQ;YACxB,GAAG,EAAE,EAAE;YACP,OAAO,EAAE,EAAE;SACZ;QACD,IAAI,EAAE;YACJ,KAAK,EAAE,MAAM,CAAC,wBAAwB;SACvC;QACD,OAAO,EAAE;YACP,UAAU,EAAE,QAAQ;YACpB,GAAG,EAAE,CAAC;YACN,QAAQ,EAAE,GAAG;SACd;QACD,QAAQ,EAAE;YACR,SAAS,EAAE,QAAQ;YACnB,KAAK,EAAE,MAAM,CAAC,yBAAyB;SACxC;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import { View, type ViewStyle, StyleSheet } from 'react-native'\nimport { Heading, type HeadingProps } from './heading'\nimport { Icon, type IconString, type IconStyle } from './icon'\nimport { Text, type TextProps } from './text'\nimport { useTheme } from '../../hooks'\nimport { Button, type ButtonProps } from './button'\n\ninterface BlankStateProps {\n  iconName?: IconString\n  iconStyle?: IconStyle\n  title?: string\n  titleStyle?: HeadingProps['style']\n  subtitle?: string\n  subtitleStyle?: TextProps['style']\n  style?: ViewStyle\n  buttonProps?: ButtonProps\n}\n\nexport const BlankState = ({\n  iconName,\n  title,\n  titleStyle,\n  subtitle,\n  subtitleStyle,\n  style,\n  iconStyle,\n  buttonProps,\n}: BlankStateProps) => {\n  const styles = useStyles()\n\n  return (\n    <View style={[styles.container, style]}>\n      {iconName && <Icon name={iconName} size={32} style={[styles.icon, iconStyle]} />}\n\n      <View style={styles.content}>\n        {title && (\n          <Heading variant=\"h3\" style={[styles.baseText, titleStyle]}>\n            {title}\n          </Heading>\n        )}\n        {subtitle && (\n          <Text variant=\"tertiary\" style={[styles.baseText, subtitleStyle]}>\n            {subtitle}\n          </Text>\n        )}\n      </View>\n      {buttonProps && <Button variant=\"outline\" size=\"sm\" {...buttonProps} />}\n    </View>\n  )\n}\n\nconst useStyles = () => {\n  const { colors } = useTheme()\n\n  return StyleSheet.create({\n    container: {\n      flex: 1,\n      alignItems: 'center',\n      justifyContent: 'center',\n      gap: 16,\n      padding: 16,\n    },\n    icon: {\n      color: colors.iconColorDefaultDisabled,\n    },\n    content: {\n      alignItems: 'center',\n      gap: 4,\n      maxWidth: 250,\n    },\n    baseText: {\n      textAlign: 'center',\n      color: colors.textColorDefaultSecondary,\n    },\n  })\n}\n"]}

package/src/components/display/blank_state.tsx

@@ -1,76 +0,0 @@
-import { View, type ViewStyle, StyleSheet } from 'react-native'
-import { Heading, type HeadingProps } from './heading'
-import { Icon, type IconString, type IconStyle } from './icon'
-import { Text, type TextProps } from './text'
-import { useTheme } from '../../hooks'
-import { Button, type ButtonProps } from './button'
-
-interface BlankStateProps {
-  iconName?: IconString
-  iconStyle?: IconStyle
-  title?: string
-  titleStyle?: HeadingProps['style']
-  subtitle?: string
-  subtitleStyle?: TextProps['style']
-  style?: ViewStyle
-  buttonProps?: ButtonProps
-}
-
-export const BlankState = ({
-  iconName,
-  title,
-  titleStyle,
-  subtitle,
-  subtitleStyle,
-  style,
-  iconStyle,
-  buttonProps,
-}: BlankStateProps) => {
-  const styles = useStyles()
-
-  return (
-    <View style={[styles.container, style]}>
-      {iconName && <Icon name={iconName} size={32} style={[styles.icon, iconStyle]} />}
-
-      <View style={styles.content}>
-        {title && (
-          <Heading variant="h3" style={[styles.baseText, titleStyle]}>
-            {title}
-          </Heading>
-        )}
-        {subtitle && (
-          <Text variant="tertiary" style={[styles.baseText, subtitleStyle]}>
-            {subtitle}
-          </Text>
-        )}
-      </View>
-      {buttonProps && <Button variant="outline" size="sm" {...buttonProps} />}
-    </View>
-  )
-}
-
-const useStyles = () => {
-  const { colors } = useTheme()
-
-  return StyleSheet.create({
-    container: {
-      flex: 1,
-      alignItems: 'center',
-      justifyContent: 'center',
-      gap: 16,
-      padding: 16,
-    },
-    icon: {
-      color: colors.iconColorDefaultDisabled,
-    },
-    content: {
-      alignItems: 'center',
-      gap: 4,
-      maxWidth: 250,
-    },
-    baseText: {
-      textAlign: 'center',
-      color: colors.textColorDefaultSecondary,
-    },
-  })
-}