refactor!: introduce WithComponents context provider

Author: oliverlaz

package/foobar.db-journal

@@ -7,6 +7,10 @@ import { openUrlSafely } from './utils/openUrlSafely';
 
 import { FileIconProps } from '../../components/Attachment/FileIcon';
 
+import {
+  ComponentOverrides,
+  useComponentsContext,
+} from '../../contexts/componentsContext/ComponentsContext';
 import {
   MessageContextValue,
   useMessageContext,
@@ -21,7 +25,8 @@ export type FileAttachmentPropsWithContext = Pick<
   MessageContextValue,
   'onLongPress' | 'onPress' | 'onPressIn' | 'preventPress'
 > &
-  Pick<MessagesContextValue, 'additionalPressableProps' | 'FilePreview'> & {
+  Pick<Required<ComponentOverrides>, 'FilePreview'> &
+  Pick<MessagesContextValue, 'additionalPressableProps'> & {
     /** The attachment to render */
     attachment: Attachment;
     attachmentIconSize?: FileIconProps['size'];
@@ -101,9 +106,10 @@ export type FileAttachmentProps = Partial<Omit<FileAttachmentPropsWithContext, '
 export const FileAttachment = (props: FileAttachmentProps) => {
   const { FilePreview: PropFilePreview } = props;
   const { onLongPress, onPress, onPressIn, preventPress } = useMessageContext();
-  const { additionalPressableProps, FilePreview: ContextFilePreview } = useMessagesContext();
+  const { FilePreview: ComponentsFilePreview } = useComponentsContext();
+  const { additionalPressableProps } = useMessagesContext();
 
-  const FilePreview = PropFilePreview || ContextFilePreview;
+  const FilePreview = PropFilePreview || ComponentsFilePreview;
 
   return (
     <FileAttachmentWithContext

package/src/components/Attachment/FileAttachment.tsx

@@ -1,30 +1,24 @@
 import React from 'react';
 import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 
-import { Attachment as AttachmentDefault } from './Attachment';
-
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import {
   MessageContextValue,
   useMessageContext,
 } from '../../contexts/messageContext/MessageContext';
-
-import {
-  MessagesContextValue,
-  useMessagesContext,
-} from '../../contexts/messagesContext/MessagesContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { primitives } from '../../theme';
 
-export type FileAttachmentGroupPropsWithContext = Pick<MessageContextValue, 'files' | 'message'> &
-  Pick<MessagesContextValue, 'Attachment'> & {
-    styles?: Partial<{
-      attachmentContainer: StyleProp<ViewStyle>;
-      container: StyleProp<ViewStyle>;
-    }>;
-  };
+export type FileAttachmentGroupPropsWithContext = Pick<MessageContextValue, 'files' | 'message'> & {
+  styles?: Partial<{
+    attachmentContainer: StyleProp<ViewStyle>;
+    container: StyleProp<ViewStyle>;
+  }>;
+};
 
 const FileAttachmentGroupWithContext = (props: FileAttachmentGroupPropsWithContext) => {
-  const { Attachment, files, message, styles: stylesProp = {} } = props;
+  const { files, message, styles: stylesProp = {} } = props;
+  const { Attachment } = useComponentsContext();
 
   const {
     theme: {
@@ -75,8 +69,6 @@ export const FileAttachmentGroup = (props: FileAttachmentGroupProps) => {
 
   const { files: contextFiles, message } = useMessageContext();
 
-  const { Attachment = AttachmentDefault, AudioAttachment } = useMessagesContext();
-
   const files = propFiles || contextFiles;
 
   if (!files.length) {
@@ -86,8 +78,6 @@ export const FileAttachmentGroup = (props: FileAttachmentGroupProps) => {
   return (
     <MemoizedFileAttachmentGroup
       {...{
-        Attachment,
-        AudioAttachment,
         files,
         message,
       }}

package/src/components/Attachment/FileAttachmentGroup.tsx

@@ -3,16 +3,13 @@ import { StyleProp, StyleSheet, Text, TextStyle, View, ViewStyle } from 'react-n
 
 import type { Attachment } from 'stream-chat';
 
-import { FileIcon as FileIconDefault, FileIconProps } from '../../components/Attachment/FileIcon';
-import {
-  MessagesContextValue,
-  useMessagesContext,
-} from '../../contexts/messagesContext/MessagesContext';
+import type { FileIconProps } from '../../components/Attachment/FileIcon';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { primitives } from '../../theme';
 import { getDurationLabelFromDuration, getFileSizeDisplayText } from '../../utils/utils';
 
-export type FilePreviewProps = Partial<Pick<MessagesContextValue, 'FileAttachmentIcon'>> & {
+export type FilePreviewProps = {
   /** The attachment to render */
   attachment: Attachment;
   attachmentIconSize?: FileIconProps['size'];
@@ -30,14 +27,12 @@ export type FilePreviewProps = Partial<Pick<MessagesContextValue, 'FileAttachmen
 export const FilePreview = (props: FilePreviewProps) => {
   const {
     attachment,
-    FileAttachmentIcon: PropFileAttachmentIcon,
     attachmentIconSize,
     styles: stylesProp = {},
     titleNumberOfLines = 2,
     indicator,
   } = props;
-  const { FileAttachmentIcon: ContextFileAttachmentIcon } = useMessagesContext();
-  const FileAttachmentIcon = PropFileAttachmentIcon || ContextFileAttachmentIcon || FileIconDefault;
+  const { FileAttachmentIcon } = useComponentsContext();
 
   const styles = useStyles();