@addev-be/ui 0.21.3 → 0.21.4

package/dist/providers/AuthenticationProvider/index.js

@@ -53,6 +53,7 @@ var react_1 = require("react");
 var services_1 = require("../../services");
 var helpers_1 = require("./helpers");
 exports.AuthenticationContext = (0, react_1.createContext)({
+    status: undefined,
     authenticate: function () { },
     isAuthenticated: false,
     login: function () { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
@@ -78,18 +79,24 @@ var AuthenticationProvider = function (_a) {
     var _b, _c;
     var permissions = _a.permissions, LoginComponent = _a.loginComponent, children = _a.children, requestHandlerName = _a.requestHandlerName;
     var allPermissions = (0, react_1.useMemo)(function () { return (__assign(__assign({}, helpers_1.basePermissions), permissions)); }, [permissions]);
-    var _d = (0, react_1.useState)(false), setWebSocketStatus = _d[1];
-    var _e = (0, react_1.useState)(sessionStorage.getItem('authToken') || undefined), token = _e[0], setToken = _e[1];
-    var _f = (0, react_1.useState)(undefined), user = _f[0], setUser = _f[1];
+    var _d = (0, react_1.useState)(false), isLoading = _d[0], setIsLoading = _d[1];
+    var _e = (0, react_1.useState)(false), setWebSocketStatus = _e[1];
+    var _f = (0, react_1.useState)(sessionStorage.getItem('authToken') || undefined), token = _f[0], setToken = _f[1];
+    var _g = (0, react_1.useState)(undefined), user = _g[0], setUser = _g[1];
+    var _h = (0, react_1.useState)(undefined), status = _h[0], setStatus = _h[1];
     var sendAuthenticateRequest = (0, services_1.useAuthenticateRequestHandler)(requestHandlerName);
     var sendLoginRequest = (0, services_1.useLoginRequestHandler)();
     var sendLogoutRequest = (0, services_1.useLogoutRequestHandler)();
     var sendSendRecoveryKeyRequest = (0, services_1.useSendRecoveryKeyRequestHandler)();
     var sendCheckRecoveryKeyRequest = (0, services_1.useCheckRecoveryKeyRequestHandler)();
     var sendResetPasswordRequest = (0, services_1.useResetPasswordRequestHandler)();
-    var authenticate = (0, react_1.useCallback)(function () {
-        if (token && !user) {
+    var authenticate = (0, react_1.useCallback)(function (force) {
+        if (force === void 0) { force = false; }
+        if (token && (!user || force) && !isLoading) {
+            setIsLoading(true);
             sendAuthenticateRequest({ token: token }).then(function (response) {
+                setIsLoading(false);
+                setStatus(response.status);
                 if (response.status === 0 && response.user) {
                     setUser(response.user);
                 }
@@ -98,11 +105,12 @@ var AuthenticationProvider = function (_a) {
                     setUser(undefined);
                 }
             }, function () {
+                setIsLoading(false);
                 setToken(undefined);
                 setUser(undefined);
             });
         }
-    }, [sendAuthenticateRequest, token, user]);
+    }, [isLoading, sendAuthenticateRequest, token, user]);
     (0, react_1.useEffect)(function () {
         if (token) {
             sessionStorage.setItem('authToken', token);
@@ -112,10 +120,16 @@ var AuthenticationProvider = function (_a) {
             sessionStorage.removeItem('authToken');
         }
     }, [authenticate, token]);
+    var _j = (0, react_1.useState)(false), networkStatus = _j[0], setNetworkStatus = _j[1];
     var login = (0, react_1.useCallback)(function (username, password) { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
+            if (isLoading) {
+                throw new Error('Already loading');
+            }
+            setIsLoading(true);
             return [2 /*return*/, sendLoginRequest({ username: username, password: password })
                     .then(function (response) {
+                    setIsLoading(false);
                     if (response.status === 0 && response.user) {
                         setToken(response.token);
                         setUser(response.user);
@@ -124,12 +138,13 @@ var AuthenticationProvider = function (_a) {
                     throw new Error("Login failed with status ".concat(response.status));
                 })
                     .catch(function () {
+                    setIsLoading(false);
                     setToken(undefined);
                     setUser(undefined);
                     return false;
                 })];
         });
-    }); }, [sendLoginRequest]);
+    }); }, [isLoading, sendLoginRequest]);
     var logout = (0, react_1.useCallback)(function () { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
             return [2 /*return*/, sendLogoutRequest({})
@@ -139,6 +154,7 @@ var AuthenticationProvider = function (_a) {
                     .finally(function () {
                     setToken(undefined);
                     setUser(undefined);
+                    setStatus(undefined);
                 })];
         });
     }); }, [sendLogoutRequest]);
