@itstepstorybookpackage/ui-kit 0.0.5 → 0.0.6

package/index.esm.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { ActivityIndicator, View, Text } from 'react-native';
 import styled from 'styled-components/native';
-import { useRef, useMemo, useEffect, useContext, createContext } from 'react';
+import { useState, useMemo, useEffect, useContext, createContext, useRef } from 'react';
 import { io } from 'socket.io-client';
 
 /******************************************************************************
@@ -130,15 +130,17 @@ function Notification(props) {
   });
 }
 
+// SocketClient.ts
 class SocketClient {
   constructor(url, options) {
+    // Зробимо socket приватним, щоб заборонити прямий доступ
     this.socket = null;
     this.url = url;
     this.options = options;
   }
   connect() {
     var _a;
-    if ((_a = this.socket) === null || _a === void 0 ? void 0 : _a.connected) return;
+    if ((_a = this.socket) === null || _a === void 0 ? void 0 : _a.connected) return this.socket;
     this.socket = io(this.url, Object.assign({
       transports: ['websocket'],
       reconnection: true
@@ -147,13 +149,14 @@ class SocketClient {
   }
   disconnect() {
     if (this.socket) {
+      this.socket.removeAllListeners();
       this.socket.disconnect();
       this.socket = null;
     }
   }
-  emit(event, data) {
+  emit(event, ...args) {
     var _a;
-    (_a = this.socket) === null || _a === void 0 ? void 0 : _a.emit(event, data);
+    (_a = this.socket) === null || _a === void 0 ? void 0 : _a.emit(event, ...args);
   }
   on(event, callback) {
     var _a;
@@ -171,79 +174,89 @@ class SocketClient {
     var _a;
     (_a = this.socket) === null || _a === void 0 ? void 0 : _a.offAny(callback);
   }
+  get isConnected() {
+    var _a;
+    return ((_a = this.socket) === null || _a === void 0 ? void 0 : _a.connected) || false;
+  }
+  once(event, callback) {
+    var _a;
+    (_a = this.socket) === null || _a === void 0 ? void 0 : _a.once(event, callback);
+  }
 }
 
 const SocketContext = /*#__PURE__*/createContext({
-  client: null
+  clients: {}
 });
 const SocketProvider = ({
-  url,
-  options,
-  enabled: _enabled = true,
+  configs,
   children
 }) => {
-  const clientRef = useRef(null);
-  const memoizedOptions = useMemo(() => JSON.stringify(options), [options]);
+  const [clients, setClients] = useState({});
+  const memoizedConfigs = useMemo(() => JSON.stringify(configs), [configs]);
   useEffect(() => {
-    var _a;
-    if (!_enabled) {
-      (_a = clientRef.current) === null || _a === void 0 ? void 0 : _a.disconnect();
-      return;
-    }
-    if (clientRef.current) {
-      clientRef.current.disconnect();
-    }
-    clientRef.current = new SocketClient(url, options);
-    clientRef.current.connect();
+    const parsedConfigs = JSON.parse(memoizedConfigs);
+    const newClients = {};
+    Object.entries(parsedConfigs).forEach(([key, config]) => {
+      if (config.enabled !== false) {
+        const client = new SocketClient(config.url, config.options || {});
+        client.connect();
+        newClients[key] = client;
+      }
+    });
+    setClients(newClients);
     return () => {
-      var _a;
-      (_a = clientRef.current) === null || _a === void 0 ? void 0 : _a.disconnect();
-      clientRef.current = null;
+      Object.values(newClients).forEach(client => client.disconnect());
     };
-  }, [url, memoizedOptions, _enabled]);
+  }, [memoizedConfigs]);
   return jsx(SocketContext.Provider, {
     value: {
-      client: clientRef.current
+      clients
     },
     children: children
   });
 };
-const useSocketRaw = () => useContext(SocketContext);
+const useSocketRaw = socketName => {
+  const {
+    clients
+  } = useContext(SocketContext);
+  return {
+    client: clients[socketName] || null
+  };
+};
 
