flikkui 0.1.0-beta.11 → 0.1.0-beta.12

package/dist/components/ai/PresenceProvider/adapters/MockAdapter.js

@@ -0,0 +1,353 @@
+import { __awaiter, __generator, __assign, __spreadArray } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
+
+/**
+ * Mock Presence Adapter
+ *
+ * Simulates real-time presence behavior for development and Storybook demos.
+ * No external dependencies - pure client-side simulation.
+ *
+ * Features:
+ * - Simulates 4-5 users joining at staggered intervals
+ * - Random typing events every 5 seconds
+ * - Auto-stop typing after 2-5 seconds
+ * - Connection status simulation
+ */
+/**
+ * Mock user data for simulation
+ */
+var MOCK_USERS = [
+    {
+        id: 'mock-user-2',
+        name: 'Sarah Wilson',
+        avatar: 'https://i.pravatar.cc/150?img=1',
+        status: 'online',
+    },
+    {
+        id: 'mock-user-3',
+        name: 'John Doe',
+        avatar: 'https://i.pravatar.cc/150?img=2',
+        status: 'online',
+    },
+    {
+        id: 'mock-user-4',
+        name: 'Emily Chen',
+        avatar: 'https://i.pravatar.cc/150?img=3',
+        status: 'busy',
+    },
+    {
+        id: 'mock-user-5',
+        name: 'Michael Brown',
+        avatar: 'https://i.pravatar.cc/150?img=4',
+        status: 'away',
+    },
+];
+/**
+ * Mock adapter implementation
+ * Simulates presence behavior without backend
+ */
+var MockPresenceAdapter = /** @class */ (function () {
+    function MockPresenceAdapter() {
+        this.config = null;
+        this.connectionStatus = 'disconnected';
+        this.users = [];
+        this.typingUsers = [];
+        this.intervals = [];
+        this.timeouts = [];
+        // Callback sets
+        this.presenceCallbacks = new Set();
+        this.typingCallbacks = new Set();
+        this.connectionCallbacks = new Set();
+        this.errorCallbacks = new Set();
+    }
+    /**
+     * Connect to mock presence channel
+     */
+    MockPresenceAdapter.prototype.connect = function (config) {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        this.config = config;
+                        this.connectionStatus = 'connecting';
+                        this.notifyConnectionChange();
+                        // Simulate connection delay
+                        return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(resolve, 500); })];
+                    case 1:
+                        // Simulate connection delay
+                        _a.sent();
+                        // Add current user
+                        this.users = [__assign(__assign({}, config.currentUser), { joinedAt: new Date() })];
+                        this.connectionStatus = 'connected';
+                        this.notifyConnectionChange();
+                        this.notifyPresenceChange();
+                        if (process.env.NODE_ENV !== 'production') {
+                            console.log('[MockPresenceAdapter]: Connected to channel:', config.channel);
+                        }
+                        // Start simulating user activity
+                        this.simulateUserActivity();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    /**
+     * Disconnect from mock channel
+     */
+    MockPresenceAdapter.prototype.disconnect = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                // Clear all intervals and timeouts
+                this.intervals.forEach(function (id) { return clearInterval(id); });
+                this.timeouts.forEach(function (id) { return clearTimeout(id); });
+                this.intervals = [];
+                this.timeouts = [];
+                // Reset state
+                this.users = [];
+                this.typingUsers = [];
+                this.connectionStatus = 'disconnected';
+                this.notifyConnectionChange();
+                if (process.env.NODE_ENV !== 'production') {
+                    console.log('[MockPresenceAdapter]: Disconnected from channel');
+                }
+                return [2 /*return*/];
+            });
+        });
+    };
+    /**
+     * Subscribe to presence changes
+     */
+    MockPresenceAdapter.prototype.onPresenceChange = function (callback) {
+        var _this = this;
+        this.presenceCallbacks.add(callback);
+        return function () { return _this.presenceCallbacks.delete(callback); };
+    };
+    /**
+     * Subscribe to typing changes
+     */
+    MockPresenceAdapter.prototype.onTypingChange = function (callback) {
+        var _this = this;
+        this.typingCallbacks.add(callback);
+        return function () { return _this.typingCallbacks.delete(callback); };
+    };
+    /**
+     * Subscribe to connection changes
+     */
+    MockPresenceAdapter.prototype.onConnectionChange = function (callback) {
+        var _this = this;
+        this.connectionCallbacks.add(callback);
+        return function () { return _this.connectionCallbacks.delete(callback); };
+    };
+    /**
+     * Subscribe to errors
+     */
+    MockPresenceAdapter.prototype.onError = function (callback) {
+        var _this = this;
+        this.errorCallbacks.add(callback);
+        return function () { return _this.errorCallbacks.delete(callback); };
+    };
+    /**
+     * Send typing start (current user)
+     */
+    MockPresenceAdapter.prototype.sendTypingStart = function () {
+        var _this = this;
+        if (!this.config)
+            return;
+        // Add current user to typing list if not already there
+        var alreadyTyping = this.typingUsers.find(function (u) { return u.id === _this.config.currentUser.id; });
+        if (!alreadyTyping) {
+            this.typingUsers.push({
+                id: this.config.currentUser.id,
+                name: this.config.currentUser.name,
+                avatar: this.config.currentUser.avatar,
+                startedAt: new Date(),
+            });
+            this.notifyTypingChange();
+        }
+    };
+    /**
+     * Send typing stop (current user)
+     */
+    MockPresenceAdapter.prototype.sendTypingStop = function () {
+        var _this = this;
+        if (!this.config)
+            return;
+        this.typingUsers = this.typingUsers.filter(function (u) { return u.id !== _this.config.currentUser.id; });
+        this.notifyTypingChange();
+    };
+    /**
+     * Update current user metadata
+     */
+    MockPresenceAdapter.prototype.updateUserMetadata = function (metadata) {
+        var _this = this;
+        if (!this.config)
+            return;
+        // Update current user in users list
+        this.users = this.users.map(function (user) {
+            return user.id === _this.config.currentUser.id
+                ? __assign(__assign({}, user), metadata) : user;
+        });
+        // Update config
+        this.config.currentUser = __assign(__assign({}, this.config.currentUser), metadata);
+        this.notifyPresenceChange();
+    };
+    /**
+     * Send custom event (mock implementation)
+     */
+    MockPresenceAdapter.prototype.sendCustomEvent = function (event, data) {
+        if (process.env.NODE_ENV !== 'production') {
+            console.log('[MockPresenceAdapter]: Custom event sent:', event, data);
+        }
+    };
+    /**
+     * Get current connection status
+     */
+    MockPresenceAdapter.prototype.getConnectionStatus = function () {
+        return this.connectionStatus;
+    };
+    /**
+     * Get current user
+     */
+    MockPresenceAdapter.prototype.getCurrentUser = function () {
+        if (!this.config) {
+            throw new Error('Adapter not connected');
+        }
+        return this.config.currentUser;
+    };
+    // ===== Private methods =====
+    /**
+     * Simulate realistic user activity
+     */
+    MockPresenceAdapter.prototype.simulateUserActivity = function () {
+        var _this = this;
+        // Stagger mock user joins (2s intervals)
+        MOCK_USERS.forEach(function (mockUser, index) {
+            var timeout = setTimeout(function () {
+                _this.users.push(__assign(__assign({}, mockUser), { joinedAt: new Date() }));
+                _this.notifyPresenceChange();
+            }, (index + 1) * 2000);
+            _this.timeouts.push(timeout);
+        });
+        // Simulate random typing events every 5 seconds
+        var typingInterval = setInterval(function () {
+            if (_this.users.length > 1 && Math.random() > 0.5) {
+                // Pick random user (excluding current user)
+                var otherUsers = _this.users.filter(function (u) { var _a; return u.id !== ((_a = _this.config) === null || _a === void 0 ? void 0 : _a.currentUser.id); });
+                if (otherUsers.length > 0) {
+                    var randomUser_1 = otherUsers[Math.floor(Math.random() * otherUsers.length)];
+                    _this.simulateTypingStart(randomUser_1);
+                    // Auto-stop typing after 2-5 seconds
+                    var stopDelay = 2000 + Math.random() * 3000;
+                    var stopTimeout = setTimeout(function () {
+                        _this.simulateTypingStop(randomUser_1.id);
+                    }, stopDelay);
+                    _this.timeouts.push(stopTimeout);
+                }
+            }
+        }, 5000);
+        this.intervals.push(typingInterval);
+        // Simulate occasional user leaving (after 30s, 1 random user leaves)
+        var leaveTimeout = setTimeout(function () {
+            if (_this.users.length > 2) {
+                // Remove random mock user (not current user)
+                var mockUserIds_1 = MOCK_USERS.map(function (u) { return u.id; });
+                var removableUsers = _this.users.filter(function (u) { return mockUserIds_1.includes(u.id); });
+                if (removableUsers.length > 0) {
+                    var randomIndex = Math.floor(Math.random() * removableUsers.length);
+                    var userToRemove_1 = removableUsers[randomIndex];
+                    _this.users = _this.users.filter(function (u) { return u.id !== userToRemove_1.id; });
+                    _this.typingUsers = _this.typingUsers.filter(function (u) { return u.id !== userToRemove_1.id; });
+                    _this.notifyPresenceChange();
+                    _this.notifyTypingChange();
+                    if (process.env.NODE_ENV !== 'production') {
+                        console.log('[MockPresenceAdapter]: User left:', userToRemove_1.name);
+                    }
+                }
+            }
+        }, 30000);
+        this.timeouts.push(leaveTimeout);
+    };
+    /**
+     * Simulate typing start for a user
+     */
+    MockPresenceAdapter.prototype.simulateTypingStart = function (user) {
+        // Don't add if already typing
+        if (this.typingUsers.find(function (u) { return u.id === user.id; })) {
+            return;
+        }
+        this.typingUsers.push({
+            id: user.id,
+            name: user.name,
+            avatar: user.avatar,
+            startedAt: new Date(),
+        });
+        this.notifyTypingChange();
+        if (process.env.NODE_ENV !== 'production') {
+            console.log('[MockPresenceAdapter]: User typing:', user.name);
+        }
+    };
+    /**
+     * Simulate typing stop for a user
+     */
+    MockPresenceAdapter.prototype.simulateTypingStop = function (userId) {
+        var wasTyping = this.typingUsers.some(function (u) { return u.id === userId; });
+        this.typingUsers = this.typingUsers.filter(function (u) { return u.id !== userId; });
+        if (wasTyping) {
+            this.notifyTypingChange();
+            if (process.env.NODE_ENV !== 'production') {
+                var user = this.users.find(function (u) { return u.id === userId; });
+                console.log('[MockPresenceAdapter]: User stopped typing:', user === null || user === void 0 ? void 0 : user.name);
+            }
+        }
+    };
+    /**
+     * Notify all presence callbacks
+     */
+    MockPresenceAdapter.prototype.notifyPresenceChange = function () {
+        var _this = this;
+        this.presenceCallbacks.forEach(function (callback) {
+            try {
+                callback(__spreadArray([], _this.users, true));
+            }
+            catch (error) {
+                if (process.env.NODE_ENV !== 'production') {
+                    console.error('[MockPresenceAdapter]: Error in presence callback:', error);
+                }
+            }
+        });
+    };
+    /**
+     * Notify all typing callbacks
+     */
+    MockPresenceAdapter.prototype.notifyTypingChange = function () {
+        var _this = this;
+        this.typingCallbacks.forEach(function (callback) {
+            try {
+                callback(__spreadArray([], _this.typingUsers, true));
+            }
+            catch (error) {
+                if (process.env.NODE_ENV !== 'production') {
+                    console.error('[MockPresenceAdapter]: Error in typing callback:', error);
+                }
+            }
+        });
+    };
+    /**
+     * Notify all connection callbacks
+     */
+    MockPresenceAdapter.prototype.notifyConnectionChange = function () {
+        var _this = this;
+        this.connectionCallbacks.forEach(function (callback) {
+            try {
+                callback(_this.connectionStatus);
+            }
+            catch (error) {
+                if (process.env.NODE_ENV !== 'production') {
+                    console.error('[MockPresenceAdapter]: Error in connection callback:', error);
+                }
+            }
+        });
+    };
+    return MockPresenceAdapter;
+}());
+
+export { MockPresenceAdapter };

