refactor: uploadProgress renamed to Progress and moved outside of message composer

Author: szuperaz

src/components/Loading/ProgressIndicator.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+
+import { useTranslationContext } from '../../context/TranslationContext';
+
+const RING_RADIUS = 12;
+const RING_CIRCUMFERENCE = 2 * Math.PI * RING_RADIUS;
+
+export type ProgressIndicatorProps = {
+  /** Clamped 0–100 completion. */
+  percent: number;
+};
+
+/** Circular progress indicator with input from 0 to 100. */
+export const ProgressIndicator = ({ percent }: ProgressIndicatorProps) => {
+  const { t } = useTranslationContext('ProgressIndicator');
+  const dashOffset = RING_CIRCUMFERENCE * (1 - percent / 100);
+
+  return (
+    <div className='str-chat__upload-progress'>
+      <svg
+        aria-label={t('aria/Progress', { percent })}
+        aria-valuemax={100}
+        aria-valuemin={0}
+        aria-valuenow={percent}
+        data-testid='progress-ring'
+        height='100%'
+        role='progressbar'
+        viewBox='0 0 32 32'
+        width='100%'
+        xmlns='http://www.w3.org/2000/svg'
+      >
+        <circle
+          cx='16'
+          cy='16'
+          fill='none'
+          r={RING_RADIUS}
+          stroke='currentColor'
+          strokeOpacity={0.35}
+          strokeWidth='2.5'
+        />
+        <circle
+          cx='16'
+          cy='16'
+          fill='none'
+          r={RING_RADIUS}
+          stroke='currentColor'
+          strokeDasharray={RING_CIRCUMFERENCE}
+          strokeDashoffset={dashOffset}
+          strokeLinecap='round'
+          strokeWidth='2.5'
+          transform='rotate(-90 16 16)'
+        />
+      </svg>
+    </div>
+  );
+};

src/components/Loading/index.ts

@@ -2,3 +2,4 @@ export * from './LoadingChannel';
 export * from './LoadingChannels';
 export * from './LoadingErrorIndicator';
 export * from './LoadingIndicator';
+export * from './ProgressIndicator';

src/components/MessageComposer/AttachmentPreviewList/AttachmentUploadProgressIndicator.tsx

@@ -1,8 +1,9 @@
 import clsx from 'clsx';
 import React, { type ReactNode } from 'react';
 
+import { ProgressIndicator as DefaultProgressIndicator } from '../../Loading';
 import { useComponentContext } from '../../../context';
-import { UploadProgress as DefaultUploadProgress, LoadingIndicatorIcon } from '../icons';
+import { LoadingIndicatorIcon } from '../icons';
 import { clampUploadPercent } from './utils/uploadProgress';
 
 export type AttachmentUploadProgressVariant = 'inline' | 'overlay';
@@ -21,7 +22,7 @@ export const AttachmentUploadProgressIndicator = ({
   uploadProgress,
   variant,
 }: AttachmentUploadProgressIndicatorProps) => {
-  const { UploadProgress = DefaultUploadProgress } = useComponentContext(
+  const { ProgressIndicator = DefaultProgressIndicator } = useComponentContext(
     'AttachmentUploadProgressIndicator',
   );
 
@@ -39,7 +40,7 @@ export const AttachmentUploadProgressIndicator = ({
         className,
       )}
     >
-      <UploadProgress percent={percent} />
+      <ProgressIndicator percent={percent} />
     </div>
   );
 };

src/components/MessageComposer/__tests__/AttachmentPreviewList.test.tsx

@@ -338,9 +338,7 @@ describe('AttachmentPreviewList', () => {
       });
 
       expect(screen.getByTestId(LOADING_INDICATOR_TEST_ID)).toBeInTheDocument();
