docs(react-native): UI Component - CallTopView, CallControls (#934)

packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/call/call-controls.mdx

@@ -3,16 +3,18 @@ id: call-controls
 title: CallControls
 ---
 
+import OnHangupCallHandler from '../../common-content/ui-components/call/call-content/on-hangup-call-handler.mdx';
+
 CallControls allows users to execute actions during the call(for example, mute/unmute audio/video, reactions, hang-up calls, etc.).
 We provide a built-in `CallControls` component that displays all relevant call controls during a call.
 
-![Preview of the CallControls component.](../../assets/04-ui-components/call-controls.png)
+![Preview of the CallControls component.](../../assets/04-ui-components/call/call-controls/call-controls.png)
 
 ## General Usage
 
 The `CallControls` component displays the available controls for the call.
 
-```tsx
+```tsx {13}
 import {
   Call,
   CallContent,
@@ -25,7 +27,6 @@ const VideoCallUI = () => {
 
   return (
     <StreamCall call={call}>
-      // highlight-next-line
       <CallControls />
     </StreamCall>
   );
@@ -36,17 +37,13 @@ const VideoCallUI = () => {
 
 ### `onHangupCallHandler`
 
-| Type                        |
-| --------------------------- |
-| `() => void` \| `undefined` |
-
-Handler to be called when the call is left using the Hang up call button.
+<OnHangupCallHandler />
 
 ## Built-in call controls
 
 Each call control is available as a separate UI component.
 
-### `AcceptCallButton`
+### [`AcceptCallButton`](https://github.com/GetStream/stream-video-js/blob/main/packages/react-native-sdk/src/components/Call/CallControls/AcceptCallButton.tsx)
 
 This component is used in the [Incoming Call](../incoming-call) component to accept an incoming call.
 
@@ -55,7 +52,7 @@ This component is used in the [Incoming Call](../incoming-call) component to acc
 | `onPressHandler`      | `() => void` \| `undefined` | Handler to be called when the accept call button is pressed. Used to override the default behaviour. |
 | `onAcceptCallHandler` | `() => void` \| `undefined` | Handler to be called after the incoming call is accepted.                                            |
 
-### `HangupCallButton`
+### [`HangupCallButton`](https://github.com/GetStream/stream-video-js/blob/main/packages/react-native-sdk/src/components/Call/CallControls/HangupCallButton.tsx)
 
 This component is used to hangup/leave an active call/outgoing call.
 
@@ -64,7 +61,7 @@ This component is used to hangup/leave an active call/outgoing call.
 | `onPressHandler`      | `() => void` \| `undefined` | Handler to be called when the hang up call button is pressed. Used to override the default behaviour. |
 | `onHangupCallHandler` | `() => void` \| `undefined` | Handler to be called after the call is hanged up.                                                     |
 
-### `RejectCallButton`
+### [`RejectCallButton`](https://github.com/GetStream/stream-video-js/blob/main/packages/react-native-sdk/src/components/Call/CallControls/RejectCallButton.tsx)
 
 This component is used in the [Incoming Call](../incoming-call) component to reject an incoming call.
 
@@ -73,47 +70,47 @@ This component is used in the [Incoming Call](../incoming-call) component to rej
 | `onPressHandler`      | `() => void` \| `undefined` | Handler to be called when the reject call button is pressed. Used to override the default behaviour. |
 | `onRejectCallHandler` | `() => void` \| `undefined` | Handler to be called after the incoming call is rejected.                                            |
 
-### `ToggleAudioPreviewButton`
+### [`ToggleAudioPreviewButton`](https://github.com/GetStream/stream-video-js/blob/main/packages/react-native-sdk/src/components/Call/CallControls/ToggleAudioPreviewButton.tsx)
 
 This component is used to toggle audio mute/unmute status before joining the call.
 
 | Type             | Type                        | Description                                                                                            |
 | ---------------- | --------------------------- | ------------------------------------------------------------------------------------------------------ |
 | `onPressHandler` | `() => void` \| `undefined` | Handler to be called when the audio preview button is pressed. Used to override the default behaviour. |
 
-### `ToggleVideoPreviewButton`
+### [`ToggleVideoPreviewButton`](https://github.com/GetStream/stream-video-js/blob/main/packages/react-native-sdk/src/components/Call/CallControls/ToggleVideoPreviewButton.tsx)
 
 This component is used to toggle video mute/unmute status before joining the call.
 
 | Type             | Type                        | Description                                                                                            |
 | ---------------- | --------------------------- | ------------------------------------------------------------------------------------------------------ |
 | `onPressHandler` | `() => void` \| `undefined` | Handler to be called when the video preview button is pressed. Used to override the default behaviour. |
 
-### `ToggleAudioPublishingButton`
+### [`ToggleAudioPublishingButton`](https://github.com/GetStream/stream-video-js/blob/main/packages/react-native-sdk/src/components/Call/CallControls/ToggleAudioPublishingButton.tsx)
 
 This component is used to toggle audio mute/unmute status while in the call.
 
 | Type             | Type                        | Description                                                                |
 | ---------------- | --------------------------- | -------------------------------------------------------------------------- |
 | `onPressHandler` | `() => void` \| `undefined` | Handler to override the default behaviour of the audio publishing button.. |
 
-### `ToggleVideoPublishingButton`
+### [`ToggleVideoPublishingButton`](https://github.com/GetStream/stream-video-js/blob/main/packages/react-native-sdk/src/components/Call/CallControls/ToggleVideoPublishingButton.tsx)
 
 This component is used to toggle video mute/unmute status while in the call.
 
 | Type             | Type                        | Description                                                               |
 | ---------------- | --------------------------- | ------------------------------------------------------------------------- |
 | `onPressHandler` | `() => void` \| `undefined` | Handler to override the default behaviour of the video publishing button. |
 
-### `ToggleCameraFaceButton`
+### [`ToggleCameraFaceButton`](https://github.com/GetStream/stream-video-js/blob/main/packages/react-native-sdk/src/components/Call/CallControls/ToggleCameraFaceButton.tsx)
 
 This component is used to toggle camera face(front/back) when in the call.
 
 | Type             | Type                        | Description                                                                 |
 | ---------------- | --------------------------- | --------------------------------------------------------------------------- |
 | `onPressHandler` | `() => void` \| `undefined` | Handler to override the default behaviour of the toggle camera face button. |
 
-### `ReactionButton`
+### [`ReactionButton`](https://github.com/GetStream/stream-video-js/blob/main/packages/react-native-sdk/src/components/Call/CallControls/ReactionButton.tsx)
 
 This component is used to display the list of Reactions supported in the call. It can also be used to send reactions.
 
@@ -127,7 +124,7 @@ The following reactions are supported by default:
 | ---------------- | --------------------------- | ------------------------------------------------------------------------------- |
 | `onPressHandler` | `() => void` \| `undefined` | Handler to override the default behaviour when the reactions button is pressed. |
 
-### `ChatButton`
+### [`ChatButton`](https://github.com/GetStream/stream-video-js/blob/main/packages/react-native-sdk/src/components/Call/CallControls/ChatButton.tsx)
 
 This component is used to display/open the chat window while in the call.
 

packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/call/call-top-view.mdx

@@ -0,0 +1,63 @@
+---
+id: call-top-view
+title: CallTopView
+---
+
+import ParticipantsInfoBadge from '../../common-content/ui-components/call/call-content/participants-info-badge.mdx';
+import OnBackPressed from '../../common-content/ui-components/call/call-content/on-back-pressed.mdx';
+import OnParticipantInfoPress from '../../common-content/ui-components/call/call-content/on-participant-info-press.mdx';
+import CallTopViewTitle from '../../common-content/ui-components/call/call-top-view/title.mdx';
+import CallTopViewStyle from '../../common-content/ui-components/call/call-top-view/style.mdx';
+
+The `CallTopView` represents the header component that gives the user more information when in a call, while adding a few actions they can trigger while the call is active. The header is useful for showing the call name or title, as well as the state, such as if the user is fully connected to the call or not.
+It has a back button by default and a participant info badge.
+
+![Preview of the CallTopView component](../../assets/04-ui-components/call/call-top-view/call-top-view.png)
+
+## General Usage
+
+To use the component, you can simple use it as:
+
+```tsx {12}
+import {
+  Call,
+  CallTopView,
+  StreamCall,
+} from '@stream-io/video-react-native-sdk';
+
+const VideoCallUI = () => {
+  let call: Call;
+
+  return (
+    <StreamCall call={call}>
+      <CallTopView />
+    </StreamCall>
+  );
+};
+```
+
+## Props
+
+### `onBackPressed`
+
+<OnBackPressed />
+
+### `onParticipantInfoPress`
+
+<OnParticipantInfoPress />
+
+### `title`
+
+<CallTopViewTitle />
+
+### `style`
+
+<CallTopViewStyle />
+
+### `ParticipantsInfoBadge`
+
+<ParticipantsInfoBadge />
+
+## Customization
+
+You can create your own custom `CallTopView` using the [Call Top View UI Cookbook guide](../../../ui-cookbook/replacing-call-top-view/).

packages/react-native-sdk/docusaurus/docs/reactnative/05-ui-cookbook/04-replacing-call-top-view.mdx

@@ -0,0 +1,8 @@
+---
+title: Call Top View
+description: A guide on how to create Call Top View
+---
+
+:::info
+This will be added soon.
+:::

packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/call/call-content/on-back-pressed.mdx

@@ -0,0 +1,5 @@
+Handler to be called when the back button is pressed in the CallTopView.
+
+| Type                        |
+| --------------------------- |
+| `() => void` \| `undefined` |

packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/call/call-content/on-hangup-call-handler.mdx

@@ -0,0 +1,5 @@
+Handler to be called when the call is left using the [HangupCallButton](#hangupcallbutton).
+
+| Type                        |
+| --------------------------- |
+| `() => void` \| `undefined` |

packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/call/call-content/on-participant-info-press.mdx

@@ -0,0 +1,5 @@
+Handler to be called when the Participant icon is pressed in the CallTopView.
+
+| Type                        |
+| --------------------------- |
+| `() => void` \| `undefined` |

packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/call/call-content/participants-info-badge.mdx

@@ -0,0 +1,5 @@
+Component to customize the ParticipantInfoBadge of the CallTopView.
+
+| Type                          | Default Value                                                                                                                                                         |
+| ----------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `ComponentType`\| `undefined` | [`ParticipantsInfoBadge`](https://github.com/GetStream/stream-video-js/blob/main/packages/react-native-sdk/src/components/Call/CallTopView/ParticipantsInfoBadge.tsx) |

packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/call/call-top-view/style.mdx

@@ -0,0 +1,5 @@
+Style to override the container of the `CallTopView`.
+
+| Type                                                       |
+| ---------------------------------------------------------- |
+| [ViewStyle](https://reactnative.dev/docs/view-style-props) |

packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/call/call-top-view/title.mdx

@@ -0,0 +1,5 @@
+Title to be rendered at the center of the Header.
+
+| Type                    |
+| ----------------------- |
+| `string` \| `undefined` |

packages/react-native-sdk/src/components/Call/CallTopView/CallTopView.tsx

@@ -7,7 +7,10 @@ import {
   ViewStyle,
   Pressable,
 } from 'react-native';
-import { ParticipantsInfoBadge } from './ParticipantsInfoBadge';
+import {
+  ParticipantsInfoBadge as DefaultParticipantsInfoBadge,
+  ParticipantsInfoBadgeProps,
+} from './ParticipantsInfoBadge';
 import { theme } from '../../../theme';
 import { Back } from '../../../icons/Back';
 import { Z_INDEX } from '../../../constants';
@@ -34,13 +37,18 @@ export type CallTopViewProps = {
    * Style to override the container of the CallTopView.
    */
   style?: StyleProp<ViewStyle>;
+  /**
+   * Component to customize the ParticipantInfoBadge of the CallTopView.
+   */
+  ParticipantsInfoBadge?: React.ComponentType<ParticipantsInfoBadgeProps>;
 };
 
 export const CallTopView = ({
   onBackPressed,
   onParticipantInfoPress,
   title,
   style,
+  ParticipantsInfoBadge = DefaultParticipantsInfoBadge,
 }: CallTopViewProps) => {
   const { useCallCallingState } = useCallStateHooks();
   const callingState = useCallCallingState();
@@ -84,9 +92,11 @@ export const CallTopView = ({
           )}
         </View>
         <View style={styles.rightElement}>
-          <ParticipantsInfoBadge
-            onParticipantInfoPress={onParticipantInfoPress}
-          />
+          {ParticipantsInfoBadge && (
+            <ParticipantsInfoBadge
+              onParticipantInfoPress={onParticipantInfoPress}
+            />
+          )}
         </View>
       </View>
     </View>

packages/react-native-sdk/src/components/Call/CallTopView/ParticipantsInfoBadge.tsx

@@ -6,6 +6,9 @@ import { theme } from '../../../theme';
 import { Z_INDEX } from '../../../constants';
 import { CallTopViewProps } from '..';
 
+/**
+ * Props for the ParticipantsInfoBadge component.
+ */
 export type ParticipantsInfoBadgeProps = Pick<
   CallTopViewProps,
   'onParticipantInfoPress'