refactor: use ProgressIndicator in ComponentContext

Author: szuperaz

src/components/Loading/UploadProgressIndicator.tsx

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import React from 'react';
 
 import { useComponentContext } from '../../context';
-import { CircularProgressIndicator as DefaultCircularProgressIndicator } from './CircularProgressIndicator';
+import { CircularProgressIndicator as DefaultProgressIndicator } from './progress-indicators';
 import { LoadingIndicator as DefaultLoadingIndicator } from './LoadingIndicator';
 
 export type UploadProgressIndicatorProps = {
@@ -15,8 +15,8 @@ export const UploadProgressIndicator = ({
   uploadProgress,
 }: UploadProgressIndicatorProps) => {
   const {
-    CircularProgressIndicator = DefaultCircularProgressIndicator,
     LoadingIndicator = DefaultLoadingIndicator,
+    ProgressIndicator = DefaultProgressIndicator,
   } = useComponentContext();
 
   if (uploadProgress === undefined) {
@@ -25,7 +25,7 @@ export const UploadProgressIndicator = ({
 
   return (
     <div className={clsx('str-chat__attachment-upload-progress', className)}>
-      <CircularProgressIndicator percent={uploadProgress} />
+      <ProgressIndicator percent={uploadProgress} />
     </div>
   );
 };

src/components/Loading/index.ts

@@ -2,6 +2,6 @@ export * from './LoadingChannel';
 export * from './LoadingChannels';
 export * from './LoadingErrorIndicator';
 export * from './LoadingIndicator';
-export * from './CircularProgressIndicator';
+export * from './progress-indicators';
 export * from './UploadProgressIndicator';
 export * from './UploadedSizeIndicator';

…ts/Loading/CircularProgressIndicator.tsx …mponents/Loading/progress-indicators.tsxsrc/components/Loading/CircularProgressIndicator.tsx renamed to src/components/Loading/progress-indicators.tsx src/components/Loading/CircularProgressIndicator.tsx renamed to src/components/Loading/progress-indicators.tsx

@@ -5,15 +5,13 @@ import { useTranslationContext } from '../../context/TranslationContext';
 const RING_RADIUS = 12;
 const RING_CIRCUMFERENCE = 2 * Math.PI * RING_RADIUS;
 
-export type CircularProgressIndicatorProps = {
+export type ProgressIndicatorProps = {
   /** Clamped 0–100 completion. */
   percent: number;
 };
 
 /** Circular progress indicator with input from 0 to 100. */
-export const CircularProgressIndicator = ({
-  percent,
-}: CircularProgressIndicatorProps) => {
+export const CircularProgressIndicator = ({ percent }: ProgressIndicatorProps) => {
   const { t } = useTranslationContext('CircularProgressIndicator');
   const dashOffset = RING_CIRCUMFERENCE * (1 - percent / 100);
 

…g/styling/CircularProgressIndicator.scss …s/Loading/styling/ProgressIndicator.scsssrc/components/Loading/styling/CircularProgressIndicator.scss renamed to src/components/Loading/styling/ProgressIndicator.scss src/components/Loading/styling/CircularProgressIndicator.scss renamed to src/components/Loading/styling/ProgressIndicator.scss

@@ -1,3 +1,3 @@
 @use 'LoadingChannels';
 @use 'LoadingIndicator';
-@use 'CircularProgressIndicator';
+@use 'ProgressIndicator';

src/components/Loading/styling/index.scss

@@ -74,7 +74,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 { CircularProgressIndicatorProps } from '../components/Loading/CircularProgressIndicator';
+import type { ProgressIndicatorProps } from '../components/Loading/progress-indicators';
 import type { UploadedSizeIndicatorProps } from '../components/Loading/UploadedSizeIndicator';
 
 export type ComponentContextValue = {
@@ -150,8 +150,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 progress (0–100), defaults to and accepts same props as: [CircularProgressIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Loading/CircularProgressIndicator.tsx) */
-  CircularProgressIndicator?: React.ComponentType<CircularProgressIndicatorProps>;
+  /** 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/progress-indicators.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) */