-      expect(
-        screen.queryByTestId('attachment-upload-progress-ring'),
-      ).not.toBeInTheDocument();
+      expect(screen.queryByTestId('progress-ring')).not.toBeInTheDocument();
     });
 
     it('shows ring while uploading when uploadProgress is numeric', async () => {
@@ -357,7 +355,7 @@ describe('AttachmentPreviewList', () => {
         ],
       });
 
-      expect(screen.getByTestId('attachment-upload-progress-ring')).toBeInTheDocument();
+      expect(screen.getByTestId('progress-ring')).toBeInTheDocument();
       expect(screen.queryByTestId(LOADING_INDICATOR_TEST_ID)).not.toBeInTheDocument();
     });
 

src/components/MessageComposer/icons.tsx

@@ -3,59 +3,6 @@ import { nanoid } from 'nanoid';
 
 import { useTranslationContext } from '../../context/TranslationContext';
 
-const UPLOAD_RING_RADIUS = 12;
-const UPLOAD_RING_CIRCUMFERENCE = 2 * Math.PI * UPLOAD_RING_RADIUS;
-
-export type UploadProgressProps = {
-  /** Clamped 0–100 upload completion. */
-  percent: number;
-};
-
-/** Determinate circular upload progress ring (not a spinner; uses `str-chat__upload-progress`, not the loading-indicator spinner). */
-export const UploadProgress = ({ percent }: UploadProgressProps) => {
-  const { t } = useTranslationContext('UploadProgress');
-  const dashOffset = UPLOAD_RING_CIRCUMFERENCE * (1 - percent / 100);
-
-  return (
-    <div className='str-chat__upload-progress'>
-      <svg
-        aria-label={t('aria/Upload progress', { percent })}
-        aria-valuemax={100}
-        aria-valuemin={0}
-        aria-valuenow={percent}
-        data-testid='attachment-upload-progress-ring'
-        height='100%'
-        role='progressbar'
-        viewBox='0 0 32 32'
-        width='100%'
-        xmlns='http://www.w3.org/2000/svg'
-      >
-        <circle
-          cx='16'
-          cy='16'
-          fill='none'
-          r={UPLOAD_RING_RADIUS}
-          stroke='currentColor'
-          strokeOpacity={0.35}
-          strokeWidth='2.5'
-        />
-        <circle
-          cx='16'
-          cy='16'
-          fill='none'
-          r={UPLOAD_RING_RADIUS}
-          stroke='currentColor'
-          strokeDasharray={UPLOAD_RING_CIRCUMFERENCE}
-          strokeDashoffset={dashOffset}
-          strokeLinecap='round'
-          strokeWidth='2.5'
-          transform='rotate(-90 16 16)'
-        />
-      </svg>
-    </div>
-  );
-};
-
 export const LoadingIndicatorIcon = () => {
   const id = useMemo(() => nanoid(), []);
 

src/context/ComponentContext.tsx

@@ -72,7 +72,7 @@ import type { VideoPlayerProps } from '../components/VideoPlayer';
 import type { EditedMessagePreviewProps } from '../components/MessageComposer/EditedMessagePreview';
 import type { FileIconProps } from '../components/FileIcon/FileIcon';
 import type { CommandChipProps } from '../components/MessageComposer/CommandChip';
-import type { UploadProgressProps } from '../components/MessageComposer/icons';
+import type { ProgressIndicatorProps } from '../components/Loading/ProgressIndicator';
 
 export type ComponentContextValue = {
   /** Custom UI component to display additional message composer action buttons left to the textarea, defaults to and accepts same props as: [AdditionalMessageComposerActions](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageComposer/MessageComposerActions.tsx) */
@@ -143,8 +143,8 @@ export type ComponentContextValue = {
   LoadingErrorIndicator?: React.ComponentType<LoadingErrorIndicatorProps>;
   /** Custom UI component to render while the `MessageList` is loading new messages, defaults to and accepts same props as: [LoadingIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Loading/LoadingIndicator.tsx) */
   LoadingIndicator?: React.ComponentType<LoadingIndicatorProps>;
-  /** Custom UI component for determinate attachment upload progress (0–100) in attachment previews, defaults to and accepts same props as: [UploadProgress](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageComposer/icons.tsx) */
-  UploadProgress?: React.ComponentType<UploadProgressProps>;
+  /** Custom UI component for determinate progress (0–100), defaults to and accepts same props as: [ProgressIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Loading/ProgressIndicator.tsx) */
+  ProgressIndicator?: React.ComponentType<ProgressIndicatorProps>;
   /** Custom UI component to display a message in the standard `MessageList`, defaults to and accepts the same props as: [MessageUI](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageUI.tsx) */
   Message?: React.ComponentType<MessageUIComponentProps>;
   /** Custom UI component for message actions popup, accepts no props, all the defaults are set within [MessageActions (unstable)](https://github.com/GetStream/stream-chat-react/blob/master/src/experimental/MessageActions/MessageActions.tsx) */

src/i18n/de.json

@@ -84,6 +84,7 @@
   "aria/Open Reaction Selector": "Reaktionsauswahl öffnen",
   "aria/Open Thread": "Thread öffnen",
   "aria/Pin Message": "Nachricht anheften",
+  "aria/Progress": "{{percent}} Prozent abgeschlossen",
   "aria/Quote Message": "Nachricht zitieren",
   "aria/Reaction list": "Reaktionsliste",
   "aria/Remind Me Message": "Erinnern",
@@ -102,7 +103,6 @@
   "aria/Unblock User": "Benutzer entsperren",
   "aria/Unmute User": "Stummschaltung aufheben",
   "aria/Unpin Message": "Anheftung aufheben",
-  "aria/Upload progress": "{{percent}} Prozent hochgeladen",
   "Ask a question": "Eine Frage stellen",
   "Attach": "Anhängen",
   "Attach files": "Dateien anhängen",

src/i18n/en.json

@@ -84,6 +84,7 @@
   "aria/Open Reaction Selector": "Open Reaction Selector",
   "aria/Open Thread": "Open Thread",
   "aria/Pin Message": "Pin Message",
+  "aria/Progress": "{{percent}} percent complete",
   "aria/Quote Message": "Quote Message",
   "aria/Reaction list": "Reaction list",
   "aria/Remind Me Message": "Remind Me Message",
@@ -102,7 +103,6 @@
   "aria/Unblock User": "Unblock User",
   "aria/Unmute User": "Unmute User",
   "aria/Unpin Message": "Unpin Message",
-  "aria/Upload progress": "{{percent}} percent uploaded",
   "Ask a question": "Ask a Question",
   "Attach": "Attach",
   "Attach files": "Attach files",

src/i18n/es.json

@@ -92,6 +92,7 @@
   "aria/Open Reaction Selector": "Abrir selector de reacciones",
   "aria/Open Thread": "Abrir hilo",
   "aria/Pin Message": "Fijar mensaje",
+  "aria/Progress": "{{percent}} por ciento completado",
   "aria/Quote Message": "Citar mensaje",
   "aria/Reaction list": "Lista de reacciones",
   "aria/Remind Me Message": "Recordarme",
@@ -110,7 +111,6 @@
   "aria/Unblock User": "Desbloquear usuario",
   "aria/Unmute User": "Activar sonido",
   "aria/Unpin Message": "Desfijar mensaje",
-  "aria/Upload progress": "{{percent}} por ciento cargado",
   "Ask a question": "Hacer una pregunta",
   "Attach": "Adjuntar",
   "Attach files": "Adjuntar archivos",

src/i18n/fr.json

@@ -92,6 +92,7 @@
   "aria/Open Reaction Selector": "Ouvrir le sélecteur de réactions",
   "aria/Open Thread": "Ouvrir le fil",
   "aria/Pin Message": "Épingler le message",
+  "aria/Progress": "{{percent}} pour cent terminé",
   "aria/Quote Message": "Citer le message",
   "aria/Reaction list": "Liste des réactions",
   "aria/Remind Me Message": "Me rappeler",
@@ -110,7 +111,6 @@
   "aria/Unblock User": "Débloquer l'utilisateur",
   "aria/Unmute User": "Désactiver muet",
   "aria/Unpin Message": "Détacher le message",
-  "aria/Upload progress": "{{percent}} pour cent téléchargés",
   "Ask a question": "Poser une question",
   "Attach": "Joindre",
   "Attach files": "Joindre des fichiers",