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

package/src/screens/design_system_screen.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { Alert, Pressable, ScrollView, StyleSheet, View } from 'react-native'
 import type { ViewStyle } from 'react-native'
-import { useTheme } from '../hooks'
+import { useInteractionGhostBackgroundColor, useTheme } from '../hooks'
 import {
   Avatar,
   AvatarGroup,
@@ -27,6 +27,7 @@ import {
   MAX_FONT_SIZE_MULTIPLIER,
   platformPressedOpacityStyle,
   platformFontWeightMedium,
+  Haptic,
 } from '../utils'
 import BannerPrimitive from '../components/primitive/banner_primitive'
 import { VideoAttachmentPreview } from '../components/display/video_attachment_preview'
@@ -89,6 +90,7 @@ export function DesignSystemScreen() {
       <IndicatorsSection />
       <HeadingTextSection />
       <PressablesSection />
+      <HapticsSection />
       <ImageIconsSection />
       <FormControlsSection />
       <StatusComponentsSection />
@@ -678,6 +680,37 @@ function PressablesSection({ isLast }: SectionProps) {
     </CollapsableSection>
   )
 }
+function HapticsSection({ isLast }: SectionProps) {
+  return (
+    <CollapsableSection title="Haptics" isLast={isLast}>
+      <TextGroup>
+        <Text>
+          Haptics help communicate changes and interactions in the UI by making them feel physical
+          and "weighty". They are a progressive enhancement and shouldn't replace visual feedback.
+        </Text>
+      </TextGroup>
+      <Group title="Impact" description="Communicates that a user interaction is occurring.">
+        <Row>
+          <HapticButton title="Impact Light" onPress={() => Haptic.impactLight()} />
+          <HapticButton title="Impact Medium" onPress={() => Haptic.impactMedium()} />
+          <HapticButton title="Impact Heavy" onPress={() => Haptic.impactHeavy()} />
+          <HapticButton title="Rigid" onPress={() => Haptic.rigid()} />
+          <HapticButton title="Soft" onPress={() => Haptic.soft()} />
+        </Row>
+      </Group>
+      <Group
+        title="Notification"
+        description="Communicates the result of a user or application action."
+      >
+        <Row>
+          <HapticButton title="Notification Success" onPress={() => Haptic.notificationSuccess()} />
+          <HapticButton title="Notification Warning" onPress={() => Haptic.notificationWarning()} />
+          <HapticButton title="Notification Error" onPress={() => Haptic.notificationError()} />
+        </Row>
+      </Group>
+    </CollapsableSection>
+  )
+}
 
 function ImageIconsSection({ isLast }: SectionProps) {
   const styles = useStyles()
@@ -1143,14 +1176,46 @@ function TextListItem({ label, children }: TextListItemProps) {
   )
 }
 
+function HapticButton({ title, onPress }: { title: string; onPress: () => void }) {
+  const styles = useStyles()
+
+  return (
+    <Pressable
+      onPress={onPress}
+      style={({ pressed }) => ({
+        ...styles.hapticButton,
+        ...{ opacity: pressed ? 0.5 : 1 },
+      })}
+    >
+      <Text style={styles.hapticButtonText}>{title}</Text>
+    </Pressable>
+  )
+}
+
 // =================================
 // ====== Styles ===================
 // =================================
 
 const useStyles = () => {
   const { colors } = useTheme()
+  const interactionGhostBackgroundColor = useInteractionGhostBackgroundColor()
 
   return StyleSheet.create({
+    hapticButton: {
+      flexGrow: 1,
+      height: 100,
+      padding: 16,
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: interactionGhostBackgroundColor,
+      borderWidth: 1,
+      borderColor: colors.interaction,
+      borderRadius: 8,
+    },
+    hapticButtonText: {
+      textAlign: 'center',
+      color: colors.interaction,
+    },
     scrollView: {
       flex: 1,
       backgroundColor: colors.fillColorNeutral100Inverted,

package/src/screens/message_actions_screen.tsx

@@ -12,7 +12,7 @@ import { useApiClient } from '../hooks/use_api_client'
 import { useConversationMessages } from '../hooks/use_conversation_messages'
 import { useMessageReactionToggle } from '../hooks/use_message_reaction_toggle'
 import { ReactionCountResource } from '../types/resources/reaction'
-import { Clipboard } from '../utils/native_adapters'
+import { Clipboard, Haptic } from '../utils/native_adapters'
 
 export const MessageActionsScreenOptions = getFormSheetScreenOptions({
   sheetAllowedDetents: [0.5],
@@ -111,6 +111,7 @@ export function MessageActionsScreen({ route }: MessageActionsScreenProps) {
   }, [navigation, conversation_id, message_id])
 
   const handleViewReadReceiptsPress = useCallback(() => {
+    Haptic.impactLight()
     const params = omitBy(
       {
         conversation_id,

package/src/types/resources/denormalized_attachment_resource_for_create.ts

@@ -50,6 +50,7 @@ export interface FileAttachment {
   id?: string
   file: NativeAttachmentFile
   status: AttachmentStatus
+  uploadedAt: number
 }
 
 export interface FileUploadState {

package/src/utils/native_adapters/configuration.ts

@@ -5,6 +5,7 @@ import { ImagePickerAdapter } from './image_picker'
 import { VideoAdapter } from './video'
 import { Linking as RNLinking } from 'react-native'
 import { LinkingAdapter } from './linking'
+import { HapticAdapter } from './haptic'
 
 type ChatConfigurations = {
   clipboard: ClipboardAdapter
@@ -13,6 +14,7 @@ type ChatConfigurations = {
   imagePicker: ImagePickerAdapter
   log?: LogAdapter
   linking?: LinkingAdapter
+  haptic?: HapticAdapter
 }
 
 export class ChatAdapters {
@@ -23,6 +25,7 @@ export class ChatAdapters {
     ImagePicker = configurations.imagePicker
     Log = configurations.log || new LogAdapter()
     Linking = configurations.linking || new LinkingAdapter(RNLinking)
+    Haptic = configurations.haptic || new HapticAdapter()
   }
 }
 
@@ -69,3 +72,5 @@ export let ImagePicker: ImagePickerAdapter = new ImagePickerAdapter({
 export let Log: LogAdapter = new LogAdapter()
 
 export let Linking: LinkingAdapter = new LinkingAdapter(RNLinking)
+
+export let Haptic: HapticAdapter = new HapticAdapter()

package/src/utils/native_adapters/haptic.ts

@@ -0,0 +1,34 @@
+import { noop } from 'lodash'
+
+interface Haptic {
+  impactLight: () => void
+  impactMedium: () => void
+  impactHeavy: () => void
+  rigid: () => void
+  soft: () => void
+  notificationSuccess: () => void
+  notificationWarning: () => void
+  notificationError: () => void
+}
+
+export class HapticAdapter {
+  impactLight: () => void
+  impactMedium: () => void
+  impactHeavy: () => void
+  rigid: () => void
+  soft: () => void
+  notificationSuccess: () => void
+  notificationWarning: () => void
+  notificationError: () => void
+
+  constructor(methods?: Haptic) {
+    this.impactLight = methods?.impactLight ?? noop
+    this.impactMedium = methods?.impactMedium ?? noop
+    this.impactHeavy = methods?.impactHeavy ?? noop
+    this.rigid = methods?.rigid ?? noop
+    this.soft = methods?.soft ?? noop
+    this.notificationSuccess = methods?.notificationSuccess ?? noop
+    this.notificationWarning = methods?.notificationWarning ?? noop
+    this.notificationError = methods?.notificationError ?? noop
+  }
+}

package/src/utils/native_adapters/index.ts

@@ -5,3 +5,4 @@ export * from './image_picker'
 export * from './linking'
 export * from './log'
 export * from './video'
+export * from './haptic'