-const useSocketHandlers = handlers => {
+const useSocketHandlers = (socketName, handlers) => {
   const {
     client
-  } = useSocketRaw();
+  } = useSocketRaw(socketName);
   const handlersRef = useRef(handlers);
   useEffect(() => {
     handlersRef.current = handlers;
   }, [handlers]);
   useEffect(() => {
-    if (!(client === null || client === void 0 ? void 0 : client.socket)) return;
-    const socket = client.socket;
+    if (!client) return;
     const activeListeners = {};
     Object.keys(handlersRef.current).forEach(eventName => {
       const listener = (...args) => {
         var _a, _b;
-        (_b = (_a = handlersRef.current)[eventName]) === null || _b === void 0 ? void 0 : _b.call(_a, ...args);
+        return (_b = (_a = handlersRef.current)[eventName]) === null || _b === void 0 ? void 0 : _b.call(_a, ...args);
       };
       activeListeners[eventName] = listener;
       if (eventName === 'onAny') {
-        socket.onAny(listener);
+        client.onAny(listener);
       } else {
-        socket.on(eventName, listener);
+        client.on(eventName, listener);
       }
     });
     return () => {
       Object.keys(activeListeners).forEach(eventName => {
         if (eventName === 'onAny') {
-          socket.offAny(activeListeners[eventName]);
+          client.offAny(activeListeners[eventName]);
         } else {
-          socket.off(eventName, activeListeners[eventName]);
+          client.off(eventName, activeListeners[eventName]);
         }
       });
     };
-  }, [client === null || client === void 0 ? void 0 : client.socket]);
+  }, [client]);
 };
 
 export { Button, Notification, SocketProvider, useSocketHandlers, useSocketRaw };

package/package.json

@@ -1,24 +1,17 @@
 {
   "name": "@itstepstorybookpackage/ui-kit",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "main": "./index.esm.js",
   "module": "./index.esm.js",
   "react-native": "./index.esm.js",
   "types": "./index.d.ts",
-  "browser": {
-    "fs": false,
-    "path": false,
-    "os": false,
-    "url": false,
-    "util": false,
-    "events": false,
-    "stream": false,
-    "child_process": false
-  },
   "exports": {
     ".": {
+      "types": "./index.d.ts",
+      "react-native": "./index.esm.js",
       "import": "./index.esm.js",
-      "require": "./index.esm.js"
+      "require": "./index.esm.js",
+      "default": "./index.esm.js"
     }
   },
   "peerDependencies": {

package/src/lib/utils/notification/SocketClient.d.ts

@@ -1,14 +1,16 @@
 import { Socket, SocketOptions, ManagerOptions } from 'socket.io-client';
 export declare class SocketClient {
-    socket: Socket | null;
+    private socket;
     readonly url: string;
     private options;
     constructor(url: string, options: Partial<ManagerOptions & SocketOptions>);
-    connect(): Socket<import("@socket.io/component-emitter").DefaultEventsMap, import("@socket.io/component-emitter").DefaultEventsMap> | undefined;
+    connect(): Socket<import("@socket.io/component-emitter").DefaultEventsMap, import("@socket.io/component-emitter").DefaultEventsMap>;
     disconnect(): void;
-    emit(event: string, data: any): void;
+    emit(event: string, ...args: any[]): void;
     on(event: string, callback: (...args: any[]) => void): void;
     off(event: string, callback?: (...args: any[]) => void): void;
     onAny(callback: (event: string, ...args: any[]) => void): void;
     offAny(callback?: (event: string, ...args: any[]) => void): void;
+    get isConnected(): boolean;
+    once(event: string, callback: (...args: any[]) => void): void;
 }

package/src/lib/utils/notification/SocketProvider.d.ts

@@ -1,13 +1,16 @@
 import React from 'react';
 import { SocketClient } from './SocketClient';
-interface SocketProviderProps {
+export interface SocketConfig {
     url: string;
-    options: any;
+    options?: any;
     enabled?: boolean;
+}
+interface SocketProviderProps {
+    configs: Record<string, SocketConfig>;
     children: React.ReactNode;
 }
 export declare const SocketProvider: React.FC<SocketProviderProps>;
-export declare const useSocketRaw: () => {
-    client: SocketClient | null;
+export declare const useSocketRaw: (socketName: string) => {
+    client: SocketClient;
 };
 export {};

package/src/lib/utils/notification/index.d.ts

@@ -0,0 +1,3 @@
+export * from './SocketProvider';
+export * from './useSocketHandlers';
+export * from './SocketClient';

package/src/lib/utils/notification/useSocketHandlers.d.ts

@@ -1,3 +1,3 @@
 type HandlersMap = Record<string, (...args: any[]) => void>;
-export declare const useSocketHandlers: (handlers: HandlersMap) => void;
+export declare const useSocketHandlers: (socketName: string, handlers: HandlersMap) => void;
 export {};