package/dist/components/ai/PresenceProvider/adapters/PresenceAdapter.d.ts

@@ -0,0 +1,93 @@
+/**
+ * Presence Adapter Interface
+ *
+ * Defines the contract for backend adapters that enable real-time presence.
+ * Implementations can use WebSocket, Supabase, Ably, Pusher, or custom backends.
+ */
+import { PresenceUser, TypingUser, ConnectionStatus } from '../PresenceProvider.types';
+/**
+ * Adapter configuration
+ * Passed to adapter on connection
+ */
+export interface PresenceAdapterConfig {
+    /** Channel/room ID */
+    channel: string;
+    /** Current user information */
+    currentUser: PresenceUser;
+    /** Typing debounce delay in ms (default: 300) */
+    typingDebounce?: number;
+    /** Typing timeout in ms (default: 3000) */
+    typingTimeout?: number;
+}
+/**
+ * Base adapter interface
+ * All presence adapters must implement these methods
+ */
+export interface PresenceAdapter {
+    /**
+     * Connect to presence channel
+     * @param config - Connection configuration
+     * @returns Promise that resolves when connected
+     */
+    connect(config: PresenceAdapterConfig): Promise<void>;
+    /**
+     * Disconnect from channel
+     * @returns Promise that resolves when disconnected
+     */
+    disconnect(): Promise<void>;
+    /**
+     * Subscribe to presence changes (users joining/leaving)
+     * @param callback - Called when presence state changes
+     * @returns Unsubscribe function
+     */
+    onPresenceChange(callback: (users: PresenceUser[]) => void): () => void;
+    /**
+     * Subscribe to typing state changes
+     * @param callback - Called when typing state changes
+     * @returns Unsubscribe function
+     */
+    onTypingChange(callback: (typingUsers: TypingUser[]) => void): () => void;
+    /**
+     * Subscribe to connection status changes
+     * @param callback - Called when connection status changes
+     * @returns Unsubscribe function
+     */
+    onConnectionChange(callback: (status: ConnectionStatus) => void): () => void;
+    /**
+     * Subscribe to errors
+     * @param callback - Called when an error occurs
+     * @returns Unsubscribe function
+     */
+    onError(callback: (error: Error) => void): () => void;
+    /**
+     * Send typing start event
+     * Notifies other users that current user started typing
+     */
+    sendTypingStart(): void;
+    /**
+     * Send typing stop event
+     * Notifies other users that current user stopped typing
+     */
+    sendTypingStop(): void;
+    /**
+     * Update current user metadata
+     * @param metadata - Partial user data to update
+     */
+    updateUserMetadata(metadata: Partial<PresenceUser>): void;
+    /**
+     * Send custom event to channel
+     * @param event - Event name
+     * @param data - Event payload (JSON serializable)
+     */
+    sendCustomEvent(event: string, data?: unknown): void;
+    /**
+     * Get current connection status
+     * @returns Current connection status
+     */
+    getConnectionStatus(): ConnectionStatus;
+    /**
+     * Get current user
+     * @returns Current user data
+     */
+    getCurrentUser(): PresenceUser;
+}

