@vervstack/chures 0.0.1 → 0.0.2
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 +125 -0
- package/package.json +2 -2
package/README.md
ADDED
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
# @vervstack/chures
|
|
2
|
+
|
|
3
|
+
React components and hooks for **Telegram OAuth login** and **toast notifications**.
|
|
4
|
+
|
|
5
|
+
- `TelegramAuth` / `useTelegramLogin` — wire up Telegram Login with a single component or a custom render prop
|
|
6
|
+
- `TelegramSignInButton` — standalone Telegram-branded button
|
|
7
|
+
- `Toaster` / `useToaster` — animated toast notifications with auto-dismiss
|
|
8
|
+
|
|
9
|
+
CSS is injected automatically — no stylesheet import needed.
|
|
10
|
+
|
|
11
|
+
## Install
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
npm install @vervstack/chures
|
|
15
|
+
# peer deps
|
|
16
|
+
npm install framer-motion zustand
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Telegram Auth
|
|
20
|
+
|
|
21
|
+
### Drop-in button
|
|
22
|
+
|
|
23
|
+
```tsx
|
|
24
|
+
import { TelegramAuth } from "@vervstack/chures";
|
|
25
|
+
|
|
26
|
+
<TelegramAuth
|
|
27
|
+
botId="YOUR_BOT_ID"
|
|
28
|
+
onSuccess={(data) => console.log(data.id_token)}
|
|
29
|
+
/>
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
### Custom UI (render prop)
|
|
33
|
+
|
|
34
|
+
```tsx
|
|
35
|
+
import { TelegramAuth } from "@vervstack/chures";
|
|
36
|
+
|
|
37
|
+
<TelegramAuth botId="YOUR_BOT_ID" onSuccess={handleAuth}>
|
|
38
|
+
{({ login, isReady }) => (
|
|
39
|
+
<button onClick={login} disabled={!isReady}>
|
|
40
|
+
Sign in with Telegram
|
|
41
|
+
</button>
|
|
42
|
+
)}
|
|
43
|
+
</TelegramAuth>
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
### Hook only
|
|
47
|
+
|
|
48
|
+
```tsx
|
|
49
|
+
import { useTelegramLogin } from "@vervstack/chures";
|
|
50
|
+
|
|
51
|
+
const { login, isReady } = useTelegramLogin({
|
|
52
|
+
botId: "YOUR_BOT_ID",
|
|
53
|
+
onSuccess: (data) => console.log(data.id_token),
|
|
54
|
+
});
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
### `TelegramAuth` props
|
|
58
|
+
|
|
59
|
+
| Prop | Type | Default | Description |
|
|
60
|
+
|---|---|---|---|
|
|
61
|
+
| `botId` | `string` | — | Your Telegram bot ID |
|
|
62
|
+
| `onSuccess` | `(data: TelegramAuthData) => void` | — | Called with auth data on success |
|
|
63
|
+
| `lang` | `"en" \| "ru"` | `"en"` | Button label language |
|
|
64
|
+
| `title` | `string` | — | Custom button label |
|
|
65
|
+
| `redirectUri` | `string` | `window.location.origin` | OAuth redirect URI |
|
|
66
|
+
| `requestAccess` | `string` | `"write"` | Telegram access scope |
|
|
67
|
+
| `children` | `(props) => ReactNode` | — | Render prop for custom UI |
|
|
68
|
+
| `className` | `string` | — | Extra class on the button |
|
|
69
|
+
|
|
70
|
+
### `TelegramSignInButton` props
|
|
71
|
+
|
|
72
|
+
| Prop | Type | Default | Description |
|
|
73
|
+
|---|---|---|---|
|
|
74
|
+
| `onClick` | `() => void` | — | Click handler |
|
|
75
|
+
| `disabled` | `boolean` | — | Disables the button |
|
|
76
|
+
| `lang` | `"en" \| "ru"` | `"en"` | Label language |
|
|
77
|
+
| `title` / `label` | `string` | — | Override button text |
|
|
78
|
+
| `fullSize` | `boolean` | — | Stretch to full width |
|
|
79
|
+
| `className` | `string` | — | Extra CSS class |
|
|
80
|
+
|
|
81
|
+
## Toasts
|
|
82
|
+
|
|
83
|
+
Mount `<Toaster />` once at the root of your app, then call `useToaster` anywhere.
|
|
84
|
+
|
|
85
|
+
```tsx
|
|
86
|
+
import { Toaster, useToaster } from "@vervstack/chures";
|
|
87
|
+
|
|
88
|
+
// in your root layout
|
|
89
|
+
<Toaster />
|
|
90
|
+
|
|
91
|
+
// anywhere in your app
|
|
92
|
+
const { bake } = useToaster();
|
|
93
|
+
|
|
94
|
+
bake({ title: "Saved", description: "Your changes were saved.", level: "Info" });
|
|
95
|
+
bake({ title: "Error", description: "Something went wrong.", level: "Error", isDismissable: true });
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
Toasts auto-dismiss after 5 seconds. Set `isDismissable: true` to show a close button.
|
|
99
|
+
|
|
100
|
+
### `Toast` fields
|
|
101
|
+
|
|
102
|
+
| Field | Type | Default | Description |
|
|
103
|
+
|---|---|---|---|
|
|
104
|
+
| `title` | `string` | — | Toast heading (also used as unique key) |
|
|
105
|
+
| `description` | `string` | — | Body text |
|
|
106
|
+
| `level` | `"Info" \| "Warn" \| "Error"` | `"Info"` | Visual severity |
|
|
107
|
+
| `isDismissable` | `boolean` | `false` | Show manual dismiss button |
|
|
108
|
+
|
|
109
|
+
### CSS theming
|
|
110
|
+
|
|
111
|
+
Override these CSS custom properties to match your design:
|
|
112
|
+
|
|
113
|
+
| Variable | Default | Meaning |
|
|
114
|
+
|---|---|---|
|
|
115
|
+
| `--ta-accent` | `#229ED9` | Info border color |
|
|
116
|
+
| `--ta-error` | `#ef4444` | Error border + title color |
|
|
117
|
+
| `--ta-warn` | `#f59e0b` | Warning border + title color |
|
|
118
|
+
| `--ta-fg` | `#ffffff` | Title text color |
|
|
119
|
+
| `--ta-fg-muted` | `#9ca3af` | Description text color |
|
|
120
|
+
| `--ta-font-sm` | `0.875rem` | Title font size |
|
|
121
|
+
| `--ta-font-xs` | `0.75rem` | Description font size |
|
|
122
|
+
|
|
123
|
+
## License
|
|
124
|
+
|
|
125
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vervstack/chures",
|
|
3
|
-
"version": "0.0.
|
|
4
|
-
"description": "React
|
|
3
|
+
"version": "0.0.2",
|
|
4
|
+
"description": "React components and hooks for Telegram OAuth login and toast notifications",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|