fix: Reduce bundle size by update import path

.eslintrc.json

@@ -223,7 +223,34 @@
           "asc",
           { "caseSensitive": false, "natural": true }
         ],
-        "valid-typeof": 2
+        "valid-typeof": 2,
+        "@typescript-eslint/no-restricted-imports": [
+          "error",
+          {
+            "paths": [
+              {
+                "name": "../../context",
+                "message": "Importing from top-level barrel files is not allowed. Import from specific files instead.",
+                "allowTypeImports": true
+              },
+              {
+                "name": "../../../context",
+                "message": "Importing from top-level barrel files is not allowed. Import from specific files instead.",
+                "allowTypeImports": true
+              },
+              {
+                "name": "../../components",
+                "message": "Importing from top-level barrel files is not allowed. Import from specific files instead.",
+                "allowTypeImports": true
+              },
+              {
+                "name": "../../../components",
+                "message": "Importing from top-level barrel files is not allowed. Import from specific files instead.",
+                "allowTypeImports": true
+              }
+            ]
+          }
+        ]
       }
     }
   ]

package.json

@@ -26,6 +26,18 @@
       },
       "default": "./dist/index.js"
     },
+    "./dist/*": {
+      "types": "./dist/*",
+      "node": {
+        "require": "./dist/*",
+        "import": "./dist/*"
+      },
+      "browser": {
+        "require": "./dist/*",
+        "import": "./dist/*"
+      },
+      "default": "./dist/*"
+    },
     "./emojis": {
       "types": "./dist/plugins/Emojis/index.d.ts",
       "node": {
@@ -279,4 +291,4 @@
     "not op_mini all"
   ],
   "packageManager": "[email protected]+sha1.1959a18351b811cdeedbd484a8f86c3cc3bbaf72"
-}
+}

src/components/Attachment/AttachmentActions.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { Action, Attachment } from 'stream-chat';
 
-import { useTranslationContext } from '../../context';
+import { useTranslationContext } from '../../context/TranslationContext';
 
 import type { ActionHandlerReturnType } from '../Message/hooks/useActionHandler';
 import type { DefaultStreamChatGenerics } from '../../types/types';

src/components/Attachment/Audio.tsx

@@ -2,7 +2,10 @@ import React from 'react';
 
 import type { Attachment } from 'stream-chat';
 
-import { DownloadButton, FileSizeIndicator, PlayButton, ProgressBar } from './components';
+import { DownloadButton } from './components/DownloadButton';
+import { FileSizeIndicator } from './components/FileSizeIndicator';
+import { PlayButton } from './components/PlayButton';
+import { ProgressBar } from './components/ProgressBar';
 import { useAudioController } from './hooks/useAudioController';
 
 import type { DefaultStreamChatGenerics } from '../../types/types';

src/components/Attachment/Card.tsx

@@ -5,7 +5,8 @@ import ReactPlayer from 'react-player';
 import { AudioProps } from './Audio';
 import { ImageComponent } from '../Gallery';
 import { SafeAnchor } from '../SafeAnchor';
-import { PlayButton, ProgressBar } from './components';
+import { PlayButton } from './components/PlayButton';
+import { ProgressBar } from './components/ProgressBar';
 import { useAudioController } from './hooks/useAudioController';
 import { useChannelStateContext } from '../../context/ChannelStateContext';
 import { useTranslationContext } from '../../context/TranslationContext';

src/components/Attachment/FileAttachment.tsx

@@ -2,7 +2,8 @@ import React from 'react';
 import { FileIcon } from '../ReactFileUtilities';
 import type { Attachment } from 'stream-chat';
 
-import { DownloadButton, FileSizeIndicator } from './components';
+import { DownloadButton } from './components/DownloadButton';
+import { FileSizeIndicator } from './components/FileSizeIndicator';
 
 import type { DefaultStreamChatGenerics } from '../../types/types';
 

src/components/Attachment/UnsupportedAttachment.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FileIcon } from '../ReactFileUtilities';
-import { useTranslationContext } from '../../context';
+import { useTranslationContext } from '../../context/TranslationContext';
 import type { Attachment } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 

src/components/Attachment/VoiceRecording.tsx

@@ -1,11 +1,14 @@
 import React from 'react';
 import type { Attachment } from 'stream-chat';
 
-import { FileSizeIndicator, PlaybackRateButton, PlayButton, WaveProgressBar } from './components';
+import { FileSizeIndicator } from './components/FileSizeIndicator';
+import { PlaybackRateButton } from './components/PlaybackRateButton';
+import { WaveProgressBar } from './components/WaveProgressBar';
+import { PlayButton } from './components/PlayButton';
 import { useAudioController } from './hooks/useAudioController';
 import { displayDuration } from './utils';
 import { FileIcon } from '../ReactFileUtilities';
