Skip to content

Commit 34d1fe7

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

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+2053
-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: navigation
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: navigation
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: navigation
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: navigation
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: navigation
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/realtimekit-ui.mdx‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
---
2+
pcx_content_type: navigation
3+
title: RealtimeKitUI
4+
description: API reference for RealtimeKitUI component (iOS Library)
5+
---
6+
7+
The main entry point class for the RealtimeKit iOS UI Kit.
8+
Initializes the meeting UI with configuration and returns the starting view controller.
9+
This component is the iOS equivalent of `RtkMeeting` in the React library.
10+
11+
## Properties
12+
13+
| Property | Type | Required | Default | Description |
14+
| --------------- | ------------------------------- | -------- | ------- | ------------------------------------------------------------------ |
15+
| `rtkClient` | `RealtimeKitClient` | - | - | The underlying RealtimeKit client instance (read-only) |
16+
| `appTheme` | `AppTheme` | - | - | The app theme containing design tokens (read-only) |
17+
| `designLibrary` | `DesignLibrary` | - | - | Design library with color, spacing, and border tokens (read-only) |
18+
| `notification` | `RtkNotificationConfig` | - | - | Notification configuration for meeting events (read-only) |
19+
| `flowDelegate` | `RtkUIFlowCoordinatorDelegate?` | ❌ | `nil` | Optional delegate for custom meeting flow coordination (read-only) |
20+
| `delegate` | `RealtimeKitUILifeCycle?` | ❌ | `nil` | Optional lifecycle delegate for meeting events |
21+
22+
## Initializer parameters
23+
24+
| Parameter | Type | Required | Default | Description |
25+
| -------------- | ------------------------------- | -------- | ------- | ------------------------------------------------------------------------- |
26+
| `meetingInfo` | `RtkMeetingInfo` | ✅ | - | Meeting configuration with auth token, audio/video flags, and base domain |
27+
| `flowDelegate` | `RtkUIFlowCoordinatorDelegate?` | ❌ | `nil` | Custom flow delegate for overriding default meeting navigation |
28+
29+
## Methods
30+
31+
| Method | Return Type | Description |
32+
| ------------------------------------------------ | ------------------ | ---------------------------------------------------------------------------------------------------------------- |
33+
| `startMeeting(completion: @escaping () -> Void)` | `UIViewController` | Starts the meeting flow and returns the root view controller. The completion closure runs when the meeting ends. |
34+
35+
## Usage Examples
36+
37+
### Basic Usage
38+
39+
```swift
40+
import RealtimeKitUI
41+
42+
let meetingInfo = RtkMeetingInfo(
43+
authToken: "<YOUR_AUTH_TOKEN>",
44+
enableAudio: true,
45+
enableVideo: true,
46+
baseDomain: "realtime.cloudflare.com"
47+
)
48+
let rtkUI = RealtimeKitUI(meetingInfo: meetingInfo)
49+
let controller = rtkUI.startMeeting {
50+
print("Meeting ended")
51+
}
52+
controller.modalPresentationStyle = .fullScreen
53+
self.present(controller, animated: true)
54+
```
55+
56+
### With lifecycle delegate
57+
58+
```swift
59+
import RealtimeKitUI
60+
61+
class ViewController: UIViewController, RealtimeKitUILifeCycle {
62+
func startMeeting() {
63+
let meetingInfo = RtkMeetingInfo(
64+
authToken: "<YOUR_AUTH_TOKEN>",
65+
enableAudio: true,
66+
enableVideo: true,
67+
baseDomain: "realtime.cloudflare.com"
68+
)
69+
let rtkUI = RealtimeKitUI(meetingInfo: meetingInfo)
70+
rtkUI.delegate = self
71+
let controller = rtkUI.startMeeting {
72+
self.dismiss(animated: true)
73+
}
74+
controller.modalPresentationStyle = .fullScreen
75+
self.present(controller, animated: true)
76+
}
77+
}
78+
```

‎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: navigation
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+
```

0 commit comments

Comments
 (0)