feat: add translation building capability to Streami18n and useNotifications hook (#2719)

Author: MartinCupela

package.json

@@ -110,7 +110,7 @@
     "emoji-regex": "^9.2.0",
     "fix-webm-duration": "^1.0.5",
     "hast-util-find-and-replace": "^5.0.1",
-    "i18next": "^21.6.14",
+    "i18next": "^25.2.1",
     "linkifyjs": "^4.1.0",
     "lodash.debounce": "^4.0.8",
     "lodash.defaultsdeep": "^4.6.1",
@@ -226,7 +226,7 @@
     "eslint-plugin-sort-destructure-keys": "^2.0.0",
     "globals": "^15.13.0",
     "husky": "^8.0.3",
-    "i18next-parser": "^6.0.0",
+    "i18next-parser": "^9.3.0",
     "jest": "^29.7.0",
     "jest-axe": "^8.0.0",
     "jest-environment-jsdom": "^29.7.0",

src/components/Attachment/AttachmentActions.tsx

@@ -38,7 +38,7 @@ const UnMemoizedAttachmentActions = (props: AttachmentActionsProps) => {
             key={`${id}-${action.value}`}
             onClick={(event) => handleActionClick(event, action.name, action.value)}
           >
-            {action.text ? t<string>(action.text) : null}
+            {action.text ? t(action.text) : null}
           </button>
         ))}
       </div>

src/components/Attachment/Card.tsx

