Skip to content

Commit d390da6

Browse files
harshs-dyteharshs-dyte
committed
[RealtimeKit] Add RealtimeKitUI component reference for iOS
1 parent 740cd36 commit d390da6

39 files changed

+1910
-0
lines changed

‎src/content/docs/realtime/realtimekit/ui-kit/api-reference/ios/app-theme.mdx‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
---
2+
pcx_content_type: reference
3+
title: AppTheme
4+
description: API reference for AppTheme component (iOS Library)
5+
---
6+
7+
The application theme singleton that provides pre-configured appearance objects for UI components.
8+
Use `AppTheme.shared` to access default appearances or call `setUp(theme:)` to apply a custom theme.
9+
10+
## Access
11+
12+
```swift
13+
let theme = AppTheme.shared
14+
```
15+
16+
## Methods
17+
18+
| Method | Return Type | Description |
19+
| -------------------------------- | ----------- | ------------------------------------------------------- |
20+
| `setUp(theme: AppThemeProtocol)` | `Void` | Applies a custom theme conforming to `AppThemeProtocol` |
21+
22+
## Usage Examples
23+
24+
### Access default theme
25+
26+
```swift
27+
import RealtimeKitUI
28+
29+
let theme = AppTheme.shared
30+
let titleAppearance = theme.meetingTitleAppearance
31+
let clockAppearance = theme.clockViewAppearance
32+
```
33+
34+
### Apply a custom theme
35+
36+
```swift
37+
import RealtimeKitUI
38+
39+
class CustomTheme: AppThemeProtocol {
40+
// Implement required appearance properties
41+
}
42+
43+
let customTheme = CustomTheme()
44+
AppTheme.shared.setUp(theme: customTheme)
45+
```

‎src/content/docs/realtime/realtimekit/ui-kit/api-reference/ios/design-library.mdx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
---
2+
pcx_content_type: reference
3+
title: DesignLibrary
4+
description: API reference for DesignLibrary component (iOS Library)
5+
---
6+
7+
The central design token library providing color, spacing, border width, and border radius tokens.
8+
Access through the `DesignLibrary.shared` singleton.
9+
10+
## Access
11+
12+
```swift
13+
let designLibrary = DesignLibrary.shared
14+
```
15+
16+
## Properties
17+
18+
| Property | Type | Required | Default | Description |
19+
| -------------- | ------------------- | -------- | ------- | ---------------------------------------------------- |
20+
| `color` | `ColorTokens` | - | - | Color tokens for backgrounds, text, and brand colors |
21+
| `space` | `SpaceToken` | - | - | Spacing tokens for margins and padding |
22+
| `borderSize` | `BorderWidthToken` | - | - | Border width tokens |
23+
| `borderRadius` | `BorderRadiusToken` | - | - | Border radius tokens for corner rounding |
24+
25+
## Usage Examples
26+
27+
### Access design tokens
28+
29+
```swift
30+
import RealtimeKitUI
31+
32+
let designLibrary = DesignLibrary.shared
33+
34+
// Access color tokens
35+
let backgroundColor = designLibrary.color.background
36+
let textColor = designLibrary.color.text
37+
38+
// Access spacing tokens
39+
let padding = designLibrary.space.space4
40+
41+
// Access border tokens
42+
let borderWidth = designLibrary.borderSize.thin
43+
let cornerRadius = designLibrary.borderRadius.rounded
44+
```

‎src/content/docs/realtime/realtimekit/ui-kit/api-reference/ios/grid-view.mdx‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
---
2+
pcx_content_type: reference
3+
title: GridView
4+
description: API reference for GridView component (iOS Library)
5+
---
6+
7+
A generic grid layout view that arranges child views in a responsive grid.
8+
Supports both portrait and landscape orientations with configurable maximum item count.
9+
10+
## Initializer parameters
11+
12+
| Parameter | Type | Required | Default | Description |
13+
| ------------------ | ----------------------------------- | -------- | ------- | ---------------------------------------------------------------- |
14+
| `maxItems` | `UInt` | ❌ | `9` | Maximum number of items the grid can display |
15+
| `showingCurrently` | `UInt` | ✅ | - | Number of items currently visible in the grid |
16+
| `getChildView` | `@escaping () -> CellContainerView` | ✅ | - | Factory closure that creates a new child view for each grid cell |
17+
18+
## Methods
19+
20+
| Method | Return Type | Description |
21+
| ------------------------------------------------------------------- | -------------------- | --------------------------------------------------------------------- |
22+
| `settingFrames(visibleItemCount:animation:completion:)` | `Void` | Lays out child views in portrait orientation with optional animation |
23+
| `settingFramesForLandScape(visibleItemCount:animation:completion:)` | `Void` | Lays out child views in landscape orientation with optional animation |
24+
| `childView(index:)` | `CellContainerView?` | Returns the child view at the specified index |
25+
| `prepareForReuse(childView:)` | `Void` | Prepares a child view for reuse |
26+
27+
## Usage Examples
28+
29+
### Basic Usage
30+
31+
```swift
32+
import RealtimeKitUI
33+
34+
let gridView = GridView(
35+
maxItems: 6,
36+
showingCurrently: 4,
37+
getChildView: {
38+
return CellContainerView()
39+
}
40+
)
41+
view.addSubview(gridView)
42+
```
43+
44+
### Update layout
45+
46+
```swift
47+
import RealtimeKitUI
48+
49+
let gridView = GridView(
50+
maxItems: 9,
51+
showingCurrently: 3,
52+
getChildView: {
53+
return CellContainerView()
54+
}
55+
)
56+
view.addSubview(gridView)
57+
58+
// Update layout with animation
59+
gridView.settingFrames(
60+
visibleItemCount: 4,
61+
animation: true,
62+
completion: {
63+
print("Layout updated")
64+
}
65+
)
66+
```

