@djangocfg/centrifugo 1.0.4 → 1.0.5
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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@djangocfg/centrifugo",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.5",
|
|
4
4
|
"description": "Production-ready Centrifugo WebSocket client with React integration, RPC pattern, composable UI components, and comprehensive monitoring tools",
|
|
5
5
|
"main": "./src/index.ts",
|
|
6
6
|
"types": "./src/index.ts",
|
|
@@ -19,8 +19,8 @@
|
|
|
19
19
|
"centrifuge": "^5.2.2"
|
|
20
20
|
},
|
|
21
21
|
"peerDependencies": {
|
|
22
|
-
"@djangocfg/ui": "^1.2.
|
|
23
|
-
"@djangocfg/layouts": "^1.2.
|
|
22
|
+
"@djangocfg/ui": "^1.2.30",
|
|
23
|
+
"@djangocfg/layouts": "^1.2.30",
|
|
24
24
|
"consola": "^3.4.2",
|
|
25
25
|
"lucide-react": "^0.468.0",
|
|
26
26
|
"moment": "^2.30.1",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"react-dom": "^19.0.0"
|
|
29
29
|
},
|
|
30
30
|
"devDependencies": {
|
|
31
|
-
"@djangocfg/typescript-config": "^1.2.
|
|
31
|
+
"@djangocfg/typescript-config": "^1.2.30",
|
|
32
32
|
"@types/react": "^19.0.6",
|
|
33
33
|
"@types/react-dom": "^19.0.2",
|
|
34
34
|
"moment": "^2.30.1",
|
|
@@ -45,7 +45,10 @@ export function CentrifugoMonitorDialog({
|
|
|
45
45
|
}: CentrifugoMonitorDialogProps) {
|
|
46
46
|
return (
|
|
47
47
|
<Sheet open={open} onOpenChange={onOpenChange}>
|
|
48
|
-
<SheetContent
|
|
48
|
+
<SheetContent
|
|
49
|
+
side={side}
|
|
50
|
+
className={`max-w-2xl w-[90vw] sm:w-[672px] ${className}`}
|
|
51
|
+
>
|
|
49
52
|
<SheetHeader>
|
|
50
53
|
<SheetTitle className="flex items-center gap-2">
|
|
51
54
|
<Activity className="h-5 w-5" />
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
* Connection Status Card Component
|
|
3
3
|
*
|
|
4
4
|
* Card wrapper for ConnectionStatus - ready for dashboard widgets
|
|
5
|
+
* Clickable - opens CentrifugoMonitorDialog on click
|
|
5
6
|
*/
|
|
6
7
|
|
|
7
8
|
'use client';
|
|
@@ -11,6 +12,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@djangocfg/ui';
|
|
|
11
12
|
import { Wifi, WifiOff } from 'lucide-react';
|
|
12
13
|
import { useCentrifugo } from '../../providers/CentrifugoProvider';
|
|
13
14
|
import { ConnectionStatus } from './ConnectionStatus';
|
|
15
|
+
import { CentrifugoMonitorDialog } from '../CentrifugoMonitor/CentrifugoMonitorDialog';
|
|
14
16
|
|
|
15
17
|
// ─────────────────────────────────────────────────────────────────────────
|
|
16
18
|
// Types
|
|
@@ -32,25 +34,37 @@ export function ConnectionStatusCard({
|
|
|
32
34
|
className = '',
|
|
33
35
|
}: ConnectionStatusCardProps) {
|
|
34
36
|
const { isConnected } = useCentrifugo();
|
|
37
|
+
const [dialogOpen, setDialogOpen] = React.useState(false);
|
|
35
38
|
|
|
36
39
|
const statusColor = isConnected ? 'border-green-500' : 'border-red-500';
|
|
37
40
|
|
|
38
41
|
return (
|
|
39
|
-
|
|
40
|
-
<
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
42
|
+
<>
|
|
43
|
+
<Card
|
|
44
|
+
className={`${statusColor} ${className} cursor-pointer hover:shadow-lg transition-shadow`}
|
|
45
|
+
style={{ borderLeftWidth: '4px' }}
|
|
46
|
+
onClick={() => setDialogOpen(true)}
|
|
47
|
+
>
|
|
48
|
+
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
49
|
+
<CardTitle className="text-sm font-medium">WebSocket</CardTitle>
|
|
50
|
+
<div className={isConnected ? 'text-green-600' : 'text-red-600'}>
|
|
51
|
+
{isConnected ? <Wifi className="h-4 w-4" /> : <WifiOff className="h-4 w-4" />}
|
|
52
|
+
</div>
|
|
53
|
+
</CardHeader>
|
|
54
|
+
<CardContent>
|
|
55
|
+
<ConnectionStatus
|
|
56
|
+
variant="detailed"
|
|
57
|
+
showUptime={showUptime}
|
|
58
|
+
showSubscriptions={showSubscriptions}
|
|
59
|
+
/>
|
|
60
|
+
</CardContent>
|
|
61
|
+
</Card>
|
|
62
|
+
|
|
63
|
+
<CentrifugoMonitorDialog
|
|
64
|
+
open={dialogOpen}
|
|
65
|
+
onOpenChange={setDialogOpen}
|
|
66
|
+
/>
|
|
67
|
+
</>
|
|
54
68
|
);
|
|
55
69
|
}
|
|
56
70
|
|