@@ -34,7 +34,7 @@ const UnableToRenderCard = ({ type }: { type?: CardProps['type'] }) => {
     >
       <div className='str-chat__message-attachment-card--content'>
         <div className='str-chat__message-attachment-card--text'>
-          {t<string>('this content could not be displayed')}
+          {t('this content could not be displayed')}
         </div>
       </div>
     </div>

src/components/Attachment/UnsupportedAttachment.tsx

@@ -21,7 +21,7 @@ export const UnsupportedAttachment = ({ attachment }: UnsupportedAttachmentProps
           className='str-chat__message-attachment-unsupported__title'
           data-testid='unsupported-attachment-title'
         >
-          {attachment.title || t<string>('Unsupported attachment')}
+          {attachment.title || t('Unsupported attachment')}
         </div>
       </div>
     </div>

src/components/Attachment/VoiceRecording.tsx

@@ -28,7 +28,7 @@ export const VoiceRecordingPlayer = ({
     asset_url,
     duration = 0,
     mime_type,
-    title = t<string>('Voice message'),
+    title = t('Voice message'),
     waveform_data,
   } = attachment;
 
@@ -100,7 +100,7 @@ export type QuotedVoiceRecordingProps = Pick<VoiceRecordingProps, 'attachment'>;
 
 export const QuotedVoiceRecording = ({ attachment }: QuotedVoiceRecordingProps) => {
   const { t } = useTranslationContext();
-  const title = attachment.title || t<string>('Voice message');
+  const title = attachment.title || t('Voice message');
   return (
     <div className={rootClassName} data-testid='quoted-voice-recording-widget'>
       <div className='str-chat__message-attachment__voice-recording-widget__metadata'>

src/components/Attachment/hooks/useAudioController.ts

@@ -125,7 +125,7 @@ export const useAudioController = ({
     audioElement.addEventListener('ended', handleEnded);
 
     const handleError = () => {
-      addNotification(t<string>('Error reproducing the recording'), 'error');
+      addNotification(t('Error reproducing the recording'), 'error');
       setIsPlaying(false);
     };
     audioElement.addEventListener('error', handleError);

src/components/Channel/Channel.tsx

@@ -397,7 +397,7 @@ const ChannelInner = (
               document.title = originalTitle.current;
             }
           } catch (e) {
-            console.error(t<string>('Failed to mark channel as read'));
+            console.error(t('Failed to mark channel as read'));
           }
         },
         500,
@@ -1339,7 +1339,7 @@ const ChannelInner = (
   if (!channel.watch) {
     return (
       <ChannelContainer>
-        <div>{t<string>('Channel Missing')}</div>
+        <div>{t('Channel Missing')}</div>
       </ChannelContainer>
     );
   }

src/components/ChannelHeader/ChannelHeader.tsx

@@ -63,9 +63,7 @@ export const ChannelHeader = (props: ChannelHeaderProps) => {
         <p className='str-chat__channel-header-title'>
           {displayTitle}{' '}
           {live && (
-            <span className='str-chat__header-livestream-livelabel'>
-              {t<string>('live')}
-            </span>
+            <span className='str-chat__header-livestream-livelabel'>{t('live')}</span>
           )}
         </p>
         {subtitle && <p className='str-chat__channel-header-subtitle'>{subtitle}</p>}
@@ -78,7 +76,7 @@ export const ChannelHeader = (props: ChannelHeaderProps) => {
               ,{' '}
             </>
           )}
-          {t<string>('{{ watcherCount }} online', { watcherCount: watcher_count })}
+          {t('{{ watcherCount }} online', { watcherCount: watcher_count })}
         </p>
       </div>
     </div>

src/components/ChannelHeader/icons.tsx

@@ -7,7 +7,7 @@ export const MenuIcon = ({ title }: { title?: string }) => {
 
   return (
     <svg data-testid='menu-icon' viewBox='0 0 448 512' xmlns='http://www.w3.org/2000/svg'>
-      <title>{title ?? t<string>('Menu')}</title>
+      <title>{title ?? t('Menu')}</title>
       <path
         d='M0 88C0 74.75 10.75 64 24 64H424C437.3 64 448 74.75 448 88C448 101.3 437.3 112 424 112H24C10.75 112 0 101.3 0 88zM0 248C0 234.7 10.75 224 24 224H424C437.3 224 448 234.7 448 248C448 261.3 437.3 272 424 272H24C10.75 272 0 261.3 0 248zM424 432H24C10.75 432 0 421.3 0 408C0 394.7 10.75 384 24 384H424C437.3 384 448 394.7 448 408C448 421.3 437.3 432 424 432z'
         fill='currentColor'

src/components/ChannelPreview/utils.tsx

@@ -38,20 +38,20 @@ export const getLatestMessagePreview = (
   const poll = latestMessage?.poll;
 
   if (!latestMessage) {
-    return t<string>('Nothing yet...');
+    return t('Nothing yet...');
   }
 
   if (latestMessage.deleted_at) {
-    return t<string>('Message deleted');
+    return t('Message deleted');
   }
 
   if (poll) {
     if (!poll.vote_count) {
       const createdBy =
         poll.created_by?.id === channel.getClient().userID
-          ? t<string>('You')
-          : (poll.created_by?.name ?? t<string>('Poll'));
-      return t<string>('📊 {{createdBy}} created: {{ pollName}}', {
+          ? t('You')
+          : (poll.created_by?.name ?? t('Poll'));
+      return t('📊 {{createdBy}} created: {{ pollName}}', {
         createdBy,
         pollName: poll.name,
       });
@@ -63,12 +63,12 @@ export const getLatestMessagePreview = (
         latestVote && poll.options.find((opt) => opt.id === latestVote.option_id);
 
       if (option && latestVote) {
-        return t<string>('📊 {{votedBy}} voted: {{pollOptionText}}', {
+        return t('📊 {{votedBy}} voted: {{pollOptionText}}', {
           pollOptionText: option.text,
           votedBy:
             latestVote?.user?.id === channel.getClient().userID
-              ? t<string>('You')
-              : (latestVote.user?.name ?? t<string>('Poll')),
+              ? t('You')
+              : (latestVote.user?.name ?? t('Poll')),
         });
       }
     }
@@ -85,10 +85,10 @@ export const getLatestMessagePreview = (
   }
 
   if (latestMessage.attachments?.length) {
-    return t<string>('🏙 Attachment...');
+    return t('🏙 Attachment...');
   }
 
-  return t<string>('Empty message...');
+  return t('Empty message...');
 };
 
 export type GroupChannelDisplayInfo = { image?: string; name?: string }[];