‎src/content/docs/realtime/realtimekit/ui-kit/api-reference/ios/index.mdx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
pcx_content_type: reference
3+
title: iOS
4+
description: Complete API reference for iOS library components
5+
sidebar:
6+
group:
7+
hideIndex: true
8+
---

‎src/content/docs/realtime/realtimekit/ui-kit/api-reference/ios/meeting-view-controller.mdx‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
---
2+
pcx_content_type: reference
3+
title: MeetingViewController
4+
description: API reference for MeetingViewController component (iOS Library)
5+
---
6+
7+
The main meeting screen view controller.
8+
Displays the participant grid, plugins, screen share, header, and control bar.
9+
10+
## Initializer parameters
11+
12+
| Parameter | Type | Required | Default | Description |
13+
| ------------ | ---------------------- | -------- | ------- | ------------------------------------------------------ |
14+
| `meeting` | `RealtimeKitClient` | ✅ | - | The RealtimeKit client instance for the active meeting |
15+
| `completion` | `@escaping () -> Void` | ✅ | - | Closure called when the meeting ends |
16+
17+
## Properties
18+
19+
| Property | Type | Required | Default | Description |
20+
| ------------ | ---------------------------------- | -------- | ------- | -------------------------------------------------------------------- |
21+
| `dataSource` | `MeetingViewControllerDataSource?` | ❌ | `nil` | Data source for providing custom topbar, middle view, and bottom bar |
22+
23+
## MeetingViewControllerDataSource protocol
24+
25+
Implement this protocol to provide custom UI sections within the meeting screen.
26+
27+
| Method | Return Type | Description |
28+
| ---------------------------------- | ----------------------- | --------------------------------------------------------------- |
29+
| `getTopbar(viewController:)` | `RtkMeetingHeaderView?` | Returns a custom header view for the meeting screen |
30+
| `getMiddleView(viewController:)` | `UIView?` | Returns a custom middle view between the header and control bar |
31+
| `getBottomTabbar(viewController:)` | `RtkMeetingControlBar?` | Returns a custom control bar for the meeting screen |
32+
33+
## Usage Examples
34+
35+
### Basic Usage
36+
37+
```swift
38+
import RealtimeKitUI
39+
40+
let meetingVC = MeetingViewController(
41+
meeting: rtkClient,
42+
completion: {
43+
self.dismiss(animated: true)
44+
}
45+
)
46+
meetingVC.modalPresentationStyle = .fullScreen
47+
self.present(meetingVC, animated: true)
48+
```
49+
50+
### With custom data source
51+
52+
```swift
53+
import RealtimeKitUI
54+
55+
class CustomDataSource: MeetingViewControllerDataSource {
56+
func getTopbar(viewController: MeetingViewController) -> RtkMeetingHeaderView? {
57+
return RtkMeetingHeaderView(meeting: rtkClient)
58+
}
59+
60+
func getMiddleView(viewController: MeetingViewController) -> UIView? {
61+
return nil
62+
}
63+
64+
func getBottomTabbar(viewController: MeetingViewController) -> RtkMeetingControlBar? {
65+
return nil
66+
}
67+
}
68+
69+
let meetingVC = MeetingViewController(
70+
meeting: rtkClient,
71+
completion: {
72+
self.dismiss(animated: true)
73+
}
74+
)
75+
meetingVC.dataSource = CustomDataSource()
76+
self.present(meetingVC, animated: true)
77+
```

