@djangocfg/centrifugo 1.0.5 → 1.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/centrifugo",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "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",
@@ -19,8 +19,8 @@
     "centrifuge": "^5.2.2"
   },
   "peerDependencies": {
-    "@djangocfg/ui": "^1.2.30",
-    "@djangocfg/layouts": "^1.2.30",
+    "@djangocfg/ui": "^1.2.31",
+    "@djangocfg/layouts": "^1.2.31",
     "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.30",
+    "@djangocfg/typescript-config": "^1.2.31",
     "@types/react": "^19.0.6",
     "@types/react-dom": "^19.0.2",
     "moment": "^2.30.1",

package/src/components/CentrifugoMonitor/CentrifugoMonitorDialog.tsx

@@ -2,63 +2,73 @@
  * Centrifugo Monitor Dialog Component
  *
  * Sheet/Dialog wrapper for CentrifugoMonitor
+ * Uses event-driven approach - listens to OPEN_MONITOR_DIALOG event
  */
 
 'use client';
 
-import React from 'react';
+import React, { useState } from 'react';
 import {
   Sheet,
   SheetContent,
   SheetHeader,
   SheetTitle,
   SheetDescription,
+  useEventListener,
 } from '@djangocfg/ui';
 import { Activity } from 'lucide-react';
-import { CentrifugoMonitor, type CentrifugoMonitorProps } from './CentrifugoMonitor';
+import { CentrifugoMonitor } from './CentrifugoMonitor';
+import { CENTRIFUGO_MONITOR_EVENTS, type OpenMonitorDialogPayload } from '../../events';
 
 // ─────────────────────────────────────────────────────────────────────────
-// Types
+// Component
 // ─────────────────────────────────────────────────────────────────────────
 
-export interface CentrifugoMonitorDialogProps extends Omit<CentrifugoMonitorProps, 'className'> {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  title?: string;
-  description?: string;
-  side?: 'left' | 'right' | 'top' | 'bottom';
-  className?: string;
-}
+export function CentrifugoMonitorDialog() {
+  const [open, setOpen] = useState(false);
+  const [variant, setVariant] = useState<'compact' | 'full' | 'minimal'>('full');
 
-// ─────────────────────────────────────────────────────────────────────────
-// Component
-// ─────────────────────────────────────────────────────────────────────────
+  // Listen for dialog open event
+  useEventListener<typeof CENTRIFUGO_MONITOR_EVENTS.OPEN_MONITOR_DIALOG, OpenMonitorDialogPayload>(
+    CENTRIFUGO_MONITOR_EVENTS.OPEN_MONITOR_DIALOG,
+    (payload) => {
+      if (payload?.variant) {
+        setVariant(payload.variant);
+      }
+      setOpen(true);
+    }
+  );
+
+  // Listen for dialog close event
+  useEventListener(
+    CENTRIFUGO_MONITOR_EVENTS.CLOSE_MONITOR_DIALOG,
+    () => {
+      setOpen(false);
+    }
+  );
+
+  const handleClose = () => {
+    setOpen(false);
+  };
 
-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}>
+    <Sheet open={open} onOpenChange={(isOpen) => !isOpen && handleClose()}>
       <SheetContent 
-        side={side} 
-        className={`max-w-2xl w-[90vw] sm:w-[672px] ${className}`}
+        side="right" 
+        className="max-w-2xl w-[90vw] sm:w-[672px]"
       >
         <SheetHeader>
           <SheetTitle className="flex items-center gap-2">
             <Activity className="h-5 w-5" />
-            {title}
+            Centrifugo Monitor
           </SheetTitle>
-          {description && <SheetDescription>{description}</SheetDescription>}
+          <SheetDescription>
+            Real-time WebSocket monitoring and debugging
+          </SheetDescription>
         </SheetHeader>
 
         <div className="mt-6">
-          <CentrifugoMonitor {...monitorProps} />
+          <CentrifugoMonitor variant={variant} />
         </div>
       </SheetContent>
     </Sheet>

package/src/components/CentrifugoMonitor/CentrifugoMonitorFAB.tsx

@@ -1,23 +1,24 @@
 /**
  * Centrifugo Monitor FAB Component
  *
- * Floating Action Button that opens CentrifugoMonitorDialog
+ * Floating Action Button that opens CentrifugoMonitorDialog via events
  * Replaces the old DebugPanel FAB
  */
 
 'use client';
 
-import React, { useState } from 'react';
+import React from 'react';
 import { Activity } from 'lucide-react';
-import { CentrifugoMonitorDialog, type CentrifugoMonitorDialogProps } from './CentrifugoMonitorDialog';
+import { emitOpenMonitorDialog, type OpenMonitorDialogPayload } from '../../events';
 
 // ─────────────────────────────────────────────────────────────────────────
 // Types
 // ─────────────────────────────────────────────────────────────────────────
 
-export interface CentrifugoMonitorFABProps extends Omit<CentrifugoMonitorDialogProps, 'open' | 'onOpenChange'> {
+export interface CentrifugoMonitorFABProps {
   position?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
   size?: 'sm' | 'md' | 'lg';
+  variant?: OpenMonitorDialogPayload['variant'];
 }
 
 // ─────────────────────────────────────────────────────────────────────────
@@ -27,9 +28,8 @@ export interface CentrifugoMonitorFABProps extends Omit<CentrifugoMonitorDialogP
 export function CentrifugoMonitorFAB({
   position = 'bottom-left',
   size = 'md',
-  ...dialogProps
+  variant = 'full',
 }: CentrifugoMonitorFABProps) {
-  const [isOpen, setIsOpen] = useState(false);
 
   // Position styles
   const positionStyles = {
@@ -52,30 +52,24 @@ export function CentrifugoMonitorFAB({
     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>
+  const handleClick = () => {
+    emitOpenMonitorDialog({ variant });
+  };
 
-      {/* Dialog */}
-      <CentrifugoMonitorDialog
-        open={isOpen}
-        onOpenChange={setIsOpen}
-        {...dialogProps}
-      />
-    </>
+  return (
+    <button
+      onClick={handleClick}
+      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>
   );
 }
 

package/src/components/CentrifugoMonitor/CentrifugoMonitorWidget.tsx

@@ -2,23 +2,22 @@
  * Centrifugo Monitor Widget Component
  *
  * Card-based widget for dashboards
- * Combines ConnectionStatusCard with compact monitor view
+ * Opens monitor dialog via events
  */
 
 'use client';
 
-import React, { useState } from 'react';
+import React 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';
+import { emitOpenMonitorDialog } from '../../events';
 
 // ─────────────────────────────────────────────────────────────────────────
 // Types
 // ─────────────────────────────────────────────────────────────────────────
 
-export interface CentrifugoMonitorWidgetProps extends Omit<CentrifugoMonitorProps, 'variant' | 'className'> {
+export interface CentrifugoMonitorWidgetProps {
   title?: string;
   showExpandButton?: boolean;
   className?: string;
@@ -32,43 +31,32 @@ export function CentrifugoMonitorWidget({
   title = 'WebSocket Monitor',
   showExpandButton = true,
   className = '',
-  ...monitorProps
 }: CentrifugoMonitorWidgetProps) {
-  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const handleExpand = () => {
+    emitOpenMonitorDialog({ variant: 'full' });
+  };
 
   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}
-        />
-      )}
-    </>
+    <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={handleExpand}
+          >
+            <Maximize2 className="h-4 w-4" />
+          </Button>
+        )}
+      </CardHeader>
+      <CardContent>
+        <ConnectionStatus variant="detailed" showUptime showSubscriptions />
+      </CardContent>
+    </Card>
   );
 }
 

package/src/components/CentrifugoMonitor/index.ts

@@ -8,7 +8,6 @@ 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/ConnectionStatusCard.tsx

@@ -2,7 +2,7 @@
  * Connection Status Card Component
  *
  * Card wrapper for ConnectionStatus - ready for dashboard widgets
- * Clickable - opens CentrifugoMonitorDialog on click
+ * Clickable - opens CentrifugoMonitorDialog on click via events
  */
 
 'use client';
@@ -12,7 +12,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@djangocfg/ui';
 import { Wifi, WifiOff } from 'lucide-react';
 import { useCentrifugo } from '../../providers/CentrifugoProvider';
 import { ConnectionStatus } from './ConnectionStatus';
-import { CentrifugoMonitorDialog } from '../CentrifugoMonitor/CentrifugoMonitorDialog';
+import { emitOpenMonitorDialog } from '../../events';
 
 // ─────────────────────────────────────────────────────────────────────────
 // Types
@@ -34,37 +34,33 @@ export function ConnectionStatusCard({
   className = '',
 }: ConnectionStatusCardProps) {
   const { isConnected } = useCentrifugo();
-  const [dialogOpen, setDialogOpen] = React.useState(false);
 
   const statusColor = isConnected ? 'border-green-500' : 'border-red-500';
 
-  return (
-    <>
-      <Card 
-        className={`${statusColor} ${className} cursor-pointer hover:shadow-lg transition-shadow`} 
-        style={{ borderLeftWidth: '4px' }}
-        onClick={() => setDialogOpen(true)}
-      >
-        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-          <CardTitle className="text-sm font-medium">WebSocket</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>
+  const handleClick = () => {
+    emitOpenMonitorDialog({ variant: 'full' });
+  };
 
-      <CentrifugoMonitorDialog 
-        open={dialogOpen} 
-        onOpenChange={setDialogOpen}
-      />
-    </>
+  return (
+    <Card 
+      className={`${statusColor} ${className} cursor-pointer hover:shadow-lg transition-shadow`} 
+      style={{ borderLeftWidth: '4px' }}
+      onClick={handleClick}
+    >
+      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+        <CardTitle className="text-sm font-medium">WebSocket</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/events.ts

@@ -0,0 +1,44 @@
+/**
+ * Centrifugo Package Events
+ *
+ * Event-driven communication for Centrifugo monitor dialog
+ */
+
+import { events } from '@djangocfg/ui';
+
+// ─────────────────────────────────────────────────────────────────────────
+// Event Types
+// ─────────────────────────────────────────────────────────────────────────
+
+export const CENTRIFUGO_MONITOR_EVENTS = {
+  OPEN_MONITOR_DIALOG: 'CENTRIFUGO_OPEN_MONITOR_DIALOG',
+  CLOSE_MONITOR_DIALOG: 'CENTRIFUGO_CLOSE_MONITOR_DIALOG',
+} as const;
+
+// ─────────────────────────────────────────────────────────────────────────
+// Event Payload Types
+// ─────────────────────────────────────────────────────────────────────────
+
+export interface OpenMonitorDialogPayload {
+  variant?: 'compact' | 'full' | 'minimal';
+  defaultTab?: 'connection' | 'messages' | 'subscriptions';
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+// Event Emitters
+// ─────────────────────────────────────────────────────────────────────────
+
+export const emitOpenMonitorDialog = (payload?: OpenMonitorDialogPayload) => {
+  events.publish({
+    type: CENTRIFUGO_MONITOR_EVENTS.OPEN_MONITOR_DIALOG,
+    payload: payload || {},
+  });
+};
+
+export const emitCloseMonitorDialog = () => {
+  events.publish({
+    type: CENTRIFUGO_MONITOR_EVENTS.CLOSE_MONITOR_DIALOG,
+    payload: {},
+  });
+};
+

package/src/index.ts

@@ -99,6 +99,12 @@ export type {
 export { centrifugoConfig, isDevelopment, isProduction, isStaticBuild } from './config';
 export type { CentrifugoConfig } from './config';
 
+// ─────────────────────────────────────────────────────────────────────────
+// Events
+// ─────────────────────────────────────────────────────────────────────────
+
+export * from './events';
+
 // ─────────────────────────────────────────────────────────────────────────
 // Components (Universal, composable monitoring components)
 // ─────────────────────────────────────────────────────────────────────────

package/src/providers/CentrifugoProvider/CentrifugoProvider.tsx

@@ -11,9 +11,10 @@ import { createContext, useContext, useState, useEffect, useCallback, useRef, us
 import { useAuth } from '@djangocfg/layouts';
 import { CentrifugoRPCClient } from '../../core/client';
 import { createLogger } from '../../core/logger';
-import type { ConnectionState, CentrifugoToken } from '../../core/types';
+import type { ConnectionState, CentrifugoToken, ActiveSubscription } from '../../core/types';
 import { LogsProvider } from '../LogsProvider';
 import { isStaticBuild } from '../../config';
+import { CentrifugoMonitorDialog } from '../../components/CentrifugoMonitor/CentrifugoMonitorDialog';
 
 // ─────────────────────────────────────────────────────────────────────────
 // Context
@@ -32,7 +33,7 @@ export interface CentrifugoContextValue {
   // Connection Info
   uptime: number; // seconds
   subscriptions: string[];
-  activeSubscriptions: import('../../core/types').ActiveSubscription[];
+  activeSubscriptions: ActiveSubscription[];
 
   // Controls
   connect: () => Promise<void>;
@@ -76,7 +77,7 @@ function CentrifugoProviderInner({
   const [connectionTime, setConnectionTime] = useState<Date | null>(null);
   const [uptime, setUptime] = useState<number>(0);
   const [subscriptions, setSubscriptions] = useState<string[]>([]);
-  const [activeSubscriptions, setActiveSubscriptions] = useState<import('../../core/types').ActiveSubscription[]>([]);
+  const [activeSubscriptions, setActiveSubscriptions] = useState<ActiveSubscription[]>([]);
 
   const logger = useMemo(() => createLogger({ source: 'provider' }), []);
 
@@ -145,7 +146,7 @@ function CentrifugoProviderInner({
         setSubscriptions(subs);
 
         // Convert to ActiveSubscription format
-        const activeSubs: import('../../core/types').ActiveSubscription[] = subs.map((channel) => ({
+        const activeSubs: ActiveSubscription[] = subs.map((channel) => ({
           channel,
           type: 'client' as const,
           subscribedAt: Date.now(),
@@ -337,13 +338,16 @@ function CentrifugoProviderInner({
 }
 
 // ─────────────────────────────────────────────────────────────────────────
-// Main Provider (wraps LogsProvider)
+// Main Provider (wraps LogsProvider and includes Dialog)
 // ─────────────────────────────────────────────────────────────────────────
 
 export function CentrifugoProvider(props: CentrifugoProviderProps) {
   return (
     <LogsProvider>
-      <CentrifugoProviderInner {...props} />
+      <CentrifugoProviderInner {...props}>
+        {props.children}
+        <CentrifugoMonitorDialog />
+      </CentrifugoProviderInner>
     </LogsProvider>
   );
 }