@@ -178,7 +194,33 @@ var AuthenticationProvider = function (_a) {
         (_b = user === null || user === void 0 ? void 0 : user.profile) === null || _b === void 0 ? void 0 : _b.isAdmin,
         (_c = user === null || user === void 0 ? void 0 : user.profile) === null || _c === void 0 ? void 0 : _c.permissions,
     ]);
+    var webSocketStatusChanged = (0, react_1.useCallback)(function (status) {
+        if (!networkStatus && status) {
+            authenticate(true);
+        }
+        setNetworkStatus(status);
+    }, [authenticate, networkStatus]);
+    var webSocketErrorReceived = (0, react_1.useCallback)(function (_a) {
+        var status = _a.status;
+        // Handle logout when NotAuthenticated error is received
+        if (status === -4) {
+            logout();
+        }
+    }, [logout]);
+    (0, react_1.useEffect)(function () {
+        var subscription = services_1.WebSocketService.getInstance().status$.subscribe(webSocketStatusChanged);
+        return function () {
+            subscription.unsubscribe();
+        };
+    }, [webSocketStatusChanged]);
+    (0, react_1.useEffect)(function () {
+        var subscription = services_1.WebSocketService.getInstance().error$.subscribe(webSocketErrorReceived);
+        return function () {
+            subscription.unsubscribe();
+        };
+    }, [webSocketErrorReceived]);
     var contextValue = (0, react_1.useMemo)(function () { return ({
+        status: status,
         token: token,
         user: user,
         isAuthenticated: !!user,
@@ -192,24 +234,24 @@ var AuthenticationProvider = function (_a) {
         hasPermission: hasPermission,
         setToken: setToken,
     }); }, [
-        allPermissions,
+        status,
+        token,
+        user,
         authenticate,
-        checkRecoveryKey,
-        hasPermission,
         login,
         logout,
-        resetPassword,
         sendRecoveryKey,
-        token,
-        user,
-        setToken,
+        checkRecoveryKey,
+        resetPassword,
+        allPermissions,
+        hasPermission,
     ]);
     (0, react_1.useEffect)(function () {
         var _a;
         var subscription = (_a = services_1.WebSocketService.getInstance()) === null || _a === void 0 ? void 0 : _a.status$.subscribe(function (newStatus) {
             setWebSocketStatus(function (previousStatus) {
                 if (!previousStatus && newStatus) {
-                    authenticate();
+                    authenticate(true);
                 }
                 return newStatus;
             });

package/dist/providers/PortalsProvider/styles.js

@@ -17,5 +17,5 @@ exports.PortalsWrapper = styled_components_1.default.div.attrs({
 })(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 0;\n  height: 0;\n"], ["\n  width: 0;\n  height: 0;\n"])));
 exports.PortalContainer = styled_components_1.default.div.attrs({
     className: 'PortalContainer',
-})(templateObject_3 || (templateObject_3 = __makeTemplateObject([""], [""])));
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  z-index: 9999;\n  position: fixed;\n  inset: 0;\n"], ["\n  z-index: 9999;\n  position: fixed;\n  inset: 0;\n"])));
 var templateObject_1, templateObject_2, templateObject_3;

package/dist/providers/ThemeProvider/ThemeProvider.d.ts

@@ -1,6 +1,7 @@
 import { Theme } from './types';
 type ThemeProviderProps = {
     $theme?: Theme;
+    $darkTheme?: Theme;
     $darkMode?: boolean;
 };
 export declare const ThemeProvider: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ThemeProviderProps>> & string;

package/dist/providers/ThemeProvider/ThemeProvider.js

@@ -36,16 +36,18 @@ var getThemeColorsCss = function (colors, darkMode) {
         .join('');
 };
 exports.ThemeProvider = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: contents;\n  ", "\n\n  a, a:visited {\n    color: var(--color-primary-500);\n  }\n  a:active,\n  a:hover {\n    color: var(--color-primary-700);\n  }\n"], ["\n  display: contents;\n  ", "\n\n  a, a:visited {\n    color: var(--color-primary-500);\n  }\n  a:active,\n  a:hover {\n    color: var(--color-primary-700);\n  }\n"])), function (_a) {
-    var _b = _a.$theme, $theme = _b === void 0 ? {} : _b, $darkMode = _a.$darkMode;
+    var _b = _a.$theme, $theme = _b === void 0 ? {} : _b, $darkTheme = _a.$darkTheme, $darkMode = _a.$darkMode;
+    var theme = $darkMode ? $darkTheme !== null && $darkTheme !== void 0 ? $darkTheme : $theme : $theme;
+    var darkMode = !$darkTheme && $darkMode;
     return [
-        getThemeColorsCss($theme.colors, $darkMode),
-        getThemeValuesCss('font', $theme.fonts),
-        getThemeValuesCss('text', $theme.texts),
-        getThemeValuesCss('weight', $theme.weights),
-        getThemeValuesCss('space', $theme.spaces),
-        getThemeValuesCss('size', $theme.sizes),
-        getThemeValuesCss('rounded', $theme.rounded),
-        getThemeValuesCss('shadow', $theme.shadows),
+        getThemeColorsCss(theme.colors, darkMode),
+        getThemeValuesCss('font', theme.fonts),
+        getThemeValuesCss('text', theme.texts),
+        getThemeValuesCss('weight', theme.weights),
+        getThemeValuesCss('space', theme.spaces),
+        getThemeValuesCss('size', theme.sizes),
+        getThemeValuesCss('rounded', theme.rounded),
+        getThemeValuesCss('shadow', theme.shadows),
     ].join('');
 });
 var templateObject_1;

package/dist/providers/ThemeProvider/defaultTheme.d.ts

@@ -1,2 +1,3 @@
 import { Theme } from './types';
 export declare const defaultTheme: Theme;
+export declare const defaultDarkTheme: Theme;

package/dist/providers/ThemeProvider/defaultTheme.js

@@ -1,6 +1,18 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaultTheme = void 0;
+exports.defaultDarkTheme = exports.defaultTheme = void 0;
+var lodash_1 = require("lodash");
 exports.defaultTheme = {
     colors: {
         slate: {
@@ -328,6 +340,8 @@ exports.defaultTheme = {
             950: '#4c0519',
             1000: '#000000',
         },
+        base: 'neutral',
+        text: 'neutral',
         primary: 'sky',
         secondary: 'gray',
         success: 'emerald',
@@ -376,6 +390,12 @@ exports.defaultTheme = {
         '32': '8rem',
         '40': '10rem',
         '48': '12rem',
+        '56': '14rem',
+        '64': '16rem',
+        '72': '18rem',
+        '80': '20rem',
+        '96': '24rem',
+        '128': '32rem',
     },
     sizes: {
         '0': '0',
@@ -390,12 +410,19 @@ exports.defaultTheme = {
         '8': '2rem',
         '10': '2.5rem',
         '12': '3rem',
+        '14': '3.5rem',
         '16': '4rem',
         '20': '5rem',
         '24': '6rem',
         '32': '8rem',
         '40': '10rem',
         '48': '12rem',
+        '56': '14rem',
+        '64': '16rem',
+        '72': '18rem',
+        '80': '20rem',
+        '96': '24rem',
+        '128': '32rem',
     },
     rounded: {
         none: '0',
@@ -415,3 +442,8 @@ exports.defaultTheme = {
         '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
     },
 };
+exports.defaultDarkTheme = __assign(__assign({}, exports.defaultTheme), { colors: (0, lodash_1.mapValues)(exports.defaultTheme.colors, function (color) {
+        return typeof color === 'string'
+            ? color
+            : (0, lodash_1.mapKeys)(color, function (_, key) { return "".concat(1000 - Number(key)); });
+    }) });

package/dist/providers/ThemeProvider/helpers.d.ts

@@ -0,0 +1,12 @@
+import { Theme, ThemeColor, ThemeColorIntensity, ThemeColorWithIntensity } from './types';
+import { DeepPartial } from '../../typings';
+export declare const extendTheme: (base: Theme, override?: DeepPartial<Theme>) => Theme;
+export declare const extendDefaultTheme: (override?: DeepPartial<Theme>) => Theme;
+export declare const extendDefaultDarkTheme: (override?: DeepPartial<Theme>) => Theme;
+export declare const getColor: (colorWithIntensity: ThemeColorWithIntensity) => ThemeColor;
+export declare const getIntensity: (colorWithIntensity: ThemeColorWithIntensity) => ThemeColorIntensity;
+export declare const isThemeColorWithIntensity: (color: ThemeColor | ThemeColorWithIntensity) => color is ThemeColorWithIntensity;
+export declare const getColorWithIntensity: (color: ThemeColor | ThemeColorWithIntensity, defaultIntensity?: ThemeColorIntensity) => ThemeColorWithIntensity;
+export declare const extractColorAndIntensity: (color: ThemeColor | ThemeColorWithIntensity, defaultIntensity?: ThemeColorIntensity) => [ThemeColor, ThemeColorIntensity];
+export declare const darkenColor: (color: ThemeColor | ThemeColorWithIntensity, amount?: number) => ThemeColorWithIntensity;
+export declare const lightenColor: (color: ThemeColor | ThemeColorWithIntensity, amount?: number) => ThemeColorWithIntensity;

package/dist/providers/ThemeProvider/helpers.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.lightenColor = exports.darkenColor = exports.extractColorAndIntensity = exports.getColorWithIntensity = exports.isThemeColorWithIntensity = exports.getIntensity = exports.getColor = exports.extendDefaultDarkTheme = exports.extendDefaultTheme = exports.extendTheme = void 0;
+var defaultTheme_1 = require("./defaultTheme");
+var lodash_1 = require("lodash");
+var extendTheme = function (base, override) { return (0, lodash_1.defaultsDeep)({}, override, base); };
+exports.extendTheme = extendTheme;
+var extendDefaultTheme = function (override) {
+    return (0, exports.extendTheme)(defaultTheme_1.defaultTheme, override);
+};
+exports.extendDefaultTheme = extendDefaultTheme;
+var extendDefaultDarkTheme = function (override) {
+    return (0, exports.extendTheme)(defaultTheme_1.defaultDarkTheme, override);
+};
+exports.extendDefaultDarkTheme = extendDefaultDarkTheme;
+var getColor = function (colorWithIntensity) {
+    var colorName = colorWithIntensity.split('-')[0];
+    return colorName;
+};
+exports.getColor = getColor;
+var getIntensity = function (colorWithIntensity) {
+    var _a = colorWithIntensity.split('-'), intensity = _a[1];
+    return Number(intensity);
+};
+exports.getIntensity = getIntensity;
+var isThemeColorWithIntensity = function (color) {
+    return color.indexOf('-') >= 0;
+};
+exports.isThemeColorWithIntensity = isThemeColorWithIntensity;
+var getColorWithIntensity = function (color, defaultIntensity) {
+    if (defaultIntensity === void 0) { defaultIntensity = 300; }
+    if ((0, exports.isThemeColorWithIntensity)(color)) {
+        return color;
+    }
+    return "".concat(color, "-").concat(defaultIntensity);
+};
+exports.getColorWithIntensity = getColorWithIntensity;
+var extractColorAndIntensity = function (color, defaultIntensity) {
+    if (defaultIntensity === void 0) { defaultIntensity = 300; }
+    if ((0, exports.isThemeColorWithIntensity)(color)) {
+        var _a = color.split('-'), colorName = _a[0], intensity = _a[1];
+        return [
+            colorName,
+            intensity ? Number(intensity) : defaultIntensity,
+        ];
+    }
+    return [color, defaultIntensity];
+};
+exports.extractColorAndIntensity = extractColorAndIntensity;
+var darkenColor = function (color, amount) {
+    if (amount === void 0) { amount = 100; }
+    var _a = (0, exports.extractColorAndIntensity)(color), colorName = _a[0], intensity = _a[1];
+    var newIntensity = (Math.floor(Math.min(intensity + amount, 950) / 100) *
+        100);
+    return "".concat(colorName, "-").concat(newIntensity);
+};
+exports.darkenColor = darkenColor;
+var lightenColor = function (color, amount) {
+    if (amount === void 0) { amount = 100; }
+    var _a = (0, exports.extractColorAndIntensity)(color), colorName = _a[0], intensity = _a[1];
+    var newIntensity = (Math.floor(Math.max(intensity - amount, 0) / 100) *
+        100);
+    return "".concat(colorName, "-").concat(newIntensity);
+};
+exports.lightenColor = lightenColor;

package/dist/providers/ThemeProvider/index.d.ts

@@ -1,3 +1,4 @@
 export { ThemeProvider } from './ThemeProvider';
 export * from './types';
 export { defaultTheme } from './defaultTheme';
+export * from './helpers';

package/dist/providers/ThemeProvider/index.js

@@ -20,3 +20,4 @@ Object.defineProperty(exports, "ThemeProvider", { enumerable: true, get: functio
 __exportStar(require("./types"), exports);
 var defaultTheme_1 = require("./defaultTheme");
 Object.defineProperty(exports, "defaultTheme", { enumerable: true, get: function () { return defaultTheme_1.defaultTheme; } });
+__exportStar(require("./helpers"), exports);

package/dist/providers/ThemeProvider/types.d.ts

@@ -2,13 +2,15 @@ import { DeepPartial } from '../../typings';
 export type ThemeColorIntensity = 0 | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950 | 1000;
 export type ThemeColorDefinition = Record<ThemeColorIntensity, string>;
 export type ThemeRawColor = 'slate' | 'gray' | 'zinc' | 'neutral' | 'stone' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose';
-export type ThemePredefinedColor = 'primary' | 'secondary' | 'neutral' | 'success' | 'warning' | 'danger' | 'info';
+export type ThemePredefinedColor = 'base' | 'text' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';
 export type ThemeColor = ThemeRawColor | ThemePredefinedColor;
 export type ThemeColorReference = ThemeColor | ThemeColorDefinition;
+export type ThemeColorWithIntensity = `${ThemeColor}-${ThemeColorIntensity}`;
 export type ThemeTextSize = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';
 export type ThemeFontFamily = 'sans' | 'serif' | 'mono';
 export type ThemeFontWeight = 'light' | 'normal' | 'bold';
-export type ThemeSpace = '0' | '0_5' | '1' | '1_5' | '2' | '3' | '4' | '5' | '6' | '8' | '10' | '12' | '16' | '20' | '24' | '32' | '40' | '48';
+export type ThemeSpace = '0' | '0_5' | '1' | '1_5' | '2' | '3' | '4' | '5' | '6' | '8' | '10' | '12' | '14' | '16' | '20' | '24' | '32' | '40' | '48' | '56' | '64' | '72' | '80' | '96' | '128';
+export type ThemeSpaceWithNegative = ThemeSpace | `-${ThemeSpace}`;
 export type ThemeSize = '0' | '0_5' | '1' | '1_5' | '2' | '3' | '4' | '5' | '6' | '8' | '10' | '12' | '16' | '20' | '24' | '32' | '40' | '48';
 export type ThemeRounded = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full';
 export type ThemeShadow = 'sm' | 'md' | 'lg' | 'xl' | '2xl';

package/dist/providers/TrackingProvider/hooks.d.ts

@@ -0,0 +1 @@
+export declare const useLocationTracking: () => void;

package/dist/providers/TrackingProvider/hooks.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLocationTracking = void 0;
+var react_1 = require("react");
+var _1 = require(".");
+var react_router_dom_1 = require("react-router-dom");
+var useLocationTracking = function () {
+    var sendEvent = (0, react_1.useContext)(_1.TrackingContext).sendEvent;
+    var _a = (0, react_router_dom_1.useLocation)(), pathname = _a.pathname, search = _a.search;
+    var pathWithSearch = "".concat(pathname).concat(search);
+    (0, react_1.useEffect)(function () {
+        sendEvent('PageView', { path: pathWithSearch });
+    }, [pathWithSearch, sendEvent]);
+};
+exports.useLocationTracking = useLocationTracking;

package/dist/providers/TrackingProvider/index.d.ts

@@ -0,0 +1,8 @@
+import { FC, PropsWithChildren } from 'react';
+export type TrackingContextType = {
+    sendEvent: (name: string, details?: Record<string, string | number | boolean | null>) => void;
+    enableTracking: () => void;
+    disableTracking: () => void;
+};
+export declare const TrackingContext: import("react").Context<TrackingContextType>;
+export declare const TrackingProvider: FC<PropsWithChildren>;

package/dist/providers/TrackingProvider/index.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TrackingProvider = exports.TrackingContext = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var services_1 = require("../../services");
+exports.TrackingContext = (0, react_1.createContext)({
+    sendEvent: function () { },
+    enableTracking: function () { },
+    disableTracking: function () { },
+});
+var TrackingProvider = function (_a) {
+    var children = _a.children;
+    var _b = (0, react_1.useState)(true), trackingEnabled = _b[0], setTrackingEnabled = _b[1];
+    var sendTrackingEvent = (0, services_1.useSendTrackingEventRequestHandler)();
+    var sendEvent = (0, react_1.useCallback)(function (name, details) {
+        if (details === void 0) { details = {}; }
+        if (trackingEnabled) {
+            sendTrackingEvent({
+                data: {
+                    id: '',
+                    name: name,
+                    details: details,
+                },
+            });
+        }
+    }, [sendTrackingEvent, trackingEnabled]);
+    var enableTracking = (0, react_1.useCallback)(function () {
+        setTrackingEnabled(true);
+    }, []);
+    var disableTracking = (0, react_1.useCallback)(function () {
+        setTrackingEnabled(false);
+    }, []);
+    var value = (0, react_1.useMemo)(function () { return ({
+        sendEvent: sendEvent,
+        enableTracking: enableTracking,
+        disableTracking: disableTracking,
+    }); }, [disableTracking, enableTracking, sendEvent]);
+    return ((0, jsx_runtime_1.jsx)(exports.TrackingContext.Provider, { value: value, children: children }));
+};
+exports.TrackingProvider = TrackingProvider;

package/dist/providers/UiProviders/index.d.ts

@@ -1,8 +1,11 @@
 import '../../styles/index.scss';
 import '../../styles/animations.scss';
 import { FC, PropsWithChildren } from 'react';
+import { Theme } from '../ThemeProvider/types';
 export type UiProvidersProps = PropsWithChildren<{
-    $darkMode?: boolean;
+    theme?: Theme;
+    darkTheme?: Theme;
+    darkMode?: boolean;
 }>;
 export type UiContextType = {
     rootRect: DOMRect;

package/dist/providers/UiProviders/index.js

@@ -32,13 +32,14 @@ var react_1 = require("react");
 var PortalsProvider_1 = require("../PortalsProvider");
 var SettingsProvider_1 = require("../SettingsProvider");
 var ThemeProvider_1 = require("../ThemeProvider/ThemeProvider");
+var TrackingProvider_1 = require("../TrackingProvider");
 var defaultTheme_1 = require("../ThemeProvider/defaultTheme");
 exports.UiContext = (0, react_1.createContext)({
     rootRect: new DOMRect(),
     getElementScreenRect: function () { return new DOMRect(); },
 });
 var UiProviders = function (_a) {
-    var $darkMode = _a.$darkMode, children = _a.children;
+    var _b = _a.theme, theme = _b === void 0 ? defaultTheme_1.defaultTheme : _b, darkTheme = _a.darkTheme, darkMode = _a.darkMode, children = _a.children;
     var rootRef = (0, react_1.useRef)(null);
     var getElementScreenRect = (0, react_1.useCallback)(function (element) {
         var _a, _b, _c;
@@ -57,6 +58,6 @@ var UiProviders = function (_a) {
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [rootRef.current]);
-    return ((0, jsx_runtime_1.jsx)(ThemeProvider_1.ThemeProvider, { "$theme": defaultTheme_1.defaultTheme, "$darkMode": $darkMode, children: (0, jsx_runtime_1.jsx)(exports.UiContext.Provider, { value: value, children: (0, jsx_runtime_1.jsx)(styles.Root, { ref: rootRef, children: (0, jsx_runtime_1.jsx)(SettingsProvider_1.SettingsProvider, { children: (0, jsx_runtime_1.jsx)(PortalsProvider_1.PortalsProvider, { children: children }) }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(ThemeProvider_1.ThemeProvider, { "$theme": theme, "$darkTheme": darkTheme, "$darkMode": darkMode, children: (0, jsx_runtime_1.jsx)(exports.UiContext.Provider, { value: value, children: (0, jsx_runtime_1.jsx)(styles.Root, { ref: rootRef, children: (0, jsx_runtime_1.jsx)(SettingsProvider_1.SettingsProvider, { children: (0, jsx_runtime_1.jsx)(TrackingProvider_1.TrackingProvider, { children: (0, jsx_runtime_1.jsx)(PortalsProvider_1.PortalsProvider, { children: children }) }) }) }) }) }));
 };
 exports.UiProviders = UiProviders;

package/dist/providers/UiProviders/styles.js

@@ -9,5 +9,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Root = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.Root = styled_components_1.default.div.attrs({ className: 'Root' })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  font-family: var(--font-sans);\n  font-size: var(--text-base);\n  color: var(--color-neutral-900);\n  width: 100%;\n  height: 100%;\n"], ["\n  position: relative;\n  font-family: var(--font-sans);\n  font-size: var(--text-base);\n  color: var(--color-neutral-900);\n  width: 100%;\n  height: 100%;\n"])));
+exports.Root = styled_components_1.default.div.attrs({ className: 'Root' })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  font-family: var(--font-sans);\n  font-size: var(--text-base);\n  color: var(--color-text-800);\n  width: 100%;\n  height: 100%;\n"], ["\n  position: relative;\n  font-family: var(--font-sans);\n  font-size: var(--text-base);\n  color: var(--color-text-800);\n  width: 100%;\n  height: 100%;\n"])));
 var templateObject_1;

package/dist/providers/index.d.ts

@@ -1,5 +1,7 @@
 export * from './AuthenticationProvider';
 export * from './PortalsProvider';
 export * from './ThemeProvider';
+export * from './TrackingProvider';
 export * from './UiProviders';
+export * from './TrackingProvider/hooks';
 export * from './hooks';

package/dist/providers/index.js

@@ -17,5 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./AuthenticationProvider"), exports);
 __exportStar(require("./PortalsProvider"), exports);
 __exportStar(require("./ThemeProvider"), exports);
+__exportStar(require("./TrackingProvider"), exports);
 __exportStar(require("./UiProviders"), exports);
+__exportStar(require("./TrackingProvider/hooks"), exports);
 __exportStar(require("./hooks"), exports);

package/dist/services/WebSocketService.d.ts

@@ -1,11 +1,19 @@
 import { Config } from '../config';
 import { Subject } from 'rxjs';
+export declare class WebSocketError extends Error {
+    status: number;
+    constructor(status: number, message: string);
+}
 export declare class WebSocketService {
     private static instance;
     private config;
     private socket;
     status: boolean | undefined;
     status$: Subject<boolean | undefined>;
+    error$: Subject<{
+        status: number;
+        message: string;
+    }>;
     private queue;
     private promises;
     onOpen?: () => void;

package/dist/services/WebSocketService.js

@@ -1,13 +1,40 @@
 "use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.WebSocketService = void 0;
+exports.WebSocketService = exports.WebSocketError = void 0;
 var rxjs_1 = require("rxjs");
 var uuid_1 = require("uuid");
+var WebSocketError = /** @class */ (function (_super) {
+    __extends(WebSocketError, _super);
+    function WebSocketError(status, message) {
+        var _this = _super.call(this, message) || this;
+        _this.status = status;
+        _this.name = 'WebSocketError';
+        return _this;
+    }
+    return WebSocketError;
+}(Error));
+exports.WebSocketError = WebSocketError;
 var WebSocketService = /** @class */ (function () {
     function WebSocketService(config) {
         this.socket = null;
         this.status = undefined;
         this.status$ = new rxjs_1.Subject();
+        this.error$ = new rxjs_1.Subject();
         this.queue = [];
         this.promises = {};
         this.onOpen = function () { };
@@ -84,6 +111,7 @@ var WebSocketService = /** @class */ (function () {
             var request = { id: id, name: name, data: data };
             _this.promises[id] = { resolve: resolve, reject: reject };
             if (!_this.socket || !_this.status) {
+                console.log('[WS] Queuing request:', request);
                 _this.queue.push(request);
                 return;
             }
@@ -103,7 +131,11 @@ var WebSocketService = /** @class */ (function () {
                 console.log('[WS] Received response:', response);
                 if (typeof ((_a = response.data) === null || _a === void 0 ? void 0 : _a.status) === 'number' &&
                     response.data.status < 0) {
-                    this.promises[response.id].reject(new Error(response.data.message));
+                    this.promises[response.id].reject(new WebSocketError(response.data.status, response.data.message));
+                    this.error$.next({
+                        status: response.data.status,
+                        message: response.data.message || 'Unknown error',
+                    });
                 }
                 else {
                     this.promises[response.id].resolve(response.data);

package/dist/services/globalSearch.d.ts

@@ -1,6 +1,10 @@
-import { SqlRequestRow } from './sqlRequests';
+import { ConditionDTO, SqlRequestRow } from './sqlRequests';
+import { OrderByDTO } from './sqlRequests';
 export type GlobalSearchRequestDTO = {
-    types: string[];
+    types: Record<string, {
+        conditions?: ConditionDTO[];
+        orderBy?: OrderByDTO[];
+    }>;
     searchTerm: string;
     limit?: number;
 };

package/dist/services/hooks.d.ts

@@ -1,3 +1,13 @@
 export declare const useLoadingRequestHandler: <TReq, TRes>(name: string) => ((data: TReq) => Promise<TRes>);
 export declare const useWebSocketRequestHandler: <TReq, TRes>(name: string) => ((data: TReq) => Promise<TRes>);
 export declare const useHttpRequestHandler: <TReq, TRes>(name: string) => ((data: TReq, files?: Record<string, File>) => Promise<TRes>);
+export declare const useRequestState: <TReq, TRes>(name: string, loading?: boolean) => {
+    status: number | undefined;
+    isInitial: boolean;
+    isLoading: boolean;
+    isSuccess: boolean;
+    isError: boolean;
+    response: TRes | null;
+    sendRequest: (data: TReq) => Promise<TRes | undefined>;
+    reset: () => void;
+};