package/dist/components/ai/PresenceProvider/adapters/SupabaseAdapter.d.ts

@@ -0,0 +1,134 @@
+/**
+ * Supabase Presence Adapter
+ *
+ * Supabase Realtime integration for presence tracking.
+ * Requires @supabase/supabase-js to be installed.
+ *
+ * @example
+ * ```tsx
+ * import { createClient } from '@supabase/supabase-js';
+ *
+ * const supabase = createClient('YOUR_URL', 'YOUR_KEY');
+ * const adapter = new SupabasePresenceAdapter(supabase);
+ *
+ * <PresenceProvider adapter={adapter} currentUser={user} channel="room-123">
+ *   <YourApp />
+ * </PresenceProvider>
+ * ```
+ */
+import { PresenceAdapter, PresenceAdapterConfig } from './PresenceAdapter';
+import { PresenceUser, TypingUser, ConnectionStatus } from '../PresenceProvider.types';
+/**
+ * Supabase Realtime Channel interface
+ * (Minimal type definition for adapter, user should have @supabase/supabase-js installed)
+ */
+interface SupabaseRealtimeChannel {
+    on(event: string, filter: {
+        event: string;
+    }, callback: (payload: any) => void): SupabaseRealtimeChannel;
+    send(payload: {
+        type: string;
+        event: string;
+        payload: any;
+    }): Promise<any>;
+    track(payload: any): Promise<any>;
+    subscribe(callback?: (status: string) => void): SupabaseRealtimeChannel;
+    unsubscribe(): Promise<any>;
+    presenceState(): Record<string, any[]>;
+}
+/**
+ * Minimal SupabaseClient interface
+ */
+interface SupabaseClient {
+    channel(name: string, options?: {
+        config?: {
+            presence?: {
+                key: string;
+            };
+        };
+    }): SupabaseRealtimeChannel;
+}
+/**
+ * Supabase presence adapter
+ * Uses Supabase Realtime for presence tracking
+ *
+ * NOTE: Requires @supabase/supabase-js installed:
+ * npm install @supabase/supabase-js
+ */
+export declare class SupabasePresenceAdapter implements PresenceAdapter {
+    private client;
+    private channel;
+    private config;
+    private connectionStatus;
+    private typingStates;
+    private presenceCallbacks;
+    private typingCallbacks;
+    private connectionCallbacks;
+    private errorCallbacks;
+    constructor(client: SupabaseClient);
+    /**
+     * Connect to Supabase Realtime channel
+     */
+    connect(config: PresenceAdapterConfig): Promise<void>;
+    /**
+     * Disconnect from Supabase channel
+     */
+    disconnect(): Promise<void>;
+    /**
+     * Subscribe to presence changes
+     */
+    onPresenceChange(callback: (users: PresenceUser[]) => void): () => void;
+    /**
+     * Subscribe to typing changes
+     */
+    onTypingChange(callback: (users: TypingUser[]) => void): () => void;
+    /**
+     * Subscribe to connection changes
+     */
+    onConnectionChange(callback: (status: ConnectionStatus) => void): () => void;
+    /**
+     * Subscribe to errors
+     */
+    onError(callback: (error: Error) => void): () => void;
+    /**
+     * Send typing start
+     */
+    sendTypingStart(): void;
+    /**
+     * Send typing stop
+     */
+    sendTypingStop(): void;
+    /**
+     * Update user metadata
+     */
+    updateUserMetadata(metadata: Partial<PresenceUser>): void;
+    /**
+     * Send custom event
+     */
+    sendCustomEvent(event: string, data?: unknown): void;
+    /**
+     * Get connection status
+     */
+    getConnectionStatus(): ConnectionStatus;
+    /**
+     * Get current user
+     */
+    getCurrentUser(): PresenceUser;
+    /**
+     * Notify presence callbacks
+     */
+    private notifyPresenceChange;
+    /**
+     * Notify typing callbacks
+     */
+    private notifyTypingChange;
+    /**
+     * Notify connection callbacks
+     */
+    private notifyConnectionChange;
+    /**
+     * Notify error callbacks
+     */
+    private notifyError;
+}
+export {};