@changebot/widgets-react 0.2.1 → 0.2.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.
Files changed (2) hide show
  1. package/README.md +53 -116
  2. package/package.json +2 -2
package/README.md CHANGED
@@ -19,11 +19,7 @@ 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 (
@@ -50,10 +46,10 @@ The provider component manages state and data fetching for all Changebot compone
50
46
 
51
47
  #### Props
52
48
 
53
- | Prop | Type | Default | Description |
54
- |------|------|---------|-------------|
55
- | `slug` | `string` | required | Your Changebot team slug (from your Changebot dashboard) |
56
- | `scope` | `string` | `"default"` | Scope identifier for isolating multiple instances |
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 |
57
53
 
58
54
  #### Example
59
55
 
@@ -90,13 +86,13 @@ A badge component that displays the count of new, unread updates. Clicking the b
90
86
 
91
87
  #### Props
92
88
 
93
- | Prop | Type | Default | Description |
94
- |------|------|---------|-------------|
95
- | `scope` | `string` | `"default"` | Scope to connect to (must match provider scope) |
96
- | `theme` | `Theme` | - | Fixed theme (see Theming section) |
97
- | `light` | `Theme` | - | Theme for light mode (auto-switches based on system preference) |
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 |
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 |
100
96
 
101
97
  #### Example
102
98
 
@@ -125,13 +121,13 @@ A panel component that displays your product updates. Can be displayed as a draw
125
121
 
126
122
  #### Props
127
123
 
128
- | Prop | Type | Default | Description |
129
- |------|------|---------|-------------|
130
- | `scope` | `string` | `"default"` | Scope to connect to (must match provider scope) |
131
- | `mode` | `"drawer-left"` \| `"drawer-right"` \| `"modal"` | `"drawer-right"` | Display mode |
132
- | `theme` | `Theme` | - | Fixed theme (see Theming section) |
133
- | `light` | `Theme` | - | Theme for light mode (auto-switches based on system preference) |
134
- | `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) |
135
131
 
136
132
  #### Methods
137
133
 
@@ -166,11 +162,7 @@ function App() {
166
162
  return (
167
163
  <>
168
164
  <button onClick={handleOpenPanel}>Show Updates</button>
169
- <ChangebotPanel
170
- ref={panelRef}
171
- mode="drawer-right"
172
- theme="nord"
173
- />
165
+ <ChangebotPanel ref={panelRef} mode="drawer-right" theme="nord" />
174
166
  </>
175
167
  );
176
168
  }
@@ -184,12 +176,12 @@ A banner component that displays a highlighted update at the top of your page. A
184
176
 
185
177
  #### Props
186
178
 
187
- | Prop | Type | Default | Description |
188
- |------|------|---------|-------------|
189
- | `scope` | `string` | `"default"` | Scope to connect to (must match provider scope) |
190
- | `theme` | `Theme` | - | Fixed theme (see Theming section) |
191
- | `light` | `Theme` | - | Theme for light mode (auto-switches based on system preference) |
192
- | `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) |
193
185
 
194
186
  #### Methods
195
187
 
@@ -209,9 +201,7 @@ await bannerRef.current?.toggle();
209
201
  #### Example
210
202
 
211
203
  ```tsx
212
- <ChangebotBanner
213
- theme="dracula"
214
- />
204
+ <ChangebotBanner theme="dracula" />
215
205
  ```
216
206
 
217
207
  ---
@@ -222,14 +212,14 @@ A toast notification component that displays brief update notifications. Automat
222
212
 
223
213
  #### Props
224
214
 
225
- | Prop | Type | Default | Description |
226
- |------|------|---------|-------------|
227
- | `scope` | `string` | `"default"` | Scope to connect to (must match provider scope) |
228
- | `position` | `"top-left"` \| `"top-right"` \| `"bottom-left"` \| `"bottom-right"` | `"bottom-right"` | Screen position for the toast |
229
- | `autoDismiss` | `number` | - | Auto-dismiss after N seconds (optional) |
230
- | `theme` | `Theme` | - | Fixed theme (see Theming section) |
231
- | `light` | `Theme` | - | Theme for light mode (auto-switches based on system preference) |
232
- | `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) |
233
223
 
234
224
  #### Methods
235
225
 
@@ -246,11 +236,7 @@ await toastRef.current?.dismiss();
246
236
  #### Example
247
237
 
248
238
  ```tsx
249
- <ChangebotToast
250
- position="bottom-right"
251
- autoDismiss={5}
252
- theme="tokyo-night"
253
- />
239
+ <ChangebotToast position="bottom-right" autoDismiss={5} theme="tokyo-night" />
254
240
  ```
255
241
 
256
242
  ---
@@ -283,32 +269,17 @@ Use the `theme` prop for a theme that never changes:
283
269
  Use `light` and `dark` props to automatically switch based on user's system preference:
284
270
 
285
271
  ```tsx
286
- <ChangebotPanel
287
- light="catppuccin-latte"
288
- dark="catppuccin-mocha"
289
- />
272
+ <ChangebotPanel light="catppuccin-latte" dark="catppuccin-mocha" />
290
273
  ```
291
274
 
292
275
  #### Apply to All Components
293
276
 
294
277
  ```tsx
295
278
  <ChangebotProvider slug="acme">
