@changebot/widgets-react 0.1.22 → 0.2.1
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 +19 -27
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -27,14 +27,17 @@ import {
|
|
|
27
27
|
|
|
28
28
|
function App() {
|
|
29
29
|
return (
|
|
30
|
-
|
|
30
|
+
<>
|
|
31
|
+
{/* Provider can be placed anywhere - components don't need to be nested */}
|
|
32
|
+
<ChangebotProvider slug="your-team-slug" />
|
|
33
|
+
|
|
31
34
|
<header>
|
|
32
35
|
<h1>My App</h1>
|
|
33
36
|
<ChangebotBadge />
|
|
34
37
|
</header>
|
|
35
38
|
|
|
36
39
|
<ChangebotPanel mode="drawer-right" />
|
|
37
|
-
|
|
40
|
+
</>
|
|
38
41
|
);
|
|
39
42
|
}
|
|
40
43
|
```
|
|
@@ -43,7 +46,7 @@ function App() {
|
|
|
43
46
|
|
|
44
47
|
### ChangebotProvider
|
|
45
48
|
|
|
46
|
-
The provider component manages state and data fetching for all
|
|
49
|
+
The provider component manages state and data fetching for all Changebot components. It listens at the document level, so components do **not** need to be nested inside it—they can be placed anywhere on the page.
|
|
47
50
|
|
|
48
51
|
#### Props
|
|
49
52
|
|
|
@@ -51,14 +54,14 @@ The provider component manages state and data fetching for all child Changebot c
|
|
|
51
54
|
|------|------|---------|-------------|
|
|
52
55
|
| `slug` | `string` | required | Your Changebot team slug (from your Changebot dashboard) |
|
|
53
56
|
| `scope` | `string` | `"default"` | Scope identifier for isolating multiple instances |
|
|
54
|
-
| `children` | `ReactNode` | required | Child components |
|
|
55
57
|
|
|
56
58
|
#### Example
|
|
57
59
|
|
|
58
60
|
```tsx
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
61
|
+
// Components can be siblings - no nesting required
|
|
62
|
+
<ChangebotProvider slug="acme-corp" />
|
|
63
|
+
<ChangebotBadge />
|
|
64
|
+
<ChangebotPanel />
|
|
62
65
|
```
|
|
63
66
|
|
|
64
67
|
#### Multiple Instances
|
|
@@ -90,10 +93,10 @@ A badge component that displays the count of new, unread updates. Clicking the b
|
|
|
90
93
|
| Prop | Type | Default | Description |
|
|
91
94
|
|------|------|---------|-------------|
|
|
92
95
|
| `scope` | `string` | `"default"` | Scope to connect to (must match provider scope) |
|
|
93
|
-
| `showCount` | `boolean` | `true` | Whether to display the numeric count |
|
|
94
96
|
| `theme` | `Theme` | - | Fixed theme (see Theming section) |
|
|
95
97
|
| `light` | `Theme` | - | Theme for light mode (auto-switches based on system preference) |
|
|
96
98
|
| `dark` | `Theme` | - | Theme for dark mode (auto-switches based on system preference) |
|
|
99
|
+
| `indicator` | `"count"` \| `"dot"` | `"count"` | Display style: show count number or dot only |
|
|
97
100
|
|
|
98
101
|
#### Example
|
|
99
102
|
|
|
@@ -104,14 +107,14 @@ A badge component that displays the count of new, unread updates. Clicking the b
|
|
|
104
107
|
// With theme
|
|
105
108
|
<ChangebotBadge theme="catppuccin-mocha" />
|
|
106
109
|
|
|
110
|
+
// Show dot instead of count
|
|
111
|
+
<ChangebotBadge indicator="dot" />
|
|
112
|
+
|
|
107
113
|
// Auto-switching theme
|
|
108
114
|
<ChangebotBadge
|
|
109
115
|
light="catppuccin-latte"
|
|
110
116
|
dark="catppuccin-mocha"
|
|
111
117
|
/>
|
|
112
|
-
|
|
113
|
-
// Hidden count (shows dot only)
|
|
114
|
-
<ChangebotBadge showCount={false} />
|
|
115
118
|
```
|
|
116
119
|
|
|
117
120
|
---
|
|
@@ -347,20 +350,6 @@ Displays as a centered modal dialog with backdrop overlay. Best for focused, imp
|
|
|
347
350
|
|
|
348
351
|
Components can work independently without a provider for simple use cases:
|
|
349
352
|
|
|
350
|
-
#### Standalone Badge
|
|
351
|
-
|
|
352
|
-
```tsx
|
|
353
|
-
import { ChangebotBadge } from '@changebot/widgets-react';
|
|
354
|
-
|
|
355
|
-
function Header() {
|
|
356
|
-
const [count, setCount] = useState(3);
|
|
357
|
-
|
|
358
|
-
return (
|
|
359
|
-
<ChangebotBadge count={count} showCount={true} />
|
|
360
|
-
);
|
|
361
|
-
}
|
|
362
|
-
```
|
|
363
|
-
|
|
364
353
|
#### Standalone Panel
|
|
365
354
|
|
|
366
355
|
```tsx
|
|
@@ -413,7 +402,10 @@ import {
|
|
|
413
402
|
|
|
414
403
|
function App() {
|
|
415
404
|
return (
|
|
416
|
-
|
|
405
|
+
<>
|
|
406
|
+
{/* Provider can be placed anywhere */}
|
|
407
|
+
<ChangebotProvider slug="acme-corp" />
|
|
408
|
+
|
|
417
409
|
{/* Banner appears automatically for banner-highlighted updates */}
|
|
418
410
|
<ChangebotBanner theme="catppuccin-mocha" />
|
|
419
411
|
|
|
@@ -439,7 +431,7 @@ function App() {
|
|
|
439
431
|
autoDismiss={5}
|
|
440
432
|
theme="catppuccin-mocha"
|
|
441
433
|
/>
|
|
442
|
-
|
|
434
|
+
</>
|
|
443
435
|
);
|
|
444
436
|
}
|
|
445
437
|
```
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@changebot/widgets-react",
|
|
3
|
-
"version": "0.1
|
|
3
|
+
"version": "0.2.1",
|
|
4
4
|
"description": "React wrapper components for Changebot widgets",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
},
|
|
15
15
|
"dependencies": {
|
|
16
16
|
"@stencil/react-output-target": "^1.2.0",
|
|
17
|
-
"@changebot/core": "^0.1
|
|
17
|
+
"@changebot/core": "^0.2.1"
|
|
18
18
|
},
|
|
19
19
|
"devDependencies": {
|
|
20
20
|
"@types/react": "^18.2.0",
|