@djangocfg/centrifugo 1.0.3 → 1.0.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@djangocfg/centrifugo",
-  "version": "1.0.3",
-  "description": "WebSocket RPC client for Django-CFG + Centrifugo integration",
+  "version": "1.0.4",
+  "description": "Production-ready Centrifugo WebSocket client with React integration, RPC pattern, composable UI components, and comprehensive monitoring tools",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
   "exports": {
@@ -19,8 +19,8 @@
     "centrifuge": "^5.2.2"
   },
   "peerDependencies": {
-    "@djangocfg/ui": "^1.2.28",
-    "@djangocfg/layouts": "^1.2.28",
+    "@djangocfg/ui": "^1.2.29",
+    "@djangocfg/layouts": "^1.2.29",
     "consola": "^3.4.2",
     "lucide-react": "^0.468.0",
     "moment": "^2.30.1",
@@ -28,7 +28,7 @@
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^1.2.28",
+    "@djangocfg/typescript-config": "^1.2.29",
     "@types/react": "^19.0.6",
     "@types/react-dom": "^19.0.2",
     "moment": "^2.30.1",

package/src/components/CentrifugoMonitor/CentrifugoMonitor.tsx

@@ -0,0 +1,137 @@
+/**
+ * Centrifugo Monitor Component
+ *
+ * Universal monitoring component that can be embedded anywhere
+ * Combines ConnectionStatus, MessagesFeed, and SubscriptionsList
+ */
+
+'use client';
+
+import React from 'react';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@djangocfg/ui';
+import { ConnectionStatus } from '../ConnectionStatus';
+import { MessagesFeed } from '../MessagesFeed';
+import { SubscriptionsList } from '../SubscriptionsList';
+import type { CentrifugoMessage } from '../MessagesFeed';
+
+// ─────────────────────────────────────────────────────────────────────────
+// Types
+// ─────────────────────────────────────────────────────────────────────────
+
+export interface CentrifugoMonitorProps {
+  variant?: 'compact' | 'full' | 'minimal';
+  showConnectionStatus?: boolean;
+  showMessagesFeed?: boolean;
+  showSubscriptions?: boolean;
+  showFilters?: boolean;
+  showControls?: boolean;
+  maxMessages?: number;
+  channels?: string[]; // Pre-filter by channels
+  autoScroll?: boolean;
+  onMessageClick?: (message: CentrifugoMessage) => void;
+  onSubscriptionClick?: (channel: string) => void;
+  className?: string;
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+// Component
+// ─────────────────────────────────────────────────────────────────────────
+
+export function CentrifugoMonitor({
+  variant = 'full',
+  showConnectionStatus = true,
+  showMessagesFeed = true,
+  showSubscriptions = true,
+  showFilters = true,
+  showControls = true,
+  maxMessages = 100,
+  channels = [],
+  autoScroll = true,
+  onMessageClick,
+  onSubscriptionClick,
+  className = '',
+}: CentrifugoMonitorProps) {
+  // Minimal variant - only connection status
+  if (variant === 'minimal') {
+    return (
+      <div className={className}>
+        <ConnectionStatus variant="detailed" showUptime showSubscriptions />
+      </div>
+    );
+  }
+
+  // Compact variant - connection status + messages feed
+  if (variant === 'compact') {
+    return (
+      <div className={`space-y-4 ${className}`}>
+        {showConnectionStatus && (
+          <ConnectionStatus variant="detailed" showUptime showSubscriptions />
+        )}
+        {showMessagesFeed && (
+          <MessagesFeed
+            maxMessages={maxMessages}
+            showFilters={false}
+            showControls={showControls}
+            channels={channels}
+            autoScroll={autoScroll}
+            onMessageClick={onMessageClick}
+          />
+        )}
+      </div>
+    );
+  }
+
+  // Full variant - tabs with all features
+  const tabsToShow = [
+    showConnectionStatus && { value: 'connection', label: 'Connection' },
+    showMessagesFeed && { value: 'messages', label: 'Messages' },
+    showSubscriptions && { value: 'subscriptions', label: 'Subscriptions' },
+  ].filter(Boolean) as { value: string; label: string }[];
+
+  if (tabsToShow.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className={className}>
+      <Tabs defaultValue={tabsToShow[0].value}>
+        <TabsList className={`grid w-full grid-cols-${tabsToShow.length}`}>
+          {tabsToShow.map((tab) => (
+            <TabsTrigger key={tab.value} value={tab.value}>
+              {tab.label}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+
+        {showConnectionStatus && (
+          <TabsContent value="connection" className="mt-4">
+            <ConnectionStatus variant="detailed" showUptime showSubscriptions />
+          </TabsContent>
+        )}
+
+        {showMessagesFeed && (
+          <TabsContent value="messages" className="mt-4">
+            <MessagesFeed
+              maxMessages={maxMessages}
+              showFilters={showFilters}
+              showControls={showControls}
+              channels={channels}
+              autoScroll={autoScroll}
+              onMessageClick={onMessageClick}
+            />
+          </TabsContent>
+        )}
+
+        {showSubscriptions && (
+          <TabsContent value="subscriptions" className="mt-4">
+            <SubscriptionsList
+              showControls={showControls}
+              onSubscriptionClick={onSubscriptionClick}
+            />
+          </TabsContent>
+        )}
+      </Tabs>
+    </div>
+  );
+}
+

package/src/components/CentrifugoMonitor/CentrifugoMonitorDialog.tsx

@@ -0,0 +1,64 @@
+/**
+ * Centrifugo Monitor Dialog Component
+ *
+ * Sheet/Dialog wrapper for CentrifugoMonitor
+ */
+
+'use client';
+
+import React from 'react';
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetDescription,
+} from '@djangocfg/ui';
+import { Activity } from 'lucide-react';
+import { CentrifugoMonitor, type CentrifugoMonitorProps } from './CentrifugoMonitor';
+
+// ─────────────────────────────────────────────────────────────────────────
+// Types
+// ─────────────────────────────────────────────────────────────────────────
+
+export interface CentrifugoMonitorDialogProps extends Omit<CentrifugoMonitorProps, 'className'> {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title?: string;
+  description?: string;
+  side?: 'left' | 'right' | 'top' | 'bottom';
+  className?: string;
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+// Component
+// ─────────────────────────────────────────────────────────────────────────
+
+export function CentrifugoMonitorDialog({
+  open,
+  onOpenChange,
+  title = 'Centrifugo Monitor',
+  description = 'Real-time WebSocket monitoring and debugging',
+  side = 'right',
+  className = '',
+  ...monitorProps
+}: CentrifugoMonitorDialogProps) {
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent side={side} className={`w-full sm:max-w-2xl ${className}`}>
+        <SheetHeader>
+          <SheetTitle className="flex items-center gap-2">
+            <Activity className="h-5 w-5" />
+            {title}
+          </SheetTitle>
+          {description && <SheetDescription>{description}</SheetDescription>}
+        </SheetHeader>
+
+        <div className="mt-6">
+          <CentrifugoMonitor {...monitorProps} />
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}
+

package/src/components/CentrifugoMonitor/CentrifugoMonitorFAB.tsx

@@ -0,0 +1,81 @@
+/**
+ * Centrifugo Monitor FAB Component
+ *
+ * Floating Action Button that opens CentrifugoMonitorDialog
+ * Replaces the old DebugPanel FAB
+ */
+
+'use client';
+
+import React, { useState } from 'react';
+import { Activity } from 'lucide-react';
+import { CentrifugoMonitorDialog, type CentrifugoMonitorDialogProps } from './CentrifugoMonitorDialog';
+
+// ─────────────────────────────────────────────────────────────────────────
+// Types
+// ─────────────────────────────────────────────────────────────────────────
+
+export interface CentrifugoMonitorFABProps extends Omit<CentrifugoMonitorDialogProps, 'open' | 'onOpenChange'> {
+  position?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
+  size?: 'sm' | 'md' | 'lg';
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+// Component
+// ─────────────────────────────────────────────────────────────────────────
+
+export function CentrifugoMonitorFAB({
+  position = 'bottom-left',
+  size = 'md',
+  ...dialogProps
+}: CentrifugoMonitorFABProps) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  // Position styles
+  const positionStyles = {
+    'bottom-left': { bottom: '1rem', left: '1rem' },
+    'bottom-right': { bottom: '1rem', right: '1rem' },
+    'top-left': { top: '1rem', left: '1rem' },
+    'top-right': { top: '1rem', right: '1rem' },
+  };
+
+  // Size styles
+  const sizeStyles = {
+    sm: { width: '48px', height: '48px' },
+    md: { width: '56px', height: '56px' },
+    lg: { width: '64px', height: '64px' },
+  };
+
+  const iconSizes = {
+    sm: 'h-5 w-5',
+    md: 'h-6 w-6',
+    lg: 'h-7 w-7',
+  };
+
+  return (
+    <>
+      {/* FAB Button */}
+      <button
+        onClick={() => setIsOpen(true)}
+        className="rounded-full bg-primary text-primary-foreground shadow-lg hover:bg-primary/90 transition-all duration-200 flex items-center justify-center hover:scale-110"
+        style={{
+          position: 'fixed',
+          ...positionStyles[position],
+          ...sizeStyles[size],
+          zIndex: 9999,
+        }}
+        aria-label="Open Centrifugo Monitor"
+      >
+        <Activity className={iconSizes[size]} />
+      </button>
+
+      {/* Dialog */}
+      <CentrifugoMonitorDialog
+        open={isOpen}
+        onOpenChange={setIsOpen}
+        {...dialogProps}
+      />
+    </>
+  );
+}
+

package/src/components/CentrifugoMonitor/CentrifugoMonitorWidget.tsx

@@ -0,0 +1,74 @@
+/**
+ * Centrifugo Monitor Widget Component
+ *
+ * Card-based widget for dashboards
+ * Combines ConnectionStatusCard with compact monitor view
+ */
+
+'use client';
+
+import React, { useState } from 'react';
+import { Card, CardContent, CardHeader, CardTitle, Button } from '@djangocfg/ui';
+import { Activity, Maximize2 } from 'lucide-react';
+import { ConnectionStatus } from '../ConnectionStatus';
+import { CentrifugoMonitorDialog } from './CentrifugoMonitorDialog';
+import type { CentrifugoMonitorProps } from './CentrifugoMonitor';
+
+// ─────────────────────────────────────────────────────────────────────────
+// Types
+// ─────────────────────────────────────────────────────────────────────────
+
+export interface CentrifugoMonitorWidgetProps extends Omit<CentrifugoMonitorProps, 'variant' | 'className'> {
+  title?: string;
+  showExpandButton?: boolean;
+  className?: string;
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+// Component
+// ─────────────────────────────────────────────────────────────────────────
+
+export function CentrifugoMonitorWidget({
+  title = 'WebSocket Monitor',
+  showExpandButton = true,
+  className = '',
+  ...monitorProps
+}: CentrifugoMonitorWidgetProps) {
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+
+  return (
+    <>
+      <Card className={className}>
+        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+          <CardTitle className="text-sm font-medium flex items-center gap-2">
+            <Activity className="h-4 w-4" />
+            {title}
+          </CardTitle>
+          {showExpandButton && (
+            <Button
+              size="sm"
+              variant="ghost"
+              onClick={() => setIsDialogOpen(true)}
+            >
+              <Maximize2 className="h-4 w-4" />
+            </Button>
+          )}
+        </CardHeader>
+        <CardContent>
+          <ConnectionStatus variant="detailed" showUptime showSubscriptions />
+        </CardContent>
+      </Card>
+
+      {/* Full monitor dialog */}
+      {showExpandButton && (
+        <CentrifugoMonitorDialog
+          open={isDialogOpen}
+          onOpenChange={setIsDialogOpen}
+          variant="full"
+          {...monitorProps}
+        />
+      )}
+    </>
+  );
+}
+

package/src/components/CentrifugoMonitor/index.ts

@@ -0,0 +1,14 @@
+/**
+ * Centrifugo Monitor Components
+ */
+
+export { CentrifugoMonitor } from './CentrifugoMonitor';
+export { CentrifugoMonitorDialog } from './CentrifugoMonitorDialog';
+export { CentrifugoMonitorFAB } from './CentrifugoMonitorFAB';
+export { CentrifugoMonitorWidget } from './CentrifugoMonitorWidget';
+
+export type { CentrifugoMonitorProps } from './CentrifugoMonitor';
+export type { CentrifugoMonitorDialogProps } from './CentrifugoMonitorDialog';
+export type { CentrifugoMonitorFABProps } from './CentrifugoMonitorFAB';
+export type { CentrifugoMonitorWidgetProps } from './CentrifugoMonitorWidget';
+

package/src/components/ConnectionStatus/ConnectionStatus.tsx

@@ -0,0 +1,192 @@
+/**
+ * Connection Status Component
+ *
+ * Universal component for displaying Centrifugo connection status
+ * Supports multiple variants: badge, inline, card, detailed
+ */
+
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { Badge } from '@djangocfg/ui';
+import { Wifi, WifiOff, Radio, Clock } from 'lucide-react';
+import moment from 'moment';
+import { useCentrifugo } from '../../providers/CentrifugoProvider';
+import { createLogger } from '../../core/logger/createLogger';
+
+const logger = createLogger('ConnectionStatus');
+
+// ─────────────────────────────────────────────────────────────────────────
+// Types
+// ─────────────────────────────────────────────────────────────────────────
+
+export interface ConnectionStatusProps {
+  variant?: 'badge' | 'inline' | 'detailed';
+  showUptime?: boolean;
+  showSubscriptions?: boolean;
+  className?: string;
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+// Component
+// ─────────────────────────────────────────────────────────────────────────
+
+export function ConnectionStatus({
+  variant = 'badge',
+  showUptime = false,
+  showSubscriptions = false,
+  className = '',
+}: ConnectionStatusProps) {
+  const { isConnected, client } = useCentrifugo();
+  const [connectionTime, setConnectionTime] = useState<moment.Moment | null>(null);
+  const [uptime, setUptime] = useState<string>('');
+  const [activeSubscriptions, setActiveSubscriptions] = useState<number>(0);
+
+  // Track connection time
+  useEffect(() => {
+    if (isConnected && !connectionTime) {
+      setConnectionTime(moment.utc());
+    } else if (!isConnected) {
+      setConnectionTime(null);
+    }
+  }, [isConnected, connectionTime]);
+
+  // Update uptime every second
+  useEffect(() => {
+    if (!isConnected || !connectionTime) {
+      setUptime('');
+      return;
+    }
+
+    const updateUptime = () => {
+      const now = moment.utc();
+      const duration = moment.duration(now.diff(connectionTime));
+
+      const hours = Math.floor(duration.asHours());
+      const minutes = duration.minutes();
+      const seconds = duration.seconds();
+
+      if (hours > 0) {
+        setUptime(`${hours}h ${minutes}m`);
+      } else if (minutes > 0) {
+        setUptime(`${minutes}m ${seconds}s`);
+      } else {
+        setUptime(`${seconds}s`);
+      }
+    };
+
+    updateUptime();
+    const interval = setInterval(updateUptime, 1000);
+
+    return () => clearInterval(interval);
+  }, [isConnected, connectionTime]);
+
+  // Update active subscriptions count
+  useEffect(() => {
+    if (!client || !isConnected) {
+      setActiveSubscriptions(0);
+      return;
+    }
+
+    const updateCount = () => {
+      try {
+        const centrifuge = client.getCentrifuge();
+        const subs = centrifuge.subscriptions();
+        setActiveSubscriptions(Object.keys(subs).length);
+      } catch (error) {
+        logger.error('Failed to get active subscriptions', error);
+      }
+    };
+
+    updateCount();
+    const interval = setInterval(updateCount, 2000);
+
+    return () => clearInterval(interval);
+  }, [client, isConnected]);
+
+  // Badge variant
+  if (variant === 'badge') {
+    return (
+      <Badge
+        variant={isConnected ? 'default' : 'destructive'}
+        className={`flex items-center gap-1 ${isConnected ? 'animate-pulse' : ''} ${className}`}
+      >
+        <span className={`h-2 w-2 rounded-full ${isConnected ? 'bg-green-500' : 'bg-red-500'}`} />
+        {isConnected ? 'Connected' : 'Disconnected'}
+      </Badge>
+    );
+  }
+
+  // Inline variant
+  if (variant === 'inline') {
+    return (
+      <div className={`flex items-center gap-2 ${className}`}>
+        {isConnected ? (
+          <Wifi className="h-4 w-4 text-green-600" />
+        ) : (
+          <WifiOff className="h-4 w-4 text-red-600" />
+        )}
+        <span className="text-sm font-medium">
+          {isConnected ? 'Connected' : 'Disconnected'}
+        </span>
+        {showUptime && uptime && (
+          <span className="text-xs text-muted-foreground">({uptime})</span>
+        )}
+        {showSubscriptions && (
+          <span className="text-xs text-muted-foreground flex items-center gap-1">
+            <Radio className="h-3 w-3" />
+            {activeSubscriptions}
+          </span>
+        )}
+      </div>
+    );
+  }
+
+  // Detailed variant
+  return (
+    <div className={`space-y-3 ${className}`}>
+      {/* Status Badge */}
+      <div className="flex items-center gap-2">
+        <Badge
+          variant={isConnected ? 'default' : 'destructive'}
+          className={`flex items-center gap-1 ${isConnected ? 'animate-pulse' : ''}`}
+        >
+          <span className={`h-2 w-2 rounded-full ${isConnected ? 'bg-green-500' : 'bg-red-500'}`} />
+          {isConnected ? 'Connected' : 'Disconnected'}
+        </Badge>
+      </div>
+
+      {/* Connection Info */}
+      {isConnected ? (
+        <div className="space-y-2">
+          {/* Uptime */}
+          {showUptime && uptime && (
+            <div className="flex items-center justify-between text-xs">
+              <span className="text-muted-foreground flex items-center gap-1">
+                <Clock className="h-3 w-3" />
+                Uptime:
+              </span>
+              <span className="font-mono font-medium">{uptime}</span>
+            </div>
+          )}
+
+          {/* Active Subscriptions */}
+          {showSubscriptions && (
+            <div className="flex items-center justify-between text-xs">
+              <span className="text-muted-foreground flex items-center gap-1">
+                <Radio className="h-3 w-3" />
+                Subscriptions:
+              </span>
+              <span className="font-mono font-medium">{activeSubscriptions}</span>
+            </div>
+          )}
+        </div>
+      ) : (
+        <div className="text-xs text-muted-foreground p-2 rounded bg-red-50 dark:bg-red-950/20">
+          Real-time features unavailable
+        </div>
+      )}
+    </div>
+  );
+}
+

package/src/components/ConnectionStatus/ConnectionStatusCard.tsx

@@ -0,0 +1,56 @@
+/**
+ * Connection Status Card Component
+ *
+ * Card wrapper for ConnectionStatus - ready for dashboard widgets
+ */
+
+'use client';
+
+import React from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@djangocfg/ui';
+import { Wifi, WifiOff } from 'lucide-react';
+import { useCentrifugo } from '../../providers/CentrifugoProvider';
+import { ConnectionStatus } from './ConnectionStatus';
+
+// ─────────────────────────────────────────────────────────────────────────
+// Types
+// ─────────────────────────────────────────────────────────────────────────
+
+export interface ConnectionStatusCardProps {
+  showUptime?: boolean;
+  showSubscriptions?: boolean;
+  className?: string;
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+// Component
+// ─────────────────────────────────────────────────────────────────────────
+
+export function ConnectionStatusCard({
+  showUptime = true,
+  showSubscriptions = true,
+  className = '',
+}: ConnectionStatusCardProps) {
+  const { isConnected } = useCentrifugo();
+
+  const statusColor = isConnected ? 'border-green-500' : 'border-red-500';
+
+  return (
+    <Card className={`${statusColor} ${className}`} style={{ borderLeftWidth: '4px' }}>
+      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+        <CardTitle className="text-sm font-medium">WebSocket Status</CardTitle>
+        <div className={isConnected ? 'text-green-600' : 'text-red-600'}>
+          {isConnected ? <Wifi className="h-4 w-4" /> : <WifiOff className="h-4 w-4" />}
+        </div>
+      </CardHeader>
+      <CardContent>
+        <ConnectionStatus
+          variant="detailed"
+          showUptime={showUptime}
+          showSubscriptions={showSubscriptions}
+        />
+      </CardContent>
+    </Card>
+  );
+}
+

package/src/components/ConnectionStatus/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Connection Status Components
+ */
+
+export { ConnectionStatus } from './ConnectionStatus';
+export { ConnectionStatusCard } from './ConnectionStatusCard';
+export type { ConnectionStatusProps } from './ConnectionStatus';
+export type { ConnectionStatusCardProps } from './ConnectionStatusCard';
+