296
- <ChangebotBadge
297
- light="gruvbox-light"
298
- dark="gruvbox-dark"
299
- />
300
- <ChangebotPanel
301
- light="gruvbox-light"
302
- dark="gruvbox-dark"
303
- />
304
- <ChangebotBanner
305
- light="gruvbox-light"
306
- dark="gruvbox-dark"
307
- />
308
- <ChangebotToast
309
- light="gruvbox-light"
310
- dark="gruvbox-dark"
311
- />
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" />
312
283
  </ChangebotProvider>
313
284
  ```
314
285
 
@@ -370,8 +341,8 @@ function Updates() {
370
341
  expires_on: null,
371
342
  highlight_target: null,
372
343
  hosted_url: null,
373
- tags: [{ id: 1, name: 'Feature', color: '#3b82f6' }]
374
- }
344
+ tags: [{ id: 1, name: 'Feature', color: '#3b82f6' }],
345
+ },
375
346
  ]);
376
347
  await panelRef.current?.open();
377
348
  };
@@ -392,13 +363,7 @@ function Updates() {
392
363
  ### Basic Setup with All Components
393
364
 
394
365
  ```tsx
395
- import {
396
- ChangebotProvider,
397
- ChangebotBadge,
398
- ChangebotPanel,
399
- ChangebotBanner,
400
- ChangebotToast
401
- } from '@changebot/widgets-react';
366
+ import { ChangebotProvider, ChangebotBadge, ChangebotPanel, ChangebotBanner, ChangebotToast } from '@changebot/widgets-react';
402
367
 
403
368
  function App() {
404
369
  return (
@@ -415,22 +380,13 @@ function App() {
415
380
  <ChangebotBadge theme="catppuccin-mocha" />
416
381
  </header>
417
382
 
418
- <main>
419
- {/* Your app content */}
420
- </main>
383
+ <main>{/* Your app content */}</main>
421
384
 
422
385
  {/* Panel opens when badge is clicked */}
423
- <ChangebotPanel
424
- mode="drawer-right"
425
- theme="catppuccin-mocha"
426
- />
386
+ <ChangebotPanel mode="drawer-right" theme="catppuccin-mocha" />
427
387
 
428
388
  {/* Toast appears for toast-highlighted updates */}
429
- <ChangebotToast
430
- position="bottom-right"
431
- autoDismiss={5}
432
- theme="catppuccin-mocha"
433
- />
389
+ <ChangebotToast position="bottom-right" autoDismiss={5} theme="catppuccin-mocha" />
434
390
  </>
435
391
  );
436
392
  }
@@ -439,11 +395,7 @@ function App() {
439
395
  ### Responsive Theme Example
440
396
 
441
397
  ```tsx
442
- import {
443
- ChangebotProvider,
444
- ChangebotBadge,
445
- ChangebotPanel
446
- } from '@changebot/widgets-react';
398
+ import { ChangebotProvider, ChangebotBadge, ChangebotPanel } from '@changebot/widgets-react';
447
399
 
448
400
  function App() {
449
401
  // Automatically switches between light/dark based on system preference
@@ -451,17 +403,10 @@ function App() {
451
403
  <ChangebotProvider slug="acme-corp">
452
404
  <header>
453
405
  <h1>My App</h1>
454
- <ChangebotBadge
455
- light="catppuccin-latte"
456
- dark="catppuccin-mocha"
457
- />
406
+ <ChangebotBadge light="catppuccin-latte" dark="catppuccin-mocha" />
458
407
  </header>
459
408
 
460
- <ChangebotPanel
461
- mode="drawer-right"
462
- light="catppuccin-latte"
463
- dark="catppuccin-mocha"
464
- />
409
+ <ChangebotPanel mode="drawer-right" light="catppuccin-latte" dark="catppuccin-mocha" />
465
410
  </ChangebotProvider>
466
411
  );
467
412
  }
@@ -470,11 +415,7 @@ function App() {
470
415
  ### Multiple Scopes Example
471
416
 
472
417
  ```tsx
473
- import {
474
- ChangebotProvider,
475
- ChangebotBadge,
476
- ChangebotPanel
477
- } from '@changebot/widgets-react';
418
+ import { ChangebotProvider, ChangebotBadge, ChangebotPanel } from '@changebot/widgets-react';
478
419
 
479
420
  function MultiTenantApp() {
480
421
  return (
@@ -509,10 +450,7 @@ function MultiTenantApp() {
509
450
 
510
451
  ```tsx
511
452
  import { useRef } from 'react';
512
- import {
513
- ChangebotProvider,
514
- ChangebotPanel
515
- } from '@changebot/widgets-react';
453
+ import { ChangebotProvider, ChangebotPanel } from '@changebot/widgets-react';
516
454
 
517
455
  function App() {
518
456
  const panelRef = useRef<HTMLChangebotPanelElement>(null);
@@ -559,6 +497,5 @@ Apache-2.0
559
497
  ## Links
560
498
 
561
499
  - [Changebot Website](https://www.changebot.ai)
562
- - [Documentation](https://docs.changebot.ai)
563
500
  - [GitHub Repository](https://github.com/changebot-ai/widgets)
564
- - [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.1",
3
+ "version": "0.2.3",
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.1"
17
+ "@changebot/core": "^0.2.3"
18
18
  },
19
19
  "devDependencies": {
20
20
  "@types/react": "^18.2.0",