‎src/content/docs/realtime/realtimekit/ui-kit/api-reference/ios/rtk-active-tab-selector-view.mdx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
---
2+
pcx_content_type: reference
3+
title: RtkActiveTabSelectorView
4+
description: API reference for RtkActiveTabSelectorView component (iOS Library)
5+
---
6+
7+
A horizontally scrollable tab selector for switching between plugins and screen shares.
8+
9+
## Properties
10+
11+
| Property | Type | Required | Default | Description |
12+
| --------- | --------------------------------- | -------- | ------- | ---------------------------------------- |
13+
| `buttons` | `[RtkPluginScreenShareTabButton]` | - | - | The array of tab buttons in the selector |
14+
15+
## Methods
16+
17+
| Method | Return Type | Description |
18+
| -------------------------- | ----------- | ------------------------------------------------------------- |
19+
| `scrollToVisible(button:)` | `Void` | Scrolls the tab selector to make the specified button visible |
20+
| `setAndDisplayButtons(_:)` | `Void` | Sets and displays the provided array of tab buttons |
21+
22+
## Usage Examples
23+
24+
### Basic Usage
25+
26+
```swift
27+
import RealtimeKitUI
28+
29+
let tabSelector = RtkActiveTabSelectorView()
30+
let buttons = [
31+
RtkPluginScreenShareTabButton(image: nil, title: "Screen Share"),
32+
RtkPluginScreenShareTabButton(image: nil, title: "Whiteboard")
33+
]
34+
tabSelector.setAndDisplayButtons(buttons)
35+
view.addSubview(tabSelector)
36+
```

‎src/content/docs/realtime/realtimekit/ui-kit/api-reference/ios/rtk-audio-button-control-bar.mdx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
---
2+
pcx_content_type: reference
3+
title: RtkAudioButtonControlBar
4+
description: API reference for RtkAudioButtonControlBar component (iOS Library)
5+
---
6+
7+
A control bar button that toggles the local microphone on and off.
8+
Checks microphone permissions before toggling.
9+
10+
## Initializer parameters
11+
12+
| Parameter | Type | Required | Default | Description |
13+
| ------------ | --------------------------------------- | -------- | ------- | ---------------------------------------- |
14+
| `meeting` | `RealtimeKitClient` | ✅ | - | The RealtimeKit client instance |
15+
| `onClick` | `((RtkAudioButtonControlBar) -> Void)?` | ❌ | `nil` | Closure called when the button is tapped |
16+
| `appearance` | `RtkControlBarButtonAppearance` | ❌ | - | Appearance configuration for the button |
17+
18+
## Usage Examples
19+
20+
### Basic Usage
21+
22+
```swift
23+
import RealtimeKitUI
24+
25+
let audioButton = RtkAudioButtonControlBar(meeting: rtkClient)
26+
view.addSubview(audioButton)
27+
```
28+
29+
### With tap handler
30+
31+
```swift
32+
import RealtimeKitUI
33+
34+
let audioButton = RtkAudioButtonControlBar(
35+
meeting: rtkClient,
36+
onClick: { button in
37+
print("Audio toggled")
38+
}
39+
)
40+
view.addSubview(audioButton)
41+
```

‎src/content/docs/realtime/realtimekit/ui-kit/api-reference/ios/rtk-avatar-view.mdx‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
---
2+
pcx_content_type: reference
3+
title: RtkAvatarView
4+
description: API reference for RtkAvatarView component (iOS Library)
5+
---
6+
7+
A circular avatar view that displays a participant's profile image or name initials as a fallback.
8+
9+
## Initializer parameters
10+
11+
| Parameter | Type | Required | Default | Description |
12+
| ------------- | ----------------------- | -------- | ------- | --------------------------------------- |
13+
| `participant` | `RtkMeetingParticipant` | ✅ | - | The participant whose avatar to display |
14+
15+
## Methods
16+
17+
| Method | Return Type | Description |
18+
| ----------------------- | ----------- | ----------------------------------------------------- |
19+
| `set(participant:)` | `Void` | Updates the avatar to display a different participant |
20+
| `refresh()` | `Void` | Refreshes the avatar image or initials |
21+
| `setInitialName(font:)` | `Void` | Sets the font used for rendering name initials |
22+
23+
## Usage Examples
24+
25+
### Basic Usage
26+
27+
```swift
28+
import RealtimeKitUI
29+
30+
let avatarView = RtkAvatarView(participant: participant)
31+
view.addSubview(avatarView)
32+
```
33+
34+
### Update participant
35+
36+
```swift
37+
import RealtimeKitUI
38+
39+
let avatarView = RtkAvatarView(participant: participant)
40+
view.addSubview(avatarView)
41+
42+
// Update to a different participant
43+
avatarView.set(participant: newParticipant)
44+
avatarView.refresh()
45+
```

0 commit comments

Comments
 (0)