@changebot/widgets-react 0.2.0 → 0.2.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.
Files changed (2) hide show
  1. package/README.md +71 -142
  2. package/package.json +2 -2
package/README.md CHANGED
@@ -19,22 +19,21 @@ npm install react react-dom
19
19
  ## Quick Start
20
20
 
21
21
  ```tsx
22
- import {
23
- ChangebotProvider,
24
- ChangebotBadge,
25
- ChangebotPanel
26
- } from '@changebot/widgets-react';
22
+ import { ChangebotProvider, ChangebotBadge, ChangebotPanel } from '@changebot/widgets-react';
27
23
 
28
24
  function App() {
29
25
  return (
30
- <ChangebotProvider slug="your-team-slug">
26
+ <>
27
+ {/* Provider can be placed anywhere - components don't need to be nested */}
28
+ <ChangebotProvider slug="your-team-slug" />
29
+
31
30
  <header>
32
31
  <h1>My App</h1>
33
32
  <ChangebotBadge />
34
33
  </header>
35
34
 
36
35
  <ChangebotPanel mode="drawer-right" />
37
- </ChangebotProvider>
36
+ </>
38
37
  );
39
38
  }
40
39
  ```
@@ -43,22 +42,22 @@ function App() {
43
42
 
44
43
  ### ChangebotProvider
45
44
 
46
- The provider component manages state and data fetching for all child Changebot components. Wrap your components with this provider to enable automatic updates and state synchronization.
45
+ 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
46
 
48
47
  #### Props
49
48
 
50
- | Prop | Type | Default | Description |
51
- |------|------|---------|-------------|
52
- | `slug` | `string` | required | Your Changebot team slug (from your Changebot dashboard) |
53
- | `scope` | `string` | `"default"` | Scope identifier for isolating multiple instances |
54
- | `children` | `ReactNode` | required | Child components |
49
+ | Prop | Type | Default | Description |
50
+ | ------- | -------- | ----------- | -------------------------------------------------------- |
51
+ | `slug` | `string` | required | Your Changebot team slug (from your Changebot dashboard) |
52
+ | `scope` | `string` | `"default"` | Scope identifier for isolating multiple instances |
55
53
 
56
54
  #### Example
57
55
 
58
56
  ```tsx
59
- <ChangebotProvider slug="acme-corp">
60
- {/* Your components */}
61
- </ChangebotProvider>
57
+ // Components can be siblings - no nesting required
58
+ <ChangebotProvider slug="acme-corp" />
59
+ <ChangebotBadge />
60
+ <ChangebotPanel />
62
61
  ```
63
62
 
64
63
  #### Multiple Instances
@@ -87,13 +86,13 @@ A badge component that displays the count of new, unread updates. Clicking the b
87
86
 
88
87
  #### Props
89
88
 
90
- | Prop | Type | Default | Description |
91
- |------|------|---------|-------------|
92
- | `scope` | `string` | `"default"` | Scope to connect to (must match provider scope) |
93
- | `showCount` | `boolean` | `true` | Whether to display the numeric count |
94
- | `theme` | `Theme` | - | Fixed theme (see Theming section) |
95
- | `light` | `Theme` | - | Theme for light mode (auto-switches based on system preference) |
96
- | `dark` | `Theme` | - | Theme for dark mode (auto-switches based on system preference) |
89
+ | Prop | Type | Default | Description |
90
+ | ----------- | -------------------- | ----------- | --------------------------------------------------------------- |
91
+ | `scope` | `string` | `"default"` | Scope to connect to (must match provider scope) |
92
+ | `theme` | `Theme` | - | Fixed theme (see Theming section) |
93
+ | `light` | `Theme` | - | Theme for light mode (auto-switches based on system preference) |
94
+ | `dark` | `Theme` | - | Theme for dark mode (auto-switches based on system preference) |
95
+ | `indicator` | `"count"` \| `"dot"` | `"count"` | Display style: show count number or dot only |
97
96
 
98
97
  #### Example
99
98
 
@@ -104,14 +103,14 @@ A badge component that displays the count of new, unread updates. Clicking the b
104
103
  // With theme
105
104
  <ChangebotBadge theme="catppuccin-mocha" />
106
105
 
106
+ // Show dot instead of count
107
+ <ChangebotBadge indicator="dot" />
108
+
107
109
  // Auto-switching theme
108
110
  <ChangebotBadge
109
111
  light="catppuccin-latte"
110
112
  dark="catppuccin-mocha"
111
113
  />
112
-
113
- // Hidden count (shows dot only)
114
- <ChangebotBadge showCount={false} />
115
114
  ```
116
115
 
117
116
  ---
@@ -122,13 +121,13 @@ A panel component that displays your product updates. Can be displayed as a draw
122
121
 
123
122
  #### Props
124
123
 
125
- | Prop | Type | Default | Description |
126
- |------|------|---------|-------------|
127
- | `scope` | `string` | `"default"` | Scope to connect to (must match provider scope) |
128
- | `mode` | `"drawer-left"` \| `"drawer-right"` \| `"modal"` | `"drawer-right"` | Display mode |
129
- | `theme` | `Theme` | - | Fixed theme (see Theming section) |
130
- | `light` | `Theme` | - | Theme for light mode (auto-switches based on system preference) |
131
- | `dark` | `Theme` | - | Theme for dark mode (auto-switches based on system preference) |
124
+ | Prop | Type | Default | Description |
125
+ | ------- | ------------------------------------------------ | ---------------- | --------------------------------------------------------------- |
126
+ | `scope` | `string` | `"default"` | Scope to connect to (must match provider scope) |
127
+ | `mode` | `"drawer-left"` \| `"drawer-right"` \| `"modal"` | `"drawer-right"` | Display mode |
128
+ | `theme` | `Theme` | - | Fixed theme (see Theming section) |
129
+ | `light` | `Theme` | - | Theme for light mode (auto-switches based on system preference) |
130
+ | `dark` | `Theme` | - | Theme for dark mode (auto-switches based on system preference) |
132
131
 
133
132
  #### Methods
134
133
 
@@ -163,11 +162,7 @@ function App() {
163
162
  return (
164
163
  <>
165
164
  <button onClick={handleOpenPanel}>Show Updates</button>
166
- <ChangebotPanel
167
- ref={panelRef}
168
- mode="drawer-right"
169
- theme="nord"
170
- />
165
+ <ChangebotPanel ref={panelRef} mode="drawer-right" theme="nord" />
171
166
  </>
172
167
  );
173
168
  }
@@ -181,12 +176,12 @@ A banner component that displays a highlighted update at the top of your page. A
181
176
 
182
177
  #### Props
183
178
 
184
- | Prop | Type | Default | Description |
185
- |------|------|---------|-------------|
186
- | `scope` | `string` | `"default"` | Scope to connect to (must match provider scope) |
187
- | `theme` | `Theme` | - | Fixed theme (see Theming section) |
188
- | `light` | `Theme` | - | Theme for light mode (auto-switches based on system preference) |
189
- | `dark` | `Theme` | - | Theme for dark mode (auto-switches based on system preference) |
179
+ | Prop | Type | Default | Description |
180
+ | ------- | -------- | ----------- | --------------------------------------------------------------- |
181
+ | `scope` | `string` | `"default"` | Scope to connect to (must match provider scope) |
182
+ | `theme` | `Theme` | - | Fixed theme (see Theming section) |
183
+ | `light` | `Theme` | - | Theme for light mode (auto-switches based on system preference) |
184
+ | `dark` | `Theme` | - | Theme for dark mode (auto-switches based on system preference) |
190
185
 
191
186
  #### Methods
192
187
 
@@ -206,9 +201,7 @@ await bannerRef.current?.toggle();
206
201
  #### Example
207
202
 
208
203
  ```tsx
209
- <ChangebotBanner
210
- theme="dracula"
211
- />
204
+ <ChangebotBanner theme="dracula" />
212
205
  ```
213
206
 
214
207
  ---
@@ -219,14 +212,14 @@ A toast notification component that displays brief update notifications. Automat
219
212
 
220
213
  #### Props
221
214
 
222
- | Prop | Type | Default | Description |
223
- |------|------|---------|-------------|
224
- | `scope` | `string` | `"default"` | Scope to connect to (must match provider scope) |
225
- | `position` | `"top-left"` \| `"top-right"` \| `"bottom-left"` \| `"bottom-right"` | `"bottom-right"` | Screen position for the toast |
226
- | `autoDismiss` | `number` | - | Auto-dismiss after N seconds (optional) |
227
- | `theme` | `Theme` | - | Fixed theme (see Theming section) |
228
- | `light` | `Theme` | - | Theme for light mode (auto-switches based on system preference) |
229
- | `dark` | `Theme` | - | Theme for dark mode (auto-switches based on system preference) |
215
+ | Prop | Type | Default | Description |
216
+ | ------------- | -------------------------------------------------------------------- | ---------------- | --------------------------------------------------------------- |
217
+ | `scope` | `string` | `"default"` | Scope to connect to (must match provider scope) |
218
+ | `position` | `"top-left"` \| `"top-right"` \| `"bottom-left"` \| `"bottom-right"` | `"bottom-right"` | Screen position for the toast |
219
+ | `autoDismiss` | `number` | - | Auto-dismiss after N seconds (optional) |
220
+ | `theme` | `Theme` | - | Fixed theme (see Theming section) |
221
+ | `light` | `Theme` | - | Theme for light mode (auto-switches based on system preference) |
222
+ | `dark` | `Theme` | - | Theme for dark mode (auto-switches based on system preference) |
230
223
 
231
224
  #### Methods
232
225
 
@@ -243,11 +236,7 @@ await toastRef.current?.dismiss();
243
236
  #### Example
244
237
 
245
238
  ```tsx
246
- <ChangebotToast
247
- position="bottom-right"
248
- autoDismiss={5}
249
- theme="tokyo-night"
250
- />
239
+ <ChangebotToast position="bottom-right" autoDismiss={5} theme="tokyo-night" />
251
240
  ```
252
241
 
253
242
  ---
@@ -280,32 +269,17 @@ Use the `theme` prop for a theme that never changes:
280
269
  Use `light` and `dark` props to automatically switch based on user's system preference:
281
270
 
282
271
  ```tsx
283
- <ChangebotPanel
284
- light="catppuccin-latte"
285
- dark="catppuccin-mocha"
286
- />
272
+ <ChangebotPanel light="catppuccin-latte" dark="catppuccin-mocha" />
287
273
  ```
288
274
 
289
275
  #### Apply to All Components
290
276
 
291
277
  ```tsx
292
278
  <ChangebotProvider slug="acme">
293
- <ChangebotBadge
294
- light="gruvbox-light"
295
- dark="gruvbox-dark"
296
- />
297
- <ChangebotPanel
298
- light="gruvbox-light"
299
- dark="gruvbox-dark"
300
- />
301
- <ChangebotBanner
302
- light="gruvbox-light"
303
- dark="gruvbox-dark"
304
- />
305
- <ChangebotToast
306
- light="gruvbox-light"
307
- dark="gruvbox-dark"
308
- />
279
+ <ChangebotBadge light="gruvbox-light" dark="gruvbox-dark" />
280
+ <ChangebotPanel light="gruvbox-light" dark="gruvbox-dark" />
281
+ <ChangebotBanner light="gruvbox-light" dark="gruvbox-dark" />
282
+ <ChangebotToast light="gruvbox-light" dark="gruvbox-dark" />
309
283
  </ChangebotProvider>
310
284
  ```
311
285
 
@@ -347,20 +321,6 @@ Displays as a centered modal dialog with backdrop overlay. Best for focused, imp
347
321
 
348
322
  Components can work independently without a provider for simple use cases:
349
323
 
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
324
  #### Standalone Panel
365
325
 
366
326
  ```tsx
@@ -381,8 +341,8 @@ function Updates() {
381
341
  expires_on: null,
382
342
  highlight_target: null,
383
343
  hosted_url: null,
384
- tags: [{ id: 1, name: 'Feature', color: '#3b82f6' }]
385
- }
344
+ tags: [{ id: 1, name: 'Feature', color: '#3b82f6' }],
345
+ },
386
346
  ]);
