@itstepstorybookpackage/ui-kit 0.0.4 → 0.0.5

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 { useRef, useMemo, useEffect, useContext, createContext } from 'react';
+import { io } from 'socket.io-client';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -128,4 +130,120 @@ function Notification(props) {
   });
 }
 
-export { Button, Notification };
+class SocketClient {
+  constructor(url, options) {
+    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 = io(this.url, Object.assign({
+      transports: ['websocket'],
+      reconnection: true
+    }, this.options));
+    return this.socket;
+  }
+  disconnect() {
+    if (this.socket) {
+      this.socket.disconnect();
+      this.socket = null;
+    }
+  }
+  emit(event, data) {
+    var _a;
+    (_a = this.socket) === null || _a === void 0 ? void 0 : _a.emit(event, data);
+  }
+  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);
+  }
+}
+
+const SocketContext = /*#__PURE__*/createContext({
+  client: null
+});
+const SocketProvider = ({
+  url,
+  options,
+  enabled: _enabled = true,
+  children
+}) => {
+  const clientRef = useRef(null);
+  const memoizedOptions = useMemo(() => JSON.stringify(options), [options]);
+  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();
+    return () => {
+      var _a;
+      (_a = clientRef.current) === null || _a === void 0 ? void 0 : _a.disconnect();
+      clientRef.current = null;
+    };
+  }, [url, memoizedOptions, _enabled]);
+  return jsx(SocketContext.Provider, {
+    value: {
+      client: clientRef.current
+    },
+    children: children
+  });
+};
+const useSocketRaw = () => useContext(SocketContext);
+
+const useSocketHandlers = handlers => {
+  const {
+    client
+  } = useSocketRaw();
+  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;
+    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);
+      };
+      activeListeners[eventName] = listener;
+      if (eventName === 'onAny') {
+        socket.onAny(listener);
+      } else {
+        socket.on(eventName, listener);
+      }
+    });
+    return () => {
+      Object.keys(activeListeners).forEach(eventName => {
+        if (eventName === 'onAny') {
+          socket.offAny(activeListeners[eventName]);
+        } else {
+          socket.off(eventName, activeListeners[eventName]);
+        }
+      });
+    };
+  }, [client === null || client === void 0 ? void 0 : client.socket]);
+};
+
+export { Button, Notification, SocketProvider, useSocketHandlers, useSocketRaw };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itstepstorybookpackage/ui-kit",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "main": "./index.esm.js",
   "module": "./index.esm.js",
   "react-native": "./index.esm.js",
@@ -25,7 +25,8 @@
     "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,14 @@
+import { Socket, SocketOptions, ManagerOptions } from 'socket.io-client';
+export declare class SocketClient {
+    socket: Socket | null;
+    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;
+    disconnect(): void;
+    emit(event: string, data: 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;
+}

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

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

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

@@ -0,0 +1,3 @@
+type HandlersMap = Record<string, (...args: any[]) => void>;
+export declare const useSocketHandlers: (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;