@conference-kit/ui-react 0.0.1 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +67 -0
- package/package.json +3 -3
package/README.md
ADDED
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
# @conference-kit/ui-react
|
|
2
|
+
|
|
3
|
+
Tailwind-ready React UI components for conferencing UIs. These are presentational helpers that pair well with `@conference-kit/react` state.
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @conference-kit/ui-react
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
Peer deps: React 18+, React DOM, TailwindCSS 3.4+.
|
|
12
|
+
|
|
13
|
+
## Components
|
|
14
|
+
|
|
15
|
+
- `ParticipantGrid`, `ParticipantTile`: display remote/local `MediaStream` tiles with connection status.
|
|
16
|
+
- `RosterList`: simple list of roster entries (e.g., peers waiting, admitted, or self).
|
|
17
|
+
- `ConnectionBadge`: chips for signaling/media/data status.
|
|
18
|
+
- `ControlBar`: button row hooks to your handlers (join/leave/mute/video/screen share/reset).
|
|
19
|
+
- `ChatPanel`: lightweight message list/input scaffold.
|
|
20
|
+
- Icons: `SignalIcon`, `WifiOffIcon`, etc.
|
|
21
|
+
|
|
22
|
+
Types (`ParticipantView`, `RosterEntry`, `ControlHandlers`, `ConnectionStatus`) describe the shape of data you pass in.
|
|
23
|
+
|
|
24
|
+
## Quick example
|
|
25
|
+
|
|
26
|
+
```tsx
|
|
27
|
+
import {
|
|
28
|
+
ParticipantGrid,
|
|
29
|
+
ConnectionBadge,
|
|
30
|
+
type ParticipantView,
|
|
31
|
+
} from "@conference-kit/ui-react";
|
|
32
|
+
|
|
33
|
+
const tiles: ParticipantView[] = [
|
|
34
|
+
{
|
|
35
|
+
id: "me",
|
|
36
|
+
label: "You",
|
|
37
|
+
stream: localStream,
|
|
38
|
+
connectionState: "connected",
|
|
39
|
+
isLocal: true,
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
id: "peer-1",
|
|
43
|
+
label: "Peer 1",
|
|
44
|
+
stream: remote1,
|
|
45
|
+
connectionState: "connected",
|
|
46
|
+
},
|
|
47
|
+
];
|
|
48
|
+
|
|
49
|
+
export function CallUi() {
|
|
50
|
+
return (
|
|
51
|
+
<div className="space-y-4">
|
|
52
|
+
<ConnectionBadge
|
|
53
|
+
status={{ signaling: "open", media: "ready", data: "ready" }}
|
|
54
|
+
/>
|
|
55
|
+
<ParticipantGrid participants={tiles} />
|
|
56
|
+
</div>
|
|
57
|
+
);
|
|
58
|
+
}
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
All components are unopinionated about state; wire them to your hooks/actions.
|
|
62
|
+
|
|
63
|
+
## Build
|
|
64
|
+
|
|
65
|
+
```bash
|
|
66
|
+
npm run build
|
|
67
|
+
```
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@conference-kit/ui-react",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.3",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -19,8 +19,8 @@
|
|
|
19
19
|
"tailwindcss": ">=3.4.0"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@conference-kit/react": "^0.0.
|
|
23
|
-
"@conference-kit/core": "^0.0.
|
|
22
|
+
"@conference-kit/react": "^0.0.3",
|
|
23
|
+
"@conference-kit/core": "^0.0.3"
|
|
24
24
|
},
|
|
25
25
|
"devDependencies": {
|
|
26
26
|
"@types/react": "^18.3.27",
|