@djangocfg/centrifugo 1.0.1 → 1.0.2

package/src/providers/LogsProvider/LogsProvider.tsx

@@ -0,0 +1,107 @@
+/**
+ * Logs Provider
+ *
+ * Provides access to accumulated logs via React Context.
+ * Wraps LogsStore and exposes logs + controls.
+ */
+
+'use client';
+
+import { createContext, useContext, useState, useEffect, useCallback, type ReactNode } from 'react';
+import type { LogEntry, LogLevel } from '../../core/types';
+import { getGlobalLogsStore } from '../../core/logger';
+
+// ─────────────────────────────────────────────────────────────────────────
+// Context
+// ─────────────────────────────────────────────────────────────────────────
+
+export interface LogsContextValue {
+  logs: LogEntry[];
+  filteredLogs: LogEntry[];
+  filter: LogsFilter;
+  setFilter: (filter: Partial<LogsFilter>) => void;
+  clearLogs: () => void;
+  count: number;
+}
+
+export interface LogsFilter {
+  level?: LogLevel;
+  source?: LogEntry['source'];
+  search?: string;
+}
+
+const LogsContext = createContext<LogsContextValue | undefined>(undefined);
+
+// ─────────────────────────────────────────────────────────────────────────
+// Provider
+// ─────────────────────────────────────────────────────────────────────────
+
+export interface LogsProviderProps {
+  children: ReactNode;
+}
+
+export function LogsProvider({ children }: LogsProviderProps) {
+  const [logs, setLogs] = useState<LogEntry[]>([]);
+  const [filter, setFilterState] = useState<LogsFilter>({});
+
+  const logsStore = getGlobalLogsStore();
+
+  // Subscribe to log changes
+  useEffect(() => {
+    // Initial load
+    setLogs(logsStore.getAll());
+
+    // Subscribe to updates
+    const unsubscribe = logsStore.subscribe((updatedLogs) => {
+      setLogs(updatedLogs);
+    });
+
+    return unsubscribe;
+  }, [logsStore]);
+
+  // Filter logs
+  const filteredLogs = logs.filter((log) => {
+    if (filter.level && log.level !== filter.level) return false;
+    if (filter.source && log.source !== filter.source) return false;
+    if (filter.search) {
+      const searchLower = filter.search.toLowerCase();
+      return log.message.toLowerCase().includes(searchLower);
+    }
+    return true;
+  });
+
+  // Set filter (merge with existing)
+  const setFilter = useCallback((partialFilter: Partial<LogsFilter>) => {
+    setFilterState((prev) => ({ ...prev, ...partialFilter }));
+  }, []);
+
+  // Clear all logs
+  const clearLogs = useCallback(() => {
+    logsStore.clear();
+  }, [logsStore]);
+
+  const value: LogsContextValue = {
+    logs,
+    filteredLogs,
+    filter,
+    setFilter,
+    clearLogs,
+    count: logs.length,
+  };
+
+  return <LogsContext.Provider value={value}>{children}</LogsContext.Provider>;
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+// Hook
+// ─────────────────────────────────────────────────────────────────────────
+
+export function useLogs(): LogsContextValue {
+  const context = useContext(LogsContext);
+
+  if (context === undefined) {
+    throw new Error('useLogs must be used within a LogsProvider');
+  }
+
+  return context;
+}

package/src/providers/LogsProvider/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Logs Provider
+ */
+
+export { LogsProvider, useLogs } from './LogsProvider';
+export type { LogsContextValue, LogsFilter, LogsProviderProps } from './LogsProvider';

package/src/providers/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Providers Module
+ */
+
+export { CentrifugoProvider, useCentrifugo } from './CentrifugoProvider';
+export type { CentrifugoContextValue, CentrifugoProviderProps } from './CentrifugoProvider';
+
+export { LogsProvider, useLogs } from './LogsProvider';
+export type { LogsContextValue, LogsFilter, LogsProviderProps } from './LogsProvider';

package/API_GENERATOR.md

@@ -1,253 +0,0 @@
-# Centrifugo Client Generator
-
-Documentation for generating Centrifugo WebSocket RPC clients from gRPC services and Django configuration.
-
-## Overview
-
-The Centrifugo client generator creates typed WebSocket RPC clients from:
-- **gRPC Services**: Protocol buffer definitions and service implementations
-- **Django Config**: Configuration schema from `config.py`
-
-This enables full-stack type safety and auto-completion for WebSocket RPC communication.
-
-## Paths Reference
-
-```
-$PACKAGES    = ../packages                                    (monorepo packages root)
-$ADMIN       = ../apps/admin                                 (admin app root)
-$DJANGO      = ../../../../solution/projects/django          (django project root)
-$DJANGO_CFG  = ../../../../solution/projects/django_cfg      (django_cfg package)
-```
-
-## Quick Start
-
-```bash
-# From admin app root
-cd $ADMIN && make centrifugo
-```
-
-This will:
-1. Generate clients (TypeScript, Python, Go) in `$DJANGO/openapi/centrifugo/`
-2. Copy TypeScript client to `$ADMIN/src/centrifugo/generated/`
-
-## Generator Architecture
-
-### 1. Management Command
-
-**Location**: `$DJANGO/core/management/commands/generate_centrifugo.py`
-
-This is the main entry point that orchestrates the generation process.
-
-```python
-# Usage
-python manage.py generate_centrifugo
-```
-
-### 2. Codegen Logic
-
-**Location**: `$DJANGO_CFG/apps/integrations/centrifugo/codegen/`
-
-The generator has modular architecture:
-
-```
-codegen/
-├── management/commands/
-│   └── generate_centrifugo_clients.py  # Core generator command
-├── generators/
-│   ├── typescript_thin/                # TypeScript client generator
-│   │   ├── generator.py
-│   │   └── templates/                  # Jinja2 templates
-│   ├── python/                         # Python client generator
-│   └── go/                             # Go client generator
-└── utils/                              # Shared utilities
-```
-
-### 3. Templates
-
-Client generation uses Jinja2 templates located in:
-- `$DJANGO_CFG/apps/integrations/centrifugo/codegen/generators/typescript_thin/templates/`
-
-Key templates:
-- `client.ts.j2` - RPC method wrappers
-- `rpc-client.ts.j2` - Base Centrifugo client with connection logic
-- `types.ts.j2` - TypeScript type definitions
-
-## Source Data
-
-### gRPC Services
-
-**Location**: `$DJANGO/apps/*/grpc_services`
-
-The generator scans all Django apps for gRPC service definitions:
-- `.proto` files
-- Service implementations
-- Method signatures
-
-### Django Config
-
-**Location**: `$DJANGO/api/config.py`
-
-Configuration schema is extracted from:
-```python
-class ConfigView(APIView):
-    @action(detail=False, methods=['get'])
-    def config(self, request):
-        return Response({
-            'centrifugo': {
-                'enabled': settings.CENTRIFUGO_ENABLED,
-                'url': settings.CENTRIFUGO_URL,
-                # ...
-            }
-        })
-```
-
-## Generated Outputs
-
-### TypeScript Client
-
-**Output**: `$DJANGO/openapi/centrifugo/typescript/`
-
-Generated files:
-- `client.ts` - High-level RPC method wrappers
-- `rpc-client.ts` - Low-level Centrifugo client
-- `types.ts` - TypeScript interfaces
-
-**Copied to**: `$ADMIN/src/centrifugo/generated/`
-
-### Python Client
-
-**Output**: `$DJANGO/openapi/centrifugo/python/`
-
-### Go Client
-
-**Output**: `$DJANGO/openapi/centrifugo/go/`
-
-## Modifying the Generator
-
-The codegen logic is in `$DJANGO_CFG` which is auto-linked to Django. Changes are immediately available:
-
-1. Edit generator code or templates in `$DJANGO_CFG/apps/integrations/centrifugo/codegen/`
-2. Re-run generation: `cd $ADMIN && make centrifugo`
-3. Verify generated output
-
-### Example: Modify TypeScript Template
-
-```bash
-# Edit base client template
-vim $DJANGO_CFG/apps/integrations/centrifugo/codegen/generators/typescript_thin/templates/rpc-client.ts.j2
-
-# Regenerate
-cd $ADMIN && make centrifugo
-
-# Check output
-cat $ADMIN/src/centrifugo/generated/rpc-client.ts
-```
-
-## Integration with Admin App
-
-The admin app wraps the generated client with app-specific providers:
-
-```
-$ADMIN/src/centrifugo/
-├── generated/                    # Auto-generated (DO NOT EDIT)
-│   ├── client.ts
-│   ├── rpc-client.ts
-│   └── types.ts
-├── AppCentrifugoProvider.tsx    # App-specific wrapper
-└── index.ts                     # Re-exports from @djangocfg/centrifugo
-```
-
-Universal components (context, hooks, debug) are in `@djangocfg/centrifugo` package:
-
-```
-$PACKAGES/centrifugo/src/
-├── context/                     # React context provider
-├── hooks/                       # Custom hooks
-├── components/                  # Debug panel, etc.
-├── config.ts                    # Environment config
-└── types.ts                     # Shared types
-```
-
-## Development Workflow
-
-### 1. Add New gRPC Service
-
-```bash
-# 1. Define .proto file
-vim $DJANGO/apps/myapp/grpc_services/myservice.proto
-
-# 2. Implement service
-vim $DJANGO/apps/myapp/grpc_services/myservice.py
-
-# 3. Regenerate client
-cd $ADMIN && make centrifugo
-```
-
-### 2. Use in Frontend
-
-```tsx
-import { useCentrifugo } from '@/centrifugo';
-
-function MyComponent() {
-  const { client, isConnected } = useCentrifugo();
-
-  const handleCall = async () => {
-    // Auto-generated typed method
-    const result = await client?.myMethod({ param: 'value' });
-  };
-}
-```
-
-## Troubleshooting
-
-### Client Generation Fails
-
-1. Check Django apps are properly configured
-2. Verify gRPC services are valid
-3. Check template syntax in `$DJANGO_CFG/apps/integrations/centrifugo/codegen/generators/typescript_thin/templates/`
-
-### TypeScript Errors After Generation
-
-1. Check generated types in `src/centrifugo/generated/types.ts`
-2. Verify imports match package structure
-3. Run type check: `pnpm tsc --noEmit`
-
-### Connection Issues
-
-Use the debug panel (FAB button in bottom-left corner) to inspect:
-- Connection state
-- Authentication status
-- WebSocket URL
-- Channel subscriptions
-- Error messages
-
-## Advanced Configuration
-
-### Custom Templates
-
-You can customize the generated output by modifying templates:
-
-```bash
-# Location
-$DJANGO_CFG/apps/integrations/centrifugo/codegen/generators/typescript_thin/templates/
-
-# Files
-client.ts.j2          # Method wrappers
-rpc-client.ts.j2      # Base client
-types.ts.j2           # Type definitions
-```
-
-### Generator Options
-
-The `generate_centrifugo_clients` command supports options:
-
-```bash
-python manage.py generate_centrifugo_clients --help
-```
-
-## References
-
-- **Centrifugo Docs**: https://centrifugal.dev/
-- **Centrifuge-JS**: https://github.com/centrifugal/centrifuge-js
-- **gRPC**: https://grpc.io/
-- **Jinja2**: https://jinja.palletsprojects.com/

package/src/components/CentrifugoDebug.tsx

@@ -1,182 +0,0 @@
-/**
- * Centrifugo Debug Component
- *
- * Displays detailed Centrifugo connection status and diagnostics
- */
-
-'use client';
-
-import React from 'react';
-import { useCentrifugo } from '../context';
-import { useAuth } from '@djangocfg/layouts';
-import { Card, CardHeader, CardTitle, CardContent, Badge, Separator, Button, useCopy } from '@djangocfg/ui';
-import { PrettyCode } from '@djangocfg/ui/tools';
-import { Wifi, WifiOff, Radio, X, Copy, RefreshCw } from 'lucide-react';
-import { centrifugoConfig } from '../config';
-
-export function CentrifugoDebug() {
-  const { isConnected, isConnecting, error, connectionState, baseClient, enabled, reconnect } = useCentrifugo();
-  const { isAuthenticated, isLoading: authLoading, user } = useAuth();
-  const [isVisible, setIsVisible] = React.useState(true);
-  const [isReconnecting, setIsReconnecting] = React.useState(false);
-  const { copyToClipboard } = useCopy();
-
-  const centrifugoToken = user?.centrifugo;
-  const hasCentrifugoToken = !!centrifugoToken?.token;
-
-  const shouldConnect = isAuthenticated && !authLoading && enabled && hasCentrifugoToken;
-
-  const debugInfo = React.useMemo(() => ({
-    connection: {
-      status: connectionState,
-      isConnected,
-      isConnecting,
-      error: error?.message || null,
-    },
-    auth: {
-      isAuthenticated,
-      authLoading,
-      userId: user?.id,
-    },
-    config: {
-      centrifugoEnabled: enabled,
-      hasCentrifugoToken,
-    },
-    websocket: {
-      url: centrifugoToken?.centrifugo_url || null,
-      channels: centrifugoToken?.channels || [],
-      activeSubscriptions: baseClient?.getAllSubscriptions?.() || [],
-    },
-    autoConnect: {
-      shouldConnect,
-      reasons: {
-        authenticated: isAuthenticated,
-        authLoading: !authLoading,
-        centrifugoEnabled: enabled,
-        hasToken: hasCentrifugoToken,
-      },
-    },
-  }), [connectionState, isConnected, isConnecting, error, isAuthenticated, authLoading, user?.id, enabled, hasCentrifugoToken, centrifugoToken, baseClient, shouldConnect]);
-
-  const copyDebugInfo = () => {
-    copyToClipboard(JSON.stringify(debugInfo, null, 2), 'Debug info copied to clipboard');
-  };
-
-  const handleReconnect = async () => {
-    setIsReconnecting(true);
-    try {
-      await reconnect();
-    } finally {
-      setTimeout(() => setIsReconnecting(false), 1000);
-    }
-  };
-
-  // Only show in development mode and not in static builds
-  if (!centrifugoConfig.showDebugPanel) {
-    return null;
-  }
-
-  return (
-    <>
-      {/* FAB Button (always visible) */}
-      <button
-        onClick={() => setIsVisible(!isVisible)}
-        className="rounded-full bg-primary text-primary-foreground shadow-lg hover:shadow-xl transition-all duration-200 flex items-center justify-center"
-        style={{ position: 'fixed', bottom: '1rem', left: '1rem', width: '56px', height: '56px', zIndex: 9999 }}
-        title="Toggle Centrifugo Debug Panel"
-      >
-        {isConnected ? (
-          <Wifi style={{ width: '24px', height: '24px' }} />
-        ) : (
-          <WifiOff style={{ width: '24px', height: '24px' }} />
-        )}
-      </button>
-
-      {/* Debug Panel */}
-      {isVisible && (
-        <div style={{ position: 'fixed', bottom: '5rem', left: '1rem', width: '420px', zIndex: 9999 }}>
-          <Card className="shadow-lg">
-            <CardHeader className="pb-3">
-              <div className="flex items-center justify-between">
-                <div className="flex items-center gap-2">
-                  {isConnected ? (
-                    <Wifi className="text-green-600 dark:text-green-500" style={{ width: '16px', height: '16px' }} />
-                  ) : (
-                    <WifiOff className="text-red-600 dark:text-red-500" style={{ width: '16px', height: '16px' }} />
-                  )}
-                  <CardTitle className="text-base">Centrifugo Debug</CardTitle>
-                </div>
-                <div className="flex items-center gap-1">
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    onClick={handleReconnect}
-                    disabled={isReconnecting || isConnecting}
-                    className="px-2 py-1"
-                    title="Reconnect"
-                  >
-                    <RefreshCw
-                      style={{ width: '14px', height: '14px' }}
-                      className={isReconnecting ? 'animate-spin' : ''}
-                    />
-                  </Button>
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    onClick={copyDebugInfo}
-                    className="px-2 py-1"
-                    title="Copy debug info"
-                  >
-                    <Copy style={{ width: '14px', height: '14px' }} />
-                  </Button>
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    onClick={() => setIsVisible(false)}
-                    className="px-2 py-1"
-                  >
-                    <X style={{ width: '14px', height: '14px' }} />
-                  </Button>
-                </div>
-              </div>
-            </CardHeader>
-
-            <CardContent className="space-y-3">
-              {/* Connection Status Badge */}
-              <div className="flex items-center justify-between">
-                <span className="text-sm font-medium">Status:</span>
-                <Badge variant={isConnected ? 'default' : isConnecting ? 'secondary' : 'destructive'}>
-                  {connectionState.toUpperCase()}
-                </Badge>
-              </div>
-
-              {/* Auto-Connect Decision */}
-              <div className="flex items-center justify-between">
-                <span className="text-sm font-medium">Should Connect:</span>
-                <Badge variant={shouldConnect ? 'default' : 'outline'}>
-                  {shouldConnect ? 'YES' : 'NO'}
-                </Badge>
-              </div>
-
-              <Separator />
-
-              {/* JSON Debug Output */}
-              <div className="space-y-2">
-                <div className="flex items-center gap-2">
-                  <Radio className="text-muted-foreground" style={{ width: '14px', height: '14px' }} />
-                  <span className="text-sm font-medium">Debug State:</span>
-                </div>
-                <div className="max-h-[300px] overflow-y-auto">
-                  <PrettyCode data={debugInfo} language="json" />
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-        </div>
-      )}
-    </>
-  );
-}
-
-// Alias for backward compatibility
-export const WSRPCDebug = CentrifugoDebug;

package/src/components/index.ts

@@ -1,5 +0,0 @@
-/**
- * Centrifugo Components
- */
-
-export { CentrifugoDebug, WSRPCDebug } from './CentrifugoDebug';