@gryt/ui 0.1.1 → 0.1.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 +89 -4
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
React component library for [Gryt](https://github.com/Gryt-chat/gryt), the open-source WebRTC voice chat platform.
|
|
4
4
|
|
|
5
|
-
Built with MUI v7, React, Tailwind-authored compiled CSS, and the Gryt design palette from [Gryt-chat/code-theme](https://github.com/Gryt-chat/code-theme).
|
|
5
|
+
Built with MUI v7, React, Phosphor icons, Tailwind-authored compiled CSS, and the Gryt design palette from [Gryt-chat/code-theme](https://github.com/Gryt-chat/code-theme).
|
|
6
6
|
|
|
7
7
|
## Install
|
|
8
8
|
|
|
@@ -10,29 +10,114 @@ Built with MUI v7, React, Tailwind-authored compiled CSS, and the Gryt design pa
|
|
|
10
10
|
bun add @gryt/ui
|
|
11
11
|
```
|
|
12
12
|
|
|
13
|
-
|
|
13
|
+
```sh
|
|
14
|
+
npm install @gryt/ui
|
|
15
|
+
pnpm add @gryt/ui
|
|
16
|
+
yarn add @gryt/ui
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
Gryt UI includes MUI, Emotion, Phosphor icons, and its compiled CSS. Your app should provide React and React DOM.
|
|
14
20
|
|
|
15
21
|
## Usage
|
|
16
22
|
|
|
23
|
+
Import the stylesheet once in your app's global entry file.
|
|
24
|
+
|
|
17
25
|
```tsx
|
|
26
|
+
// main.tsx, app.tsx, layout.tsx, or another global app entry
|
|
18
27
|
import "@gryt/ui/styles.css";
|
|
19
|
-
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
For Next.js, import the stylesheet from `app/layout.tsx` or `pages/_app.tsx`.
|
|
31
|
+
|
|
32
|
+
Wrap your app with `GrytProvider`, then use the components.
|
|
33
|
+
|
|
34
|
+
```tsx
|
|
35
|
+
import { Button, GrytProvider, TextField } from "@gryt/ui";
|
|
20
36
|
|
|
21
37
|
export function App() {
|
|
22
38
|
return (
|
|
23
39
|
<GrytProvider>
|
|
24
|
-
<
|
|
40
|
+
<form>
|
|
41
|
+
<TextField label="Channel name" placeholder="Design review" />
|
|
42
|
+
<Button tone="primary" size="medium">
|
|
43
|
+
Create channel
|
|
44
|
+
</Button>
|
|
45
|
+
</form>
|
|
25
46
|
</GrytProvider>
|
|
26
47
|
);
|
|
27
48
|
}
|
|
28
49
|
```
|
|
29
50
|
|
|
51
|
+
## Examples
|
|
52
|
+
|
|
53
|
+
Buttons support Gryt tones, variants, and sizes.
|
|
54
|
+
|
|
55
|
+
```tsx
|
|
56
|
+
import { Button } from "@gryt/ui";
|
|
57
|
+
|
|
58
|
+
export function Actions() {
|
|
59
|
+
return (
|
|
60
|
+
<>
|
|
61
|
+
<Button tone="primary">Save</Button>
|
|
62
|
+
<Button tone="secondary" variant="outlined">
|
|
63
|
+
Invite
|
|
64
|
+
</Button>
|
|
65
|
+
<Button tone="danger" variant="contained" size="small">
|
|
66
|
+
Delete
|
|
67
|
+
</Button>
|
|
68
|
+
<Button tone="ghost" variant="text" size="xsmall">
|
|
69
|
+
Dismiss
|
|
70
|
+
</Button>
|
|
71
|
+
</>
|
|
72
|
+
);
|
|
73
|
+
}
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
Form primitives are MUI-backed and inherit the Gryt theme.
|
|
77
|
+
|
|
78
|
+
```tsx
|
|
79
|
+
import { Select, Switch, TextField } from "@gryt/ui";
|
|
80
|
+
|
|
81
|
+
export function Preferences() {
|
|
82
|
+
return (
|
|
83
|
+
<>
|
|
84
|
+
<TextField label="Display name" placeholder="Sivert" />
|
|
85
|
+
<Select
|
|
86
|
+
label="Voice activity"
|
|
87
|
+
defaultValue="push-to-talk"
|
|
88
|
+
options={[
|
|
89
|
+
{ label: "Push to talk", value: "push-to-talk" },
|
|
90
|
+
{ label: "Open mic", value: "open-mic" }
|
|
91
|
+
]}
|
|
92
|
+
/>
|
|
93
|
+
<Switch
|
|
94
|
+
defaultChecked
|
|
95
|
+
inputProps={{ "aria-label": "Noise suppression" }}
|
|
96
|
+
/>
|
|
97
|
+
</>
|
|
98
|
+
);
|
|
99
|
+
}
|
|
100
|
+
```
|
|
101
|
+
|
|
30
102
|
## Components
|
|
31
103
|
|
|
32
104
|
Includes MUI-backed primitives for buttons, inputs, selects, tabs, menus, dialogs, drawers, cards, feedback, data display, and Gryt chat-specific components like `Composer`, `ConversationItem`, and `MessageBubble`.
|
|
33
105
|
|
|
106
|
+
The package also exports `GrytProvider`, `createGrytTheme`, and `grytTokens` for apps that need a consistent Gryt theme boundary.
|
|
107
|
+
|
|
108
|
+
## Styles
|
|
109
|
+
|
|
110
|
+
`@gryt/ui/styles.css` contains the compiled component styles. Import it once globally; do not import it inside every component.
|
|
111
|
+
|
|
112
|
+
```tsx
|
|
113
|
+
import "@gryt/ui/styles.css";
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
If your bundler supports CSS imports from npm packages, no extra CSS configuration is needed.
|
|
117
|
+
|
|
34
118
|
## Links
|
|
35
119
|
|
|
120
|
+
- Package source: [Gryt-chat/ui](https://github.com/Gryt-chat/ui)
|
|
36
121
|
- Gryt platform: [Gryt-chat/gryt](https://github.com/Gryt-chat/gryt)
|
|
37
122
|
- Gryt client: [Gryt-chat/client](https://github.com/Gryt-chat/client)
|
|
38
123
|
- Gryt docs: [docs.gryt.chat](https://docs.gryt.chat)
|
package/package.json
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gryt/ui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.3",
|
|
4
4
|
"description": "React component library for Gryt, the open-source WebRTC voice chat platform.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"homepage": "https://gryt.chat",
|
|
8
8
|
"repository": {
|
|
9
9
|
"type": "git",
|
|
10
|
-
"url": "https://github.com/Gryt-chat/
|
|
10
|
+
"url": "git+https://github.com/Gryt-chat/ui.git",
|
|
11
11
|
"directory": "packages/ui"
|
|
12
12
|
},
|
|
13
13
|
"bugs": {
|
|
14
|
-
"url": "https://github.com/Gryt-chat/
|
|
14
|
+
"url": "https://github.com/Gryt-chat/ui/issues"
|
|
15
15
|
},
|
|
16
16
|
"keywords": [
|
|
17
17
|
"gryt",
|