387
347
  await panelRef.current?.open();
388
348
  };
@@ -403,17 +363,14 @@ function Updates() {
403
363
  ### Basic Setup with All Components
404
364
 
405
365
  ```tsx
406
- import {
407
- ChangebotProvider,
408
- ChangebotBadge,
409
- ChangebotPanel,
410
- ChangebotBanner,
411
- ChangebotToast
412
- } from '@changebot/widgets-react';
366
+ import { ChangebotProvider, ChangebotBadge, ChangebotPanel, ChangebotBanner, ChangebotToast } from '@changebot/widgets-react';
413
367
 
414
368
  function App() {
415
369
  return (
416
- <ChangebotProvider slug="acme-corp">
370
+ <>
371
+ {/* Provider can be placed anywhere */}
372
+ <ChangebotProvider slug="acme-corp" />
373
+
417
374
  {/* Banner appears automatically for banner-highlighted updates */}
418
375
  <ChangebotBanner theme="catppuccin-mocha" />
419
376
 
@@ -423,23 +380,14 @@ function App() {
423
380
  <ChangebotBadge theme="catppuccin-mocha" />
424
381
  </header>
425
382
 
426
- <main>
427
- {/* Your app content */}
428
- </main>
383
+ <main>{/* Your app content */}</main>
429
384
 
430
385
  {/* Panel opens when badge is clicked */}
431
- <ChangebotPanel
432
- mode="drawer-right"
433
- theme="catppuccin-mocha"
434
- />
386
+ <ChangebotPanel mode="drawer-right" theme="catppuccin-mocha" />
435
387
 
436
388
  {/* Toast appears for toast-highlighted updates */}
437
- <ChangebotToast
438
- position="bottom-right"
439
- autoDismiss={5}
440
- theme="catppuccin-mocha"
441
- />
442
- </ChangebotProvider>
389
+ <ChangebotToast position="bottom-right" autoDismiss={5} theme="catppuccin-mocha" />
390
+ </>
443
391
  );
444
392
  }
445
393
  ```
@@ -447,11 +395,7 @@ function App() {
447
395
  ### Responsive Theme Example
448
396
 
449
397
  ```tsx
450
- import {
451
- ChangebotProvider,
452
- ChangebotBadge,
453
- ChangebotPanel
454
- } from '@changebot/widgets-react';
398
+ import { ChangebotProvider, ChangebotBadge, ChangebotPanel } from '@changebot/widgets-react';
455
399
 
456
400
  function App() {
457
401
  // Automatically switches between light/dark based on system preference
@@ -459,17 +403,10 @@ function App() {
459
403
  <ChangebotProvider slug="acme-corp">
460
404
  <header>
461
405
  <h1>My App</h1>
462
- <ChangebotBadge
463
- light="catppuccin-latte"
464
- dark="catppuccin-mocha"
465
- />
406
+ <ChangebotBadge light="catppuccin-latte" dark="catppuccin-mocha" />
466
407
  </header>
467
408
 
468
- <ChangebotPanel
469
- mode="drawer-right"
470
- light="catppuccin-latte"
471
- dark="catppuccin-mocha"
472
- />
409
+ <ChangebotPanel mode="drawer-right" light="catppuccin-latte" dark="catppuccin-mocha" />
473
410
  </ChangebotProvider>
474
411
  );
475
412
  }
@@ -478,11 +415,7 @@ function App() {
478
415
  ### Multiple Scopes Example
479
416
 
480
417
  ```tsx
481
- import {
482
- ChangebotProvider,
483
- ChangebotBadge,
484
- ChangebotPanel
485
- } from '@changebot/widgets-react';
418
+ import { ChangebotProvider, ChangebotBadge, ChangebotPanel } from '@changebot/widgets-react';
486
419
 
487
420
  function MultiTenantApp() {
488
421
  return (
@@ -517,10 +450,7 @@ function MultiTenantApp() {
517
450
 
518
451
  ```tsx
519
452
  import { useRef } from 'react';
520
- import {
521
- ChangebotProvider,
522
- ChangebotPanel
523
- } from '@changebot/widgets-react';
453
+ import { ChangebotProvider, ChangebotPanel } from '@changebot/widgets-react';
524
454
 
525
455
  function App() {
526
456
  const panelRef = useRef<HTMLChangebotPanelElement>(null);
@@ -567,6 +497,5 @@ Apache-2.0
567
497
  ## Links
568
498
 
569
499
  - [Changebot Website](https://www.changebot.ai)
570
- - [Documentation](https://docs.changebot.ai)
571
500
  - [GitHub Repository](https://github.com/changebot-ai/widgets)
572
- - [NPM Package](https://www.npmjs.com/package/@changebot/widgets-react)
501
+ - [NPM Package](https://www.npmjs.com/package/@changebot/widgets-react)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@changebot/widgets-react",
3
- "version": "0.2.0",
3
+ "version": "0.2.2",
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.2.0"
17
+ "@changebot/core": "^0.2.2"
18
18
  },
19
19
  "devDependencies": {
20
20
  "@types/react": "^18.2.0",