@rlse/widget 0.1.0 → 0.1.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 +98 -12
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,18 @@
|
|
|
1
1
|
# @rlse/widget
|
|
2
2
|
|
|
3
|
-
React component for embedding rlse.dev release notes in your application.
|
|
3
|
+
React component for embedding [rlse.dev](https://rlse.dev) release notes directly in your application.
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/@rlse/widget)
|
|
6
|
+
|
|
7
|
+
[](https://socket.dev/npm/package/@rlse/widget/overview)
|
|
8
|
+
|
|
9
|
+
## Features
|
|
10
|
+
|
|
11
|
+
- **Smart triggers**: Manual button, auto-popup on new releases, or both
|
|
12
|
+
- **Unread badge**: Shows count of unseen changes
|
|
13
|
+
- **App filtering**: Show changes for a specific application or all
|
|
14
|
+
- **Theming**: Light, dark, or auto (follows system preference)
|
|
15
|
+
- **Customizable**: Position, colors, labels, and more
|
|
4
16
|
|
|
5
17
|
## Installation
|
|
6
18
|
|
|
@@ -8,29 +20,103 @@ React component for embedding rlse.dev release notes in your application.
|
|
|
8
20
|
npm install @rlse/widget
|
|
9
21
|
```
|
|
10
22
|
|
|
11
|
-
##
|
|
23
|
+
## Quick Start
|
|
12
24
|
|
|
13
25
|
```tsx
|
|
14
26
|
import { RlseWidget } from '@rlse/widget';
|
|
15
27
|
|
|
16
28
|
function App() {
|
|
17
29
|
return (
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
/>
|
|
30
|
+
<>
|
|
31
|
+
<YourApp />
|
|
32
|
+
<RlseWidget orgSlug="your-org-slug" />
|
|
33
|
+
</>
|
|
23
34
|
);
|
|
24
35
|
}
|
|
25
36
|
```
|
|
26
37
|
|
|
27
38
|
## Configuration
|
|
28
39
|
|
|
29
|
-
|
|
40
|
+
### Required
|
|
30
41
|
|
|
31
|
-
|
|
42
|
+
| Option | Type | Description |
|
|
43
|
+
| --------- | -------- | ------------------------------------ |
|
|
44
|
+
| `orgSlug` | `string` | Your organization slug from rlse.dev |
|
|
32
45
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
46
|
+
### Optional
|
|
47
|
+
|
|
48
|
+
| Option | Type | Default | Description |
|
|
49
|
+
| --------------- | -------------------------------------------------------------- | ----------------- | ------------------------------------- |
|
|
50
|
+
| `appSlug` | `string` | — | Filter to a specific application |
|
|
51
|
+
| `trigger` | `'auto' \| 'manual' \| 'both'` | `'manual'` | How the widget opens |
|
|
52
|
+
| `position` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | `'bottom-right'` | Button position |
|
|
53
|
+
| `theme` | `'light' \| 'dark' \| 'auto'` | `'auto'` | Color theme |
|
|
54
|
+
| `limit` | `number` | `10` | Max changes to display |
|
|
55
|
+
| `triggerLabel` | `string` | `"What's New"` | Button text |
|
|
56
|
+
| `modalTitle` | `string` | `"Release Notes"` | Modal header |
|
|
57
|
+
| `primaryColor` | `string` | `#3b82f6` | Accent color (hex) |
|
|
58
|
+
| `autoShowAfter` | `number` | `7` | Days before auto-popup triggers again |
|
|
59
|
+
|
|
60
|
+
## Full Example
|
|
61
|
+
|
|
62
|
+
```tsx
|
|
63
|
+
<RlseWidget
|
|
64
|
+
orgSlug="acme-corp"
|
|
65
|
+
appSlug="dashboard"
|
|
66
|
+
trigger="both"
|
|
67
|
+
position="bottom-right"
|
|
68
|
+
theme="auto"
|
|
69
|
+
limit={5}
|
|
70
|
+
triggerLabel="🎁 What's New"
|
|
71
|
+
modalTitle="Acme Release Notes"
|
|
72
|
+
primaryColor="#10b981"
|
|
73
|
+
autoShowAfter={3}
|
|
74
|
+
/>
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
## Trigger Modes
|
|
78
|
+
|
|
79
|
+
- **`manual`** — Floating button always visible; click to open. Unread badge shows unseen count.
|
|
80
|
+
- **`auto`** — No button; modal auto-opens on first visit after new releases, respecting `autoShowAfter`.
|
|
81
|
+
- **`both`** — Floating button plus auto-popup on new releases.
|
|
82
|
+
|
|
83
|
+
## How "New" Tracking Works
|
|
84
|
+
|
|
85
|
+
The widget uses browser `localStorage` to track seen changes — no backend or login required.
|
|
86
|
+
|
|
87
|
+
- **Key**: `rlse_widget_{orgSlug}_seen`
|
|
88
|
+
- **Value**: Array of seen change IDs
|
|
89
|
+
- Per-device tracking (phone and laptop tracked independently)
|
|
90
|
+
|
|
91
|
+
## Styling
|
|
92
|
+
|
|
93
|
+
Use `primaryColor` to match your brand:
|
|
94
|
+
|
|
95
|
+
```tsx
|
|
96
|
+
<RlseWidget orgSlug="acme-corp" primaryColor="#ff6b6b" />
|
|
36
97
|
```
|
|
98
|
+
|
|
99
|
+
## Troubleshooting
|
|
100
|
+
|
|
101
|
+
**Widget not appearing**
|
|
102
|
+
|
|
103
|
+
1. Verify `orgSlug` is correct
|
|
104
|
+
2. Ensure your organization has published public changes
|
|
105
|
+
3. Check the browser console for errors
|
|
106
|
+
|
|
107
|
+
**Auto-popup not triggering**
|
|
108
|
+
|
|
109
|
+
1. Open DevTools → Application → Local Storage
|
|
110
|
+
2. Clear `rlse_widget_*` keys to reset seen state
|
|
111
|
+
3. Verify `autoShowAfter` is set as expected
|
|
112
|
+
|
|
113
|
+
## Security
|
|
114
|
+
|
|
115
|
+
- Only **public** changes are surfaced — no authentication required
|
|
116
|
+
- `localStorage` data stays entirely client-side
|
|
117
|
+
- CORS headers restrict the widget API to read-only operations
|
|
118
|
+
|
|
119
|
+
## Support
|
|
120
|
+
|
|
121
|
+
- Email: support@rlse.dev
|
|
122
|
+
- Dashboard: Settings → Widget Embed
|