-import { useTranslationContext } from '../../context';
+import { useTranslationContext } from '../../context/TranslationContext';
 
 import type { DefaultStreamChatGenerics } from '../../types';
 

src/components/Attachment/hooks/useAudioController.ts

@@ -1,6 +1,7 @@
 import throttle from 'lodash.throttle';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useChannelActionContext, useTranslationContext } from '../../../context';
+import { useTranslationContext } from '../../../context/TranslationContext';
+import { useChannelActionContext } from '../../../context/ChannelActionContext';
 
 const isSeekable = (audioElement: HTMLAudioElement) =>
   !(audioElement.duration === Infinity || isNaN(audioElement.duration));

src/components/ChannelHeader/icons.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { useTranslationContext } from '../../context';
+import { useTranslationContext } from '../../context/TranslationContext';
 
 export const MenuIcon = ({ title }: { title?: string }) => {
   const { t } = useTranslationContext('MenuIcon');

src/components/ChannelList/ChannelList.tsx

@@ -31,7 +31,7 @@ import { LoadingChannels } from '../Loading/LoadingChannels';
 import { LoadMorePaginator, LoadMorePaginatorProps } from '../LoadMore/LoadMorePaginator';
 import { NullComponent } from '../UtilityComponents';
 
-import { ChannelListContextProvider } from '../../context';
+import { ChannelListContextProvider } from '../../context/ChannelListContext';
 import { useChatContext } from '../../context/ChatContext';
 
 import type { Channel, ChannelFilters, ChannelOptions, ChannelSort, Event } from 'stream-chat';

src/components/ChannelList/ChannelListMessenger.tsx

@@ -2,7 +2,7 @@ import React, { PropsWithChildren } from 'react';
 
 import { LoadingChannels } from '../Loading/LoadingChannels';
 import { NullComponent } from '../UtilityComponents';
-import { useTranslationContext } from '../../context';
+import { useTranslationContext } from '../../context/TranslationContext';
 
 import type { APIErrorResponse, Channel, ErrorFromResponse } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../types/types';

src/components/ChannelPreview/hooks/useChannelPreviewInfo.ts

@@ -4,7 +4,7 @@ import type { Channel } from 'stream-chat';
 import { getDisplayImage, getDisplayTitle } from '../utils';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 
-import { useChatContext } from '../../../context';
+import { useChatContext } from '../../../context/ChatContext';
 
 export type ChannelPreviewInfoParams<StreamChatGenerics extends DefaultStreamChatGenerics> = {
   channel: Channel<StreamChatGenerics>;

src/components/ChannelPreview/hooks/useMessageDeliveryStatus.ts

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useState } from 'react';
 import type { Channel, Event } from 'stream-chat';
 
-import { useChatContext } from '../../../context';
+import { useChatContext } from '../../../context/ChatContext';
 
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 import type { StreamMessage } from '../../../context';

src/components/ChannelSearch/SearchResults.tsx

@@ -6,7 +6,7 @@ import { ChannelPreview } from '../ChannelPreview';
 import { ChannelOrUserResponse, isChannel } from './utils';
 import { Avatar } from '../Avatar';
 
-import { useTranslationContext } from '../../context';
+import { useTranslationContext } from '../../context/TranslationContext';
 
 import type { DefaultStreamChatGenerics } from '../../types/types';
 

src/components/Gallery/Image.tsx

@@ -4,7 +4,7 @@ import { sanitizeUrl } from '@braintree/sanitize-url';
 import { BaseImage as DefaultBaseImage } from './BaseImage';
 import { Modal } from '../Modal';
 import { ModalGallery as DefaultModalGallery } from './ModalGallery';
-import { useComponentContext } from '../../context';
+import { useComponentContext } from '../../context/ComponentContext';
 
 import type { Attachment } from 'stream-chat';
 import type { DefaultStreamChatGenerics, Dimensions } from '../../types/types';

src/components/Gallery/ModalGallery.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import ImageGallery, { ReactImageGalleryItem } from 'react-image-gallery';
 import { BaseImage } from './BaseImage';
-import { useTranslationContext } from '../../context';
+import { useTranslationContext } from '../../context/TranslationContext';
 
 import type { Attachment } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../types/types';

src/components/LoadMore/LoadMoreButton.tsx

@@ -1,7 +1,7 @@
 import React, { PropsWithChildren, useEffect } from 'react';
 import { LoadingIndicator } from '../Loading';
 import { deprecationAndReplacementWarning } from '../../utils/deprecationWarning';
-import { useTranslationContext } from '../../context';
+import { useTranslationContext } from '../../context/TranslationContext';
 
 export type LoadMoreButtonProps = {
   /** onClick handler load more button. Pagination logic should be executed in this handler. */

src/components/MediaRecorder/AudioRecorder/AudioRecorder.tsx

@@ -10,7 +10,7 @@ import {
   PauseIcon,
   SendIcon,
 } from '../../MessageInput';
-import { useMessageInputContext } from '../../../context';
+import { useMessageInputContext } from '../../../context/MessageInputContext';
 
 export const AudioRecorder = () => {
   const {

src/components/MediaRecorder/AudioRecorder/AudioRecordingInProgress.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { useTimeElapsed } from '../../MessageInput/hooks/useTimeElapsed';
-import { useMessageInputContext } from '../../../context';
+import { useMessageInputContext } from '../../../context/MessageInputContext';
 import { RecordingTimer } from './RecordingTimer';
 
 type WaveformProps = {

src/components/MediaRecorder/RecordingPermissionDeniedNotification.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useTranslationContext } from '../../context';
+import { useTranslationContext } from '../../context/TranslationContext';
 
 import { RecordingPermission } from './classes/BrowserPermission';
 

src/components/MediaRecorder/classes/MediaRecorderController.ts

@@ -15,8 +15,8 @@ import {
   getRecordedMediaTypeFromMimeType,
   RecordedMediaType,
 } from '../../ReactFileUtilities';
-import { TranslationContextValue } from '../../../context';
-import { defaultTranslatorFunction } from '../../../i18n';
+import { TranslationContextValue } from '../../../context/TranslationContext';
+import { defaultTranslatorFunction } from '../../../i18n/utils';
 import { isSafari } from '../../../utils/browsers';
 import { mergeDeepUndefined } from '../../../utils/mergeDeep';
 

src/components/MediaRecorder/classes/__tests__/MediaRecorderController.test.js

@@ -9,7 +9,7 @@ import {
   RecordingAttachmentType,
 } from '../MediaRecorderController';
 import { AmplitudeRecorderState, DEFAULT_AMPLITUDE_RECORDER_CONFIG } from '../AmplitudeRecorder';
-import { defaultTranslatorFunction } from '../../../../i18n';
+import { defaultTranslatorFunction } from '../../../../i18n/utils';
 import * as audioSampling from '../../../Attachment/audioSampling';
 import * as reactFileUtils from '../../../ReactFileUtilities/utils';
 import { generateVoiceRecordingAttachment } from '../../../../mock-builders';

src/components/MediaRecorder/hooks/useMediaRecorder.ts

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { MessageInputContextValue, useTranslationContext } from '../../../context';
+import { useTranslationContext } from '../../../context/TranslationContext';
+import type { MessageInputContextValue } from '../../../context/MessageInputContext';
 import {
   CustomAudioRecordingConfig,
   MediaRecorderController,

src/components/Message/Message.tsx

@@ -19,14 +19,11 @@ import {
 } from './hooks';
 import { areMessagePropsEqual, getMessageActions, MESSAGE_ACTIONS } from './utils';
 
-import {
-  MessageContextValue,
-  MessageProvider,
-  useChannelActionContext,
-  useChannelStateContext,
-  useChatContext,
-  useComponentContext,
-} from '../../context';
+import { useComponentContext } from '../../context/ComponentContext';
+import { useChatContext } from '../../context/ChatContext';
+import { useChannelStateContext } from '../../context/ChannelStateContext';
+import { useChannelActionContext } from '../../context/ChannelActionContext';
+import { MessageContextValue, MessageProvider } from '../../context/MessageContext';
 
 import type { MessageProps } from './types';
 import type { DefaultStreamChatGenerics } from '../../types/types';

src/components/Message/MessageEditedTimestamp.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
 
 import clsx from 'clsx';
-import { useComponentContext, useMessageContext, useTranslationContext } from '../../context';
+import { useComponentContext } from '../../context/ComponentContext';
+import { useMessageContext } from '../../context/MessageContext';
+import { useTranslationContext } from '../../context/TranslationContext';
 import { Timestamp as DefaultTimestamp } from './Timestamp';
 import { isMessageEdited } from './utils';
 

src/components/Message/MessageErrorText.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { StreamMessage, useTranslationContext } from '../../context';
+import type { StreamMessage } from '../../context';
+import { useTranslationContext } from '../../context/TranslationContext';
 import { DefaultStreamChatGenerics } from '../../types/types';
 import { isMessageBounced } from './utils';
 

src/components/Message/MessageOptions.tsx

@@ -12,7 +12,7 @@ import { MessageActions } from '../MessageActions';
 import { MessageContextValue, useMessageContext } from '../../context/MessageContext';
 
 import type { DefaultStreamChatGenerics, IconProps } from '../../types/types';
-import { useTranslationContext } from '../../context';
+import { useTranslationContext } from '../../context/TranslationContext';
 
 export type MessageOptionsProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics

src/components/Message/MessageSimple.tsx

@@ -33,7 +33,7 @@ import { MessageContextValue, useMessageContext } from '../../context/MessageCon
 import type { MessageUIComponentProps } from './types';
 
 import type { DefaultStreamChatGenerics } from '../../types/types';
-import { useTranslationContext } from '../../context';
+import { useTranslationContext } from '../../context/TranslationContext';
 import { MessageEditedTimestamp } from './MessageEditedTimestamp';
 
 type MessageSimpleWithContextProps<

src/components/Message/MessageText.tsx

@@ -4,7 +4,9 @@ import React, { useMemo } from 'react';
 import { QuotedMessage as DefaultQuotedMessage } from './QuotedMessage';
 import { isOnlyEmojis, messageHasAttachments } from './utils';
 
-import { useComponentContext, useMessageContext, useTranslationContext } from '../../context';
+import { useComponentContext } from '../../context/ComponentContext';
+import { useMessageContext } from '../../context/MessageContext';
+import { useTranslationContext } from '../../context/TranslationContext';
 import { renderText as defaultRenderText } from './renderText';
 import { MessageErrorText } from './MessageErrorText';
 

src/components/Message/MessageTimestamp.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useMessageContext } from '../../context/MessageContext';
 import { Timestamp as DefaultTimestamp } from './Timestamp';
-import { useComponentContext } from '../../context';
+import { useComponentContext } from '../../context/ComponentContext';
 
 import type { StreamMessage } from '../../context/ChannelStateContext';
 import type { DefaultStreamChatGenerics } from '../../types/types';

src/components/Message/__tests__/MessageTimestamp.test.js

@@ -10,7 +10,6 @@ import { notValidDateWarning } from '../../../i18n/utils';
 import { Chat } from '../../Chat';
 import { getTestClient } from '../../../mock-builders';
 import { Streami18n } from '../../../i18n';
-
 Dayjs.extend(calendar);
 
 const calendarFormats = {
@@ -124,7 +123,7 @@ describe('<MessageTimestamp />', () => {
         }),
       },
     });
-    expect(container).toHaveTextContent('2019-04-03T14:42:47+00:00');
+    expect(container).toHaveTextContent('2019-04-03T14:42:47Z');
   });
 
   it('should render with custom format provided via i18n service', async () => {
@@ -172,7 +171,7 @@ describe('<MessageTimestamp />', () => {
       },
       props: { calendarFormats },
     });
-    expect(container).toHaveTextContent('2019-04-03T14:42:47+00:00');
+    expect(container).toHaveTextContent('2019-04-03T14:42:47Z');
   });
 
   it('should reflect the custom calendarFormats if calendar is enabled', async () => {

src/components/Message/hooks/useMarkUnreadHandler.ts

@@ -1,5 +1,6 @@
 import { validateAndGetMessage } from '../utils';
-import { useChannelStateContext, useTranslationContext } from '../../../context';
+import { useChannelStateContext } from '../../../context/ChannelStateContext';
+import { useTranslationContext } from '../../../context/TranslationContext';
 
 import type { StreamMessage } from '../../../context';
 import type { ReactEventHandler } from '../types';

src/components/Message/hooks/useReactionsFetcher.ts

@@ -1,4 +1,6 @@
-import { StreamMessage, useChatContext, useTranslationContext } from '../../../context';
+import { useChatContext } from '../../../context/ChatContext';
+import { useTranslationContext } from '../../../context/TranslationContext';
+import type { StreamMessage } from '../../../context';
 import { DefaultStreamChatGenerics } from '../../../types/types';
 import { ReactionResponse, ReactionSort, StreamChat } from 'stream-chat';
 import { ReactionType } from '../../Reactions/types';

src/components/MessageActions/MessageActions.tsx

@@ -17,7 +17,7 @@ import { MessageContextValue, useMessageContext } from '../../context/MessageCon
 
 import type { DefaultStreamChatGenerics, IconProps } from '../../types/types';
 import { useMessageActionsBoxPopper } from './hooks';
-import { useTranslationContext } from '../../context';
+import { useTranslationContext } from '../../context/TranslationContext';
 
 type MessageContextPropsToPick =
   | 'getMessageActions'