perf(package-size): remove react-file-utils package (#2088)

* Move react-file-utils files to chat

* Update import paths

* Remove react-file-utils from packages

* Refactor - reuse UploadButton, move icons

Author: arnautov-anton

package.json

@@ -47,7 +47,6 @@
     "prop-types": "^15.7.2",
     "react-dropzone": "^14.2.3",
     "react-fast-compare": "^3.2.2",
-    "react-file-utils": "^1.2.0",
     "react-image-gallery": "1.2.12",
     "react-is": "^18.1.0",
     "react-markdown": "^8.0.7",

rollup.config.js

@@ -49,7 +49,6 @@ const externalDependencies = [
   'pretty-bytes',
   'prop-types',
   'react-fast-compare',
-  /react-file-utils/,
   'react-images',
   'react-image-gallery',
   'react-is',

src/components/Attachment/FileAttachment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FileIcon } from 'react-file-utils';
+import { FileIcon } from '../ReactFileUtilities';
 import type { Attachment } from 'stream-chat';
 
 import { DownloadButton } from './DownloadButton';

src/components/MessageInput/AttachmentPreviewList.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import { FileIcon } from 'react-file-utils';
+import { FileIcon } from '../ReactFileUtilities';
 
 import { useMessageInputContext } from '../../context/MessageInputContext';
 import { useFileState } from './hooks/useFileState';

src/components/MessageInput/DropzoneProvider.tsx

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren } from 'react';
-import { ImageDropzone } from 'react-file-utils';
+import { ImageDropzone } from '../ReactFileUtilities';
 
 import { useCooldownTimer } from './hooks/useCooldownTimer';
 import { useCreateMessageInputContext } from './hooks/useCreateMessageInputContext';

src/components/MessageInput/EditMessageForm.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { FileUploadButton, ImageDropzone } from 'react-file-utils';
+import { FileUploadButton, ImageDropzone } from '../ReactFileUtilities';
 
 import { EmojiPicker } from './EmojiPicker';
 import {

src/components/MessageInput/MessageInputFlat.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { FileUploadButton, ImageDropzone, UploadButton } from 'react-file-utils';
+import { FileUploadButton, ImageDropzone, UploadButton } from '../ReactFileUtilities';
 import type { Event } from 'stream-chat';
 import clsx from 'clsx';
 import { usePopper } from 'react-popper';

src/components/MessageInput/MessageInputSmall.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { FileUploadButton, ImageDropzone } from 'react-file-utils';
+import { FileUploadButton, ImageDropzone } from '../ReactFileUtilities';
 import type { Event } from 'stream-chat';
 
 import { EmojiPicker } from './EmojiPicker';

src/components/MessageInput/UploadsPreview.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FilePreviewer, ImagePreviewer } from 'react-file-utils';
+import { FilePreviewer, ImagePreviewer } from '../ReactFileUtilities';
 
 import { useChannelStateContext } from '../../context/ChannelStateContext';
 import { useMessageInputContext } from '../../context/MessageInputContext';

src/components/MessageInput/hooks/useAttachments.ts

@@ -6,7 +6,7 @@ import { useFileUploads } from './useFileUploads';
 
 import { useChannelStateContext } from '../../../context/ChannelStateContext';
 
-import type { FileLike } from 'react-file-utils';
+import type { FileLike } from '../../ReactFileUtilities';
 
 import type { MessageInputProps } from '../MessageInput';
 import type { MessageInputReducerAction, MessageInputState } from './useMessageInputState';