fix(react): provide displayName for our core components (#1423)

Adds `.displayName` property to our core SDK components.
This should make it easier to debug our SDK in production/minified environments.

Context:
https://getstream.slack.com/archives/C06CF5TKRGA/p1719396728909279

packages/react-sdk/src/core/components/Audio/Audio.tsx

@@ -48,3 +48,5 @@ export const Audio = ({
     />
   );
 };
+
+Audio.displayName = 'Audio';

packages/react-sdk/src/core/components/Audio/ParticipantsAudio.tsx

@@ -55,3 +55,5 @@ export const ParticipantsAudio = (props: ParticipantsAudioProps) => {
     </>
   );
 };
+
+ParticipantsAudio.displayName = 'ParticipantsAudio';

packages/react-sdk/src/core/components/CallLayout/LivestreamLayout.tsx

@@ -180,6 +180,8 @@ const ParticipantOverlay = (props: {
   );
 };
 
+LivestreamLayout.displayName = 'LivestreamLayout';
+
 const useUpdateCallDuration = () => {
   const { useIsCallLive, useCallSession } = useCallStateHooks();
   const isCallLive = useIsCallLive();

packages/react-sdk/src/core/components/CallLayout/PaginatedGridLayout.tsx

@@ -159,3 +159,5 @@ export const PaginatedGridLayout = (props: PaginatedGridLayoutProps) => {
     </div>
   );
 };
+
+PaginatedGridLayout.displayName = 'PaginatedGridLayout';

packages/react-sdk/src/core/components/CallLayout/SpeakerLayout.tsx

@@ -181,6 +181,8 @@ export const SpeakerLayout = ({
   );
 };
 
+SpeakerLayout.displayName = 'SpeakerLayout';
+
 type ScrollButtonsProps<T extends HTMLElement> = {
   scrollWrapper: T | null;
 };

packages/react-sdk/src/core/components/ParticipantView/ParticipantView.tsx

@@ -179,3 +179,5 @@ export const ParticipantView = forwardRef<HTMLDivElement, ParticipantViewProps>(
     );
   },
 );
+
+ParticipantView.displayName = 'ParticipantView';

packages/react-sdk/src/core/components/StreamCall/StreamCall.tsx

@@ -1,4 +1,12 @@
-import { StreamCallProvider } from '@stream-io/video-react-bindings';
+import { ComponentType, PropsWithChildren } from 'react';
+import {
+  StreamCallProvider,
+  StreamCallProviderProps,
+} from '@stream-io/video-react-bindings';
 
 // re-exporting the StreamCallProvider as StreamCall
-export const StreamCall = StreamCallProvider;
+export const StreamCall: ComponentType<
+  PropsWithChildren<StreamCallProviderProps>
+> = StreamCallProvider;
+
+StreamCall.displayName = 'StreamCall';

packages/react-sdk/src/core/components/StreamVideo/StreamVideo.tsx

@@ -1,6 +1,6 @@
 import {
-  StreamVideoProvider,
   StreamVideoProps,
+  StreamVideoProvider,
 } from '@stream-io/video-react-bindings';
 import { PropsWithChildren } from 'react';
 import { translations } from '../../../translations';
@@ -10,3 +10,5 @@ export const StreamVideo = (props: PropsWithChildren<StreamVideoProps>) => {
     <StreamVideoProvider translationsOverrides={translations} {...props} />
   );
 };
+
+StreamVideo.displayName = 'StreamVideo';

packages/react-sdk/src/core/components/Video/Video.tsx

@@ -172,3 +172,5 @@ export const Video = ({
     </>
   );
 };
+
+Video.displayName = 'Video';