@trycourier/courier-react-17 8.0.29 → 8.2.0
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 +16 -392
- package/dist/components/courier-toast.d.ts +23 -0
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +5 -1
- package/dist/index.mjs +14 -8
- package/dist/index.mjs.map +1 -1
- package/dist/jest.setup.d.ts +0 -0
- package/package.json +9 -6
package/README.md
CHANGED
|
@@ -2,46 +2,30 @@
|
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
+
**Using React 18+?** Use the [@trycourier/courier-react](../courier-react/) package.
|
|
5
6
|
|
|
6
|
-
|
|
7
|
+
**Not using React?** Use the [@trycourier/courier-ui-inbox](../courier-ui-inbox/) package.
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
## Installation
|
|
7
11
|
|
|
8
12
|
```sh
|
|
9
13
|
npm install @trycourier/courier-react-17
|
|
10
14
|
```
|
|
11
15
|
|
|
12
|
-
|
|
13
|
-
>
|
|
14
|
-
> **Not using React?** Use the [@trycourier/courier-ui-inbox](../courier-ui-inbox/README.md) package instead.
|
|
15
|
-
|
|
16
|
-
## 2. Authenticate
|
|
17
|
-
|
|
18
|
-
To use the SDK, you need to generate a JWT (JSON Web Token) for your user. **This JWT should always be generated by your backend server, never in client-side code.**
|
|
16
|
+
## Usage
|
|
19
17
|
|
|
20
|
-
|
|
18
|
+
Check out the [Courier documentation](https://www.courier.com/docs/sdk-libraries/courier-react-web) for a full guide to Courier React.
|
|
21
19
|
|
|
22
|
-
|
|
23
|
-
|
|
20
|
+
If you’re coming from an earlier version of the Courier React SDK,
|
|
21
|
+
check out [the v8 migration guide](https://www.courier.com/docs/sdk-libraries/courier-react-v8-migration-guide)
|
|
22
|
+
for what’s changed, how to upgrade your app,
|
|
23
|
+
and links to documentation for past versions of the React SDK.
|
|
24
24
|
|
|
25
|
-
2. **Your backend calls Courier to issue a JWT:**
|
|
26
|
-
- In your backend endpoint, use your [Courier API Key](https://app.courier.com/settings/api-keys) to call the [Courier JWT Token Endpoint](https://www.courier.com/docs/reference/auth/issue-token) and generate a JWT for the user.
|
|
27
|
-
- Your backend then returns the JWT to your frontend.
|
|
28
25
|
|
|
29
|
-
|
|
26
|
+
## Examples
|
|
30
27
|
|
|
31
|
-
|
|
32
|
-
curl --request POST \
|
|
33
|
-
--url https://api.courier.com/auth/issue-token \
|
|
34
|
-
--header 'Accept: application/json' \
|
|
35
|
-
--header 'Authorization: Bearer $YOUR_API_KEY' \
|
|
36
|
-
--header 'Content-Type: application/json' \
|
|
37
|
-
--data \
|
|
38
|
-
'{
|
|
39
|
-
"scope": "user_id:$YOUR_USER_ID write:user-tokens inbox:read:messages inbox:write:events read:preferences write:preferences read:brands",
|
|
40
|
-
"expires_in": "$YOUR_NUMBER days"
|
|
41
|
-
}'
|
|
42
|
-
```
|
|
43
|
-
|
|
44
|
-
## 3. Add Inbox Component
|
|
28
|
+
Below are a few examples of the Courier Inbox. Visit the [Courier documentation](https://www.courier.com/docs/sdk-libraries/courier-react-web) for more examples.
|
|
45
29
|
|
|
46
30
|
### `CourierInbox`
|
|
47
31
|
|
|
@@ -103,368 +87,8 @@ export default function App() {
|
|
|
103
87
|
}
|
|
104
88
|
```
|
|
105
89
|
|
|
106
|
-
##
|
|
107
|
-
|
|
108
|
-
`courier-react-17` only supports client side rendering. Frameworks like Next.js must be explicitly client-side rendered where the Courier components are used.
|
|
109
|
-
|
|
110
|
-
## Handle Clicks and Presses
|
|
111
|
-
|
|
112
|
-
```ts
|
|
113
|
-
import { useEffect } from 'react';
|
|
114
|
-
import { CourierInbox, useCourier, type CourierInboxListItemFactoryProps, type CourierInboxListItemActionFactoryProps } from '@trycourier/courier-react-17';
|
|
115
|
-
|
|
116
|
-
export default function App() {
|
|
117
|
-
|
|
118
|
-
const courier = useCourier();
|
|
119
|
-
|
|
120
|
-
useEffect(() => {
|
|
121
|
-
// Generate a JWT for your user (do this on your backend server)
|
|
122
|
-
const jwt = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...'; // Replace with actual JWT
|
|
123
|
-
|
|
124
|
-
// Authenticate the user with the inbox
|
|
125
|
-
courier.shared.signIn({
|
|
126
|
-
userId: $YOUR_USER_ID,
|
|
127
|
-
jwt: jwt,
|
|
128
|
-
});
|
|
129
|
-
}, []);
|
|
130
|
-
|
|
131
|
-
return (
|
|
132
|
-
<CourierInbox
|
|
133
|
-
onMessageClick={({ message, index }: CourierInboxListItemFactoryProps) => {
|
|
134
|
-
alert("Message clicked at index " + index + ":\n" + JSON.stringify(message, null, 2));
|
|
135
|
-
}}
|
|
136
|
-
onMessageActionClick={({ message, action, index }: CourierInboxListItemActionFactoryProps) => {
|
|
137
|
-
alert(
|
|
138
|
-
"Message action clicked at index " + index + ":\n" +
|
|
139
|
-
"Action: " + JSON.stringify(action, null, 2) + "\n" +
|
|
140
|
-
"Message: " + JSON.stringify(message, null, 2)
|
|
141
|
-
);
|
|
142
|
-
}}
|
|
143
|
-
onMessageLongPress={({ message, index }: CourierInboxListItemFactoryProps) => {
|
|
144
|
-
// Handle message long presses. **Only works on devices that support javascript's touch events. This will not work with a mouse cursor.**
|
|
145
|
-
alert("Message long pressed at index " + index + ":\n" + JSON.stringify(message, null, 2));
|
|
146
|
-
}}
|
|
147
|
-
/>
|
|
148
|
-
);
|
|
149
|
-
|
|
150
|
-
}
|
|
151
|
-
```
|
|
152
|
-
|
|
153
|
-
## Styles and Theming
|
|
154
|
-
|
|
155
|
-
### Light & Dark Themes
|
|
156
|
-
|
|
157
|
-
The fastest way to style the Inbox to match your app. This example shows unread indicator styling, but you can customize fonts, icons, text, and more.
|
|
158
|
-
|
|
159
|
-
> **🎨 Theme Reference:** [All available theme values](../courier-ui-inbox/docs/theme.md)
|
|
160
|
-
|
|
161
|
-
<img width="688" alt="Screenshot 2025-06-25 at 5 38 07 PM" src="https://github.com/user-attachments/assets/d1440494-ee66-4ff6-850b-c1a13691cf2f" />
|
|
162
|
-
|
|
163
|
-
```ts
|
|
164
|
-
import { CourierInbox, ..., type CourierInboxTheme } from '@trycourier/courier-react-17';
|
|
165
|
-
|
|
166
|
-
export default function App() {
|
|
167
|
-
...
|
|
168
|
-
|
|
169
|
-
const theme: CourierInboxTheme = {
|
|
170
|
-
inbox: {
|
|
171
|
-
header: {
|
|
172
|
-
filters: {
|
|
173
|
-
unreadIndicator: {
|
|
174
|
-
backgroundColor: '#8B5CF6',
|
|
175
|
-
},
|
|
176
|
-
},
|
|
177
|
-
},
|
|
178
|
-
list: {
|
|
179
|
-
item: {
|
|
180
|
-
unreadIndicatorColor: '#8B5CF6',
|
|
181
|
-
},
|
|
182
|
-
},
|
|
183
|
-
},
|
|
184
|
-
};
|
|
185
|
-
|
|
186
|
-
return <CourierInbox lightTheme={theme} darkTheme={theme} mode="light" />;
|
|
187
|
-
}
|
|
188
|
-
```
|
|
189
|
-
|
|
190
|
-
### Popup Alignment, Positioning, and Dimensions
|
|
191
|
-
|
|
192
|
-
```ts
|
|
193
|
-
export default function App() {
|
|
194
|
-
|
|
195
|
-
...
|
|
196
|
-
|
|
197
|
-
return (
|
|
198
|
-
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '100px' }}>
|
|
199
|
-
<CourierInboxPopupMenu
|
|
200
|
-
popupAlignment="top-right" // 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center' | 'center-right' | 'center-left' | 'center-center'
|
|
201
|
-
popupWidth="340px"
|
|
202
|
-
popupHeight="400px"
|
|
203
|
-
top="44px"
|
|
204
|
-
right="44px"
|
|
205
|
-
/>
|
|
206
|
-
</div>
|
|
207
|
-
);
|
|
208
|
-
|
|
209
|
-
}
|
|
210
|
-
```
|
|
211
|
-
|
|
212
|
-
### Custom height `CourierInbox`
|
|
213
|
-
|
|
214
|
-
> **Important:** The default `CourierInbox` height is auto. It will set it's height based on it's children.
|
|
215
|
-
|
|
216
|
-
```ts
|
|
217
|
-
<CourierInbox height='50vh' />
|
|
218
|
-
```
|
|
219
|
-
|
|
220
|
-
## Custom Elements
|
|
221
|
-
|
|
222
|
-
Customize the inbox UI with any element you want.
|
|
223
|
-
|
|
224
|
-
### List Items
|
|
225
|
-
|
|
226
|
-
<img width="688" alt="Screenshot 2025-06-25 at 6 25 17 PM" src="https://github.com/user-attachments/assets/075a568b-5538-4116-bb3d-752ecc5dea2c" />
|
|
227
|
-
|
|
228
|
-
```ts
|
|
229
|
-
import { CourierInbox, ..., type CourierInboxListItemFactoryProps } from '@trycourier/courier-react-17'
|
|
230
|
-
|
|
231
|
-
const CustomListItem = ({ message, index }: CourierInboxListItemFactoryProps) => (
|
|
232
|
-
<pre style={{
|
|
233
|
-
padding: '24px',
|
|
234
|
-
borderBottom: '1px solid #e0e0e0',
|
|
235
|
-
margin: '0'
|
|
236
|
-
}}>
|
|
237
|
-
{JSON.stringify({ message, index }, null, 2)}
|
|
238
|
-
</pre>
|
|
239
|
-
);
|
|
240
|
-
|
|
241
|
-
export default function App() {
|
|
242
|
-
|
|
243
|
-
...
|
|
244
|
-
|
|
245
|
-
return (
|
|
246
|
-
<CourierInbox
|
|
247
|
-
renderListItem={(props: CourierInboxListItemFactoryProps) => {
|
|
248
|
-
return <CustomListItem {...props} />
|
|
249
|
-
}}
|
|
250
|
-
/>
|
|
251
|
-
);
|
|
252
|
-
|
|
253
|
-
}
|
|
254
|
-
```
|
|
255
|
-
|
|
256
|
-
### Header
|
|
257
|
-
|
|
258
|
-
<img width="688" alt="Screenshot 2025-06-25 at 6 35 59 PM" src="https://github.com/user-attachments/assets/25d45ac1-32e6-4e98-baf1-d0df34cef72a" />
|
|
259
|
-
|
|
260
|
-
```ts
|
|
261
|
-
import { CourierInbox, ..., type CourierInboxHeaderFactoryProps } from '@trycourier/courier-react-17'
|
|
262
|
-
|
|
263
|
-
const CustomHeader = (props: CourierInboxHeaderFactoryProps) => (
|
|
264
|
-
<div style={{
|
|
265
|
-
background: 'red',
|
|
266
|
-
fontSize: '24px',
|
|
267
|
-
padding: '24px',
|
|
268
|
-
width: '100%'
|
|
269
|
-
}}>
|
|
270
|
-
{props.feedType}
|
|
271
|
-
</div>
|
|
272
|
-
);
|
|
273
|
-
|
|
274
|
-
export default function App() {
|
|
275
|
-
|
|
276
|
-
...
|
|
277
|
-
|
|
278
|
-
return (
|
|
279
|
-
<CourierInbox
|
|
280
|
-
renderHeader={(props: CourierInboxHeaderFactoryProps) => {
|
|
281
|
-
return <CustomHeader {...props} />
|
|
282
|
-
}}
|
|
283
|
-
/>
|
|
284
|
-
);
|
|
285
|
-
|
|
286
|
-
}
|
|
287
|
-
```
|
|
288
|
-
|
|
289
|
-
### Popup Menu Button
|
|
290
|
-
|
|
291
|
-
<img width="606" alt="Screenshot 2025-06-25 at 6 40 38 PM" src="https://github.com/user-attachments/assets/dfb0daca-f11d-420f-9dc7-0c14b49ab7db" />
|
|
292
|
-
|
|
293
|
-
```ts
|
|
294
|
-
import { CourierInboxPopupMenu, ..., type CourierInboxMenuButtonFactoryProps } from '@trycourier/courier-react-17'
|
|
295
|
-
|
|
296
|
-
const CustomMenuButton = ({ unreadCount }: CourierInboxMenuButtonFactoryProps) => (
|
|
297
|
-
<button>
|
|
298
|
-
Open the Inbox Popup. Unread message count: {unreadCount}
|
|
299
|
-
</button>
|
|
300
|
-
);
|
|
301
|
-
|
|
302
|
-
export default function App() {
|
|
303
|
-
|
|
304
|
-
...
|
|
305
|
-
|
|
306
|
-
return (
|
|
307
|
-
<div style={{ padding: '24px' }}>
|
|
308
|
-
<CourierInboxPopupMenu
|
|
309
|
-
renderMenuButton={(props: CourierInboxMenuButtonFactoryProps) => {
|
|
310
|
-
return <CustomMenuButton {...props} />
|
|
311
|
-
}}
|
|
312
|
-
/>
|
|
313
|
-
</div>
|
|
314
|
-
);
|
|
315
|
-
|
|
316
|
-
}
|
|
317
|
-
```
|
|
318
|
-
|
|
319
|
-
### Loading, Empty, Error & Pagination
|
|
320
|
-
|
|
321
|
-
```ts
|
|
322
|
-
import {
|
|
323
|
-
CourierInbox,
|
|
324
|
-
...,
|
|
325
|
-
type CourierInboxStateEmptyFactoryProps,
|
|
326
|
-
type CourierInboxStateLoadingFactoryProps,
|
|
327
|
-
type CourierInboxStateErrorFactoryProps,
|
|
328
|
-
type CourierInboxPaginationItemFactoryProps
|
|
329
|
-
} from '@trycourier/courier-react-17'
|
|
330
|
-
|
|
331
|
-
const CustomLoadingState = ({ feedType }: CourierInboxStateLoadingFactoryProps) => (
|
|
332
|
-
<div style={{
|
|
333
|
-
padding: '24px',
|
|
334
|
-
background: 'red',
|
|
335
|
-
textAlign: 'center'
|
|
336
|
-
}}>
|
|
337
|
-
Custom Loading State
|
|
338
|
-
</div>
|
|
339
|
-
);
|
|
340
|
-
|
|
341
|
-
const CustomEmptyState = ({ feedType }: CourierInboxStateEmptyFactoryProps) => (
|
|
342
|
-
<div style={{
|
|
343
|
-
padding: '24px',
|
|
344
|
-
background: 'green',
|
|
345
|
-
textAlign: 'center'
|
|
346
|
-
}}>
|
|
347
|
-
Custom Empty State
|
|
348
|
-
</div>
|
|
349
|
-
);
|
|
350
|
-
|
|
351
|
-
const CustomErrorState = ({ feedType, error }: CourierInboxStateErrorFactoryProps) => (
|
|
352
|
-
<div style={{
|
|
353
|
-
padding: '24px',
|
|
354
|
-
background: 'blue',
|
|
355
|
-
textAlign: 'center'
|
|
356
|
-
}}>
|
|
357
|
-
Custom Error State: {error.message}
|
|
358
|
-
</div>
|
|
359
|
-
);
|
|
360
|
-
|
|
361
|
-
const CustomPaginationItem = ({ feedType }: CourierInboxPaginationItemFactoryProps) => (
|
|
362
|
-
<div style={{
|
|
363
|
-
padding: '24px',
|
|
364
|
-
background: 'yellow',
|
|
365
|
-
textAlign: 'center'
|
|
366
|
-
}}>
|
|
367
|
-
Custom Pagination Item
|
|
368
|
-
</div>
|
|
369
|
-
);
|
|
370
|
-
|
|
371
|
-
export default function App() {
|
|
372
|
-
|
|
373
|
-
...
|
|
374
|
-
|
|
375
|
-
return (
|
|
376
|
-
<CourierInbox
|
|
377
|
-
renderLoadingState={(props: CourierInboxStateLoadingFactoryProps) => {
|
|
378
|
-
return <CustomLoadingState {...props} />
|
|
379
|
-
}}
|
|
380
|
-
renderEmptyState={(props: CourierInboxStateEmptyFactoryProps) => {
|
|
381
|
-
return <CustomEmptyState {...props} />
|
|
382
|
-
}}
|
|
383
|
-
renderErrorState={(props: CourierInboxStateErrorFactoryProps) => {
|
|
384
|
-
return <CustomErrorState {...props} />
|
|
385
|
-
}}
|
|
386
|
-
renderPaginationItem={(props: CourierInboxPaginationItemFactoryProps) => {
|
|
387
|
-
return <CustomPaginationItem {...props} />
|
|
388
|
-
}}
|
|
389
|
-
/>
|
|
390
|
-
);
|
|
391
|
-
|
|
392
|
-
}
|
|
393
|
-
```
|
|
394
|
-
|
|
395
|
-
### Available Hooks
|
|
396
|
-
|
|
397
|
-
```ts
|
|
398
|
-
import { useCourier } from '@trycourier/courier-react';
|
|
399
|
-
|
|
400
|
-
const { auth, inbox } = useCourier();
|
|
401
|
-
|
|
402
|
-
// Sign in & Sign out
|
|
403
|
-
useEffect(() => {
|
|
404
|
-
auth.signIn({
|
|
405
|
-
userId: '$YOUR_USER_ID',
|
|
406
|
-
jwt: jwt,
|
|
407
|
-
});
|
|
408
|
-
|
|
409
|
-
// To sign out, call:
|
|
410
|
-
auth.signOut();
|
|
411
|
-
}, [auth]);
|
|
412
|
-
|
|
413
|
-
// Log the signed-in user
|
|
414
|
-
useEffect(() => {
|
|
415
|
-
console.log('Current Courier User: ', auth.userId);
|
|
416
|
-
}, [auth.userId]);
|
|
417
|
-
|
|
418
|
-
// Inbox Hooks
|
|
419
|
-
useEffect(() => {
|
|
420
|
-
|
|
421
|
-
// Set how many messages get fetched when getting another page
|
|
422
|
-
inbox.setPaginationLimit(20);
|
|
423
|
-
|
|
424
|
-
// Reload a specific dataset in the inbox
|
|
425
|
-
inbox.load({ feedType: 'inbox', canUseCache: true });
|
|
426
|
-
|
|
427
|
-
// Fetch the next page of messages
|
|
428
|
-
inbox.fetchNextPageOfMessages({ feedType: 'inbox' }).then((data) => {
|
|
429
|
-
if (data) {
|
|
430
|
-
console.log('Next page of messages:', data);
|
|
431
|
-
}
|
|
432
|
-
});
|
|
433
|
-
|
|
434
|
-
// Mark all messages as read
|
|
435
|
-
inbox.readAllMessages();
|
|
436
|
-
|
|
437
|
-
// Log unread count and errors
|
|
438
|
-
if (inbox.unreadCount !== undefined) {
|
|
439
|
-
console.log('Unread messages:', inbox.unreadCount);
|
|
440
|
-
}
|
|
441
|
-
|
|
442
|
-
if (inbox.error) {
|
|
443
|
-
console.error('Inbox error:', inbox.error);
|
|
444
|
-
}
|
|
445
|
-
|
|
446
|
-
// Log inbox and archive datasets
|
|
447
|
-
if (inbox.inbox) {
|
|
448
|
-
console.log('Inbox dataset:', inbox.inbox);
|
|
449
|
-
}
|
|
450
|
-
|
|
451
|
-
if (inbox.archive) {
|
|
452
|
-
console.log('Archive dataset:', inbox.archive);
|
|
453
|
-
}
|
|
454
|
-
|
|
455
|
-
}, [
|
|
456
|
-
inbox,
|
|
457
|
-
inbox.inbox,
|
|
458
|
-
inbox.archive,
|
|
459
|
-
inbox.unreadCount,
|
|
460
|
-
inbox.error,
|
|
461
|
-
]);
|
|
462
|
-
```
|
|
463
|
-
|
|
464
|
-
> **Not using React?** We suggest you use [@trycourier/courier-ui-inbox](../courier-ui-inbox/README.md) package instead.
|
|
465
|
-
|
|
466
|
-
## **Share feedback with Courier**
|
|
90
|
+
## Share feedback with Courier
|
|
467
91
|
|
|
468
|
-
|
|
92
|
+
Have an idea or feedback about our SDKs? Let us know!
|
|
469
93
|
|
|
470
|
-
[Courier Web Issues](https://github.com/trycourier/courier-web/issues)
|
|
94
|
+
Open an issue: [Courier Web Issues](https://github.com/trycourier/courier-web/issues)
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { CourierToastProps } from '@trycourier/courier-react-components';
|
|
2
|
+
/**
|
|
3
|
+
* CourierToast React component.
|
|
4
|
+
*
|
|
5
|
+
* @example
|
|
6
|
+
* ```tsx
|
|
7
|
+
* const courier = useCourier();
|
|
8
|
+
*
|
|
9
|
+
* useEffect(() => {
|
|
10
|
+
* // Generate a JWT for your user (do this on your backend server)
|
|
11
|
+
* const jwt = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...'; // Replace with actual JWT
|
|
12
|
+
*
|
|
13
|
+
* // Authenticate the user with the inbox
|
|
14
|
+
* courier.shared.signIn({
|
|
15
|
+
* userId: $YOUR_USER_ID,
|
|
16
|
+
* jwt: jwt,
|
|
17
|
+
* });
|
|
18
|
+
* }, []);
|
|
19
|
+
*
|
|
20
|
+
* return <CourierToast />;
|
|
21
|
+
* ```
|
|
22
|
+
*/
|
|
23
|
+
export declare const CourierToast: import('react').ForwardRefExoticComponent<CourierToastProps & import('react').RefAttributes<CourierToastElement>>;
|
package/dist/index.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@trycourier/courier-js"),r=require("react/jsx-runtime"),t=require("react"),o=require("@trycourier/courier-react-components"),u=require("react-dom"),i=require("@trycourier/courier-ui-inbox"),n=require("@trycourier/courier-ui-toast");function a(e){const r=document.createElement("div");return u.render(e,r),r}const s=t.forwardRef(((e,t)=>r.jsx(o.CourierRenderContext.Provider,{value:a,children:r.jsx(o.CourierInboxComponent,{...e,ref:t})})));s.displayName="CourierInbox";const c=t.forwardRef(((e,t)=>r.jsx(o.CourierRenderContext.Provider,{value:a,children:r.jsx(o.CourierInboxPopupMenuComponent,{...e,ref:t})})));c.displayName="CourierInboxPopupMenu";const d=t.forwardRef(((e,t)=>r.jsx(o.CourierRenderContext.Provider,{value:a,children:r.jsx(o.CourierToastComponent,{...e,ref:t})})));d.displayName="CourierToast",e.Courier.shared.courierUserAgentName="courier-react-17",e.Courier.shared.courierUserAgentVersion="8.2.0",Object.defineProperty(exports,"useCourier",{enumerable:!0,get:()=>o.useCourier}),Object.defineProperty(exports,"archiveMessage",{enumerable:!0,get:()=>i.archiveMessage}),Object.defineProperty(exports,"clickMessage",{enumerable:!0,get:()=>i.clickMessage}),Object.defineProperty(exports,"defaultDarkTheme",{enumerable:!0,get:()=>i.defaultDarkTheme}),Object.defineProperty(exports,"defaultLightTheme",{enumerable:!0,get:()=>i.defaultLightTheme}),Object.defineProperty(exports,"markAsRead",{enumerable:!0,get:()=>i.markAsRead}),Object.defineProperty(exports,"markAsUnread",{enumerable:!0,get:()=>i.markAsUnread}),Object.defineProperty(exports,"mergeTheme",{enumerable:!0,get:()=>i.mergeTheme}),Object.defineProperty(exports,"openMessage",{enumerable:!0,get:()=>i.openMessage}),Object.defineProperty(exports,"defaultToastDarkTheme",{enumerable:!0,get:()=>n.defaultDarkTheme}),Object.defineProperty(exports,"defaultToastLightTheme",{enumerable:!0,get:()=>n.defaultLightTheme}),Object.defineProperty(exports,"mergeToastTheme",{enumerable:!0,get:()=>n.mergeTheme}),exports.CourierInbox=s,exports.CourierInboxPopupMenu=c,exports.CourierToast=d;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../src/utils/render.tsx","../src/components/courier-inbox.tsx","../src/components/courier-inbox-popup-menu.tsx"],"sourcesContent":["import { ReactNode } from \"react\";\nimport { render } from \"react-dom\";\n\n/**\n * Converts a React node to an HTMLElement.\n * @param node - The React node to convert.\n * @returns The converted HTMLElement.\n */\nexport function reactNodeToHTMLElement(node: ReactNode): HTMLElement {\n const container = document.createElement('div');\n\n render(node, container);\n\n
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../src/utils/render.tsx","../src/components/courier-inbox.tsx","../src/components/courier-inbox-popup-menu.tsx","../src/components/courier-toast.tsx","../src/index.tsx"],"sourcesContent":["import { ReactNode } from \"react\";\nimport { render } from \"react-dom\";\n\n/**\n * Converts a React node to an HTMLElement.\n * @param node - The React node to convert.\n * @returns The converted HTMLElement.\n */\nexport function reactNodeToHTMLElement(node: ReactNode): HTMLElement {\n const container = document.createElement('div');\n\n render(node, container);\n\n return container;\n}\n","import { forwardRef } from \"react\";\nimport { CourierInbox as CourierInboxElement } from \"@trycourier/courier-ui-inbox\";\nimport { CourierInboxComponent, CourierInboxProps, CourierRenderContext } from \"@trycourier/courier-react-components\";\nimport { reactNodeToHTMLElement } from \"../utils/render\";\n\n/**\n * CourierInbox React component.\n *\n * @example\n * ```tsx\n * const courier = useCourier();\n *\n * useEffect(() => {\n * // Generate a JWT for your user (do this on your backend server)\n * const jwt = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...'; // Replace with actual JWT\n *\n * // Authenticate the user with the inbox\n * courier.shared.signIn({\n * userId: $YOUR_USER_ID,\n * jwt: jwt,\n * });\n * }, []);\n *\n * return <CourierInbox />;\n * ```\n */\nexport const CourierInbox = forwardRef<CourierInboxElement, CourierInboxProps>((props, ref) => {\n return (\n <CourierRenderContext.Provider value={reactNodeToHTMLElement}>\n <CourierInboxComponent {...props} ref={ref} />\n </CourierRenderContext.Provider>\n );\n});\n\nCourierInbox.displayName = 'CourierInbox';\n","import { forwardRef } from \"react\";\nimport { CourierInboxPopupMenu as CourierInboxPopupMenuElement } from \"@trycourier/courier-ui-inbox\";\nimport { CourierInboxPopupMenuComponent, CourierInboxPopupMenuProps, CourierRenderContext } from \"@trycourier/courier-react-components\";\nimport { reactNodeToHTMLElement } from \"../utils/render\";\n\n/**\n * CourierInboxPopupMenu React component.\n *\n * This component is used to display a popup menu for a message in the inbox.\n *\n * @example\n * ```tsx\n * const courier = useCourier();\n *\n * useEffect(() => {\n * // Generate a JWT for your user (do this on your backend server)\n * const jwt = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...'; // Replace with actual JWT\n *\n * // Authenticate the user with the inbox\n * courier.shared.signIn({\n * userId: $YOUR_USER_ID,\n * jwt: jwt,\n * });\n * }, []);\n *\n * return <CourierInboxPopupMenu />;\n * ```\n */\nexport const CourierInboxPopupMenu = forwardRef<CourierInboxPopupMenuElement, CourierInboxPopupMenuProps>((props, ref) => {\n return (\n <CourierRenderContext.Provider value={reactNodeToHTMLElement}>\n <CourierInboxPopupMenuComponent {...props} ref={ref} />\n </CourierRenderContext.Provider>\n );\n});\n\nCourierInboxPopupMenu.displayName = 'CourierInboxPopupMenu';\n","import { forwardRef } from \"react\";\nimport { CourierToast as CourierToastElement } from \"@trycourier/courier-ui-toast\";\nimport { CourierToastComponent, CourierToastProps, CourierRenderContext } from \"@trycourier/courier-react-components\";\nimport { reactNodeToHTMLElement } from \"../utils/render\";\n\n/**\n * CourierToast React component.\n *\n * @example\n * ```tsx\n * const courier = useCourier();\n *\n * useEffect(() => {\n * // Generate a JWT for your user (do this on your backend server)\n * const jwt = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...'; // Replace with actual JWT\n *\n * // Authenticate the user with the inbox\n * courier.shared.signIn({\n * userId: $YOUR_USER_ID,\n * jwt: jwt,\n * });\n * }, []);\n *\n * return <CourierToast />;\n * ```\n */\nexport const CourierToast = forwardRef<CourierToastElement, CourierToastProps>((props, ref) => {\n return (\n <CourierRenderContext.Provider value={reactNodeToHTMLElement}>\n <CourierToastComponent {...props} ref={ref} />\n </CourierRenderContext.Provider>\n );\n});\n\nCourierToast.displayName = 'CourierToast';\n","import { Courier } from '@trycourier/courier-js';\n\nCourier.shared.courierUserAgentName = \"courier-react-17\";\nCourier.shared.courierUserAgentVersion = __PACKAGE_VERSION__;\n\nexport { CourierInbox } from './components/courier-inbox';\nexport { CourierInboxPopupMenu } from './components/courier-inbox-popup-menu';\nexport { CourierToast } from './components/courier-toast';\n\nexport { useCourier } from '@trycourier/courier-react-components';\n\nexport type {\n CourierInboxProps,\n CourierInboxPopupMenuProps,\n CourierToastProps,\n} from '@trycourier/courier-react-components';\n\n// Re-export types from courier-js\nexport type {\n CourierProps,\n CourierClientOptions,\n CourierBrand,\n CourierApiUrls,\n CourierUserPreferences,\n CourierUserPreferencesStatus,\n CourierUserPreferencesChannel,\n CourierUserPreferencesPaging,\n CourierUserPreferencesTopic,\n CourierUserPreferencesTopicResponse,\n CourierDevice,\n CourierToken,\n CourierGetInboxMessageResponse,\n CourierGetInboxMessagesResponse,\n InboxMessage,\n InboxAction,\n InboxMessageEventEnvelope,\n} from '@trycourier/courier-js';\n\n// Re-export utility functions from courier-ui-inbox\nexport {\n markAsRead,\n markAsUnread,\n clickMessage,\n archiveMessage,\n openMessage\n} from '@trycourier/courier-ui-inbox';\n\n// Re-export factory prop types from courier-ui-inbox\nexport type {\n CourierInboxHeaderFactoryProps,\n CourierInboxStateLoadingFactoryProps,\n CourierInboxStateEmptyFactoryProps,\n CourierInboxStateErrorFactoryProps,\n CourierInboxListItemFactoryProps,\n CourierInboxListItemActionFactoryProps,\n CourierInboxPaginationItemFactoryProps,\n CourierInboxMenuButtonFactoryProps,\n CourierInboxFeedType\n} from '@trycourier/courier-ui-inbox';\n\n// Re-export theme types from courier-ui-inbox\nexport type {\n CourierInboxTheme,\n CourierInboxFontTheme,\n CourierInboxIconTheme,\n CourierInboxFilterItemTheme,\n CourierInboxUnreadCountIndicatorTheme,\n CourierInboxUnreadDotIndicatorTheme,\n CourierInboxIconButtonTheme,\n CourierInboxButtonTheme,\n CourierInboxMenuButtonTheme,\n CourierInboxPopupTheme,\n CourierInboxListItemTheme,\n CourierInboxSkeletonLoadingStateTheme,\n CourierInboxInfoStateTheme,\n CourierMenuItemTheme,\n CourierFilterMenuTheme,\n CourierActionMenuTheme\n} from '@trycourier/courier-ui-inbox';\n\n// Re-export theme utilities from courier-ui-inbox\nexport {\n defaultLightTheme,\n defaultDarkTheme,\n mergeTheme\n} from '@trycourier/courier-ui-inbox';\n\n// Re-export element types from courier-ui-inbox\nexport type { CourierInbox as CourierInboxElement } from '@trycourier/courier-ui-inbox';\nexport type { CourierInboxPopupMenu as CourierInboxPopupMenuElement } from '@trycourier/courier-ui-inbox';\n\n// Re-export element types from courier-ui-toast\nexport type { CourierToast as CourierToastElement } from '@trycourier/courier-ui-toast';\n\n// Re-export toast types from courier-ui-toast\nexport type {\n CourierToastTheme,\n CourierToastFontTheme,\n CourierToastIconTheme,\n CourierToastItemTheme,\n CourierToastItemFactoryProps,\n CourierToastItemClickEvent,\n CourierToastDismissButtonOption\n} from '@trycourier/courier-ui-toast';\n\n// Re-export toast theme utilities from courier-ui-toast\nexport {\n defaultLightTheme as defaultToastLightTheme,\n defaultDarkTheme as defaultToastDarkTheme,\n mergeTheme as mergeToastTheme\n} from '@trycourier/courier-ui-toast';\n\n// Re-export types from courier-ui-core\nexport type {\n CourierComponentThemeMode\n} from '@trycourier/courier-ui-core'\n"],"names":["reactNodeToHTMLElement","node","container","document","createElement","render","CourierInbox","forwardRef","props","ref","jsx","CourierRenderContext","Provider","value","children","CourierInboxComponent","displayName","CourierInboxPopupMenu","CourierInboxPopupMenuComponent","CourierToast","CourierToastComponent","Courier","shared","courierUserAgentName","courierUserAgentVersion"],"mappings":"yUAQO,SAASA,EAAuBC,GACrC,MAAMC,EAAYC,SAASC,cAAc,OAIzC,OAFAC,EAAAA,OAAOJ,EAAMC,GAENA,CACT,CCYO,MAAMI,EAAeC,EAAAA,YAAmD,CAACC,EAAOC,MAEnFC,IAACC,EAAAA,qBAAqBC,SAArB,CAA8BC,MAAOb,EACpCc,WAAAJ,IAACK,EAAAA,sBAAA,IAA0BP,EAAOC,YAKxCH,EAAaU,YAAc,eCNpB,MAAMC,EAAwBV,EAAAA,YAAqE,CAACC,EAAOC,MAE9GC,IAACC,EAAAA,qBAAqBC,SAArB,CAA8BC,MAAOb,EACpCc,WAAAJ,IAACQ,EAAAA,+BAAA,IAAmCV,EAAOC,YAKjDQ,EAAsBD,YAAc,wBCV7B,MAAMG,EAAeZ,EAAAA,YAAmD,CAACC,EAAOC,MAEnFC,IAACC,EAAAA,qBAAqBC,SAArB,CAA8BC,MAAOb,EACpCc,WAAAJ,IAACU,EAAAA,sBAAA,IAA0BZ,EAAOC,YAKxCU,EAAaH,YAAc,eChC3BK,EAAAA,QAAQC,OAAOC,qBAAuB,mBACtCF,EAAAA,QAAQC,OAAOE,wBAA0B"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
export { CourierInbox } from './components/courier-inbox';
|
|
2
2
|
export { CourierInboxPopupMenu } from './components/courier-inbox-popup-menu';
|
|
3
|
+
export { CourierToast } from './components/courier-toast';
|
|
3
4
|
export { useCourier } from '@trycourier/courier-react-components';
|
|
4
|
-
export type { CourierInboxProps, CourierInboxPopupMenuProps, } from '@trycourier/courier-react-components';
|
|
5
|
+
export type { CourierInboxProps, CourierInboxPopupMenuProps, CourierToastProps, } from '@trycourier/courier-react-components';
|
|
5
6
|
export type { CourierProps, CourierClientOptions, CourierBrand, CourierApiUrls, CourierUserPreferences, CourierUserPreferencesStatus, CourierUserPreferencesChannel, CourierUserPreferencesPaging, CourierUserPreferencesTopic, CourierUserPreferencesTopicResponse, CourierDevice, CourierToken, CourierGetInboxMessageResponse, CourierGetInboxMessagesResponse, InboxMessage, InboxAction, InboxMessageEventEnvelope, } from '@trycourier/courier-js';
|
|
6
7
|
export { markAsRead, markAsUnread, clickMessage, archiveMessage, openMessage } from '@trycourier/courier-ui-inbox';
|
|
7
8
|
export type { CourierInboxHeaderFactoryProps, CourierInboxStateLoadingFactoryProps, CourierInboxStateEmptyFactoryProps, CourierInboxStateErrorFactoryProps, CourierInboxListItemFactoryProps, CourierInboxListItemActionFactoryProps, CourierInboxPaginationItemFactoryProps, CourierInboxMenuButtonFactoryProps, CourierInboxFeedType } from '@trycourier/courier-ui-inbox';
|
|
@@ -9,4 +10,7 @@ export type { CourierInboxTheme, CourierInboxFontTheme, CourierInboxIconTheme, C
|
|
|
9
10
|
export { defaultLightTheme, defaultDarkTheme, mergeTheme } from '@trycourier/courier-ui-inbox';
|
|
10
11
|
export type { CourierInbox as CourierInboxElement } from '@trycourier/courier-ui-inbox';
|
|
11
12
|
export type { CourierInboxPopupMenu as CourierInboxPopupMenuElement } from '@trycourier/courier-ui-inbox';
|
|
13
|
+
export type { CourierToast as CourierToastElement } from '@trycourier/courier-ui-toast';
|
|
14
|
+
export type { CourierToastTheme, CourierToastFontTheme, CourierToastIconTheme, CourierToastItemTheme, CourierToastItemFactoryProps, CourierToastItemClickEvent, CourierToastDismissButtonOption } from '@trycourier/courier-ui-toast';
|
|
15
|
+
export { defaultLightTheme as defaultToastLightTheme, defaultDarkTheme as defaultToastDarkTheme, mergeTheme as mergeToastTheme } from '@trycourier/courier-ui-toast';
|
|
12
16
|
export type { CourierComponentThemeMode } from '@trycourier/courier-ui-core';
|
package/dist/index.mjs
CHANGED
|
@@ -1,19 +1,15 @@
|
|
|
1
|
+
import { Courier } from "@trycourier/courier-js";
|
|
1
2
|
import { jsx } from "react/jsx-runtime";
|
|
2
3
|
import { forwardRef } from "react";
|
|
3
|
-
import { CourierRenderContext, CourierInboxComponent, CourierInboxPopupMenuComponent } from "@trycourier/courier-react-components";
|
|
4
|
+
import { CourierRenderContext, CourierInboxComponent, CourierInboxPopupMenuComponent, CourierToastComponent } from "@trycourier/courier-react-components";
|
|
4
5
|
import { useCourier } from "@trycourier/courier-react-components";
|
|
5
6
|
import { render } from "react-dom";
|
|
6
7
|
import { archiveMessage, clickMessage, defaultDarkTheme, defaultLightTheme, markAsRead, markAsUnread, mergeTheme, openMessage } from "@trycourier/courier-ui-inbox";
|
|
8
|
+
import { defaultDarkTheme as defaultDarkTheme2, defaultLightTheme as defaultLightTheme2, mergeTheme as mergeTheme2 } from "@trycourier/courier-ui-toast";
|
|
7
9
|
function reactNodeToHTMLElement(node) {
|
|
8
10
|
const container = document.createElement("div");
|
|
9
11
|
render(node, container);
|
|
10
|
-
|
|
11
|
-
if (!(element instanceof HTMLElement)) {
|
|
12
|
-
throw new Error(
|
|
13
|
-
"reactNodeToHTMLElement must return a single JSX element that renders to an HTMLElement (e.g., <div>)"
|
|
14
|
-
);
|
|
15
|
-
}
|
|
16
|
-
return element;
|
|
12
|
+
return container;
|
|
17
13
|
}
|
|
18
14
|
const CourierInbox = forwardRef((props, ref) => {
|
|
19
15
|
return /* @__PURE__ */ jsx(CourierRenderContext.Provider, { value: reactNodeToHTMLElement, children: /* @__PURE__ */ jsx(CourierInboxComponent, { ...props, ref }) });
|
|
@@ -23,16 +19,26 @@ const CourierInboxPopupMenu = forwardRef((props, ref) => {
|
|
|
23
19
|
return /* @__PURE__ */ jsx(CourierRenderContext.Provider, { value: reactNodeToHTMLElement, children: /* @__PURE__ */ jsx(CourierInboxPopupMenuComponent, { ...props, ref }) });
|
|
24
20
|
});
|
|
25
21
|
CourierInboxPopupMenu.displayName = "CourierInboxPopupMenu";
|
|
22
|
+
const CourierToast = forwardRef((props, ref) => {
|
|
23
|
+
return /* @__PURE__ */ jsx(CourierRenderContext.Provider, { value: reactNodeToHTMLElement, children: /* @__PURE__ */ jsx(CourierToastComponent, { ...props, ref }) });
|
|
24
|
+
});
|
|
25
|
+
CourierToast.displayName = "CourierToast";
|
|
26
|
+
Courier.shared.courierUserAgentName = "courier-react-17";
|
|
27
|
+
Courier.shared.courierUserAgentVersion = "8.2.0";
|
|
26
28
|
export {
|
|
27
29
|
CourierInbox,
|
|
28
30
|
CourierInboxPopupMenu,
|
|
31
|
+
CourierToast,
|
|
29
32
|
archiveMessage,
|
|
30
33
|
clickMessage,
|
|
31
34
|
defaultDarkTheme,
|
|
32
35
|
defaultLightTheme,
|
|
36
|
+
defaultDarkTheme2 as defaultToastDarkTheme,
|
|
37
|
+
defaultLightTheme2 as defaultToastLightTheme,
|
|
33
38
|
markAsRead,
|
|
34
39
|
markAsUnread,
|
|
35
40
|
mergeTheme,
|
|
41
|
+
mergeTheme2 as mergeToastTheme,
|
|
36
42
|
openMessage,
|
|
37
43
|
useCourier
|
|
38
44
|
};
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../src/utils/render.tsx","../src/components/courier-inbox.tsx","../src/components/courier-inbox-popup-menu.tsx"],"sourcesContent":["import { ReactNode } from \"react\";\nimport { render } from \"react-dom\";\n\n/**\n * Converts a React node to an HTMLElement.\n * @param node - The React node to convert.\n * @returns The converted HTMLElement.\n */\nexport function reactNodeToHTMLElement(node: ReactNode): HTMLElement {\n const container = document.createElement('div');\n\n render(node, container);\n\n
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../src/utils/render.tsx","../src/components/courier-inbox.tsx","../src/components/courier-inbox-popup-menu.tsx","../src/components/courier-toast.tsx","../src/index.tsx"],"sourcesContent":["import { ReactNode } from \"react\";\nimport { render } from \"react-dom\";\n\n/**\n * Converts a React node to an HTMLElement.\n * @param node - The React node to convert.\n * @returns The converted HTMLElement.\n */\nexport function reactNodeToHTMLElement(node: ReactNode): HTMLElement {\n const container = document.createElement('div');\n\n render(node, container);\n\n return container;\n}\n","import { forwardRef } from \"react\";\nimport { CourierInbox as CourierInboxElement } from \"@trycourier/courier-ui-inbox\";\nimport { CourierInboxComponent, CourierInboxProps, CourierRenderContext } from \"@trycourier/courier-react-components\";\nimport { reactNodeToHTMLElement } from \"../utils/render\";\n\n/**\n * CourierInbox React component.\n *\n * @example\n * ```tsx\n * const courier = useCourier();\n *\n * useEffect(() => {\n * // Generate a JWT for your user (do this on your backend server)\n * const jwt = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...'; // Replace with actual JWT\n *\n * // Authenticate the user with the inbox\n * courier.shared.signIn({\n * userId: $YOUR_USER_ID,\n * jwt: jwt,\n * });\n * }, []);\n *\n * return <CourierInbox />;\n * ```\n */\nexport const CourierInbox = forwardRef<CourierInboxElement, CourierInboxProps>((props, ref) => {\n return (\n <CourierRenderContext.Provider value={reactNodeToHTMLElement}>\n <CourierInboxComponent {...props} ref={ref} />\n </CourierRenderContext.Provider>\n );\n});\n\nCourierInbox.displayName = 'CourierInbox';\n","import { forwardRef } from \"react\";\nimport { CourierInboxPopupMenu as CourierInboxPopupMenuElement } from \"@trycourier/courier-ui-inbox\";\nimport { CourierInboxPopupMenuComponent, CourierInboxPopupMenuProps, CourierRenderContext } from \"@trycourier/courier-react-components\";\nimport { reactNodeToHTMLElement } from \"../utils/render\";\n\n/**\n * CourierInboxPopupMenu React component.\n *\n * This component is used to display a popup menu for a message in the inbox.\n *\n * @example\n * ```tsx\n * const courier = useCourier();\n *\n * useEffect(() => {\n * // Generate a JWT for your user (do this on your backend server)\n * const jwt = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...'; // Replace with actual JWT\n *\n * // Authenticate the user with the inbox\n * courier.shared.signIn({\n * userId: $YOUR_USER_ID,\n * jwt: jwt,\n * });\n * }, []);\n *\n * return <CourierInboxPopupMenu />;\n * ```\n */\nexport const CourierInboxPopupMenu = forwardRef<CourierInboxPopupMenuElement, CourierInboxPopupMenuProps>((props, ref) => {\n return (\n <CourierRenderContext.Provider value={reactNodeToHTMLElement}>\n <CourierInboxPopupMenuComponent {...props} ref={ref} />\n </CourierRenderContext.Provider>\n );\n});\n\nCourierInboxPopupMenu.displayName = 'CourierInboxPopupMenu';\n","import { forwardRef } from \"react\";\nimport { CourierToast as CourierToastElement } from \"@trycourier/courier-ui-toast\";\nimport { CourierToastComponent, CourierToastProps, CourierRenderContext } from \"@trycourier/courier-react-components\";\nimport { reactNodeToHTMLElement } from \"../utils/render\";\n\n/**\n * CourierToast React component.\n *\n * @example\n * ```tsx\n * const courier = useCourier();\n *\n * useEffect(() => {\n * // Generate a JWT for your user (do this on your backend server)\n * const jwt = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...'; // Replace with actual JWT\n *\n * // Authenticate the user with the inbox\n * courier.shared.signIn({\n * userId: $YOUR_USER_ID,\n * jwt: jwt,\n * });\n * }, []);\n *\n * return <CourierToast />;\n * ```\n */\nexport const CourierToast = forwardRef<CourierToastElement, CourierToastProps>((props, ref) => {\n return (\n <CourierRenderContext.Provider value={reactNodeToHTMLElement}>\n <CourierToastComponent {...props} ref={ref} />\n </CourierRenderContext.Provider>\n );\n});\n\nCourierToast.displayName = 'CourierToast';\n","import { Courier } from '@trycourier/courier-js';\n\nCourier.shared.courierUserAgentName = \"courier-react-17\";\nCourier.shared.courierUserAgentVersion = __PACKAGE_VERSION__;\n\nexport { CourierInbox } from './components/courier-inbox';\nexport { CourierInboxPopupMenu } from './components/courier-inbox-popup-menu';\nexport { CourierToast } from './components/courier-toast';\n\nexport { useCourier } from '@trycourier/courier-react-components';\n\nexport type {\n CourierInboxProps,\n CourierInboxPopupMenuProps,\n CourierToastProps,\n} from '@trycourier/courier-react-components';\n\n// Re-export types from courier-js\nexport type {\n CourierProps,\n CourierClientOptions,\n CourierBrand,\n CourierApiUrls,\n CourierUserPreferences,\n CourierUserPreferencesStatus,\n CourierUserPreferencesChannel,\n CourierUserPreferencesPaging,\n CourierUserPreferencesTopic,\n CourierUserPreferencesTopicResponse,\n CourierDevice,\n CourierToken,\n CourierGetInboxMessageResponse,\n CourierGetInboxMessagesResponse,\n InboxMessage,\n InboxAction,\n InboxMessageEventEnvelope,\n} from '@trycourier/courier-js';\n\n// Re-export utility functions from courier-ui-inbox\nexport {\n markAsRead,\n markAsUnread,\n clickMessage,\n archiveMessage,\n openMessage\n} from '@trycourier/courier-ui-inbox';\n\n// Re-export factory prop types from courier-ui-inbox\nexport type {\n CourierInboxHeaderFactoryProps,\n CourierInboxStateLoadingFactoryProps,\n CourierInboxStateEmptyFactoryProps,\n CourierInboxStateErrorFactoryProps,\n CourierInboxListItemFactoryProps,\n CourierInboxListItemActionFactoryProps,\n CourierInboxPaginationItemFactoryProps,\n CourierInboxMenuButtonFactoryProps,\n CourierInboxFeedType\n} from '@trycourier/courier-ui-inbox';\n\n// Re-export theme types from courier-ui-inbox\nexport type {\n CourierInboxTheme,\n CourierInboxFontTheme,\n CourierInboxIconTheme,\n CourierInboxFilterItemTheme,\n CourierInboxUnreadCountIndicatorTheme,\n CourierInboxUnreadDotIndicatorTheme,\n CourierInboxIconButtonTheme,\n CourierInboxButtonTheme,\n CourierInboxMenuButtonTheme,\n CourierInboxPopupTheme,\n CourierInboxListItemTheme,\n CourierInboxSkeletonLoadingStateTheme,\n CourierInboxInfoStateTheme,\n CourierMenuItemTheme,\n CourierFilterMenuTheme,\n CourierActionMenuTheme\n} from '@trycourier/courier-ui-inbox';\n\n// Re-export theme utilities from courier-ui-inbox\nexport {\n defaultLightTheme,\n defaultDarkTheme,\n mergeTheme\n} from '@trycourier/courier-ui-inbox';\n\n// Re-export element types from courier-ui-inbox\nexport type { CourierInbox as CourierInboxElement } from '@trycourier/courier-ui-inbox';\nexport type { CourierInboxPopupMenu as CourierInboxPopupMenuElement } from '@trycourier/courier-ui-inbox';\n\n// Re-export element types from courier-ui-toast\nexport type { CourierToast as CourierToastElement } from '@trycourier/courier-ui-toast';\n\n// Re-export toast types from courier-ui-toast\nexport type {\n CourierToastTheme,\n CourierToastFontTheme,\n CourierToastIconTheme,\n CourierToastItemTheme,\n CourierToastItemFactoryProps,\n CourierToastItemClickEvent,\n CourierToastDismissButtonOption\n} from '@trycourier/courier-ui-toast';\n\n// Re-export toast theme utilities from courier-ui-toast\nexport {\n defaultLightTheme as defaultToastLightTheme,\n defaultDarkTheme as defaultToastDarkTheme,\n mergeTheme as mergeToastTheme\n} from '@trycourier/courier-ui-toast';\n\n// Re-export types from courier-ui-core\nexport type {\n CourierComponentThemeMode\n} from '@trycourier/courier-ui-core'\n"],"names":[],"mappings":";;;;;;;;AAQO,SAAS,uBAAuB,MAA8B;AACnE,QAAM,YAAY,SAAS,cAAc,KAAK;AAE9C,SAAO,MAAM,SAAS;AAEtB,SAAO;AACT;ACYO,MAAM,eAAe,WAAmD,CAAC,OAAO,QAAQ;AAC7F,SACE,oBAAC,qBAAqB,UAArB,EAA8B,OAAO,wBACpC,UAAA,oBAAC,uBAAA,EAAuB,GAAG,OAAO,IAAA,CAAU,EAAA,CAC9C;AAEJ,CAAC;AAED,aAAa,cAAc;ACNpB,MAAM,wBAAwB,WAAqE,CAAC,OAAO,QAAQ;AACxH,SACE,oBAAC,qBAAqB,UAArB,EAA8B,OAAO,wBACpC,UAAA,oBAAC,gCAAA,EAAgC,GAAG,OAAO,IAAA,CAAU,EAAA,CACvD;AAEJ,CAAC;AAED,sBAAsB,cAAc;ACV7B,MAAM,eAAe,WAAmD,CAAC,OAAO,QAAQ;AAC7F,SACE,oBAAC,qBAAqB,UAArB,EAA8B,OAAO,wBACpC,UAAA,oBAAC,uBAAA,EAAuB,GAAG,OAAO,IAAA,CAAU,EAAA,CAC9C;AAEJ,CAAC;AAED,aAAa,cAAc;AChC3B,QAAQ,OAAO,uBAAuB;AACtC,QAAQ,OAAO,0BAA0B;"}
|
|
File without changes
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@trycourier/courier-react-17",
|
|
3
|
-
"version": "8.0
|
|
3
|
+
"version": "8.2.0",
|
|
4
4
|
"description": "React 17 components for the Courier web UI",
|
|
5
5
|
"main": "dist/index.cjs",
|
|
6
6
|
"module": "dist/index.mjs",
|
|
@@ -8,11 +8,13 @@
|
|
|
8
8
|
"scripts": {
|
|
9
9
|
"dev": "vite",
|
|
10
10
|
"build": "cross-env NODE_ENV=production tsc && vite build --mode production",
|
|
11
|
+
"build:ci": "yarn build && yarn generate-api-doc",
|
|
11
12
|
"watch": "vite build --watch",
|
|
12
13
|
"preview": "vite preview",
|
|
13
14
|
"prepare": "npm run build",
|
|
14
15
|
"test": "jest",
|
|
15
|
-
"test:watch": "jest --watch"
|
|
16
|
+
"test:watch": "jest --watch",
|
|
17
|
+
"generate-api-doc": "api-extractor run"
|
|
16
18
|
},
|
|
17
19
|
"files": [
|
|
18
20
|
"dist"
|
|
@@ -27,10 +29,11 @@
|
|
|
27
29
|
"author": "Courier",
|
|
28
30
|
"license": "MIT",
|
|
29
31
|
"dependencies": {
|
|
30
|
-
"@trycourier/courier-js": "2.0
|
|
31
|
-
"@trycourier/courier-react-components": "1.0
|
|
32
|
-
"@trycourier/courier-ui-core": "1.0.
|
|
33
|
-
"@trycourier/courier-ui-inbox": "1.0
|
|
32
|
+
"@trycourier/courier-js": "2.1.0",
|
|
33
|
+
"@trycourier/courier-react-components": "1.2.0",
|
|
34
|
+
"@trycourier/courier-ui-core": "1.0.14",
|
|
35
|
+
"@trycourier/courier-ui-inbox": "1.2.0",
|
|
36
|
+
"@trycourier/courier-ui-toast": "1.0.0"
|
|
34
37
|
},
|
|
35
38
|
"peerDependencies": {
|
|
36
39
|
"react": ">=17.0.0, <18.0.0",
|