@itstepstorybookpackage/ui-kit 0.0.4 → 0.0.6

package/index.esm.js

@@ -1,6 +1,8 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { ActivityIndicator, View, Text } from 'react-native';
 import styled from 'styled-components/native';
+import { useState, useMemo, useEffect, useContext, createContext, useRef } from 'react';
+import { io } from 'socket.io-client';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -128,4 +130,133 @@ function Notification(props) {
   });
 }
 
-export { Button, Notification };
+// 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 this.socket;
+    this.socket = io(this.url, Object.assign({
+      transports: ['websocket'],
+      reconnection: true
+    }, this.options));
+    return this.socket;
+  }
+  disconnect() {
+    if (this.socket) {
+      this.socket.removeAllListeners();
+      this.socket.disconnect();
+      this.socket = null;
+    }
+  }
+  emit(event, ...args) {
+    var _a;
+    (_a = this.socket) === null || _a === void 0 ? void 0 : _a.emit(event, ...args);
+  }
+  on(event, callback) {
+    var _a;
+    (_a = this.socket) === null || _a === void 0 ? void 0 : _a.on(event, callback);
+  }
+  off(event, callback) {
+    var _a;
+    (_a = this.socket) === null || _a === void 0 ? void 0 : _a.off(event, callback);
+  }
+  onAny(callback) {
+    var _a;
+    (_a = this.socket) === null || _a === void 0 ? void 0 : _a.onAny(callback);
+  }
+  offAny(callback) {
+    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({
+  clients: {}
+});
+const SocketProvider = ({
+  configs,
+  children
+}) => {
+  const [clients, setClients] = useState({});
+  const memoizedConfigs = useMemo(() => JSON.stringify(configs), [configs]);
+  useEffect(() => {
+    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 () => {
+      Object.values(newClients).forEach(client => client.disconnect());
+    };
+  }, [memoizedConfigs]);
+  return jsx(SocketContext.Provider, {
+    value: {
+      clients
+    },
+    children: children
+  });
+};
+const useSocketRaw = socketName => {
+  const {
+    clients
+  } = useContext(SocketContext);
+  return {
+    client: clients[socketName] || null
+  };
+};
+
+const useSocketHandlers = (socketName, handlers) => {
+  const {
+    client
+  } = useSocketRaw(socketName);
+  const handlersRef = useRef(handlers);
+  useEffect(() => {
+    handlersRef.current = handlers;
+  }, [handlers]);
+  useEffect(() => {
+    if (!client) return;
+    const activeListeners = {};
+    Object.keys(handlersRef.current).forEach(eventName => {
+      const listener = (...args) => {
+        var _a, _b;
+        return (_b = (_a = handlersRef.current)[eventName]) === null || _b === void 0 ? void 0 : _b.call(_a, ...args);
+      };
+      activeListeners[eventName] = listener;
+      if (eventName === 'onAny') {
+        client.onAny(listener);
+      } else {
+        client.on(eventName, listener);
+      }
+    });
+    return () => {
+      Object.keys(activeListeners).forEach(eventName => {
+        if (eventName === 'onAny') {
+          client.offAny(activeListeners[eventName]);
+        } else {
+          client.off(eventName, activeListeners[eventName]);
+        }
+      });
+    };
+  }, [client]);
+};
+
+export { Button, Notification, SocketProvider, useSocketHandlers, useSocketRaw };

package/package.json

@@ -1,31 +1,25 @@
 {
   "name": "@itstepstorybookpackage/ui-kit",
-  "version": "0.0.4",
+  "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": {
     "react": "*",
     "react-native": "*",
     "react-native-svg": "*",
-    "styled-components": "*"
+    "styled-components": "*",
+    "socket.io-client": "*"
   },
   "type": "module"
 }

package/src/index.d.ts

@@ -1,2 +1,4 @@
 export * from './lib/components/button/button';
 export * from './lib/mystat/notification/notification';
+export * from './lib/utils/notification/SocketProvider';
+export * from './lib/utils/notification/useSocketHandlers';

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

@@ -0,0 +1,16 @@
+import { Socket, SocketOptions, ManagerOptions } from 'socket.io-client';
+export declare class SocketClient {
+    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>;
+    disconnect(): 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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { SocketClient } from './SocketClient';
+export interface SocketConfig {
+    url: string;
+    options?: any;
+    enabled?: boolean;
+}
+interface SocketProviderProps {
+    configs: Record<string, SocketConfig>;
+    children: React.ReactNode;
+}
+export declare const SocketProvider: React.FC<SocketProviderProps>;
+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

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

package/src/empty-shim.d.ts

@@ -1,29 +0,0 @@
-export declare const join: () => string;
-export declare const resolve: () => string;
-export declare const dirname: () => string;
-export declare const basename: () => string;
-export declare const extname: () => string;
-export declare const parse: () => {};
-export declare const format: () => string;
-export declare const sep = "/";
-export declare const delimiter = ":";
-export declare const readFileSync: () => string;
-export declare const writeFileSync: () => void;
-export declare const existsSync: () => boolean;
-export declare const promises: {};
-declare const defaultObj: {
-    join: () => string;
-    resolve: () => string;
-    dirname: () => string;
-    basename: () => string;
-    extname: () => string;
-    parse: () => {};
-    format: () => string;
-    sep: string;
-    delimiter: string;
-    readFileSync: () => string;
-    writeFileSync: () => void;
-    existsSync: () => boolean;
-    promises: {};
-};
-export default defaultObj;